@riverbankcms/sdk 0.153.0 → 0.154.0

package/dist/_dts/theme-core/src/generated/containerResponsiveThemeCss.d.ts

@@ -2,4 +2,4 @@
  * Auto-generated by scripts/generate-container-responsive-css.ts
  * Do not edit by hand.
  */
-export declare const containerResponsiveThemeCss = "/*\n * Blocks Theme CSS\n *\n * Import order matters for CSS cascade.\n * SDK bundler (packages/sdk/tsup.config.ts) parses this file to determine bundle order.\n *\n * Layer order: rb-theme (lowest priority) < rb-utilities (highest priority)\n * This allows utility classes like .rb-text-sm to override theme defaults.\n *\n * 1. Layer order declaration\n * 2. RB utilities (@layer rb-utilities) - highest priority, overrides theme\n * 3. Core theme styles (@layer rb-theme) - typography, prose, gradients\n * 4. Accordion animations - keyframes and animation rules\n * 5. Block-specific static CSS - all block styling\n */\n@layer rb-theme, rb-utilities;\n\n/*\n * RB Utilities (CSS-only)\n *\n * Lightweight, hand-maintained utility classes used by block runtime markup.\n * These replace Tailwind utility usage without requiring Tailwind CLI/runtime.\n */\n\n@layer rb-utilities {\n  /* Screen-reader only */\n  .rb-sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* Labels */\n  .rb-label {\n    font-size: 0.75rem;\n    line-height: 1rem;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  /* Eyebrow text - small uppercase labels for section introductions.\n     Each property resolves from the optional eyebrow typographic role\n     (--fs/--fw/--ls/--tt-eyebrow, emitted only when the theme sets them),\n     with the historical hardcoded values as fallbacks so existing themes\n     are unchanged. font-family falls back to the body font likewise. */\n  .rb-eyebrow {\n    font-family: var(--font-eyebrow, var(--font-body));\n    font-size: var(--fs-eyebrow, 0.875rem);\n    font-weight: var(--fw-eyebrow, 600);\n    letter-spacing: var(--ls-eyebrow, 0.025em);\n    text-transform: var(--tt-eyebrow, uppercase);\n  }\n  .rb-eyebrow-treatment-accent {\n    color: rgb(var(--tb-accent));\n  }\n  .rb-eyebrow-treatment-pill {\n    align-self: center;\n    display: inline-flex;\n    width: fit-content;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 46%, transparent);\n    border-radius: 9999px;\n    background: color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);\n    padding: 0.5rem 1rem;\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    line-height: 1;\n  }\n  .rb-eyebrow-treatment-pill.rb-eyebrow-treatment-accent {\n    border-color: rgb(var(--tb-accent));\n    border-width: 2px;\n    background: rgb(var(--tb-onAccent, 255 255 255) / 0.7);\n    padding: 0.85rem 1.25rem;\n    color: rgb(var(--tb-accent));\n  }\n  .rb-eyebrow-treatment-pill-bounce {\n    animation: rb-eyebrow-pill-bounce 2s ease-in-out infinite;\n    margin: 0 auto 1.5rem;\n    transform-origin: center;\n    will-change: transform;\n  }\n  @keyframes rb-eyebrow-pill-bounce {\n    0% {\n      transform: translateY(-25%);\n      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n    }\n    50% {\n      transform: none;\n      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    }\n    100% {\n      transform: translateY(-25%);\n      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .rb-eyebrow-treatment-pill-bounce {\n      animation: none;\n      will-change: auto;\n    }\n  }\n\n  /* Caption text - small secondary text for captions and metadata (non-uppercase) */\n  .rb-caption {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    font-weight: 400;\n  }\n\n  /* Media shape treatments */\n  .rb-media-shape-square,\n  .rb-media-shape-rounded,\n  .rb-media-shape-circle,\n  .rb-media-shape-arch {\n    overflow: hidden;\n  }\n  .rb-media-shape-square {\n    border-radius: 0;\n  }\n  .rb-media-shape-rounded {\n    border-radius: var(--rb-media-shape-radius, 1rem);\n  }\n  .rb-media-shape-circle {\n    border-radius: 9999px;\n  }\n  .rb-media-shape-arch {\n    border-radius: 9999px 9999px var(--rb-media-shape-arch-base-radius, 0.125rem)\n      var(--rb-media-shape-arch-base-radius, 0.125rem);\n  }\n\n  /* Navigation typography */\n  .rb-nav-text {\n    font-size: 0.875rem;\n    font-weight: 500;\n  }\n  .rb-nav-text-mobile {\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  /* Display */\n  .rb-min-h-screen {\n    min-height: 100vh;\n  }\n  .rb-min-h-full {\n    min-height: 100%;\n  }\n  .rb-block {\n    display: block;\n  }\n  .rb-inline-block {\n    display: inline-block;\n  }\n  .rb-flex {\n    display: flex;\n  }\n  .rb-inline-flex {\n    display: inline-flex;\n  }\n  .rb-grid {\n    display: grid;\n  }\n  .rb-hidden {\n    display: none;\n  }\n  .rb-isolate {\n    isolation: isolate;\n  }\n\n  /* Position */\n  .rb-relative {\n    position: relative;\n  }\n  .rb-absolute {\n    position: absolute;\n  }\n  .rb-fixed {\n    position: fixed;\n  }\n  .rb-sticky {\n    position: sticky;\n  }\n  .rb-inset-0 {\n    inset: 0;\n  }\n  .rb-top-0 {\n    top: 0;\n  }\n  .rb-top-4 {\n    top: 1rem;\n  }\n  .rb-top-full {\n    top: 100%;\n  }\n  .rb-top-1\\/2 {\n    top: 50%;\n  }\n  .rb-bottom-0 {\n    bottom: 0;\n  }\n  .rb-left-0 {\n    left: 0;\n  }\n  .rb-left-1\\/2 {\n    left: 50%;\n  }\n  .rb-right-0 {\n    right: 0;\n  }\n\n  /* Anchors (background positioning helpers) */\n  .rb-anchor-center {\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n  .rb-anchor-top {\n    left: 50%;\n    top: 0;\n    transform: translateX(-50%);\n  }\n  .rb-anchor-bottom {\n    left: 50%;\n    bottom: 0;\n    transform: translateX(-50%);\n  }\n  .rb-anchor-left {\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .rb-anchor-right {\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .rb-anchor-top-left {\n    left: 0;\n    top: 0;\n  }\n  .rb-anchor-top-right {\n    right: 0;\n    top: 0;\n  }\n  .rb-anchor-bottom-left {\n    left: 0;\n    bottom: 0;\n  }\n  .rb-anchor-bottom-right {\n    right: 0;\n    bottom: 0;\n  }\n\n  /* Z-index */\n  .rb-z-neg-10 {\n    z-index: -10;\n  }\n  .rb-z-0 {\n    z-index: 0;\n  }\n  .rb-z-10 {\n    z-index: 10;\n  }\n  .rb-z-40 {\n    z-index: 40;\n  }\n  .rb-z-50 {\n    z-index: 50;\n  }\n\n  /* Sizing */\n  .rb-w-auto {\n    width: auto;\n  }\n  .rb-w-full {\n    width: 100%;\n  }\n  .rb-w-calc-100-minus-2rem {\n    width: calc(100% - 2rem);\n  }\n  .rb-w-4 {\n    width: 1rem;\n  }\n  .rb-w-5 {\n    width: 1.25rem;\n  }\n  .rb-w-10 {\n    width: 2.5rem;\n  }\n  .rb-w-12 {\n    width: 3rem;\n  }\n  .rb-w-24 {\n    width: 6rem;\n  }\n  .rb-h-0\\.5 {\n    height: 0.125rem;\n  }\n  .rb-h-4 {\n    height: 1rem;\n  }\n  .rb-h-5 {\n    height: 1.25rem;\n  }\n  .rb-h-8 {\n    height: 2rem;\n  }\n  .rb-h-10 {\n    height: 2.5rem;\n  }\n  .rb-h-12 {\n    height: 3rem;\n  }\n  .rb-h-16 {\n    height: 4rem;\n  }\n  .rb-h-24 {\n    height: 6rem;\n  }\n  .rb-h-32 {\n    height: 8rem;\n  }\n  .rb-h-48 {\n    height: 12rem;\n  }\n  .rb-h-56 {\n    height: 14rem;\n  }\n  .rb-h-auto {\n    height: auto;\n  }\n  .rb-h-full {\n    height: 100%;\n  }\n  .rb-section-min-h-banner {\n    min-height: clamp(16rem, 34svh, 24rem);\n  }\n  .rb-section-min-h-hero {\n    min-height: clamp(32rem, 62svh, 44rem);\n  }\n  .rb-section-min-h-immersive {\n    min-height: clamp(38rem, 78svh, 54rem);\n  }\n  .rb-section-min-h-banner > .rb-container,\n  .rb-section-min-h-hero > .rb-container,\n  .rb-section-min-h-immersive > .rb-container {\n    min-height: inherit;\n  }\n  .rb-min-w-0 {\n    min-width: 0;\n  }\n  .rb-min-w-12rem {\n    min-width: 12rem;\n  }\n  .rb-max-w-none {\n    max-width: none;\n  }\n  .rb-max-w-xl {\n    max-width: 36rem;\n  }\n  .rb-max-w-2xl {\n    max-width: 42rem;\n  }\n  .rb-max-w-3xl {\n    max-width: 48rem;\n  }\n  .rb-max-w-4xl {\n    max-width: 56rem;\n  }\n  .rb-max-w-5xl {\n    max-width: 64rem;\n  }\n  .rb-max-w-6xl {\n    max-width: 72rem;\n  }\n  .rb-max-w-7xl {\n    max-width: 80rem;\n  }\n  .rb-max-w-prose {\n    max-width: 65ch;\n  }\n  .rb-aspect-video {\n    aspect-ratio: 16 / 9;\n  }\n\n  /* Flex */\n  .rb-flex-1 {\n    flex: 1 1 0%;\n  }\n  .rb-flex-col {\n    flex-direction: column;\n  }\n  .rb-flex-row {\n    flex-direction: row;\n  }\n  .rb-flex-wrap {\n    flex-wrap: wrap;\n  }\n  .rb-basis-full {\n    flex-basis: 100%;\n  }\n  .rb-basis-1-2 {\n    flex-basis: 50%;\n  }\n  .rb-basis-1-3 {\n    flex-basis: 33.333333%;\n  }\n  .rb-basis-1-4 {\n    flex-basis: 25%;\n  }\n  .rb-basis-1-5 {\n    flex-basis: 20%;\n  }\n  .rb-basis-1-6 {\n    flex-basis: 16.666667%;\n  }\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-basis-full {\n        flex-basis: 100%;\n      }\n      .rb-md-basis-1-2 {\n        flex-basis: 50%;\n      }\n      .rb-md-basis-1-3 {\n        flex-basis: 33.333333%;\n      }\n      .rb-md-basis-1-4 {\n        flex-basis: 25%;\n      }\n      .rb-md-basis-1-5 {\n        flex-basis: 20%;\n      }\n      .rb-md-basis-1-6 {\n        flex-basis: 16.666667%;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-basis-full {\n        flex-basis: 100%;\n      }\n      .rb-lg-basis-1-2 {\n        flex-basis: 50%;\n      }\n      .rb-lg-basis-1-3 {\n        flex-basis: 33.333333%;\n      }\n      .rb-lg-basis-1-4 {\n        flex-basis: 25%;\n      }\n      .rb-lg-basis-1-5 {\n        flex-basis: 20%;\n      }\n      .rb-lg-basis-1-6 {\n        flex-basis: 16.666667%;\n      }\n    }\n\n}\n  .rb-shrink-0 {\n    flex-shrink: 0;\n  }\n  .rb-flex-shrink-0 {\n    flex-shrink: 0;\n  }\n\n  /* Grid */\n  .rb-grid-rows-main-footer {\n    grid-template-rows: minmax(0, 1fr) auto;\n  }\n  .rb-grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .rb-row-start-1 {\n    grid-row-start: 1;\n  }\n  .rb-row-start-2 {\n    grid-row-start: 2;\n  }\n  .rb-col-start-1 {\n    grid-column-start: 1;\n  }\n  .rb-grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .rb-grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .rb-grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-sm-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-sm-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-sm-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-md-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-md-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n      .rb-md-col-span-2 {\n        grid-column: span 2 / span 2;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-5 {\n        grid-template-columns: repeat(5, minmax(0, 1fr));\n      }\n      .rb-lg-w-3\\/4 {\n        width: 75%;\n      }\n      .rb-lg-col-span-1 {\n        grid-column: span 1 / span 1;\n      }\n      .rb-lg-col-span-2 {\n        grid-column: span 2 / span 2;\n      }\n      .rb-lg-col-span-3 {\n        grid-column: span 3 / span 3;\n      }\n      .rb-lg-col-span-4 {\n        grid-column: span 4 / span 4;\n      }\n      .rb-lg-col-span-5 {\n        grid-column: span 5 / span 5;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1280px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-xl-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-xl-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-xl-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n    }\n\n}\n\n  /*\n   * Responsive fractional grid tracks (rb-grid-tracks).\n   *\n   * Asymmetric AND responsive grid-template-columns, driven by inline custom\n   * properties the Grid primitive sets per breakpoint from string track\n   * templates:\n   *   --rb-gtc-base / --rb-gtc-sm / --rb-gtc-md / --rb-gtc-lg / --rb-gtc-xl\n   * Each breakpoint falls back to the next smaller one, so only the breakpoints\n   * an author actually sets take effect (e.g. base '1fr' + lg '1fr 0.9fr'\n   * collapses to a single column below lg). Authored here (not per node) so the\n   * @media -> @container conversion (container responsive mode) applies too.\n   */\n  .rb-grid-tracks {\n    grid-template-columns: var(--rb-gtc-base, 1fr);\n  }\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-sm, var(--rb-gtc-base, 1fr));\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)));\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr))));\n      }\n    }\n\n}\n  @container rb-site (min-width: 1280px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-xl, var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)))));\n      }\n    }\n\n}\n\n  /* Alignment */\n  .rb-items-start {\n    align-items: flex-start;\n  }\n  .rb-items-center {\n    align-items: center;\n  }\n  .rb-items-end {\n    align-items: flex-end;\n  }\n  .rb-items-stretch {\n    align-items: stretch;\n  }\n  .rb-items-baseline {\n    align-items: baseline;\n  }\n  .rb-justify-start {\n    justify-content: flex-start;\n  }\n  .rb-justify-center {\n    justify-content: center;\n  }\n  .rb-justify-end {\n    justify-content: flex-end;\n  }\n  .rb-justify-between {\n    justify-content: space-between;\n  }\n\n  /* Gap / spacing */\n  .rb-gap-0 {\n    gap: 0;\n  }\n  .rb-gap-1 {\n    gap: 0.25rem;\n  }\n  .rb-gap-2 {\n    gap: 0.5rem;\n  }\n  .rb-gap-3 {\n    gap: 0.75rem;\n  }\n  .rb-gap-4 {\n    gap: 1rem;\n  }\n  .rb-gap-5 {\n    gap: 1.25rem;\n  }\n  .rb-gap-6 {\n    gap: 1.5rem;\n  }\n  .rb-gap-8 {\n    gap: 2rem;\n  }\n  .rb-gap-10 {\n    gap: 2.5rem;\n  }\n  .rb-gap-x-6 {\n    column-gap: 1.5rem;\n  }\n  .rb-gap-x-8 {\n    column-gap: 2rem;\n  }\n  .rb-gap-y-3 {\n    row-gap: 0.75rem;\n  }\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-gap-0 {\n        gap: 0;\n      }\n      .rb-md-gap-10 {\n        gap: 2.5rem;\n      }\n    }\n\n}\n\n  .rb-space-y-1 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.25rem;\n  }\n  .rb-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.5rem;\n  }\n  .rb-space-y-3 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.75rem;\n  }\n  .rb-space-y-6 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 1.5rem;\n  }\n\n  /* Padding */\n  .rb-p-0 {\n    padding: 0;\n  }\n  .rb-p-2 {\n    padding: 0.5rem;\n  }\n  .rb-p-3 {\n    padding: 0.75rem;\n  }\n  .rb-p-4 {\n    padding: 1rem;\n  }\n  .rb-p-5 {\n    padding: 1.25rem;\n  }\n  .rb-p-6 {\n    padding: 1.5rem;\n  }\n  .rb-p-8 {\n    padding: 2rem;\n  }\n  .rb-p-12 {\n    padding: 3rem;\n  }\n  .rb-px-3 {\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n  }\n  .rb-px-4 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-px-6 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n  .rb-pl-4 {\n    padding-left: 1rem;\n  }\n  .rb-py-1 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n  .rb-py-1\\.5 {\n    padding-top: 0.375rem;\n    padding-bottom: 0.375rem;\n  }\n  .rb-py-2 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .rb-py-3 {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n  .rb-py-4 {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n  .rb-py-6 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n  .rb-py-10 {\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n  }\n  /* Clearance for a surface that is not an authored block page.\n     An authored page gets this through its opening block's container (see the\n     overlay-clearance rule in styles.css). A reserved surface or a system\n     destination page has no such block, so it consumes the same variable here.\n     Marked with one class rather than per-surface selectors, because the last\n     two additions to this family were both missed and shipped overlapping. */\n  :where(.theme-scope)\n    [data-site-document-layout-mode=\"header-overlay\"]\n    .rb-overlay-clearance-surface {\n    padding-top: calc(\n      var(--site-overlay-header-clearance, 5.5rem) +\n        var(--site-overlay-opening-content-extra-pad, clamp(1rem, 2vw, 1.75rem))\n    );\n  }\n  /* Floating site overlays (a booking bar, a cookie banner, a sticky promo)\n     mark themselves [data-rb-site-overlay]. While a preview is in edit mode\n     (the preview shell sets the root attribute) they step aside, out of the\n     focus order too; switching back to viewing restores them as they were. */\n  :root[data-rb-preview-mode=\"edit\"] [data-rb-site-overlay] {\n    display: none;\n  }\n  .rb-preview-editor-offset {\n    padding-bottom: calc(\n      var(--builder-editor-chrome-offset, 0px) +\n      var(--builder-preview-banner-offset, 0px)\n    );\n  }\n  .rb-py-12 {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n  .rb-py-16 {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n  .rb-pb-4 {\n    padding-bottom: 1rem;\n  }\n  .rb-pb-6 {\n    padding-bottom: 1.5rem;\n  }\n  .rb-pt-4 {\n    padding-top: 1rem;\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-sm-py-16 {\n        padding-top: 4rem;\n        padding-bottom: 4rem;\n      }\n      .rb-sm-py-20 {\n        padding-top: 5rem;\n        padding-bottom: 5rem;\n      }\n      .rb-sm-p-6 {\n        padding: 1.5rem;\n      }\n      .rb-sm-flex {\n        display: flex;\n      }\n      .rb-sm-block {\n        display: block;\n      }\n      .rb-sm-inline {\n        display: inline;\n      }\n      .rb-sm-inline-block {\n        display: inline-block;\n      }\n      .rb-sm-inline-flex {\n        display: inline-flex;\n      }\n      .rb-sm-grid {\n        display: grid;\n      }\n      .rb-sm-hidden {\n        display: none;\n      }\n      .rb-sm-flex-row {\n        flex-direction: row;\n      }\n      .rb-sm-items-start {\n        align-items: flex-start;\n      }\n      .rb-sm-items-center {\n        align-items: center;\n      }\n      .rb-sm-justify-between {\n        justify-content: space-between;\n      }\n      .rb-sm-p-8 {\n        padding: 2rem;\n      }\n      .rb-sm-text-lg {\n        font-size: 1.125rem;\n        line-height: 1.75rem;\n      }\n      .rb-sm-text-xl {\n        font-size: 1.25rem;\n        line-height: 1.75rem;\n      }\n      .rb-sm-text-4xl {\n        font-size: 2.25rem;\n        line-height: 2.5rem;\n      }\n\n      .rb-sm-w-auto {\n        width: auto;\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-py-20 {\n        padding-top: 5rem;\n        padding-bottom: 5rem;\n      }\n      .rb-md-py-24 {\n        padding-top: 6rem;\n        padding-bottom: 6rem;\n      }\n      .rb-md-w-1\\/3 {\n        width: 33.333333%;\n      }\n\n      .rb-md-flex {\n        display: flex;\n      }\n      .rb-md-block {\n        display: block;\n      }\n      .rb-md-inline {\n        display: inline;\n      }\n      .rb-md-inline-block {\n        display: inline-block;\n      }\n      .rb-md-inline-flex {\n        display: inline-flex;\n      }\n      .rb-md-grid {\n        display: grid;\n      }\n      .rb-md-hidden {\n        display: none;\n      }\n      .rb-md-flex-row {\n        flex-direction: row;\n      }\n      .rb-md-flex-row-reverse {\n        flex-direction: row-reverse;\n      }\n      .rb-md-items-start {\n        align-items: flex-start;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-flex {\n        display: flex;\n      }\n      .rb-lg-block {\n        display: block;\n      }\n      .rb-lg-inline {\n        display: inline;\n      }\n      .rb-lg-inline-block {\n        display: inline-block;\n      }\n      .rb-lg-inline-flex {\n        display: inline-flex;\n      }\n      .rb-lg-grid {\n        display: grid;\n      }\n      .rb-lg-hidden {\n        display: none;\n      }\n      .rb-lg-flex-row {\n        flex-direction: row;\n      }\n      .rb-lg-items-center {\n        align-items: center;\n      }\n    }\n\n}\n\n  /* Margin */\n  .rb-m-0 {\n    margin: 0;\n  }\n  .rb-mx-auto {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .rb-ml-auto {\n    margin-left: auto;\n  }\n  .rb-mt-auto {\n    margin-top: auto;\n  }\n  .rb-mt-0\\.5 {\n    margin-top: 0.125rem;\n  }\n  .rb-mt-1 {\n    margin-top: 0.25rem;\n  }\n  .rb-mt-2 {\n    margin-top: 0.5rem;\n  }\n  .rb-mt-4 {\n    margin-top: 1rem;\n  }\n  .rb-mt-6 {\n    margin-top: 1.5rem;\n  }\n  .rb-mt-8 {\n    margin-top: 2rem;\n  }\n  .rb-mt-10 {\n    margin-top: 2.5rem;\n  }\n  .rb-mt-12 {\n    margin-top: 3rem;\n  }\n  .rb-mb-1 {\n    margin-bottom: 0.25rem;\n  }\n  .rb-mb-2 {\n    margin-bottom: 0.5rem;\n  }\n  .rb-mb-3 {\n    margin-bottom: 0.75rem;\n  }\n  .rb-mb-4 {\n    margin-bottom: 1rem;\n  }\n  .rb-mb-8 {\n    margin-bottom: 2rem;\n  }\n  .rb-ml-1 {\n    margin-left: 0.25rem;\n  }\n  .rb-ml-2 {\n    margin-left: 0.5rem;\n  }\n  .rb-ml-6 {\n    margin-left: 1.5rem;\n  }\n  .rb-mr-2 {\n    margin-right: 0.5rem;\n  }\n\n  /* Borders */\n  .rb-border {\n    border-width: 1px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-0 {\n    border-width: 0;\n  }\n  .rb-border-2 {\n    border-width: 2px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-3 {\n    border-width: 3px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-b {\n    border-bottom-width: 1px;\n    border-bottom-style: solid;\n    border-bottom-color: rgb(var(--tb-border));\n  }\n  .rb-border-t {\n    border-top-width: 1px;\n    border-top-style: solid;\n    border-top-color: rgb(var(--tb-border));\n  }\n  .rb-border-dashed {\n    border-style: dashed;\n  }\n  .rb-border-current {\n    border-color: currentColor;\n  }\n  .rb-border-transparent {\n    border-color: transparent;\n  }\n  .rb-border-b-2 {\n    border-bottom-width: 2px;\n    border-bottom-style: solid;\n    border-bottom-color: rgb(var(--tb-border));\n  }\n  .rb-last-border-b-0:last-child {\n    border-bottom-width: 0;\n  }\n\n  /* Radius */\n  .rb-rounded-none {\n    border-radius: 0;\n  }\n  .rb-rounded-sm {\n    border-radius: 0.125rem;\n  }\n  .rb-rounded {\n    border-radius: 0.25rem;\n  }\n  .rb-rounded-md {\n    border-radius: 0.375rem;\n  }\n  .rb-rounded-lg {\n    border-radius: 0.5rem;\n  }\n  .rb-rounded-xl {\n    border-radius: 0.75rem;\n  }\n  .rb-rounded-2xl {\n    border-radius: 1rem;\n  }\n  .rb-rounded-3xl {\n    border-radius: 1.5rem;\n  }\n  .rb-rounded-full {\n    border-radius: 9999px;\n  }\n\n  /* Shadow */\n  /*\n   * Shadows are theme-driven via CSS variables:\n   * - `--shadow-sm|md|lg|xl|2xl` for size-specific utilities\n   * - `--shadow-elev` as a generic fallback (used by bridge/runtime defaults)\n   */\n  .rb-shadow-sm {\n    box-shadow: var(--shadow-sm, var(--shadow-elev));\n  }\n  .rb-shadow-md {\n    box-shadow: var(--shadow-md, var(--shadow-elev));\n  }\n  .rb-shadow-lg {\n    box-shadow: var(--shadow-lg, var(--shadow-elev));\n  }\n  .rb-shadow-xl {\n    box-shadow: var(--shadow-xl, var(--shadow-elev));\n  }\n  .rb-shadow-2xl {\n    box-shadow: var(--shadow-2xl, var(--shadow-xl, var(--shadow-elev)));\n  }\n  .hover\\:rb-shadow-md:hover {\n    box-shadow: var(--shadow-md, var(--shadow-elev));\n  }\n\n  /* Overflow */\n  .rb-overflow-hidden {\n    overflow: hidden;\n  }\n  .rb-overflow-visible {\n    overflow: visible;\n  }\n  .rb-overflow-x-auto {\n    overflow-x: auto;\n  }\n  .rb-overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  /* Layout */\n  .rb-break-inside-avoid {\n    break-inside: avoid;\n    page-break-inside: avoid;\n    -webkit-column-break-inside: avoid;\n  }\n\n  /* Scroll snap */\n  .rb-snap-x {\n    scroll-snap-type: x var(--rb-scroll-snap-strictness, mandatory);\n  }\n  .rb-snap-mandatory {\n    --rb-scroll-snap-strictness: mandatory;\n  }\n  .rb-snap-start {\n    scroll-snap-align: start;\n  }\n\n  /* Background */\n  .rb-bg-transparent {\n    background-color: transparent;\n  }\n  .rb-bg-current {\n    background-color: currentColor;\n  }\n  .rb-bg-black-40 {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n  .rb-bg-surface {\n    background-color: rgb(var(--tb-surface));\n  }\n  .rb-bg-background {\n    background-color: rgb(var(--tb-background));\n  }\n\n  /* Typography */\n  .rb-text-xs {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .rb-text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n  }\n  .rb-text-base {\n    font-size: 1rem;\n    line-height: 1.5rem;\n  }\n  .rb-text-lg {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  .rb-text-xl {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  .rb-text-2xl {\n    font-size: 1.5rem;\n    line-height: 2rem;\n  }\n  .rb-text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n  .rb-font-medium {\n    font-weight: 500;\n  }\n  .rb-font-semibold {\n    font-weight: 600;\n  }\n  .rb-font-bold {\n    font-weight: 700;\n  }\n  .rb-font-mono {\n    font-family:\n      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n  }\n  .rb-leading-relaxed {\n    line-height: 1.625;\n  }\n  .rb-tracking-tight {\n    letter-spacing: -0.025em;\n  }\n  .rb-tracking-wide {\n    letter-spacing: 0.025em;\n  }\n  .rb-text-left {\n    text-align: left;\n  }\n  .rb-text-center {\n    text-align: center;\n  }\n  .rb-text-right {\n    text-align: right;\n  }\n\n  /* Text decoration */\n  .rb-no-underline {\n    text-decoration: none;\n  }\n  .rb-underline {\n    text-decoration-line: underline;\n  }\n  .rb-underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .rb-nav-underline:hover,\n  .rb-nav-underline[data-active=\"true\"],\n  .rb-nav-underline[aria-current=\"page\"] {\n    text-decoration: underline;\n  }\n  .rb-nav-underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n\n  .rb-uppercase {\n    text-transform: uppercase;\n  }\n  .rb-truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Opacity */\n  .rb-opacity-0 {\n    opacity: 0;\n  }\n  .rb-opacity-30 {\n    opacity: 0.3;\n  }\n  .rb-opacity-50 {\n    opacity: 0.5;\n  }\n  .rb-opacity-60 {\n    opacity: 0.6;\n  }\n  .rb-opacity-70 {\n    opacity: 0.7;\n  }\n  .rb-opacity-75 {\n    opacity: 0.75;\n  }\n  .rb-opacity-80 {\n    opacity: 0.8;\n  }\n  .rb-opacity-90 {\n    opacity: 0.9;\n  }\n  .rb-opacity-100 {\n    opacity: 1;\n  }\n  .rb-hover-opacity-80:hover {\n    opacity: 0.8;\n  }\n\n  /* Pointer events */\n  .rb-pointer-events-none {\n    pointer-events: none;\n  }\n  .rb-pointer-events-auto {\n    pointer-events: auto;\n  }\n\n  /* Cursor */\n  .rb-cursor-pointer {\n    cursor: pointer;\n  }\n  .rb-cursor-default {\n    cursor: default;\n  }\n  .rb-cursor-wait {\n    cursor: wait;\n  }\n\n  /* Transitions */\n  .rb-transition-all {\n    transition-property: all;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-colors {\n    transition-property:\n      color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-transform {\n    transition-property: transform;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-duration-200 {\n    transition-duration: 200ms;\n  }\n  .rb-duration-300 {\n    transition-duration: 300ms;\n  }\n  .rb-duration-500 {\n    transition-duration: 500ms;\n  }\n  .rb-ease-in-out {\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  @keyframes rb-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  .rb-animate-spin {\n    animation: rb-spin 1s linear infinite;\n  }\n\n  /* Spinner (themeable via currentColor) */\n  .rb-spinner {\n    --rb-spinner-size: 2rem;\n    --rb-spinner-duration: 0.9s;\n    --rb-spinner-track-color: rgb(var(--tb-foreground) / 0.15);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--rb-spinner-size);\n    height: var(--rb-spinner-size);\n    color: rgb(var(--tb-primary));\n    animation: rb-spin var(--rb-spinner-duration) linear infinite;\n  }\n\n  .rb-spinner svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .rb-spinner--inherit {\n    color: inherit;\n  }\n\n  .rb-spinner--xs {\n    --rb-spinner-size: 0.75rem;\n  }\n\n  .rb-spinner--sm {\n    --rb-spinner-size: 1rem;\n  }\n\n  .rb-spinner--md {\n    --rb-spinner-size: 2rem;\n  }\n\n  .rb-spinner--lg {\n    --rb-spinner-size: 4rem;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .rb-spinner {\n      animation-duration: 1.5s;\n    }\n  }\n\n  @keyframes rb-marquee {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(calc(-50% - (var(--rb-marquee-gap, 2rem) / 2)));\n    }\n  }\n  .rb-animate-marquee {\n    animation: rb-marquee var(--rb-marquee-duration, 40s) linear infinite;\n    animation-direction: var(--rb-marquee-direction, normal);\n    gap: var(--rb-marquee-gap, 2rem);\n  }\n  .rb-marquee-pause-on-hover:hover .rb-animate-marquee {\n    animation-play-state: paused;\n  }\n\n  .rb-image-gallery-marquee {\n    overflow: hidden;\n    width: 100%;\n  }\n\n  @container rb-site (max-width: 639px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-image-gallery-marquee {\n        overflow-x: auto;\n        overflow-y: hidden;\n        -webkit-overflow-scrolling: touch;\n        touch-action: pan-x;\n        scrollbar-width: none;\n      }\n\n      .rb-image-gallery-marquee::-webkit-scrollbar {\n        display: none;\n      }\n\n      /* Let users swipe smoothly without fighting autoplay while interacting. */\n      .rb-image-gallery-marquee:active .rb-animate-marquee,\n      .rb-image-gallery-marquee:focus-within .rb-animate-marquee {\n        animation-play-state: paused;\n      }\n\n      .rb-container-full.rb-image-gallery-marquee-container {\n        padding-left: 0;\n        padding-right: 0;\n      }\n\n      /* Marquee variant: keep images in color on mobile for legibility. */\n      .rb-image-gallery-marquee-container .rb-filter-grayscale,\n      .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal {\n        filter: none;\n      }\n\n      .rb-image-gallery-marquee-container\n        .rb-filter-grayscale-hover-reveal:hover {\n        filter: none;\n      }\n    }\n\n}\n\n  @media (prefers-reduced-motion: reduce) {\n    .rb-animate-marquee {\n      animation: none !important;\n      transform: none !important;\n    }\n    .rb-image-gallery-marquee {\n      overflow-x: auto;\n      overflow-y: hidden;\n      -webkit-overflow-scrolling: touch;\n    }\n  }\n\n  /* Filters */\n  .rb-filter-grayscale {\n    filter: grayscale(100%);\n  }\n  .rb-filter-grayscale-hover-reveal {\n    filter: grayscale(100%);\n    transition: filter 500ms ease;\n  }\n  .rb-filter-grayscale-hover-reveal:hover {\n    filter: grayscale(0%);\n  }\n  .rb-filter-sepia {\n    filter: sepia(100%);\n  }\n\n  /* Transforms */\n  .rb-transform-gpu {\n    transform: translateZ(0);\n  }\n  .rb-will-change-transform {\n    will-change: transform;\n  }\n  .rb-translate-x-neg-1\\/2 {\n    transform: translateX(-50%);\n  }\n  .rb-hover-scale-105:hover {\n    transform: scale(1.05);\n  }\n  .rb-hover-scale-125:hover {\n    transform: scale(1.25);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .rb-motion-safe-hover-scale-105:hover {\n      transform: scale(1.05);\n    }\n  }\n\n  /* Object fit */\n  .rb-object-cover {\n    object-fit: cover;\n  }\n  .rb-object-contain {\n    object-fit: contain;\n  }\n  .rb-bg-motion-fixed-frame {\n    position: fixed;\n    inset: 0;\n    width: 100vw;\n    height: 100svh;\n  }\n  .rb-bg-motion-fixed-frame-scope {\n    -webkit-clip-path: inset(0);\n    clip-path: inset(0);\n  }\n  @media (hover: none), (prefers-reduced-motion: reduce) {\n    .rb-bg-motion-fixed-frame {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  /* Line clamp */\n  .rb-line-clamp-2,\n  .rb-line-clamp-3,\n  .rb-line-clamp-4 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n  }\n  .rb-line-clamp-2 {\n    -webkit-line-clamp: 2;\n  }\n  .rb-line-clamp-3 {\n    -webkit-line-clamp: 3;\n  }\n  .rb-line-clamp-4 {\n    -webkit-line-clamp: 4;\n  }\n\n  /* Typography */\n  .rb-italic {\n    font-style: italic;\n  }\n\n  /* Container helpers */\n  .rb-container {\n    max-width: 80rem;\n    margin-left: auto;\n    margin-right: auto;\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-container-full {\n    width: 100%;\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-container-bleed {\n    width: 100%;\n    max-width: none;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-container,\n      .rb-container-full {\n        padding-left: 1.5rem;\n        padding-right: 1.5rem;\n      }\n    }\n\n}\n\n  /* Flex alignment */\n  .rb-self-start {\n    align-self: flex-start;\n  }\n\n  /* Semantic spacing tokens (replaces Tailwind maps in src/system/spacing.ts) */\n  .rb-section-pad-none {\n    --rb-section-pad-y: 0rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-compact {\n    --rb-section-pad-y: 1.5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-cozy {\n    --rb-section-pad-y: 2.5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-medium {\n    --rb-section-pad-y: 3rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-comfortable {\n    --rb-section-pad-y: 4rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-spacious {\n    --rb-section-pad-y: 5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-section-pad-compact {\n        --rb-section-pad-y: 2rem;\n      }\n      .rb-section-pad-cozy {\n        --rb-section-pad-y: 3.5rem;\n      }\n      .rb-section-pad-medium {\n        --rb-section-pad-y: 4rem;\n      }\n      .rb-section-pad-comfortable {\n        --rb-section-pad-y: 5rem;\n      }\n      .rb-section-pad-spacious {\n        --rb-section-pad-y: 7rem;\n      }\n    }\n\n}\n\n  .rb-container-pad-none {\n    --rb-card-pad: 0rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-compact {\n    --rb-card-pad: 1rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-cozy {\n    --rb-card-pad: 1.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-medium {\n    --rb-card-pad: 1.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-comfortable {\n    --rb-card-pad: 2rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-spacious {\n    --rb-card-pad: 2.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-container-pad-compact {\n        --rb-card-pad: 1.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-cozy {\n        --rb-card-pad: 2rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-medium {\n        --rb-card-pad: 2rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-comfortable {\n        --rb-card-pad: 2.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-spacious {\n        --rb-card-pad: 3.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n    }\n\n}\n\n  /* Semantic gap tokens (theme-aware via --space-mult) */\n  .rb-gap-semantic-none {\n    --rb-semantic-gap: 0px;\n    gap: 0;\n  }\n  .rb-gap-semantic-compact {\n    --rb-semantic-gap: calc(1rem * var(--space-mult, 1));\n    gap: calc(1rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-cozy {\n    --rb-semantic-gap: calc(1.75rem * var(--space-mult, 1));\n    gap: calc(1.75rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-medium {\n    --rb-semantic-gap: calc(2.75rem * var(--space-mult, 1));\n    gap: calc(2.75rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-comfortable {\n    --rb-semantic-gap: calc(4.5rem * var(--space-mult, 1));\n    gap: calc(4.5rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-spacious {\n    --rb-semantic-gap: calc(6.5rem * var(--space-mult, 1));\n    gap: calc(6.5rem * var(--space-mult, 1));\n  }\n\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-gap-semantic-compact {\n        --rb-semantic-gap: calc(1.25rem * var(--space-mult, 1));\n        gap: calc(1.25rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-cozy {\n        --rb-semantic-gap: calc(2.25rem * var(--space-mult, 1));\n        gap: calc(2.25rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-medium {\n        --rb-semantic-gap: calc(3.5rem * var(--space-mult, 1));\n        gap: calc(3.5rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-comfortable {\n        --rb-semantic-gap: calc(5.75rem * var(--space-mult, 1));\n        gap: calc(5.75rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-spacious {\n        --rb-semantic-gap: calc(8.75rem * var(--space-mult, 1));\n        gap: calc(8.75rem * var(--space-mult, 1));\n      }\n    }\n\n}\n\n  /* Backdrop blur helpers */\n  .rb-backdrop-blur {\n    backdrop-filter: blur(10px);\n  }\n  @supports not (\n    (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))\n  ) {\n    .rb-backdrop-blur {\n      backdrop-filter: none;\n    }\n  }\n}\n\n@layer rb-theme {\n  /* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */\n  :root {\n    /* --tb-primary: 17 24 39;\n  --tb-text: 17 24 39;\n  --tb-muted: 107 114 128;\n  --tb-bg: 255 255 255;\n  --tb-surface: 248 250 252;\n  --tb-border: 229 231 235;\n\n  --radius-control: 12px;\n  --radius-card: 12px;\n\n  --shadow-elev: 0 1px 2px rgba(0,0,0,.06);\n\n  --fs-h1: 32px;\n  --fs-h2: 24px;\n  --fs-h3: 20px;\n  --fs-body: 16px;\n\n  --font-heading: ui-sans-serif, system-ui, sans-serif;\n  --font-body: ui-sans-serif, system-ui, sans-serif;\n\n  --motion-duration: 180ms;\n  --motion-ease: cubic-bezier(.2,.8,.2,1); */\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Shared: Modal                                                             */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope) .rb-modal-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--rb-modal-z-index, 20000);\n    display: grid;\n    place-items: center;\n    padding: 1rem;\n    /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */\n    background-color: rgba(0, 0, 0, 0.6);\n    background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));\n  }\n\n  :where(.theme-scope) .rb-modal {\n    width: min(var(--rb-modal-max-width, 560px), 100%);\n    background: var(--rb-modal-bg, rgb(var(--tb-surface)));\n    color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));\n    --rb-surface-text-color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));\n    --rb-surface-heading-color: var(--rb-modal-heading, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-link-color: var(--rb-modal-link, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-link-hover-color: var(--rb-modal-link, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-link-hover-decoration: underline;\n    --rb-surface-supporting-color: var(--rb-modal-supporting, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));\n    border-radius: var(--rb-modal-radius, var(--radius-card));\n    box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));\n  }\n\n  :where(.theme-scope) .rb-modal__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    padding: 1rem 1rem 0.75rem;\n    border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));\n  }\n\n  :where(.theme-scope) .rb-modal__title {\n    margin: 0;\n    font-family: var(--font-heading);\n    font-size: 1.0625rem;\n    font-weight: 600;\n    color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));\n  }\n\n  :where(.theme-scope) .rb-modal__close {\n    background: transparent;\n    border: none;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    line-height: 1;\n    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n    cursor: pointer;\n    display: grid;\n    place-items: center;\n    border-radius: var(--radius-control);\n  }\n\n  :where(.theme-scope) .rb-modal__close:hover {\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    background: rgb(var(--tb-border) / 0.2);\n  }\n\n  :where(.theme-scope) .rb-modal__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.15);\n  }\n\n  :where(.theme-scope) .rb-modal__body {\n    padding: 0.875rem 1rem 1rem;\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    font-size: 0.9375rem;\n    line-height: 1.45;\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Shared: Site document overlay header clearance                             */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container {\n    --rb-opening-content-clearance: calc(\n      var(--site-overlay-header-clearance, 0px) +\n        var(--site-overlay-opening-content-extra-pad, clamp(1rem, 2vw, 1.75rem))\n    );\n  }\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container:not([class*='rb-container-pad-']) {\n    padding-top: var(--rb-opening-content-clearance, 0px);\n  }\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container\n    :where([class*='rb-container-pad-']) {\n    --rb-opening-content-clearance: 0px;\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile nav overlay transitions                                      */\n  /* -------------------------------------------------------------------------- */\n\n  /* Keep the overlay in the DOM so we can transition opacity/transform.\n   JS toggles `aria-hidden` + `inert` (via enhancer), and CSS uses pointer-events\n   to prevent interaction while closed. */\n  .nav-mobile-overlay {\n    pointer-events: none;\n    /* Prevent transformed children (panel) from creating viewport scrollbars\n     during enter/exit transitions. */\n    overflow: hidden;\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] {\n    pointer-events: auto;\n  }\n\n  .nav-mobile-overlay .nav-mobile-backdrop {\n    opacity: 0;\n    transition: opacity var(--motion-duration, 180ms)\n      var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-backdrop {\n    opacity: 1;\n  }\n\n  .nav-mobile-overlay .nav-mobile-panel {\n    opacity: 0;\n    transform: translate3d(12px, 0, 0);\n    overflow-x: hidden;\n    transition:\n      opacity var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),\n      transform var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n    will-change: opacity, transform;\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-panel {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile toggle hamburger -> X                                       */\n  /* -------------------------------------------------------------------------- */\n\n  .nav-mobile-toggle .nav-mobile-bar {\n    transform-origin: center;\n    transition:\n      transform var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),\n      opacity var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n    will-change: transform, opacity;\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-top {\n    transform: translateY(6px) rotate(45deg);\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-middle {\n    opacity: 0;\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-bottom {\n    transform: translateY(-6px) rotate(-45deg);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-mobile-overlay .nav-mobile-backdrop,\n    .nav-mobile-overlay .nav-mobile-panel {\n      transition: none;\n      transform: none;\n    }\n\n    .nav-mobile-toggle .nav-mobile-bar {\n      transition: none;\n    }\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile floating/glass backing                                      */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope) .header-variant-floating .header-mobile-bar {\n    align-items: flex-start;\n    margin-top: 0.75rem;\n  }\n\n  :where(.theme-scope) .header-variant-floating .nav-mobile-toggle {\n    border: 1px solid rgb(var(--tb-border) / 0.82);\n    background: rgb(var(--tb-surface) / 0.96);\n    color: rgb(var(--tb-text));\n    box-shadow: none;\n  }\n\n  /*\n * Theme Scope Styles\n *\n * IMPORTANT: All :where(.theme-scope) selectors are wrapped in :where() to give them\n * zero specificity. This allows SDK site custom styles to easily override\n * theme defaults without needing !important or high-specificity selectors.\n *\n * Example: `h4 { color: white; }` will override `:where(:where(.theme-scope)) h4`\n */\n\n  :where(:where(.theme-scope)) {\n    font-family: var(--font-body);\n    letter-spacing: var(--ls-body);\n    line-height: var(--lh-body);\n    font-weight: var(--font-weight-body);\n\n    & h1,\n    & h2,\n    & h3,\n    & h4,\n    & h5,\n    & h6 {\n      font-family: var(--font-heading);\n      /* Color is set by generateTypographyCss.ts with full cascade:\n       --rb-surface-heading-color -> --rb-surface-text-color -> --hc-hN -> --hc-heading -> global text */\n      font-weight: var(--font-weight-heading);\n      text-transform: var(--tt-heading);\n      font-variant-caps: var(--fv-heading);\n    }\n  }\n\n  /* Heading typographic overrides (fallback to defaults when not provided) */\n  :where(:where(.theme-scope)) h1 {\n    letter-spacing: var(--ls-h1, var(--ls-heading));\n    line-height: var(--lh-h1, var(--lh-heading));\n    font-weight: var(--fw-h1, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h2 {\n    letter-spacing: var(--ls-h2, var(--ls-heading));\n    line-height: var(--lh-h2, var(--lh-heading));\n    font-weight: var(--fw-h2, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h3 {\n    letter-spacing: var(--ls-h3, var(--ls-heading));\n    line-height: var(--lh-h3, var(--lh-heading));\n    font-weight: var(--fw-h3, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h4,\n  :where(:where(.theme-scope)) h5,\n  :where(:where(.theme-scope)) h6 {\n    letter-spacing: var(--ls-heading);\n    line-height: var(--lh-heading);\n  }\n  :where(:where(.theme-scope)) h4 {\n    font-weight: var(--fw-h4, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h5 {\n    font-weight: var(--fw-h5, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h6 {\n    font-weight: var(--fw-h6, var(--font-weight-heading));\n  }\n\n  /* Rich text element spacing based on theme rhythm */\n  :where(.theme-scope) .rb-prose h1 {\n    margin-top: calc(var(--rt-space-y) * 1.6);\n    margin-bottom: calc(var(--rt-space-y) * 0.8);\n  }\n  :where(.theme-scope) .rb-prose h2 {\n    margin-top: calc(var(--rt-space-y) * 1.4);\n    margin-bottom: calc(var(--rt-space-y) * 0.7);\n  }\n  :where(.theme-scope) .rb-prose h3 {\n    margin-top: calc(var(--rt-space-y) * 1.2);\n    margin-bottom: calc(var(--rt-space-y) * 0.6);\n  }\n  :where(.theme-scope) .rb-prose h4 {\n    margin-top: calc(var(--rt-space-y) * 1);\n    margin-bottom: calc(var(--rt-space-y) * 0.5);\n  }\n  :where(.theme-scope) .rb-prose h5 {\n    margin-top: calc(var(--rt-space-y) * 0.9);\n    margin-bottom: calc(var(--rt-space-y) * 0.45);\n  }\n  :where(.theme-scope) .rb-prose h6 {\n    margin-top: calc(var(--rt-space-y) * 0.8);\n    margin-bottom: calc(var(--rt-space-y) * 0.4);\n  }\n  :where(.theme-scope) .rb-prose p {\n    margin: var(--rt-space-y) 0;\n  }\n  :where(.theme-scope) .rb-prose li > p:first-child {\n    margin-top: 0;\n  }\n  :where(.theme-scope) .rb-prose li > p:last-child {\n    margin-bottom: 0;\n  }\n  :where(.theme-scope) .rb-prose img {\n    display: block;\n    max-width: 100%;\n    height: auto;\n    margin: calc(var(--rt-space-y) * 1) 0;\n  }\n  :where(.theme-scope) .rb-prose ul,\n  :where(.theme-scope) .rb-prose ol {\n    margin: var(--rt-space-y) 0;\n    padding-left: 1.25rem;\n  }\n  :where(.theme-scope) .rb-prose ul {\n    list-style-type: disc;\n  }\n  :where(.theme-scope) .rb-prose ol {\n    list-style-type: decimal;\n  }\n  :where(.theme-scope) .rb-prose ul ul {\n    list-style-type: circle;\n  }\n  :where(.theme-scope) .rb-prose ul ul ul {\n    list-style-type: square;\n  }\n  :where(.theme-scope) .rb-prose ol ol {\n    list-style-type: lower-alpha;\n  }\n  :where(.theme-scope) .rb-prose ol ol ol {\n    list-style-type: lower-roman;\n  }\n  :where(.theme-scope) .rb-prose blockquote {\n    margin: calc(var(--rt-space-y) * 1) 0;\n    padding-left: 1rem;\n    border-left: 3px solid rgb(var(--tb-border));\n  }\n  :where(.theme-scope) .rb-prose > :first-child {\n    margin-top: 0;\n  }\n  :where(.theme-scope) .rb-prose > :last-child {\n    margin-bottom: 0;\n  }\n\n  /* Prose color overrides - use theme CSS variables instead of hardcoded colors\n * This makes prose elements automatically adapt to light/dark themes */\n  :where(.theme-scope) .rb-prose {\n    /* Body text inherits from parent, which should already have theme color */\n    color: inherit;\n  }\n\n  /* Prose size variants (theme-aware, CSS-only) */\n  :where(.theme-scope) {\n    /* Body scale + rhythm come from the active theme runtime (ThemeScope) */\n    --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);\n    --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);\n\n    --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);\n    --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);\n\n    /* Applied at >= 640px; below that, rb-prose-lg is typically used */\n    --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);\n    --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);\n  }\n\n  :where(.theme-scope) .rb-prose-sm {\n    font-size: var(--rb-prose-sm-font-size);\n    line-height: var(--rb-prose-sm-line-height);\n  }\n  :where(.theme-scope) .rb-prose-lg {\n    font-size: var(--rb-prose-lg-font-size);\n    line-height: var(--rb-prose-lg-line-height);\n  }\n  @container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-prose-xl-sm {\n      font-size: var(--rb-prose-xl-sm-font-size);\n      line-height: var(--rb-prose-xl-sm-line-height);\n    }\n}\n}\n\n  /* Neutral prose uses theme text color by default */\n  :where(.theme-scope) .rb-prose-neutral {\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  }\n\n  :where(.theme-scope) .rb-prose p,\n  :where(.theme-scope) .rb-prose li {\n    /* Body text uses inherited color (set by fragment via textColorStyle) */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose h1,\n  :where(.theme-scope) .rb-prose h2,\n  :where(.theme-scope) .rb-prose h3,\n  :where(.theme-scope) .rb-prose h4,\n  :where(.theme-scope) .rb-prose h5,\n  :where(.theme-scope) .rb-prose h6 {\n    /* Headings inherit from parent or use theme text color */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose strong,\n  :where(.theme-scope) .rb-prose b {\n    /* Bold text inherits color but increases weight */\n    color: inherit;\n    font-weight: 600;\n  }\n\n  :where(.theme-scope) .rb-prose em,\n  :where(.theme-scope) .rb-prose i {\n    /* Italic text inherits color */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose a {\n    --rb-prose-effective-link-color: var(\n      --rb-surface-link-color,\n      var(\n        --rb-surface-text-color,\n        var(\n          --rb-prose-link-color,\n          rgb(var(--tb-primary, var(--tb-text, 17 24 39)))\n        )\n      )\n    );\n    color: var(--rb-prose-effective-link-color);\n    text-decoration-line: var(--rb-prose-link-decoration-line, underline);\n    text-decoration-style: var(--rb-prose-link-underline-style, solid);\n    text-decoration-thickness: var(\n      --rb-prose-link-underline-thickness,\n      from-font\n    );\n    text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);\n    text-decoration-color: var(\n      --rb-prose-link-decoration-color,\n      color-mix(\n        in srgb,\n        var(--rb-prose-effective-link-color) 35%,\n        transparent\n      )\n    );\n    transition:\n      color 150ms ease,\n      text-decoration-color 150ms ease;\n  }\n\n  :where(.theme-scope) .rb-prose a:hover {\n    color: var(\n      --rb-surface-link-hover-color,\n      var(--rb-prose-link-hover-color, var(--rb-prose-effective-link-color))\n    );\n    text-decoration-line: var(\n      --rb-surface-link-hover-decoration,\n      var(--rb-prose-link-decoration-line, underline)\n    );\n    text-decoration-color: var(\n      --rb-prose-link-hover-decoration-color,\n      var(\n        --rb-surface-link-hover-color,\n        var(--rb-prose-link-hover-color, var(--rb-prose-effective-link-color))\n      )\n    );\n  }\n\n  :where(.theme-scope) .rb-prose blockquote {\n    /* Blockquotes use muted text color */\n    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n    border-left-color: rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope) .fragment-quote-body blockquote {\n    /* Quote fragment should not get the generic prose blockquote left border/indent. */\n    border-left: 0;\n    padding-left: 0;\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height {\n    /* Needed so we can use container query units (`cqw`) for width-based tile sizing. */\n    container-type: inline-size;\n\n    --rb-columns-cols: var(--rb-columns-cols-mobile, 1);\n    --rb-columns-gap: var(--rb-semantic-gap, 0px);\n    --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);\n\n    --rb-columns-tile-w: calc(\n      (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) /\n        var(--rb-columns-cols)\n    );\n    --rb-columns-tile-h: calc(\n      var(--rb-columns-tile-w) * var(--rb-columns-tile-ar)\n    );\n  }\n\n  @container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));\n    }\n}\n}\n\n  @container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));\n    }\n}\n}\n\n  @container rb-site (min-width: 1280px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));\n    }\n}\n}\n\n  :where(.theme-scope) .rb-columns-equal-height > * {\n    height: var(--rb-columns-tile-h);\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height > .rb-h-full {\n    /*\n    Grid items commonly include `rb-h-full` (height: 100%) to stretch within\n    their row. In equal-height mode we instead want a fixed tile height so the\n    spanning editorial tile doesn't become taller due to its larger width +\n    aspect-ratio.\n  */\n    height: var(--rb-columns-tile-h);\n    min-height: var(--rb-columns-tile-h);\n    max-height: var(--rb-columns-tile-h);\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height .fragment-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  :where(.theme-scope) .rb-prose code {\n    /* Inline code uses text color with surface background */\n    color: inherit;\n    background-color: rgb(var(--tb-surface) / 0.5);\n    padding: 0.125rem 0.25rem;\n    border-radius: 0.25rem;\n    font-size: 0.875em;\n  }\n\n  :where(.theme-scope) .rb-prose pre {\n    /* Code blocks */\n    background-color: rgb(var(--tb-surface));\n    color: rgb(var(--tb-text));\n    border: 1px solid rgb(var(--tb-border));\n    border-radius: 0.5rem;\n    padding: 1rem;\n    overflow-x: auto;\n  }\n\n  :where(.theme-scope) .rb-prose pre code {\n    /* Code inside pre blocks */\n    background-color: transparent;\n    padding: 0;\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose hr {\n    /* Horizontal rules */\n    border-color: rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope) .rb-prose ul > li::marker,\n  :where(.theme-scope) .rb-prose ol > li::marker {\n    /* List markers use muted text color */\n    color: rgb(var(--tb-mutedText));\n  }\n\n  /*\n/* Density helpers */\n  :where(.theme-scope) .section-pad {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n  :where(.theme-scope)[data-density='airy'] .section-pad {\n    padding-top: 4.5rem;\n    padding-bottom: 4.5rem;\n  }\n  :where(.theme-scope)[data-density='compact'] .section-pad {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n\n  :where(.theme-scope) .rounded-control {\n    border-radius: var(--radius-control);\n  }\n  :where(.theme-scope) .rounded-card {\n    border-radius: var(--radius-card);\n  }\n\n  :where(.theme-scope) .shadow-elev {\n    box-shadow: var(--shadow-elev);\n  }\n\n  :where(.theme-scope) .font-heading {\n    font-family: var(--font-heading);\n  }\n  :where(.theme-scope) .font-body {\n    font-family: var(--font-body);\n  }\n\n  :where(.theme-scope) .text-h1 {\n    font-size: var(--fs-h1);\n    line-height: 1.1;\n  }\n  :where(.theme-scope) .text-h2 {\n    font-size: var(--fs-h2);\n    line-height: 1.15;\n  }\n  :where(.theme-scope) .text-h3 {\n    font-size: var(--fs-h3);\n    line-height: 1.2;\n  }\n  :where(.theme-scope) .text-body-size {\n    font-size: var(--fs-body);\n  }\n\n  :where(.theme-scope) .transition-theme {\n    transition: all var(--motion-duration) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-standard {\n    transition: all var(--motion-duration) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-subtle {\n    transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-expressive {\n    transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);\n  }\n\n  /* Shade tokens (50..950) for primary */\n  :where(.theme-scope) .from-primary-50 {\n    --rb-gradient-from: rgb(var(--tb-primary-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-50 {\n    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-100 {\n    --rb-gradient-from: rgb(var(--tb-primary-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-100 {\n    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-200 {\n    --rb-gradient-from: rgb(var(--tb-primary-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-200 {\n    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-300 {\n    --rb-gradient-from: rgb(var(--tb-primary-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-300 {\n    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-400 {\n    --rb-gradient-from: rgb(var(--tb-primary-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-400 {\n    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-500 {\n    --rb-gradient-from: rgb(var(--tb-primary-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-500 {\n    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-600 {\n    --rb-gradient-from: rgb(var(--tb-primary-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-600 {\n    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-700 {\n    --rb-gradient-from: rgb(var(--tb-primary-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-700 {\n    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-800 {\n    --rb-gradient-from: rgb(var(--tb-primary-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-800 {\n    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-900 {\n    --rb-gradient-from: rgb(var(--tb-primary-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-900 {\n    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-950 {\n    --rb-gradient-from: rgb(var(--tb-primary-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-950 {\n    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for secondary */\n  :where(.theme-scope) .from-secondary-50 {\n    --rb-gradient-from: rgb(var(--tb-secondary-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-50 {\n    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-100 {\n    --rb-gradient-from: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-100 {\n    --rb-gradient-to: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-200 {\n    --rb-gradient-from: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-200 {\n    --rb-gradient-to: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-300 {\n    --rb-gradient-from: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-300 {\n    --rb-gradient-to: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-400 {\n    --rb-gradient-from: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-400 {\n    --rb-gradient-to: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-500 {\n    --rb-gradient-from: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-500 {\n    --rb-gradient-to: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-600 {\n    --rb-gradient-from: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-600 {\n    --rb-gradient-to: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-700 {\n    --rb-gradient-from: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-700 {\n    --rb-gradient-to: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-800 {\n    --rb-gradient-from: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-800 {\n    --rb-gradient-to: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-900 {\n    --rb-gradient-from: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-900 {\n    --rb-gradient-to: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-950 {\n    --rb-gradient-from: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-950 {\n    --rb-gradient-to: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for accent */\n  :where(.theme-scope) .from-accent-50 {\n    --rb-gradient-from: rgb(var(--tb-accent-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-50 {\n    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-100 {\n    --rb-gradient-from: rgb(var(--tb-accent-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-100 {\n    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-200 {\n    --rb-gradient-from: rgb(var(--tb-accent-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-200 {\n    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-300 {\n    --rb-gradient-from: rgb(var(--tb-accent-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-300 {\n    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-400 {\n    --rb-gradient-from: rgb(var(--tb-accent-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-400 {\n    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-500 {\n    --rb-gradient-from: rgb(var(--tb-accent-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-500 {\n    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-600 {\n    --rb-gradient-from: rgb(var(--tb-accent-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-600 {\n    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-700 {\n    --rb-gradient-from: rgb(var(--tb-accent-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-700 {\n    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-800 {\n    --rb-gradient-from: rgb(var(--tb-accent-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-800 {\n    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-900 {\n    --rb-gradient-from: rgb(var(--tb-accent-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-900 {\n    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-950 {\n    --rb-gradient-from: rgb(var(--tb-accent-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-950 {\n    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for neutral */\n  :where(.theme-scope) .from-neutral-50 {\n    --rb-gradient-from: rgb(var(--tb-neutral-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-50 {\n    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-100 {\n    --rb-gradient-from: rgb(var(--tb-neutral-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-100 {\n    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-200 {\n    --rb-gradient-from: rgb(var(--tb-neutral-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-200 {\n    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-300 {\n    --rb-gradient-from: rgb(var(--tb-neutral-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-300 {\n    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-400 {\n    --rb-gradient-from: rgb(var(--tb-neutral-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-400 {\n    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-500 {\n    --rb-gradient-from: rgb(var(--tb-neutral-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-500 {\n    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-600 {\n    --rb-gradient-from: rgb(var(--tb-neutral-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-600 {\n    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-700 {\n    --rb-gradient-from: rgb(var(--tb-neutral-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-700 {\n    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-800 {\n    --rb-gradient-from: rgb(var(--tb-neutral-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-800 {\n    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-900 {\n    --rb-gradient-from: rgb(var(--tb-neutral-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-900 {\n    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-950 {\n    --rb-gradient-from: rgb(var(--tb-neutral-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-950 {\n    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);\n  }\n\n  /* =================================================================\n   Header System Class Naming Conventions\n\n   rb-header-*    Utility-style classes set in site-header.ts layouts\n                  (rb-header-layout, rb-header-logo-sm, rb-header-logo-lg)\n\n   header-*       State/semantic classes set by transforms or runtime\n                  (header-root, header-scrolled, header-variant-*, header-logo-text)\n\n   nav-*          Navigation component classes (dropdowns, mobile, underlines)\n                  (nav-dropdown, nav-mobile-panel, nav-underline-grow)\n   ================================================================= */\n\n  /* =================================================================\n   Header Layout Padding\n\n   Padding is controlled entirely by CSS based on variant class.\n   This ensures shrink headers look identical to non-shrink before scroll.\n   ================================================================= */\n\n  /* Prevent scroll anchoring feedback loops when the header height transitions.\n   In some browsers, resizing a sticky header near the top can cause the UA to\n   adjust scroll position (\"scroll anchoring\"), which then flips the\n   `header-scrolled` threshold logic back and forth. */\n  :where(.theme-scope) .block-site-header {\n    overflow-anchor: none;\n  }\n\n  /* Base padding for horizontal variants (classic) */\n  :where(.theme-scope) .rb-header-layout {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n    transition: padding 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope)\n    .header-variant-classic\n    .rb-header-layout:has(.header-logo-accommodation-popout-badge) {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n\n  /* Vertical variants need more breathing room\n   Note: header-variant-* is on Section (ancestor), rb-header-layout on inner div */\n  :where(.theme-scope) .header-variant-centered .rb-header-layout {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n\n  /* Floating variant - compact padding */\n  :where(.theme-scope) .header-variant-floating .rb-header-layout {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n\n  /* =================================================================\n   Header Shrink-on-Scroll\n\n   Only applies when .rb-header-shrink is present AND user has scrolled.\n   No changes until scroll - shrink header = non-shrink header initially.\n   ================================================================= */\n\n  /* Scrolled state - reduce padding */\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n\n  /* Vertical variants get gentler reduction\n   Note: Both classes are on Section, rb-header-layout on inner div */\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .rb-header-layout {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n\n  /* Floating variant */\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-floating\n    .rb-header-layout {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  /* =================================================================\n   Logo & Title Sizing\n\n   Font sizes controlled here, not via utility classes, so shrink\n   transitions work (utility classes would override :where()).\n   ================================================================= */\n\n  /* Logo image sizing */\n  :where(.theme-scope) .rb-header-logo-sm {\n    height: 2.5rem;\n    transition: height 300ms var(--motion-ease, ease);\n  }\n  :where(.theme-scope) .rb-header-logo-lg {\n    height: 3rem;\n    transition: height 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope) .header-logo-size-compact.rb-header-logo-sm {\n    height: 2rem;\n  }\n  :where(.theme-scope) .header-logo-size-compact.rb-header-logo-lg {\n    height: 2.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard.rb-header-logo-sm {\n    height: 2.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard.rb-header-logo-lg {\n    height: 3rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous.rb-header-logo-sm {\n    height: 3.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous.rb-header-logo-lg {\n    height: 4.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-display.rb-header-logo-sm {\n    height: 7.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-display.rb-header-logo-lg {\n    height: 8rem;\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-plate,\n  :where(.theme-scope) .header-logo-accommodation-centered-badge,\n  :where(.theme-scope) .header-logo-accommodation-popout-badge,\n  :where(.theme-scope) .header-logo-accommodation-centered-masthead {\n    border-radius: var(--radius-md, 0.5rem);\n    background: var(--color-surface, #fff);\n    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.08));\n    padding: 0.5rem;\n    transition:\n      margin 300ms var(--motion-ease, ease),\n      padding 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-popout-badge {\n    position: relative;\n    z-index: 1;\n    margin-block: 0 -1.25rem;\n  }\n\n  :where(.theme-scope)\n    .header-logo-size-display.header-logo-accommodation-popout-badge {\n    margin-block: 0 -4rem;\n  }\n\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-plate,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-popout-badge,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-centered-masthead,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .header-logo-size-display.header-logo-accommodation-centered-badge,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .header-logo-size-display.header-logo-accommodation-centered-masthead {\n    position: relative;\n    z-index: 1;\n    margin-block: 0 -2.75rem;\n  }\n\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .rb-header-layout {\n    gap: 0.75rem;\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-centered-masthead {\n    padding: 0.75rem 1rem;\n  }\n\n  /* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */\n  :where(.theme-scope) .header-logo-text {\n    font-size: 1.125rem; /* matches rb-text-lg */\n    line-height: 1.75rem;\n    margin-inline: -0.18em;\n    padding-inline: 0.18em;\n    transition: font-size 300ms var(--motion-ease, ease);\n  }\n\n  /* Centered variant uses larger title */\n  :where(.theme-scope) .header-variant-centered .header-logo-text {\n    font-size: 1.25rem; /* matches rb-text-xl */\n    line-height: 1.75rem;\n  }\n\n  :where(.theme-scope) .header-logo-size-compact .header-logo-text {\n    font-size: 0.95rem;\n    line-height: 1.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard .header-logo-text {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous .header-logo-text {\n    font-size: 1.35rem;\n    line-height: 1.9rem;\n  }\n  :where(.theme-scope) .header-logo-size-display .header-logo-text {\n    font-size: 1.75rem;\n    line-height: 2.25rem;\n  }\n\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-compact\n    .header-logo-text {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-standard\n    .header-logo-text {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-generous\n    .header-logo-text {\n    font-size: 1.6rem;\n    line-height: 2rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-display\n    .header-logo-text {\n    font-size: 2.1rem;\n    line-height: 2.5rem;\n  }\n\n  /* Mobile: reduce site title size to keep header compact */\n  @container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .header-logo-text,\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-standard .header-logo-text {\n      font-size: 0.8rem;\n      line-height: 1.25rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-compact .header-logo-text {\n      font-size: 0.75rem;\n      line-height: 1.15rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-generous .header-logo-text {\n      font-size: 1rem;\n      line-height: 1.4rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-display .header-logo-text {\n      font-size: 1.25rem;\n      line-height: 1.65rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-variant-centered .header-logo-text,\n    :where(.theme-scope:is(*, :scope))\n      .header-variant-centered\n      .header-logo-size-standard\n      .header-logo-text {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n\n    :where(.theme-scope:is(*, :scope))\n      .header-variant-centered\n      .header-logo-size-compact\n      .header-logo-text {\n      font-size: 0.8rem;\n      line-height: 1.2rem;\n    }\n\n    :where(.theme-scope:is(*, :scope))\n      .header-variant-centered\n      .header-logo-size-generous\n      .header-logo-text {\n      font-size: 1.125rem;\n      line-height: 1.5rem;\n    }\n\n    :where(.theme-scope:is(*, :scope))\n      .header-variant-centered\n      .header-logo-size-display\n      .header-logo-text {\n      font-size: 1.35rem;\n      line-height: 1.75rem;\n    }\n}\n}\n\n  /* =================================================================\n   Shrink on Scroll - Logo & Title\n   ================================================================= */\n\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {\n    height: 2rem;\n  }\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {\n    height: 2.5rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-generous.rb-header-logo-sm {\n    height: 2.75rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-generous.rb-header-logo-lg {\n    height: 3.25rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-display.rb-header-logo-sm,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-display.rb-header-logo-lg {\n    height: 3.75rem;\n  }\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {\n    font-size: 0.875rem;\n  }\n\n  @container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .header-logo-size-generous.rb-header-logo-sm,\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-generous.rb-header-logo-lg {\n      height: 3rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-display.rb-header-logo-sm,\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-display.rb-header-logo-lg {\n      height: 5.5rem;\n    }\n\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.rb-header-logo-sm,\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.rb-header-logo-lg {\n      height: 3.5rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-logo-accommodation-popout-badge {\n      margin-block: 0;\n    }\n\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-plate,\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-popout-badge,\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-masthead,\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-badge,\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-masthead {\n      position: relative;\n      z-index: 1;\n      margin-block: 0 -2.75rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .rb-header-shrink.header-scrolled .header-logo-text {\n      font-size: 0.75rem;\n    }\n}\n}\n\n  /* =================================================================\n   Accessibility: Reduced Motion\n   ================================================================= */\n\n  @media (prefers-reduced-motion: reduce) {\n    :where(.theme-scope) .rb-header-layout,\n    :where(.theme-scope) .rb-header-logo-sm,\n    :where(.theme-scope) .rb-header-logo-lg,\n    :where(.theme-scope) .header-logo-text {\n      transition: none;\n    }\n  }\n\n  /* Nav underline-grow animation (used by navStyle: \"underline-grow\" in site-header.ts) */\n  :where(.theme-scope) .nav-underline-grow {\n    position: relative;\n    overflow: visible;\n  }\n  :where(.theme-scope) .nav-underline-grow::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: var(--nav-underline-offset, -0.35em);\n    width: 100%;\n    height: 2px;\n    background-color: currentColor;\n    transform: scaleX(0);\n    transform-origin: left center;\n    transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);\n  }\n  :where(.theme-scope) .nav-underline-grow:hover::after,\n  :where(.theme-scope)\n    .nav-underline-grow.nav-underline-active[data-active='true']::after {\n    transform: scaleX(1);\n  }\n  :where(.theme-scope) .nav-underline-offset-tight {\n    --nav-underline-offset: -0.2em;\n  }\n  :where(.theme-scope) .nav-underline-offset-normal {\n    --nav-underline-offset: -0.3em;\n  }\n  :where(.theme-scope) .nav-underline-offset-loose {\n    --nav-underline-offset: -0.45em;\n  }\n\n  :where(.theme-scope) .card-surface {\n    background: rgb(var(--tb-surface));\n    color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-text-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-heading-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-link-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-link-hover-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-link-hover-decoration: underline;\n    --rb-surface-supporting-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    border: 1px solid rgb(var(--tb-border));\n    border-radius: var(--radius-card);\n    box-shadow: var(--shadow-elev);\n  }\n  :where(.theme-scope) .media-rounded {\n    border-radius: var(--radius-card);\n  }\n\n  :where(.theme-scope) .is-placeholder::after {\n    content: 'Placeholder';\n    position: absolute;\n    top: 0.5rem;\n    left: 0.5rem;\n    font-size: 11px;\n    background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);\n    color: rgb(var(--tb-text));\n    padding: 0.15rem 0.35rem;\n    border-radius: 4px;\n    opacity: 0.85;\n  }\n\n  /* Status badges - theme-aware styling for capacity indicators */\n  :where(.theme-scope) .badge-status {\n    display: inline-flex;\n    align-items: center;\n    padding: 0.125rem 0.625rem;\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.25rem;\n  }\n\n  /* All badges use a subtle theme-aware style by default */\n  :where(.theme-scope) .badge-status-available {\n    background-color: rgb(var(--tb-secondary) / 0.15);\n    color: rgb(var(--tb-secondary-700, var(--tb-secondary)));\n  }\n\n  :where(.theme-scope) .badge-status-low {\n    background-color: rgb(var(--tb-accent) / 0.15);\n    color: rgb(var(--tb-accent-700, var(--tb-accent)));\n  }\n\n  :where(.theme-scope) .badge-status-sold-out {\n    background-color: rgb(var(--tb-text) / 0.1);\n    color: rgb(var(--tb-mutedText));\n  }\n\n  /* Event list empty state - theme-aware */\n  :where(.theme-scope) .event-list-empty {\n    background-color: rgb(var(--tb-surface));\n    color: rgb(var(--tb-onSurface, var(--tb-text)));\n    border-color: rgb(var(--tb-border));\n  }\n} /* end @layer rb-theme */\n\n@keyframes accordion-down {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n\n@keyframes accordion-up {\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n:where(.theme-scope) [data-animation=\"accordion\"][data-state=\"open\"] {\n  animation: accordion-down 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n:where(.theme-scope) [data-animation=\"accordion\"][data-state=\"closed\"] {\n  animation: accordion-up 0.3s cubic-bezier(0.4, 0, 1, 1);\n}\n\n/*\n * Block Static CSS Modules\n *\n * IMPORTANT: Import order is part of the cascade contract.\n * Keep these imports in the same order as the original monolithic file,\n * and add new modules at the end unless you are intentionally changing cascade.\n */\n\n/* =============================================================================\n * Shared: Registration Surface (issue 1174)\n *\n * Wizard-surface primitives shared by the event-registration,\n * appointment-booking blocks: surface container,\n * selectable option cards, step indicator, wizard actions row, on-surface\n * text ramp, layout stacks, summary box and skeleton shell lines.\n *\n * Uses:\n * - Tier 1 vars: --tb-* (from theme palette) as inline fallbacks\n * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)\n * - Shared vars: --rb-reg-* (mapped per block by the Tier 3 var generators;\n *   canonical name list in blocks/registrationSurfaceVars.ts)\n *\n * Defaults intentionally match the event-registration (issue 1089) values; blocks\n * that need to preserve a different look override in their own block CSS,\n * which is imported after this file (cascade order is the override contract \u2014\n * all selectors here are zero-specificity `:where()`).\n *\n * Layout-only `.rb-state-icon` rules (formerly registration-shared.css) live\n * here too; block CSS provides the `.rb-state-icon--{variant}` colors.\n *\n * Naming: component-like primitives follow the existing bare `rb-` shared\n * precedent (`.rb-state-icon`, `.rb-tile`): `.rb-option-card`, `.rb-progress*`,\n * `.rb-wizard-actions`, `.rb-on-surface`, `.rb-shell-*`. Container/layout\n * pieces that would otherwise collide with the global `.rb-*` utility layer\n * are namespaced `rb-reg-*` (`.rb-reg-surface`, `.rb-reg-stack`, ...). All of\n * them are scoped to the three registration blocks either way.\n * ============================================================================= */\n\n/* Terminal state icon (layout only \u2014 colors are per-block) */\n:where(.theme-scope) .rb-state-icon {\n  width: 4rem;\n  height: 4rem;\n  margin: 0 auto 1rem;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope) .rb-state-icon svg {\n  width: 2rem;\n  height: 2rem;\n}\n\n/* The success tick reads as a mark inside its disc, not a line drawing */\n:where(.theme-scope) .rb-state-icon--success svg {\n  width: 1.75rem;\n  height: 1.75rem;\n  stroke-width: 3;\n}\n\n/* Surface container */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-surface {\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  padding: clamp(1rem, 2vw, 1.5rem);\n  background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));\n  /* The panel paints its own surface, so it owns its foreground and its\n   * button context. Both are published from the theme by the opaque-panel\n   * registry (theme-core/src/blocks/opaquePanels.ts): an enclosing brand band\n   * would otherwise hand its light text and band-resolved buttons (on Anna's\n   * therapy page, a white-on-white Continue) to this light panel. */\n  transition: border-color var(--rb-block-transition, 150ms) ease;\n  width: 100%;\n  max-width: 800px;\n  margin-inline: 0;\n}\n\n/* Selectable option card */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem;\n  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  background: var(--rb-reg-option-bg, transparent);\n  color: inherit;\n  cursor: pointer;\n  text-align: left;\n  transition: border-color var(--rb-block-transition, 150ms) ease,\n              background-color var(--rb-block-transition, 150ms) ease,\n              box-shadow var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n  border-color: var(--rb-reg-border-hover, rgb(var(--tb-primary, 17 24 39) / 0.5));\n  box-shadow: var(--rb-reg-option-hover-shadow, 0 8px 18px rgb(var(--tb-shadow, 15 23 42) / 0.08));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card:focus-visible {\n  outline: 2px solid var(--rb-reg-focus-ring, rgb(var(--tb-primary, 17 24 39) / 0.3));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--selected {\n  border-color: var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));\n  background-color: var(--rb-reg-bg-selected, rgb(var(--tb-primary, 17 24 39) / 0.08));\n  box-shadow: 0 0 0 1px var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--disabled:hover {\n  border-color: var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  box-shadow: none;\n}\n\n/* Check indicator */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-check {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 50%;\n  background: var(--rb-reg-check-bg, rgb(var(--tb-primary, 17 24 39)));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-check svg {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: var(--rb-reg-check-text, rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255))));\n}\n\n/* Progress: the current step's label, \"Step N of M\" and a thin bar (issue 1581) */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 1rem;\n  font-size: 0.8125rem;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress__label {\n  font-weight: 700;\n  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress__count {\n  margin-inline-start: auto;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.7));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress__track {\n  height: 4px;\n  border-radius: 4px;\n  background: rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.12);\n  overflow: hidden;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress__fill {\n  height: 100%;\n  border-radius: 4px;\n  background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));\n  transition: width var(--rb-block-transition, 150ms) ease;\n}\n\n/* Wizard actions row */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-wizard-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  margin-top: 1.5rem;\n}\n\n/* When there's only one action (no back button), push it to the right */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-wizard-actions > :only-child {\n  margin-inline-start: auto;\n}\n\n/* A footer with only Back keeps it bottom-left, like every other step */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-wizard-actions--back-only > :only-child {\n  margin-inline-start: 0;\n}\n\n/* On-surface text ramp */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface {\n  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--muted {\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.7));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--subtle {\n  color: var(--rb-reg-on-surface-subtle, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.6));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--faint {\n  color: var(--rb-reg-on-surface-faint, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.5));\n}\n\n/* Layout stacks */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-stack--sm {\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-row--between {\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-grid {\n  display: grid;\n  gap: 0.75rem;\n}\n\n/* Summary box */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-summary {\n  padding: 1rem;\n  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.75);\n  border: 1px solid var(--rb-reg-summary-border, rgb(var(--tb-border, 226 232 240)));\n  background: var(--rb-reg-summary-bg, rgb(var(--tb-muted, 241 245 249) / 0.42));\n}\n\n/* Skeleton shell lines */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line {\n  height: 0.75rem;\n  border-radius: 9999px;\n  background: linear-gradient(\n    90deg,\n    var(--rb-reg-shell-line, rgb(var(--tb-mutedText, 100 116 139) / 0.22)),\n    rgb(var(--tb-primary, 17 24 39) / 0.12),\n    var(--rb-reg-shell-line, rgb(var(--tb-mutedText, 100 116 139) / 0.22))\n  );\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--lg {\n  width: min(26rem, 82%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--md {\n  width: min(19rem, 68%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--sm {\n  width: min(14rem, 52%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--xs {\n  width: min(10rem, 42%);\n}\n\n/* Skeleton block (rectangular placeholder, pulses) */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-block {\n  height: 2.5rem;\n  width: 100%;\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  background: var(--rb-reg-shell-line, rgb(var(--tb-mutedText, 100 116 139) / 0.22));\n  animation: rb-reg-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes rb-reg-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-block {\n    animation: none;\n  }\n}\n\n/* Payment choices (issue 1581): one full-width radio row per way to pay, the\n * label and detail on the left, the price on the right. Shared by event and\n * appointment booking (PaymentChoiceRows). */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choices {\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.875rem;\n  padding: 1rem 1.125rem;\n  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border)));\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  background: var(--rb-reg-option-bg, transparent);\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n  cursor: pointer;\n  transition:\n    border-color var(--rb-block-transition, 150ms) ease,\n    background-color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice:hover:not(.rb-pay-choice--disabled) {\n  border-color: var(--rb-reg-border-hover, rgb(var(--tb-primary) / 0.5));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice:focus-within {\n  box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.25);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice--selected {\n  border-color: rgb(var(--tb-primary));\n  box-shadow: inset 0 0 0 1px rgb(var(--tb-primary));\n  background: rgb(var(--tb-primary) / 0.06);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice--selected:focus-within {\n  box-shadow:\n    inset 0 0 0 1px rgb(var(--tb-primary)),\n    0 0 0 3px rgb(var(--tb-primary) / 0.25);\n}\n\n/* Disabled stays readable: a dashed edge and quieter text, with its reason */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice--disabled {\n  border-style: dashed;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice--disabled :is(.rb-pay-choice__label, .rb-pay-choice__detail, .rb-pay-choice__price) {\n  opacity: 0.65;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__radio {\n  flex: 0 0 auto;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0.125rem 0 0;\n  accent-color: rgb(var(--tb-primary));\n  cursor: inherit;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__body {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__label {\n  font-weight: 700;\n  line-height: 1.35;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__detail {\n  font-size: 0.875rem;\n  line-height: 1.4;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-text) / 0.7));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__reason {\n  font-size: 0.8125rem;\n  line-height: 1.4;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__price {\n  flex: 0 0 auto;\n  font-weight: 700;\n  text-align: end;\n  white-space: nowrap;\n}\n\n/* =============================================================================\n * Block: Event Registration (pilot #76)\n * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) {\n  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);\n  --rb-event-tile-bg: var(--er-event-card-bg);\n  --rb-event-tile-border: var(--er-border);\n  --rb-event-tile-border-width: var(--er-event-card-border-width);\n  --rb-event-tile-border-hover: var(--er-border-hover);\n  --rb-event-tile-border-selected: var(--er-border-selected);\n  --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);\n  --rb-event-tile-bg-selected: rgb(var(--tb-primary) / 0.1);\n  --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));\n  --er-on-surface-muted: rgb(var(--tb-onSurface, var(--tb-text)) / 0.7);\n  --er-on-surface-subtle: rgb(var(--tb-onSurface, var(--tb-text)) / 0.6);\n  --er-on-surface-faint: rgb(var(--tb-onSurface, var(--tb-text)) / 0.5);\n  --er-on-surface-hover-bg: rgb(var(--tb-onSurface, var(--tb-text)) / 0.05);\n  --er-on-surface-disabled: rgb(var(--tb-onSurface, var(--tb-text)) / 0.78);\n  --er-on-surface-disabled-detail: rgb(var(--tb-onSurface, var(--tb-text)) / 0.68);\n}\n\n/* Container: styled by the shared .rb-reg-surface (registration-surface.css);\n   .er-container remains in markup as a hook and for the overlay/embedded\n   variants below. */\n\n/* SSR shell / required-island fallback */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell {\n  min-height: 24rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__steps {\n  margin-bottom: 1.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__eyebrow {\n  margin: 0 0 0.35rem;\n  color: var(--er-on-surface-subtle);\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  line-height: 1.2;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__title {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__copy {\n  margin: 0.35rem 0 0;\n  max-width: 36rem;\n  line-height: 1.45;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__cards {\n  margin-top: 0.25rem;\n  overflow: hidden;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__card {\n  display: grid;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n\n/* Shell skeleton lines: styled by the shared .rb-shell-line family\n   (registration-surface.css); legacy classes remain in markup as hooks. */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__summary {\n  align-items: center;\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  border: 1px solid var(--er-summary-border);\n  padding: 0.875rem 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__button-placeholder {\n  display: inline-flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255)));\n  padding: 0.625rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .event-registration__hydration-error {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--er-border-error);\n  background: var(--er-error-bg);\n  color: var(--er-error-text);\n  padding: 1rem;\n  font-size: 0.9375rem;\n  line-height: 1.45;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'].event-registration--embedded)\n  .er-container {\n  max-width: none;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n/* Empty/unavailable states */\n:where(.theme-scope) :where([data-block='event-registration']) .er-empty {\n  border-radius: var(--rb-block-radius);\n  border: 1px dashed var(--er-border);\n  padding: 3rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-empty__text {\n  opacity: 0.6;\n}\n\n/* Date step (issue 1581): one radio row per date, on the shared event tile */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-list__month {\n  margin: 0.5rem 0 0;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-list__month:first-child {\n  margin-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card.er-date-option {\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  padding: 0.875rem 1rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option:focus-within {\n  box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.25);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option__radio {\n  flex: 0 0 auto;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0;\n  accent-color: rgb(var(--tb-primary));\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option__date {\n  font-weight: 700;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option__time {\n  font-size: 0.875rem;\n  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option__places {\n  flex: 0 0 auto;\n  padding: 0.125rem 0.5rem;\n  border: 1px solid var(--er-border);\n  border-radius: 999px;\n  font-size: 0.75rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n\n/* Full dates stay selectable (a guest can still reach recovery) but read as quiet */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option--full {\n  border-style: dashed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option--full\n  :is(.er-date-option__main, .er-date-option__places) {\n  opacity: 0.6;\n}\n\n/* Capacity badges */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge {\n  font-size: 0.875rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--available {\n  background: var(--er-capacity-available-bg);\n  color: var(--er-capacity-available-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--low {\n  background: var(--er-capacity-low-bg);\n  color: var(--er-capacity-low-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--soldout {\n  background: var(--er-capacity-soldout-bg);\n  color: var(--er-capacity-soldout-text);\n}\n\n/* Selected event summary: superseded by the shared .rb-reg-summary\n   (registration-surface.css); no markup emitted .er-event-summary anymore. */\n\n/* Ticket counter */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-counter-group {\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-counter {\n  gap: 0.625rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-counter-btn {\n  width: 2.125rem;\n  height: 2.125rem;\n  border-radius: 50%;\n  border: 1px solid var(--er-border);\n  background: transparent;\n  cursor: pointer;\n  font-size: 1rem;\n  line-height: 1;\n  transition: border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-btn:hover:not(:disabled) {\n  border-color: var(--er-border-hover);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-counter-limit {\n  margin: 0;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-lines {\n  display: grid;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-list {\n  display: grid;\n  gap: 0.625rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-ticket-line {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 0.875rem;\n  min-height: 4.75rem;\n  padding: 0.875rem;\n  border: 1px solid var(--er-border);\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  background: var(--er-control-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line--disabled {\n  color: var(--er-on-surface-disabled);\n  background: var(--er-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-main {\n  min-width: 0;\n  display: grid;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-heading {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-name {\n  min-width: 0;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n  overflow-wrap: anywhere;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-price {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-detail {\n  margin: 0;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary {\n  padding: 0.75rem 0.875rem;\n  border: 1px solid var(--er-summary-border);\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  background: var(--er-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary-list {\n  margin: 0.25rem 0 0;\n  padding-left: 1.125rem;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.4;\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-ticket-line {\n    grid-template-columns: minmax(0, 1fr);\n    align-items: stretch;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-ticket-line\n    .er-counter {\n    justify-content: flex-start;\n  }\n}\n}\n\n/* Fields use the theme's own form-label / form-input / form-textarea\n   (theme-core/src/inputs/generateInputCss.ts), like the site's form block. */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-label-optional {\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: normal;\n  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-field-hint {\n  margin: 0.375rem 0 0;\n  font-size: 0.8125rem;\n  line-height: 1.4;\n  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-consent-check {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-error {\n  font-size: 0.875rem;\n  color: var(--er-error-text);\n  margin-top: 0.25rem;\n}\n\n/* Back button */\n:where(.theme-scope) :where([data-block='event-registration']) .er-back-btn {\n  font-size: 0.9375rem;\n  font-weight: 700;\n  opacity: 0.8;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0 0.25rem;\n  min-height: 2.75rem;\n  transition: opacity var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-back-btn:hover {\n  opacity: 1;\n}\n\n/* State icon color variants (layout from registration-surface.css) */\n/* Success: a solid primary disc with an on-primary tick (issue 1581) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--success {\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--info {\n  background: var(--er-info-bg);\n  color: var(--er-info-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--error {\n  background: var(--er-error-bg);\n  color: var(--er-error-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--waitlist {\n  background: var(--er-waitlist-bg);\n  color: var(--er-waitlist-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--warning {\n  background: var(--er-waitlist-bg);\n  color: var(--er-waitlist-text);\n}\n\n/* Retry button */\n:where(.theme-scope) :where([data-block='event-registration']) .er-retry-btn {\n  padding: 0.5rem 1rem;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  border: 1px solid var(--er-border);\n  background: transparent;\n  cursor: pointer;\n  transition: border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-retry-btn:hover {\n  border-color: var(--er-border-hover);\n}\n\n/* Typography */\n:where(.theme-scope) :where([data-block='event-registration']) .er-title {\n  font-family: var(--font-heading, inherit);\n  font-size: var(--er-step-title-size, 1.75rem);\n  line-height: 1.15;\n}\n\n/* Confirmation and error titles: never smaller than a step's heading */\n:where(.theme-scope) :where([data-block='event-registration']) .er-title--lg {\n  font-size: calc(var(--er-step-title-size, 1.75rem) * 1.15);\n  line-height: 1.1;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text {\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text--muted {\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text--faint {\n  opacity: 0.6;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-title {\n  font-weight: 500;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-card {\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card {\n  padding: 0.875rem 0;\n  border-width: 0 0\n    var(--rb-event-tile-border-width, var(--rb-border-width, 1px)) 0;\n  border-style: solid;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card:last-child {\n  border-bottom-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-option {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-option-main {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-title {\n  font-size: 1rem;\n  line-height: 1.35;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-event-title {\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text {\n  color: var(--er-on-surface);\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card\n  .er-text {\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text--muted {\n  color: var(--er-on-surface-muted);\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text--faint {\n  color: var(--er-on-surface-faint);\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled {\n  color: var(--er-on-surface-disabled);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card--selected {\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card--selected\n  .er-event-title {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled\n  .er-text--muted,\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled\n  .er-text--faint {\n  color: var(--er-on-surface-disabled-detail);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-capacity-badge {\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-value {\n  font-size: 1.25rem;\n  font-weight: 700;\n  width: 1.625rem;\n  text-align: center;\n}\n\n/* Layout stacks/rows: styled by the shared .rb-reg-stack / .rb-reg-row\n   (registration-surface.css); legacy classes remain in markup as hooks. */\n\n/* Event/date selection rows */\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-center {\n  text-align: center;\n  padding: 2rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-icon {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 1rem;\n}\n\n/* Actions row: styled by the shared .rb-wizard-actions (registration-surface.css);\n   .er-actions remains in markup as a hook. */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-button-with-spinner {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-button-spinner {\n  flex-shrink: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-altcha {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-field\n  + .er-field {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-message {\n  margin-bottom: 1rem;\n}\n\n/* Stripe's Pay button is inside its iframe, so the way back sits above the form. */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-embedded-payment__back {\n  display: block;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-notice {\n  margin-bottom: 1rem;\n  width: 100%;\n  padding: 1.25rem;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  background: rgb(var(--tb-surface) / 0.5);\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-title {\n  margin: 0;\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-notice\n  .rb-state-icon {\n  margin: 0 auto 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-copy {\n  margin: 0.5rem 0 0;\n  font-size: 0.9375rem;\n  color: var(--er-on-surface-muted);\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-link {\n  margin-top: 0.75rem;\n  padding: 0;\n  border: 0;\n  background: none;\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-primary));\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-link:hover {\n  text-decoration: none;\n}\n\n/* Payment group container */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group\n  + .er-payment-group {\n  margin-top: 1.5rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  margin: 0 0 0.25rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group-subtitle {\n  font-size: 0.8125rem;\n  color: var(--er-on-surface-subtle);\n  margin: 0 0 0.5rem 0;\n}\n\n/* Payment option card */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem;\n  border: 1px solid var(--er-payment-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n  cursor: pointer;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option:hover {\n  border-color: var(--er-payment-border-hover);\n  box-shadow: 0 8px 18px rgb(var(--tb-shadow, 15 23 42) / 0.08);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--selected {\n  border-color: var(--er-payment-border-selected);\n  background-color: var(--er-payment-bg-selected);\n  box-shadow: 0 0 0 1px var(--er-payment-border-selected);\n}\n\n/* Discount code entry */\n:where(.theme-scope) :where([data-block='event-registration']) .er-discount {\n  margin-top: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__form {\n  display: grid;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__toggle {\n  background: transparent;\n  border: 0;\n  padding: 0;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  font-size: 0.875rem;\n  text-decoration: underline;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__toggle:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__label {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__input {\n  flex: 1;\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 1px solid var(--er-border);\n  padding: 0.5rem 0.75rem;\n  background: rgb(var(--tb-background));\n  color: rgb(var(--tb-foreground));\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__input:focus {\n  outline: 2px solid var(--er-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__remove {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  color: var(--er-on-surface);\n  cursor: pointer;\n  opacity: 0.7;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__apply {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  color: var(--er-on-surface);\n  cursor: pointer;\n  opacity: 0.8;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__remove:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__apply:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__hint {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__feedback {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n/* Visually hide native radio but keep focusable (sr-only pattern) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-radio {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Focus ring on label when radio is focused */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option:focus-within {\n  outline: 2px solid var(--er-payment-border-selected);\n  outline-offset: 2px;\n}\n\n/* Content layout */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-name {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-detail {\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-description {\n  font-size: 0.8125rem;\n  color: var(--er-on-surface-subtle);\n  margin-top: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-validity {\n  font-size: 0.75rem;\n  color: var(--er-on-surface-faint);\n}\n\n/* Checkmark indicator: styled by the shared .rb-option-check\n   (registration-surface.css); .er-check remains in markup as a hook. */\n\n/* Payment summary */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-summary {\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-price {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--er-on-surface);\n}\n\n/* Guest details section */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section {\n  margin-top: 1.5rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section\n  .er-title {\n  margin: 0 0 0.75rem;\n}\n\n/* Error banner for guest section */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section-error {\n  padding: 0.75rem 1rem;\n  margin-bottom: 1rem;\n  background: var(--er-error-bg);\n  border: 1px solid var(--er-border-error);\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  color: var(--er-error-text);\n  font-size: 0.875rem;\n}\n\n/* Card-based layout for guests */\n:where(.theme-scope) :where([data-block='event-registration']) .er-guest-cards {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-guest-card {\n  display: grid;\n  gap: 0.75rem;\n  padding: 1rem 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-card\n  .er-field\n  + .er-field {\n  margin-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-card\n  + .er-guest-card {\n  border-top: 1px solid var(--er-border);\n}\n\n\n/* Shake animation for validation errors */\n@keyframes er-shake {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-4px);\n  }\n  40%,\n  80% {\n    transform: translateX(4px);\n  }\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section--shake {\n  animation: er-shake 0.4s ease-in-out;\n}\n\n/* =============================================================================\n * Shared: Event Cards (Listing / Spotlight / Combined)\n * Uses:\n * - Tier 1 vars: --tb-*-{shade} (from theme palette)\n * - Tier 2 vars: --rb-block-transition (from theme scope)\n * - Tier 3 vars: --rb-event-card-* (from event-calendar + event-cards var generators)\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined'],\n    .event-card--catalogue\n  )\n  .event-card-media {\n  height: var(--rb-event-card-media-height, 16rem);\n  overflow: hidden;\n  position: relative;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined'],\n    .event-card--catalogue\n  )\n  .event-card-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transform: scale(1);\n  transition: transform var(--rb-event-card-image-transition-duration, 700ms)\n    ease;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'] .event-card:hover,\n    [data-block='event-spotlight'] .event-card:hover,\n    [data-block='event-calendar'] .event-card:hover,\n    [data-block='event-combined'] .event-card:hover,\n    .event-card--catalogue:hover\n  )\n  .event-card-image {\n  transform: scale(var(--rb-event-card-image-hover-scale, 1.08));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card {\n  transition: transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card-cta {\n  width: 100%;\n  justify-content: center;\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card:hover {\n  transform: translateY(var(--rb-event-card-hover-translate-y, 0px));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  background: var(--rb-event-card-overlay-color, rgb(var(--tb-primary)));\n  opacity: var(--rb-event-card-overlay-opacity, 0);\n  mix-blend-mode: var(--rb-event-card-overlay-blend-mode, multiply);\n  transition: opacity var(--rb-block-transition) ease;\n  pointer-events: none;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card:hover\n  .event-card-overlay {\n  opacity: var(--rb-event-card-overlay-hover-opacity, 0);\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge {\n  display: inline-flex;\n  align-items: center;\n  width: fit-content;\n  padding: 0.35rem 0.95rem;\n  border-radius: 9999px;\n  font-size: 0.65rem;\n  font-weight: 700;\n  line-height: 1rem;\n  text-transform: uppercase;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge--overlay {\n  position: absolute;\n  top: 0.75rem;\n  left: 0.75rem;\n  z-index: 20;\n  margin-bottom: 0;\n  pointer-events: none;\n}\n\n/* =============================================================================\n * EventCard: Horizontal Layout (stack mode, md+ screens only)\n * ============================================================================= */\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal {\n    display: flex;\n    flex-direction: row;\n    gap: var(--rb-event-card-horizontal-gap, 1rem);\n  }\n\n  /* Image: ~1/3 width */\n  :where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-media {\n    width: var(--rb-event-card-horizontal-image-width, 33.333%);\n    min-width: 200px;\n    max-width: 320px;\n    height: auto;\n    aspect-ratio: 4/3;\n    flex-shrink: 0;\n  }\n\n  /* Content: fills remaining space */\n  :where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .card-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* Footer: row layout with button on left, capacity on right */\n  :where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-footer {\n    flex-direction: row-reverse;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  /* Button: auto width */\n  :where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-cta {\n    width: auto;\n  }\n\n  /* Capacity: right-aligned */\n  :where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-capacity {\n    text-align: right;\n  }\n}\n}\n\n/* Keep token list in sync with `EVENT_CATEGORY_BADGE_TOKENS` in `packages/blocks/src/system/constants/events.ts`. */\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='primary'] {\n  background-color: rgb(var(--tb-primary-200));\n  color: rgb(var(--tb-primary-800));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='secondary'] {\n  background-color: rgb(var(--tb-secondary-200));\n  color: rgb(var(--tb-secondary-800));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='accent'] {\n  background-color: rgb(var(--tb-accent-200));\n  color: rgb(var(--tb-accent-800));\n}\n\n/* Notice/info boxes */\n:where(.theme-scope) :where([data-block='event-registration']) .er-notice {\n  padding: 0.75rem 1rem;\n  border-radius: var(--er-radius);\n  margin-bottom: 1rem;\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-notice p {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-notice--info {\n  background-color: rgb(var(--tb-primary-100) / 0.5);\n  border: 1px solid rgb(var(--tb-primary-300) / 0.5);\n  color: rgb(var(--tb-primary-800));\n}\n\n/* Disabled payment group */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group--disabled {\n  opacity: 0.6;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group--disabled\n  .er-payment-group-title {\n  color: var(--er-on-surface-faint);\n}\n\n/* Disabled payment option */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--disabled:hover {\n  border-color: var(--er-payment-border);\n  background-color: transparent;\n}\n\n/* =============================================================================\n * Payment Step Layout\n * Main flow + optional legacy sidebar area + footer summary/actions\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout {\n  display: grid;\n  gap: 1.25rem;\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'sidebar'\n    'main'\n    'footer';\n}\n\n/* When no sidebar, main takes full width */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout--no-sidebar {\n  grid-template-areas:\n    'main'\n    'footer';\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-payment-layout {\n    grid-template-columns: 1fr 260px;\n    grid-template-areas:\n      'main sidebar'\n      'footer footer';\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-payment-layout--no-sidebar {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'main'\n      'footer';\n  }\n}\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main {\n  grid-area: main;\n  /* A column, so an optional sign-in line can settle at the foot of the step. */\n  display: flex;\n  flex-direction: column;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main\n  > * {\n  flex-shrink: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main\n  > .er-portal-auth[data-placement='before'] {\n  margin-bottom: 1.5rem;\n}\n\n/* The optional sign-in line: pinned to the foot of the step behind a hairline,\n   and never closer than 1.5rem to the step's content. */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main\n  > .er-portal-auth[data-placement='after'] {\n  margin-top: auto;\n  padding-top: 1rem;\n  border-top: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main\n  > :has(+ .er-portal-auth[data-placement='after']) {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-sidebar {\n  grid-area: sidebar;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-footer {\n  grid-area: footer;\n  display: flex;\n  flex-direction: column;\n  gap: 0.875rem;\n}\n\n/* =============================================================================\n * Attendance mode tiles (in person / online)\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tiles {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  gap: 0.75rem;\n  align-items: stretch;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tiles\n  > [role='listitem'] {\n  min-width: 0;\n  display: flex;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile {\n  width: 100%;\n  min-height: 5.75rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  padding: 0.75rem 0.625rem;\n  border: 1px solid var(--er-payment-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n  cursor: pointer;\n  text-align: center;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile:hover {\n  border-color: var(--er-payment-border-hover);\n  box-shadow: 0 8px 18px rgb(var(--tb-shadow, 15 23 42) / 0.08);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--selected {\n  border-color: var(--er-payment-border-selected);\n  background-color: var(--er-payment-bg-selected);\n  box-shadow: 0 0 0 1px var(--er-payment-border-selected);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-label {\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-detail {\n  font-size: 0.78125rem;\n  color: var(--er-on-surface-subtle);\n  line-height: 1.25;\n}\n\n/* =============================================================================\n * Order Summary Bar (horizontal, in footer)\n * Layout: [Title + meta on left] [Price on right]\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-summary-bar {\n  /* One row under the footer's hairline: what's booked, then the total\n     (issue 1581). */\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-event {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  margin: 0;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-meta {\n  font-size: 0.9375rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-meta\n  > span\n  + span::before {\n  content: ' \u00B7 ';\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-schedule {\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-text) / 0.7));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-price {\n  font-size: 1.125rem;\n  font-weight: 700;\n  flex-shrink: 0;\n  text-align: right;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pricing {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-items: baseline;\n  column-gap: 0.5rem;\n  row-gap: 0.125rem;\n  text-align: right;\n}\n\n/* Notes under the total take their own line */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pricing\n  > div {\n  flex-basis: 100%;\n}\n\n/* Product section in summary bar (for pass/membership selection) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 0.75rem 0;\n  background: transparent;\n  border-top: 1px solid var(--er-summary-border);\n  border-bottom: 1px solid var(--er-summary-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-name {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pass-escape {\n  margin-top: 0.25rem;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: rgb(var(--tb-primary));\n  font-size: 0.8125rem;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pass-escape:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-detail {\n  font-size: 0.8125rem;\n  color: rgb(var(--tb-text) / 0.6);\n  margin-top: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-price {\n  font-weight: 600;\n  font-size: 0.9375rem;\n  flex-shrink: 0;\n  text-align: right;\n}\n\n/* Strikethrough price styling */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-price--struck {\n  text-decoration: line-through;\n  color: rgb(var(--tb-text) / 0.5);\n  font-size: 0.9375rem;\n  font-weight: 500;\n  text-align: right;\n}\n\n/* \"Included\" text styling */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-included {\n  font-size: 0.8125rem;\n  color: rgb(var(--tb-primary-600));\n  font-weight: 500;\n  text-align: right;\n}\n\n/* =============================================================================\n * Portal Auth Section (sidebar)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-portal-auth {\n  /* The surface the panel paints publishes its own foreground; --tb-onSurface\n     can be a different (near-black) colour from the site's text. */\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n  font-size: 0.9375rem;\n  line-height: 1.5;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-title {\n  font-weight: 600;\n  margin: 0 0 0.25rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth[data-placement='after']\n  .er-portal-auth-title {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text {\n  font-size: 0.9375rem;\n  color: var(--er-on-surface-muted);\n  margin: 0 0 1rem 0;\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth\n  .er-portal-auth-text {\n  color: inherit;\n  margin: 0;\n  line-height: inherit;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text--success {\n  color: rgb(var(--tb-success, 34 197 94));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text--error {\n  color: rgb(var(--tb-error, 239 68 68));\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n}\n\n/* Modal */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--rb-modal-overlay-bg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal {\n  background: rgb(var(--tb-background));\n  border-radius: var(--rb-block-radius);\n  padding: 1.5rem;\n  max-width: 400px;\n  width: 100%;\n  position: relative;\n  box-shadow: 0 10px 25px rgb(var(--tb-shadow) / 0.2);\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  color: rgb(var(--tb-text) / 0.5);\n  padding: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-close:hover {\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-title {\n  font-size: 1.25rem;\n  font-weight: 600;\n  margin: 0 0 1rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-content {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-content\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-btn {\n  padding: 0.75rem 1.5rem;\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n  border: none;\n  border-radius: var(--rb-block-radius);\n  font-weight: 500;\n  cursor: pointer;\n  transition: opacity 0.15s;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn:hover {\n  opacity: 0.9;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn--secondary {\n  background: transparent;\n  color: rgb(var(--tb-text));\n  border: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn--secondary:hover {\n  background: rgb(var(--tb-text) / 0.05);\n}\n\n/* Booking card: in the page where the editor placed the block (issue 1581) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card {\n  display: flex;\n  flex-direction: column;\n  gap: 1.125rem;\n  padding: 1.5rem 1.75rem;\n  border: 1px solid var(--er-border);\n  border-radius: calc(var(--rb-block-radius) * 1.25);\n  background: rgb(var(--tb-surface));\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__row {\n  display: flex;\n  align-items: center;\n  gap: 1.25rem 1.75rem;\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__tile {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem;\n  width: 4.25rem;\n  height: 4.75rem;\n  border-radius: var(--rb-block-radius);\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__tile-month {\n  font-size: 0.75rem;\n  font-weight: 800;\n  letter-spacing: 0.1em;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__tile-day {\n  font-family: var(--font-heading, inherit);\n  font-size: 2rem;\n  line-height: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__badge {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 999px;\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__body {\n  flex: 1 1 16rem;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__when {\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__venue,\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__facts {\n  margin: 0;\n  font-size: 0.9375rem;\n  line-height: 1.45;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__facts {\n  margin-top: 0.25rem;\n  font-weight: 600;\n  color: inherit;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__cta {\n  flex: 0 0 auto;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__dates {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.625rem;\n  padding-top: 1.125rem;\n  border-top: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__dates-label {\n  margin-right: 0.375rem;\n  font-size: 0.8125rem;\n  font-weight: 800;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__date {\n  min-height: 2.75rem;\n  padding: 0 1rem;\n  border: 1px solid var(--er-border);\n  border-radius: 999px;\n  background: var(--er-control-bg);\n  color: inherit;\n  font: inherit;\n  font-size: 0.875rem;\n  font-weight: 700;\n  cursor: pointer;\n  transition: border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__date:hover {\n  border-color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__date[data-full] {\n  border-style: dashed;\n  background: transparent;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__more {\n  font-size: 0.875rem;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n/* Booking bar: fixed to the bottom once the visitor is past the first screen.\n   It stays mounted and slides: the card pushes it down in step as it rises\n   from the bottom of the screen (--er-bar-push, set per frame), and it slides\n   back up when the visitor scrolls past the card (issue 1581). */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 12000;\n  padding: 0.625rem max(1rem, env(safe-area-inset-right))\n    max(0.625rem, env(safe-area-inset-bottom))\n    max(1rem, env(safe-area-inset-left));\n  background: rgb(var(--tb-surface));\n  border-top: 1px solid var(--er-border);\n  box-shadow: 0 -8px 28px rgb(var(--tb-shadow) / 0.14);\n  /* Set per frame on the element while the card pushes the bar off. */\n  --er-bar-push: 0px;\n  transform: translateY(var(--er-bar-push));\n  transition:\n    transform 220ms ease,\n    visibility 0s linear 0s;\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar[data-state='hidden'] {\n  transform: translateY(calc(100% + 1.75rem));\n  visibility: hidden;\n  transition:\n    transform 220ms ease,\n    visibility 0s linear 220ms;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar[data-pushing='true'] {\n  /* Following the card frame by frame: no easing to lag behind. */\n  transition: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n    .er-booking-bar {\n    transform: none;\n    transition:\n      opacity 150ms ease,\n      visibility 0s linear 0s;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n    .er-booking-bar[data-state='hidden'] {\n    transform: none;\n    opacity: 0;\n    transition:\n      opacity 150ms ease,\n      visibility 0s linear 150ms;\n}\n\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__inner {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem 1.5rem;\n  width: 100%;\n  max-width: 77rem;\n  min-height: 2.75rem;\n  margin-inline: auto;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__info {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem 0.875rem;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__title {\n  font-family: var(--font-heading, inherit);\n  font-size: 1.25rem;\n  line-height: 1.2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__meta {\n  display: block;\n  min-width: 0;\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-text) / 0.75));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Facts are set apart by a thin muted rule rather than a dot (issue 1581) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__divider {\n  display: inline-block;\n  width: 0;\n  height: 0.875em;\n  margin-inline: 0.75rem;\n  border-left: 1px solid var(--er-border);\n  vertical-align: -0.0625em;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__fact--price {\n  font-weight: 600;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar[data-entry='inProgress'] .er-booking-bar__meta {\n  font-weight: 600;\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__progress {\n  flex: 0 0 7.5rem;\n  height: 4px;\n  border-radius: 4px;\n  background: rgb(var(--tb-text) / 0.12);\n  overflow: hidden;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__progress-fill {\n  display: block;\n  height: 100%;\n  border-radius: 4px;\n  background: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__cta {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n/* Booked or waitlisted: one quiet status line; the whole bar leads back to the card */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__status {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  width: 100%;\n  min-width: 0;\n  min-height: 2.75rem;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  text-align: start;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__status:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 4px;\n  border-radius: 4px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__check {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.375rem;\n  height: 1.375rem;\n  border-radius: 999px;\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__status-text {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__status-title {\n  flex: 0 0 auto;\n  font-weight: 700;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n/* Phones: the title or status on the first line, the facts smaller and\n   quieter below it, beside a compact button (issue 1581). */\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__info {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__title {\n  max-width: 100%;\n  font-family: inherit;\n  font-size: 0.9375rem;\n  font-weight: 700;\n  line-height: 1.25;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__meta {\n  max-width: 100%;\n  font-size: 0.8125rem;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__divider {\n  margin-inline: 0.5rem;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__progress {\n  flex-basis: auto;\n  width: 6rem;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__status-text {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-overlay__header {\n  row-gap: 0.625rem;\n  padding: 0.875rem 1rem 0.75rem;\n}\n\n/* The status and its facts are on separate lines: no rule between them */\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__status-text > .er-booking-bar__divider {\n  display: none;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar\n    .er-booking-bar__inner\n    > .er-booking-bar__cta {\n  min-height: 2.5rem;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n}\n}\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay {\n  position: fixed;\n  inset: 0;\n  height: 100dvh;\n  z-index: 14000;\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  background: var(--rb-modal-overlay-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__panel {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100dvh;\n  min-height: 0;\n  overflow: hidden;\n  /* Surface, like the card, the bar and the system page's column, and what\n     the embedded Stripe checkout is branded with (checkoutBranding.ts). */\n  background: rgb(var(--tb-surface));\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__header {\n  flex: 0 0 auto;\n  z-index: 2;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.875rem 1rem;\n  padding: 1.125rem 1.25rem 1rem;\n  background: rgb(var(--tb-surface));\n  border-bottom: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__progress {\n  /* Pinned under the title, so the step stays in view while the step scrolls\n     (issue 1581). It takes the header's full width, on its own row. */\n  flex: 1 0 100%;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__progress\n  .rb-progress {\n  margin-bottom: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__heading {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__title {\n  margin: 0;\n  font-family: var(--font-heading, inherit);\n  font-size: 1.5rem;\n  line-height: 1.15;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__subtitle {\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__close {\n  flex: 0 0 auto;\n  width: 2.75rem;\n  height: 2.75rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--er-border);\n  border-radius: 999px;\n  background: transparent;\n  color: inherit;\n  line-height: 1;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay {\n  max-width: none;\n  border: 0;\n  border-radius: 0;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout {\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  gap: 0;\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'main'\n    'footer';\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout-main {\n  min-height: 0;\n  overflow: auto;\n  padding: 1.25rem;\n}\n\n/* Processing, confirmation and error take the whole panel (issue 1581) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-whole-screen {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-whole-screen__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  padding: 1.5rem 1.25rem;\n}\n\n/* The confirmation's one action sits where the steps' Continue does: pinned\n   and full width in the panel, flowing under the content in the aside. */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-whole-screen__footer {\n  margin-top: 1.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-whole-screen__footer {\n  margin-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-whole-screen__footer\n  .er-whole-screen__action {\n  width: 100%;\n  justify-content: center;\n}\n\n/* The header already names the event and its date, so the footer summary\n   drops its title and schedule; the discount keeps just its name. */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  :is(.er-summary-bar-event, .er-summary-bar-schedule, .er-summary-bar-discount-detail) {\n  display: none;\n}\n\n/* On the date step the chosen date is the news, so it stays. */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-summary-bar[data-step='select-event']\n  .er-summary-bar-schedule {\n  display: inline;\n  color: inherit;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout-footer {\n  position: relative;\n  z-index: 3;\n  padding: 0.875rem 1rem max(0.875rem, env(safe-area-inset-bottom));\n  background: rgb(var(--tb-surface));\n  border-top: 1px solid var(--er-border);\n  box-shadow: 0 -12px 26px rgb(var(--tb-shadow) / 0.12);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-actions {\n  margin-top: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-overlay {\n    justify-content: flex-end;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-overlay__panel {\n    width: min(32rem, 100vw);\n    min-height: 100%;\n    box-shadow: -16px 0 40px rgb(var(--tb-shadow) / 0.22);\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-container--overlay\n    .er-payment-layout-main {\n    padding: 1.5rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-container--overlay\n    .er-payment-layout-footer {\n    padding: 0.875rem 1.25rem max(0.875rem, env(safe-area-inset-bottom));\n  }\n}\n}\n\n/* The system event page hosts the same panel in its sticky column (issue 1581):\n   from 1024px the steps scroll inside it and the footer stays pinned. */\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-container {\n    display: flex;\n    max-height: calc(100dvh - 9rem);\n    min-height: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-payment-layout {\n    flex: 1 1 auto;\n    min-height: 0;\n    gap: 0;\n    grid-template-rows: minmax(0, 1fr) auto;\n    grid-template-areas:\n      'main'\n      'footer';\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-payment-layout-main {\n    min-height: 0;\n    overflow: auto;\n    padding-bottom: 1rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-payment-layout-footer {\n    padding-top: 0.875rem;\n    border-top: 1px solid var(--er-border);\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-whole-screen {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-whole-screen__body {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n  }\n}\n}\n\n/* Confirmation summary: only the facts known for certain */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-confirmation-summary {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  margin: 1.5rem 0 0;\n  padding: 1.125rem 1.25rem;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-confirmation-summary__row {\n  display: flex;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-confirmation-summary__row dt {\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-confirmation-summary__row dd {\n  margin: 0;\n  font-weight: 700;\n  text-align: end;\n}\n\n/* Why passes and memberships are greyed out for more than one place */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-entitlement-note {\n  margin: 0;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--er-border);\n  font-size: 0.875rem;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-entitlement-note__action {\n  padding: 0;\n  border: 0;\n  background: none;\n  color: rgb(var(--tb-primary));\n  font: inherit;\n  font-weight: 700;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n  cursor: pointer;\n}\n\n/* Magic Link Form */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-form\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-success {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-success\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n/* =============================================================================\n * Inline Links (.er-link)\n * For inline buttons styled as links (e.g., \"Not you? Log out\")\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-link {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-link:hover {\n  text-decoration: none;\n}\n\n/* Logged-in user hint with logout link */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-logged-in-hint {\n  font-size: 0.875rem;\n  opacity: 0.7;\n  margin: 0.25rem 0 0 0;\n}\n\n/* =============================================================================\n * Booking Mode Step\n * Early step for pass/membership holders to choose their payment mode\n * =============================================================================\n */\n\n/* Hero message for membership holders */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem 1.25rem;\n  background: rgb(var(--tb-primary-100) / 0.4);\n  border: 1px solid rgb(var(--tb-primary-300) / 0.4);\n  border-radius: var(--rb-block-radius);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: rgb(var(--tb-primary));\n  margin-top: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-icon\n  svg {\n  width: 20px;\n  height: 20px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-content {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-title {\n  font-size: 1rem;\n  font-weight: 600;\n  margin: 0 0 0.125rem 0;\n  color: rgb(var(--tb-primary-800));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-subtitle {\n  font-size: 0.875rem;\n  color: rgb(var(--tb-primary-700));\n  margin: 0;\n}\n\n/* Selection cards for pass holders */\n\n/* =============================================================================\n * Block: Event Calendar\n * Uses:\n * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)\n * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)\n * - Tier 3 vars: --ec-* (from event-calendar var generator)\n * =============================================================================\n */\n\n/* Main container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar {\n  width: 100%;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-container {\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  overflow: hidden;\n}\n\n/* Calendar navigation */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-nav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 2.5rem;\n  min-height: 2.5rem;\n  padding: 0.5rem;\n  border-radius: var(--rb-block-radius);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  transition: background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-nav-btn:hover {\n  background-color: var(--ec-nav-hover-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  min-width: 200px;\n  text-align: center;\n}\n\n/* Day headers */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-headers {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  background-color: var(--ec-header-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-header {\n  text-align: center;\n  padding: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  opacity: var(--ec-header-opacity);\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n/* Calendar grid */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n/* Day cells */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar-day {\n  min-height: 100px;\n  border-bottom: 1px solid var(--ec-border-subtle);\n  border-right: 1px solid var(--ec-border-subtle);\n  padding: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day:nth-child(7n) {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--today {\n  background-color: var(--ec-today-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--other-month {\n  opacity: var(--ec-other-month-opacity);\n}\n\n/* Day number */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-number {\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  opacity: var(--ec-day-number-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--today\n  .event-calendar-day-number {\n  font-weight: 700;\n  opacity: 1;\n  color: var(--ec-today-text);\n}\n\n/* Events list */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-events {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Event item - solid primary background */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: calc(var(--rb-block-radius) / 2);\n  background-color: var(--ec-event-solid-bg);\n  color: var(--ec-event-solid-text);\n  text-decoration: none;\n  overflow: hidden;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  font-family: inherit;\n  transition:\n    background-color var(--rb-block-transition) ease,\n    transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event:hover {\n  background-color: var(--ec-event-solid-hover-bg);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event:focus-visible {\n  outline: 2px solid var(--ec-event-solid-bg);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event-time {\n  flex-shrink: 0;\n  white-space: nowrap;\n  font-weight: 600;\n  opacity: 0.9;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event-title {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* More indicator - clickable button style */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more {\n  font-size: 0.75rem;\n  padding: 0.25rem 0.5rem;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  border-radius: calc(var(--rb-block-radius) / 2);\n  font-family: inherit;\n  transition: background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more:hover {\n  background-color: rgb(var(--tb-primary) / 0.1);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-empty {\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n  margin-top: 1rem;\n}\n\n/* Filters container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filter {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  min-width: 180px;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filter-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  opacity: 0.7;\n}\n\n/* Event filter select inherits base styling from .form-select, only block-specific overrides here */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-filter-select {\n  /* Use theme input radius instead of block radius for consistency with other form inputs */\n  border-radius: var(--rb-input-radius, var(--rb-block-radius));\n}\n\n/* Category filter buttons */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-category-btn {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  cursor: pointer;\n  color: var(--ec-text);\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:hover:not(:disabled) {\n  border-color: rgb(var(--tb-primary) / 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn--active {\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Allow category filter to be wider for button group */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-filter:has(.event-category-buttons) {\n  min-width: auto;\n  flex: 1 1 auto;\n}\n\n/* Combined mode container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-combined {\n  width: 100%;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-combined-content {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Calendar view toggle (Month/Week) in Combined mode */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-toggle {\n  display: flex;\n  gap: 0.25rem;\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  cursor: pointer;\n  color: var(--ec-text);\n  opacity: 0.7;\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn:hover {\n  opacity: 1;\n  border-color: rgb(var(--tb-primary) / 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn--active {\n  opacity: 1;\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n}\n\n/* -----------------------------------------------------------------------------\n * Week Agenda View\n * Vertical agenda layout for week view with rich event details\n * ----------------------------------------------------------------------------- */\n\n/* Agenda week container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-week {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n/* Individual day section */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-day {\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day:last-child {\n  border-bottom: none;\n}\n\n/* Day header */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-header {\n  padding: 0.75rem 0;\n  background-color: var(--ec-header-bg);\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Today badge */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-today-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n  border-radius: var(--rb-button-radius);\n}\n\n/* Today highlight for entire day section */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day--today\n  .event-agenda-day-header {\n  background-color: var(--ec-today-bg);\n}\n\n/* Day content area */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-content {\n  padding: 0.75rem 0;\n}\n\n/* Events list within a day */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-events {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n * Agenda Event Card\n * Rich event card for agenda view\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 0.75rem;\n  background-color: var(--ec-surface);\n  border: 1px solid var(--ec-border-subtle);\n  border-radius: var(--rb-block-radius);\n  text-decoration: none;\n  /* Paints its own surface: its foreground and button context come from the\n   * opaque-panel registry (theme-core/src/blocks/opaquePanels.ts). */\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card:hover {\n  border-color: rgb(var(--tb-primary) / 0.5);\n  background-color: var(--ec-event-bg);\n}\n\n/* Category color indicator */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-indicator {\n  flex-shrink: 0;\n  width: 4px;\n  align-self: stretch;\n  border-radius: 2px;\n  min-height: 2.5rem;\n}\n\n/* Card content wrapper */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Header row: time + title */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-header {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-time {\n  font-size: 0.75rem;\n  font-weight: 600;\n  opacity: var(--ec-time-opacity);\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.3;\n}\n\n/* Details row: venue, price, capacity */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-details {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n.event-agenda-card-icon {\n  flex-shrink: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-price {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-capacity {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n.event-agenda-card-capacity--full {\n  font-weight: 600;\n}\n\n/*\n * Agenda rows\n *\n * The modal keeps the original button card above. Published agenda rows use\n * an article so their title and booking action can be separate, accessible\n * links without nesting anchors.\n */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda {\n  display: grid;\n  grid-template-columns: 0.25rem minmax(4.5rem, auto) minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: 1rem;\n  padding: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-indicator {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  > .event-agenda-card-time {\n  grid-column: 2;\n  grid-row: 1;\n  font-size: 0.875rem;\n  font-weight: 700;\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-content {\n  grid-column: 3;\n  grid-row: 1;\n  display: block;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title {\n  margin: 0;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title\n  a {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title\n  a:hover {\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-details {\n  align-items: baseline;\n  gap: 0.25rem 0.6rem;\n  margin-top: 0.2rem;\n  font-size: 0.75rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-location {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-action {\n  grid-column: 4;\n  grid-row: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 0.5rem;\n  min-width: max-content;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-price {\n  font-size: 0.875rem;\n  font-weight: 700;\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-status {\n  font-size: 0.75rem;\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-icon {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-empty {\n  margin: 0;\n  padding: 2rem 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda {\n    grid-template-columns: minmax(4.25rem, auto) minmax(0, 1fr);\n    grid-template-areas:\n      'time content'\n      'action action';\n    align-items: start;\n    column-gap: 0.75rem;\n    row-gap: 0.65rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-indicator {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    > .event-agenda-card-time {\n    grid-area: time;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-content {\n    grid-area: content;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-action {\n    grid-area: action;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week Timetable View\n * Time-grid layout for recurring class schedules\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-timetable {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-selector {\n  display: none;\n  gap: 0.375rem;\n  overflow-x: auto;\n  padding-bottom: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-tab {\n  flex: 0 0 auto;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  background: transparent;\n  color: var(--ec-text);\n  cursor: pointer;\n  font: inherit;\n  font-size: 0.8125rem;\n  transition:\n    background-color var(--rb-block-transition) ease,\n    border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-tab--active {\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-container {\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-grid {\n  display: grid;\n  grid-template-columns: 4.5rem repeat(7, minmax(8rem, 1fr));\n  min-width: 62rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-rail,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day {\n  border-right: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day:last-child {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-heading {\n  min-height: 3.25rem;\n  margin: 0;\n  padding: 0.75rem 0.5rem;\n  background-color: var(--ec-header-bg);\n  border-bottom: 1px solid var(--ec-border-subtle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day--today\n  .event-timetable-day-heading {\n  background-color: var(--ec-today-bg);\n  color: var(--ec-today-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-today-badge {\n  padding: 0.125rem 0.375rem;\n  border-radius: var(--rb-button-radius);\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-body,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-body {\n  position: relative;\n  height: clamp(\n    34rem,\n    calc(var(--event-timetable-range-minutes, 900) * 0.055rem),\n    56rem\n  );\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-body {\n  background-color: var(--ec-header-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-label {\n  position: absolute;\n  left: 0.625rem;\n  transform: translateY(-50%);\n  font-size: 0.6875rem;\n  opacity: 0.65;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-hour-line {\n  position: absolute;\n  left: 0;\n  right: 0;\n  border-top: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event {\n  position: absolute;\n  min-height: 2.75rem;\n  padding: 0.375rem 0.5rem;\n  border: 1px solid var(--ec-border-subtle);\n  border-left-width: 4px;\n  border-radius: calc(var(--rb-block-radius) / 1.5);\n  background-color: var(--ec-surface);\n  box-shadow: 0 1px 2px rgb(var(--tb-text) / 0.08);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n  overflow: hidden;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event:hover {\n  box-shadow: 0 4px 12px rgb(var(--tb-text) / 0.12);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-time,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-title,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-teacher,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-meta,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-time {\n  font-size: 0.6875rem;\n  font-weight: 700;\n  opacity: var(--ec-time-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-title {\n  font-size: 0.8125rem;\n  font-weight: 700;\n  line-height: 1.25;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-teacher,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-meta {\n  font-size: 0.6875rem;\n  opacity: 0.72;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  opacity: 0.85;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity--full {\n  color: rgb(var(--tb-danger, 220 38 38));\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-empty {\n  margin: 0;\n  padding: 1rem 0.5rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-empty {\n  margin: 0.25rem 0 0;\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-day-selector {\n    display: flex;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-container {\n    overflow: hidden;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-grid {\n    grid-template-columns: 4rem minmax(0, 1fr);\n    min-width: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-day[data-selected='false'] {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-day {\n    border-right: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-time-rail {\n    border-right: 1px solid var(--ec-border-subtle);\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-day-heading {\n    justify-content: flex-start;\n    padding-inline: 0.75rem;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week Board View\n * Compact \"class day-board\": day columns side by side, one card per class,\n * three-state availability (available / filling / waitlist), and a footer CTA.\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-week-board {\n  /* Status accent tokens \u2014 map the three availability states onto theme colours.\n   * available -> secondary, filling -> accent, waitlist -> muted text. */\n  --ec-status-available: rgb(var(--tb-secondary));\n  --ec-status-filling: rgb(var(--tb-accent));\n  --ec-status-waitlist: rgb(var(--tb-text) / 0.4);\n  --event-week-board-cols: 7;\n\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  background-color: var(--ec-surface);\n  overflow: hidden;\n}\n\n/* Opt-in raised look: a soft drop shadow so the board lifts off the page.\n * Generic default (no [data-elevated]) stays flat. */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board[data-elevated] {\n  box-shadow: 0 14px 34px -24px rgb(var(--tb-text) / 0.35);\n}\n\n/* Top bar: authored title + week navigation + legend */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-top {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: 1rem;\n  padding: 1.1rem 1.5rem;\n  /* surfaceAlt gives the header/footer a legible tint against the white day-grid\n   * body \u2014 the faint `--ec-header-bg` (5% text) is invisible on light palettes. */\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-title {\n  grid-column: 1;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-navigation {\n  grid-column: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.65rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n  border: 1px solid var(--ec-border);\n  border-radius: 999px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button:hover {\n  background-color: var(--ec-hover-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-range {\n  min-width: 12rem;\n  margin: 0;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-loading {\n  font-weight: 400;\n  opacity: 0.65;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend {\n  grid-column: 3;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  gap: 1.1rem;\n  flex-wrap: wrap;\n  font-size: 0.6875rem;\n  letter-spacing: 0.03em;\n  opacity: 0.75;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-error {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1.5rem;\n  border-bottom: 1px solid var(--ec-border-subtle);\n  color: rgb(var(--tb-error, var(--tb-text)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-error\n  p {\n  margin: 0;\n  font-size: 0.8125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot {\n  width: 0.55rem;\n  height: 0.55rem;\n  border-radius: 50%;\n  display: inline-block;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='available'] {\n  background-color: var(--ec-status-available);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='filling'] {\n  background-color: var(--ec-status-filling);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='waitlist'] {\n  background-color: var(--ec-status-waitlist);\n}\n\n/* Day columns grid */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--event-week-board-cols), minmax(0, 1fr));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day {\n  display: flex;\n  flex-direction: column;\n  min-height: 15rem;\n  /* Tabular column rule. Driven by the theme border tokens so borderless site\n   * styles (border.width: 'none' -> --rb-border-width: 0) render no grid at all,\n   * while hairline/thin/thick themes get a crisp full-strength divider. */\n  border-right: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day:last-child {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.4rem;\n  padding: 0.9rem 0.9rem 0.65rem;\n  /* Header-row underline \u2014 same border-token gating as the column rules. */\n  border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day--today\n  .event-week-board-day-head {\n  background-color: var(--ec-today-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-abbr {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  opacity: 0.65;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day--today\n  .event-week-board-day-abbr {\n  opacity: 1;\n  color: var(--ec-today-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-num {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  opacity: 0.5;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-body {\n  display: flex;\n  flex-direction: column;\n  gap: 0.65rem;\n  padding: 0.9rem;\n  flex: 1;\n}\n\n/* Class card */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.45rem;\n  padding: 0.8rem 0.85rem;\n  /* Full hairline border at the site style's border strength (0 on borderless\n   * styles), alongside the exaggerated status stripe on the left. `--ec-border-subtle`\n   * (half-strength) reads as no border at all on light palettes. */\n  border: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  border-left: 3px solid var(--ec-status-available);\n  border-radius: calc(var(--rb-block-radius) / 1.5);\n  background-color: var(--ec-surface);\n  color: inherit;\n  text-decoration: none;\n  transition:\n    transform var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card[data-status='filling'] {\n  border-left-color: var(--ec-status-filling);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card[data-status='waitlist'] {\n  border-left-color: var(--ec-status-waitlist);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px -8px rgb(var(--tb-text) / 0.28);\n  border-color: rgb(var(--tb-primary) / 0.4);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-title {\n  font-family: var(--font-heading, inherit);\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-time {\n  font-size: 0.75rem;\n  letter-spacing: 0.01em;\n  opacity: 0.7;\n}\n\n/* Capacity pill */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  padding: 0.15rem 0.6rem;\n  border-radius: 999px;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  /* Available (default): a calm neutral/muted pill \u2014 not a coloured outline.\n   * Filling -> amber and waitlist -> muted outline are handled by the\n   * data-status overrides below. */\n  border: 1px solid var(--ec-border);\n  background-color: rgb(var(--tb-text) / 0.06);\n  color: rgb(var(--tb-text) / 0.62);\n  border-color: var(--ec-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill[data-status='filling'] {\n  background-color: rgb(var(--tb-accent) / 0.14);\n  color: var(--ec-status-filling);\n  border-color: rgb(var(--tb-accent) / 0.32);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill[data-status='waitlist'] {\n  background-color: transparent;\n  color: rgb(var(--tb-text) / 0.6);\n  border-color: var(--ec-border);\n}\n\n/* Footer */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex-wrap: wrap;\n  padding: 1.1rem 1.5rem;\n  /* Matches the header tint (see .event-week-board-top). */\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-top: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-foot-note {\n  margin: 0;\n  font-size: 0.875rem;\n  opacity: 0.75;\n}\n\n/* Responsive: collapse day columns to a stacked list on narrow viewports */\n@container rb-site (max-width: 1023px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-top {\n    grid-template-columns: 1fr;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-title,\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation,\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-legend {\n    grid-column: 1;\n    justify-self: center;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-grid {\n    grid-template-columns: 1fr;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-day {\n    min-height: 0;\n    border-right: none;\n    border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-day:last-child {\n    border-bottom: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-day--empty {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-day-head {\n    border-bottom: none;\n    padding-bottom: 0.25rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-day-body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    padding-top: 0.35rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-card {\n    flex: 1 1 14rem;\n  }\n}\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation {\n    display: grid;\n    grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;\n    width: 100%;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation\n    > :last-child {\n    grid-column: 1 / -1;\n    justify-self: center;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-range {\n    min-width: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-legend {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-card {\n    flex: 1 1 100%;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week-board section band\n * Give the whole week-board section (head + panel) a subtle surface band so it\n * reads as a distinct zone from the page \u2014 the \"testimonials band\" pattern.\n * Painted as a pseudo-element above the section's fallback background layer\n * (z-index -10) but behind the content, so no block-content wiring is needed.\n * Surface + hairline rules are token-referenced: on a borderless site style\n * (--rb-border-width: 0) the band keeps its surface tint but drops the rules.\n * Opt-in only: the band paints when the board root carries [data-banded];\n * the generic default is bandless.\n * ----------------------------------------------------------------------------- */\n:where(.theme-scope)\n  [data-slot='section']:has(.event-calendar--week-board[data-banded])::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -9;\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-block: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  pointer-events: none;\n}\n\n/* -----------------------------------------------------------------------------\n * Event section head \u2014 split (heading left, intro right)\n * Rendered by the block frame (outside [data-block=\"event-calendar\"]) via\n * eventSectionHeaderLayoutNodes({ splitClassName }). Lays the heading and its\n * supporting intro out as a two-column head on wide viewports, stacking on\n * narrow ones. The section band above provides the distinct background.\n * ----------------------------------------------------------------------------- */\n:where(.theme-scope) .event-section-head--split {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: clamp(1.5rem, 4vw, 3.5rem);\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope) .event-section-head--split > :where(h1, h2, h3) {\n  margin: 0;\n}\n\n:where(.theme-scope) .event-section-head--split > .rb-prose {\n  flex: 1 1 22rem;\n  max-width: 34rem;\n  margin: 0;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .event-section-head--split {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.75rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-section-head--split > .rb-prose {\n    flex-basis: auto;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Event Calendar Modals\n * Modal overlays for event details and day events list\n * ----------------------------------------------------------------------------- */\n\n/* Modal overlay */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--ec-modal-overlay-bg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Body-level modal portal baseline: clear sticky site/editor chrome unless a theme deliberately overrides it. */\n  z-index: var(--ec-modal-z-index, 20000);\n  padding: 1rem;\n  animation: ec-modal-fade-in 150ms ease-out;\n}\n\n@keyframes ec-modal-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Modal dialog */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal {\n  position: relative;\n  background: var(--ec-modal-bg);\n  border-radius: var(--rb-block-radius);\n  max-width: 28rem;\n  width: 100%;\n  max-height: 90vh;\n  overflow-y: auto;\n  box-shadow: var(--ec-modal-shadow);\n  animation: ec-modal-slide-in 200ms ease-out;\n}\n\n@keyframes ec-modal-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(-10px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* Event modal - constrained width for card */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal--event {\n  max-width: 26rem;\n}\n\n/* Day modal */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal--day {\n  max-width: 28rem;\n}\n\n/* Close button */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--ec-text);\n  opacity: 0.6;\n  cursor: pointer;\n  border-radius: 50%;\n  transition:\n    opacity var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n  z-index: 10;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal-close:hover {\n  opacity: 1;\n  background-color: rgb(var(--tb-text) / 0.1);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal-close:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n/* Modal header (for day modal) */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-header {\n  padding: 1.5rem 1.5rem 1rem;\n  padding-right: 3rem; /* Space for close button */\n  border-bottom: 1px solid var(--ec-border);\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--ec-text);\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-subtitle {\n  font-size: 0.875rem;\n  color: var(--ec-text);\n  opacity: 0.7;\n  margin: 0.25rem 0 0;\n}\n\n/* Modal content */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-content {\n  padding: 1rem;\n}\n\n/* Event modal: tighter padding for card */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal--event\n  .ec-modal-content {\n  padding: 0.5rem;\n}\n\n/* Day events list */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-day-events-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n\n/* AgendaEventCard in button mode inherits most styles, just needs cursor */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  button.event-agenda-card {\n  cursor: pointer;\n  text-align: left;\n  font-family: inherit;\n}\n\n/* Responsive adjustments */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-container {\n    margin-left: -1.5rem;\n    margin-right: -1.5rem;\n    border-left: none;\n    border-right: none;\n    border-radius: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-day-header {\n    font-size: 0.75rem;\n    padding: 0.375rem 0.125rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-day {\n    min-height: 88px;\n    padding: 0.125rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-title {\n    font-size: 0.9375rem;\n    min-width: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-day-number {\n    font-size: 0.75rem;\n    margin-bottom: 0.125rem;\n    padding: 0 0.125rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-event {\n    justify-content: center;\n    gap: 0.25rem;\n    padding: 0.1875rem 0.25rem;\n    font-size: 0.6875rem;\n    border-radius: calc(var(--rb-block-radius) / 3);\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-event-time {\n    text-align: center;\n    font-size: 0.625rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-event-title {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-more {\n    padding: 0.125rem 0.25rem;\n    font-size: 0.6875rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-header\n    > button {\n    margin-right: 0.25rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) :where([data-block='event-calendar']) .ec-modal {\n    max-width: 100%;\n    max-height: 85vh;\n    margin: 0 0.5rem;\n  }\n}\n}\n\n/*\n * Shared: Tab bar (underline style)\n *\n * Used by:\n * - Event Calendar (combined list/calendar view)\n * - Customer Portal (section navigation)\n *\n * Styling is driven by --rb-tab-* CSS variables.\n */\n\n:where(.theme-scope) .nav-tabs {\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: var(--rb-tab-border-width, 1px) solid var(--rb-tab-border-color, rgb(var(--tb-border)));\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) .nav-tab {\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: none;\n  border-bottom: var(--rb-tab-active-border-width, 2px) solid transparent;\n  margin-bottom: calc(-1 * var(--rb-tab-border-width, 1px));\n  cursor: pointer;\n  color: var(--rb-tab-text, rgb(var(--tb-text)));\n  opacity: var(--rb-tab-opacity, 0.7);\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope) .nav-tab:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) .nav-tab--active {\n  opacity: 1;\n  border-bottom-color: var(--rb-tab-active-color, rgb(var(--tb-primary)));\n  color: var(--rb-tab-active-color, rgb(var(--tb-primary)));\n}\n\n/* =============================================================================\n * Block: Appointment Booking\n *\n * Structural styling comes from the shared registration-surface layer\n * (registration-surface.css): surface container, option cards + check,\n * step indicator, wizard actions, on-surface text ramp, stacks, summary box\n * and skeleton shell. Colors flow through the --rb-reg-* contract, mapped\n * from this block's --ab-* Tier 3 vars by its var generator.\n *\n * Inputs use the theme-generated form-* classes; feedback boxes use the\n * theme-generated alert / alert-{tone} classes. Only genuinely\n * booking-specific rules live here.\n *\n * Uses:\n * - Tier 1 vars: --tb-* (from theme palette)\n * - Tier 3 vars: --ab-* (from appointment-booking var generator)\n * =============================================================================\n */\n\n/* Typography helpers */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-subtitle {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text {\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text--sm {\n  font-size: 0.75rem;\n}\n\n/* Centered state (loading / terminal panels) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-center {\n  text-align: center;\n  padding: 2rem;\n}\n\n/* Terminal state title (below the state icon) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-terminal-title {\n  margin: 0.75rem 0 0.5rem 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n}\n\n/* State icon color variants (layout from registration-surface.css) */\n/* Success: a solid primary disc with an on-primary tick (issue 1581) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--success {\n  background: rgb(var(--tb-primary, 37 99 235));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--error {\n  background: var(--ab-error-bg, rgb(var(--tb-destructive, 220 38 38) / 0.1));\n  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--info {\n  background: var(--ab-info-bg, rgb(var(--tb-info, 14 165 233) / 0.1));\n  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--warning {\n  background: var(--ab-warning-bg, rgb(var(--tb-warning, 245 158 11) / 0.1));\n  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));\n}\n\n/* Payment option summary rows (label/value lines inside an option card) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-option-rows {\n  display: grid;\n  gap: 0.125rem;\n}\n\n/* Date/time pill grids (selection pills extend .rb-option-card) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-date-pill {\n  flex-direction: column;\n  align-items: center;\n  gap: 0.125rem;\n  padding: 0.5rem 0.875rem;\n  min-width: 4.25rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-time-pill {\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.875rem;\n  min-width: 5.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-caption {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0;\n  line-height: 1.2;\n  text-transform: uppercase;\n  color: var(--rb-reg-on-surface-subtle, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.6));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-value {\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n/* SSR shell skeleton (mirrors the hydrated layout to reduce hydration jump) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-shell {\n  min-height: 18rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-shell-button {\n  display: inline-flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.6);\n  background: rgb(var(--tb-primary, 17 24 39));\n  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255)));\n  padding: 0.625rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* Inline text-link button (e.g. \"Load more dates\") */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-link {\n  display: inline;\n  color: rgb(var(--tb-primary, 17 24 39));\n  background: none;\n  border: none;\n  padding: 0;\n  font: inherit;\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-link:hover {\n  text-decoration: none;\n}\n\n/* Altcha wrapper */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-altcha {\n  margin-top: 1rem;\n}\n\n/* =============================================================================\n * Shared: Inline Text Marks\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-inline-text-accent,\n:where(.theme-scope) .rb-inline-text-highlight {\n  font: inherit;\n  letter-spacing: inherit;\n  text-transform: inherit;\n}\n\n:where(.theme-scope) .rb-inline-text-accent-accent {\n  color: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope) .rb-inline-text-accent-brand {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-inline-text-accent-contrast {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) .rb-inline-text-highlight {\n  border-radius: 0.22em;\n  box-decoration-break: clone;\n  -webkit-box-decoration-break: clone;\n  padding: 0.02em 0.12em;\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-soft {\n  background: color-mix(in oklab, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-accent {\n  background: color-mix(in oklab, rgb(var(--tb-accent)) 28%, transparent);\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-brand {\n  background: color-mix(in oklab, rgb(var(--tb-primary)) 24%, transparent);\n}\n\n/* =============================================================================\n * Block: Hero (Phase 2)\n * Uses theme palette vars directly (no Tier 3 vars needed)\n * =============================================================================\n */\n\n/* Eyebrow - color only (typography via .rb-eyebrow) */\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n/* Subheadline - supporting text below headline */\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-headline {\n  text-wrap: balance;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-subheadline {\n  font-size: 1.125rem;\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n}\n\n@container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"hero\"]) .hero-subheadline {\n    font-size: 1.25rem;\n  }\n}\n}\n\n/* Hero typography scales. These classes are emitted by Theme V2 hero looks. */\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-quiet .hero-headline {\n  font-size: clamp(2rem, 4vw, 3rem);\n  line-height: 1.12;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-quiet .hero-subheadline {\n  font-size: clamp(1rem, 1.2vw, 1.25rem);\n  line-height: 1.55;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-editorial .hero-headline {\n  font-size: clamp(2.75rem, 5.6vw, 4.75rem);\n  line-height: 1.06;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-editorial .hero-subheadline {\n  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);\n  line-height: 1.55;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-headline {\n  font-size: clamp(3.5rem, 7.2vw, 6.25rem);\n  line-height: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-subheadline {\n  font-size: clamp(1.125rem, 1.5vw, 1.5rem);\n  line-height: 1.5;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-headline {\n  font-size: clamp(4.25rem, 10vw, 8.5rem);\n  line-height: 0.94;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-subheadline {\n  font-size: clamp(1.125rem, 1.4vw, 1.5rem);\n  line-height: 1.45;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {\n  font-size: clamp(3.5rem, 7.5vw, 6.5rem);\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {\n  font-size: clamp(3rem, 6vw, 5.25rem);\n  line-height: 1.02;\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-headline,\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-headline,\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {\n    font-size: clamp(2.5rem, 11vw, 3.5rem);\n    line-height: 1.05;\n  }\n}\n}\n\n/* =============================================================================\n * Shared: Heading Group (used by CTA, single-button, etc.)\n * =============================================================================\n */\n\n/* Eyebrow - color only (typography via .rb-eyebrow) */\n:where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {\n  color: rgb(var(--tb-mutedText));\n}\n\n/* =============================================================================\n * Block: CTA (Phase 2)\n * =============================================================================\n */\n\n/* CTA content/body text */\n:where(.theme-scope) :where([data-block=\"cta-full\"]) .cta-content {\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n}\n\n/* CTA button row container */\n:where(.theme-scope) :where([data-block=\"cta-full\"]) .cta-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Text-style CTA actions belong to the section foreground contract. */\n:where(.theme-scope) [data-block=\"cta-full\"] .cta-row .button-link {\n  color: var(--rb-surface-link-color, var(--rb-surface-text-color, rgb(var(--tb-primary))));\n}\n\n/* =============================================================================\n * Block: Body Text (content block, Phase 2)\n *\n * Style contract:\n * - Variant styling is keyed off `data-block-variant` on the PageRenderer wrapper.\n * - Prose sizing comes from `rb-prose-*` (theme-aware) in `packages/blocks/src/theme/styles.css`.\n * =============================================================================\n */\n\n/* Body copy rich text container */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-container {\n  max-width: 48rem;\n  margin-left: 0;\n  margin-right: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-container.rb-items-center {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Body copy rich text */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-body {\n  color: inherit;\n}\n\n/* Ensure editing mode doesn't silently change typography inside ProseMirror */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-body :where(.ProseMirror) {\n  font-size: inherit;\n  line-height: inherit;\n}\n\n/* Variant: Intro (centered, wider container, larger text, relaxed leading) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-container {\n  max-width: 60rem;\n}\n\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-body {\n  font-size: var(--rb-prose-lg-font-size);\n  line-height: var(--rb-prose-lg-line-height);\n}\n\n@container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-body {\n    font-size: var(--rb-prose-xl-sm-font-size);\n    line-height: var(--rb-prose-xl-sm-line-height);\n  }\n}\n}\n\n/* Variant: Narrow (left-aligned, shorter line length) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"narrow\"]) .body-copy-container {\n  max-width: 34rem;\n  margin-left: 0;\n  margin-right: auto;\n}\n\n/* Override prose sizing via theme-aware vars (see styles.css) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) {\n  /* Mobile-first: use rb-prose-lg sizing below 640px */\n  --rb-prose-lg-font-size: clamp(\n    calc(var(--fs-body, 16px) * 1.35),\n    calc(var(--fs-body, 16px) * 1.1 + 1.25vw),\n    calc(var(--fs-body, 16px) * 1.6)\n  );\n  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);\n\n  /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */\n  --rb-prose-xl-sm-font-size: clamp(\n    calc(var(--fs-body, 16px) * 1.55),\n    calc(var(--fs-body, 16px) * 1.25 + 1.5vw),\n    calc(var(--fs-body, 16px) * 1.8)\n  );\n  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);\n}\n\n/* =============================================================================\n * Block: Form (formCopy fragment, Phase 2)\n * =============================================================================\n */\n\n/* Form title */\n:where(.theme-scope) :where([data-block=\"form\"]) .form-copy-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n}\n\n/* Form intro text */\n:where(.theme-scope) :where([data-block=\"form\"]) .form-copy-intro {\n  font-size: 1rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n/* =============================================================================\n * Form Block (fb-*)\n *\n * Uses:\n * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive\n * - Tier 2 vars: --rb-block-radius\n * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*\n *\n * Note: Form input styling (form-input, form-select, etc.) is handled by\n * the input CSS generator. These styles are for form container/state only.\n * ============================================================================= */\n\n/* Form container */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* Two-column row (opt-in per field via schema layout) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-row-2 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));\n  gap: 1rem;\n}\n\n/* Field wrapper */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Fieldset (for radio groups) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-fieldset {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Success state */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-success {\n  background-color: var(--fb-success-bg);\n  color: var(--fb-success-text);\n  border: 1px solid var(--fb-success-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n/* Error banner */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-error {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n  border-radius: var(--rb-block-radius);\n  padding: 0.75rem;\n  font-size: 0.875rem;\n  margin-bottom: 0.5rem;\n}\n\n/* Empty state (no form data) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-empty {\n  background-color: var(--fb-empty-bg);\n  color: var(--fb-empty-text);\n  border: 1px dashed var(--fb-empty-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1.5rem;\n  font-size: 0.875rem;\n  text-align: center;\n}\n\n/* Form actions (submit button container) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-actions {\n  margin-top: 0.5rem;\n}\n\n/* =============================================================================\n * Block-Level Override Utilities\n *\n * These utility classes replace Tailwind theming utilities for block-level\n * settings like \"raised\" and \"rounded\". They use fixed values to match\n * Tailwind's defaults while allowing us to remove theming classes from safelist.\n * =============================================================================\n */\n\n/* Border Radius Utilities (replaces rounded-*) */\n:where(.theme-scope) .rb-rounded-sm {\n  border-radius: 0.125rem;\n}\n\n:where(.theme-scope) .rb-rounded-md {\n  border-radius: 0.375rem;\n}\n\n:where(.theme-scope) .rb-rounded-lg {\n  border-radius: 0.5rem;\n}\n\n:where(.theme-scope) .rb-rounded-xl {\n  border-radius: 0.75rem;\n}\n\n:where(.theme-scope) .rb-rounded-2xl {\n  border-radius: 1rem;\n}\n\n:where(.theme-scope) .rb-rounded-full {\n  border-radius: 9999px;\n}\n\n/* Shadow Utilities (defined in rb-utilities.css; theme-driven via --shadow-*) */\n\n/* =============================================================================\n * Block: Event List (Phase 3 client component migration)\n * =============================================================================\n */\n\n/* Empty state container */\n:where(.theme-scope) .event-list-empty {\n  border-radius: 0.75rem; /* rounded-xl equivalent */\n  border: 1px dashed rgb(var(--tb-border));\n  padding: 3rem;\n  text-align: center;\n}\n\n/* Reset filters button in empty state */\n:where(.theme-scope) .event-reset-filters-btn {\n  display: inline-block;\n  margin-top: 1rem;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: rgb(var(--tb-primary));\n  background: transparent;\n  border: 1px solid rgb(var(--tb-primary));\n  border-radius: var(--rb-button-radius, 0.375rem);\n  cursor: pointer;\n  transition:\n    background-color var(--rb-block-transition, 150ms) ease,\n    color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) .event-reset-filters-btn:hover {\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n}\n\n:where(.theme-scope) .event-reset-filters-btn:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n/* Event titles always link to the event page, so a card or row whose CTA is\n   hidden (sold out, closed) is never a dead end (issue 1372). The link inherits\n   the heading's colour and only reveals itself on hover or keyboard focus.\n   Shared by EventCard, EventCompactRow and the offerings-preview course cards via `.event-title-link`. */\n:where(.theme-scope) .event-title-link {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .event-title-link:hover,\n:where(.theme-scope) .event-title-link:focus-visible {\n  text-decoration: underline;\n  text-underline-offset: 0.12em;\n}\n\n/* Catalogue cards can keep their media footprint when an event has no\n   resolved image. The date remains useful content and follows the site's\n   palette and typography tokens. */\n:where(.theme-scope) .event-card-date-fallback {\n  position: relative;\n  display: flex;\n  min-height: var(--rb-event-card-media-height, 16rem);\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.125rem;\n  overflow: hidden;\n  padding: 1.125rem;\n  border-bottom: 1px solid rgb(var(--tb-border, 229 231 235));\n  background: rgb(var(--tb-surfaceAlt, var(--tb-surface, 255 255 255)));\n  color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .event-card-date-fallback::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background: radial-gradient(\n    120% 140% at 0% 0%,\n    color-mix(in srgb, rgb(var(--tb-primary, 0 0 0)) 11%, transparent),\n    transparent 62%\n  );\n  content: '';\n}\n\n:where(.theme-scope) .event-card-date-fallback-label,\n:where(.theme-scope) .event-card-date-fallback-value {\n  position: relative;\n}\n\n:where(.theme-scope) .event-card-date-fallback-label {\n  color: rgb(var(--tb-mutedText, var(--tb-muted, 107 114 128)));\n  font-size: 0.72rem;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  line-height: 1.2;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) .event-card-date-fallback-value {\n  color: rgb(var(--tb-primary, 0 0 0));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem);\n  font-weight: 500;\n  letter-spacing: -0.025em;\n  line-height: 1.04;\n}\n\n:where(.theme-scope) .event-card-price {\n  color: rgb(var(--tb-text, 17 24 39));\n  font-weight: 600;\n}\n\n/* =============================================================================\n * Block: Carousel Navigation (Phase 3 client component migration)\n * =============================================================================\n */\n\n/* Layout\n *\n * Keep slide sizing/spacing as a single source of truth, shared by:\n * - SSR fallback (scrollable shell)\n * - Hydrated Embla carousel\n *\n * We use the padding/margin approach for slide spacing:\n * - Slides have symmetric left/right padding (half the gap each side)\n * - Track has negative margins to keep first/last slide flush with viewport edges\n * - This works reliably with Embla's position calculations\n *\n * Slides-per-view is provided via CSS vars set on `.carousel-root`:\n * - --rb-carousel-slides-to-show-mobile\n * - --rb-carousel-slides-to-show-tablet (optional)\n * - --rb-carousel-slides-to-show-desktop (optional)\n */\n:where(.theme-scope) .carousel-root {\n  --rb-carousel-slide-spacing: 1rem;\n  --rb-carousel-slides-to-show: var(--rb-carousel-slides-to-show-mobile, 1);\n}\n\n:where(.theme-scope) .carousel-root.rb-image-gallery-carousel--full-bleed {\n  --rb-carousel-slide-spacing: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .carousel-root {\n    --rb-carousel-slides-to-show: var(\n      --rb-carousel-slides-to-show-tablet,\n      var(--rb-carousel-slides-to-show-mobile, 1)\n    );\n  }\n}\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .carousel-root {\n    --rb-carousel-slides-to-show: var(\n      --rb-carousel-slides-to-show-desktop,\n      var(\n        --rb-carousel-slides-to-show-tablet,\n        var(--rb-carousel-slides-to-show-mobile, 1)\n      )\n    );\n  }\n}\n}\n\n/* Slides take exact percentage width with internal padding for gaps.\n * Padding is more reliable than margin (no collapsing, consistent on all slides). */\n:where(.theme-scope) .carousel-root .carousel-slide,\n:where(.theme-scope) .carousel-root .rb-overflow-x-auto > .rb-flex > * {\n  flex: 0 0 calc(100% / var(--rb-carousel-slides-to-show));\n  min-width: 0;\n  box-sizing: border-box;\n  padding-left: calc(var(--rb-carousel-slide-spacing) / 2);\n  padding-right: calc(var(--rb-carousel-slide-spacing) / 2);\n}\n\n/* Navigation buttons + dots are intentionally Tailwind-free and scoped to the\n * hydrated carousel root to avoid leaking styles globally. */\n:where(.theme-scope) .carousel-root .carousel-nav-btn {\n  position: absolute;\n  top: 50%;\n  z-index: 10;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 2.5rem;\n  width: 2.5rem;\n  border-radius: 9999px;\n  border: 1px solid rgb(var(--tb-border, 229 231 235) / 0.35);\n  background-color: rgb(var(--tb-surface, 248 250 252) / 0.9);\n  color: rgb(var(--tb-text, 17 24 39));\n  box-shadow: 0 4px 6px -1px rgb(var(--tb-shadow) / 0.1),\n    0 2px 4px -2px rgb(var(--tb-shadow) / 0.1);\n  cursor: pointer;\n  transform: translateY(-50%);\n  transition: background-color 0.2s ease, box-shadow 0.2s ease,\n    opacity 0.2s ease;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn--prev {\n  left: 0.5rem;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn--next {\n  right: 0.5rem;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn:hover {\n  background-color: rgb(var(--tb-surface, 248 250 252));\n  box-shadow: 0 10px 15px -3px rgb(var(--tb-shadow) / 0.1),\n    0 4px 6px -4px rgb(var(--tb-shadow) / 0.1);\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n/* Hover-only arrows (no group-hover utilities in SDK runtime) */\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"] .carousel-nav-btn {\n  opacity: 0;\n  pointer-events: none;\n}\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"]:hover .carousel-nav-btn,\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"]:focus-within .carousel-nav-btn {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Dots */\n:where(.theme-scope) .carousel-root .carousel-dots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n/* Dots overlaid on the bottom of the carousel (used for image-dominant variants). */\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dots {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0.75rem;\n  z-index: 10;\n  margin-top: 0;\n  padding: 0.5rem 0.75rem;\n  pointer-events: none;\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {\n  pointer-events: auto;\n}\n\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {\n  background-color: rgb(var(--tb-surface, 248 250 252) / 0.55);\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot:hover {\n  background-color: rgb(var(--tb-surface, 248 250 252) / 0.75);\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot[data-active=\"true\"] {\n  background-color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 9999px;\n  border: none;\n  background-color: rgb(var(--tb-border, 229 231 235));\n  transition: background-color 0.2s ease;\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot:hover {\n  background-color: rgb(var(--tb-text, 17 24 39) / 0.3);\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot[data-active=\"true\"] {\n  background-color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgb(var(--tb-primary, 59 130 246) / 0.35);\n}\n\n/* =============================================================================\n * Block: Shop\n * Uses theme palette vars directly\n * ============================================================================= */\n\n/* Shop container */\n:where(.theme-scope) .shop {\n  width: 100%;\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) {\n  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);\n  --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));\n  --rb-modal-z-index: 20000;\n  --rb-modal-text: rgb(var(--tb-text, 17 24 39));\n  --rb-modal-heading: rgb(var(--tb-text, 17 24 39));\n  --rb-modal-link: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));\n  --rb-modal-supporting: rgb(var(--tb-mutedText, 100 116 139));\n  --shop-card-radius: var(--rb-block-radius, var(--radius-card, 0.75rem));\n  --shop-control-radius: var(--rb-input-radius, var(--radius-control, 0.375rem));\n}\n\n:where(.theme-scope) .shop--empty {\n  text-align: center;\n  padding: 3rem 1rem;\n}\n\n:where(.theme-scope) .shop__empty-text {\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText))));\n  font-size: var(--fs-body, 1rem);\n}\n\n/* Error display */\n:where(.theme-scope) .shop__error {\n  background-color: rgb(var(--tb-destructive) / 0.1);\n  color: rgb(var(--tb-destructive));\n  padding: 0.75rem 1rem;\n  border-radius: var(--shop-control-radius);\n  margin-bottom: 1rem;\n  font-size: 0.875rem;\n}\n\n/* Sections */\n:where(.theme-scope) .shop__section {\n  margin-bottom: 2rem;\n}\n\n:where(.theme-scope) .shop__section:last-child {\n  margin-bottom: 0;\n}\n\n:where(.theme-scope) .shop__section-heading {\n  font-size: var(--fs-h3, 1.25rem);\n  font-weight: 600;\n  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text))));\n  margin-bottom: 1rem;\n  font-family: var(--font-heading);\n}\n\n/* Products grid/list layout */\n:where(.theme-scope) .shop__products--grid {\n  display: grid;\n  grid-template-columns: repeat(var(--shop-columns, 2), 1fr);\n  gap: 1rem;\n}\n\n:where(.theme-scope) .shop__products--list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* Compact product register: useful for small, scannable pass/package sets. */\n:where(.theme-scope) .shop--register .shop__section {\n  margin-bottom: 0;\n}\n\n:where(.theme-scope) .shop--register .shop__section-heading {\n  margin-bottom: 1rem;\n  font-size: clamp(1.4rem, 2.2vw, 1.7rem);\n}\n\n:where(.theme-scope) .shop--register .shop__products--register {\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope) .shop--register .shop__card {\n  display: grid;\n  grid-template-columns: minmax(8rem, 0.85fr) auto minmax(12rem, 1.5fr) auto;\n  grid-template-rows: auto;\n  align-items: center;\n  column-gap: clamp(1rem, 3vw, 2.5rem);\n  padding: 1rem 0;\n  border: 0;\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n  border-radius: 0;\n  /* Boxless row: the opaque-panel registry hands the band's contract back. */\n  background: transparent;\n}\n\n:where(.theme-scope) .shop--register .shop__card-header {\n  display: contents;\n}\n\n:where(.theme-scope) .shop--register .shop__card-name,\n:where(.theme-scope) .shop--register .shop__card-price,\n:where(.theme-scope) .shop--register .shop__card-details,\n:where(.theme-scope) .shop--register .shop__cta,\n:where(.theme-scope) .shop--register .shop__purchase-unavailable {\n  margin: 0;\n}\n\n:where(.theme-scope) .shop--register .shop__card-name {\n  grid-column: 1;\n  grid-row: 1;\n  font-family: var(--font-heading);\n  font-size: 1.15rem;\n  font-weight: 400;\n}\n\n:where(.theme-scope) .shop--register .shop__card-price {\n  grid-column: 2;\n  grid-row: 1;\n  font-size: 0.98rem;\n  font-weight: 500;\n  white-space: nowrap;\n  color: var(--rb-surface-link-color, var(--rb-surface-text-color, inherit));\n}\n\n:where(.theme-scope) .shop--register .shop__card-description {\n  grid-column: 1 / -1;\n  margin-top: 0.35rem;\n}\n\n:where(.theme-scope) .shop--register .shop__card-details {\n  grid-column: 3;\n  grid-row: 1;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.35rem 1rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.86rem;\n}\n\n:where(.theme-scope) .shop--register .shop__cta,\n:where(.theme-scope) .shop--register .shop__purchase-unavailable {\n  grid-column: 4;\n  grid-row: 1;\n  align-self: center;\n  margin-left: auto;\n}\n\n:where(.theme-scope) .shop--register .shop__card > [role='status'] {\n  grid-column: 1 / -1;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .shop--register .shop__card {\n    grid-template-columns: minmax(0, 1fr) auto;\n    row-gap: 0.45rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .shop--register .shop__card-name {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .shop--register .shop__card-price {\n    grid-column: 2;\n    grid-row: 1;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .shop--register .shop__card-details {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .shop--register .shop__cta,\n  :where(.theme-scope:is(*, :scope)) .shop--register .shop__purchase-unavailable {\n    grid-column: 1 / -1;\n    grid-row: 3;\n    justify-self: start;\n    margin-left: 0;\n  }\n}\n}\n\n/* Product card */\n:where(.theme-scope) .shop__card {\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n  background: rgb(var(--tb-surface));\n  border: 1px solid rgb(var(--tb-border));\n  border-radius: var(--shop-card-radius);\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n/* No hover shadow (buttons + theme do the emphasis) */\n\n:where(.theme-scope) .shop__card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n:where(.theme-scope) .shop__card-name {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--rb-surface-heading-color, rgb(var(--tb-text)));\n  margin: 0;\n  font-family: var(--font-heading);\n}\n\n:where(.theme-scope) .shop__card-price {\n  font-size: 1.125rem;\n  font-weight: 700;\n  color: var(--rb-surface-link-color, rgb(var(--tb-primary)));\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .shop__card-interval {\n  font-size: 0.875rem;\n  font-weight: 400;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-description {\n  font-size: 0.875rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  line-height: 1.5;\n  margin: 0;\n}\n\n:where(.theme-scope) .shop__card-details {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem 1rem;\n  font-size: 0.875rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) .shop__card-credits {\n  font-weight: 500;\n}\n\n:where(.theme-scope) .shop__card-per-credit {\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-validity {\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-unlimited {\n  font-weight: 500;\n  color: var(--rb-surface-link-color, rgb(var(--tb-secondary, var(--tb-primary))));\n}\n\n/* CTA layout: use theme button classes for visuals */\n:where(.theme-scope) .shop__cta {\n  margin-top: auto;\n  align-self: flex-start;\n}\n\n:where(.theme-scope) .shop__purchase-unavailable {\n  margin: auto 0 0;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n/* Responsive grid */\n@container rb-site (max-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .shop__products--grid {\n    grid-template-columns: 1fr;\n  }\n}\n}\n\n:where(.theme-scope) .shop__modal-product {\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-mutedText));\n  margin: 0 0 1rem;\n}\n\n:where(.theme-scope) .shop__modal-interval {\n  font-size: 0.875rem;\n}\n\n/* Checkout form */\n:where(.theme-scope) .shop__modal-form {\n  margin-top: 0.25rem;\n}\n\n:where(.theme-scope) .shop__form-field {\n  margin-bottom: 1rem;\n}\n\n/* Modal error */\n:where(.theme-scope) .shop__modal-error {\n  background-color: rgb(var(--tb-destructive) / 0.1);\n  color: rgb(var(--tb-destructive));\n  padding: 0.625rem 0.75rem;\n  border-radius: var(--shop-control-radius);\n  font-size: 0.875rem;\n  margin-bottom: 1rem;\n}\n\n/* Modal actions */\n:where(.theme-scope) .shop__modal-actions {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n/* Duplicate membership warning */\n:where(.theme-scope) .shop__modal-warning {\n  padding: 0.5rem 0 0;\n}\n\n:where(.theme-scope) .shop__modal-warning-title {\n  font-size: 1rem;\n  font-weight: 600;\n  color: rgb(var(--tb-text));\n  margin: 0 0 0.5rem;\n}\n\n:where(.theme-scope) .shop__modal-warning-text {\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-mutedText));\n  margin: 0 0 1.25rem;\n  line-height: 1.5;\n}\n\n:where(.theme-scope) .shop__modal-warning-actions {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n/* Post-checkout return notice */\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return {\n  text-align: center;\n  padding: 1.5rem 1rem;\n  margin-bottom: 1.25rem;\n  border: 1px solid rgb(var(--tb-border));\n  border-radius: var(--shop-card-radius);\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n  background: rgb(var(--tb-surface));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .rb-state-icon--success {\n  background: rgb(var(--tb-success) / 0.12);\n  color: rgb(var(--tb-success));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .rb-state-icon--warning {\n  background: rgb(var(--tb-warning) / 0.12);\n  color: rgb(var(--tb-warning));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-title {\n  margin: 0.25rem 0 0.5rem 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n  font-family: var(--font-heading);\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-text {\n  margin: 0;\n  opacity: 0.75;\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-dismiss {\n  margin-top: 0.875rem;\n}\n\n/* Mobile: full-width CTA buttons inside cards */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .shop__cta {\n    align-self: stretch;\n    width: 100%;\n  }\n}\n}\n\n/* =============================================================================\n * Block: Customer Portal\n * Uses --cp-* CSS variables (Tier 3)\n * ============================================================================= */\n\n/* Container */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-container {\n  font-family: var(--font-body);\n  font-size: var(--fs-body);\n  min-height: 200px;\n}\n\n/* Loading state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-loading__text {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n}\n\n/* Login form */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login {\n  max-width: 480px;\n  margin: 0 auto;\n  padding: 2rem;\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__title {\n  margin: 0 0 0.5rem;\n  text-align: left;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__subtitle {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n  text-align: left;\n  margin: 0 0 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__helper {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n  text-align: left;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__success {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  text-align: left;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link {\n  appearance: none;\n  background: none;\n  border: 0;\n  color: var(--cp-muted);\n  cursor: pointer;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link:hover {\n  color: var(--cp-text);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 3px;\n}\n\n/* Form controls (layout only; actual form styling is theme-driven via .form-label/.form-input) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n\n/* Buttons: Uses theme button classes (primary, secondary, btn-sm, etc.) - no custom styles needed */\n\n/* Alerts */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert {\n  padding: 1rem 1.25rem;\n  border-radius: var(--cp-control-radius);\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  border-left: 4px solid transparent;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--success {\n  background: var(--cp-alert-success-bg);\n  color: var(--cp-alert-success-text);\n  border-color: var(--cp-alert-success-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--error {\n  background: var(--cp-alert-error-bg);\n  color: var(--cp-alert-error-text);\n  border-color: var(--cp-alert-error-border);\n}\n\n/* Header */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 0;\n  margin-bottom: 1rem;\n  border-bottom: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-header__welcome {\n  font-size: 1.125rem;\n  font-weight: 500;\n}\n\n/* Content area */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-content {\n  min-height: 200px;\n}\n\n/* Section */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-section {\n  animation: cp-fade-in 200ms ease;\n}\n\n@keyframes cp-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Empty state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px dashed var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-empty__text {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n}\n\n/* Card */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card {\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n  padding: 1.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-title {\n  font-weight: 600;\n  font-size: 1rem;\n  color: var(--cp-text);\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-subtitle {\n  font-size: 0.875rem;\n  margin: 0.25rem 0 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-body {\n  font-size: 0.9375rem;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem 1rem;\n  font-size: 0.875rem;\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\n\n/* Event waitlists */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-waitlist-list {\n  display: grid;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlists\n  > .cp-alert {\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-waitlist-card {\n  transition:\n    border-color 180ms ease,\n    box-shadow 180ms ease;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card--focused {\n  border-color: var(--cp-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 22%, transparent);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card__summary,\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card__position {\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card\n  .cp-card-body\n  p {\n  margin: 0.4rem 0;\n}\n\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-header {\n    flex-direction: column-reverse;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-actions {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-actions\n    > * {\n    justify-content: center;\n    text-align: center;\n  }\n}\n}\n\n/* Badge */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 9999px;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--success {\n  background: var(--cp-badge-success-bg);\n  color: var(--cp-badge-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--warning {\n  background: var(--cp-badge-warning-bg);\n  color: var(--cp-badge-warning-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--error {\n  background: var(--cp-badge-error-bg);\n  color: var(--cp-badge-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--info {\n  background: var(--cp-badge-info-bg);\n  color: var(--cp-badge-info-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--default {\n  background: var(--cp-badge-default-bg);\n  color: var(--cp-badge-default-text);\n}\n\n/* Progress bar (for credit display) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-progress {\n  height: 0.5rem;\n  background: var(--cp-progress-bg);\n  border-radius: 9999px;\n  overflow: hidden;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-progress__fill {\n  height: 100%;\n  background: var(--cp-progress-fill);\n  border-radius: 9999px;\n  transition: width 300ms ease;\n}\n\n/* Profile display */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-width: 500px;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__tiles {\n  /* Use tiles as a mini \"details grid\" rather than event occurrence selection. */\n  --rb-event-tile-bg: var(--cp-card-bg);\n  --rb-event-tile-border: var(--cp-card-border);\n  --rb-event-tile-radius: var(--cp-control-radius);\n\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__value {\n  font-size: 1rem;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__edit {\n  align-self: flex-start;\n}\n\n/* Cards grid */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cards {\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n}\n\n/* A11y helpers */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Table */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table-wrap {\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table th,\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table td {\n  padding: 0.875rem 1rem;\n  vertical-align: top;\n  border-bottom: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table thead th {\n  text-align: left;\n  background: rgb(var(--tb-border) / 0.2);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-table\n  tbody\n  tr:last-child\n  td {\n  border-bottom: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  :is(.cp-row--past, .cp-row--muted) {\n  opacity: 0.65;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-title {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  font-weight: 600;\n  font-size: 0.9375rem;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__badges {\n  margin-left: auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__text {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-meta {\n  margin-top: 0.25rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n  font-size: 0.8125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-note {\n  margin-top: 0.5rem;\n  padding-left: 0.75rem;\n  border-left: 3px solid var(--cp-border);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-note--success {\n  border-left-color: rgb(var(--tb-success));\n  color: rgb(var(--tb-success));\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-note--error {\n  border-left-color: rgb(var(--tb-destructive));\n  color: rgb(var(--tb-destructive));\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-muted {\n  color: var(--cp-muted);\n}\n\n/* Table columns */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-col-tickets {\n  white-space: nowrap;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-col-actions {\n  text-align: right;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-col-actions\n  .btn-sm {\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__link {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__link:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n}\n\n/* Mobile-only row content within table cells */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-only-mobile {\n  display: none;\n}\n\n/* Section title (for Upcoming/Past dividers) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-section-title {\n  margin: 0 0 1rem;\n}\n\n/* Past items (faded) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card--past {\n  opacity: 0.6;\n}\n\n/* Profile actions */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-profile__actions {\n  display: flex;\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\n\n/* Guest section in event cards */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests {\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest__name {\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest__phone {\n  color: var(--cp-muted);\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__empty {\n  font-size: 0.875rem;\n  color: var(--cp-muted);\n  font-style: italic;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__edit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest-edit-row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__index {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--cp-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__fields {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__fields\n  input {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__error {\n  font-size: 0.75rem;\n  color: var(--cp-error);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guests__actions {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n/* Actions modal */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-actions-list {\n  display: grid;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n}\n\n/* In the actions modal, tiles sit on a surface modal, so use \"background\" for contrast. */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-actions-list\n  :where(.rb-tile) {\n  --rb-event-tile-bg: rgb(var(--tb-background));\n  --rb-event-tile-border: rgb(var(--tb-border));\n}\n\n/* Actions trigger: icon-only kebab button */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-actions-trigger.btn-sm {\n  padding: 0.35rem !important;\n  line-height: 1 !important;\n  min-width: 32px;\n  min-height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Tickets live in their own column on desktop; show them inline on mobile. */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-meta-tickets {\n  display: none;\n}\n\n/* Action tiles (use shared rb-tile primitive for base) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-action-tile {\n  appearance: none;\n  font: inherit;\n  text-align: left;\n  display: grid;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile__title {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile__desc {\n  font-size: 0.875rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile--danger\n  .cp-action-tile__title {\n  color: rgb(var(--tb-destructive));\n}\n\n/* Modal form layout */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-form-grid {\n  display: grid;\n  gap: 0.75rem;\n  margin-top: 0.75rem;\n}\n\n/* Button modifiers */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-btn--link {\n  background: none;\n  border: none;\n  padding: 0;\n  color: var(--cp-primary);\n  font-size: 0.875rem;\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-btn--link:hover {\n  color: var(--cp-primary-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-btn--xs {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n}\n\n/* Small input */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-input--sm {\n  height: auto;\n  padding: 0.375rem 0.625rem;\n  font-size: 0.875rem;\n}\n\n/* Input error state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-input--error {\n  border-color: var(--cp-error);\n}\n/* Small alert */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--sm {\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-modal__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n}\n\n/* Membership cancel confirmation */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__title {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__message {\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__warning {\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__actions {\n  display: flex;\n  gap: 0.75rem;\n}\n\n/* Membership actions */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-membership-actions {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-section-actions {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-card-subtitle--spaced {\n  margin-top: 0.75rem;\n}\n\n/* Alert spacing utilities */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--mt {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--mb {\n  margin-bottom: 1rem;\n}\n\n/* Responsive: show everything without horizontal scrolling */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"customer-portal\"]) .cp-only-mobile {\n    display: flex;\n  }\n\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"customer-portal\"]) .cp-table thead {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-guests,\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-tickets,\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-actions {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"customer-portal\"]) .cp-meta-tickets {\n    display: inline;\n  }\n\n  /* Make the cell a positioning context for the kebab */\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-row\n    > td:first-child {\n    position: relative;\n    padding-right: 2.5rem;\n  }\n\n  /* Position kebab in top-right of the cell */\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-row-mobile-actions {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    margin-top: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-row-mobile-actions\n    .btn-sm {\n    width: auto;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-profile__edit {\n    align-self: stretch;\n  }\n}\n}\n\n/* Placeholder (SSR) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-placeholder {\n  /* Styles for SSR placeholder */\n}\n\n/* =============================================================================\n * Runtime: Header Navigation Dropdown (Tailwind-free)\n *\n * The SDK runtime does not ship Tailwind's `group-hover:*` / `group-focus-within:*`\n * utilities, so dropdown menus must be controlled via plain CSS selectors.\n * =============================================================================\n */\n\n:where(.theme-scope) .nav-dropdown-menu {\n  /*\n   * Keep these rails in sync with header/navDropdownSizing.ts.\n   * The JS placement gutter is 16px, matching the 1rem per-side gutter in calc(100vw - 2rem).\n   */\n  min-width: 12rem;\n  width: max-content;\n  max-width: min(22rem, calc(100vw - 2rem));\n  transform: translateX(var(--nav-dropdown-shift-x, 0px));\n}\n\n:where(.theme-scope) .nav-dropdown:hover > .nav-dropdown-menu,\n:where(.theme-scope) .nav-dropdown:focus-within > .nav-dropdown-menu,\n:where(.theme-scope) .nav-dropdown .nav-dropdown-trigger[aria-expanded=\"true\"] + .nav-dropdown-menu {\n  display: block;\n}\n\n/* =============================================================================\n * Block: Testimonials\n * Uses CSS vars: --rb-testimonial-* (Tier 3) and --rb-block-* (Tier 2)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-avatar {\n  width: var(--rb-testimonial-avatar-size);\n  height: var(--rb-testimonial-avatar-size);\n  border-radius: var(--rb-testimonial-avatar-border-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-card {\n  border-radius: var(--rb-block-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-quote {\n  display: var(--rb-testimonial-quote-display, block);\n  font-family: var(--rb-testimonial-quote-font, inherit);\n  font-size: var(--rb-testimonial-quote-size);\n  line-height: 1;\n  font-weight: var(--rb-testimonial-quote-weight, 700);\n  opacity: var(--rb-testimonial-quote-opacity);\n  color: var(--rb-testimonial-quote-color, rgb(var(--tb-primary)));\n}\n\n\n/* Split grid: title column + cards. On desktop the title takes one quarter and\n * the cards fill the remaining three quarters (so title + 3 cards each read as\n * a quarter). Stacks on mobile. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-heading,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-cards {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-cards {\n  container-type: inline-size;\n  container-name: rb-testimonials-split-cards;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n@container rb-testimonials-split-cards (min-width: 36rem) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid.rb-sm-grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@container rb-testimonials-split-cards (min-width: 54rem) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid.rb-lg-grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n    align-items: start;\n  }\n}\n}\n\n\n/* =============================================================================\n * Variant: featured-editorial\n *\n * An asymmetric layout: a large featured (spruce-ink) quote card beside a\n * column of stacked white cards. Renders NO avatars. Colours are palette\n * tokens only. Node structure is built in testimonialsCarousel.ts.\n * ============================================================================= */\n\n/* Establish an inline-size query container so the head and grid below respond\n * to the block's own width, not the browser viewport. A viewport @media query\n * collapses to 1-col in the dashboard's scaled preview canvas (which reads the\n * dashboard window, not the canvas) and when the block sits in a narrow column;\n * @container tracks the actual laid-out width \u2014 matching the split-grid variant. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe {\n  container-type: inline-size;\n  container-name: rb-testimonials-fe;\n}\n\n/* Section head: heading left, lead-in line to the right; stacks on mobile. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-head {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-leadin {\n  max-width: 30rem;\n}\n\n@container rb-testimonials-fe (min-width: 768px) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-head {\n    flex-direction: row;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: 1.5rem;\n  }\n}\n\n/* Card grid: featured (wider) beside the stacked column. Single column on\n * small screens. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 1.25rem;\n  align-items: stretch;\n}\n\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);\n  }\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-col {\n  display: grid;\n  gap: 1.25rem;\n  align-content: start;\n}\n\n/* Card shells. Fill, border, corners, elevation and padding all come from the\n * site style's card system: the lead card renders the role its Look asks for\n * (`.card-role-alternative` by default), each supporting card\n * `.card-role-default`, and the padding lands on the shared `.card-content`\n * hook inside. What is left here is structure.\n *\n * The flex column is stated rather than inherited: generated card CSS happens\n * to set one today, but a card variant owns fill and padding, not layout, so\n * this field's geometry \u2014 the quote growing and the attribution pinning to the\n * card's bottom edge \u2014 has to hold whatever surface the site style supplies. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card-body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* Quote mark: the site style's quote treatment, oversized serif */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-qmark {\n  display: block;\n  height: 1.6rem;\n  font-family: var(--font-heading, Georgia, serif);\n  font-style: italic;\n  font-size: 3.375rem;\n  line-height: 0.6;\n  color: var(--rb-testimonial-quote-color, rgb(var(--tb-secondary)));\n}\n\n/* Quote body. The inner <p> is targeted directly (not via :where) so the\n * serif display font and sizing win over the theme's base paragraph rule. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-quote {\n  flex: 1 1 auto;\n  margin-top: 1.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-quote p {\n  margin: 0;\n  font-family: var(--font-heading, Georgia, serif);\n  font-size: 1.15rem;\n  line-height: 1.5;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-quote p {\n  font-size: clamp(1.375rem, 2.4vw, 1.6875rem);\n  line-height: 1.42;\n  letter-spacing: -0.01em;\n}\n\n/* Attribution: name (bold) + context line, no avatar */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  margin-top: 1.625rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-name {\n  font-weight: 600;\n  font-size: 0.97rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-context {\n  font-size: 0.78rem;\n  letter-spacing: 0.02em;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n\n/* Testimonials carousel tweaks: arrow styling + gutters + equal-height cards */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn {\n  height: var(--rb-testimonial-carousel-arrow-size);\n  width: var(--rb-testimonial-carousel-arrow-size);\n  border-color: var(--rb-testimonial-carousel-arrow-border-color);\n  background-color: var(--rb-testimonial-carousel-arrow-bg);\n  color: var(--rb-testimonial-carousel-arrow-color);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn:hover {\n  background-color: var(--rb-testimonial-carousel-arrow-bg-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-icon {\n  width: var(--rb-testimonial-carousel-arrow-icon-size);\n  height: var(--rb-testimonial-carousel-arrow-icon-size);\n  stroke-width: var(--rb-testimonial-carousel-arrow-icon-stroke-width);\n}\n\n/* Equal-height cards: stretch track items and make cards fill */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-track {\n  align-items: stretch;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide {\n  display: flex;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide > * {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n}\n\n/* Prevent slide shadows from being clipped - add vertical padding to slides.\n * We don't use frame padding because it affects Embla's position calculations.\n * Horizontal shadow room comes from the slide's gap padding in carousel.css. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide {\n  padding-top: var(--rb-testimonial-carousel-shadow-pad);\n  padding-bottom: var(--rb-testimonial-carousel-shadow-pad);\n}\n\n/* Anchor each arrow's outer edge to the container's outer edge.\n * .rb-container has 1rem horizontal padding + `overflow: hidden`, so pulling the\n * arrow out by exactly that padding puts the arrow center on the carousel content\n * edge without any of the button being clipped. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {\n  left: -1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--next {\n  right: -1rem;\n}\n\n/*\n * Event Details (runtime node)\n *\n * Keep these rules minimal and theme-driven.\n */\n\n:where(.theme-scope) .event-details {\n  width: 100%;\n  max-width: 56.25rem; /* 900px */\n  margin-inline: 0;\n}\n\n:where(.theme-scope) .event-details-map-wrap {\n  max-width: 28rem;\n}\n\n/*\n * Shared: Tiles\n *\n * Used by:\n * - Event Registration: occurrence selection cards\n * - Event Details: \"Other dates\"\n * - Event Details: whole-series session schedule\n */\n\n:where(.theme-scope) :where(.rb-tile, .er-event-card) {\n  width: 100%;\n  text-align: left;\n  padding: 1rem;\n  border-radius: var(--rb-event-tile-radius, calc(var(--rb-block-radius) * 0.75));\n  border-style: var(--rb-tile-border-style, var(--rb-event-tile-border-style, var(--rb-border-style, solid)));\n  border-width: var(--rb-tile-border-width, var(--rb-event-tile-border-width, var(--rb-border-width, 1px)));\n  border-color: var(--rb-tile-border, var(--rb-event-tile-border, rgb(var(--tb-border))));\n  background: var(--rb-tile-bg, var(--rb-event-tile-bg, transparent));\n  transition: border-color var(--rb-block-transition) ease,\n              background-color var(--rb-block-transition) ease,\n              opacity var(--rb-block-transition) ease;\n  display: block;\n  opacity: var(--rb-tile-opacity, var(--rb-event-tile-opacity, 1));\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .rb-tiles-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--rb-tiles-grid-cols-sm, 2), minmax(0, 1fr));\n  gap: var(--rb-event-tiles-grid-gap, 0.5rem);\n}\n\n:where(.theme-scope) .rb-tile-treatment-quiet {\n  --rb-tile-bg: color-mix(in oklab, rgb(var(--tb-surface)), rgb(var(--tb-muted)) 48%);\n  --rb-tile-border: color-mix(in oklab, rgb(var(--tb-border)), transparent 35%);\n  --rb-tile-border-hover: color-mix(in oklab, rgb(var(--tb-primary)), transparent 40%);\n}\n\n:where(.theme-scope) .rb-tile-treatment-brand-depth {\n  --rb-brand-depth-surface: rgb(var(--tb-primary-800));\n  --rb-brand-depth-tile-surface: rgb(var(--tb-primary-900));\n  --rb-brand-depth-tile-surface-selected: rgb(var(--tb-primary-950));\n  --rb-tile-bg: var(--rb-brand-depth-tile-surface);\n  --rb-tile-bg-selected: var(--rb-brand-depth-tile-surface-selected);\n  --rb-tile-border: transparent;\n  --rb-tile-border-hover: transparent;\n  --rb-tile-border-selected: transparent;\n  --rb-tile-border-width: 0;\n  --rb-event-tile-radius: var(--rb-block-radius);\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-tiles-grid {\n    grid-template-columns: repeat(var(--rb-tiles-grid-cols-md, var(--rb-tiles-grid-cols-sm, 2)), minmax(0, 1fr));\n  }\n}\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card) {\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.25);\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):hover:not(:disabled) {\n  border-color: var(--rb-tile-border-hover, var(--rb-event-tile-border-hover, rgb(var(--tb-primary) / 0.5)));\n  opacity: var(--rb-tile-hover-opacity, var(--rb-event-tile-hover-opacity, var(--rb-tile-opacity, var(--rb-event-tile-opacity, 1))));\n}\n\n:where(.theme-scope) :where(.rb-tile--selected, .er-event-card--selected) {\n  border-color: var(--rb-tile-border-selected, var(--rb-event-tile-border-selected, rgb(var(--tb-primary))));\n  background: var(--rb-tile-bg-selected, var(--rb-event-tile-bg-selected, rgb(var(--tb-primary) / 0.1)));\n}\n\n:where(.theme-scope) :where(.rb-tile--disabled, .er-event-card--disabled) {\n  border-style: dashed;\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/*\n * A cancelled session stays on the run's schedule rather than disappearing from\n * it, so a visitor can see the week is accounted for. It reads as retired: a\n * dashed edge, quietened like supporting text, and the date itself struck\n * through. The \"Cancelled\" caption beside it keeps its own weight, which is why\n * only the date carries the line.\n */\n:where(.theme-scope) .rb-tile--cancelled {\n  border-style: dashed;\n  opacity: var(--rb-tile-cancelled-opacity, 0.65);\n}\n\n:where(.theme-scope) .rb-tile--cancelled :where(strong) {\n  text-decoration: line-through;\n}\n\n/* =============================================================================\n * Block: Newsletter Signup\n * =============================================================================\n */\n\n/* Newsletter copy styling */\n/* Size only: weight, family and colour come from the theme's heading styles */\n:where(.theme-scope) :where([data-block=\"newsletter-signup\"]) .newsletter-copy-title {\n  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);\n  line-height: 1.15;\n  text-wrap: balance;\n}\n\n:where(.theme-scope) :where([data-block=\"newsletter-signup\"]) .newsletter-copy-subtitle {\n  font-size: 1rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  opacity: 0.85;\n}\n\n/* Newsletter form container */\n:where(.theme-scope) .newsletter-form {\n  width: 100%;\n  max-width: 32rem;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Newsletter form fields container */\n:where(.theme-scope) .newsletter-form-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rb-gap-sm, 0.75rem);\n}\n\n/* Extra preset fields (name, company...). Labels are visually hidden, so\n   these sit in a row above the email entry. */\n:where(.theme-scope) .newsletter-extra-fields {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) .newsletter-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  text-align: left;\n}\n\n/* Email entry: the email field and the themed submit button share one shell.\n   The shell's look (background, border, corners, focus ring) comes from the\n   theme's input system via .form-input-group; this only handles layout. */\n:where(.theme-scope) .newsletter-entry {\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  text-align: left;\n}\n\n:where(.theme-scope) .newsletter-entry-group > button {\n  white-space: nowrap;\n}\n\n/* Too narrow for field and button side by side (phones, footer columns):\n   stack them inside the shell and keep pill themes from turning the taller\n   shell into a capsule. */\n@container (max-width: 22rem) {\n  :where(.theme-scope) .newsletter-entry .newsletter-entry-group {\n    flex-direction: column;\n    border-radius: min(var(--rb-input-radius, 0.5rem), 1rem);\n  }\n\n  :where(.theme-scope) .newsletter-entry .newsletter-entry-group > button {\n    width: 100%;\n    justify-content: center;\n  }\n}\n\n/* Topic choices (visitor picks what to hear about) as toggle chips. Each chip\n   is a real checkbox underneath; the chip is its visible face. */\n:where(.theme-scope) .newsletter-topics {\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n}\n\n:where(.theme-scope) .newsletter-topics-legend {\n  padding: 0;\n  margin-bottom: 0.625rem;\n  font-size: 0.9375rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) .newsletter-topic-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) .newsletter-stacked .newsletter-topics-legend {\n  width: 100%;\n}\n\n:where(.theme-scope) .newsletter-stacked .newsletter-topic-chips {\n  justify-content: center;\n}\n\n:where(.theme-scope) .newsletter-topic-chip {\n  position: relative;\n  display: inline-flex;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > span {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.4375rem 0.9375rem;\n  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);\n  border-radius: var(--rb-button-radius, var(--rb-input-radius, 9999px));\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n}\n\n/* Tick that grows in when the chip is on */\n:where(.theme-scope) .newsletter-topic-chip > span::before {\n  content: \"\";\n  width: 0;\n  height: 0.7em;\n  background-color: currentColor;\n  clip-path: polygon(14% 52%, 0 67%, 38% 100%, 100% 22%, 85% 8%, 37% 70%);\n  transition: width 0.15s ease;\n}\n\n:where(.theme-scope) .newsletter-topic-chip:hover > span {\n  border-color: currentColor;\n}\n\n/* Same accent and mark colours as the theme's checkboxes */\n:where(.theme-scope) .newsletter-topic-chip > input:checked + span {\n  background-color: var(--rb-check-accent, rgb(var(--tb-primary)));\n  border-color: var(--rb-check-accent, rgb(var(--tb-primary)));\n  color: var(--rb-check-mark, rgb(var(--tb-onPrimary, 255 255 255)));\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input:checked + span::before {\n  width: 0.7em;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input:focus-visible + span {\n  outline: 2px solid var(--rb-check-accent, rgb(var(--tb-primary)));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input:disabled + span {\n  opacity: 0.6;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) .newsletter-topic-chip > span,\n  :where(.theme-scope) .newsletter-topic-chip > span::before {\n    transition: none;\n  }\n}\n\n/* Error panel and field notes. The form block scopes these to its own\n   data-block, so the newsletter form (which also renders in the footer)\n   needs its own copy of the treatment. */\n:where(.theme-scope) .newsletter-form .fb-error:not([data-field-validation-message]) {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) .newsletter-form [data-field-validation-message] {\n  font-size: 0.875rem;\n  color: var(--fb-error-text);\n}\n\n/* Submit button container (only when a preset has no email field) */\n:where(.theme-scope) .newsletter-submit {\n  margin-top: 0.5rem;\n}\n\n/* ALTCHA widget container */\n:where(.theme-scope) .newsletter-altcha {\n  margin-top: 0.75rem;\n  display: flex;\n  justify-content: center;\n}\n\n/* Privacy note: quieter than the intro so the entry row leads */\n:where(.theme-scope) .newsletter-privacy-note {\n  margin-top: 0.75rem;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));\n  opacity: 0.85;\n  text-align: center;\n}\n\n/* =============================================================================\n * Inline Variant - left-aligned, wider entry row\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-inline .newsletter-form {\n  max-width: 40rem;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n:where(.theme-scope) .newsletter-inline .newsletter-privacy-note {\n  text-align: left;\n}\n\n/* =============================================================================\n * Editorial Split Variant\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-editorial-split {\n  display: grid;\n  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);\n  gap: clamp(2.5rem, 7vw, 7rem);\n  align-items: center;\n  text-align: left;\n}\n\n:where(.theme-scope) .newsletter-editorial-split-copy {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rb-gap-sm, 0.75rem);\n}\n\n:where(.theme-scope) .newsletter-editorial-split-form {\n  min-width: 0;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-form {\n  max-width: none;\n  margin-inline: 0;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-copy-title {\n  font-size: clamp(2rem, 4vw, 3.5rem);\n  font-weight: 500;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-privacy-note {\n  text-align: left;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .newsletter-editorial-split {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 2rem;\n  }\n}\n}\n\n/* =============================================================================\n * Success State\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-success {\n  text-align: center;\n}\n\n:where(.theme-scope) .newsletter-success .fb-success {\n  padding: 1rem 1.5rem;\n  background-color: rgb(var(--tb-success, 34 197 94) / 0.1);\n  border-radius: var(--radius-md, 0.5rem);\n  color: rgb(var(--tb-text));\n}\n\n/* =============================================================================\n * Block: Contact + Newsletter\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));\n  gap: clamp(2.5rem, 6vw, 4rem);\n  align-items: start;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-column {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-copy {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .form-copy-title,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-copy-title {\n  margin: 0 0 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .form-copy-intro,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-copy-subtitle {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-info {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-form {\n  max-width: none;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-privacy-note {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-row-2 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-fieldset {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border: none;\n  padding: 0;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-success,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-error,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-empty {\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-success {\n  background-color: var(--fb-success-bg);\n  color: var(--fb-success-text);\n  border: 1px solid var(--fb-success-border);\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-error {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-empty {\n  background-color: var(--fb-empty-bg);\n  color: var(--fb-empty-text);\n  border: 1px dashed var(--fb-empty-border);\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-actions {\n  margin-top: 0.5rem;\n}\n\n/* =============================================================================\n * Block: Team Members\n * =============================================================================\n *\n * Site/theme authors sometimes need different thumbnail shapes/sizes without\n * changing global fragment defaults. We expose these controls on the block and\n * style them via data attributes on the `.rb-team-members` wrapper.\n */\n\n/* Scope all block-static CSS to ThemeScope to avoid leaking into host apps/dashboard. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-align=\"left\"]) {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-align=\"left\"]) :where(.rb-team-member) {\n  align-items: flex-start;\n  text-align: left;\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-width=\"lg-3-4-left\"]) {\n    width: 75%;\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-photo {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-role {\n  font-weight: 600;\n}\n\n/* Thumbnail sizing: map `data-image-col-size` to a sensible max thumbnail width. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members) {\n  --rb-team-thumb-max: 11.25rem; /* ~180px default */\n  --rb-team-image-basis: 33.333%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/4\"]) {\n  --rb-team-thumb-max: 8.75rem; /* ~140px */\n  --rb-team-image-basis: 25%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/3\"]) {\n  --rb-team-thumb-max: 11.25rem; /* ~180px */\n  --rb-team-image-basis: 33.333%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"2/5\"]) {\n  --rb-team-thumb-max: 13.75rem; /* ~220px */\n  --rb-team-image-basis: 40%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/2\"]) {\n  --rb-team-thumb-max: 17.5rem; /* ~280px */\n  --rb-team-image-basis: 50%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"2/3\"]) {\n  --rb-team-thumb-max: 22.5rem; /* ~360px */\n  --rb-team-image-basis: 66.667%;\n}\n\n/* The wrap is the shape/padding boundary; ensure it expands within the grid cell. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-photo-wrap {\n  width: 100%;\n  overflow: hidden;\n}\n\n/* In grid mode, cap thumbnail width so headshots don't dominate the card. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"grid\"]) :where(.rb-team-member-photo-wrap) {\n  max-width: var(--rb-team-thumb-max);\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"grid\"]) :where(.rb-team-members[data-layout-align=\"center\"]) :where(.rb-team-member-photo-wrap) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Stack variant: always left-aligned, regardless of the block alignment field. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members) {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member) {\n  text-align: left;\n  align-items: flex-start;\n}\n\n/* Stack items: add comfortable per-item vertical padding so entries breathe. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member--stack) {\n  padding-block: 1.25rem;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n/* Stack variant: enforce real column ratio at md+ (fixes transform/fallback pitfalls). */\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member-photo-col) {\n    flex: 0 0 var(--rb-team-image-basis);\n  }\n\n  /* Stack variant: increase media/text gap on desktop. */\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member--stack) {\n    gap: 1.5rem;\n  }\n\n  /* Stack variant: optional vertical centering of text against thumbnail. */\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-content-align=\"center\"]) :where(.rb-team-member--stack) {\n    align-items: center;\n  }\n\n  /* Stack variant: image position control */\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-image-position=\"right\"]) :where(.rb-team-member--stack) {\n    flex-direction: row-reverse;\n  }\n\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-image-position=\"alternate\"]) :where(.rb-team-member--stack:nth-child(even)) {\n    flex-direction: row-reverse;\n  }\n}\n}\n\n/* Thumbnail padding (space around image inside the item) */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"sm\"] .rb-team-member-photo-wrap {\n  padding: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"md\"] .rb-team-member-photo-wrap {\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"lg\"] .rb-team-member-photo-wrap {\n  padding: 1.5rem;\n}\n\n/* Thumbnail shape */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"square\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"square\"] .rb-team-member-photo-wrap {\n  border-radius: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"rounded\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"rounded\"] .rb-team-member-photo-wrap {\n  border-radius: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"round\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"round\"] .rb-team-member-photo-wrap {\n  border-radius: 9999px;\n}\n\n/* The callout is its own opaque surface: tones tint over the theme surface,\n * not over whatever band the callout sits on, so its foreground and button\n * context (theme-core/src/blocks/opaquePanels.ts) hold on any section. */\n:where(.theme-scope) .feedback-callout {\n  background: rgb(var(--tb-surface, 248 250 252));\n  border-color: rgb(var(--tb-border, 226 232 240) / 0.72);\n  --rb-feedback-callout-bg-opacity: 0.1;\n  --rb-feedback-callout-border-opacity: 0.24;\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"info\"] {\n  --rb-feedback-callout-bg-opacity: 0.08;\n  background:\n    linear-gradient(rgb(var(--tb-primary, 37 99 235) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-primary, 37 99 235) / var(--rb-feedback-callout-bg-opacity))),\n    rgb(var(--tb-surface, 248 250 252));\n  border-color: rgb(var(--tb-primary, 37 99 235) / var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"success\"] {\n  background:\n    linear-gradient(rgb(var(--tb-success, 34 197 94) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-success, 34 197 94) / var(--rb-feedback-callout-bg-opacity))),\n    rgb(var(--tb-surface, 248 250 252));\n  border-color: rgb(var(--tb-success, 34 197 94) / var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"warning\"] {\n  --rb-feedback-callout-bg-opacity: 0.12;\n  --rb-feedback-callout-border-opacity: 0.28;\n  background:\n    linear-gradient(rgb(var(--tb-warning, 245 158 11) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-warning, 245 158 11) / var(--rb-feedback-callout-bg-opacity))),\n    rgb(var(--tb-surface, 248 250 252));\n  border-color: rgb(var(--tb-warning, 245 158 11) / var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"error\"] {\n  --rb-feedback-callout-border-opacity: 0.26;\n  background:\n    linear-gradient(rgb(var(--tb-destructive, 239 68 68) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-destructive, 239 68 68) / var(--rb-feedback-callout-bg-opacity))),\n    rgb(var(--tb-surface, 248 250 252));\n  border-color: rgb(var(--tb-destructive, 239 68 68) / var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout__title {\n  margin: 0;\n}\n\n:where(.theme-scope) .feedback-callout__body > :first-child {\n  margin-top: 0;\n}\n\n:where(.theme-scope) .feedback-callout__body > :last-child {\n  margin-bottom: 0;\n}\n\n/* =============================================================================\n * Block: Event Compact Row\n * Dense row layout for event-calendar compact list mode\n * ============================================================================= */\n\n:where(.theme-scope) .event-listing-compact-container {\n  --event-compact-divider-color: color-mix(\n    in oklab,\n    rgb(var(--tb-border, 229 231 235)),\n    rgb(var(--tb-text, 17 24 39)) 4%\n  );\n  --event-compact-secondary-text: color-mix(\n    in oklab,\n    rgb(var(--tb-text, 17 24 39)),\n    rgb(var(--tb-background, 255 255 255)) 28%\n  );\n\n  width: min(100%, 92rem);\n  margin-inline: auto;\n  overflow: hidden;\n  container: event-compact-list / inline-size;\n  border: 1px solid var(--event-compact-divider-color);\n  border-radius: 1rem;\n  background: rgb(var(--tb-surface, 255 255 255));\n  box-shadow: none;\n}\n\n:where(.theme-scope) .rb-event-list-treatment-lined-panel .event-listing-compact-container {\n  --event-compact-divider-color: color-mix(\n    in oklab,\n    rgb(var(--tb-border, 229 231 235)),\n    rgb(var(--tb-text, 17 24 39)) 8%\n  );\n  background: rgb(var(--tb-surface, 255 255 255));\n  border-color: color-mix(\n    in oklab,\n    rgb(var(--tb-primary, 0 0 0)),\n    rgb(var(--tb-border, 229 231 235)) 72%\n  );\n}\n\n:where(.theme-scope) .event-compact-row {\n  display: grid;\n  grid-template-columns: clamp(4.5rem, 6vw, 6.25rem) minmax(0, 1fr);\n  align-items: center;\n  min-height: 6rem;\n  padding: 1rem clamp(1.25rem, 2.6vw, 2.25rem);\n  border-bottom: 1px solid var(--event-compact-divider-color);\n  transition: background-color 150ms ease;\n}\n\n:where(.theme-scope) .event-compact-row:last-child {\n  border-bottom: none;\n}\n\n:where(.theme-scope) .event-compact-row:hover {\n  background-color: rgb(var(--tb-primary, 0 0 0) / 0.035);\n}\n\n:where(.theme-scope) .event-compact-row-date {\n  display: grid;\n  grid-template-rows: 1rem minmax(2.7rem, auto) 1rem;\n  place-items: center;\n  gap: 0;\n  min-width: 0;\n  padding-right: clamp(0.8rem, 1.6vw, 1.35rem);\n  text-align: center;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .event-compact-row-body {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  border-left: 1px solid var(--event-compact-divider-color);\n}\n\n:where(.theme-scope) .event-compact-row-date-weekday,\n:where(.theme-scope) .event-compact-row-date-month {\n  display: grid;\n  place-items: center;\n  block-size: 1rem;\n  color: rgb(var(--tb-primary, 0 0 0));\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: normal;\n  letter-spacing: 0.08em;\n}\n\n:where(.theme-scope) .event-compact-row-date-day {\n  display: grid;\n  place-items: center;\n  min-block-size: clamp(2rem, 3vw, 2.6rem);\n  color: rgb(var(--tb-text, 17 24 39));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem);\n  font-weight: 400;\n  line-height: 1;\n}\n\n:where(.theme-scope) .event-compact-row-content {\n  min-width: 0;\n  display: flex;\n  flex: 1 1 18rem;\n  flex-direction: column;\n  gap: 0.625rem;\n  height: 100%;\n  justify-content: center;\n  padding-inline: clamp(1rem, 2.4vw, 2.4rem);\n}\n\n:where(.theme-scope) .event-compact-row-title {\n  margin: 0;\n  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39)))));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);\n  font-weight: 400;\n  line-height: 1.2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.9rem;\n  min-width: 0;\n  color: var(--event-compact-secondary-text);\n  font-size: 0.875rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope) .event-compact-row-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.45rem;\n  min-width: 0;\n}\n\n:where(.theme-scope) .event-compact-row-venue svg {\n  width: 1.05em;\n  height: 1.05em;\n}\n\n:where(.theme-scope) .event-compact-row-teacher,\n:where(.theme-scope) .event-compact-row-price {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.9rem;\n}\n\n:where(.theme-scope) .event-compact-row-teacher::before,\n:where(.theme-scope) .event-compact-row-price::before {\n  content: \"\";\n  width: 0.18rem;\n  height: 0.18rem;\n  border-radius: 9999px;\n  background: currentColor;\n}\n\n:where(.theme-scope) .event-compact-row-price {\n  color: inherit;\n  font-weight: inherit;\n}\n\n:where(.theme-scope) .event-compact-row-action {\n  display: grid;\n  flex: 0 1 clamp(14rem, 22vw, 19rem);\n  align-content: center;\n  gap: 0.75rem;\n  height: 100%;\n  padding-left: clamp(1.1rem, 2.4vw, 2.4rem);\n  border-left: 1px solid var(--event-compact-divider-color);\n}\n\n:where(.theme-scope) .event-compact-row-datetime {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.65rem;\n  color: var(--event-compact-secondary-text);\n  font-size: 0.875rem;\n  line-height: 1.3;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-datetime svg {\n  width: 1.1em;\n  height: 1.1em;\n  flex-shrink: 0;\n}\n\n:where(.theme-scope) .event-compact-row-action-price {\n  display: none;\n}\n\n:where(.theme-scope) .event-compact-row-status {\n  color: rgb(var(--tb-muted, var(--tb-text, 17 24 39)));\n  font-weight: 500;\n}\n\n:where(.theme-scope) .event-compact-row-cta {\n  width: min(100%, 15rem);\n  min-height: 2.7rem;\n  justify-content: space-between;\n  gap: 1rem;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-cta svg {\n  width: 1.25rem;\n  height: 1.25rem;\n  flex-shrink: 0;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .event-listing-compact-container {\n    border-radius: 0.875rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row {\n    grid-template-columns: 4.25rem minmax(0, 1fr);\n    min-height: 0;\n    padding: 1rem;\n    row-gap: 0.85rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-date {\n    align-self: start;\n    grid-row: 1;\n    padding-right: 0.75rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-body {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.85rem;\n    height: auto;\n    padding-left: 0.9rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-date-day {\n    font-size: 1.65rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-content {\n    flex: none;\n    gap: 0.625rem;\n    height: auto;\n    padding-inline: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-title {\n    font-size: 1.15rem;\n    overflow: visible;\n    text-overflow: clip;\n    white-space: normal;\n    overflow-wrap: break-word;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-venue {\n    max-width: 100%;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-venue svg {\n    flex-shrink: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-meta {\n    flex-direction: column;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-meta .event-compact-row-price {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-teacher::before,\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-price::before {\n    content: none;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-action {\n    flex: none;\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0.7rem;\n    height: auto;\n    width: 100%;\n    padding-left: 0;\n    padding-top: 0;\n    border-left: 0;\n    border-top: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-datetime {\n    display: flex;\n    flex-wrap: wrap;\n    white-space: normal;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-action-price {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.55rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-action-price::before {\n    content: \"\\00b7\";\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-cta {\n    width: min(100%, 12rem);\n    min-height: 2.65rem;\n    justify-content: space-between;\n    gap: 0.65rem;\n    padding-inline: 1rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-cta span {\n    min-width: 0;\n  }\n}\n}\n\n@container event-compact-list (max-width: 48rem) {\n  :where(.theme-scope) .event-compact-row {\n    grid-template-columns: 4.25rem minmax(0, 1fr);\n    min-height: 0;\n    padding: 1rem;\n    row-gap: 0.85rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date {\n    align-self: start;\n    grid-row: 1;\n    padding-right: 0.75rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-body {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.85rem;\n    height: auto;\n    padding-left: 0.9rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date-day {\n    font-size: 1.65rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-content {\n    flex: none;\n    gap: 0.625rem;\n    height: auto;\n    padding-inline: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-title {\n    font-size: 1.15rem;\n    overflow: visible;\n    text-overflow: clip;\n    white-space: normal;\n    overflow-wrap: break-word;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue {\n    max-width: 100%;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue svg {\n    flex-shrink: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta {\n    flex-direction: column;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta .event-compact-row-price {\n    display: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-teacher::before,\n  :where(.theme-scope) .event-compact-row-price::before {\n    content: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-action {\n    flex: none;\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0.7rem;\n    height: auto;\n    width: 100%;\n    padding-left: 0;\n    padding-top: 0;\n    border-left: 0;\n    border-top: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-datetime {\n    display: flex;\n    flex-wrap: wrap;\n    white-space: normal;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.55rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price::before {\n    content: \"\\00b7\";\n  }\n\n  :where(.theme-scope) .event-compact-row-cta {\n    width: min(100%, 12rem);\n    min-height: 2.65rem;\n    justify-content: space-between;\n    gap: 0.65rem;\n    padding-inline: 1rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-cta span {\n    min-width: 0;\n  }\n}\n\n:where(.theme-scope) .section-state__callout {\n  text-align: center;\n  padding: 2rem;\n}\n\n:where(.theme-scope) .section-state__callout .feedback-callout__body {\n  margin-inline: auto;\n  max-width: 40rem;\n}\n\n:where(.theme-scope) .section-state__callout .feedback-callout__actions {\n  justify-content: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) :where([data-rb-background-video=\"true\"]) {\n    display: none !important;\n  }\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback {\n  border: 1px solid rgb(var(--tb-text, 17 24 39) / 0.12);\n  border-radius: 1rem;\n  padding: 0.875rem 1rem;\n  /* Opaque surface; foreground and button context come from the opaque-panel\n   * registry (theme-core/src/blocks/opaquePanels.ts). Tones tint over it. */\n  background: rgb(var(--tb-surface, 255 255 255));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"success\"] {\n  border-color: rgb(var(--tb-success, 34 197 94) / 0.3);\n  background:\n    linear-gradient(rgb(var(--tb-success, 34 197 94) / 0.1), rgb(var(--tb-success, 34 197 94) / 0.1)),\n    rgb(var(--tb-surface, 255 255 255));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"warning\"] {\n  border-color: rgb(var(--tb-warning, 245 158 11) / 0.35);\n  background:\n    linear-gradient(rgb(var(--tb-warning, 245 158 11) / 0.12), rgb(var(--tb-warning, 245 158 11) / 0.12)),\n    rgb(var(--tb-surface, 255 255 255));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"error\"] {\n  border-color: rgb(var(--tb-destructive, 239 68 68) / 0.3);\n  background:\n    linear-gradient(rgb(var(--tb-destructive, 239 68 68) / 0.1), rgb(var(--tb-destructive, 239 68 68) / 0.1)),\n    rgb(var(--tb-surface, 255 255 255));\n}\n\n/* =============================================================================\n * Shared: Heading Decorations\n * =============================================================================\n */\n\n/*\n * The mark sits inside a full-width block row so it inherits the heading group's\n * `text-align`: a centred heading centres the mark, a left-aligned heading keeps\n * it at the start. The heading stacks are flexbox, where `text-align` positions\n * inline content but not flex items \u2014 so the row (a stretched block flex item)\n * is what carries the alignment, and the inline-block mark follows it. Alignment\n * is never configured directly; it follows the heading.\n */\n:where(.theme-scope) .rb-heading-decoration-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n:where(.theme-scope) .rb-heading-decoration-row {\n  display: block;\n  width: 100%;\n  margin-top: 0.35rem;\n  line-height: 0;\n  pointer-events: none;\n}\n\n:where(.theme-scope) .rb-heading-decoration {\n  display: inline-block;\n  vertical-align: top;\n}\n\n:where(.theme-scope) .rb-heading-decoration-organic-squiggle {\n  width: clamp(5.5rem, 15vw, 9rem);\n  height: 1.1rem;\n  background-color: currentColor;\n  opacity: 0.9;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg width='144' height='18' viewBox='0 0 144 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10C15 1 27 1 40 10C53 18 66 18 79 10C92 1 105 1 118 10C127 16 136 17 142 12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg width='144' height='18' viewBox='0 0 144 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10C15 1 27 1 40 10C53 18 66 18 79 10C92 1 105 1 118 10C127 16 136 17 142 12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n}\n\n:where(.theme-scope) .rb-heading-decoration-short-center-rule {\n  width: 4.5rem;\n  height: 0.125rem;\n  border-radius: 999px;\n  background-color: currentColor;\n  opacity: 0.75;\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-text {\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-primary {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-secondary {\n  color: rgb(var(--tb-secondary));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-accent {\n  color: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-border {\n  color: rgb(var(--tb-border));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-muted {\n  color: rgb(var(--tb-mutedText));\n}\n\n/* =============================================================================\n * Block: Feature Card Icons\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-feature-card-icon-zone {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  margin-bottom: 0.125rem;\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--empty {\n  visibility: hidden;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--plain {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--soft-badge,\n:where(.theme-scope) .rb-feature-card-icon-zone--utility-badge {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--soft-badge {\n  background-color: rgb(var(--tb-primary) / 10%);\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--utility-badge {\n  background-color: rgb(var(--tb-surface));\n  border: 1px solid rgb(var(--tb-border));\n  box-shadow: 0 1px 2px rgb(var(--tb-shadow) / 0.08);\n}\n\n:where(.theme-scope) .rb-feature-card-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon--generated {\n  object-fit: contain;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--generated {\n  align-self: center;\n  inline-size: min(var(--rb-feature-card-generated-icon-size, 75px), 100%);\n  max-inline-size: 100%;\n  block-size: auto;\n  aspect-ratio: 1;\n  margin-inline: auto;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--plain .rb-feature-card-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--generated .rb-feature-card-icon--generated {\n  inline-size: 100%;\n  max-inline-size: 100%;\n  block-size: 100%;\n}\n\n/* --- Card marker mode (icons / numbers / none) -----------------------------\n *\n * The icon zone and the number zone both sit in the DOM; the grid's\n * `data-card-marker` attribute decides which shows. The default (legacy\n * content with no attribute) shows icons and hides the number zone.\n */\n:where(.theme-scope) .rb-feature-card-number-zone {\n  display: none; /* shown only in numbers mode */\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 2.5rem;\n  height: 2.5rem;\n  margin-bottom: 0.125rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n  background-color: rgb(var(--tb-primary) / 10%);\n  color: rgb(var(--tb-primary));\n  counter-increment: rb-feature-card-number;\n}\n:where(.theme-scope) .rb-feature-card-number-zone::before {\n  content: counter(rb-feature-card-number, decimal-leading-zero);\n  font-weight: 700;\n  font-size: 0.95rem;\n  line-height: 1;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid {\n  counter-reset: rb-feature-card-number;\n}\n\n:where(.theme-scope) [data-card-marker=\"numbers\"] .rb-feature-card-number-zone {\n  display: inline-flex;\n}\n:where(.theme-scope) [data-card-marker=\"numbers\"] .rb-feature-card-icon-zone {\n  display: none;\n}\n:where(.theme-scope) [data-card-marker=\"none\"] .rb-feature-card-icon-zone,\n:where(.theme-scope) [data-card-marker=\"none\"] .rb-feature-card-number-zone {\n  display: none;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"portrait-bio\"][data-block-variant=\"media-copy\"] .rb-intro-media-wrap {\n  max-width: min(100%, 24rem);\n  margin-inline: auto;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"portrait-bio\"][data-block-variant=\"media-copy\"] .rb-intro-media {\n  aspect-ratio: 1 / 1 !important;\n  border-radius: 9999px;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) [data-block=\"intro\"][data-block-variant=\"statement-media\"] .rb-intro-statement-media-title {\n    grid-column: 1 / -1;\n  }\n}\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) [data-block=\"intro\"][data-block-variant=\"statement-media\"] .rb-intro-statement-media-title {\n    grid-column: auto;\n  }\n}\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-title {\n  font-size: clamp(2rem, 1.56rem + 1.4vw, 3rem);\n  line-height: 1.14;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-copy {\n  gap: var(--rb-space-5, 1.25rem);\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-copy .rb-prose {\n  font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.375rem);\n  line-height: 1.65;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-section {\n  width: min(100%, 66rem);\n  margin-inline: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-heading {\n  max-width: 44rem;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-header {\n  display: flex;\n  gap: 2rem;\n  align-items: end;\n  justify-content: space-between;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-eyebrow {\n  margin: 0;\n  color: rgb(var(--tb-accent));\n  font-size: 0.72rem;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-heading-title {\n  margin: 0;\n  font-size: clamp(2rem, 4.6vw, 3.3rem);\n  line-height: 1.08;\n}\n\n:where(.theme-scope) .recurring-schedule {\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope) .recurring-schedule-row {\n  display: grid;\n  grid-template-columns: minmax(9rem, 0.82fr) minmax(16rem, 1.5fr) auto;\n  grid-template-rows: auto auto;\n  column-gap: clamp(1.5rem, 4vw, 2.75rem);\n  row-gap: 0.15rem;\n  align-items: center;\n  padding: 1.4rem 0.75rem;\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n  color: inherit;\n}\n\n:where(.theme-scope) .recurring-schedule-day,\n:where(.theme-scope) .recurring-schedule-time,\n:where(.theme-scope) .recurring-schedule-title,\n:where(.theme-scope) .recurring-schedule-venue {\n  margin: 0;\n}\n\n:where(.theme-scope) .recurring-schedule-day {\n  grid-column: 1;\n  grid-row: 1;\n  font-family: var(--font-heading);\n  font-size: clamp(1.25rem, 2vw, 1.5rem);\n  line-height: 1;\n}\n\n:where(.theme-scope) .recurring-schedule-time {\n  grid-column: 1;\n  grid-row: 2;\n  display: flex;\n  gap: 0.35rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.86rem;\n  font-variant-numeric: tabular-nums;\n}\n\n:where(.theme-scope) .recurring-schedule-details {\n  grid-column: 2;\n  grid-row: 1 / span 2;\n  align-self: center;\n}\n\n:where(.theme-scope) .recurring-schedule-title {\n  font-size: 1.06rem;\n  font-weight: 500;\n}\n\n:where(.theme-scope) .recurring-schedule-venue {\n  margin-top: 0.2rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.92rem;\n}\n\n:where(.theme-scope) .recurring-schedule-action {\n  grid-column: 3;\n  grid-row: 1 / span 2;\n  min-width: 4.5rem;\n  text-align: right;\n}\n\n:where(.theme-scope) .recurring-schedule-see-all {\n  width: fit-content;\n  color: inherit;\n  text-underline-offset: 0.3em;\n}\n\n:where(.theme-scope) .recurring-schedule-empty {\n  margin: 0;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-header {\n    align-items: start;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .recurring-schedule-row {\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto auto;\n    gap: 0.5rem 1rem;\n    align-items: start;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .recurring-schedule-day {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .recurring-schedule-time {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .recurring-schedule-details {\n    grid-column: 1 / -1;\n    grid-row: 3;\n    margin-top: 0.35rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .recurring-schedule-action {\n    grid-column: 2;\n    grid-row: 1 / span 2;\n  }\n}\n}\n\n/* =============================================================================\n * Event list treatments: registers and dense indexes\n *\n * These treatments retain the event list's content and structural layout.\n * Their contrast relationships come exclusively from the active semantic\n * section surface and named palette tokens.\n *\n * The treatment list is `:is()`, not `:where()`, so each rule outranks the card\n * role (`.card-role-x.card-role-x`) the event card also carries: the rows must\n * stay boxless whichever stylesheet the page loads last.\n * ============================================================================= */\n\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card {\n  position: relative;\n  overflow: visible;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  /* Boxless row: the opaque-panel registry hands the band's contract back. */\n}\n\n/* Register treatments intentionally prioritise schedule data over imagery. */\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-media {\n  display: none;\n}\n\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .card-content {\n  min-width: 0;\n  padding: 1.5rem 0.625rem;\n}\n\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .card-title {\n  min-width: 0;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-footer {\n  min-width: 8rem;\n  padding-top: 0;\n}\n\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-cta {\n  width: 100%;\n}\n\n/* Ruled register: open rows with quiet rules on the current section surface. */\n:where(.theme-scope)\n  .rb-event-list-treatment-ruled-register\n  .event-card.event-card {\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-ruled-register\n  .event-card.event-card:last-child {\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n/* Editorial register: generous rows, an accent marker and display-led titles. */\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card {\n  border-top: 1px solid color-mix(in oklab, rgb(var(--tb-border)), transparent 20%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card:last-child {\n  border-bottom: 1px solid color-mix(in oklab, rgb(var(--tb-border)), transparent 20%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card::before {\n  content: \"\";\n  position: absolute;\n  inset-block: 1.75rem;\n  inset-inline-start: 0;\n  width: 0.25rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n  background: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card\n  .card-content {\n  padding-block: 1.875rem;\n  padding-inline-start: clamp(1.25rem, 2.5vw, 2rem);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card\n  .card-title {\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);\n  font-weight: 500;\n  line-height: 1.15;\n}\n\n/* Dense index: stronger outside rule and reduced row rhythm, without opting\n * the block into its structurally different compact-list facet. */\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card {\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 62%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card:first-child {\n  border-top: 2px solid currentColor;\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card\n  .card-content {\n  padding-block: 1.125rem;\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card\n  .card-title {\n  font-size: 1rem;\n  line-height: 1.35;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal {\n    display: block;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content {\n    display: grid;\n    grid-template-columns: minmax(8.5rem, 0.7fr) minmax(15rem, 1.55fr) auto;\n    grid-template-rows: auto auto auto;\n    align-items: center;\n    column-gap: clamp(1.25rem, 3vw, 2.625rem);\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-title {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > div.rb-caption {\n    grid-column: 1;\n    grid-row: 1 / span 6;\n    margin-bottom: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > div.rb-mb-3 {\n    grid-column: 2;\n    margin-bottom: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .event-category-badge {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .card-body,\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .status-muted:not(.event-card-capacity) {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .event-card-footer {\n    grid-column: 3;\n    grid-row: 1 / span 6;\n    flex-direction: column;\n    justify-content: center;\n    align-items: stretch;\n  }\n}\n}\n\n/* =============================================================================\n * Feature-card composition Looks promoted from block-treatment studies.\n * Palette relationships use named semantic tokens; copy and media stay in the\n * existing feature-card content contract.\n * ============================================================================= */\n\n/* Asymmetric emphasis: repeat a 5/7 pair rhythm and give each even card a\n * semantic secondary surface. This remains useful with more than two cards. */\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-cards-grid {\n  align-items: start;\n}\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card {\n  height: auto;\n  overflow: visible;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card:nth-child(even) {\n  padding: clamp(1.125rem, 2.5vw, 1.875rem);\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 1.5);\n  background: rgb(var(--tb-secondary));\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card:nth-child(even) > .rb-feature-card-media {\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n/* Framed programme: a close-set family of cards on a semantic depth section.\n * The Look asks for the `alternative` card role; the site style's card system\n * supplies the surface. */\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-cards-grid {\n  gap: clamp(1rem, 2vw, 1.5rem);\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-card > .rb-feature-card-media {\n  width: 100%;\n  max-width: 100%;\n  margin: 0;\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n  padding-bottom: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n    .rb-feature-cards-grid.rb-grid-cols-2 {\n    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n  }\n}\n}\n\n/* --- Feature card media + padding behaviour (all looks) -------------------- */\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame {\n  width: calc(100% + 2 * var(--rb-card-pad, 0rem));\n  max-width: none;\n  margin: calc(-1 * var(--rb-card-pad, 0rem)) calc(-1 * var(--rb-card-pad, 0rem)) 0;\n}\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame + .rb-feature-card-content {\n  margin-top: 1.4rem;\n}\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-content {\n  padding: 0;\n}\n\n:where(.theme-scope) .rb-feature-card > .rb-bg-surface,\n:where(.theme-scope) .rb-feature-card > .rb-feature-card-media-frame {\n  border-start-start-radius: inherit;\n  border-start-end-radius: inherit;\n}\n\n/* --- Editorial diptych + pathways ----------------------------------------- */\n\n:where(.theme-scope) .rb-feature-cards-heading--editorial {\n  margin-inline: 0;\n  text-align: left;\n}\n\n:where(.theme-scope) .rb-feature-cards-eyebrow {\n  margin: 0;\n  color: rgb(var(--tb-accent));\n  font-size: 0.72rem;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych {\n  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);\n  align-items: stretch;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  align-items: start;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card {\n  border: 0;\n  box-shadow: none;\n  height: auto;\n  min-width: 0;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card[data-surface-role=\"open\"] > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card[data-surface-role=\"open\"] > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n/* Diptych filled panel: a composition over the `alternative` role's surface.\n   It paints primary (below); its foreground and button context for that paint\n   come from theme-core/src/blocks/opaquePanels.ts. */\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] > .rb-bg-surface {\n  background: rgb(var(--tb-primary));\n  border-radius: inherit;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] > .rb-feature-card-media-frame {\n  width: calc(100% - 2.5rem);\n  margin: 1.25rem 1.25rem 0;\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.55);\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card-content {\n  padding-top: 1.35rem;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] {\n    margin-top: clamp(2rem, 5vw, 4.5rem);\n  }\n\n  :where(.theme-scope:is(*, :scope)) .rb-feature-cards-grid--editorial-pathways .rb-feature-card + .rb-feature-card {\n    border-left: 1px solid color-mix(in oklab, currentColor, transparent 82%);\n    padding-left: clamp(1.5rem, 4vw, 4rem);\n  }\n}\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-feature-cards-grid:is(\n    .rb-feature-cards-grid--editorial-diptych,\n    .rb-feature-cards-grid--editorial-pathways\n  ) {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n}\n\n/* =============================================================================\n * Offerings Preview composition Looks promoted from the Fran Andr\u00E9 treatment\n * study. The outer section surface remains independently configurable. These\n * rules use expanded semantic palette tokens only.\n * ============================================================================= */\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  [data-offering-presentation=\"featured-summary\"]\n  .offerings-preview-card-header {\n  text-align: left;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-date {\n  margin: 0;\n  font-family: var(--font-heading, inherit);\n  font-size: clamp(1.125rem, 2.2vw, 1.5rem);\n  font-weight: 650;\n  line-height: 1.22;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-date time {\n  display: inline-block;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts {\n  display: grid;\n  gap: 0;\n  margin: clamp(1.25rem, 3vw, 2rem) 0 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts > div {\n  display: grid;\n  grid-template-columns: minmax(5.5rem, 0.65fr) minmax(0, 1.35fr);\n  gap: 1rem;\n  padding-block: 0.6rem;\n  border-top: 1px solid rgb(var(--tb-border) / 0.72);\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts dt {\n  font-size: 0.72rem;\n  font-weight: 750;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts dd {\n  min-width: 0;\n  margin: 0;\n  font-weight: 600;\n}\n\n/* --- Composition Looks ----------------------------------------------------\n * Each of these compositions is paired with a card role on the Look\n * (`alternative`, `open`, `default`), so the group card's fill, elevation and\n * padding come from the site style's card system, and nothing below names a\n * colour.\n *\n * Geometry is a different question from colour. A composition that says the\n * rows are *joined* is making a structural statement, and it can only be true\n * if the rows stop drawing their own corners and edges \u2014 so flattening\n * geometry (radius, border width) on inner items is allowed where the\n * composition's meaning depends on it. Choosing what colour those edges would\n * have been is not.\n * ------------------------------------------------------------------------- */\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview {\n  container: rb-offerings-preview / inline-size;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview-card {\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview-card-footer {\n  margin-top: auto;\n  padding-top: clamp(1.25rem, 3vw, 2rem);\n}\n\n/* Paired feature cards: one editorial lead and one supporting route. With a\n * third group the grid returns to equal columns rather than implying a new\n * source hierarchy. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"paired-feature-cards\"]\n  .offerings-preview-grid {\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important;\n  gap: clamp(1rem, 2.5vw, 1.5rem);\n}\n\n@container rb-offerings-preview (min-width: 52rem) {\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"paired-feature-cards\"]\n    .offerings-preview-grid:has(> .offerings-preview-card:nth-child(2):last-child) {\n    grid-template-columns: minmax(0, 1.22fr) minmax(18rem, 0.78fr) !important;\n  }\n}\n\n/* Open editorial columns: hierarchy without an item fill. The `open` card role\n * supplies whatever marking the site style gives a boxless card. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"open-editorial-columns\"]\n  .offerings-preview-grid {\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)) !important;\n  gap: clamp(1.5rem, 4vw, 3rem);\n}\n\n/* Joined programme panel: every group remains independently editable, but the\n * rows are clipped into one column so they read as a single programme. Each\n * row's surface is its own `default` card. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview {\n  overflow: hidden;\n  gap: 0;\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 1.75);\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-grid {\n  grid-template-columns: minmax(0, 1fr) !important;\n  gap: 0;\n}\n\n/* Geometry, not colour: a joined panel is only joined if its rows stop drawing\n * their own corners and outlines. The card role still owns every fill, and the\n * panel's own corners are clipped by the wrapper above. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-card {\n  border-radius: 0;\n  border-width: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-card + .offerings-preview-card {\n  border-top-width: 1px;\n}\n\n@container rb-offerings-preview (min-width: 58rem) {\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n    .offerings-preview-card-content {\n    display: grid;\n    grid-template-columns: minmax(15rem, 1.1fr) minmax(19rem, 1.4fr) minmax(10rem, auto);\n    align-items: center;\n    gap: clamp(1.5rem, 4vw, 4rem);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n    .offerings-preview-card-footer {\n    margin-top: 0;\n    padding-top: 0;\n    justify-content: flex-end;\n  }\n}\n\n/* =============================================================================\n * Featured-editorial testimonial compositions, promoted from the Fran Andr\u00E9\n * treatment study and keyed on the Look's composition intent.\n *\n * Structure only. Which card each slot renders is the block's own lead /\n * support structure (`.card-role-alternative` on the lead, `.card-role-default`\n * on each supporting voice) and what those cards look like belongs to the site\n * style's card system \u2014 so nothing here sets a fill, a border or a corner.\n * ============================================================================= */\n\n/* Evergreen lead: the lead voice remains dominant while the supporting column\n * opens into two equal compact voices at wider widths. */\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"evergreen-lead\"]\n    .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"evergreen-lead\"]\n    .rb-testimonials-fe-col {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n/* Room and response: a tall lead voice with its responses stacked beside it in\n * the existing support column. */\n:where(.theme-scope)\n  [data-block=\"testimonials\"][data-block-composition=\"room-and-response\"]\n  .rb-testimonials-fe-card--feature {\n  min-height: 27rem;\n}\n\n/* Open floor: the section head becomes an editorial rail while proof occupies\n * a lead-over-supporting field. */\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe {\n    display: grid;\n    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.6fr);\n    align-items: start;\n    gap: clamp(2rem, 5vw, 5rem);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-head {\n    display: block;\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-leadin {\n    margin-top: 1.5rem;\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-col {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n/* Open-editorial testimonials composition, selected by a Look\n * (`composition: { kind: 'testimonials', treatment: 'open-editorial' }`).\n *\n * Two jobs. First, *boxless*: `styledCard` always renders an opaque\n * `.rb-bg-surface` fill layer, so a testimonial with no card role has to clear\n * it or it paints a white box on the section band (the same shape\n * feature-card-compositions.css uses for `[data-surface-role=\"open\"]`).\n * Second, the composition proper: a hairline before the attribution, an accent\n * ring on the avatar, comfortable prose.\n *\n * What is *not* here: whether the testimonial sits in a card (the Look's\n * `cardRole`), how that card looks (the site style's card system), or the quote\n * mark (the site style's quote treatment, via the --rb-testimonial-quote-* vars\n * in testimonials.css).\n *\n * The block attribute is deliberately outside `:where()` so these rules outrank\n * the card's own utility classes, matching the compositions above. */\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-card {\n  background: transparent;\n  border: 0;\n  border-radius: 0;\n  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.5rem);\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-card > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-prose {\n  font-size: 1.0625rem;\n  line-height: 1.7;\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-attribution {\n  margin-top: 1.25rem;\n  padding-top: 1.25rem;\n  border-top: 1px solid rgb(var(--tb-border) / 0.75);\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-avatar {\n  box-shadow:\n    0 0 0 2px rgb(var(--tb-surface)),\n    0 0 0 4px rgb(var(--tb-primary) / 0.3);\n}\n\n/* =============================================================================\n * Block: Appointment Services\n * ============================================================================= */\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 1rem;\n  row-gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-main {\n  flex: 1 1 16rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-price {\n  flex: 0 0 auto;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-action {\n  flex: 1 0 100%;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"appointment-services\"]) .appointment-services-row-action {\n    flex: 0 0 auto;\n  }\n}\n}\n\n/* =============================================================================\n * Site footer: social links\n *\n * Icon links get a 40px tap target with a hairline ring drawn from the link's\n * own colour, so it follows the footer's text colour on any surface. Links\n * without an icon (unknown platforms) stay plain text.\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-footer-socials {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.75rem 1.25rem;\n}\n\n:where(.theme-scope) .rb-footer-social-link:has(> .rb-footer-social-icon) {\n  display: inline-grid;\n  place-items: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);\n  border-radius: 9999px;\n}\n\n:where(.theme-scope) .rb-footer-socials:has(.rb-footer-social-icon) {\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) .rb-footer-social-link:has(> .rb-footer-social-icon):hover {\n  border-color: currentColor;\n}\n\n:where(.theme-scope) .rb-footer-social-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n/* =============================================================================\n * Arrangement Looks: shared structure (issue 1575 Phase 1a).\n *\n * Proposed home: packages/theme-core/src/blocks-static/arrangements.css,\n * imported before ./skins/index.css. Style-neutral: no colours, no fonts.\n * Keyed only on the shared hooks (data-arrangement, data-knob-*, data-has-*,\n * data-photo-count, data-mode) and data-slot, so it passes the skin contract\n * selector rule too.\n *\n * Responsive rules are @media, like the rest of blocks-static: the\n * container-responsive generator rewrites them to @container for the\n * dashboard preview. Fluid sizes use cqi, which falls back to the viewport\n * when there is no size container (published) and follows the preview frame\n * when there is one. Rerun generate-container-responsive-css after changing.\n *\n * Skins set measurements through --rb-skin-* tokens (style data, G9); the\n * defaults here are the fallbacks.\n * ============================================================================= */\n\n/* ---------------------------------------------------------------- shared */\n.theme-scope [data-arrangement] [data-slot=\"frame\"] {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  column-gap: var(--rb-skin-gutter, 1.5rem);\n  row-gap: var(--rb-skin-stack-gap, 2rem);\n  align-items: center;\n  position: relative;\n}\n.theme-scope [data-arrangement] [data-slot=\"frame\"] > * { grid-column: 1 / -1; min-width: 0; }\n.theme-scope [data-arrangement] [data-slot=\"copy\"] {\n  display: grid;\n  gap: var(--rb-skin-copy-gap, 1.25rem);\n  justify-items: start;\n  align-content: center;\n  min-width: 0;\n  text-align: start;\n}\n.theme-scope [data-arrangement] [data-slot=\"headline\"],\n.theme-scope [data-arrangement] [data-slot=\"lede\"],\n.theme-scope [data-arrangement] [data-slot=\"caption\"],\n.theme-scope [data-arrangement] [data-slot=\"eyebrow\"] { margin: 0; }\n.theme-scope [data-arrangement] [data-slot=\"lede\"] { max-width: 36em; }\n.theme-scope [data-arrangement] [data-slot=\"headline\"] { text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }\n.theme-scope [data-arrangement] [data-slot=\"actions\"] { margin-top: 0.5rem; justify-content: flex-start; flex-wrap: wrap; }\n.theme-scope [data-arrangement] [data-slot=\"media\"] { position: relative; margin: 0; min-width: 0; }\n.theme-scope [data-arrangement] [data-slot=\"media\"] [data-slot=\"photo\"] { display: block; width: 100%; height: 100%; object-fit: cover; }\n.theme-scope [data-arrangement] [data-slot=\"sticker\"] { margin: 0; justify-self: start; max-width: 18rem; position: relative; z-index: 2; }\n\n/* Published, no photo: the empty frame (and the sticker riding on it) goes. */\n.theme-scope [data-arrangement][data-has-photo=\"false\"] [data-slot=\"media\"]:not(:has([data-placeholder-field])) { display: none; }\n\n/* ---------------------------------------------------- hero: split */\n.theme-scope [data-arrangement=\"split\"] [data-slot=\"frame\"] { grid-auto-flow: dense; }\n.theme-scope [data-arrangement=\"split\"] [data-slot=\"copy\"] { grid-column: 1 / 7; grid-row: 1; }\n.theme-scope [data-arrangement=\"split\"] [data-slot=\"media\"] {\n  grid-column: 7 / 13; grid-row: 1; align-self: stretch;\n  min-height: 0; /* Arrangement panes omit the legacy inline height. */\n  border-radius: 0;\n  overflow: visible;\n  aspect-ratio: 4 / 5;\n}\n.theme-scope [data-arrangement=\"split\"] [data-slot=\"media\"] [data-slot=\"photo\"] { position: absolute; inset: 0; }\n.theme-scope [data-arrangement=\"split\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 7 / 13; }\n.theme-scope [data-arrangement=\"split\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 7; }\n.theme-scope [data-arrangement=\"split\"][data-has-photo=\"false\"] [data-slot=\"copy\"] { grid-column: 1 / 10; }\n\n/* ---------------------------------------------- hero: headline-row */\n.theme-scope [data-arrangement=\"headline-row\"] [data-slot=\"frame\"] { align-items: start; }\n.theme-scope [data-arrangement=\"headline-row\"] [data-slot=\"headline\"] { grid-column: 1 / -1; margin-bottom: clamp(1rem, 3cqi, 3.5rem); }\n.theme-scope [data-arrangement=\"headline-row\"] [data-slot=\"copy\"] { grid-column: 1 / 6; align-content: start; }\n.theme-scope [data-arrangement=\"headline-row\"] [data-slot=\"media\"] { grid-column: 7 / 13; aspect-ratio: 3 / 2; }\n.theme-scope [data-arrangement=\"headline-row\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 8 / 13; grid-row: 3; }\n.theme-scope [data-arrangement=\"headline-row\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 7; grid-row: 3; }\n.theme-scope [data-arrangement=\"headline-row\"][data-has-photo=\"false\"] [data-slot=\"copy\"] { grid-column: 1 / 9; }\n\n/* ----------------------------------------- hero: copy-over-gallery */\n.theme-scope [data-arrangement=\"copy-over-gallery\"] [data-slot=\"copy\"] { grid-column: 1 / 10; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"] [data-slot=\"gallery\"] {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: repeat(var(--rb-gallery-count, 1), minmax(0, 1fr));\n  gap: var(--rb-skin-gutter, 1.5rem);\n  margin-top: clamp(1.5rem, 4cqi, 4rem);\n}\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] { --rb-gallery-count: 2; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] { --rb-gallery-count: 3; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 16 / 7; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-photo-count=\"2\"] [data-slot=\"media\"],\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-photo-count=\"3\"] [data-slot=\"media\"] { aspect-ratio: 4 / 3; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-has-photo=\"false\"] [data-slot=\"gallery\"]:not(:has([data-placeholder-field])) { display: none; }\n\n/* --------------------------------------------------- hero: classic */\n.theme-scope [data-arrangement=\"classic\"][data-has-photo=\"true\"] [data-slot=\"copy\"] { min-height: 0; }\n.theme-scope [data-arrangement=\"classic\"] [data-slot=\"copy\"] {\n  max-width: min(40rem, 100%);\n  margin-inline: 0 auto;\n  justify-items: start;\n  text-align: start;\n}\n\n/* ------------------------------------------------- hero: page-head */\n.theme-scope [data-arrangement=\"page-head\"] [data-slot=\"copy\"] { grid-column: 1 / 10; }\n.theme-scope [data-arrangement=\"page-head\"] [data-slot=\"facts\"] {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--rb-skin-gutter, 1.5rem);\n  margin: 0;\n}\n\n/* Copy-column sticker (the photo-off sticker, if the node is added). */\n.theme-scope [data-arrangement] [data-slot=\"copy\"] > [data-slot=\"sticker\"] { margin-top: 0.5rem; }\n\n/* ===================================================== FEATURE CARDS */\n.theme-scope [data-arrangement] [data-slot=\"head\"] { display: grid; gap: 0.75rem; max-width: 44rem; margin-inline: 0 auto; justify-items: start; text-align: start; }\n.theme-scope [data-arrangement] [data-slot=\"head\"] > [data-slot=\"heading\"],\n.theme-scope [data-arrangement] [data-slot=\"head\"] > [data-slot=\"intro\"] { text-align: start; }\n/* Items that sit on the section ground carry no box of their own. */\n:where(.theme-scope [data-arrangement] [data-slot=\"item\"][data-surface=\"section\"]) { border: 0; background: none; box-shadow: none; border-radius: 0; }\n.theme-scope [data-arrangement] [data-slot=\"item\"][data-surface=\"section\"] > [data-slot=\"item-body\"] { padding-inline: 0; }\n.theme-scope [data-arrangement] [data-slot=\"heading\"],\n.theme-scope [data-arrangement] [data-slot=\"intro\"],\n.theme-scope [data-arrangement] [data-slot=\"eyebrow\"] { margin: 0; }\n.theme-scope [data-arrangement][data-knob-show-photos=\"false\"] [data-slot=\"item-media\"] { display: none; }\n.theme-scope [data-arrangement] [data-slot=\"item-title\"],\n.theme-scope [data-arrangement] [data-slot=\"item-text\"] { margin: 0; }\n\n/* lead-support: the lead takes a whole row; the rest share the next one, whatever their count. */\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"items\"] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: clamp(2rem, 4cqi, 3.5rem) var(--rb-skin-gutter, 1.5rem);\n  counter-reset: rb-feature-card-number;\n}\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"items\"] > [data-slot=\"item\"] { flex: 1 1 0; min-width: min(100%, 15rem); }\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] {\n  flex: 1 1 100%;\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  align-items: stretch;\n  column-gap: 0;\n}\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { grid-column: 1 / 8; min-height: 22rem; }\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { grid-column: 8 / 13; align-self: center; }\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] [data-slot=\"item-media\"] [data-slot=\"photo\"] { height: 100%; aspect-ratio: auto; }\n.theme-scope [data-arrangement=\"lead-support\"][data-knob-show-photos=\"false\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"],\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"lead\"]:not(:has(> [data-slot=\"item-media\"])) > [data-slot=\"item-body\"] { grid-column: 1 / -1; }\n\n/* index: one column of ruled rows; title left, text and actions right. */\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"items\"],\n.theme-scope [data-arrangement=\"sequence\"] [data-slot=\"items\"] { list-style: none; margin: 0; padding: 0; counter-reset: rb-feature-card-number; }\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"item\"] {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n  column-gap: var(--rb-skin-gutter, 1.5rem);\n  row-gap: 0.5rem;\n  align-items: baseline;\n  counter-increment: rb-feature-card-number;\n}\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"item\"] > * { grid-column: 2; }\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"item\"] > [data-slot=\"item-title\"] { grid-column: 1; grid-row: 1 / span 3; }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr); }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > * { grid-column: 3; }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > [data-slot=\"item-title\"] { grid-column: 2; }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > [data-slot=\"numeral\"] { grid-column: 1; grid-row: 1 / span 3; }\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"numeral\"] { display: none; }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"numeral\"] { display: block; }\n\n/* sequence: the steps. Default structure is a row; skins turn it into a rail or a staircase. */\n.theme-scope [data-arrangement=\"sequence\"] [data-slot=\"items\"] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));\n  gap: var(--rb-skin-gutter, 1.5rem);\n}\n.theme-scope [data-arrangement=\"sequence\"] [data-slot=\"item\"] { display: grid; gap: 0.625rem; align-content: start; counter-increment: rb-feature-card-number; }\n.theme-scope [data-arrangement=\"sequence\"] [data-slot=\"numeral\"] { display: block; }\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"numeral\"]::before,\n.theme-scope [data-arrangement=\"sequence\"] [data-slot=\"numeral\"]::before { content: counter(rb-feature-card-number); }\n\n/* ===================================================== CALENDAR LIST */\n.theme-scope [data-arrangement][data-mode=\"list\"] [data-slot=\"list\"] { list-style: none; margin: 0; padding: 0; }\n.theme-scope :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: center; padding-block: 1.125rem; }\n.theme-scope [data-arrangement=\"ledger\"] [data-slot=\"row-continued\"] [data-slot=\"date\"] { visibility: hidden; }\n.theme-scope :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"date\"] { grid-column: 1; }\n.theme-scope :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"what\"] { grid-column: 2; }\n.theme-scope :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"action\"] { grid-column: 3; justify-self: end; }\n.theme-scope [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] { display: flex; flex-direction: column; line-height: 1.2; margin: 0; }\n.theme-scope [data-arrangement][data-mode=\"list\"] [data-slot=\"what\"] { min-width: 0; }\n.theme-scope [data-arrangement][data-mode=\"list\"] :is([data-slot=\"item-title\"], [data-slot=\"item-meta\"]) { margin: 0; }\n.theme-scope [data-arrangement=\"compact\"] [data-slot=\"panel\"] { margin-inline: 0 auto; }\n.theme-scope [data-arrangement=\"compact\"] [data-slot=\"row\"] { column-gap: 1rem; padding-block: 0.75rem; }\n.theme-scope [data-arrangement=\"compact\"] [data-slot=\"date\"] { flex-direction: row; gap: 0.375rem; align-items: baseline; }\n.theme-scope [data-arrangement=\"day-groups\"] [data-slot=\"group\"] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--rb-skin-gutter, 1.5rem); padding-block: 1.5rem 0.75rem; }\n.theme-scope [data-arrangement=\"day-groups\"] [data-slot=\"group-label\"] { grid-column: 1 / 4; display: flex; flex-direction: column; gap: 0.125rem; margin: 0; }\n.theme-scope [data-arrangement=\"day-groups\"] [data-slot=\"group\"] > * + * { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; }\n.theme-scope [data-arrangement=\"day-groups\"] [data-slot=\"row\"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: center; padding-block: 1rem; }\n.theme-scope [data-arrangement=\"day-groups\"] [data-slot=\"action\"] { grid-column: 2; }\n\n/* ============================================================ PHONE */\n/* Responsive rules qualify the root with :is(*, :scope): the preview container generator wraps them\n * in a scope rule, where a selector reaches the scope root only through :scope. */\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }\n  .theme-scope:is(*, :scope) [data-arrangement] [data-slot=\"frame\"] > *,\n  .theme-scope:is(*, :scope) [data-arrangement=\"split\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"split\"][data-knob-image-position=\"left\"] [data-slot=\"media\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"headline-row\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"headline-row\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / -1; grid-row: auto; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"split\"] [data-slot=\"media\"] { order: -1; aspect-ratio: 4 / 3; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"headline-row\"] [data-slot=\"headline\"] { margin-bottom: 0; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"] [data-slot=\"gallery\"] { grid-template-columns: minmax(0, 1fr); margin-top: 0.5rem; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 4 / 3; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"page-head\"] [data-slot=\"facts\"] { grid-template-columns: minmax(0, 1fr); }\n\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] { grid-template-columns: minmax(0, 1fr); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { grid-column: 1 / -1; min-height: 0; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { aspect-ratio: 3 / 2; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"] [data-slot=\"item\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] { grid-template-columns: minmax(0, 1fr); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"] [data-slot=\"item\"] > *,\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > * { grid-column: 1; grid-row: auto; }\n\n  .theme-scope:is(*, :scope) :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { grid-template-columns: 4rem minmax(0, 1fr); column-gap: 0.875rem; row-gap: 0.5rem; align-items: start; }\n  .theme-scope:is(*, :scope) :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"date\"] { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; }\n  .theme-scope:is(*, :scope) :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"what\"] { grid-column: 2; grid-row: 1; }\n  .theme-scope:is(*, :scope) :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"action\"] { grid-column: 2; grid-row: 2; justify-self: start; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"group\"] { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"group-label\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"group\"] > * + * { grid-column: 1 / -1; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"group-label\"] { flex-direction: row; gap: 0.625rem; align-items: baseline; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"row\"] { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"action\"] { grid-column: 1; justify-self: start; }\n}\n}\n\n/* Phase 1b: shared rail and quote structures */\n/* Responsive rules qualify the root with :is(*, :scope), like the Phase 1a rules above. */\n\n.theme-scope [data-arrangement] [data-slot=\"layout\"] {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  column-gap: var(--rb-skin-gutter, 1.5rem);\n  row-gap: 0;\n  align-items: start;\n}\n.theme-scope [data-arrangement] [data-slot=\"layout\"] > * { grid-column: span var(--rb-skin-main, 12) / -1; min-width: 0; }\n.theme-scope [data-arrangement] [data-slot=\"layout\"] > [data-slot=\"head\"] { grid-column: 1 / span var(--rb-skin-rail, 12); }\n\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"copy\"] { grid-column: 2; grid-row: 1; justify-items: center; text-align: center; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"2\"] [data-slot=\"gallery\"],\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] { display: contents; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 3 / 4; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(1),\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(1) { grid-column: 1; grid-row: 1; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(2),\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(2) { grid-column: 3; grid-row: 1; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(3) { display: none; }\n\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"frame\"],\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"0\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr); }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] { grid-column: 2; grid-row: 2; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 16 / 9; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-has-photo=\"false\"] [data-slot=\"gallery\"]:not(:has([data-placeholder-field])) { display: none; }\n\n.theme-scope [data-arrangement] [data-slot=\"items\"] > [data-slot=\"lead\"],\n.theme-scope [data-arrangement=\"lead-rest\"] [data-slot=\"item\"],\n.theme-scope [data-arrangement=\"columns\"] [data-slot=\"item\"],\n.theme-scope [data-arrangement=\"slides\"] [data-slot=\"item\"],\n.theme-scope [data-arrangement=\"track\"] [data-slot=\"item\"] { margin: 0; display: grid; gap: 16px; align-content: start; min-width: 0; }\n.theme-scope [data-arrangement] [data-slot=\"quote\"] { margin: 0; }\n.theme-scope [data-arrangement] [data-slot=\"quote\"] > * { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }\n.theme-scope [data-arrangement] [data-slot=\"attribution\"] { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }\n\n.theme-scope [data-arrangement=\"lead-rest\"] [data-slot=\"items\"] {\n  list-style: none; margin: 0; padding: 0;\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 64px var(--rb-skin-gutter, 1.5rem);\n}\n.theme-scope [data-arrangement=\"lead-rest\"] [data-slot=\"items\"] > [data-slot=\"lead\"] { grid-column: 1 / -1; }\n.theme-scope [data-arrangement=\"lead-rest\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n\n.theme-scope [data-arrangement=\"columns\"] [data-slot=\"items\"] {\n  list-style: none; margin: 0; padding: 0;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 40px var(--rb-skin-gutter, 1.5rem);\n}\n\n.theme-scope [data-arrangement=\"single\"] [data-slot=\"items\"] { list-style: none; margin: 0; padding: 0; max-width: 56rem; }\n\n.theme-scope :is([data-arrangement=\"slides\"], [data-arrangement=\"track\"]) [data-slot=\"items\"] { margin: 0; padding: 0; display: flex; }\n.theme-scope :is([data-arrangement=\"slides\"], [data-arrangement=\"track\"]) [data-slot=\"items\"] > * { flex: 0 0 calc(100% / var(--rb-carousel-slides-to-show, 1)); min-width: 0; padding-right: var(--rb-skin-gutter, 1.5rem); }\n.theme-scope [data-arrangement=\"slides\"] [data-slot=\"items\"] > [data-current=\"false\"] { visibility: hidden; }\n\n.theme-scope [data-arrangement] [data-slot=\"controls\"] { display: flex; align-items: center; gap: 14px; margin-top: 32px; }\n.theme-scope [data-arrangement] [data-slot=\"controls\"] [data-slot=\"control\"] { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer; }\n.theme-scope [data-arrangement] [data-slot=\"control\"]:disabled { cursor: default; }\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement] [data-slot=\"layout\"] { grid-template-columns: minmax(0, 1fr); row-gap: 0; }\n  .theme-scope:is(*, :scope) [data-arrangement] [data-slot=\"layout\"] > *,\n  .theme-scope:is(*, :scope) [data-arrangement] [data-slot=\"layout\"] > [data-slot=\"head\"] { grid-column: 1 / -1; }\n\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"frame\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"frame\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"0\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"copy\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] { grid-column: 1; grid-row: auto; }\n\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(2),\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(2) { display: none; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(1),\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(1) { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }\n\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-rest\"] [data-slot=\"items\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-rest\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); gap: 28px; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"track\"] [data-slot=\"items\"] > * { flex-basis: 84%; }\n}\n}\n\n.theme-scope [data-arrangement] .rb-container { max-width: var(--rb-skin-wrap, 1280px); padding-inline: clamp(20px, 4cqi, var(--rb-skin-margin, 40px)); }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"frame\"] { display: grid; gap: var(--rb-skin-gutter, 1.5rem); }\n\n.theme-scope [data-arrangement=\"month-grid\"] [data-slot=\"grid\"],\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"grid\"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }\n.theme-scope [data-arrangement=\"month-day\"][data-slot=\"frame\"],\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"frame\"] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--rb-skin-gutter, 1.5rem); }\n.theme-scope [data-arrangement=\"month-grid\"] [data-slot=\"date\"] { display: grid; align-content: start; min-height: 6rem; }\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"list\"] { display: grid; gap: 1rem; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"month-day\"][data-slot=\"frame\"], .theme-scope:is(*, :scope) [data-arrangement=\"month-day\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); }\n}\n}\n\n.theme-scope [data-arrangement] [data-slot=\"control\"] { color: var(--rb-surface-text-color, rgb(var(--tb-text))); background: transparent; border: 1px solid var(--rb-surface-mark-color, currentcolor); }\n.theme-scope [data-arrangement] [data-slot=\"control\"]:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; }\n.theme-scope [data-arrangement=\"month-grid\"] [data-slot=\"control\"],\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"control\"] { min-height: 44px; min-width: 0; width: 100%; }\n\n.theme-scope [data-arrangement=\"columns\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:only-child) { grid-template-columns: minmax(0, 1fr); }\n.theme-scope [data-arrangement=\"columns\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"columns\"] [data-slot=\"items\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"columns\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }\n}\n}\n\n.theme-scope :is([data-arrangement=\"month-grid\"], [data-arrangement=\"month-day\"]) [data-other-month=\"true\"] :is([data-slot=\"date-label\"], [data-slot=\"control\"]) { color: var(--rb-surface-supporting-color); }\n\n/* Named event parts share the ordinary item foregrounds and action language. */\n.theme-scope .rb-item-text-link { color: var(--rb-surface-link-color); text-decoration: underline; text-decoration-color: var(--rb-surface-mark-color); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }\n.theme-scope [data-arrangement] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 2rem; font-weight: 800; }\n.theme-scope [data-arrangement] [data-slot=\"item-text\"] { margin-block: 0.5rem 0; }\n.theme-scope [data-arrangement=\"grid\"] [data-slot=\"item-body\"] { padding: 1.5rem; }\n.theme-scope [data-arrangement=\"grid\"] [data-slot=\"item-actions\"] { margin-top: 1rem; }\n\n/* Item bodies fill the card so their actions share a bottom baseline. */\n.theme-scope [data-arrangement=\"grid\"] [data-slot=\"item\"] { display: flex; flex-direction: column; }\n.theme-scope [data-arrangement] :is([data-slot=\"item\"], [data-slot=\"lead\"]) > [data-slot=\"item-body\"] { display: flex; flex-direction: column; flex: 1; }\n.theme-scope [data-arrangement] [data-slot=\"item-body\"] > [data-slot=\"item-actions\"] { margin-top: auto; padding-top: 1rem; }\n/* A lone link-like action sits flush with the text; a filled button keeps its own box. The first\n * rule is the frozen legacy form (no arrangement around it), at its original specificity. */\n.theme-scope :is([data-slot=\"item-actions\"], [data-slot=\"action\"], .rb-feature-card .cta-row):not(:where([data-arrangement] *)) :is(a, button):only-child { padding: 0; min-height: 0; }\n.theme-scope [data-arrangement] :is([data-slot=\"item-actions\"], [data-slot=\"action\"], .cta-row) :is(a, button):only-child:not(.button-primary, .button-secondary) { padding: 0; min-height: 0; }\n.theme-scope [data-arrangement] [data-slot=\"more\"] { grid-column: 1 / -1; }\n/* Capacity decoration is attached only to the places phrase. */\n.theme-scope [data-arrangement] :is([data-availability=\"low\"], [data-availability=\"full\"]) [data-event-places]::before { content: \"\"; display: inline-block; width: 0.4em; height: 0.4em; margin-right: 0.45em; border-radius: 50%; vertical-align: 0.1em; }\n.theme-scope [data-arrangement] [data-availability=\"low\"] [data-event-places]::before { background: var(--rb-surface-mark-color); }\n.theme-scope [data-arrangement] [data-availability=\"full\"] [data-event-places]::before { background: var(--rb-surface-muted-color); }\n/* Compact date rails keep their own line at every width. */\n.theme-scope [data-arrangement=\"compact\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { grid-template-columns: max-content minmax(0, 1fr) auto; }\n.theme-scope [data-arrangement=\"compact\"] [data-slot=\"date\"] { flex-direction: row; flex-wrap: nowrap; white-space: nowrap; }\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"compact\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { grid-template-columns: minmax(0, 1fr) auto; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"compact\"] [data-slot=\"date\"] { grid-column: 1 / -1; grid-row: 1; flex-direction: row; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"compact\"] [data-slot=\"what\"] { grid-column: 1; grid-row: 2; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"compact\"] [data-slot=\"action\"] { grid-column: 2; grid-row: 2; }\n}\n}\n\n/* The live card lists use the same arrangements and semantic parts. */\n/* auto-fill keeps a short group (one or two offerings) at the width of a full row card. */\n.theme-scope [data-arrangement=\"cards\"] [data-card-list] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--rb-skin-gutter, 1.5rem); }\n.theme-scope [data-arrangement] [data-card-list-item] { min-width: 0; }\n.theme-scope [data-arrangement=\"cards\"] [data-card-list-item] { display: flex; flex-direction: column; }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"item-body\"] { display: flex; flex: 1; flex-direction: column; gap: var(--rb-skin-copy-gap, 0.75rem); padding: var(--rb-skin-gutter, 1.5rem); }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"photo\"] { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"facts\"] { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0; }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"facts\"] dt { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.75em; }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"facts\"] dd { margin: 0; }\n.theme-scope [data-arrangement] [data-slot=\"chips\"] { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n.theme-scope [data-arrangement] [data-slot=\"figure\"] { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }\n/* Scoped to card-list items so the event header (and each skin) sizes its own figure. */\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"figure\"] strong { font-size: clamp(2rem, 5cqi, 4rem); line-height: 1; }\n.theme-scope [data-arrangement] :is([data-slot=\"schedule\"], [data-slot=\"availability\"]) { margin: 0; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"item-actions\"] { margin-top: auto; }\n.theme-scope [data-arrangement=\"index\"] [data-card-list-item] > :is([data-slot=\"chips\"], [data-slot=\"figure\"], [data-slot=\"facts\"], [data-slot=\"schedule\"], [data-slot=\"availability\"]) { grid-column: 2; }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-card-list-item] > :is([data-slot=\"chips\"], [data-slot=\"figure\"], [data-slot=\"facts\"], [data-slot=\"schedule\"], [data-slot=\"availability\"]) { grid-column: 3; }\n.theme-scope [data-arrangement=\"plates\"] [data-card-list] { display: grid; gap: 3rem; }\n.theme-scope [data-arrangement=\"plates\"] [data-card-list-item] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--rb-skin-gutter, 1.5rem); align-items: center; }\n.theme-scope [data-arrangement=\"plates\"] [data-slot=\"item-media\"] { position: relative; isolation: isolate; margin: var(--rb-skin-plate, 1rem); }\n.theme-scope [data-arrangement=\"plates\"] [data-slot=\"item-media\"]::before { content: \"\"; position: absolute; inset: 0; translate: calc(-1 * var(--rb-skin-plate, 1rem)) var(--rb-skin-plate, 1rem); background: var(--rb-surface-mark-color); z-index: -1; }\n.theme-scope [data-arrangement=\"plates\"] [data-card-list-item]:not(:has([data-slot=\"item-media\"])) [data-slot=\"item-body\"],\n.theme-scope [data-arrangement=\"plates\"][data-knob-show-photos=\"false\"] [data-slot=\"item-body\"] { grid-column: 1 / -1; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"plates\"] [data-card-list-item] { grid-template-columns: minmax(0, 1fr); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"] [data-card-list-item] > *,\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-card-list-item] > * { grid-column: 1; }\n}\n}\n.theme-scope [data-arrangement=\"cards\"] [data-card-list] { counter-reset: rb-feature-card-number; }\n.theme-scope [data-arrangement=\"cards\"] [data-card-list-item] { counter-increment: rb-feature-card-number; }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"numeral\"] { display: none; }\n.theme-scope [data-arrangement][data-knob-card-marker=\"numbers\"] [data-card-list-item] [data-slot=\"numeral\"] { display: block; }\n.theme-scope [data-arrangement=\"cards\"][data-knob-card-marker=\"numbers\"] [data-card-list-item] [data-slot=\"numeral\"]::before { content: counter(rb-feature-card-number); }\n\n/* Live event header and quiet logistics panel. */\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"frame\"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5cqi, 5rem); align-items: center; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"copy\"] { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"headline\"] { font-size: clamp(2.5rem, 7cqi, 6rem); line-height: 1.05; overflow-wrap: anywhere; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"lede\"] { max-width: 56ch; font-size: clamp(1.125rem, 2cqi, 1.5rem); }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"figure\"] { display: flex; flex-direction: column; align-items: center; margin: 0; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"figure-value\"] { font-size: clamp(5rem, 18cqi, 16rem); line-height: 0.85; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"panel\"] { margin-top: 3rem; padding-top: 2rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n.theme-scope [data-arrangement=\"details-panel\"] [data-slot=\"panel\"] { padding: clamp(1.5rem, 4cqi, 3rem); border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 0); }\n.theme-scope [data-arrangement=\"details-panel\"] [data-slot=\"panel-heading\"] { margin-bottom: 1.5rem; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"event-header\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"event-header\"] [data-slot=\"figure\"] { align-items: flex-start; }\n}\n}\n\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"fact-label\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.875rem; margin-bottom: 0.375rem; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"fact-value\"] { margin: 0; font-weight: 600; }\n\n/* Grouped catalogues: the block heading sits on the same edge as its groups, and each group\n * heading reads one step below it. */\n.theme-scope [data-arrangement] [data-slot=\"stack\"] > :is([data-slot=\"heading\"], [data-slot=\"intro\"]) { text-align: var(--rb-skin-head-align, start); }\n.theme-scope [data-arrangement] [data-offering-source] > [data-slot=\"head\"] [data-slot=\"heading\"] { font-size: var(--rb-skin-group-heading-size, clamp(1.375rem, 2.2cqi, 1.875rem)); line-height: 1.15; }\n\n/* Event header: the header runs the full container (the block own reading width is for the\n * details below it), the copy takes the first column and the data-fed numeral stands beside it. */\n.theme-scope [data-arrangement=\"event-header\"] [data-block=\"event-details\"] { max-width: none; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"frame\"] > [data-slot=\"copy\"] { grid-column: 1; grid-row: 1; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"frame\"] > [data-slot=\"figure\"] { grid-column: 2; grid-row: 1; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"panel\"] { max-width: 56rem; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"copy\"] > :is([data-slot=\"lede\"], [data-slot=\"facts\"]) { max-width: 52rem; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"event-header\"] [data-slot=\"frame\"] > :is([data-slot=\"copy\"], [data-slot=\"figure\"]) { grid-column: 1; grid-row: auto; }\n}\n}\n\n/* Month frames place the grid and chosen day in separate columns. */\n.theme-scope [data-arrangement=\"month-day\"][data-slot=\"frame\"] > *,\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"frame\"] > * { grid-column: auto; }\n\n/* Independent live time and places parts stay in their own columns. */\n.theme-scope [data-arrangement=\"ledger\"][data-mode=\"list\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { grid-template-columns: var(--rb-event-date-width, 7rem) minmax(0, 1fr) minmax(6rem, auto) minmax(5rem, auto) auto; }\n.theme-scope [data-arrangement=\"ledger\"][data-mode=\"list\"] [data-slot=\"time\"] { grid-column: 3; }\n.theme-scope [data-arrangement=\"ledger\"][data-mode=\"list\"] [data-slot=\"places\"] { grid-column: 4; }\n.theme-scope [data-arrangement=\"ledger\"][data-mode=\"list\"] [data-slot=\"action\"] { grid-column: 5; }\n.theme-scope [data-arrangement=\"day-groups\"][data-mode=\"list\"] [data-slot=\"row\"] { grid-template-columns: minmax(0, 1fr) minmax(6rem, auto) minmax(5rem, auto) auto; }\n.theme-scope [data-arrangement=\"day-groups\"][data-mode=\"list\"] [data-slot=\"time\"] { grid-column: 2; }\n.theme-scope [data-arrangement=\"day-groups\"][data-mode=\"list\"] [data-slot=\"places\"] { grid-column: 3; }\n.theme-scope [data-arrangement=\"day-groups\"][data-mode=\"list\"] [data-slot=\"action\"] { grid-column: 4; }\n.theme-scope [data-arrangement][data-mode=\"list\"] :is([data-slot=\"time\"], [data-slot=\"places\"], [data-slot=\"price\"]) { margin: 0; }\n@container rb-site (max-width: 1023px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"ledger\"][data-mode=\"list\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.5rem 0.875rem; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"ledger\"][data-mode=\"list\"] :is([data-slot=\"time\"], [data-slot=\"places\"], [data-slot=\"action\"]) { grid-column: 2; grid-row: auto; justify-self: start; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"][data-mode=\"list\"] [data-slot=\"row\"] { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"][data-mode=\"list\"] :is([data-slot=\"time\"], [data-slot=\"places\"], [data-slot=\"action\"]) { grid-column: 1; grid-row: auto; justify-self: start; }\n}\n}\n\n/* Calendar numbers and marks have one geometry in both month Looks. */\n.theme-scope :is([data-arrangement=\"month-grid\"], [data-arrangement=\"month-day\"]) [data-slot=\"date\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; margin: 0; box-shadow: none; }\n.theme-scope :is([data-arrangement=\"month-grid\"], [data-arrangement=\"month-day\"]) [data-slot=\"date\"][data-today=\"true\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) { box-shadow: inset 0 0 0 1px var(--rb-surface-text-color); }\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"date\"][data-current=\"true\"] [data-slot=\"control\"] { font-weight: 800; text-decoration: underline; text-underline-offset: 0.25em; }\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"date\"] [data-slot=\"item-meta\"] { display: flex; gap: 0.25rem; justify-content: center; width: 2.75rem; min-height: 0.5rem; margin: 0.25rem 0 0; }\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"mark\"] { width: 5px; height: 5px; border-radius: 50%; background: var(--rb-surface-mark-color); }\n\n/* Empty arrangement lists stay on their section ground, without a legacy box. */\n.theme-scope [data-arrangement] [data-event-list-empty] { display: grid; justify-items: start; gap: 0.75rem; padding-block: 1.5rem; text-align: start; }\n.theme-scope [data-arrangement] [data-event-list-empty] p { margin: 0; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n.theme-scope [data-arrangement] [data-event-list-empty] [data-slot=\"action\"] { margin: 0; padding: 0; border: 0; background: none; color: var(--rb-surface-text-color); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }\n.theme-scope [data-arrangement] [data-event-list-empty] [data-slot=\"action\"] button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: inherit; cursor: pointer; }\n\n/* Bounded style skins (issue 1575, D14): one stylesheet per arrangement style, keyed on data-skin. */\n\n/* =============================================================================\n * Fulcrum skin (issue 1575 Phase 1a, D14).\n *\n * Calm and editorial: Newsreader does the talking at weight 400, hairlines\n * stand in for boxes, and the boldness sits in one place, the offset plate\n * photos are mounted on. Five marks only: the lintel (a short accent bar on a\n * heading edge), the start mark (a hairline with an accent segment where\n * reading begins), the offset plate, the hung numeral and sentence case\n * throughout.\n *\n * Bounded skin: only the shared hooks and slots, colours only from tokens and\n * resolved-surface variables, measurements from --rb-skin-* tokens. Surfaces\n * are never chosen here; the plate flips where the section ground is the\n * brand band, because a brand plate would vanish on it.\n * ============================================================================= */\n\n[data-skin=\"fulcrum\"] {\n  --tt-eyebrow: none;\n  --ls-eyebrow: 0;\n  --fw-eyebrow: 500;\n  --fs-eyebrow: 0.9375rem;\n}\n\n/* The plate: brand tone on page grounds; the deepest tone, offset up-left, on the brand band. */\n[data-skin=\"fulcrum\"] [data-arrangement] {\n  --fulcrum-plate: var(--rb-skin-plate, 16px);\n  --fulcrum-plate-x: var(--fulcrum-plate);\n  --fulcrum-plate-colour: rgb(var(--tb-secondary));\n}\n/* The start mark reads the mark colour of the slot it is drawn on, so it is defined there:\n * the surface variables are set on the section and its slots, not on the block root. */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot] {\n  --fulcrum-start: linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) 0 0 / var(--rb-skin-mark-length, 44px) var(--rb-skin-mark-weight, 2px) no-repeat;\n}\n[data-skin=\"fulcrum\"] [data-arrangement][data-surface=\"secondary\"],\n[data-skin=\"fulcrum\"] [data-arrangement] [data-surface=\"secondary\"] {\n  --fulcrum-plate-x: calc(var(--fulcrum-plate) * -1);\n  --fulcrum-plate-colour: rgb(var(--tb-primary-900));\n}\n\n/* ------------------------------------------------------------ section air */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: clamp(4rem, 8cqi, 7rem); }\n[data-skin=\"fulcrum\"] [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: clamp(3.5rem, 7cqi, 6.5rem); }\n\n/* ------------------------------------------------------------ type */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"headline\"],\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"heading\"],\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"item-title\"],\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"panel-heading\"],\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"group-label\"] {\n  font-family: var(--font-heading);\n  font-weight: 400;\n  color: var(--rb-surface-heading-color);\n  text-wrap: balance;\n}\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"headline\"] { line-height: 1.02; letter-spacing: -0.022em; }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"eyebrow\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"lede\"] {\n  font-size: clamp(1.0625rem, 1.4cqi, 1.25rem);\n  line-height: 1.6;\n  color: var(--rb-surface-muted-color, var(--rb-surface-text-color));\n  max-width: 34em;\n}\n\n/* Headline steps: length (short, medium, long) x headline size (Quieter, Standard). */\n[data-skin=\"fulcrum\"] [data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 5.2cqi, 4.75rem); }\n[data-skin=\"fulcrum\"] [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.5rem, 4.2cqi, 3.75rem); }\n[data-skin=\"fulcrum\"] [data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(2.25rem, 4.4cqi, 4rem); }\n[data-skin=\"fulcrum\"] [data-length=\"medium\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.125rem, 3.6cqi, 3.25rem); }\n[data-skin=\"fulcrum\"] [data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(2rem, 3cqi, 2.75rem); line-height: 1.1; }\n/* The big headline row runs a step louder. */\n[data-skin=\"fulcrum\"] [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3rem, 6.6cqi, 6rem); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 5.2cqi, 4.75rem); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"headline-row\"][data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(2.5rem, 5.2cqi, 4.75rem); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"headline-row\"] [data-slot=\"headline\"] { max-width: 13em; }\n\n/* The lintel: a short accent bar on the heading own edge. */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"copy\"]::before,\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"head\"]::before,\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"frame\"] > [data-slot=\"eyebrow\"]:first-child::before {\n  content: \"\";\n  display: block;\n  width: 36px;\n  height: var(--rb-skin-mark-weight, 2px);\n  background: var(--rb-surface-mark-color);\n}\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"frame\"] > [data-slot=\"eyebrow\"]:first-child::before { margin-bottom: 1rem; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"headline-row\"] [data-slot=\"copy\"]::before { content: none; }\n\n/* The start mark on a sheet: drawn over the sheet own top edge, since a sheet paints its own ground. */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"sticker\"]::before,\n[data-skin=\"fulcrum\"] [data-treat=\"panel\"] [data-slot=\"copy\"]::before,\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"panel\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--rb-skin-mark-length, 44px);\n  height: var(--rb-skin-mark-weight, 2px);\n  background: var(--rb-surface-mark-color);\n}\n\n/* The sticker: a sheet with a start mark, set in italic serif. */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"sticker\"] {\n  display: block;\n  padding: 0.875rem 1.125rem 0.875rem 1.25rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  font-family: var(--font-heading);\n  font-style: italic;\n  font-size: 1.3125rem;\n  line-height: 1.2;\n}\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"caption\"] {\n  font-family: var(--font-heading);\n  font-style: italic;\n  font-size: 1.1875rem;\n  color: var(--rb-surface-muted-color, var(--rb-surface-text-color));\n}\n\n/* ================================================================== HERO */\n/* split \u00B7 plate: the photo sits on an offset plate in the brand tone. */\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"] [data-slot=\"frame\"] { column-gap: var(--rb-skin-gutter, 28px); align-items: center; }\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"] [data-slot=\"copy\"] { grid-column: 1 / 7; }\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"] [data-slot=\"media\"] {\n  grid-column: 8 / 13;\n  aspect-ratio: 4 / 4.6;\n  margin: 0 var(--fulcrum-plate) var(--fulcrum-plate) 0;\n  box-shadow: var(--fulcrum-plate-x) var(--fulcrum-plate-x) 0 var(--fulcrum-plate-colour);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 6; }\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 7 / 13; }\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: -2.5rem; bottom: 3rem; max-width: 16rem; }\n\n/* headline-row \u00B7 quiet: the headline alone on top, then text left and a plated photo right. */\n[data-skin=\"fulcrum\"] [data-treat=\"quiet\"] [data-slot=\"frame\"] { row-gap: 2.5rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"quiet\"] [data-slot=\"copy\"] { grid-column: 1 / 6; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-top: 1.75rem; background: var(--fulcrum-start); }\n[data-skin=\"fulcrum\"] [data-treat=\"quiet\"] [data-slot=\"media\"] {\n  grid-column: 7 / 13;\n  margin-right: var(--fulcrum-plate);\n  box-shadow: var(--fulcrum-plate-x) var(--fulcrum-plate-x) 0 var(--fulcrum-plate-colour);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"quiet\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: -1.25rem; top: -1.75rem; }\n\n/* copy-over-gallery \u00B7 plates: the title, then the photos on plates in a row. */\n[data-skin=\"fulcrum\"] [data-treat=\"plates\"] [data-slot=\"copy\"] { grid-column: 1 / 9; }\n[data-skin=\"fulcrum\"] [data-treat=\"plates\"] [data-slot=\"gallery\"] { column-gap: calc(var(--rb-skin-gutter, 28px) + var(--fulcrum-plate)); margin-right: var(--fulcrum-plate); }\n[data-skin=\"fulcrum\"] [data-treat=\"plates\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { box-shadow: var(--fulcrum-plate-x) var(--fulcrum-plate-x) 0 var(--fulcrum-plate-colour); }\n[data-skin=\"fulcrum\"] [data-treat=\"plates\"] [data-slot=\"gallery\"] [data-slot=\"sticker\"] { position: absolute; left: 2rem; bottom: -1.5rem; }\n\n/* classic \u00B7 panel: the photo fills the section; the copy sits on a sheet low on the left. */\n[data-skin=\"fulcrum\"] [data-treat=\"panel\"] [data-slot=\"section\"] { --rb-section-pad-y: clamp(3rem, 7cqi, 5.5rem); padding-top: clamp(9rem, 16cqi, 12.5rem); }\n[data-skin=\"fulcrum\"] [data-treat=\"panel\"] [data-slot=\"copy\"] {\n  position: relative;\n  max-width: min(36rem, 100%);\n  padding: clamp(2rem, 3.4cqi, 3rem);\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"panel\"] [data-slot=\"headline\"] { font-size: clamp(2.25rem, 3.6cqi, 3.5rem); }\n[data-skin=\"fulcrum\"] [data-treat=\"panel\"][data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(1.875rem, 2.6cqi, 2.5rem); }\n\n/* page-head \u00B7 ruled: no photo; the title over a hairline that runs the measure. */\n[data-skin=\"fulcrum\"] [data-treat=\"ruled\"] [data-slot=\"copy\"] {\n  grid-column: 1 / -1;\n  padding-bottom: 2.5rem;\n  border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"ruled\"] [data-slot=\"copy\"] > * { max-width: 46rem; }\n\n/* ========================================================== FEATURE CARDS */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"head\"] { gap: 0.875rem; margin-bottom: clamp(2.5rem, 4.4cqi, 4rem); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"heading\"] { font-size: clamp(2rem, 3.4cqi, 3.125rem); line-height: 1.06; letter-spacing: -0.018em; }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"intro\"] { font-size: 1.1875rem; line-height: 1.6; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"item-title\"] { font-size: 1.625rem; line-height: 1.18; letter-spacing: -0.008em; }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"item-text\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"item-body\"] { display: grid; gap: 0.75rem; align-content: start; }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"icon\"] { color: var(--rb-surface-text-color); }\n\n/* cards \u00B7 cards: quiet sheets with a hairline edge. */\n[data-skin=\"fulcrum\"] [data-treat=\"cards\"] [data-slot=\"item\"] {\n  border: var(--rb-skin-rule, 1px) solid rgb(var(--tb-border));\n  border-radius: var(--rb-skin-radius, 3px);\n  overflow: hidden;\n  box-shadow: none;\n}\n[data-skin=\"fulcrum\"] [data-treat=\"cards\"] [data-slot=\"item-body\"] { padding: 1.75rem 1.75rem 1.625rem; }\n\n/* cards \u00B7 open: no boxes; each column starts with a start mark. */\n[data-skin=\"fulcrum\"] [data-treat=\"open\"] [data-slot=\"items\"] { row-gap: 3.5rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"open\"] [data-slot=\"item\"] { background: none; box-shadow: none; border: 0; }\n[data-skin=\"fulcrum\"] [data-treat=\"open\"] [data-slot=\"item-media\"] { margin-bottom: 1.375rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"open\"] [data-slot=\"item-body\"] {\n  padding: 1.5rem 0 0;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  background: var(--fulcrum-start);\n}\n\n/* lead-support \u00B7 pathway: a wide photo joined to the statement card, then open columns. */\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"lead\"] { border-radius: var(--rb-skin-radius, 3px); overflow: hidden; margin-bottom: clamp(2rem, 4cqi, 3rem); }\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { align-self: stretch; justify-content: center; padding: clamp(2rem, 4cqi, 3.5rem) clamp(1.75rem, 3.6cqi, 3.25rem); gap: 1.125rem; }\n/* The lead statement reads top to bottom with its action straight after the text, as in the mockup. */\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] > [data-slot=\"item-actions\"] { margin-top: 0.5rem; padding-top: 0; }\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"lead\"] [data-slot=\"item-title\"] { font-size: clamp(1.875rem, 2.8cqi, 2.375rem); line-height: 1.08; }\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"item\"] [data-slot=\"item-media\"] { margin-bottom: 1.25rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"item\"] > [data-slot=\"item-body\"] {\n  padding-top: 1.5rem;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  background: var(--fulcrum-start);\n}\n\n/* index \u00B7 register: a ruled list, the situation left and the answer right. */\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] [data-slot=\"items\"] { border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] [data-slot=\"item\"] { padding-block: 2rem 2.125rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] [data-slot=\"item-title\"] { font-size: 1.75rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] [data-slot=\"numeral\"] { font-family: var(--font-heading); font-weight: 300; font-size: 44px; line-height: 0.9; color: var(--rb-surface-mark-color); }\n\n/* sequence \u00B7 rail-steps: the heading in a rail, numbered steps ruled beside it. */\n/* The shared 12-column section layout takes the rail and main spans from these two tokens. */\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"],\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] { --rb-skin-rail: 4; --rb-skin-main: 8; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"head\"],\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] [data-slot=\"head\"] { margin-bottom: 0; padding-right: 2rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 1fr); gap: 0; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"item\"] {\n  grid-template-columns: 4.5rem minmax(0, 1fr);\n  column-gap: 1.5rem;\n  row-gap: 0.625rem;\n  padding-block: 2rem;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"item\"]:last-child { border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"item\"] > * { grid-column: 2; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"item\"] > [data-slot=\"numeral\"] {\n  grid-column: 1;\n  grid-row: 1 / span 4;\n  font-family: var(--font-heading);\n  font-weight: 300;\n  font-size: 56px;\n  line-height: 0.9;\n  color: var(--rb-surface-mark-color);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"item-media\"] { display: none; }\n\n/* ============================================================== CALENDAR */\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"day\"],\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"group-date\"] { font-family: var(--font-heading); font-weight: 400; font-size: 1.5625rem; line-height: 1.1; }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]),\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"time-length\"],\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"item-meta\"] { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"time-start\"] { font-weight: 500; font-variant-numeric: tabular-nums; }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"item-title\"] { font-size: 1.375rem; line-height: 1.2; }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"places\"],\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"places-low\"],\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"places-full\"] { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"places-low\"] { color: var(--rb-surface-text-color); font-weight: 500; }\n\n/* ledger \u00B7 card: the session ledger inside a quiet sheet. */\n/* The Look container role paints the sheet; rows inherit its ink. */\n[data-skin=\"fulcrum\"] [data-treat=\"card\"][data-mode=\"list\"] [data-slot=\"list\"] {\n  padding: 0.25rem 2.25rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"card\"] [data-slot=\"row\"],\n[data-skin=\"fulcrum\"] [data-treat=\"card\"] [data-slot=\"row-continued\"] { border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"card\"] [data-slot=\"list\"] > :first-child { border-top: 0; }\n\n/* day-groups \u00B7 rail: the day in the rail, sessions ruled beside it. */\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"][data-mode=\"list\"] [data-slot=\"list\"] { border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"group\"] { border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-block: 1.75rem 1rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"group-label\"] { font-size: 1.75rem; line-height: 1.15; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"group-day\"] { font-family: var(--font-heading); }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"group-date\"] { font-family: var(--font-body); font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"row\"] + [data-slot=\"row\"] { border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"row\"] { padding-block: 0.875rem; }\n\n/* compact: the next three in a sheet with a start mark. */\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"panel\"] {\n  position: relative;\n  max-width: 52rem;\n  padding: 1.5rem 1.75rem 1.25rem;\n  border: var(--rb-skin-rule, 1px) solid rgb(var(--tb-border));\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-family: var(--font-body); font-size: 1rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"item-title\"] { font-size: 1.3125rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"panel-heading\"] { font-style: italic; font-size: 1.375rem; line-height: 1.2; margin: 0 0 0.75rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"row\"] { padding-block: 0.875rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n\n/* month-grid \u00B7 sheet: the month in a quiet sheet, ruled between days. */\n[data-skin=\"fulcrum\"] [data-treat=\"sheet\"] [data-slot=\"grid\"] {\n  gap: 0;\n  padding: 1.5rem 1.5rem 1.25rem;\n  border: var(--rb-skin-rule, 1px) solid rgb(var(--tb-border));\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"sheet\"] [data-slot=\"group-label\"] { padding: 0 0.5rem 0.75rem; font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-treat=\"sheet\"] [data-slot=\"date\"] { gap: 0.25rem; min-height: 6.25rem; padding: 0.5rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] :is([data-treat=\"sheet\"], [data-treat=\"ruled\"]) :is([data-slot=\"control\"], [data-slot=\"date-label\"]) {\n  justify-self: start;\n  width: 2.25rem;\n  height: 2.25rem;\n  min-height: 0;\n  border: 0;\n  border-radius: var(--rb-skin-radius, 3px);\n  font-family: var(--font-heading);\n  font-size: 1.125rem;\n}\n\n[data-skin=\"fulcrum\"] [data-treat=\"sheet\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: block; font-size: 0.875rem; line-height: 1.3; color: var(--rb-surface-text-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"sheet\"] [data-slot=\"date\"] [data-slot=\"time\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-variant-numeric: tabular-nums; }\n\n/* month-day \u00B7 ruled: a small ruled month beside the chosen day. */\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"grid\"] { gap: 0; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"group-label\"] { padding: 0.625rem 0 0.375rem; text-align: center; font-size: 0.875rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"date\"] { justify-items: center; padding: 0.25rem 0; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"date\"] [data-slot=\"item-meta\"] { font-size: 0.75rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"panel\"] { padding-top: 1.375rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); background: var(--fulcrum-start); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"panel-heading\"] { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; margin: 0 0 0.75rem; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"panel\"] [data-slot=\"row\"] { display: block; padding-block: 0.75rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n\n/* ========================================================== TESTIMONIALS */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"quote\"] { font-family: var(--font-heading); color: var(--rb-surface-heading-color); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"attribution\"] { gap: 0.125rem 0.75rem; font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"] { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--rb-surface-text-color); }\n\n/* lead-rest, single and slides \u00B7 hung: the quote mark hangs outside the text edge. */\n[data-skin=\"fulcrum\"] [data-treat=\"hung\"] :is([data-slot=\"lead\"], [data-slot=\"item\"]) > [data-slot=\"quote\"] { position: relative; }\n[data-skin=\"fulcrum\"] [data-treat=\"hung\"] :is([data-slot=\"lead\"], [data-slot=\"item\"]) > [data-slot=\"quote\"]::before { content: \"\\201C\"; position: absolute; right: 100%; top: -0.05em; margin-right: 0.12em; font-size: 64px; line-height: 1; color: var(--rb-surface-mark-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"hung\"] [data-slot=\"lead\"],\n[data-skin=\"fulcrum\"] [data-arrangement=\"single\"][data-treat=\"hung\"] [data-slot=\"item\"],\n[data-skin=\"fulcrum\"] [data-arrangement=\"slides\"][data-treat=\"hung\"] [data-slot=\"item\"] { max-width: 55rem; gap: 1.5rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"hung\"] [data-slot=\"lead\"] > [data-slot=\"quote\"],\n[data-skin=\"fulcrum\"] [data-arrangement=\"single\"][data-treat=\"hung\"] [data-slot=\"quote\"],\n[data-skin=\"fulcrum\"] [data-arrangement=\"slides\"][data-treat=\"hung\"] [data-slot=\"quote\"] { font-size: clamp(1.625rem, 2.9cqi, 2.5rem); line-height: 1.24; letter-spacing: -0.012em; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] { row-gap: 4.5rem; column-gap: 3rem; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] > [data-slot=\"item\"] { padding-right: 2rem; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] > [data-slot=\"item\"] > [data-slot=\"quote\"] { font-size: 1.375rem; line-height: 1.4; }\n\n/* columns \u00B7 cases: quiet sheets with a start mark over the top edge. The scroll row matches any item in\n * the list, since the carousel wraps each card in a slide once hydrated. */\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"cases\"] [data-slot=\"item\"],\n[data-skin=\"fulcrum\"] [data-arrangement=\"track\"][data-treat=\"cards\"] [data-slot=\"items\"] [data-slot=\"item\"] {\n  position: relative;\n  padding: 2.25rem 2.125rem 2rem;\n  border: var(--rb-skin-rule, 1px) solid rgb(var(--tb-border));\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"cases\"] [data-slot=\"item\"]::before,\n[data-skin=\"fulcrum\"] [data-arrangement=\"track\"][data-treat=\"cards\"] [data-slot=\"items\"] [data-slot=\"item\"]::before {\n  content: \"\";\n  position: absolute;\n  left: -1px;\n  top: -1px;\n  width: 56px;\n  height: var(--rb-skin-mark-weight, 2px);\n  background: var(--rb-surface-mark-color);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"cases\"] [data-slot=\"quote\"] { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--rb-surface-text-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"cases\"] [data-slot=\"attribution\"] { margin-top: auto; padding-top: 1.125rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"track\"][data-treat=\"cards\"] [data-slot=\"quote\"] { font-size: 1.3125rem; line-height: 1.4; }\n\n/* columns \u00B7 ruled: the head in a rail, the quotes in one ruled column beside it. */\n[data-skin=\"fulcrum\"] [data-arrangement=\"columns\"][data-treat=\"ruled\"] { --rb-skin-rail: 4; --rb-skin-main: 8; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"columns\"][data-treat=\"ruled\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"columns\"][data-treat=\"ruled\"] [data-slot=\"item\"] { padding-block: 1.875rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); background: var(--fulcrum-start); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"columns\"][data-treat=\"ruled\"] [data-slot=\"quote\"] { font-size: 1.4375rem; line-height: 1.38; }\n\n/* The quote arrows: square-cornered, hairline, the label in the text colour. */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"controls\"] [data-slot=\"control\"] { border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 3px); color: var(--rb-surface-text-color); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"counter\"] { font-variant-numeric: tabular-nums; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* ================================================================= PHONE */\n/* Phone headline steps fit the longest word each length allows in a 358px column: short (12 characters,\n * measured on wide words like \"Commonwealth\") at 40px, medium (18) at 34px; long titles wrap. */\n/* Phone rules qualify the root with :is(*, :scope): the preview container generator wraps them in a\n * scope rule, where a selector reaches the scope root only through :scope. */\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement] { --fulcrum-plate: 10px; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: 3.5rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: 2.5rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-length=\"short\"] [data-slot=\"headline\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"short\"] [data-slot=\"headline\"] { font-size: 2.5rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: 2.25rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-length=\"medium\"] [data-slot=\"headline\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"medium\"] [data-slot=\"headline\"] { font-size: 2.125rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-length=\"long\"] [data-slot=\"headline\"] { font-size: 1.875rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat] [data-slot=\"copy\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat] [data-slot=\"media\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"plate\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"plate\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / -1; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"plate\"] [data-slot=\"media\"] { aspect-ratio: 4 / 3.4; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: auto; right: 0.75rem; top: auto; bottom: 0.75rem; margin-top: 0; max-width: min(18rem, calc(100% - 1.5rem)); }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"panel\"] [data-slot=\"section\"] { padding-top: 13rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"panel\"] [data-slot=\"copy\"] { padding: 1.75rem 1.375rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement] [data-slot=\"item-title\"] { font-size: 1.5rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"cards\"] [data-slot=\"item-body\"] { padding: 1.5rem 1.375rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"pathway\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { padding: 2rem 1.625rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"rail-steps\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"register\"] { --rb-skin-rail: 12; --rb-skin-main: 12; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"rail-steps\"] [data-slot=\"head\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"register\"] [data-slot=\"head\"] { margin-bottom: 2rem; padding-right: 0; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"rail-steps\"] [data-slot=\"item\"] { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"rail-steps\"] [data-slot=\"item\"] > [data-slot=\"numeral\"] { font-size: 40px; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"card\"][data-mode=\"list\"] [data-slot=\"list\"] { padding: 0 1.125rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"compact\"] [data-slot=\"panel\"] { padding: 1.5rem 1.25rem 1.25rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"hung\"] :is([data-slot=\"lead\"], [data-slot=\"item\"]) > [data-slot=\"quote\"]::before { position: static; display: block; height: 0.6em; margin: 0 0 -0.05em; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] { row-gap: 2.75rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] > [data-slot=\"item\"] { padding-right: 0; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement=\"columns\"][data-treat=\"ruled\"] { --rb-skin-rail: 12; --rb-skin-main: 12; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"sheet\"] [data-slot=\"grid\"] { padding: 1rem 0.75rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"sheet\"] [data-slot=\"date\"] { min-height: 3.25rem; padding: 0.25rem 0; border: 0; justify-items: center; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"sheet\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: none; }\n}\n}\n\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"attribution\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n[data-skin=\"fulcrum\"] [data-arrangement] :is([data-slot=\"lede\"], [data-slot=\"intro\"], [data-slot=\"item-meta\"], [data-slot=\"attribution\"]) { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* Event date parts are written as entered, with no text-transform. */\n[data-skin=\"fulcrum\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] { text-transform: none; }\n\n[data-skin=\"fulcrum\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] :is([data-slot=\"weekday\"], [data-slot=\"day\"], [data-slot=\"month\"]) { text-transform: none; }\n\n/* Catalogue facts are a quiet ruled register beside the plate. */\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"facts\"] { border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-block: 0.75rem; }\n[data-skin=\"fulcrum\"] [data-slot=\"chip\"] { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }\n[data-skin=\"fulcrum\"] [data-slot=\"figure-value\"] { font-family: var(--font-heading); }\n/* type-plates: landscape sheets two to a row, a small plated photo beside the title, the facts in\n * ruled columns, and a text link to finish. */\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: var(--rb-skin-gutter, 28px); }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] {\n  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);\n  align-items: start;\n  gap: 0 1.5rem;\n  padding: 1.25rem 1.5rem 1.25rem 1.25rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-media\"] { margin: 0 var(--fulcrum-plate-small) var(--fulcrum-plate-small) 0; --fulcrum-plate-small: 10px; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-media\"]::before { translate: var(--fulcrum-plate-small) var(--fulcrum-plate-small); background: var(--fulcrum-plate-colour); }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"photo\"] { aspect-ratio: 4 / 5; height: 100%; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-body\"] { padding: 0.25rem 0 0; gap: 0.625rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-title\"] { font-size: 1.5rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-text\"] { margin: 0; font-size: 0.9375rem; line-height: 1.55; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"facts\"] { display: flex; flex-wrap: nowrap; gap: 0; margin-top: 0.375rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"facts\"] > * { flex: 1 1 auto; padding: 0 0.75rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"facts\"] > :first-child { padding-left: 0; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"facts\"] > * + * { border-left: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"facts\"] [data-slot=\"fact-value\"] { font-family: var(--font-heading); font-size: 1.1875rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] :is([data-slot=\"schedule\"], [data-slot=\"availability\"]) { font-size: 0.875rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-actions\"] { margin-top: auto; padding-top: 0.5rem; }\n\n/* A clear heading over a ruled at-a-glance strip. */\n[data-skin=\"fulcrum\"] [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-top: 1.5rem; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"event-header\"] [data-slot=\"headline\"] { font-weight: 400; letter-spacing: -0.04em; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"event-header\"] [data-slot=\"figure-value\"] { font-weight: 300; font-size: clamp(6rem, 18cqi, 16rem); }\n\n/* Ruled rows and next three: the weekday leads in the serif, the date sits small beneath it,\n * as in the mockup ledger (\"Thu\" over \"1 Oct\"). */\n[data-skin=\"fulcrum\"] [data-arrangement]:is([data-treat=\"card\"], [data-treat=\"compact\"])[data-mode=\"list\"] [data-slot=\"date\"] { display: flex; flex-flow: row wrap; align-content: start; column-gap: 0.3em; row-gap: 0.125rem; }\n[data-skin=\"fulcrum\"] [data-arrangement]:is([data-treat=\"card\"], [data-treat=\"compact\"])[data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"weekday\"] { flex-basis: 100%; font-family: var(--font-heading); font-size: 1.5625rem; line-height: 1.1; color: var(--rb-surface-heading-color); }\n[data-skin=\"fulcrum\"] [data-arrangement]:is([data-treat=\"card\"], [data-treat=\"compact\"])[data-mode=\"list\"] [data-slot=\"date\"] :is([data-slot=\"day\"], [data-slot=\"month\"]) { font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; line-height: 1.3; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"compact\"][data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"weekday\"] { font-size: 1.25rem; }\n/* The compact panel carries the heading inside its sheet, so the section head has no lintel of its own. */\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"compact\"] [data-slot=\"head\"]::before { content: none; }\n\n/* Hung quotes: the smaller quotes beside the lead each start on a hairline with a start mark. */\n[data-skin=\"fulcrum\"] [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] > [data-slot=\"item\"] { padding-top: 1.5rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); background: var(--fulcrum-start); }\n\n/* Live next dates use the same card parts in every arrangement. */\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"dates\"] { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; padding-block: 0.625rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); font-variant-numeric: tabular-nums; }\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"date-places\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.875rem; }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"navigation\"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; padding-block: 0.875rem; margin-bottom: 1rem; border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { font: inherit; color: var(--rb-surface-text-color); padding: 0.5rem 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 0); }\n\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"time\"] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-surface-text-color); }\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { font-family: var(--font-heading); font-size: 1.125rem; }\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"date-places\"] { font-family: var(--font-body); }\n\n/* =============================================================================\n * Poster skin (issue 1575 Phase 1a, D14).\n *\n * Loud but controlled: very large condensed type, flat colour blocks, and hard\n * offset shadows on anything you can press or pick. One fact is set huge (a\n * date, a time, a step number); one sticker carries the news. Photos are\n * graphic material: greyscale, multiplied over a palette colour.\n *\n * Bounded skin: only the shared hooks and slots, colours only from tokens and\n * resolved-surface variables, measurements from --rb-skin-* tokens. Boxes\n * drawn around items that sit on the section ground are edges and shadows\n * only; they never paint a ground of their own.\n * ============================================================================= */\n\n[data-skin=\"poster\"] {\n  --tt-eyebrow: none;\n  --ls-eyebrow: 0;\n  --fw-eyebrow: 700;\n  --fs-eyebrow: 0.9375rem;\n}\n\n/* The hard shadow: the ground ink on light grounds, the deep brand tone on the brand block, the brand on the inverse slab. */\n[data-skin=\"poster\"] [data-arrangement] > [data-slot=\"section\"] {\n  --poster-shadow: var(--rb-surface-text-color);\n  --poster-rule: var(--rb-skin-rule, 3px) solid var(--rb-surface-text-color);\n  --poster-edge: 2px solid var(--rb-surface-text-color);\n  --poster-lift: var(--rb-skin-shadow-offset, 8px);\n  --rb-section-pad-y: clamp(4rem, 8cqi, 7rem);\n}\n[data-skin=\"poster\"] [data-arrangement][data-surface=\"primary\"] > [data-slot=\"section\"] { --poster-shadow: rgb(var(--tb-secondary)); }\n[data-skin=\"poster\"] [data-arrangement][data-surface=\"text\"] > [data-slot=\"section\"] { --poster-shadow: rgb(var(--tb-primary)); }\n[data-skin=\"poster\"] [data-arrangement][data-length] > [data-slot=\"section\"] { --rb-section-pad-y: clamp(2.5rem, 5cqi, 4.5rem); overflow-x: clip; }\n\n/* ------------------------------------------------------------ type */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"headline\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"heading\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-title\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"panel-heading\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"group-label\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"numeral\"],\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"time-start\"] {\n  font-family: var(--font-heading);\n  font-stretch: var(--font-stretch-heading, normal);\n  font-weight: 900;\n  letter-spacing: -0.005em;\n  color: var(--rb-surface-heading-color);\n  font-variant-numeric: lining-nums;\n}\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"headline\"] { line-height: 0.86; text-wrap: balance; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"eyebrow\"] { color: var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"lede\"] { font-size: clamp(1.125rem, 1.5cqi, 1.3125rem); line-height: 1.45; max-width: 36em; }\n\n/* Headline steps: length (short, medium, long) x headline size (Quieter, Standard, Louder). */\n[data-skin=\"poster\"] [data-length=\"short\"][data-knob-headline=\"display\"] [data-slot=\"headline\"] { font-size: clamp(4rem, 9cqi, 8.75rem); }\n[data-skin=\"poster\"] [data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3.5rem, 7cqi, 6.5rem); }\n[data-skin=\"poster\"] [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(3rem, 5.4cqi, 5rem); }\n[data-skin=\"poster\"] [data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3rem, 5.6cqi, 5.25rem); }\n[data-skin=\"poster\"] [data-length=\"medium\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 4.6cqi, 4.25rem); }\n[data-skin=\"poster\"] [data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(2.5rem, 3.6cqi, 3.5rem); line-height: 0.92; }\n/* The poster headline: one line across the measure. */\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"display\"] [data-slot=\"headline\"] { font-size: clamp(4.5rem, 14cqi, 13.75rem); }\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(4rem, 10.5cqi, 10rem); }\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(3.5rem, 7.5cqi, 7rem); }\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3.5rem, 8cqi, 7.5rem); }\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"medium\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(3rem, 6cqi, 5.5rem); }\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 4.6cqi, 4.25rem); }\n\n/* The sticker: the one piece of news, tilted, with its own edge and shadow. */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"sticker\"] {\n  display: inline-block;\n  padding: 0.6875rem 1rem 0.625rem;\n  border: var(--poster-edge);\n  box-shadow: 4px 4px 0 var(--poster-shadow);\n  transform: rotate(var(--rb-skin-rotation, -4deg));\n  font-family: var(--font-heading);\n  font-weight: 900;\n  font-size: 1.375rem;\n  line-height: 1;\n}\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"caption\"] { font-weight: 700; font-size: 0.9375rem; }\n\n/* Working display registers from the Archivo mockup. */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-title\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"panel-heading\"] { font-stretch: 75%; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"sticker\"] { font-stretch: 70%; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"actions\"] > *,\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"action\"] > * { font-stretch: 85%; }\n\n/* Duotone: photos are greyscale with a palette colour multiplied over them (the pop colour in the hero, the brand elsewhere). */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"media\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-media\"] { position: relative; --poster-tone: rgb(var(--tb-primary)); }\n\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"photo\"] { filter: grayscale(1) contrast(1.18) brightness(1.04); }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"media\"]:has([data-slot=\"photo\"])::after,\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-media\"]:has([data-slot=\"photo\"])::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n  background: var(--poster-tone);\n  mix-blend-mode: multiply;\n  clip-path: var(--poster-cut, none);\n}\n\n[data-skin=\"poster\"] [data-arrangement][data-length] [data-slot=\"media\"]:has([data-slot=\"photo\"])::after,\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"lead\"] > [data-slot=\"item-media\"]:has([data-slot=\"photo\"])::after { background: rgb(var(--tb-accent)); }\n\n/* ================================================================== HERO */\n/* headline-row \u00B7 slab: one huge line, copy left, the photo cut into a slab that bleeds off the right edge. */\n[data-skin=\"poster\"] [data-treat=\"slab\"] [data-slot=\"frame\"] { row-gap: 0; align-items: stretch; }\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-arrangement=\"headline-row\"] [data-slot=\"headline\"] { margin: 0 0 2.75rem -0.04em; max-width: none; }\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-arrangement=\"headline-row\"] [data-slot=\"copy\"] { grid-column: 1 / 6; align-content: start; padding-bottom: 2.5rem; }\n/* The cut is applied to the photo and its tone, never the frame, so a sticker can ride over the slanted edge. */\n[data-skin=\"poster\"] [data-treat=\"slab\"] [data-slot=\"media\"] {\n  --poster-cut: polygon(14% 0, 100% 0, 100% 100%, 0 100%);\n  grid-column: 7 / -1;\n  min-height: 28rem;\n  aspect-ratio: auto;\n  margin-right: calc((100cqi - min(100cqi, 80rem)) / -2 - 1.5rem);\n}\n[data-skin=\"poster\"] [data-treat=\"slab\"] [data-slot=\"media\"] [data-slot=\"photo\"] { position: absolute; inset: 0; clip-path: var(--poster-cut); }\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-arrangement=\"split\"] [data-slot=\"copy\"] { grid-column: 1 / 7; padding-block: 1rem; }\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-arrangement=\"split\"] [data-slot=\"media\"] { min-height: 35rem; }\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] {\n  --poster-cut: polygon(0 0, 100% 0, 86% 100%, 0 100%);\n  grid-column: 1 / 6;\n  margin-right: 0;\n  margin-left: calc((100cqi - min(100cqi, 80rem)) / -2 - 1.5rem);\n}\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-knob-image-position=\"left\"][data-arrangement=\"headline-row\"] [data-slot=\"copy\"],\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-knob-image-position=\"left\"][data-arrangement=\"split\"] [data-slot=\"copy\"] { grid-column: 7 / -1; }\n[data-skin=\"poster\"] [data-treat=\"slab\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: 3%; top: 42%; }\n\n/* copy-over-gallery \u00B7 strip: the title, then the photos as one edge-to-edge strip between heavy rules. */\n[data-skin=\"poster\"] [data-treat=\"strip\"] [data-slot=\"copy\"] { grid-column: 1 / 10; }\n[data-skin=\"poster\"] [data-treat=\"strip\"] [data-slot=\"gallery\"] {\n  gap: 0;\n  margin-inline: calc((100cqi - min(100cqi, 80rem)) / -2 - 1.5rem);\n  border-block: var(--poster-rule);\n}\n[data-skin=\"poster\"] [data-treat=\"strip\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: auto; height: clamp(16rem, 30cqi, 26rem); }\n[data-skin=\"poster\"] [data-treat=\"strip\"] [data-slot=\"gallery\"] [data-slot=\"photo\"] { position: absolute; inset: 0; }\n[data-skin=\"poster\"] [data-treat=\"strip\"] [data-slot=\"gallery\"] [data-slot=\"sticker\"] { position: absolute; top: -1.75rem; right: 12%; }\n\n/* classic \u00B7 band: the photo fills the section; the copy sits on a block that runs to the edge. */\n[data-skin=\"poster\"] [data-treat=\"band\"] > [data-slot=\"section\"] { padding-top: clamp(14rem, 26cqi, 22rem); }\n[data-skin=\"poster\"] [data-treat=\"band\"] [data-slot=\"copy\"] {\n  max-width: min(46rem, 100%);\n  padding: clamp(1.75rem, 3cqi, 2.75rem) clamp(1.75rem, 3cqi, 2.75rem) clamp(2rem, 3.4cqi, 3rem);\n  border: var(--poster-edge);\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n}\n\n/* page-head \u00B7 numeral: no photo; with no facts to set huge, the title takes the measure over a heavy rule. */\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"copy\"] {\n  grid-column: 1 / -1;\n  padding-bottom: 2.5rem;\n  border-bottom: var(--poster-rule);\n}\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"copy\"] > [data-slot=\"lede\"] { max-width: 40em; }\n\n/* ========================================================= SECTION HEADS */\n/* Heading left, intro right, on a shared baseline. */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"head\"] {\n  max-width: none;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  column-gap: var(--rb-skin-gutter, 24px);\n  align-items: end;\n  margin-bottom: clamp(2.25rem, 4cqi, 3.5rem);\n}\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"head\"] > [data-slot=\"eyebrow\"] { grid-column: 1 / -1; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"head\"] > [data-slot=\"intro\"] { grid-column: 2; padding-bottom: 0.375rem; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"heading\"] { font-size: clamp(3rem, 6.2cqi, 6rem); line-height: 0.9; text-wrap: balance; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"intro\"] { font-size: clamp(1.0625rem, 1.4cqi, 1.25rem); line-height: 1.45; }\n\n/* ========================================================== FEATURE CARDS */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-title\"] { font-size: clamp(1.875rem, 2.6cqi, 2.5rem); line-height: 0.92; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-body\"] { display: grid; gap: 0.75rem; align-content: start; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"numeral\"] { font-size: 96px; line-height: 0.8; color: var(--rb-surface-mark-color); }\n\n/* cards \u00B7 punchy: boxed cards with a hard shadow. */\n[data-skin=\"poster\"] [data-treat=\"punchy\"] [data-slot=\"items\"] { gap: 2rem; }\n[data-skin=\"poster\"] [data-treat=\"punchy\"] [data-slot=\"item\"],\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"items\"] > [data-slot=\"item\"] {\n  border: var(--poster-edge);\n  border-radius: 0;\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n}\n[data-skin=\"poster\"] [data-treat=\"punchy\"] [data-slot=\"item-media\"],\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"items\"] > [data-slot=\"item\"] > [data-slot=\"item-media\"] { border-bottom: 2px solid var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-treat=\"punchy\"] [data-slot=\"item-body\"],\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"items\"] > [data-slot=\"item\"] > [data-slot=\"item-body\"] { padding: 1.5rem 1.625rem; }\n\n/* cards \u00B7 open-heavy: no boxes and no photos; an 8px rule tops each column, and the number is the visual. */\n[data-skin=\"poster\"] [data-treat=\"open-heavy\"] [data-slot=\"item-media\"] { display: none; }\n[data-skin=\"poster\"] [data-treat=\"open-heavy\"] [data-slot=\"item-body\"] { padding-top: 1.125rem; border-top: 8px solid var(--rb-surface-text-color); gap: 0.875rem; }\n[data-skin=\"poster\"] [data-treat=\"open-heavy\"] [data-slot=\"numeral\"] { font-size: clamp(96px, 9cqi, 150px); }\n\n/* lead-support \u00B7 duotone-lead: the lead on the brand block with a slanted photo, the rest as boxed cards. */\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] {\n  border: var(--poster-edge);\n  box-shadow: 10px 10px 0 var(--poster-shadow);\n  margin-bottom: 1rem;\n}\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { min-height: 26rem; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { align-self: stretch; align-content: start; padding: 2.5rem 2.5rem 2.25rem 0.75rem; gap: 1rem; }\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] [data-slot=\"item-title\"] { font-size: clamp(2.75rem, 4.6cqi, 4.5rem); }\n\n/* index \u00B7 loud: heavy rules between rows and display titles. */\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"items\"] { border-bottom: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"item\"] { padding-block: 1.375rem; border-top: var(--poster-rule); align-items: center; }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"item-title\"] { font-size: clamp(2.125rem, 3.4cqi, 3rem); }\n\n/* sequence \u00B7 stairs: boxed steps that climb from left to right. */\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"items\"] { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 1.25rem; align-items: end; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"items\"] > [data-slot=\"item\"] {\n  padding: 1.25rem 1.25rem 1.375rem;\n  border: var(--poster-edge);\n  box-shadow: 6px 6px 0 var(--poster-shadow);\n  align-content: start;\n}\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(1) { min-height: 18rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(2) { min-height: 21rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(3) { min-height: 24rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(4) { min-height: 27rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(5) { min-height: 30rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(6) { min-height: 33rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item-title\"] { font-size: 1.75rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item-media\"] { display: none; }\n\n/* ============================================================== CALENDAR */\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"item-title\"] { font-size: 1.625rem; line-height: 1; }\n[data-skin=\"poster\"] [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]),\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"group-date\"] { font-weight: 700; font-size: 0.9375rem; line-height: 1.15; }\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"time-length\"],\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"item-meta\"] { font-size: 0.9375rem; }\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"places\"],\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"places-low\"],\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"places-full\"] { font-size: 0.875rem; font-weight: 700; }\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"places-low\"],\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"places-full\"] { justify-self: start; padding: 0.375rem 0.6875rem 0.3125rem; border: var(--poster-edge); border-radius: 99px; }\n\n/* ledger \u00B7 loud: a heavy rule starts each day; the date and time are set huge. */\n[data-skin=\"poster\"] [data-treat=\"loud\"][data-mode=\"list\"] [data-slot=\"list\"] { border-bottom: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"row\"],\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"row-continued\"] { grid-template-columns: 10.5rem minmax(0, 1fr) auto; column-gap: 2rem; padding-block: 1.25rem; }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"row\"] { border-top: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"row-continued\"] { border-top: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"date\"] { flex-direction: row; align-items: flex-end; gap: 0.75rem; }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 72px; line-height: 0.8; color: var(--rb-surface-mark-color); }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"item-title\"] { font-size: 1.625rem; line-height: 1.05; }\n[data-skin=\"poster\"] [data-treat=\"loud\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]) { width: 3.2em; }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"time-start\"] { font-size: 46px; line-height: 1; }\n\n/* day-groups \u00B7 numeral: the day set big in the rail. */\n[data-skin=\"poster\"] [data-treat=\"numeral\"][data-mode=\"list\"] [data-slot=\"list\"] { border-bottom: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"group\"] { border-top: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"group-label\"] { font-size: 52px; line-height: 0.9; }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"group-day\"] { font-family: var(--font-heading); font-stretch: var(--font-stretch-heading, normal); }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"group-date\"] { font-family: var(--font-body); }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"row\"] + [data-slot=\"row\"] { border-top: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"time-start\"] { font-size: 34px; line-height: 1; }\n\n/* grid \u00B7 tiles: boxed session cards topped by a date tile in the pop colour. */\n[data-skin=\"poster\"] [data-treat=\"tiles\"] [data-slot=\"list\"] { gap: 2rem; }\n[data-skin=\"poster\"] [data-treat=\"tiles\"] [data-slot=\"item\"] {\n  border: var(--poster-edge);\n  border-radius: 0;\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n  overflow: visible;\n}\n[data-skin=\"poster\"] [data-treat=\"tiles\"] [data-slot=\"date\"] {\n  flex-direction: row;\n  align-items: flex-end;\n  gap: 0.625rem;\n  padding: 1.25rem 1.5rem 1rem;\n  border-bottom: var(--poster-edge);\n}\n[data-skin=\"poster\"] [data-treat=\"tiles\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 96px; line-height: 0.8; color: var(--rb-surface-heading-color); }\n[data-skin=\"poster\"] [data-treat=\"tiles\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]) { font-weight: 800; font-size: 1.125rem; }\n/* The tile reads like the mockup: the big day first, month and weekday stacked beside it. */\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"tiles\"] [data-slot=\"item\"] [data-slot=\"date\"] { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: end; justify-items: start; column-gap: 0.625rem; row-gap: 0; text-align: start; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"tiles\"] [data-slot=\"item\"] [data-slot=\"date\"] [data-slot=\"day\"] { grid-column: 1; grid-row: 1 / span 2; font-size: 64px; line-height: 0.85; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"tiles\"] [data-slot=\"item\"] [data-slot=\"date\"] [data-slot=\"month\"] { grid-column: 2; grid-row: 1; align-self: end; line-height: 1.1; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"tiles\"] [data-slot=\"item\"] [data-slot=\"date\"] [data-slot=\"weekday\"] { grid-column: 2; grid-row: 2; align-self: start; line-height: 1.1; }\n\n/* compact: the next three in a boxed panel with heavy rules. */\n[data-skin=\"poster\"] [data-treat=\"compact\"] [data-slot=\"panel\"] {\n  max-width: 52rem;\n  padding: 1.5rem 1.75rem 1.25rem;\n  border: var(--poster-edge);\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n}\n[data-skin=\"poster\"] [data-treat=\"compact\"] [data-slot=\"panel-heading\"] { font-size: 36px; line-height: 0.9; margin: 0 0 0.75rem; }\n[data-skin=\"poster\"] [data-treat=\"compact\"] [data-slot=\"row\"] { border-top: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"compact\"] [data-slot=\"time-start\"] { font-size: 30px; }\n[data-skin=\"poster\"] [data-treat=\"compact\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--rb-surface-text-color); }\n\n/* month-grid \u00B7 heavy: a heavy rule over the week names, soft hairlines between days, today ringed hard. */\n[data-skin=\"poster\"] [data-treat=\"heavy\"] [data-slot=\"grid\"] { gap: 0; border-top: var(--poster-rule); border-left: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"poster\"] [data-treat=\"heavy\"] [data-slot=\"group-label\"] { padding: 0.625rem 0.5rem; font-weight: 800; font-size: 0.9375rem; border-right: 1px solid var(--rb-surface-line-color); border-bottom: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"heavy\"] [data-slot=\"date\"] { gap: 0.25rem; min-height: 6.5rem; padding: 0.5rem; border-right: 1px solid var(--rb-surface-line-color); border-bottom: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"poster\"] [data-treat=\"heavy\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) {\n  justify-self: start;\n  width: auto;\n  min-width: 2.5rem;\n  height: 2.5rem;\n  min-height: 0;\n  padding: 0 0.25rem;\n  border: 0;\n  border-radius: 0;\n  font-family: var(--font-heading);\n  font-stretch: 62%;\n  font-weight: 900;\n  font-size: 30px;\n  line-height: 0.9;\n}\n\n[data-skin=\"poster\"] [data-treat=\"heavy\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: block; font-size: 0.875rem; line-height: 1.25; font-weight: 600; color: var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-treat=\"heavy\"] [data-slot=\"date\"] [data-slot=\"time\"] { font-stretch: 75%; font-weight: 900; }\n\n/* ========================================================== TESTIMONIALS */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"quote\"] { font-weight: 500; color: var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"attribution\"] { gap: 0.125rem 0.625rem; font-size: 0.96875rem; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"] { font-family: var(--font-body); font-stretch: 85%; font-weight: 800; font-size: 0.96875rem; line-height: 1.3; letter-spacing: 0; color: var(--rb-surface-text-color); }\n\n/* lead-rest \u00B7 tilt: the lead quote huge and condensed on the left, the rest as boxed cards\n * stacked on the right, tilted a little either way. */\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 6cqi, 5rem); row-gap: 2.25rem; align-items: start; }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"lead\"] { grid-column: 1; grid-row: 1 / span 6; }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"item\"] { grid-column: 2; }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"]:not(:has(> [data-slot=\"item\"])) { grid-template-columns: minmax(0, 1fr); }\n[data-skin=\"poster\"] :is([data-treat=\"tilt\"], [data-treat=\"display\"]) [data-slot=\"lead\"] > [data-slot=\"quote\"],\n[data-skin=\"poster\"] [data-arrangement=\"single\"][data-treat=\"display\"] [data-slot=\"quote\"],\n[data-skin=\"poster\"] [data-arrangement=\"slides\"][data-treat=\"display\"] [data-slot=\"quote\"] {\n  font-family: var(--font-heading);\n  font-stretch: 62%;\n  font-weight: 900;\n  font-size: clamp(2.5rem, 4.8cqi, 4.5rem);\n  line-height: 0.94;\n  color: var(--rb-surface-heading-color);\n}\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"item\"] {\n  padding: 1.5rem 1.5rem 1.25rem;\n  border: var(--poster-edge);\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n}\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"]:not([data-knob-tilt=\"false\"]) [data-slot=\"items\"] > [data-slot=\"item\"]:nth-child(2) { transform: rotate(calc(var(--rb-skin-rotation, -4deg) * 0.4)); }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"]:not([data-knob-tilt=\"false\"]) [data-slot=\"items\"] > [data-slot=\"item\"]:nth-child(3) { transform: rotate(calc(var(--rb-skin-rotation, -4deg) * -0.3)); margin-inline: -1.5rem 1.5rem; }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"]:not([data-knob-tilt=\"false\"]) [data-slot=\"items\"] > [data-slot=\"item\"]:nth-child(4) { transform: rotate(calc(var(--rb-skin-rotation, -4deg) * 0.25)); }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"item\"] > [data-slot=\"quote\"] { font-size: 1.125rem; line-height: 1.45; }\n\n/* single and slides \u00B7 display: one quote set huge across ten columns. */\n[data-skin=\"poster\"] [data-arrangement=\"single\"][data-treat=\"display\"] [data-slot=\"items\"],\n[data-skin=\"poster\"] [data-arrangement=\"slides\"][data-treat=\"display\"] [data-slot=\"items\"] { max-width: min(100%, 68rem); }\n[data-skin=\"poster\"] [data-arrangement=\"single\"][data-treat=\"display\"] [data-slot=\"quote\"],\n[data-skin=\"poster\"] [data-arrangement=\"slides\"][data-treat=\"display\"] [data-slot=\"quote\"] { font-size: clamp(2.75rem, 6cqi, 5.75rem); }\n[data-skin=\"poster\"] [data-treat=\"display\"] [data-slot=\"attribution\"] [data-slot=\"item-title\"] { font-size: 1.375rem; font-stretch: 85%; }\n\n/* columns \u00B7 outcome and track \u00B7 punchy: boxed quote cards with a hard shadow, the name under a rule. */\n[data-skin=\"poster\"] [data-arrangement=\"columns\"][data-treat=\"outcome\"] [data-slot=\"items\"] { gap: 2rem; }\n[data-skin=\"poster\"] [data-arrangement=\"columns\"][data-treat=\"outcome\"] [data-slot=\"item\"],\n[data-skin=\"poster\"] [data-arrangement=\"track\"][data-treat=\"punchy\"] [data-slot=\"items\"] [data-slot=\"item\"] {\n  padding: 1.625rem 1.625rem 1.375rem;\n  border: var(--poster-edge);\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n}\n[data-skin=\"poster\"] [data-arrangement=\"track\"][data-treat=\"punchy\"] [data-slot=\"items\"] { padding: 0.25rem 0.75rem 1rem 0.25rem; }\n[data-skin=\"poster\"] :is([data-treat=\"outcome\"], [data-treat=\"punchy\"]) [data-slot=\"quote\"] { font-size: 1.1875rem; line-height: 1.45; }\n[data-skin=\"poster\"] :is([data-treat=\"outcome\"], [data-treat=\"punchy\"]) [data-slot=\"attribution\"] { margin-top: auto; padding-top: 0.75rem; border-top: 2px solid var(--rb-surface-text-color); }\n\n/* The quote arrows: square, edged, with the hard shadow. */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"controls\"] [data-slot=\"control\"] { border: var(--poster-edge); border-radius: 0; box-shadow: 3px 3px 0 var(--poster-shadow); color: var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"counter\"] { font-family: var(--font-heading); font-stretch: 75%; font-weight: 900; font-size: 1.375rem; font-variant-numeric: tabular-nums lining-nums; }\n\n/* ================================================================= PHONE */\n/* Phone headline steps fit the longest word each length allows in a 358px column: short (12 characters,\n * measured on wide words like \"Commonwealth\") at 56px or less, medium (18) at 40px; long titles wrap. */\n/* Phone rules qualify the root with :is(*, :scope): the preview container generator wraps them in a\n * scope rule, where a selector reaches the scope root only through :scope. */\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"poster\"]:is(*, :scope) [data-arrangement] > [data-slot=\"section\"] { --rb-section-pad-y: 3.5rem; --poster-lift: 6px; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"display\"] [data-slot=\"headline\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"display\"] [data-slot=\"headline\"] { font-size: 3.5rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: 3.125rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: 2.75rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-length=\"medium\"] [data-slot=\"headline\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"medium\"] [data-slot=\"headline\"] { font-size: 2.5rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-length=\"long\"] [data-slot=\"headline\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"long\"] [data-slot=\"headline\"] { font-size: 2.25rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"][data-arrangement=\"headline-row\"] [data-slot=\"headline\"] { margin-bottom: 0.5rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat] [data-slot=\"copy\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"][data-knob-image-position=\"left\"][data-arrangement=\"headline-row\"] [data-slot=\"copy\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"][data-knob-image-position=\"left\"][data-arrangement=\"split\"] [data-slot=\"copy\"] { grid-column: 1 / -1; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"] [data-slot=\"media\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"][data-arrangement=\"split\"] [data-slot=\"media\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] {\n    --poster-cut: polygon(0 10%, 100% 0, 100% 100%, 0 100%);\n    grid-column: 1 / -1;\n    min-height: 0;\n    height: 18rem;\n    margin-inline: -1rem;\n  }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { left: auto; right: 1rem; top: -0.875rem; font-size: 1.1875rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"strip\"] [data-slot=\"gallery\"] { margin-inline: -1rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"band\"] > [data-slot=\"section\"] { padding-top: 13rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement] [data-slot=\"head\"] { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement] [data-slot=\"head\"] > [data-slot=\"intro\"] { grid-column: 1; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement] [data-slot=\"heading\"] { font-size: 3rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { min-height: 0; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { padding: 1.5rem 1.375rem 1.75rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"items\"] { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(1),\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(2),\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(3),\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(4),\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(5),\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(6) { min-height: 0; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(2) { margin-left: 0.875rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(3) { margin-left: 1.75rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(4) { margin-left: 2.625rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(5) { margin-left: 3.5rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"row\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"row-continued\"] { grid-template-columns: 4rem minmax(0, 1fr) auto; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"date\"] { flex-direction: column; align-items: flex-start; gap: 0.25rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 44px; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"time-start\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"numeral\"] [data-slot=\"time-start\"] { font-size: 28px; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"numeral\"] [data-slot=\"group-label\"] { font-size: 40px; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"compact\"] [data-slot=\"panel\"] { padding: 1.25rem 1.125rem 1rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"lead\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"item\"] { grid-column: 1; grid-row: auto; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"]:not([data-knob-tilt=\"false\"]) [data-slot=\"items\"] > [data-slot=\"item\"]:nth-child(3) { margin-inline: 0 0.375rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"heavy\"] [data-slot=\"grid\"] { border-left: 0; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"heavy\"] :is([data-slot=\"date\"], [data-slot=\"group-label\"]) { border-right: 0; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"heavy\"] [data-slot=\"date\"] { min-height: 3.25rem; padding: 0.25rem; border-bottom: 0; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"heavy\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: none; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"heavy\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) { font-size: 22px; }\n}\n}\n\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"attribution\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n[data-skin=\"poster\"] [data-arrangement] :is([data-slot=\"lede\"], [data-slot=\"intro\"], [data-slot=\"item-meta\"], [data-slot=\"attribution\"]) { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* Event date parts are written as entered, with no text-transform. */\n[data-skin=\"poster\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] { text-transform: none; }\n\n[data-skin=\"poster\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] :is([data-slot=\"weekday\"], [data-slot=\"day\"], [data-slot=\"month\"]) { text-transform: none; }\n\n/* Live class categories and session figures carry the poster typography. */\n/* Level and category chips are small outlined pills, as on the mockup class cards. */\n[data-skin=\"poster\"] [data-slot=\"chip\"] { display: inline-block; border: 2px solid var(--rb-surface-text-color); border-radius: 999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 700; line-height: 1.4; }\n[data-skin=\"poster\"] [data-slot=\"figure-value\"] { font-family: var(--font-heading); font-weight: 900; font-size: clamp(3rem, 8cqi, 7rem); }\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"facts\"] [data-slot=\"fact-value\"] { font-weight: 800; }\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"facts\"] { padding-top: 0.75rem; border-top: 2px solid var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-slot=\"schedule\"] { font-weight: 700; }\n\n/* Course head: condensed title, outlined live session figure, ruled facts. */\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"headline\"] { font-size: clamp(3rem, 6.4cqi, 5.75rem); line-height: 0.92; }\n/* The live session count stands beside the copy as a giant outlined numeral, drawn\n * in the surface primary-action ink (the pop colour on the brand block): a decorative stroke, never text. */\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"figure\"] [data-slot=\"figure-value\"] { font-size: clamp(9rem, 26cqi, 21rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 4px var(--rb-action-primary-base-background-color, var(--rb-surface-mark-color)); }\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"figure-label\"] { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }\n/* Facts: each column starts on its own heavy rule, values in the condensed display face. */\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { column-gap: 1rem; }\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"facts\"] > * { padding-top: 0.75rem; border-top: var(--poster-rule); }\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"fact-value\"] { font-family: var(--font-heading); font-weight: 800; font-size: 1.3125rem; line-height: 1.15; }\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"availability\"] { align-self: flex-start; border: var(--poster-edge); padding: 0.5rem 0.75rem; transform: rotate(-3deg); }\n\n/* Ruled rows: the big day first, weekday and month stacked beside it (\"30 Wed / today\"). */\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"loud\"][data-mode=\"list\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) [data-slot=\"date\"] { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; justify-items: start; column-gap: 0.5rem; row-gap: 0; text-align: start; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"loud\"][data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"day\"] { grid-column: 1; grid-row: 1 / span 2; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"loud\"][data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"weekday\"] { grid-column: 2; grid-row: 1; align-self: end; width: auto; font-weight: 800; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"loud\"][data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"month\"] { grid-column: 2; grid-row: 2; align-self: start; width: auto; font-weight: 800; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"row\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"row-continued\"] { grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: 0.875rem; }\n}\n}\n\n/* A display quote leaves air before the name. */\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"display\"] [data-slot=\"attribution\"] { margin-top: 1.5rem; }\n\n/* Live next dates use the same card parts in every arrangement. */\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"dates\"] { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; padding-block: 0.625rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); font-variant-numeric: tabular-nums; }\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"date-places\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.875rem; }\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"navigation\"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; padding-block: 0.875rem; margin-bottom: 1rem; border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"poster\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { font: inherit; color: var(--rb-surface-text-color); padding: 0.5rem 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 0); }\n\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"time\"] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-arrangement=\"ledger\"] { --rb-event-date-width: 10.5rem; }\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { border-top-width: 2px; font-weight: 800; }\n[data-skin=\"poster\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { border: var(--poster-edge); box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow); font-weight: 800; }\n\n/* =============================================================================\n * Lantern skin (issue 1575 Phase 1b, D10, D14).\n *\n * Dark first, candlelit and symmetrical: Gloock carries the display lines,\n * Alegreya Sans the reading. Every photo is seen through an arched window,\n * one small lozenge rule (rule, outlined lozenge, rule) sits above each\n * section head, and the lit inverse panel is kept for the one thing you\n * would pick. The ornament colour is the surface mark colour, never text.\n *\n * Bounded skin: only the shared hooks and slots, colours only from tokens and\n * resolved-surface variables, measurements from --rb-skin-* tokens. The arch\n * profiles are skin-local custom properties (they are the style, not a\n * measurement another style would tune). Translucent fills (date tablets, the\n * candle glow) are drawn on pseudo-elements from a surface variable with\n * resolved surfaces, so no colour is mixed here.\n * ============================================================================= */\n\n[data-skin=\"lantern\"] {\n  --tt-eyebrow: none;\n  --ls-eyebrow: 0.02em;\n  --fw-eyebrow: 400;\n  --fs-eyebrow: 1.0625rem;\n}\n\n[data-skin=\"lantern\"] [data-arrangement] {\n  --lantern-arch: 9999px 9999px 0 0;\n  --lantern-arch-wide: 50% 50% 0 0 / 150px 150px 0 0;\n  --lantern-arch-card: 50% 50% 0 0 / 70px 70px 0 0;\n  --lantern-tablet: 48px 48px 6px 6px;\n  --lantern-head-gap: 64px;\n}\n\n/* ------------------------------------------------------------ section air */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: clamp(4.5rem, 8.4cqi, 7.5rem); }\n[data-skin=\"lantern\"] [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: clamp(3.5rem, 6.2cqi, 5.5rem); }\n\n/* ------------------------------------------------------------ type */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"headline\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"heading\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"item-title\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"panel-heading\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"group-day\"] {\n  font-family: var(--font-heading);\n  font-weight: 400;\n  letter-spacing: -0.008em;\n  color: var(--rb-surface-heading-color);\n  text-wrap: balance;\n}\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"eyebrow\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"caption\"] { font-size: 1.0625rem; letter-spacing: 0.02em; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"lede\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"intro\"] { font-size: clamp(1.1875rem, 1.45cqi, 1.3125rem); line-height: 1.55; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); max-width: 34em; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"item-text\"] { font-size: 1.125rem; line-height: 1.6; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"icon\"] { color: var(--rb-surface-text-color); }\n\n/* Section heads: centred under the lozenge rule. */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"head\"] {\n  position: relative;\n  justify-items: center;\n  text-align: center;\n  justify-self: center;\n  margin-inline: auto;\n  max-width: 48rem;\n  gap: 1.125rem;\n  padding-top: 2rem;\n  margin-bottom: var(--lantern-head-gap);\n}\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"head\"] > [data-slot=\"heading\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"head\"] > [data-slot=\"intro\"] { text-align: center; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"heading\"] { font-size: clamp(2.25rem, 3.9cqi, 3.375rem); line-height: 1.08; }\n\n/* The lozenge rule: two short rules either side of an outlined lozenge. */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"head\"]::before,\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"copy\"]::before,\n[data-skin=\"lantern\"] [data-treat=\"centred\"] [data-slot=\"copy\"]::before,\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"false\"] [data-slot=\"copy\"]::before,\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"lead\"] > [data-slot=\"quote\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 92px;\n  height: 9px;\n  transform: translateX(-50%);\n  background: linear-gradient(to right, var(--rb-surface-mark-color) 0 34px, transparent 34px 58px, var(--rb-surface-mark-color) 58px) center 4px / 92px 1px no-repeat;\n}\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"head\"]::after,\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"copy\"]::after,\n[data-skin=\"lantern\"] [data-treat=\"centred\"] [data-slot=\"copy\"]::after,\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"false\"] [data-slot=\"copy\"]::after,\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"lead\"] > [data-slot=\"quote\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 1px;\n  left: 50%;\n  width: 7px;\n  height: 7px;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: translateX(-50%) rotate(45deg);\n}\n\n/* Candle glow (knob, on by default where offered): a derived mark tint behind centred type,\n * painted and checked by the surface resolver. */\n[data-skin=\"lantern\"] [data-knob-candle-glow=\"true\"] [data-slot=\"frame\"] { isolation: isolate; }\n\n/* The sticker line: an outlined pill in the display face, on the ground. */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"sticker\"] {\n  display: inline-block;\n  padding: 0.625rem 1.375rem;\n  border: 1px solid var(--rb-surface-mark-color);\n  border-radius: 999px;\n  font-family: var(--font-heading);\n  font-size: 1.1875rem;\n  line-height: 1.2;\n  text-align: center;\n}\n\n/* ================================================================== HERO */\n/* Headline steps: length (short, medium, long) x headline size (Quieter, Standard). */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"headline\"] { line-height: 1.02; letter-spacing: -0.012em; }\n[data-skin=\"lantern\"] [data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3.25rem, 6.2cqi, 5.625rem); }\n[data-skin=\"lantern\"] [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.875rem, 4.8cqi, 4.25rem); }\n[data-skin=\"lantern\"] [data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 5cqi, 4.5rem); }\n[data-skin=\"lantern\"] [data-length=\"medium\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.5rem, 4.2cqi, 3.75rem); }\n[data-skin=\"lantern\"] [data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(2.125rem, 3.4cqi, 3rem); line-height: 1.08; }\n\n/* Centred copy shared by the centred hero treatments. */\n[data-skin=\"lantern\"] :is([data-treat=\"arches\"], [data-treat=\"centred\"], [data-treat=\"veil\"], [data-treat=\"arch-frame\"]) [data-slot=\"copy\"] {\n  position: relative;\n  grid-column: 1 / -1;\n  justify-items: center;\n  justify-self: center;\n  text-align: center;\n  max-width: 56rem;\n  margin-inline: auto;\n}\n[data-skin=\"lantern\"] :is([data-treat=\"arches\"], [data-treat=\"centred\"], [data-treat=\"veil\"]) [data-slot=\"copy\"] { padding-top: 2.5rem; }\n[data-skin=\"lantern\"] :is([data-treat=\"arches\"], [data-treat=\"centred\"], [data-treat=\"veil\"], [data-treat=\"arch-frame\"]) [data-slot=\"actions\"] { justify-content: center; }\n[data-skin=\"lantern\"] :is([data-treat=\"arches\"], [data-treat=\"centred\"], [data-treat=\"veil\"], [data-treat=\"arch-frame\"]) [data-slot=\"lede\"] { text-align: center; }\n\n/* split \u00B7 arch: one arched window beside a left-set title, lined inside. */\n[data-skin=\"lantern\"] [data-treat=\"arch\"] [data-slot=\"frame\"] { column-gap: var(--rb-skin-gutter, 32px); }\n[data-skin=\"lantern\"] [data-treat=\"arch\"] [data-slot=\"copy\"] { grid-column: 1 / 7; }\n[data-skin=\"lantern\"] [data-treat=\"arch\"] [data-slot=\"media\"] { grid-column: 8 / 13; aspect-ratio: 4 / 5; }\n[data-skin=\"lantern\"] [data-treat=\"arch\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 6; }\n[data-skin=\"lantern\"] [data-treat=\"arch\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 7 / 13; }\n[data-skin=\"lantern\"] [data-treat=\"arch\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: -2rem; bottom: 3.5rem; }\n\n/* The arched window: the photo takes the arch; a hairline arch runs just inside it. */\n[data-skin=\"lantern\"] :is([data-treat=\"arch\"], [data-treat=\"arches\"], [data-treat=\"arch-frame\"]) [data-slot=\"media\"] [data-slot=\"photo\"] { border-radius: var(--lantern-arch); }\n[data-skin=\"lantern\"] :is([data-treat=\"arch\"], [data-treat=\"arches\"]) [data-slot=\"media\"]:has([data-slot=\"photo\"])::after {\n  content: \"\";\n  position: absolute;\n  inset: 10px 10px 0;\n  z-index: 1;\n  pointer-events: none;\n  border: 1px solid var(--rb-surface-text-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n  opacity: 0.55;\n}\n\n/* copy-over-gallery \u00B7 arches: the centred title in its glow, the photos standing below in arches. */\n[data-skin=\"lantern\"] [data-arrangement=\"copy-over-gallery\"][data-treat=\"arches\"][data-has-photo=\"true\"] [data-slot=\"section\"] { padding-bottom: 0; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"gallery\"] {\n  margin-top: clamp(3rem, 5.2cqi, 4.75rem);\n  gap: 28px;\n  align-items: end;\n  justify-content: center;\n  grid-template-columns: minmax(0, 28rem);\n}\n[data-skin=\"lantern\"] [data-treat=\"arches\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] { grid-template-columns: repeat(2, minmax(0, 25rem)); }\n[data-skin=\"lantern\"] [data-treat=\"arches\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] { grid-template-columns: 1fr 1.28fr 1fr; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 3 / 3.4; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] [data-slot=\"media\"],\n[data-skin=\"lantern\"] [data-treat=\"arches\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(2) { aspect-ratio: 3 / 3.55; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"gallery\"] [data-slot=\"sticker\"] { position: absolute; left: 50%; bottom: 2.5rem; transform: translateX(-50%); white-space: nowrap; }\n\n/* classic \u00B7 veil: the photo fills the section; the copy is a band in the deepest tone\n * at its foot (the copy slot is the card role, which Lantern maps to that tone). Under the\n * type the band is the resolved opaque paint; above it the same paint fades up into the photo. */\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"true\"] [data-slot=\"section\"] { padding-bottom: 0; padding-top: clamp(14rem, 26cqi, 22rem); overflow: clip; }\n[data-skin=\"lantern\"] [data-treat=\"veil\"] [data-slot=\"copy\"] { max-width: none; padding: 3rem 0 4.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"true\"] [data-slot=\"copy\"] {\n  margin-inline: calc(50% - 50cqi);\n  padding-inline: calc(50cqi - 50%);\n}\n[data-skin=\"lantern\"] [data-treat=\"veil\"] [data-slot=\"copy\"] > * { justify-self: center; max-width: 56rem; }\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"true\"] [data-slot=\"copy\"] > [data-slot=\"lede\"] { max-width: 34em; }\n/* Above the band, the same resolved paint fades up into the photo. */\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"true\"] [data-slot=\"copy\"]::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: auto;\n  bottom: 100%;\n  width: auto;\n  height: 10rem;\n  transform: none;\n  pointer-events: none;\n  background: inherit;\n  mask-image: linear-gradient(to top, currentcolor, transparent);\n}\n/* With a photo the copy pseudo is the fade (and in the arch frame it is the inner arch),\n * so the lozenge sits on the headline. */\n[data-skin=\"lantern\"] :is([data-treat=\"veil\"][data-has-photo=\"true\"], [data-treat=\"arch-frame\"]) [data-slot=\"headline\"] { position: relative; padding-top: 2.25rem; }\n[data-skin=\"lantern\"] :is([data-treat=\"veil\"][data-has-photo=\"true\"], [data-treat=\"arch-frame\"]) [data-slot=\"headline\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 92px;\n  height: 9px;\n  transform: translateX(-50%);\n  background: linear-gradient(to right, var(--rb-surface-mark-color) 0 34px, transparent 34px 58px, var(--rb-surface-mark-color) 58px) center 4px / 92px 1px no-repeat;\n}\n[data-skin=\"lantern\"] :is([data-treat=\"veil\"][data-has-photo=\"true\"], [data-treat=\"arch-frame\"]) [data-slot=\"headline\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 1px;\n  left: 50%;\n  width: 7px;\n  height: 7px;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: translateX(-50%) rotate(45deg);\n}\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"false\"] [data-slot=\"copy\"] {\n  padding: 4.5rem 2.75rem 4rem;\n  border-radius: 12px;\n  max-width: 61rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"veil\"] [data-slot=\"caption\"] { order: -1; }\n\n/* page-head \u00B7 centred: the title centred on the ground, the lozenge above it. */\n[data-skin=\"lantern\"] [data-treat=\"centred\"] [data-slot=\"facts\"] {\n  max-width: 61rem;\n  margin-inline: auto;\n  gap: 0;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"lantern\"] [data-treat=\"centred\"] [data-slot=\"facts\"] > * { padding: 1.625rem 1.125rem 0; text-align: center; }\n[data-skin=\"lantern\"] [data-treat=\"centred\"] [data-slot=\"facts\"] > * + * { border-left: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n\n/* copy-over-gallery \u00B7 arch-frame: the title stands in a double arch outline between two arched photos.\n * With one photo (all of 1b) the photo stands under the frame as a wide shallow arch;\n * with none, the frame stands alone. */\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"] [data-slot=\"frame\"] { align-items: end; }\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"] [data-slot=\"copy\"] {\n  align-self: stretch;\n  align-content: end;\n  max-width: none;\n  padding: clamp(7rem, 10cqi, 9.5rem) clamp(1.5rem, 3cqi, 2.75rem) 3.5rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n  gap: 1.25rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"] [data-slot=\"copy\"]::before {\n  content: \"\";\n  position: absolute;\n  inset: 8px 8px 0;\n  pointer-events: none;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n  opacity: 0.55;\n}\n\n[data-skin=\"lantern\"] :is([data-treat=\"arch-frame\"], [data-treat=\"veil\"]) [data-slot=\"eyebrow\"] { order: 5; }\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"media\"] { aspect-ratio: 16 / 7; }\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"media\"] [data-slot=\"photo\"] { border-radius: var(--lantern-arch-wide); }\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: 50%; top: -1.5rem; transform: translateX(-50%); white-space: nowrap; }\n\n/* ========================================================== FEATURE CARDS */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"item-title\"] { font-size: 1.6875rem; line-height: 1.18; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"item-body\"] { display: grid; gap: 0.75rem; align-content: start; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"item-actions\"] { margin-top: 0.5rem; }\n\n/* cards \u00B7 cards: quiet sheets with a shallow-arched photo set into them. */\n[data-skin=\"lantern\"] [data-treat=\"cards\"] [data-slot=\"items\"] { gap: 1.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"cards\"] [data-slot=\"item\"] {\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: var(--rb-skin-radius, 10px);\n  overflow: hidden;\n}\n[data-skin=\"lantern\"] [data-treat=\"cards\"] [data-slot=\"item-media\"] { width: auto; margin: 1.125rem 1.125rem 0; }\n[data-skin=\"lantern\"] [data-treat=\"cards\"] [data-slot=\"item-media\"] [data-slot=\"photo\"] { height: 11.5rem; border-radius: var(--lantern-arch-card); }\n[data-skin=\"lantern\"] [data-treat=\"cards\"] [data-slot=\"item-body\"] { padding: 1.5rem 1.75rem 1.75rem; }\n\n/* cards \u00B7 arches: boxless centred columns under tall arched photos. Without a photo\n * each column stands under a small outlined niche instead. */\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"items\"] { gap: 3.5rem 2.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"item\"],\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"item\"] [data-slot=\"item-body\"] { justify-items: center; text-align: center; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"item\"] [data-slot=\"item-media\"] { aspect-ratio: 4 / 4.6; margin-bottom: 1.75rem; border-radius: var(--lantern-arch); }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"item\"] [data-slot=\"item-media\"] [data-slot=\"photo\"] { height: 100%; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"item\"]:not(:has([data-slot=\"item-media\"])) [data-slot=\"item-body\"]::before,\n[data-skin=\"lantern\"] [data-treat=\"arches\"][data-knob-show-photos=\"false\"] [data-slot=\"item\"] [data-slot=\"item-body\"]::before {\n  content: \"\";\n  display: block;\n  width: 4.5rem;\n  aspect-ratio: 1 / 1.25;\n  margin: 0 auto 0.75rem;\n  border: 1px solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n}\n\n/* lead-support \u00B7 arch-beside: the lead is the lit panel (statement role) with an arched\n * photo and corner brackets; the rest follow as small centred arches. */\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"] {\n  position: relative;\n  align-items: center;\n  padding: clamp(1.5rem, 3cqi, 2.5rem);\n  border-radius: 12px;\n  margin-bottom: 1.5rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"]::before {\n  content: \"\";\n  position: absolute;\n  inset: 12px;\n  pointer-events: none;\n  background:\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) left top / 22px 1.5px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) left top / 1.5px 22px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) right top / 22px 1.5px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) right top / 1.5px 22px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) left bottom / 22px 1.5px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) left bottom / 1.5px 22px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) right bottom / 22px 1.5px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) right bottom / 1.5px 22px no-repeat;\n}\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { grid-column: 1 / 6; min-height: 0; aspect-ratio: 4 / 5; border-radius: var(--lantern-arch); }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] [data-slot=\"photo\"] { height: 100%; }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { grid-column: 7 / 13; gap: 1.25rem; padding-right: 1rem; }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"] [data-slot=\"item-title\"] { font-size: clamp(2.125rem, 3.4cqi, 3rem); line-height: 1.08; }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"items\"] > [data-slot=\"item\"],\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"items\"] > [data-slot=\"item\"] [data-slot=\"item-body\"] { justify-items: center; text-align: center; }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"items\"] > [data-slot=\"item\"] [data-slot=\"item-media\"] { width: 62%; aspect-ratio: 3 / 3.6; margin: 0 auto 1.25rem; border-radius: var(--lantern-arch); }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"items\"] > [data-slot=\"item\"] [data-slot=\"item-media\"] [data-slot=\"photo\"] { height: 100%; }\n\n/* index \u00B7 two-col: two columns of ruled rows with display titles. */\n[data-skin=\"lantern\"] [data-treat=\"two-col\"] [data-slot=\"items\"] {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  column-gap: 4rem;\n  max-width: 61rem;\n  margin-inline: auto;\n}\n[data-skin=\"lantern\"] [data-arrangement][data-treat=\"two-col\"] [data-slot=\"item\"] {\n  grid-template-columns: minmax(0, 1fr);\n  padding-block: 1.5rem;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"lantern\"] [data-treat=\"two-col\"] [data-slot=\"item\"] > *,\n[data-skin=\"lantern\"] [data-treat=\"two-col\"] [data-slot=\"item\"] > [data-slot=\"item-title\"] { grid-column: 1; grid-row: auto; }\n[data-skin=\"lantern\"] [data-treat=\"two-col\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] { grid-template-columns: 3rem minmax(0, 1fr); }\n[data-skin=\"lantern\"] [data-treat=\"two-col\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > * { grid-column: 2; }\n[data-skin=\"lantern\"] [data-treat=\"two-col\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > [data-slot=\"numeral\"] { grid-column: 1; grid-row: 1 / span 3; }\n[data-skin=\"lantern\"] [data-treat=\"two-col\"] [data-slot=\"item-title\"] { font-size: 1.4375rem; }\n/* Without numbers each row is marked by a small outlined lozenge. */\n[data-skin=\"lantern\"] [data-arrangement][data-treat=\"two-col\"]:not([data-knob-card-marker=\"numbers\"]) [data-slot=\"item\"] { position: relative; padding-left: 1.75rem; }\n[data-skin=\"lantern\"] [data-treat=\"two-col\"]:not([data-knob-card-marker=\"numbers\"]) [data-slot=\"item\"]::before {\n  content: \"\";\n  position: absolute;\n  left: 0.25rem;\n  top: calc(1.5rem + 0.6em);\n  width: 7px;\n  height: 7px;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: rotate(45deg);\n}\n[data-skin=\"lantern\"] [data-treat=\"two-col\"] [data-slot=\"numeral\"] { font-family: var(--font-heading); font-size: 1.375rem; color: var(--rb-surface-text-color); }\n\n/* sequence \u00B7 arch-row: each step stands in an arch outline; the numeral is a display\n * figure in the mark colour (a 40px-plus numeral). */\n[data-skin=\"lantern\"] [data-treat=\"arch-row\"] [data-slot=\"items\"] { gap: 1.75rem; }\n[data-skin=\"lantern\"] [data-arrangement][data-treat=\"arch-row\"] [data-slot=\"item\"] {\n  justify-items: center;\n  text-align: center;\n  padding: 4rem 1.875rem 2.25rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n  gap: 0.875rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"arch-row\"] [data-slot=\"numeral\"] { font-family: var(--font-heading); font-size: 48px; line-height: 1; color: var(--rb-surface-mark-color); }\n[data-skin=\"lantern\"] [data-treat=\"arch-row\"] [data-slot=\"item-media\"] { display: none; }\n\n/* ============================================================== CALENDAR */\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"item-title\"] { font-size: 1.5625rem; line-height: 1.15; }\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"item-meta\"],\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"time-length\"],\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"places\"],\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"places-full\"] { font-size: 1.0625rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"time\"],\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"date\"] { font-variant-numeric: lining-nums tabular-nums; }\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-family: var(--font-heading); font-size: 2.25rem; line-height: 1.05; color: var(--rb-surface-heading-color); }\n[data-skin=\"lantern\"] [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]) { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n/* Few places left: an outlined lozenge before the line. */\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"places-low\"] { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 1.0625rem; color: var(--rb-surface-text-color); }\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"places-low\"]::before {\n  content: \"\";\n  width: 7px;\n  height: 7px;\n  flex: none;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: rotate(45deg);\n}\n\n/* The date tablet: an arch-topped plate with a quiet fill (a derived text tint). */\n[data-skin=\"lantern\"] [data-treat=\"tablets\"] [data-slot=\"date\"] {\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: start;\n  text-align: center;\n  min-height: 6.75rem;\n  padding: 1.25rem 0.375rem 0.75rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"tablets\"] [data-slot=\"date\"] { border-radius: var(--lantern-tablet); }\n\n/* ledger \u00B7 tablets: a centred, ruled ledger led by tablets. */\n[data-skin=\"lantern\"] [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"list\"] { max-width: 61rem; margin-inline: auto; border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"lantern\"] [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"row\"],\n[data-skin=\"lantern\"] [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"row-continued\"] {\n  grid-template-columns: 7rem minmax(0, 1fr) auto;\n  column-gap: 1.75rem;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"lantern\"] [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"row-continued\"] { border-top-style: dotted; }\n\n/* grid \u00B7 tablets: date tablets in quiet cards, one session to a row. */\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"list\"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 57.5rem; margin-inline: auto; }\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item\"] {\n  display: grid;\n  grid-template-columns: 6rem minmax(0, 1fr);\n  column-gap: 1.75rem;\n  align-items: center;\n  padding: 1.125rem 1.75rem 1.125rem 1.125rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: var(--rb-skin-radius, 10px);\n  box-shadow: none;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-body\"] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  column-gap: 1.5rem;\n  row-gap: 0.25rem;\n  align-items: center;\n  padding: 0;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-body\"] > * { grid-column: 1; }\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-body\"] > [data-slot=\"item-actions\"] { grid-column: 2; grid-row: 1 / span 4; display: flex; align-items: center; gap: 1rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-text\"] { font-size: 1.0625rem; }\n\n/* day-groups \u00B7 arch-heads: the day stands in an arch outline in the rail. */\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"][data-mode=\"list\"] [data-slot=\"list\"] { max-width: 61rem; margin-inline: auto; }\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"] [data-slot=\"group\"] { padding-block: 1.75rem; }\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"] [data-slot=\"group-label\"] {\n  align-self: start;\n  align-items: center;\n  text-align: center;\n  padding: 2.75rem 0.75rem 1rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n}\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"] [data-slot=\"group-day\"] { font-size: 1.875rem; line-height: 1.1; }\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"] [data-slot=\"group-date\"] { font-size: 1.0625rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"] [data-slot=\"row\"] { border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n\n/* compact \u00B7 compact: the next three in a quiet panel under a centred heading. */\n[data-skin=\"lantern\"] [data-arrangement=\"compact\"] [data-slot=\"panel\"] {\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: 12px;\n  padding: 1.75rem 2rem;\n  max-width: 45rem;\n  margin-inline: auto;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"compact\"] [data-slot=\"panel-heading\"] { font-size: 1.5rem; text-align: center; margin: 0 0 0.75rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"compact\"] [data-slot=\"row\"] { border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-block: 0.875rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"compact\"] [data-slot=\"item-title\"] { font-size: 1.375rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"compact\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-family: var(--font-body); font-size: 1.0625rem; }\n\n/* month-grid \u00B7 lit: a quiet month on the ground, today lit by the mark colour. */\n[data-skin=\"lantern\"] [data-treat=\"lit\"] [data-slot=\"grid\"] { gap: 0; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); border-left: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"lantern\"] [data-treat=\"lit\"] [data-slot=\"group-label\"] { padding: 0.75rem 0.5rem; text-align: center; font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); border-right: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"lantern\"] [data-treat=\"lit\"] [data-slot=\"date\"] {\n  gap: 0.25rem;\n  min-height: 7rem;\n  padding: 0.375rem;\n  border-right: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"lantern\"] [data-treat=\"lit\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) {\n  justify-self: start;\n  width: 2.25rem;\n  height: 2.25rem;\n  min-height: 0;\n  border: 0;\n  border-radius: 999px;\n  font-family: var(--font-heading);\n  font-size: 1.125rem;\n  font-variant-numeric: lining-nums;\n}\n\n[data-skin=\"lantern\"] [data-treat=\"lit\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: block; font-size: 0.875rem; line-height: 1.3; color: var(--rb-surface-text-color); padding-left: 0.25rem; }\n[data-skin=\"lantern\"] [data-treat=\"lit\"] [data-slot=\"date\"] [data-slot=\"time\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-variant-numeric: lining-nums tabular-nums; }\n\n/* ========================================================== TESTIMONIALS */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"quote\"] { font-size: 1.25rem; line-height: 1.55; color: var(--rb-surface-text-color); }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"attribution\"] { justify-content: center; gap: 0.125rem 0.3em; font-size: 1.09375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"] { font-family: inherit; font-size: inherit; font-weight: 400; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"]::after { content: \",\"; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"]:last-child::after { content: none; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-meta\"] + [data-slot=\"item-meta\"]::before { content: \"\u00B7 \"; }\n\n/* lead-rest, single and slides \u00B7 quote-arch: the lead quote in a shallow double arch\n * outline under the lozenge; small quotes flank a vertical lozenge rule. With the arch\n * frame off the outline goes, the centred display quote and its lozenge stay. */\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"items\"] { text-align: center; }\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"lead\"],\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"],\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] {\n  position: relative;\n  justify-self: center;\n  justify-items: center;\n  width: 100%;\n  max-width: 53.75rem;\n  margin-inline: auto;\n  padding: 8rem clamp(1.5rem, 4.5cqi, 4.5rem) 2.5rem;\n  gap: 1.625rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch-wide);\n}\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"lead\"]::before,\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"]::before,\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"items\"]::before {\n  content: \"\";\n  position: absolute;\n  inset: 8px 8px 0;\n  pointer-events: none;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch-wide);\n  opacity: 0.55;\n}\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"lead\"],\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"items\"] > [data-slot=\"item\"],\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"items\"] { border: 0; padding-top: 3rem; }\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"lead\"]::before,\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"items\"] > [data-slot=\"item\"]::before,\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"items\"]::before { content: none; }\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"lead\"] > [data-slot=\"quote\"],\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"],\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"] {\n  position: relative;\n  padding-top: 2.5rem;\n  font-family: var(--font-heading);\n  font-size: clamp(1.625rem, 2.6cqi, 2.25rem);\n  line-height: 1.32;\n  text-wrap: balance;\n  color: var(--rb-surface-heading-color);\n}\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"]::before,\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 92px;\n  height: 9px;\n  transform: translateX(-50%);\n  background: linear-gradient(to right, var(--rb-surface-mark-color) 0 34px, transparent 34px 58px, var(--rb-surface-mark-color) 58px) center 4px / 92px 1px no-repeat;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"]::after,\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 1px;\n  left: 50%;\n  width: 7px;\n  height: 7px;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: translateX(-50%) rotate(45deg);\n}\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"] { justify-items: center; gap: 1.625rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] {\n  max-width: 62.5rem;\n  margin-inline: auto;\n  column-gap: 6rem;\n  row-gap: 4.5rem;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"] { position: relative; justify-items: center; gap: 0.75rem; }\n/* Exactly two small quotes: a vertical lozenge rule between them, centred in the gap. */\n[data-skin=\"lantern\"] [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(3):last-child) > [data-slot=\"item\"]:nth-child(2)::after {\n  content: \"\";\n  position: absolute;\n  right: -3rem;\n  top: 0;\n  width: 9px;\n  height: 6rem;\n  transform: translateX(50%);\n  background:\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) center top / 1px 2.25rem no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) center bottom / 1px 2.25rem no-repeat;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(3):last-child) > [data-slot=\"item\"]:nth-child(2)::before {\n  content: \"\";\n  position: absolute;\n  right: -3rem;\n  top: calc(3rem - 4.5px);\n  width: 7px;\n  height: 7px;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: translateX(50%) rotate(45deg);\n}\n\n/* columns \u00B7 cards: quiet sheets (the card role), centred. */\n[data-skin=\"lantern\"] [data-arrangement=\"columns\"][data-treat=\"cards\"] [data-slot=\"item\"] {\n  justify-items: center;\n  text-align: center;\n  padding: 2.25rem 2rem 1.875rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: var(--rb-skin-radius, 10px);\n}\n[data-skin=\"lantern\"] [data-arrangement=\"columns\"][data-treat=\"cards\"] [data-slot=\"quote\"] { font-size: 1.1875rem; }\n\n/* The quote arrows: round, outlined in the mark colour, the label in the text colour. Never moves on its own. */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"controls\"] { justify-content: center; gap: 1.125rem; margin-top: 2rem; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"controls\"] [data-slot=\"control\"] { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rb-surface-mark-color); color: var(--rb-surface-text-color); background-color: transparent; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"counter\"] { font-variant-numeric: lining-nums tabular-nums; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* ================================================================= PHONE */\n/* Phone headline steps fit the longest word each length allows in a 358px column in\n * Gloock: short (12 characters, \"Commonwealth\") at 44px, medium (18) at 34px; long titles wrap.\n * Phone rules qualify the root with :is(*, :scope): the preview container generator wraps them\n * in a scope rule, where a selector reaches the scope root only through :scope. */\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"lantern\"]:is(*, :scope) [data-arrangement] { --lantern-head-gap: 2.75rem; --lantern-arch-wide: 50% 50% 0 0 / 90px 90px 0 0; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: 4rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: 3rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-length=\"short\"] [data-slot=\"headline\"] { font-size: 2.75rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: 2.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-length=\"medium\"] [data-slot=\"headline\"] { font-size: 2.125rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-length=\"long\"] [data-slot=\"headline\"] { font-size: 1.875rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement] [data-slot=\"heading\"] { font-size: 2.125rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement] [data-slot=\"item-title\"] { font-size: 1.5rem; }\n\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat] [data-slot=\"copy\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat] [data-slot=\"media\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / -1; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch\"] [data-slot=\"media\"] { aspect-ratio: 4 / 4.6; margin-inline: 1.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { left: 50%; bottom: -1.25rem; transform: translateX(-50%); white-space: nowrap; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arches\"] [data-slot=\"gallery\"] { margin-top: 2.5rem; gap: 0.75rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arches\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] { grid-template-columns: 0.5fr 1fr 0.5fr; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arches\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 3 / 3.6; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arches\"] [data-slot=\"gallery\"] [data-slot=\"sticker\"] { bottom: 1.5rem; white-space: normal; width: max-content; max-width: 80%; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"veil\"][data-has-photo=\"true\"] [data-slot=\"section\"] { padding-top: 15rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"veil\"] [data-slot=\"copy\"] { padding-bottom: 3rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"veil\"][data-has-photo=\"false\"] [data-slot=\"copy\"] { padding: 3.5rem 1.375rem 3rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"centred\"] [data-slot=\"facts\"] > * + * { border-left: 0; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-frame\"] [data-slot=\"copy\"] { padding: 6.5rem 1.25rem 2.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"media\"] { aspect-ratio: 4 / 3; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"media\"] [data-slot=\"photo\"] { border-radius: var(--lantern-arch); }\n\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-beside\"] [data-slot=\"lead\"] { padding: 1.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-beside\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { padding-right: 0; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-beside\"] [data-slot=\"lead\"] [data-slot=\"item-title\"] { font-size: 2rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-beside\"] [data-slot=\"items\"] > [data-slot=\"item\"] [data-slot=\"item-media\"] { width: 70%; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"two-col\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-row\"] [data-slot=\"item\"] { padding: 3.25rem 1.5rem 1.75rem; }\n\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"row\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"row-continued\"] { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"tablets\"] [data-slot=\"date\"] { min-height: 5.5rem; padding-top: 1rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"tablets\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 1.875rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item\"] { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; padding: 0.875rem; align-items: start; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-body\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-body\"] > [data-slot=\"item-actions\"] { grid-column: 1; grid-row: auto; flex-wrap: wrap; margin-top: 0.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-heads\"] [data-slot=\"group-label\"] { padding: 0.75rem 0 0; border: 0; text-align: left; align-items: baseline; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"compact\"] [data-slot=\"panel\"] { padding: 1.25rem 1.125rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"lit\"] [data-slot=\"date\"] { min-height: 3.5rem; padding: 0.125rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"lit\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: none; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"lit\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) { width: 2rem; height: 2rem; font-size: 1rem; }\n\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"quote-arch\"] [data-slot=\"lead\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] { padding: 5.5rem 1.25rem 1.75rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"]::before,\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"]::after { content: none; }\n}\n}\n\n[data-skin=\"lantern\"] [data-arrangement] :is([data-slot=\"lede\"], [data-slot=\"intro\"], [data-slot=\"item-meta\"], [data-slot=\"attribution\"]) { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* Event date parts are written as entered, with no text-transform. */\n[data-skin=\"lantern\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] { text-transform: none; }\n\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"date\"] { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: 1rem 1rem 0.25rem 0.25rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"day\"] { font-family: var(--font-heading); font-size: 2.75rem; line-height: 1; }\n\n[data-skin=\"lantern\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] :is([data-slot=\"weekday\"], [data-slot=\"day\"], [data-slot=\"month\"]) { text-transform: none; }\n\n/* Price and date chips use the resolved item ink and line. */\n[data-skin=\"lantern\"] [data-card-list-item] :is([data-slot=\"schedule\"], [data-slot=\"chip\"]) { border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); border-radius: 999px; padding: 0.375rem 0.75rem; }\n/* The price reads as the card figure in the display serif, as on the mockup class cards (\"12 suggested\"). */\n[data-skin=\"lantern\"] [data-card-list-item] :is([data-fact=\"price\"], [data-fact=\"fee\"]) [data-slot=\"fact-value\"] { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.1; }\n[data-skin=\"lantern\"] [data-slot=\"figure-value\"] { font-family: var(--font-heading); font-style: italic; }\n[data-skin=\"lantern\"] [data-slot=\"schedule\"] { align-self: start; }\n\n/* Quiet retreat facts and a generous live figure. */\n[data-skin=\"lantern\"] [data-arrangement=\"event-header\"] [data-slot=\"headline\"] { font-weight: 400; }\n[data-skin=\"lantern\"] [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { border-block: 1px solid var(--rb-surface-line-color); padding-block: 1.5rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"event-header\"] [data-slot=\"figure-value\"] { font-size: clamp(6rem, 18cqi, 16rem); }\n[data-skin=\"lantern\"] [data-arrangement=\"details-panel\"] [data-slot=\"panel\"] { border-radius: var(--rb-skin-radius, 1rem); }\n\n/* Lantern buttons carry a visible ring, so a lone item button keeps its own box (the flush rule\n * is for link-like actions). */\n[data-skin=\"lantern\"] [data-arrangement][data-knob-action-style=\"button\"] :is([data-slot=\"item-actions\"], [data-slot=\"action\"]):is([data-slot]) > :first-child:last-child { padding: 0.5rem 1.125rem; min-height: 2.5rem; }\n/* Lantern centres its section heads, catalogue block headings included. */\n[data-skin=\"lantern\"] [data-arrangement] { --rb-skin-head-align: center; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"stack\"] > [data-slot=\"intro\"] { margin-inline: auto; }\n\n/* Live next dates use the same card parts in every arrangement. */\n[data-skin=\"lantern\"] [data-card-list-item] [data-slot=\"dates\"] { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }\n[data-skin=\"lantern\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; padding-block: 0.625rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); font-variant-numeric: tabular-nums; }\n[data-skin=\"lantern\"] [data-card-list-item] [data-slot=\"date-places\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.875rem; }\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"navigation\"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; padding-block: 0.875rem; margin-bottom: 1rem; border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"lantern\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { font: inherit; color: var(--rb-surface-text-color); padding: 0.5rem 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 0); }\n\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"time\"] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-surface-text-color); }\n[data-skin=\"lantern\"] [data-card-list-item] [data-slot=\"dates\"] { gap: 0.5rem; }\n[data-skin=\"lantern\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { padding: 0.625rem 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: var(--lantern-tablet); }\n\n/* =============================================================================\n * Measure skin (issue 1575 Phase 1b, D14).\n *\n * Swiss and warm: one grotesque (Instrument Sans) through weight, size and\n * width; a visible twelve-column grid; a heavy rule and a small hanging title\n * at the top of every section; square corners and no shadows. The accent is\n * only ever a small square marker, never text.\n *\n * The grid is style data, not CSS: the skin tokens in the style data set the gutter,\n * the container measure and margin, and the rail and main spans that the\n * shared section shell (arrangements.css) reads, so the rail title and the\n * content share one top line on every block. This skin dresses the shell\n * (the heavy rule, the small rail title) and the Looks.\n *\n * Bounded skin: only the shared hooks and slots, colours only from tokens and\n * resolved-surface variables. The column guides are drawn from the line\n * colour on a pseudo-element; gradient stop lengths that\n * need calc() live in custom properties.\n * ============================================================================= */\n\n[data-skin=\"measure\"] {\n  --tt-eyebrow: none;\n  --ls-eyebrow: 0;\n  --fw-eyebrow: 500;\n  --fs-eyebrow: 0.8125rem;\n}\n\n[data-skin=\"measure\"] [data-arrangement] {\n  --measure-guide-a: calc(100% - var(--rb-skin-gutter, 24px) - 1px);\n  --measure-guide-b: calc(100% - var(--rb-skin-gutter, 24px));\n  --measure-indent: calc((100% + var(--rb-skin-gutter, 24px)) / 4);\n}\n\n/* ------------------------------------------------------------ section air */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: clamp(4.5rem, 8.4cqi, 8rem); }\n[data-skin=\"measure\"] [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: clamp(3.5rem, 6cqi, 6rem); }\n\n/* -------------------------------------------- the hanging rail (dressing) */\n/* The shared shell puts the head in the rail and the body in the main measure.\n * Measure draws the heavy rule across the whole grid and sets the rail title\n * small: position and rule carry the hierarchy. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"layout\"] { border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); padding-top: 1.25rem; row-gap: 1.25rem; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"head\"] { gap: 0.25rem; max-width: none; margin: 0; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"heading\"] {\n  font-family: var(--font-heading);\n  font-size: 1.0625rem;\n  line-height: 1.35;\n  font-weight: 600;\n  letter-spacing: 0;\n  font-stretch: 100%;\n  color: var(--rb-surface-heading-color);\n}\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"intro\"] { font-size: 0.9375rem; line-height: 1.5; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"eyebrow\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"caption\"] { font-size: 0.8125rem; line-height: 1.4; font-weight: 500; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* Tabular figures for data: times, dates, places, counters. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"date\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"time\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"numeral\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"places\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"places-low\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"places-full\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"counter\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"facts\"] { font-variant-numeric: tabular-nums; }\n\n/* The marker square: the accent has this one job. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"places-low\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"sticker\"] { display: inline-flex; align-items: baseline; gap: 0.625rem; color: var(--rb-surface-text-color); font-weight: 500; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"places-low\"]::before,\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"sticker\"]::before {\n  content: \"\";\n  width: 0.56em;\n  height: 0.56em;\n  flex: none;\n  background-color: var(--rb-surface-mark-color);\n}\n\n/* Square geometry wherever this skin draws a box or a photo. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"media\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-media\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"lead\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"panel\"] { border-radius: 0; box-shadow: none; }\n\n/* Owned item surfaces keep a faint sheet edge so they read where sheet and ground are close. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item\"]:not([data-surface=\"section\"]),\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"lead\"]:not([data-surface=\"section\"]) { box-shadow: inset 0 0 0 1px var(--rb-surface-line-color); }\n\n/* Column guides (knob, on by default where offered): the twelve real columns, drawn\n * from the gutter token. Decorative; they carry no text. */\n[data-skin=\"measure\"] [data-knob-column-guides=\"true\"] { overflow: clip; }\n[data-skin=\"measure\"] [data-knob-column-guides=\"true\"] [data-slot=\"frame\"] { isolation: isolate; }\n[data-skin=\"measure\"] [data-knob-column-guides=\"true\"] [data-slot=\"frame\"]::before {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n  top: -50rem;\n  bottom: -50rem;\n  left: 0;\n  right: calc(-1 * var(--rb-skin-gutter, 24px));\n  background-image: linear-gradient(to right, var(--rb-surface-line-color) 0 1px, transparent 1px var(--measure-guide-a), var(--rb-surface-line-color) var(--measure-guide-a) var(--measure-guide-b), transparent var(--measure-guide-b));\n  background-size: calc(100% / 12) 100%;\n  background-repeat: repeat-x;\n}\n\n/* ================================================================== HERO */\n/* Headline steps. Scale contrast is the point: Standard on a short line is the\n * 136px display size, set at 88% width from the style typography. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"headline\"] {\n  font-family: var(--font-heading);\n  font-weight: 500;\n  line-height: 0.93;\n  letter-spacing: -0.042em;\n  color: var(--rb-surface-heading-color);\n  font-size: clamp(2.5rem, 5.4cqi, 5.25rem);\n}\n[data-skin=\"measure\"] [data-length=\"short\"][data-knob-headline=\"display\"] [data-slot=\"headline\"] { font-size: clamp(3.5rem, 9.6cqi, 9.5rem); }\n[data-skin=\"measure\"] [data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3.25rem, 8.6cqi, 8.5rem); }\n[data-skin=\"measure\"] [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 6cqi, 6rem); }\n[data-skin=\"measure\"] [data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 6.4cqi, 6.5rem); line-height: 0.96; }\n[data-skin=\"measure\"] [data-length=\"medium\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.375rem, 4.8cqi, 4.75rem); line-height: 0.98; }\n[data-skin=\"measure\"] [data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(2rem, 3.8cqi, 3.75rem); line-height: 1.02; letter-spacing: -0.03em; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"lede\"] { font-size: 1.0625rem; line-height: 1.55; color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"actions\"] { gap: 0.75rem 1.5rem; align-items: center; }\n\n/* headline-row \u00B7 guides: the display headline across the grid over the guides, then the\n * lede under a heavy rule and the photo on columns 7 to 12. */\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"frame\"] { align-items: start; row-gap: 0; }\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"headline\"] { grid-column: 1 / 12; max-width: 11.5em; margin-bottom: clamp(3rem, 6cqi, 6rem); }\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"copy\"] { grid-column: 1 / 7; align-content: start; padding-top: 0.875rem; border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); gap: 1.75rem; }\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"copy\"] > [data-slot=\"lede\"] { max-width: 24em; }\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"media\"] { grid-column: 7 / 13; aspect-ratio: 3 / 2; align-self: start; }\n[data-skin=\"measure\"] [data-treat=\"guides\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 7; }\n[data-skin=\"measure\"] [data-treat=\"guides\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 7 / 13; }\n[data-skin=\"measure\"] [data-treat=\"guides\"][data-has-photo=\"false\"] [data-slot=\"copy\"] { grid-column: 4 / 10; }\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: 0; top: calc(100% + 0.75rem); }\n\n/* split \u00B7 grid: the copy on columns 1 to 4 under a heavy rule with the smaller display\n * headline at 92% width; the photo on 5 to 12 at 3:2. */\n[data-skin=\"measure\"] [data-treat=\"grid\"] [data-slot=\"frame\"] { align-items: start; }\n[data-skin=\"measure\"] [data-treat=\"grid\"] [data-slot=\"copy\"] { grid-column: 1 / 5; align-content: start; padding-top: 0.875rem; border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-treat=\"grid\"] [data-slot=\"media\"] { grid-column: 5 / 13; aspect-ratio: 3 / 2; }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 9 / 13; }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 9; }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-has-photo=\"false\"] [data-slot=\"copy\"] { grid-column: 1 / 9; }\n[data-skin=\"measure\"] [data-treat=\"grid\"] [data-slot=\"headline\"] { line-height: 1; letter-spacing: -0.032em; font-stretch: 92%; }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-length] [data-slot=\"headline\"] { font-size: clamp(2.25rem, 4.3cqi, 4rem); }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(1.875rem, 3.4cqi, 3.125rem); }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(1.75rem, 3cqi, 2.75rem); }\n[data-skin=\"measure\"] [data-treat=\"grid\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: 0; top: calc(100% + 0.75rem); }\n\n/* copy-over-gallery \u00B7 full-grid: the headline across the grid, the lede and actions set in\n * to the main measure, then the photo across all twelve columns. */\n[data-skin=\"measure\"] [data-treat=\"full-grid\"] [data-slot=\"copy\"] { grid-column: 1 / -1; gap: 1.75rem; }\n[data-skin=\"measure\"] [data-treat=\"full-grid\"] [data-slot=\"lede\"],\n[data-skin=\"measure\"] [data-treat=\"full-grid\"] [data-slot=\"actions\"] { margin-inline-start: var(--measure-indent); max-width: 34em; }\n[data-skin=\"measure\"] [data-treat=\"full-grid\"] [data-slot=\"gallery\"] { margin-top: 3.5rem; }\n[data-skin=\"measure\"] [data-treat=\"full-grid\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 21 / 9; }\n[data-skin=\"measure\"] [data-treat=\"full-grid\"] [data-slot=\"gallery\"] [data-slot=\"sticker\"] { position: absolute; left: 0; top: calc(100% + 0.75rem); }\n\n/* page-head \u00B7 facts-strip: the display title over the guides, the lede set in, a heavy rule\n * under it all. Facts (a later content field) would follow as a strip of figures. */\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"copy\"] { grid-column: 1 / -1; gap: 1.75rem; padding-bottom: clamp(2.5rem, 4cqi, 4rem); border-bottom: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"lede\"],\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"actions\"] { margin-inline-start: var(--measure-indent); max-width: 36em; }\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"lede\"] { font-size: clamp(1.1875rem, 1.6cqi, 1.375rem); }\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"facts\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3.5rem, 6cqi, 6rem); }\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"facts\"] > * { padding-top: 0.875rem; border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"caption\"] { order: -1; }\n\n/* ========================================================== FEATURE CARDS */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-title\"] {\n  font-family: var(--font-heading);\n  font-size: 1.375rem;\n  line-height: 1.25;\n  font-weight: 500;\n  letter-spacing: -0.01em;\n  font-stretch: 100%;\n  color: var(--rb-surface-heading-color);\n}\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-text\"] { color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-body\"] { display: grid; gap: 0.875rem; align-content: start; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-media\"] { margin: 0 0 1.125rem; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-actions\"] { font-weight: 500; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"numeral\"] {\n  font-size: 56px;\n  line-height: 0.9;\n  font-weight: 400;\n  letter-spacing: -0.04em;\n  font-stretch: 88%;\n  color: var(--rb-surface-text-color);\n}\n\n/* cards \u00B7 sheets: square sheets in the main measure, the photo flush at the top. */\n[data-skin=\"measure\"] [data-treat=\"sheets\"] [data-slot=\"items\"] { gap: 2.5rem var(--rb-skin-gutter, 24px); }\n[data-skin=\"measure\"] [data-treat=\"sheets\"] [data-slot=\"item-media\"] { margin: 0; aspect-ratio: 3 / 2; }\n[data-skin=\"measure\"] [data-treat=\"sheets\"] [data-slot=\"item-body\"] { padding: 1.5rem; }\n\n/* cards \u00B7 open: boxless columns in the main measure. */\n[data-skin=\"measure\"] [data-treat=\"open\"] [data-slot=\"items\"] { gap: 3.5rem var(--rb-skin-gutter, 24px); }\n[data-skin=\"measure\"] [data-treat=\"open\"] [data-slot=\"item\"] { padding: 0; }\n[data-skin=\"measure\"] [data-treat=\"open\"] [data-slot=\"item-media\"] { aspect-ratio: 4 / 3; }\n\n/* lead-support \u00B7 breakout: the lead is the brand field (statement role) at card scale,\n * its photo on 8 of the main columns and its text beside it; the rest follow as hairline columns. */\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"items\"] { column-gap: var(--rb-skin-gutter, 24px); }\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"lead\"] { column-gap: var(--rb-skin-gutter, 24px); padding: clamp(1.25rem, 2.8cqi, 2.5rem); margin-bottom: 0.5rem; }\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { grid-column: 1 / 7; aspect-ratio: 4 / 3; min-height: 0; margin: 0; }\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { grid-column: 7 / 13; align-self: start; gap: 1.25rem; }\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"lead\"] [data-slot=\"item-title\"] { font-size: clamp(1.875rem, 3cqi, 2.75rem); letter-spacing: -0.03em; line-height: 1.02; font-stretch: 92%; }\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"items\"] > [data-slot=\"item\"] { padding-top: 0.875rem; border-top: 1px solid var(--rb-surface-line-color); }\n\n/* index \u00B7 price-index: hairline rows in the main measure; title and text left, actions right. */\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item\"] {\n  grid-template-columns: minmax(0, 1fr) auto;\n  padding-block: 1.375rem 1.5rem;\n  border-bottom: 1px solid var(--rb-surface-line-color);\n}\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item\"]:first-child { padding-top: 0; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item\"] > *,\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item\"] > [data-slot=\"item-title\"] { grid-column: 1; grid-row: auto; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item\"] > [data-slot=\"item-actions\"] { grid-column: 2; grid-row: 1 / span 3; align-self: start; justify-self: end; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item-text\"] { max-width: 34em; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] { grid-template-columns: 4rem minmax(0, 1fr) auto; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > * { grid-column: 2; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > [data-slot=\"numeral\"] { grid-column: 1; grid-row: 1 / span 3; font-size: 1.375rem; font-weight: 500; letter-spacing: 0; font-stretch: 100%; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > [data-slot=\"item-actions\"] { grid-column: 3; }\n\n/* sequence \u00B7 numbered: large light numerals over a hairline. Only real sequences are numbered. */\n[data-skin=\"measure\"] [data-treat=\"numbered\"] [data-slot=\"items\"] { gap: 2.5rem var(--rb-skin-gutter, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }\n[data-skin=\"measure\"] [data-treat=\"numbered\"] [data-slot=\"item-media\"] { display: none; }\n[data-skin=\"measure\"] [data-treat=\"numbered\"] [data-slot=\"numeral\"] { font-size: 72px; padding-bottom: 1.125rem; margin-bottom: 0.375rem; border-bottom: 1px solid var(--rb-surface-line-color); }\n\n/* ============================================================== CALENDAR */\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"item-title\"] { font-size: 1.375rem; }\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"item-meta\"],\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"time-length\"],\n[data-skin=\"measure\"] [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]),\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"places\"],\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"places-full\"] { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"places-low\"] { font-size: 0.9375rem; }\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"day\"],\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"time-start\"] { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; font-stretch: 100%; color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]) { color: var(--rb-surface-text-color); font-size: 1.375rem; line-height: 1.2; }\n\n/* ledger \u00B7 rows: hairline rows, the date as one line. */\n[data-skin=\"measure\"] [data-treat=\"rows\"] [data-slot=\"row\"],\n[data-skin=\"measure\"] [data-treat=\"rows\"] [data-slot=\"row-continued\"] {\n  grid-template-columns: 7rem minmax(0, 1fr) auto;\n  align-items: baseline;\n  padding-block: 1.25rem;\n  border-top: 1px solid var(--rb-surface-line-color);\n}\n[data-skin=\"measure\"] [data-treat=\"rows\"][data-mode=\"list\"] [data-slot=\"list\"] { border-bottom: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"rows\"] [data-slot=\"date\"] { flex-direction: row; gap: 0.375rem; align-items: baseline; }\n\n/* day-groups \u00B7 rail: a heavy rule on each day, hairlines between its sessions. */\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"group\"] { border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); padding-block: 0.875rem 0.5rem; }\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"group-label\"] { gap: 0.125rem; }\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"group-day\"] { font-size: 1.0625rem; font-weight: 600; color: var(--rb-surface-heading-color); }\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"group-date\"] { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"row\"] { border-bottom: 1px solid var(--rb-surface-line-color); align-items: baseline; padding-top: 0.25rem; }\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"row\"]:last-child { border-bottom: 0; }\n\n/* grid \u00B7 big-day: square sheets (the card role) led by a large day number. */\n[data-skin=\"measure\"] [data-treat=\"big-day\"] [data-slot=\"list\"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rb-skin-gutter, 24px); }\n[data-skin=\"measure\"] [data-treat=\"big-day\"] [data-slot=\"item\"] { display: grid; align-content: start; gap: 0.875rem; padding: 1.5rem 1.5rem 1.75rem; }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"big-day\"] [data-slot=\"date\"] { flex-direction: row; align-items: flex-end; gap: 0.625rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] [data-treat=\"big-day\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 72px; line-height: 0.8; font-weight: 500; letter-spacing: -0.05em; font-stretch: 88%; }\n[data-skin=\"measure\"] [data-treat=\"big-day\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]) { font-size: 0.9375rem; font-weight: 500; }\n[data-skin=\"measure\"] [data-treat=\"big-day\"] [data-slot=\"item-body\"] { padding: 0; }\n\n/* compact \u00B7 compact: no box; a heavy rule over the panel, the marker on the first row. */\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"panel\"] { border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); padding-top: 0.875rem; }\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"panel-heading\"] { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.5rem; }\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"row\"] { border-top: 1px solid var(--rb-surface-line-color); padding-block: 0.75rem; }\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"date\"] [data-slot=\"day\"],\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"time-start\"],\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"date-label\"] { font-size: 1.0625rem; }\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"item-title\"] { font-size: 1.1875rem; }\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"list\"] > [data-slot=\"row\"]:first-child [data-slot=\"time\"]::before {\n  content: \"\";\n  display: inline-block;\n  width: 0.56em;\n  height: 0.56em;\n  margin-right: 0.5rem;\n  background-color: var(--rb-surface-mark-color);\n}\n\n/* month-grid \u00B7 fill and month-day \u00B7 day-rail: square cells on hairlines, today marked by the square. */\n[data-skin=\"measure\"] :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) [data-slot=\"grid\"] { gap: 0; border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); }\n[data-skin=\"measure\"] :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) [data-slot=\"group-label\"] { padding: 0.625rem 0.5rem 0.625rem 0; font-size: 0.8125rem; font-weight: 500; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); border-bottom: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) [data-slot=\"date\"] { gap: 0.25rem; padding: 0.5rem 0.5rem 0.625rem 0; border-bottom: 1px solid var(--rb-surface-line-color); min-height: 6.5rem; }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"date\"] { min-height: 4rem; }\n[data-skin=\"measure\"] :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) :is([data-slot=\"control\"], [data-slot=\"date-label\"]) {\n  justify-self: start;\n  display: inline-flex;\n  align-items: baseline;\n  gap: 0.375rem;\n  width: auto;\n  min-width: 2.75rem;\n  height: auto;\n  min-height: 2.75rem;\n  padding: 0;\n  border: 0;\n  justify-content: start;\n  font-size: 1.375rem;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  letter-spacing: -0.01em;\n}\n\n[data-skin=\"measure\"] [data-treat=\"fill\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: block; font-size: 0.8125rem; line-height: 1.35; color: var(--rb-surface-text-color); padding-top: 0.25rem; border-top: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] [data-treat=\"fill\"] [data-slot=\"date\"] [data-slot=\"time\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"date\"] [data-slot=\"item-meta\"] { font-size: 0.8125rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"panel\"] { border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); padding-top: 0.875rem; }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"panel-heading\"] { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.5rem; }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"panel\"] [data-slot=\"row\"] { display: block; padding-block: 0.75rem; border-top: 1px solid var(--rb-surface-line-color); }\n\n/* ========================================================== TESTIMONIALS */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"quote\"] { color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"attribution\"] { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"] { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--rb-surface-text-color); }\n\n/* lead-rest and single \u00B7 hanging: the lead quote large in the main measure with its opening\n * mark hung into the gutter; the small quotes on hairlines below. */\n[data-skin=\"measure\"] [data-treat=\"hanging\"] [data-slot=\"lead\"] > [data-slot=\"quote\"],\n[data-skin=\"measure\"] [data-arrangement=\"single\"][data-treat=\"hanging\"] [data-slot=\"quote\"],\n[data-skin=\"measure\"] [data-treat=\"counter\"] [data-slot=\"quote\"] {\n  position: relative;\n  font-size: clamp(1.5625rem, 2.55cqi, 2.375rem);\n  line-height: 1.2;\n  letter-spacing: -0.018em;\n}\n[data-skin=\"measure\"] [data-treat=\"hanging\"] [data-slot=\"lead\"] > [data-slot=\"quote\"]::before,\n[data-skin=\"measure\"] [data-arrangement=\"single\"][data-treat=\"hanging\"] [data-slot=\"quote\"]::before,\n[data-skin=\"measure\"] [data-treat=\"counter\"] [data-slot=\"quote\"]::before { content: \"\\201C\"; position: absolute; right: 100%; top: 0; }\n[data-skin=\"measure\"] [data-arrangement=\"lead-rest\"][data-treat=\"hanging\"] [data-slot=\"items\"] { row-gap: 3.5rem; column-gap: var(--rb-skin-gutter, 24px); }\n[data-skin=\"measure\"] [data-arrangement=\"lead-rest\"][data-treat=\"hanging\"] [data-slot=\"lead\"] { gap: 1.25rem; }\n[data-skin=\"measure\"] [data-arrangement=\"lead-rest\"][data-treat=\"hanging\"] [data-slot=\"items\"] > [data-slot=\"item\"],\n[data-skin=\"measure\"] [data-treat=\"hairline\"] [data-slot=\"items\"] > [data-slot=\"item\"] {\n  padding-top: 1rem;\n  border-top: 1px solid var(--rb-surface-line-color);\n  gap: 0.75rem;\n}\n\n/* slides \u00B7 counter: the quote large, a hairline, then the count on the left and square arrows right. */\n[data-skin=\"measure\"] [data-treat=\"counter\"] [data-slot=\"controls\"] { border-top: 1px solid var(--rb-surface-line-color); padding-top: 0.875rem; margin-top: 1.75rem; }\n[data-skin=\"measure\"] [data-treat=\"counter\"] [data-slot=\"counter\"] { order: -1; margin-right: auto; font-size: 1.375rem; font-weight: 500; color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"controls\"] [data-slot=\"control\"] {\n  width: 44px;\n  height: 44px;\n  border-radius: 0;\n  border: 1.5px solid var(--rb-surface-text-color);\n  color: var(--rb-surface-text-color);\n  background-color: transparent;\n}\n\n/* ================================================================= PHONE */\n/* Phone headline steps fit the longest word each length allows in a 358px column at 88% width:\n * short (12 characters, \"Commonwealth\") at 52px, medium (18) at 36px; long titles wrap.\n * Phone rules qualify the root with :is(*, :scope): the preview container generator wraps them\n * in a scope rule, where a selector reaches the scope root only through :scope. */\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"measure\"]:is(*, :scope) [data-arrangement] { --measure-indent: 0px; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: 4rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: 3rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-knob-column-guides=\"true\"] [data-slot=\"frame\"]::before { background-size: calc(100% / 4) 100%; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-length=\"short\"] [data-slot=\"headline\"] { font-size: 3.25rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: 2.75rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-length=\"medium\"] [data-slot=\"headline\"] { font-size: 2.25rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-length=\"long\"] [data-slot=\"headline\"] { font-size: 1.875rem; }\n\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat] [data-slot=\"copy\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat] [data-slot=\"media\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat][data-knob-image-position=\"left\"] [data-slot=\"copy\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat][data-knob-image-position=\"left\"] [data-slot=\"media\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"guides\"] [data-slot=\"headline\"] { grid-column: 1 / -1; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"guides\"] [data-slot=\"headline\"] { margin-bottom: 1.5rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"grid\"] [data-slot=\"media\"] { order: 2; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat] [data-slot=\"media\"]:has([data-slot=\"sticker\"]) { margin-bottom: 2.25rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"full-grid\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 4 / 3; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"facts-strip\"] [data-slot=\"facts\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }\n\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"breakout\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"breakout\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { grid-column: 1 / -1; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"price-index\"] [data-slot=\"item\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"price-index\"] [data-slot=\"item\"] > [data-slot=\"item-actions\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > * { grid-column: 1; grid-row: auto; justify-self: start; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"numbered\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"numbered\"] [data-slot=\"item\"] { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"numbered\"] [data-slot=\"item\"] > * { grid-column: 2; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"numbered\"] [data-slot=\"numeral\"] { grid-column: 1; grid-row: 1 / span 3; font-size: 44px; border: 0; padding: 0; margin: 0; }\n\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"rows\"] [data-slot=\"row\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"rows\"] [data-slot=\"row-continued\"] { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 0.875rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-arrangement][data-treat=\"rows\"] [data-slot=\"action\"] { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 0.5rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"rows\"] [data-slot=\"date\"] { flex-direction: column; gap: 0; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"day\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]),\n  [data-skin=\"measure\"]:is(*, :scope) [data-mode=\"list\"] [data-slot=\"time-start\"] { font-size: 1.1875rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"big-day\"] [data-slot=\"list\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"measure\"]:is(*, :scope) :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) [data-slot=\"date\"] { min-height: 3.25rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"fill\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: none; }\n  [data-skin=\"measure\"]:is(*, :scope) :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) :is([data-slot=\"control\"], [data-slot=\"date-label\"]) { font-size: 1.0625rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"day-rail\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"hanging\"] [data-slot=\"lead\"] > [data-slot=\"quote\"]::before,\n  [data-skin=\"measure\"]:is(*, :scope) [data-arrangement=\"single\"][data-treat=\"hanging\"] [data-slot=\"quote\"]::before,\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"counter\"] [data-slot=\"quote\"]::before { position: static; }\n}\n}\n\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"attribution\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n[data-skin=\"measure\"] [data-arrangement] :is([data-slot=\"lede\"], [data-slot=\"intro\"], [data-slot=\"item-meta\"], [data-slot=\"attribution\"]) { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* Event date parts are written as entered, with no text-transform. */\n[data-skin=\"measure\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] { text-transform: none; }\n\n[data-skin=\"measure\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] :is([data-slot=\"weekday\"], [data-slot=\"day\"], [data-slot=\"month\"]) { text-transform: none; }\n\n/* Duration and fee pairs share the measured catalogue register. */\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"facts\"] { border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-block: 0.75rem; justify-content: space-between; }\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"facts\"] [data-slot=\"fact-value\"] { font-variant-numeric: tabular-nums; font-weight: 700; }\n[data-skin=\"measure\"] [data-slot=\"figure-value\"] { font-family: var(--font-heading); font-weight: 900; font-size: clamp(3rem, 7cqi, 6rem); }\n[data-skin=\"measure\"] [data-slot=\"chip\"] { border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] [data-slot=\"schedule\"] { font-variant-numeric: tabular-nums; }\n\n/* The individual-page facts strip, populated by live event data. */\n[data-skin=\"measure\"] [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-block: 1.25rem; }\n[data-skin=\"measure\"] [data-arrangement=\"event-header\"] [data-slot=\"fact-value\"] { font-variant-numeric: tabular-nums; font-size: 1.25rem; }\n[data-skin=\"measure\"] [data-arrangement=\"event-header\"] [data-slot=\"headline\"] { font-weight: 800; letter-spacing: -0.04em; }\n\n/* price-index on a live catalogue: the words run down the main column, the duration and fee sit\n * in their own column and the action ends the row, as in the mockup session index. */\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) { grid-template-columns: minmax(0, 1fr) minmax(0, 13rem) auto; column-gap: 2rem; align-items: start; }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) > * { grid-column: 1; grid-row: auto; }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) > [data-slot=\"facts\"] { grid-column: 2; grid-row: 1 / span 4; }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) > [data-slot=\"item-actions\"] { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; justify-self: end; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"measure\"]:is(*, :scope) [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"measure\"]:is(*, :scope) [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) > :is([data-slot=\"facts\"], [data-slot=\"item-actions\"]) { grid-column: 1; grid-row: auto; justify-self: start; }\n}\n}\n\n/* Next three: the date reads on one line (\"Mon 5 Oct\") and the sheet keeps an inner margin. */\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"compact\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) [data-slot=\"date\"] { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 0.3em; }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"compact\"] [data-slot=\"panel\"]:is([data-slot]) { padding: 0.875rem 1.25rem 1.25rem; }\n/* Catalogue group headings sit one step under the rail heading, in the body weight scale. */\n[data-skin=\"measure\"] [data-arrangement] { --rb-skin-group-heading-size: 1.0625rem; }\n\n/* Live next dates use the same card parts in every arrangement. */\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"dates\"] { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; padding-block: 0.625rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); font-variant-numeric: tabular-nums; }\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"date-places\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.875rem; }\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"navigation\"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; padding-block: 0.875rem; margin-bottom: 1rem; border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { font: inherit; color: var(--rb-surface-text-color); padding: 0.5rem 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 0); }\n\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"time\"] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { font-size: 0.9375rem; }\n[data-skin=\"measure\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { border-radius: 0; font-size: 0.9375rem; }";
+export declare const containerResponsiveThemeCss = "/*\n * Blocks Theme CSS\n *\n * Import order matters for CSS cascade.\n * SDK bundler (packages/sdk/tsup.config.ts) parses this file to determine bundle order.\n *\n * Layer order: rb-theme (lowest priority) < rb-utilities (highest priority)\n * This allows utility classes like .rb-text-sm to override theme defaults.\n *\n * 1. Layer order declaration\n * 2. RB utilities (@layer rb-utilities) - highest priority, overrides theme\n * 3. Core theme styles (@layer rb-theme) - typography, prose, gradients\n * 4. Accordion animations - keyframes and animation rules\n * 5. Block-specific static CSS - all block styling\n */\n@layer rb-theme, rb-utilities;\n\n/*\n * RB Utilities (CSS-only)\n *\n * Lightweight, hand-maintained utility classes used by block runtime markup.\n * These replace Tailwind utility usage without requiring Tailwind CLI/runtime.\n */\n\n@layer rb-utilities {\n  /* Screen-reader only */\n  .rb-sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* Labels */\n  .rb-label {\n    font-size: 0.75rem;\n    line-height: 1rem;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  /* Eyebrow text - small uppercase labels for section introductions.\n     Each property resolves from the optional eyebrow typographic role\n     (--fs/--fw/--ls/--tt-eyebrow, emitted only when the theme sets them),\n     with the historical hardcoded values as fallbacks so existing themes\n     are unchanged. font-family falls back to the body font likewise. */\n  .rb-eyebrow {\n    font-family: var(--font-eyebrow, var(--font-body));\n    font-size: var(--fs-eyebrow, 0.875rem);\n    font-weight: var(--fw-eyebrow, 600);\n    letter-spacing: var(--ls-eyebrow, 0.025em);\n    text-transform: var(--tt-eyebrow, uppercase);\n  }\n  .rb-eyebrow-treatment-accent {\n    color: rgb(var(--tb-accent));\n  }\n  .rb-eyebrow-treatment-pill {\n    align-self: center;\n    display: inline-flex;\n    width: fit-content;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 46%, transparent);\n    border-radius: 9999px;\n    background: color-mix(in srgb, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);\n    padding: 0.5rem 1rem;\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    line-height: 1;\n  }\n  .rb-eyebrow-treatment-pill.rb-eyebrow-treatment-accent {\n    border-color: rgb(var(--tb-accent));\n    border-width: 2px;\n    background: rgb(var(--tb-onAccent, 255 255 255) / 0.7);\n    padding: 0.85rem 1.25rem;\n    color: rgb(var(--tb-accent));\n  }\n  .rb-eyebrow-treatment-pill-bounce {\n    animation: rb-eyebrow-pill-bounce 2s ease-in-out infinite;\n    margin: 0 auto 1.5rem;\n    transform-origin: center;\n    will-change: transform;\n  }\n  @keyframes rb-eyebrow-pill-bounce {\n    0% {\n      transform: translateY(-25%);\n      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n    }\n    50% {\n      transform: none;\n      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    }\n    100% {\n      transform: translateY(-25%);\n      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .rb-eyebrow-treatment-pill-bounce {\n      animation: none;\n      will-change: auto;\n    }\n  }\n\n  /* Caption text - small secondary text for captions and metadata (non-uppercase) */\n  .rb-caption {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    font-weight: 400;\n  }\n\n  /* Media shape treatments */\n  .rb-media-shape-square,\n  .rb-media-shape-rounded,\n  .rb-media-shape-circle,\n  .rb-media-shape-arch {\n    overflow: hidden;\n  }\n  .rb-media-shape-square {\n    border-radius: 0;\n  }\n  .rb-media-shape-rounded {\n    border-radius: var(--rb-media-shape-radius, 1rem);\n  }\n  .rb-media-shape-circle {\n    border-radius: 9999px;\n  }\n  .rb-media-shape-arch {\n    border-radius: 9999px 9999px var(--rb-media-shape-arch-base-radius, 0.125rem)\n      var(--rb-media-shape-arch-base-radius, 0.125rem);\n  }\n\n  /* Navigation typography */\n  .rb-nav-text {\n    font-size: 0.875rem;\n    font-weight: 500;\n  }\n  .rb-nav-text-mobile {\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  /* Display */\n  .rb-min-h-screen {\n    min-height: 100vh;\n  }\n  .rb-min-h-full {\n    min-height: 100%;\n  }\n  .rb-block {\n    display: block;\n  }\n  .rb-inline-block {\n    display: inline-block;\n  }\n  .rb-flex {\n    display: flex;\n  }\n  .rb-inline-flex {\n    display: inline-flex;\n  }\n  .rb-grid {\n    display: grid;\n  }\n  .rb-hidden {\n    display: none;\n  }\n  .rb-isolate {\n    isolation: isolate;\n  }\n\n  /* Position */\n  .rb-relative {\n    position: relative;\n  }\n  .rb-absolute {\n    position: absolute;\n  }\n  .rb-fixed {\n    position: fixed;\n  }\n  .rb-sticky {\n    position: sticky;\n  }\n  .rb-inset-0 {\n    inset: 0;\n  }\n  .rb-top-0 {\n    top: 0;\n  }\n  .rb-top-4 {\n    top: 1rem;\n  }\n  .rb-top-full {\n    top: 100%;\n  }\n  .rb-top-1\\/2 {\n    top: 50%;\n  }\n  .rb-bottom-0 {\n    bottom: 0;\n  }\n  .rb-left-0 {\n    left: 0;\n  }\n  .rb-left-1\\/2 {\n    left: 50%;\n  }\n  .rb-right-0 {\n    right: 0;\n  }\n\n  /* Anchors (background positioning helpers) */\n  .rb-anchor-center {\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n  .rb-anchor-top {\n    left: 50%;\n    top: 0;\n    transform: translateX(-50%);\n  }\n  .rb-anchor-bottom {\n    left: 50%;\n    bottom: 0;\n    transform: translateX(-50%);\n  }\n  .rb-anchor-left {\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .rb-anchor-right {\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .rb-anchor-top-left {\n    left: 0;\n    top: 0;\n  }\n  .rb-anchor-top-right {\n    right: 0;\n    top: 0;\n  }\n  .rb-anchor-bottom-left {\n    left: 0;\n    bottom: 0;\n  }\n  .rb-anchor-bottom-right {\n    right: 0;\n    bottom: 0;\n  }\n\n  /* Z-index */\n  .rb-z-neg-10 {\n    z-index: -10;\n  }\n  .rb-z-0 {\n    z-index: 0;\n  }\n  .rb-z-10 {\n    z-index: 10;\n  }\n  .rb-z-40 {\n    z-index: 40;\n  }\n  .rb-z-50 {\n    z-index: 50;\n  }\n\n  /* Sizing */\n  .rb-w-auto {\n    width: auto;\n  }\n  .rb-w-full {\n    width: 100%;\n  }\n  .rb-w-calc-100-minus-2rem {\n    width: calc(100% - 2rem);\n  }\n  .rb-w-4 {\n    width: 1rem;\n  }\n  .rb-w-5 {\n    width: 1.25rem;\n  }\n  .rb-w-10 {\n    width: 2.5rem;\n  }\n  .rb-w-12 {\n    width: 3rem;\n  }\n  .rb-w-24 {\n    width: 6rem;\n  }\n  .rb-h-0\\.5 {\n    height: 0.125rem;\n  }\n  .rb-h-4 {\n    height: 1rem;\n  }\n  .rb-h-5 {\n    height: 1.25rem;\n  }\n  .rb-h-8 {\n    height: 2rem;\n  }\n  .rb-h-10 {\n    height: 2.5rem;\n  }\n  .rb-h-12 {\n    height: 3rem;\n  }\n  .rb-h-16 {\n    height: 4rem;\n  }\n  .rb-h-24 {\n    height: 6rem;\n  }\n  .rb-h-32 {\n    height: 8rem;\n  }\n  .rb-h-48 {\n    height: 12rem;\n  }\n  .rb-h-56 {\n    height: 14rem;\n  }\n  .rb-h-auto {\n    height: auto;\n  }\n  .rb-h-full {\n    height: 100%;\n  }\n  .rb-section-min-h-banner {\n    min-height: clamp(16rem, 34svh, 24rem);\n  }\n  .rb-section-min-h-hero {\n    min-height: clamp(32rem, 62svh, 44rem);\n  }\n  .rb-section-min-h-immersive {\n    min-height: clamp(38rem, 78svh, 54rem);\n  }\n  .rb-section-min-h-banner > .rb-container,\n  .rb-section-min-h-hero > .rb-container,\n  .rb-section-min-h-immersive > .rb-container {\n    min-height: inherit;\n  }\n  .rb-min-w-0 {\n    min-width: 0;\n  }\n  .rb-min-w-12rem {\n    min-width: 12rem;\n  }\n  .rb-max-w-none {\n    max-width: none;\n  }\n  .rb-max-w-xl {\n    max-width: 36rem;\n  }\n  .rb-max-w-2xl {\n    max-width: 42rem;\n  }\n  .rb-max-w-3xl {\n    max-width: 48rem;\n  }\n  .rb-max-w-4xl {\n    max-width: 56rem;\n  }\n  .rb-max-w-5xl {\n    max-width: 64rem;\n  }\n  .rb-max-w-6xl {\n    max-width: 72rem;\n  }\n  .rb-max-w-7xl {\n    max-width: 80rem;\n  }\n  .rb-max-w-prose {\n    max-width: 65ch;\n  }\n  .rb-aspect-video {\n    aspect-ratio: 16 / 9;\n  }\n\n  /* Flex */\n  .rb-flex-1 {\n    flex: 1 1 0%;\n  }\n  .rb-flex-col {\n    flex-direction: column;\n  }\n  .rb-flex-row {\n    flex-direction: row;\n  }\n  .rb-flex-wrap {\n    flex-wrap: wrap;\n  }\n  .rb-basis-full {\n    flex-basis: 100%;\n  }\n  .rb-basis-1-2 {\n    flex-basis: 50%;\n  }\n  .rb-basis-1-3 {\n    flex-basis: 33.333333%;\n  }\n  .rb-basis-1-4 {\n    flex-basis: 25%;\n  }\n  .rb-basis-1-5 {\n    flex-basis: 20%;\n  }\n  .rb-basis-1-6 {\n    flex-basis: 16.666667%;\n  }\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-basis-full {\n        flex-basis: 100%;\n      }\n      .rb-md-basis-1-2 {\n        flex-basis: 50%;\n      }\n      .rb-md-basis-1-3 {\n        flex-basis: 33.333333%;\n      }\n      .rb-md-basis-1-4 {\n        flex-basis: 25%;\n      }\n      .rb-md-basis-1-5 {\n        flex-basis: 20%;\n      }\n      .rb-md-basis-1-6 {\n        flex-basis: 16.666667%;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-basis-full {\n        flex-basis: 100%;\n      }\n      .rb-lg-basis-1-2 {\n        flex-basis: 50%;\n      }\n      .rb-lg-basis-1-3 {\n        flex-basis: 33.333333%;\n      }\n      .rb-lg-basis-1-4 {\n        flex-basis: 25%;\n      }\n      .rb-lg-basis-1-5 {\n        flex-basis: 20%;\n      }\n      .rb-lg-basis-1-6 {\n        flex-basis: 16.666667%;\n      }\n    }\n\n}\n  .rb-shrink-0 {\n    flex-shrink: 0;\n  }\n  .rb-flex-shrink-0 {\n    flex-shrink: 0;\n  }\n\n  /* Grid */\n  .rb-grid-rows-main-footer {\n    grid-template-rows: minmax(0, 1fr) auto;\n  }\n  .rb-grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .rb-row-start-1 {\n    grid-row-start: 1;\n  }\n  .rb-row-start-2 {\n    grid-row-start: 2;\n  }\n  .rb-col-start-1 {\n    grid-column-start: 1;\n  }\n  .rb-grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .rb-grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .rb-grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-sm-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-sm-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-sm-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-md-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-md-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n      .rb-md-col-span-2 {\n        grid-column: span 2 / span 2;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n      .rb-lg-grid-cols-5 {\n        grid-template-columns: repeat(5, minmax(0, 1fr));\n      }\n      .rb-lg-w-3\\/4 {\n        width: 75%;\n      }\n      .rb-lg-col-span-1 {\n        grid-column: span 1 / span 1;\n      }\n      .rb-lg-col-span-2 {\n        grid-column: span 2 / span 2;\n      }\n      .rb-lg-col-span-3 {\n        grid-column: span 3 / span 3;\n      }\n      .rb-lg-col-span-4 {\n        grid-column: span 4 / span 4;\n      }\n      .rb-lg-col-span-5 {\n        grid-column: span 5 / span 5;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1280px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-xl-grid-cols-2 {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n      .rb-xl-grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .rb-xl-grid-cols-4 {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n    }\n\n}\n\n  /*\n   * Responsive fractional grid tracks (rb-grid-tracks).\n   *\n   * Asymmetric AND responsive grid-template-columns, driven by inline custom\n   * properties the Grid primitive sets per breakpoint from string track\n   * templates:\n   *   --rb-gtc-base / --rb-gtc-sm / --rb-gtc-md / --rb-gtc-lg / --rb-gtc-xl\n   * Each breakpoint falls back to the next smaller one, so only the breakpoints\n   * an author actually sets take effect (e.g. base '1fr' + lg '1fr 0.9fr'\n   * collapses to a single column below lg). Authored here (not per node) so the\n   * @media -> @container conversion (container responsive mode) applies too.\n   */\n  .rb-grid-tracks {\n    grid-template-columns: var(--rb-gtc-base, 1fr);\n  }\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-sm, var(--rb-gtc-base, 1fr));\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)));\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr))));\n      }\n    }\n\n}\n  @container rb-site (min-width: 1280px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-grid-tracks {\n        grid-template-columns: var(--rb-gtc-xl, var(--rb-gtc-lg, var(--rb-gtc-md, var(--rb-gtc-sm, var(--rb-gtc-base, 1fr)))));\n      }\n    }\n\n}\n\n  /* Alignment */\n  .rb-items-start {\n    align-items: flex-start;\n  }\n  .rb-items-center {\n    align-items: center;\n  }\n  .rb-items-end {\n    align-items: flex-end;\n  }\n  .rb-items-stretch {\n    align-items: stretch;\n  }\n  .rb-items-baseline {\n    align-items: baseline;\n  }\n  .rb-justify-start {\n    justify-content: flex-start;\n  }\n  .rb-justify-center {\n    justify-content: center;\n  }\n  .rb-justify-end {\n    justify-content: flex-end;\n  }\n  .rb-justify-between {\n    justify-content: space-between;\n  }\n\n  /* Gap / spacing */\n  .rb-gap-0 {\n    gap: 0;\n  }\n  .rb-gap-1 {\n    gap: 0.25rem;\n  }\n  .rb-gap-2 {\n    gap: 0.5rem;\n  }\n  .rb-gap-3 {\n    gap: 0.75rem;\n  }\n  .rb-gap-4 {\n    gap: 1rem;\n  }\n  .rb-gap-5 {\n    gap: 1.25rem;\n  }\n  .rb-gap-6 {\n    gap: 1.5rem;\n  }\n  .rb-gap-8 {\n    gap: 2rem;\n  }\n  .rb-gap-10 {\n    gap: 2.5rem;\n  }\n  .rb-gap-x-6 {\n    column-gap: 1.5rem;\n  }\n  .rb-gap-x-8 {\n    column-gap: 2rem;\n  }\n  .rb-gap-y-3 {\n    row-gap: 0.75rem;\n  }\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-gap-0 {\n        gap: 0;\n      }\n      .rb-md-gap-10 {\n        gap: 2.5rem;\n      }\n    }\n\n}\n\n  .rb-space-y-1 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.25rem;\n  }\n  .rb-space-y-2 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.5rem;\n  }\n  .rb-space-y-3 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 0.75rem;\n  }\n  .rb-space-y-6 > :not([hidden]) ~ :not([hidden]) {\n    margin-top: 1.5rem;\n  }\n\n  /* Padding */\n  .rb-p-0 {\n    padding: 0;\n  }\n  .rb-p-2 {\n    padding: 0.5rem;\n  }\n  .rb-p-3 {\n    padding: 0.75rem;\n  }\n  .rb-p-4 {\n    padding: 1rem;\n  }\n  .rb-p-5 {\n    padding: 1.25rem;\n  }\n  .rb-p-6 {\n    padding: 1.5rem;\n  }\n  .rb-p-8 {\n    padding: 2rem;\n  }\n  .rb-p-12 {\n    padding: 3rem;\n  }\n  .rb-px-3 {\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n  }\n  .rb-px-4 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-px-6 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n  .rb-pl-4 {\n    padding-left: 1rem;\n  }\n  .rb-py-1 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n  .rb-py-1\\.5 {\n    padding-top: 0.375rem;\n    padding-bottom: 0.375rem;\n  }\n  .rb-py-2 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .rb-py-3 {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n  .rb-py-4 {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n  .rb-py-6 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n  .rb-py-10 {\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n  }\n  /* Clearance for a surface that is not an authored block page.\n     An authored page gets this through its opening block's container (see the\n     overlay-clearance rule in styles.css). A reserved surface or a system\n     destination page has no such block, so it consumes the same variable here.\n     Marked with one class rather than per-surface selectors, because the last\n     two additions to this family were both missed and shipped overlapping. */\n  :where(.theme-scope)\n    [data-site-document-layout-mode=\"header-overlay\"]\n    .rb-overlay-clearance-surface {\n    padding-top: calc(\n      var(--site-overlay-header-clearance, 5.5rem) +\n        var(--site-overlay-opening-content-extra-pad, clamp(1rem, 2vw, 1.75rem))\n    );\n  }\n  /* Floating site overlays (a booking bar, a cookie banner, a sticky promo)\n     mark themselves [data-rb-site-overlay]. While a preview is in edit mode\n     (the preview shell sets the root attribute) they step aside, out of the\n     focus order too; switching back to viewing restores them as they were. */\n  :root[data-rb-preview-mode=\"edit\"] [data-rb-site-overlay] {\n    display: none;\n  }\n  .rb-preview-editor-offset {\n    padding-bottom: calc(\n      var(--builder-editor-chrome-offset, 0px) +\n      var(--builder-preview-banner-offset, 0px)\n    );\n  }\n  .rb-py-12 {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n  .rb-py-16 {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n  .rb-pb-4 {\n    padding-bottom: 1rem;\n  }\n  .rb-pb-6 {\n    padding-bottom: 1.5rem;\n  }\n  .rb-pt-4 {\n    padding-top: 1rem;\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-sm-py-16 {\n        padding-top: 4rem;\n        padding-bottom: 4rem;\n      }\n      .rb-sm-py-20 {\n        padding-top: 5rem;\n        padding-bottom: 5rem;\n      }\n      .rb-sm-p-6 {\n        padding: 1.5rem;\n      }\n      .rb-sm-flex {\n        display: flex;\n      }\n      .rb-sm-block {\n        display: block;\n      }\n      .rb-sm-inline {\n        display: inline;\n      }\n      .rb-sm-inline-block {\n        display: inline-block;\n      }\n      .rb-sm-inline-flex {\n        display: inline-flex;\n      }\n      .rb-sm-grid {\n        display: grid;\n      }\n      .rb-sm-hidden {\n        display: none;\n      }\n      .rb-sm-flex-row {\n        flex-direction: row;\n      }\n      .rb-sm-items-start {\n        align-items: flex-start;\n      }\n      .rb-sm-items-center {\n        align-items: center;\n      }\n      .rb-sm-justify-between {\n        justify-content: space-between;\n      }\n      .rb-sm-p-8 {\n        padding: 2rem;\n      }\n      .rb-sm-text-lg {\n        font-size: 1.125rem;\n        line-height: 1.75rem;\n      }\n      .rb-sm-text-xl {\n        font-size: 1.25rem;\n        line-height: 1.75rem;\n      }\n      .rb-sm-text-4xl {\n        font-size: 2.25rem;\n        line-height: 2.5rem;\n      }\n\n      .rb-sm-w-auto {\n        width: auto;\n      }\n    }\n\n}\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-md-py-20 {\n        padding-top: 5rem;\n        padding-bottom: 5rem;\n      }\n      .rb-md-py-24 {\n        padding-top: 6rem;\n        padding-bottom: 6rem;\n      }\n      .rb-md-w-1\\/3 {\n        width: 33.333333%;\n      }\n\n      .rb-md-flex {\n        display: flex;\n      }\n      .rb-md-block {\n        display: block;\n      }\n      .rb-md-inline {\n        display: inline;\n      }\n      .rb-md-inline-block {\n        display: inline-block;\n      }\n      .rb-md-inline-flex {\n        display: inline-flex;\n      }\n      .rb-md-grid {\n        display: grid;\n      }\n      .rb-md-hidden {\n        display: none;\n      }\n      .rb-md-flex-row {\n        flex-direction: row;\n      }\n      .rb-md-flex-row-reverse {\n        flex-direction: row-reverse;\n      }\n      .rb-md-items-start {\n        align-items: flex-start;\n      }\n    }\n\n}\n  @container rb-site (min-width: 1024px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-lg-flex {\n        display: flex;\n      }\n      .rb-lg-block {\n        display: block;\n      }\n      .rb-lg-inline {\n        display: inline;\n      }\n      .rb-lg-inline-block {\n        display: inline-block;\n      }\n      .rb-lg-inline-flex {\n        display: inline-flex;\n      }\n      .rb-lg-grid {\n        display: grid;\n      }\n      .rb-lg-hidden {\n        display: none;\n      }\n      .rb-lg-flex-row {\n        flex-direction: row;\n      }\n      .rb-lg-items-center {\n        align-items: center;\n      }\n    }\n\n}\n\n  /* Margin */\n  .rb-m-0 {\n    margin: 0;\n  }\n  .rb-mx-auto {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .rb-ml-auto {\n    margin-left: auto;\n  }\n  .rb-mt-auto {\n    margin-top: auto;\n  }\n  .rb-mt-0\\.5 {\n    margin-top: 0.125rem;\n  }\n  .rb-mt-1 {\n    margin-top: 0.25rem;\n  }\n  .rb-mt-2 {\n    margin-top: 0.5rem;\n  }\n  .rb-mt-4 {\n    margin-top: 1rem;\n  }\n  .rb-mt-6 {\n    margin-top: 1.5rem;\n  }\n  .rb-mt-8 {\n    margin-top: 2rem;\n  }\n  .rb-mt-10 {\n    margin-top: 2.5rem;\n  }\n  .rb-mt-12 {\n    margin-top: 3rem;\n  }\n  .rb-mb-1 {\n    margin-bottom: 0.25rem;\n  }\n  .rb-mb-2 {\n    margin-bottom: 0.5rem;\n  }\n  .rb-mb-3 {\n    margin-bottom: 0.75rem;\n  }\n  .rb-mb-4 {\n    margin-bottom: 1rem;\n  }\n  .rb-mb-8 {\n    margin-bottom: 2rem;\n  }\n  .rb-ml-1 {\n    margin-left: 0.25rem;\n  }\n  .rb-ml-2 {\n    margin-left: 0.5rem;\n  }\n  .rb-ml-6 {\n    margin-left: 1.5rem;\n  }\n  .rb-mr-2 {\n    margin-right: 0.5rem;\n  }\n\n  /* Borders */\n  .rb-border {\n    border-width: 1px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-0 {\n    border-width: 0;\n  }\n  .rb-border-2 {\n    border-width: 2px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-3 {\n    border-width: 3px;\n    border-style: solid;\n    border-color: rgb(var(--tb-border));\n  }\n  .rb-border-b {\n    border-bottom-width: 1px;\n    border-bottom-style: solid;\n    border-bottom-color: rgb(var(--tb-border));\n  }\n  .rb-border-t {\n    border-top-width: 1px;\n    border-top-style: solid;\n    border-top-color: rgb(var(--tb-border));\n  }\n  .rb-border-dashed {\n    border-style: dashed;\n  }\n  .rb-border-current {\n    border-color: currentColor;\n  }\n  .rb-border-transparent {\n    border-color: transparent;\n  }\n  .rb-border-b-2 {\n    border-bottom-width: 2px;\n    border-bottom-style: solid;\n    border-bottom-color: rgb(var(--tb-border));\n  }\n  .rb-last-border-b-0:last-child {\n    border-bottom-width: 0;\n  }\n\n  /* Radius */\n  .rb-rounded-none {\n    border-radius: 0;\n  }\n  .rb-rounded-sm {\n    border-radius: 0.125rem;\n  }\n  .rb-rounded {\n    border-radius: 0.25rem;\n  }\n  .rb-rounded-md {\n    border-radius: 0.375rem;\n  }\n  .rb-rounded-lg {\n    border-radius: 0.5rem;\n  }\n  .rb-rounded-xl {\n    border-radius: 0.75rem;\n  }\n  .rb-rounded-2xl {\n    border-radius: 1rem;\n  }\n  .rb-rounded-3xl {\n    border-radius: 1.5rem;\n  }\n  .rb-rounded-full {\n    border-radius: 9999px;\n  }\n\n  /* Shadow */\n  /*\n   * Shadows are theme-driven via CSS variables:\n   * - `--shadow-sm|md|lg|xl|2xl` for size-specific utilities\n   * - `--shadow-elev` as a generic fallback (used by bridge/runtime defaults)\n   */\n  .rb-shadow-sm {\n    box-shadow: var(--shadow-sm, var(--shadow-elev));\n  }\n  .rb-shadow-md {\n    box-shadow: var(--shadow-md, var(--shadow-elev));\n  }\n  .rb-shadow-lg {\n    box-shadow: var(--shadow-lg, var(--shadow-elev));\n  }\n  .rb-shadow-xl {\n    box-shadow: var(--shadow-xl, var(--shadow-elev));\n  }\n  .rb-shadow-2xl {\n    box-shadow: var(--shadow-2xl, var(--shadow-xl, var(--shadow-elev)));\n  }\n  .hover\\:rb-shadow-md:hover {\n    box-shadow: var(--shadow-md, var(--shadow-elev));\n  }\n\n  /* Overflow */\n  .rb-overflow-hidden {\n    overflow: hidden;\n  }\n  .rb-overflow-visible {\n    overflow: visible;\n  }\n  .rb-overflow-x-auto {\n    overflow-x: auto;\n  }\n  .rb-overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  /* Layout */\n  .rb-break-inside-avoid {\n    break-inside: avoid;\n    page-break-inside: avoid;\n    -webkit-column-break-inside: avoid;\n  }\n\n  /* Scroll snap */\n  .rb-snap-x {\n    scroll-snap-type: x var(--rb-scroll-snap-strictness, mandatory);\n  }\n  .rb-snap-mandatory {\n    --rb-scroll-snap-strictness: mandatory;\n  }\n  .rb-snap-start {\n    scroll-snap-align: start;\n  }\n\n  /* Background */\n  .rb-bg-transparent {\n    background-color: transparent;\n  }\n  .rb-bg-current {\n    background-color: currentColor;\n  }\n  .rb-bg-black-40 {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n  .rb-bg-surface {\n    background-color: rgb(var(--tb-surface));\n  }\n  .rb-bg-background {\n    background-color: rgb(var(--tb-background));\n  }\n\n  /* Typography */\n  .rb-text-xs {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .rb-text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n  }\n  .rb-text-base {\n    font-size: 1rem;\n    line-height: 1.5rem;\n  }\n  .rb-text-lg {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  .rb-text-xl {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  .rb-text-2xl {\n    font-size: 1.5rem;\n    line-height: 2rem;\n  }\n  .rb-text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n  .rb-font-medium {\n    font-weight: 500;\n  }\n  .rb-font-semibold {\n    font-weight: 600;\n  }\n  .rb-font-bold {\n    font-weight: 700;\n  }\n  .rb-font-mono {\n    font-family:\n      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n  }\n  .rb-leading-relaxed {\n    line-height: 1.625;\n  }\n  .rb-tracking-tight {\n    letter-spacing: -0.025em;\n  }\n  .rb-tracking-wide {\n    letter-spacing: 0.025em;\n  }\n  .rb-text-left {\n    text-align: left;\n  }\n  .rb-text-center {\n    text-align: center;\n  }\n  .rb-text-right {\n    text-align: right;\n  }\n\n  /* Text decoration */\n  .rb-no-underline {\n    text-decoration: none;\n  }\n  .rb-underline {\n    text-decoration-line: underline;\n  }\n  .rb-underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .rb-nav-underline:hover,\n  .rb-nav-underline[data-active=\"true\"],\n  .rb-nav-underline[aria-current=\"page\"] {\n    text-decoration: underline;\n  }\n  .rb-nav-underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n\n  .rb-uppercase {\n    text-transform: uppercase;\n  }\n  .rb-truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Opacity */\n  .rb-opacity-0 {\n    opacity: 0;\n  }\n  .rb-opacity-30 {\n    opacity: 0.3;\n  }\n  .rb-opacity-50 {\n    opacity: 0.5;\n  }\n  .rb-opacity-60 {\n    opacity: 0.6;\n  }\n  .rb-opacity-70 {\n    opacity: 0.7;\n  }\n  .rb-opacity-75 {\n    opacity: 0.75;\n  }\n  .rb-opacity-80 {\n    opacity: 0.8;\n  }\n  .rb-opacity-90 {\n    opacity: 0.9;\n  }\n  .rb-opacity-100 {\n    opacity: 1;\n  }\n  .rb-hover-opacity-80:hover {\n    opacity: 0.8;\n  }\n\n  /* Pointer events */\n  .rb-pointer-events-none {\n    pointer-events: none;\n  }\n  .rb-pointer-events-auto {\n    pointer-events: auto;\n  }\n\n  /* Cursor */\n  .rb-cursor-pointer {\n    cursor: pointer;\n  }\n  .rb-cursor-default {\n    cursor: default;\n  }\n  .rb-cursor-wait {\n    cursor: wait;\n  }\n\n  /* Transitions */\n  .rb-transition-all {\n    transition-property: all;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-colors {\n    transition-property:\n      color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-transition-transform {\n    transition-property: transform;\n    transition-timing-function: var(--motion-ease, ease);\n    transition-duration: var(--motion-duration, 180ms);\n  }\n  .rb-duration-200 {\n    transition-duration: 200ms;\n  }\n  .rb-duration-300 {\n    transition-duration: 300ms;\n  }\n  .rb-duration-500 {\n    transition-duration: 500ms;\n  }\n  .rb-ease-in-out {\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  @keyframes rb-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  .rb-animate-spin {\n    animation: rb-spin 1s linear infinite;\n  }\n\n  /* Spinner (themeable via currentColor) */\n  .rb-spinner {\n    --rb-spinner-size: 2rem;\n    --rb-spinner-duration: 0.9s;\n    --rb-spinner-track-color: rgb(var(--tb-foreground) / 0.15);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--rb-spinner-size);\n    height: var(--rb-spinner-size);\n    color: rgb(var(--tb-primary));\n    animation: rb-spin var(--rb-spinner-duration) linear infinite;\n  }\n\n  .rb-spinner svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .rb-spinner--inherit {\n    color: inherit;\n  }\n\n  .rb-spinner--xs {\n    --rb-spinner-size: 0.75rem;\n  }\n\n  .rb-spinner--sm {\n    --rb-spinner-size: 1rem;\n  }\n\n  .rb-spinner--md {\n    --rb-spinner-size: 2rem;\n  }\n\n  .rb-spinner--lg {\n    --rb-spinner-size: 4rem;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .rb-spinner {\n      animation-duration: 1.5s;\n    }\n  }\n\n  @keyframes rb-marquee {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(calc(-50% - (var(--rb-marquee-gap, 2rem) / 2)));\n    }\n  }\n  .rb-animate-marquee {\n    animation: rb-marquee var(--rb-marquee-duration, 40s) linear infinite;\n    animation-direction: var(--rb-marquee-direction, normal);\n    gap: var(--rb-marquee-gap, 2rem);\n  }\n  .rb-marquee-pause-on-hover:hover .rb-animate-marquee {\n    animation-play-state: paused;\n  }\n\n  .rb-image-gallery-marquee {\n    overflow: hidden;\n    width: 100%;\n  }\n\n  @container rb-site (max-width: 639px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-image-gallery-marquee {\n        overflow-x: auto;\n        overflow-y: hidden;\n        -webkit-overflow-scrolling: touch;\n        touch-action: pan-x;\n        scrollbar-width: none;\n      }\n\n      .rb-image-gallery-marquee::-webkit-scrollbar {\n        display: none;\n      }\n\n      /* Let users swipe smoothly without fighting autoplay while interacting. */\n      .rb-image-gallery-marquee:active .rb-animate-marquee,\n      .rb-image-gallery-marquee:focus-within .rb-animate-marquee {\n        animation-play-state: paused;\n      }\n\n      .rb-container-full.rb-image-gallery-marquee-container {\n        padding-left: 0;\n        padding-right: 0;\n      }\n\n      /* Marquee variant: keep images in color on mobile for legibility. */\n      .rb-image-gallery-marquee-container .rb-filter-grayscale,\n      .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal {\n        filter: none;\n      }\n\n      .rb-image-gallery-marquee-container\n        .rb-filter-grayscale-hover-reveal:hover {\n        filter: none;\n      }\n    }\n\n}\n\n  @media (prefers-reduced-motion: reduce) {\n    .rb-animate-marquee {\n      animation: none !important;\n      transform: none !important;\n    }\n    .rb-image-gallery-marquee {\n      overflow-x: auto;\n      overflow-y: hidden;\n      -webkit-overflow-scrolling: touch;\n    }\n  }\n\n  /* Filters */\n  .rb-filter-grayscale {\n    filter: grayscale(100%);\n  }\n  .rb-filter-grayscale-hover-reveal {\n    filter: grayscale(100%);\n    transition: filter 500ms ease;\n  }\n  .rb-filter-grayscale-hover-reveal:hover {\n    filter: grayscale(0%);\n  }\n  .rb-filter-sepia {\n    filter: sepia(100%);\n  }\n\n  /* Transforms */\n  .rb-transform-gpu {\n    transform: translateZ(0);\n  }\n  .rb-will-change-transform {\n    will-change: transform;\n  }\n  .rb-translate-x-neg-1\\/2 {\n    transform: translateX(-50%);\n  }\n  .rb-hover-scale-105:hover {\n    transform: scale(1.05);\n  }\n  .rb-hover-scale-125:hover {\n    transform: scale(1.25);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .rb-motion-safe-hover-scale-105:hover {\n      transform: scale(1.05);\n    }\n  }\n\n  /* Object fit */\n  .rb-object-cover {\n    object-fit: cover;\n  }\n  .rb-object-contain {\n    object-fit: contain;\n  }\n  .rb-bg-motion-fixed-frame {\n    position: fixed;\n    inset: 0;\n    width: 100vw;\n    height: 100svh;\n  }\n  .rb-bg-motion-fixed-frame-scope {\n    -webkit-clip-path: inset(0);\n    clip-path: inset(0);\n  }\n  @media (hover: none), (prefers-reduced-motion: reduce) {\n    .rb-bg-motion-fixed-frame {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  /* Line clamp */\n  .rb-line-clamp-2,\n  .rb-line-clamp-3,\n  .rb-line-clamp-4 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n  }\n  .rb-line-clamp-2 {\n    -webkit-line-clamp: 2;\n  }\n  .rb-line-clamp-3 {\n    -webkit-line-clamp: 3;\n  }\n  .rb-line-clamp-4 {\n    -webkit-line-clamp: 4;\n  }\n\n  /* Typography */\n  .rb-italic {\n    font-style: italic;\n  }\n\n  /* Container helpers */\n  .rb-container {\n    max-width: 80rem;\n    margin-left: auto;\n    margin-right: auto;\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-container-full {\n    width: 100%;\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .rb-container-bleed {\n    width: 100%;\n    max-width: none;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-container,\n      .rb-container-full {\n        padding-left: 1.5rem;\n        padding-right: 1.5rem;\n      }\n    }\n\n}\n\n  /* Flex alignment */\n  .rb-self-start {\n    align-self: flex-start;\n  }\n\n  /* Semantic spacing tokens (replaces Tailwind maps in src/system/spacing.ts) */\n  .rb-section-pad-none {\n    --rb-section-pad-y: 0rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-compact {\n    --rb-section-pad-y: 1.5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-cozy {\n    --rb-section-pad-y: 2.5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-medium {\n    --rb-section-pad-y: 3rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-comfortable {\n    --rb-section-pad-y: 4rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n  .rb-section-pad-spacious {\n    --rb-section-pad-y: 5rem;\n    padding-top: var(--rb-section-pad-y);\n    padding-bottom: var(--rb-section-pad-y);\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-section-pad-compact {\n        --rb-section-pad-y: 2rem;\n      }\n      .rb-section-pad-cozy {\n        --rb-section-pad-y: 3.5rem;\n      }\n      .rb-section-pad-medium {\n        --rb-section-pad-y: 4rem;\n      }\n      .rb-section-pad-comfortable {\n        --rb-section-pad-y: 5rem;\n      }\n      .rb-section-pad-spacious {\n        --rb-section-pad-y: 7rem;\n      }\n    }\n\n}\n\n  .rb-container-pad-none {\n    --rb-card-pad: 0rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-compact {\n    --rb-card-pad: 1rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-cozy {\n    --rb-card-pad: 1.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-medium {\n    --rb-card-pad: 1.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-comfortable {\n    --rb-card-pad: 2rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n  .rb-container-pad-spacious {\n    --rb-card-pad: 2.5rem;\n    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n  }\n\n  @container rb-site (min-width: 640px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-container-pad-compact {\n        --rb-card-pad: 1.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-cozy {\n        --rb-card-pad: 2rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-medium {\n        --rb-card-pad: 2rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-comfortable {\n        --rb-card-pad: 2.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n      .rb-container-pad-spacious {\n        --rb-card-pad: 3.5rem;\n        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);\n      }\n    }\n\n}\n\n  /* Semantic gap tokens (theme-aware via --space-mult) */\n  .rb-gap-semantic-none {\n    --rb-semantic-gap: 0px;\n    gap: 0;\n  }\n  .rb-gap-semantic-compact {\n    --rb-semantic-gap: calc(1rem * var(--space-mult, 1));\n    gap: calc(1rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-cozy {\n    --rb-semantic-gap: calc(1.75rem * var(--space-mult, 1));\n    gap: calc(1.75rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-medium {\n    --rb-semantic-gap: calc(2.75rem * var(--space-mult, 1));\n    gap: calc(2.75rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-comfortable {\n    --rb-semantic-gap: calc(4.5rem * var(--space-mult, 1));\n    gap: calc(4.5rem * var(--space-mult, 1));\n  }\n  .rb-gap-semantic-spacious {\n    --rb-semantic-gap: calc(6.5rem * var(--space-mult, 1));\n    gap: calc(6.5rem * var(--space-mult, 1));\n  }\n\n  @container rb-site (min-width: 768px) {\n\n    @scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n      .rb-gap-semantic-compact {\n        --rb-semantic-gap: calc(1.25rem * var(--space-mult, 1));\n        gap: calc(1.25rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-cozy {\n        --rb-semantic-gap: calc(2.25rem * var(--space-mult, 1));\n        gap: calc(2.25rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-medium {\n        --rb-semantic-gap: calc(3.5rem * var(--space-mult, 1));\n        gap: calc(3.5rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-comfortable {\n        --rb-semantic-gap: calc(5.75rem * var(--space-mult, 1));\n        gap: calc(5.75rem * var(--space-mult, 1));\n      }\n      .rb-gap-semantic-spacious {\n        --rb-semantic-gap: calc(8.75rem * var(--space-mult, 1));\n        gap: calc(8.75rem * var(--space-mult, 1));\n      }\n    }\n\n}\n\n  /* Backdrop blur helpers */\n  .rb-backdrop-blur {\n    backdrop-filter: blur(10px);\n  }\n  @supports not (\n    (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))\n  ) {\n    .rb-backdrop-blur {\n      backdrop-filter: none;\n    }\n  }\n}\n\n@layer rb-theme {\n  /* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */\n  :root {\n    /* --tb-primary: 17 24 39;\n  --tb-text: 17 24 39;\n  --tb-muted: 107 114 128;\n  --tb-bg: 255 255 255;\n  --tb-surface: 248 250 252;\n  --tb-border: 229 231 235;\n\n  --radius-control: 12px;\n  --radius-card: 12px;\n\n  --shadow-elev: 0 1px 2px rgba(0,0,0,.06);\n\n  --fs-h1: 32px;\n  --fs-h2: 24px;\n  --fs-h3: 20px;\n  --fs-body: 16px;\n\n  --font-heading: ui-sans-serif, system-ui, sans-serif;\n  --font-body: ui-sans-serif, system-ui, sans-serif;\n\n  --motion-duration: 180ms;\n  --motion-ease: cubic-bezier(.2,.8,.2,1); */\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Shared: Modal                                                             */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope) .rb-modal-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--rb-modal-z-index, 20000);\n    display: grid;\n    place-items: center;\n    padding: 1rem;\n    /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */\n    background-color: rgba(0, 0, 0, 0.6);\n    background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));\n  }\n\n  :where(.theme-scope) .rb-modal {\n    width: min(var(--rb-modal-max-width, 560px), 100%);\n    background: var(--rb-modal-bg, rgb(var(--tb-surface)));\n    color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));\n    --rb-surface-text-color: var(--rb-modal-text, rgb(var(--tb-text, 17 24 39)));\n    --rb-surface-heading-color: var(--rb-modal-heading, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-link-color: var(--rb-modal-link, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-link-hover-color: var(--rb-modal-link, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    --rb-surface-link-hover-decoration: underline;\n    --rb-surface-supporting-color: var(--rb-modal-supporting, var(--rb-modal-text, rgb(var(--tb-text, 17 24 39))));\n    border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));\n    border-radius: var(--rb-modal-radius, var(--radius-card));\n    box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));\n  }\n\n  :where(.theme-scope) .rb-modal__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    padding: 1rem 1rem 0.75rem;\n    border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));\n  }\n\n  :where(.theme-scope) .rb-modal__title {\n    margin: 0;\n    font-family: var(--font-heading);\n    font-size: 1.0625rem;\n    font-weight: 600;\n    color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));\n  }\n\n  :where(.theme-scope) .rb-modal__close {\n    background: transparent;\n    border: none;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    line-height: 1;\n    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n    cursor: pointer;\n    display: grid;\n    place-items: center;\n    border-radius: var(--radius-control);\n  }\n\n  :where(.theme-scope) .rb-modal__close:hover {\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    background: rgb(var(--tb-border) / 0.2);\n  }\n\n  :where(.theme-scope) .rb-modal__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.15);\n  }\n\n  :where(.theme-scope) .rb-modal__body {\n    padding: 0.875rem 1rem 1rem;\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n    font-size: 0.9375rem;\n    line-height: 1.45;\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Shared: Site document overlay header clearance                             */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container {\n    --rb-opening-content-clearance: calc(\n      var(--site-overlay-header-clearance, 0px) +\n        var(--site-overlay-opening-content-extra-pad, clamp(1rem, 2vw, 1.75rem))\n    );\n  }\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container:not([class*='rb-container-pad-']) {\n    padding-top: var(--rb-opening-content-clearance, 0px);\n  }\n\n  :where(.theme-scope)\n    :where([data-site-document-overlay-content='true'])\n    :where([data-page-block-position='first'], [data-page-block-position='only'])\n    > :where([data-slot='section'])\n    > .rb-container\n    :where([class*='rb-container-pad-']) {\n    --rb-opening-content-clearance: 0px;\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile nav overlay transitions                                      */\n  /* -------------------------------------------------------------------------- */\n\n  /* Keep the overlay in the DOM so we can transition opacity/transform.\n   JS toggles `aria-hidden` + `inert` (via enhancer), and CSS uses pointer-events\n   to prevent interaction while closed. */\n  .nav-mobile-overlay {\n    pointer-events: none;\n    /* Prevent transformed children (panel) from creating viewport scrollbars\n     during enter/exit transitions. */\n    overflow: hidden;\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] {\n    pointer-events: auto;\n  }\n\n  .nav-mobile-overlay .nav-mobile-backdrop {\n    opacity: 0;\n    transition: opacity var(--motion-duration, 180ms)\n      var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-backdrop {\n    opacity: 1;\n  }\n\n  .nav-mobile-overlay .nav-mobile-panel {\n    opacity: 0;\n    transform: translate3d(12px, 0, 0);\n    overflow-x: hidden;\n    transition:\n      opacity var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),\n      transform var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n    will-change: opacity, transform;\n  }\n\n  .nav-mobile-overlay[aria-hidden='false'] .nav-mobile-panel {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile toggle hamburger -> X                                       */\n  /* -------------------------------------------------------------------------- */\n\n  .nav-mobile-toggle .nav-mobile-bar {\n    transform-origin: center;\n    transition:\n      transform var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),\n      opacity var(--motion-duration, 180ms)\n        var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));\n    will-change: transform, opacity;\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-top {\n    transform: translateY(6px) rotate(45deg);\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-middle {\n    opacity: 0;\n  }\n\n  .nav-mobile-toggle[aria-expanded='true'] .nav-mobile-bar-bottom {\n    transform: translateY(-6px) rotate(-45deg);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-mobile-overlay .nav-mobile-backdrop,\n    .nav-mobile-overlay .nav-mobile-panel {\n      transition: none;\n      transform: none;\n    }\n\n    .nav-mobile-toggle .nav-mobile-bar {\n      transition: none;\n    }\n  }\n\n  /* -------------------------------------------------------------------------- */\n  /* Header: Mobile floating/glass backing                                      */\n  /* -------------------------------------------------------------------------- */\n\n  :where(.theme-scope) .header-variant-floating .header-mobile-bar {\n    align-items: flex-start;\n    margin-top: 0.75rem;\n  }\n\n  :where(.theme-scope) .header-variant-floating .nav-mobile-toggle {\n    border: 1px solid rgb(var(--tb-border) / 0.82);\n    background: rgb(var(--tb-surface) / 0.96);\n    color: rgb(var(--tb-text));\n    box-shadow: none;\n  }\n\n  /*\n * Theme Scope Styles\n *\n * IMPORTANT: All :where(.theme-scope) selectors are wrapped in :where() to give them\n * zero specificity. This allows SDK site custom styles to easily override\n * theme defaults without needing !important or high-specificity selectors.\n *\n * Example: `h4 { color: white; }` will override `:where(:where(.theme-scope)) h4`\n */\n\n  :where(:where(.theme-scope)) {\n    font-family: var(--font-body);\n    letter-spacing: var(--ls-body);\n    line-height: var(--lh-body);\n    font-weight: var(--font-weight-body);\n\n    & h1,\n    & h2,\n    & h3,\n    & h4,\n    & h5,\n    & h6 {\n      font-family: var(--font-heading);\n      /* Color is set by generateTypographyCss.ts with full cascade:\n       --rb-surface-heading-color -> --rb-surface-text-color -> --hc-hN -> --hc-heading -> global text */\n      font-weight: var(--font-weight-heading);\n      text-transform: var(--tt-heading);\n      font-variant-caps: var(--fv-heading);\n    }\n  }\n\n  /* Heading typographic overrides (fallback to defaults when not provided) */\n  :where(:where(.theme-scope)) h1 {\n    letter-spacing: var(--ls-h1, var(--ls-heading));\n    line-height: var(--lh-h1, var(--lh-heading));\n    font-weight: var(--fw-h1, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h2 {\n    letter-spacing: var(--ls-h2, var(--ls-heading));\n    line-height: var(--lh-h2, var(--lh-heading));\n    font-weight: var(--fw-h2, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h3 {\n    letter-spacing: var(--ls-h3, var(--ls-heading));\n    line-height: var(--lh-h3, var(--lh-heading));\n    font-weight: var(--fw-h3, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h4,\n  :where(:where(.theme-scope)) h5,\n  :where(:where(.theme-scope)) h6 {\n    letter-spacing: var(--ls-heading);\n    line-height: var(--lh-heading);\n  }\n  :where(:where(.theme-scope)) h4 {\n    font-weight: var(--fw-h4, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h5 {\n    font-weight: var(--fw-h5, var(--font-weight-heading));\n  }\n  :where(:where(.theme-scope)) h6 {\n    font-weight: var(--fw-h6, var(--font-weight-heading));\n  }\n\n  /* Rich text element spacing based on theme rhythm */\n  :where(.theme-scope) .rb-prose h1 {\n    margin-top: calc(var(--rt-space-y) * 1.6);\n    margin-bottom: calc(var(--rt-space-y) * 0.8);\n  }\n  :where(.theme-scope) .rb-prose h2 {\n    margin-top: calc(var(--rt-space-y) * 1.4);\n    margin-bottom: calc(var(--rt-space-y) * 0.7);\n  }\n  :where(.theme-scope) .rb-prose h3 {\n    margin-top: calc(var(--rt-space-y) * 1.2);\n    margin-bottom: calc(var(--rt-space-y) * 0.6);\n  }\n  :where(.theme-scope) .rb-prose h4 {\n    margin-top: calc(var(--rt-space-y) * 1);\n    margin-bottom: calc(var(--rt-space-y) * 0.5);\n  }\n  :where(.theme-scope) .rb-prose h5 {\n    margin-top: calc(var(--rt-space-y) * 0.9);\n    margin-bottom: calc(var(--rt-space-y) * 0.45);\n  }\n  :where(.theme-scope) .rb-prose h6 {\n    margin-top: calc(var(--rt-space-y) * 0.8);\n    margin-bottom: calc(var(--rt-space-y) * 0.4);\n  }\n  :where(.theme-scope) .rb-prose p {\n    margin: var(--rt-space-y) 0;\n  }\n  :where(.theme-scope) .rb-prose li > p:first-child {\n    margin-top: 0;\n  }\n  :where(.theme-scope) .rb-prose li > p:last-child {\n    margin-bottom: 0;\n  }\n  :where(.theme-scope) .rb-prose img {\n    display: block;\n    max-width: 100%;\n    height: auto;\n    margin: calc(var(--rt-space-y) * 1) 0;\n  }\n  :where(.theme-scope) .rb-prose ul,\n  :where(.theme-scope) .rb-prose ol {\n    margin: var(--rt-space-y) 0;\n    padding-left: 1.25rem;\n  }\n  :where(.theme-scope) .rb-prose ul {\n    list-style-type: disc;\n  }\n  :where(.theme-scope) .rb-prose ol {\n    list-style-type: decimal;\n  }\n  :where(.theme-scope) .rb-prose ul ul {\n    list-style-type: circle;\n  }\n  :where(.theme-scope) .rb-prose ul ul ul {\n    list-style-type: square;\n  }\n  :where(.theme-scope) .rb-prose ol ol {\n    list-style-type: lower-alpha;\n  }\n  :where(.theme-scope) .rb-prose ol ol ol {\n    list-style-type: lower-roman;\n  }\n  :where(.theme-scope) .rb-prose blockquote {\n    margin: calc(var(--rt-space-y) * 1) 0;\n    padding-left: 1rem;\n    border-left: 3px solid rgb(var(--tb-border));\n  }\n  :where(.theme-scope) .rb-prose > :first-child {\n    margin-top: 0;\n  }\n  :where(.theme-scope) .rb-prose > :last-child {\n    margin-bottom: 0;\n  }\n\n  /* Prose color overrides - use theme CSS variables instead of hardcoded colors\n * This makes prose elements automatically adapt to light/dark themes */\n  :where(.theme-scope) .rb-prose {\n    /* Body text inherits from parent, which should already have theme color */\n    color: inherit;\n  }\n\n  /* Prose size variants (theme-aware, CSS-only) */\n  :where(.theme-scope) {\n    /* Body scale + rhythm come from the active theme runtime (ThemeScope) */\n    --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);\n    --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);\n\n    --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);\n    --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);\n\n    /* Applied at >= 640px; below that, rb-prose-lg is typically used */\n    --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);\n    --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);\n  }\n\n  :where(.theme-scope) .rb-prose-sm {\n    font-size: var(--rb-prose-sm-font-size);\n    line-height: var(--rb-prose-sm-line-height);\n  }\n  :where(.theme-scope) .rb-prose-lg {\n    font-size: var(--rb-prose-lg-font-size);\n    line-height: var(--rb-prose-lg-line-height);\n  }\n  @container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-prose-xl-sm {\n      font-size: var(--rb-prose-xl-sm-font-size);\n      line-height: var(--rb-prose-xl-sm-line-height);\n    }\n}\n}\n\n  /* Neutral prose uses theme text color by default */\n  :where(.theme-scope) .rb-prose-neutral {\n    color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  }\n\n  :where(.theme-scope) .rb-prose p,\n  :where(.theme-scope) .rb-prose li {\n    /* Body text uses inherited color (set by fragment via textColorStyle) */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose h1,\n  :where(.theme-scope) .rb-prose h2,\n  :where(.theme-scope) .rb-prose h3,\n  :where(.theme-scope) .rb-prose h4,\n  :where(.theme-scope) .rb-prose h5,\n  :where(.theme-scope) .rb-prose h6 {\n    /* Headings inherit from parent or use theme text color */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose strong,\n  :where(.theme-scope) .rb-prose b {\n    /* Bold text inherits color but increases weight */\n    color: inherit;\n    font-weight: 600;\n  }\n\n  :where(.theme-scope) .rb-prose em,\n  :where(.theme-scope) .rb-prose i {\n    /* Italic text inherits color */\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose a {\n    --rb-prose-effective-link-color: var(\n      --rb-surface-link-color,\n      var(\n        --rb-surface-text-color,\n        var(\n          --rb-prose-link-color,\n          rgb(var(--tb-primary, var(--tb-text, 17 24 39)))\n        )\n      )\n    );\n    color: var(--rb-prose-effective-link-color);\n    text-decoration-line: var(--rb-prose-link-decoration-line, underline);\n    text-decoration-style: var(--rb-prose-link-underline-style, solid);\n    text-decoration-thickness: var(\n      --rb-prose-link-underline-thickness,\n      from-font\n    );\n    text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);\n    text-decoration-color: var(\n      --rb-prose-link-decoration-color,\n      color-mix(\n        in srgb,\n        var(--rb-prose-effective-link-color) 35%,\n        transparent\n      )\n    );\n    transition:\n      color 150ms ease,\n      text-decoration-color 150ms ease;\n  }\n\n  :where(.theme-scope) .rb-prose a:hover {\n    color: var(\n      --rb-surface-link-hover-color,\n      var(--rb-prose-link-hover-color, var(--rb-prose-effective-link-color))\n    );\n    text-decoration-line: var(\n      --rb-surface-link-hover-decoration,\n      var(--rb-prose-link-decoration-line, underline)\n    );\n    text-decoration-color: var(\n      --rb-prose-link-hover-decoration-color,\n      var(\n        --rb-surface-link-hover-color,\n        var(--rb-prose-link-hover-color, var(--rb-prose-effective-link-color))\n      )\n    );\n  }\n\n  :where(.theme-scope) .rb-prose blockquote {\n    /* Blockquotes use muted text color */\n    color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n    border-left-color: rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope) .fragment-quote-body blockquote {\n    /* Quote fragment should not get the generic prose blockquote left border/indent. */\n    border-left: 0;\n    padding-left: 0;\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height {\n    /* Needed so we can use container query units (`cqw`) for width-based tile sizing. */\n    container-type: inline-size;\n\n    --rb-columns-cols: var(--rb-columns-cols-mobile, 1);\n    --rb-columns-gap: var(--rb-semantic-gap, 0px);\n    --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);\n\n    --rb-columns-tile-w: calc(\n      (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) /\n        var(--rb-columns-cols)\n    );\n    --rb-columns-tile-h: calc(\n      var(--rb-columns-tile-w) * var(--rb-columns-tile-ar)\n    );\n  }\n\n  @container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));\n    }\n}\n}\n\n  @container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));\n    }\n}\n}\n\n  @container rb-site (min-width: 1280px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-columns-equal-height {\n      --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));\n    }\n}\n}\n\n  :where(.theme-scope) .rb-columns-equal-height > * {\n    height: var(--rb-columns-tile-h);\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height > .rb-h-full {\n    /*\n    Grid items commonly include `rb-h-full` (height: 100%) to stretch within\n    their row. In equal-height mode we instead want a fixed tile height so the\n    spanning editorial tile doesn't become taller due to its larger width +\n    aspect-ratio.\n  */\n    height: var(--rb-columns-tile-h);\n    min-height: var(--rb-columns-tile-h);\n    max-height: var(--rb-columns-tile-h);\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :where(.theme-scope) .rb-columns-equal-height .fragment-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  :where(.theme-scope) .rb-prose code {\n    /* Inline code uses text color with surface background */\n    color: inherit;\n    background-color: rgb(var(--tb-surface) / 0.5);\n    padding: 0.125rem 0.25rem;\n    border-radius: 0.25rem;\n    font-size: 0.875em;\n  }\n\n  :where(.theme-scope) .rb-prose pre {\n    /* Code blocks */\n    background-color: rgb(var(--tb-surface));\n    color: rgb(var(--tb-text));\n    border: 1px solid rgb(var(--tb-border));\n    border-radius: 0.5rem;\n    padding: 1rem;\n    overflow-x: auto;\n  }\n\n  :where(.theme-scope) .rb-prose pre code {\n    /* Code inside pre blocks */\n    background-color: transparent;\n    padding: 0;\n    color: inherit;\n  }\n\n  :where(.theme-scope) .rb-prose hr {\n    /* Horizontal rules */\n    border-color: rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope) .rb-prose ul > li::marker,\n  :where(.theme-scope) .rb-prose ol > li::marker {\n    /* List markers use muted text color */\n    color: rgb(var(--tb-mutedText));\n  }\n\n  /*\n/* Density helpers */\n  :where(.theme-scope) .section-pad {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n  :where(.theme-scope)[data-density='airy'] .section-pad {\n    padding-top: 4.5rem;\n    padding-bottom: 4.5rem;\n  }\n  :where(.theme-scope)[data-density='compact'] .section-pad {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n\n  :where(.theme-scope) .rounded-control {\n    border-radius: var(--radius-control);\n  }\n  :where(.theme-scope) .rounded-card {\n    border-radius: var(--radius-card);\n  }\n\n  :where(.theme-scope) .shadow-elev {\n    box-shadow: var(--shadow-elev);\n  }\n\n  :where(.theme-scope) .font-heading {\n    font-family: var(--font-heading);\n  }\n  :where(.theme-scope) .font-body {\n    font-family: var(--font-body);\n  }\n\n  :where(.theme-scope) .text-h1 {\n    font-size: var(--fs-h1);\n    line-height: 1.1;\n  }\n  :where(.theme-scope) .text-h2 {\n    font-size: var(--fs-h2);\n    line-height: 1.15;\n  }\n  :where(.theme-scope) .text-h3 {\n    font-size: var(--fs-h3);\n    line-height: 1.2;\n  }\n  :where(.theme-scope) .text-body-size {\n    font-size: var(--fs-body);\n  }\n\n  :where(.theme-scope) .transition-theme {\n    transition: all var(--motion-duration) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-standard {\n    transition: all var(--motion-duration) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-subtle {\n    transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);\n  }\n  :where(.theme-scope) .transition-theme-expressive {\n    transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);\n  }\n\n  /* Shade tokens (50..950) for primary */\n  :where(.theme-scope) .from-primary-50 {\n    --rb-gradient-from: rgb(var(--tb-primary-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-50 {\n    --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-100 {\n    --rb-gradient-from: rgb(var(--tb-primary-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-100 {\n    --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-200 {\n    --rb-gradient-from: rgb(var(--tb-primary-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-200 {\n    --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-300 {\n    --rb-gradient-from: rgb(var(--tb-primary-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-300 {\n    --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-400 {\n    --rb-gradient-from: rgb(var(--tb-primary-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-400 {\n    --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-500 {\n    --rb-gradient-from: rgb(var(--tb-primary-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-500 {\n    --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-600 {\n    --rb-gradient-from: rgb(var(--tb-primary-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-600 {\n    --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-700 {\n    --rb-gradient-from: rgb(var(--tb-primary-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-700 {\n    --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-800 {\n    --rb-gradient-from: rgb(var(--tb-primary-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-800 {\n    --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-900 {\n    --rb-gradient-from: rgb(var(--tb-primary-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-900 {\n    --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-primary-950 {\n    --rb-gradient-from: rgb(var(--tb-primary-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-primary-950 {\n    --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for secondary */\n  :where(.theme-scope) .from-secondary-50 {\n    --rb-gradient-from: rgb(var(--tb-secondary-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-50 {\n    --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-100 {\n    --rb-gradient-from: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-100 {\n    --rb-gradient-to: rgb(var(--tb-secondary-100))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-200 {\n    --rb-gradient-from: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-200 {\n    --rb-gradient-to: rgb(var(--tb-secondary-200))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-300 {\n    --rb-gradient-from: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-300 {\n    --rb-gradient-to: rgb(var(--tb-secondary-300))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-400 {\n    --rb-gradient-from: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-400 {\n    --rb-gradient-to: rgb(var(--tb-secondary-400))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-500 {\n    --rb-gradient-from: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-500 {\n    --rb-gradient-to: rgb(var(--tb-secondary-500))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-600 {\n    --rb-gradient-from: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-600 {\n    --rb-gradient-to: rgb(var(--tb-secondary-600))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-700 {\n    --rb-gradient-from: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-700 {\n    --rb-gradient-to: rgb(var(--tb-secondary-700))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-800 {\n    --rb-gradient-from: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-800 {\n    --rb-gradient-to: rgb(var(--tb-secondary-800))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-900 {\n    --rb-gradient-from: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-900 {\n    --rb-gradient-to: rgb(var(--tb-secondary-900))\n      var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-secondary-950 {\n    --rb-gradient-from: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-secondary-950 {\n    --rb-gradient-to: rgb(var(--tb-secondary-950))\n      var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for accent */\n  :where(.theme-scope) .from-accent-50 {\n    --rb-gradient-from: rgb(var(--tb-accent-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-50 {\n    --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-100 {\n    --rb-gradient-from: rgb(var(--tb-accent-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-100 {\n    --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-200 {\n    --rb-gradient-from: rgb(var(--tb-accent-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-200 {\n    --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-300 {\n    --rb-gradient-from: rgb(var(--tb-accent-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-300 {\n    --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-400 {\n    --rb-gradient-from: rgb(var(--tb-accent-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-400 {\n    --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-500 {\n    --rb-gradient-from: rgb(var(--tb-accent-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-500 {\n    --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-600 {\n    --rb-gradient-from: rgb(var(--tb-accent-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-600 {\n    --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-700 {\n    --rb-gradient-from: rgb(var(--tb-accent-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-700 {\n    --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-800 {\n    --rb-gradient-from: rgb(var(--tb-accent-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-800 {\n    --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-900 {\n    --rb-gradient-from: rgb(var(--tb-accent-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-900 {\n    --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-accent-950 {\n    --rb-gradient-from: rgb(var(--tb-accent-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-accent-950 {\n    --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);\n  }\n\n  /* Shade tokens (50..950) for neutral */\n  :where(.theme-scope) .from-neutral-50 {\n    --rb-gradient-from: rgb(var(--tb-neutral-50))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-50 {\n    --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-100 {\n    --rb-gradient-from: rgb(var(--tb-neutral-100))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-100 {\n    --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-200 {\n    --rb-gradient-from: rgb(var(--tb-neutral-200))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-200 {\n    --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-300 {\n    --rb-gradient-from: rgb(var(--tb-neutral-300))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-300 {\n    --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-400 {\n    --rb-gradient-from: rgb(var(--tb-neutral-400))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-400 {\n    --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-500 {\n    --rb-gradient-from: rgb(var(--tb-neutral-500))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-500 {\n    --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-600 {\n    --rb-gradient-from: rgb(var(--tb-neutral-600))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-600 {\n    --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-700 {\n    --rb-gradient-from: rgb(var(--tb-neutral-700))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-700 {\n    --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-800 {\n    --rb-gradient-from: rgb(var(--tb-neutral-800))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-800 {\n    --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-900 {\n    --rb-gradient-from: rgb(var(--tb-neutral-900))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-900 {\n    --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);\n  }\n  :where(.theme-scope) .from-neutral-950 {\n    --rb-gradient-from: rgb(var(--tb-neutral-950))\n      var(--rb-gradient-from-position);\n    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);\n    --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);\n  }\n  :where(.theme-scope) .to-neutral-950 {\n    --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);\n  }\n\n  /* =================================================================\n   Header System Class Naming Conventions\n\n   rb-header-*    Utility-style classes set in site-header.ts layouts\n                  (rb-header-layout, rb-header-logo-sm, rb-header-logo-lg)\n\n   header-*       State/semantic classes set by transforms or runtime\n                  (header-root, header-scrolled, header-variant-*, header-logo-text)\n\n   nav-*          Navigation component classes (dropdowns, mobile, underlines)\n                  (nav-dropdown, nav-mobile-panel, nav-underline-grow)\n   ================================================================= */\n\n  /* =================================================================\n   Header Layout Padding\n\n   Padding is controlled entirely by CSS based on variant class.\n   This ensures shrink headers look identical to non-shrink before scroll.\n   ================================================================= */\n\n  /* Prevent scroll anchoring feedback loops when the header height transitions.\n   In some browsers, resizing a sticky header near the top can cause the UA to\n   adjust scroll position (\"scroll anchoring\"), which then flips the\n   `header-scrolled` threshold logic back and forth. */\n  :where(.theme-scope) .block-site-header {\n    overflow-anchor: none;\n  }\n\n  /* Base padding for horizontal variants (classic) */\n  :where(.theme-scope) .rb-header-layout {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n    transition: padding 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope)\n    .header-variant-classic\n    .rb-header-layout:has(.header-logo-accommodation-popout-badge) {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n\n  /* Vertical variants need more breathing room\n   Note: header-variant-* is on Section (ancestor), rb-header-layout on inner div */\n  :where(.theme-scope) .header-variant-centered .rb-header-layout {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n\n  /* Floating variant - compact padding */\n  :where(.theme-scope) .header-variant-floating .rb-header-layout {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n\n  /* =================================================================\n   Header Shrink-on-Scroll\n\n   Only applies when .rb-header-shrink is present AND user has scrolled.\n   No changes until scroll - shrink header = non-shrink header initially.\n   ================================================================= */\n\n  /* Scrolled state - reduce padding */\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n\n  /* Vertical variants get gentler reduction\n   Note: Both classes are on Section, rb-header-layout on inner div */\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .rb-header-layout {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n\n  /* Floating variant */\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-floating\n    .rb-header-layout {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  /* =================================================================\n   Logo & Title Sizing\n\n   Font sizes controlled here, not via utility classes, so shrink\n   transitions work (utility classes would override :where()).\n   ================================================================= */\n\n  /* Logo image sizing */\n  :where(.theme-scope) .rb-header-logo-sm {\n    height: 2.5rem;\n    transition: height 300ms var(--motion-ease, ease);\n  }\n  :where(.theme-scope) .rb-header-logo-lg {\n    height: 3rem;\n    transition: height 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope) .header-logo-size-compact.rb-header-logo-sm {\n    height: 2rem;\n  }\n  :where(.theme-scope) .header-logo-size-compact.rb-header-logo-lg {\n    height: 2.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard.rb-header-logo-sm {\n    height: 2.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard.rb-header-logo-lg {\n    height: 3rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous.rb-header-logo-sm {\n    height: 3.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous.rb-header-logo-lg {\n    height: 4.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-display.rb-header-logo-sm {\n    height: 7.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-display.rb-header-logo-lg {\n    height: 8rem;\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-plate,\n  :where(.theme-scope) .header-logo-accommodation-centered-badge,\n  :where(.theme-scope) .header-logo-accommodation-popout-badge,\n  :where(.theme-scope) .header-logo-accommodation-centered-masthead {\n    border-radius: var(--radius-md, 0.5rem);\n    background: var(--color-surface, #fff);\n    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.08));\n    padding: 0.5rem;\n    transition:\n      margin 300ms var(--motion-ease, ease),\n      padding 300ms var(--motion-ease, ease);\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-popout-badge {\n    position: relative;\n    z-index: 1;\n    margin-block: 0 -1.25rem;\n  }\n\n  :where(.theme-scope)\n    .header-logo-size-display.header-logo-accommodation-popout-badge {\n    margin-block: 0 -4rem;\n  }\n\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-plate,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-popout-badge,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-classic\n    .header-logo-size-display.header-logo-accommodation-centered-masthead,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .header-logo-size-display.header-logo-accommodation-centered-badge,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .header-logo-size-display.header-logo-accommodation-centered-masthead {\n    position: relative;\n    z-index: 1;\n    margin-block: 0 -2.75rem;\n  }\n\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled.header-variant-centered\n    .rb-header-layout {\n    gap: 0.75rem;\n  }\n\n  :where(.theme-scope) .header-logo-accommodation-centered-masthead {\n    padding: 0.75rem 1rem;\n  }\n\n  /* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */\n  :where(.theme-scope) .header-logo-text {\n    font-size: 1.125rem; /* matches rb-text-lg */\n    line-height: 1.75rem;\n    margin-inline: -0.18em;\n    padding-inline: 0.18em;\n    transition: font-size 300ms var(--motion-ease, ease);\n  }\n\n  /* Centered variant uses larger title */\n  :where(.theme-scope) .header-variant-centered .header-logo-text {\n    font-size: 1.25rem; /* matches rb-text-xl */\n    line-height: 1.75rem;\n  }\n\n  :where(.theme-scope) .header-logo-size-compact .header-logo-text {\n    font-size: 0.95rem;\n    line-height: 1.5rem;\n  }\n  :where(.theme-scope) .header-logo-size-standard .header-logo-text {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope) .header-logo-size-generous .header-logo-text {\n    font-size: 1.35rem;\n    line-height: 1.9rem;\n  }\n  :where(.theme-scope) .header-logo-size-display .header-logo-text {\n    font-size: 1.75rem;\n    line-height: 2.25rem;\n  }\n\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-compact\n    .header-logo-text {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-standard\n    .header-logo-text {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-generous\n    .header-logo-text {\n    font-size: 1.6rem;\n    line-height: 2rem;\n  }\n  :where(.theme-scope)\n    .header-variant-centered\n    .header-logo-size-display\n    .header-logo-text {\n    font-size: 2.1rem;\n    line-height: 2.5rem;\n  }\n\n  /* Mobile: reduce site title size to keep header compact */\n  @container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .header-logo-text,\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-standard .header-logo-text {\n      font-size: 0.8rem;\n      line-height: 1.25rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-compact .header-logo-text {\n      font-size: 0.75rem;\n      line-height: 1.15rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-generous .header-logo-text {\n      font-size: 1rem;\n      line-height: 1.4rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-display .header-logo-text {\n      font-size: 1.25rem;\n      line-height: 1.65rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-variant-centered .header-logo-text,\n    :where(.theme-scope:is(*, :scope))\n      .header-variant-centered\n      .header-logo-size-standard\n      .header-logo-text {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n\n    :where(.theme-scope:is(*, :scope))\n      .header-variant-centered\n      .header-logo-size-compact\n      .header-logo-text {\n      font-size: 0.8rem;\n      line-height: 1.2rem;\n    }\n\n    :where(.theme-scope:is(*, :scope))\n      .header-variant-centered\n      .header-logo-size-generous\n      .header-logo-text {\n      font-size: 1.125rem;\n      line-height: 1.5rem;\n    }\n\n    :where(.theme-scope:is(*, :scope))\n      .header-variant-centered\n      .header-logo-size-display\n      .header-logo-text {\n      font-size: 1.35rem;\n      line-height: 1.75rem;\n    }\n}\n}\n\n  /* =================================================================\n   Shrink on Scroll - Logo & Title\n   ================================================================= */\n\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {\n    height: 2rem;\n  }\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {\n    height: 2.5rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-generous.rb-header-logo-sm {\n    height: 2.75rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-generous.rb-header-logo-lg {\n    height: 3.25rem;\n  }\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-display.rb-header-logo-sm,\n  :where(.theme-scope)\n    .rb-header-shrink.header-scrolled\n    .header-logo-size-display.rb-header-logo-lg {\n    height: 3.75rem;\n  }\n  :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {\n    font-size: 0.875rem;\n  }\n\n  @container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .header-logo-size-generous.rb-header-logo-sm,\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-generous.rb-header-logo-lg {\n      height: 3rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-display.rb-header-logo-sm,\n    :where(.theme-scope:is(*, :scope)) .header-logo-size-display.rb-header-logo-lg {\n      height: 5.5rem;\n    }\n\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.rb-header-logo-sm,\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.rb-header-logo-lg {\n      height: 3.5rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .header-logo-accommodation-popout-badge {\n      margin-block: 0;\n    }\n\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-plate,\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-popout-badge,\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-masthead,\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-badge,\n    :where(.theme-scope:is(*, :scope))\n      .rb-header-shrink.header-scrolled\n      .header-logo-size-display.header-logo-accommodation-centered-masthead {\n      position: relative;\n      z-index: 1;\n      margin-block: 0 -2.75rem;\n    }\n\n    :where(.theme-scope:is(*, :scope)) .rb-header-shrink.header-scrolled .header-logo-text {\n      font-size: 0.75rem;\n    }\n}\n}\n\n  /* =================================================================\n   Accessibility: Reduced Motion\n   ================================================================= */\n\n  @media (prefers-reduced-motion: reduce) {\n    :where(.theme-scope) .rb-header-layout,\n    :where(.theme-scope) .rb-header-logo-sm,\n    :where(.theme-scope) .rb-header-logo-lg,\n    :where(.theme-scope) .header-logo-text {\n      transition: none;\n    }\n  }\n\n  /* Nav underline-grow animation (used by navStyle: \"underline-grow\" in site-header.ts) */\n  :where(.theme-scope) .nav-underline-grow {\n    position: relative;\n    overflow: visible;\n  }\n  :where(.theme-scope) .nav-underline-grow::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: var(--nav-underline-offset, -0.35em);\n    width: 100%;\n    height: 2px;\n    background-color: currentColor;\n    transform: scaleX(0);\n    transform-origin: left center;\n    transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);\n  }\n  :where(.theme-scope) .nav-underline-grow:hover::after,\n  :where(.theme-scope)\n    .nav-underline-grow.nav-underline-active[data-active='true']::after {\n    transform: scaleX(1);\n  }\n  :where(.theme-scope) .nav-underline-offset-tight {\n    --nav-underline-offset: -0.2em;\n  }\n  :where(.theme-scope) .nav-underline-offset-normal {\n    --nav-underline-offset: -0.3em;\n  }\n  :where(.theme-scope) .nav-underline-offset-loose {\n    --nav-underline-offset: -0.45em;\n  }\n\n  :where(.theme-scope) .card-surface {\n    background: rgb(var(--tb-surface));\n    color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-text-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-heading-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-link-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-link-hover-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    --rb-surface-link-hover-decoration: underline;\n    --rb-surface-supporting-color: rgb(var(--tb-onSurface, var(--tb-text)));\n    border: 1px solid rgb(var(--tb-border));\n    border-radius: var(--radius-card);\n    box-shadow: var(--shadow-elev);\n  }\n  :where(.theme-scope) .media-rounded {\n    border-radius: var(--radius-card);\n  }\n\n  :where(.theme-scope) .is-placeholder::after {\n    content: 'Placeholder';\n    position: absolute;\n    top: 0.5rem;\n    left: 0.5rem;\n    font-size: 11px;\n    background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);\n    color: rgb(var(--tb-text));\n    padding: 0.15rem 0.35rem;\n    border-radius: 4px;\n    opacity: 0.85;\n  }\n\n  /* Status badges - theme-aware styling for capacity indicators */\n  :where(.theme-scope) .badge-status {\n    display: inline-flex;\n    align-items: center;\n    padding: 0.125rem 0.625rem;\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.25rem;\n  }\n\n  /* All badges use a subtle theme-aware style by default */\n  :where(.theme-scope) .badge-status-available {\n    background-color: rgb(var(--tb-secondary) / 0.15);\n    color: rgb(var(--tb-secondary-700, var(--tb-secondary)));\n  }\n\n  :where(.theme-scope) .badge-status-low {\n    background-color: rgb(var(--tb-accent) / 0.15);\n    color: rgb(var(--tb-accent-700, var(--tb-accent)));\n  }\n\n  :where(.theme-scope) .badge-status-sold-out {\n    background-color: rgb(var(--tb-text) / 0.1);\n    color: rgb(var(--tb-mutedText));\n  }\n\n  /* Event list empty state - theme-aware */\n  :where(.theme-scope) .event-list-empty {\n    background-color: rgb(var(--tb-surface));\n    color: rgb(var(--tb-onSurface, var(--tb-text)));\n    border-color: rgb(var(--tb-border));\n  }\n} /* end @layer rb-theme */\n\n@keyframes accordion-down {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n\n@keyframes accordion-up {\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n:where(.theme-scope) [data-animation=\"accordion\"][data-state=\"open\"] {\n  animation: accordion-down 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n:where(.theme-scope) [data-animation=\"accordion\"][data-state=\"closed\"] {\n  animation: accordion-up 0.3s cubic-bezier(0.4, 0, 1, 1);\n}\n\n/*\n * Block Static CSS Modules\n *\n * IMPORTANT: Import order is part of the cascade contract.\n * Keep these imports in the same order as the original monolithic file,\n * and add new modules at the end unless you are intentionally changing cascade.\n */\n\n/* =============================================================================\n * Shared: Registration Surface (issue 1174)\n *\n * Wizard-surface primitives shared by the event-registration,\n * appointment-booking blocks: surface container,\n * selectable option cards, step indicator, wizard actions row, on-surface\n * text ramp, layout stacks, summary box and skeleton shell lines.\n *\n * Uses:\n * - Tier 1 vars: --tb-* (from theme palette) as inline fallbacks\n * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)\n * - Shared vars: --rb-reg-* (mapped per block by the Tier 3 var generators;\n *   canonical name list in blocks/registrationSurfaceVars.ts)\n *\n * Defaults intentionally match the event-registration (issue 1089) values; blocks\n * that need to preserve a different look override in their own block CSS,\n * which is imported after this file (cascade order is the override contract \u2014\n * all selectors here are zero-specificity `:where()`).\n *\n * Layout-only `.rb-state-icon` rules (formerly registration-shared.css) live\n * here too; block CSS provides the `.rb-state-icon--{variant}` colors.\n *\n * Naming: component-like primitives follow the existing bare `rb-` shared\n * precedent (`.rb-state-icon`, `.rb-tile`): `.rb-option-card`, `.rb-progress*`,\n * `.rb-wizard-actions`, `.rb-on-surface`, `.rb-shell-*`. Container/layout\n * pieces that would otherwise collide with the global `.rb-*` utility layer\n * are namespaced `rb-reg-*` (`.rb-reg-surface`, `.rb-reg-stack`, ...). All of\n * them are scoped to the three registration blocks either way.\n * ============================================================================= */\n\n/* Terminal state icon (layout only \u2014 colors are per-block) */\n:where(.theme-scope) .rb-state-icon {\n  width: 4rem;\n  height: 4rem;\n  margin: 0 auto 1rem;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope) .rb-state-icon svg {\n  width: 2rem;\n  height: 2rem;\n}\n\n/* The success tick reads as a mark inside its disc, not a line drawing */\n:where(.theme-scope) .rb-state-icon--success svg {\n  width: 1.75rem;\n  height: 1.75rem;\n  stroke-width: 3;\n}\n\n/* Surface container */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-surface {\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  padding: clamp(1rem, 2vw, 1.5rem);\n  background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));\n  /* The panel paints its own surface, so it owns its foreground and its\n   * button context. Both are published from the theme by the opaque-panel\n   * registry (theme-core/src/blocks/opaquePanels.ts): an enclosing brand band\n   * would otherwise hand its light text and band-resolved buttons (on Anna's\n   * therapy page, a white-on-white Continue) to this light panel. */\n  transition: border-color var(--rb-block-transition, 150ms) ease;\n  width: 100%;\n  max-width: 800px;\n  margin-inline: 0;\n}\n\n/* Selectable option card */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem;\n  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  background: var(--rb-reg-option-bg, transparent);\n  color: inherit;\n  cursor: pointer;\n  text-align: left;\n  transition: border-color var(--rb-block-transition, 150ms) ease,\n              background-color var(--rb-block-transition, 150ms) ease,\n              box-shadow var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n  border-color: var(--rb-reg-border-hover, rgb(var(--tb-primary, 17 24 39) / 0.5));\n  box-shadow: var(--rb-reg-option-hover-shadow, 0 8px 18px rgb(var(--tb-shadow, 15 23 42) / 0.08));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card:focus-visible {\n  outline: 2px solid var(--rb-reg-focus-ring, rgb(var(--tb-primary, 17 24 39) / 0.3));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--selected {\n  border-color: var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));\n  background-color: var(--rb-reg-bg-selected, rgb(var(--tb-primary, 17 24 39) / 0.08));\n  box-shadow: 0 0 0 1px var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-card--disabled:hover {\n  border-color: var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));\n  box-shadow: none;\n}\n\n/* Check indicator */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-check {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 50%;\n  background: var(--rb-reg-check-bg, rgb(var(--tb-primary, 17 24 39)));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-option-check svg {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: var(--rb-reg-check-text, rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255))));\n}\n\n/* Progress: the current step's label, \"Step N of M\" and a thin bar (issue 1581) */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 1rem;\n  font-size: 0.8125rem;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress__label {\n  font-weight: 700;\n  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress__count {\n  margin-inline-start: auto;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.7));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress__track {\n  height: 4px;\n  border-radius: 4px;\n  background: rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.12);\n  overflow: hidden;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-progress__fill {\n  height: 100%;\n  border-radius: 4px;\n  background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));\n  transition: width var(--rb-block-transition, 150ms) ease;\n}\n\n/* Wizard actions row */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-wizard-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  margin-top: 1.5rem;\n}\n\n/* When there's only one action (no back button), push it to the right */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-wizard-actions > :only-child {\n  margin-inline-start: auto;\n}\n\n/* A footer with only Back keeps it bottom-left, like every other step */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-wizard-actions--back-only > :only-child {\n  margin-inline-start: 0;\n}\n\n/* On-surface text ramp */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface {\n  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--muted {\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.7));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--subtle {\n  color: var(--rb-reg-on-surface-subtle, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.6));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-on-surface--faint {\n  color: var(--rb-reg-on-surface-faint, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.5));\n}\n\n/* Layout stacks */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-stack--sm {\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-row--between {\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-grid {\n  display: grid;\n  gap: 0.75rem;\n}\n\n/* Summary box */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-reg-summary {\n  padding: 1rem;\n  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.75);\n  border: 1px solid var(--rb-reg-summary-border, rgb(var(--tb-border, 226 232 240)));\n  background: var(--rb-reg-summary-bg, rgb(var(--tb-muted, 241 245 249) / 0.42));\n}\n\n/* Skeleton shell lines */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line {\n  height: 0.75rem;\n  border-radius: 9999px;\n  background: linear-gradient(\n    90deg,\n    var(--rb-reg-shell-line, rgb(var(--tb-mutedText, 100 116 139) / 0.22)),\n    rgb(var(--tb-primary, 17 24 39) / 0.12),\n    var(--rb-reg-shell-line, rgb(var(--tb-mutedText, 100 116 139) / 0.22))\n  );\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--lg {\n  width: min(26rem, 82%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--md {\n  width: min(19rem, 68%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--sm {\n  width: min(14rem, 52%);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-line--xs {\n  width: min(10rem, 42%);\n}\n\n/* Skeleton block (rectangular placeholder, pulses) */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-block {\n  height: 2.5rem;\n  width: 100%;\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  background: var(--rb-reg-shell-line, rgb(var(--tb-mutedText, 100 116 139) / 0.22));\n  animation: rb-reg-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes rb-reg-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-shell-block {\n    animation: none;\n  }\n}\n\n/* Payment choices (issue 1581): one full-width radio row per way to pay, the\n * label and detail on the left, the price on the right. Shared by event and\n * appointment booking (PaymentChoiceRows). */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choices {\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.875rem;\n  padding: 1rem 1.125rem;\n  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border)));\n  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));\n  background: var(--rb-reg-option-bg, transparent);\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n  cursor: pointer;\n  transition:\n    border-color var(--rb-block-transition, 150ms) ease,\n    background-color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice:hover:not(.rb-pay-choice--disabled) {\n  border-color: var(--rb-reg-border-hover, rgb(var(--tb-primary) / 0.5));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice:focus-within {\n  box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.25);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice--selected {\n  border-color: rgb(var(--tb-primary));\n  box-shadow: inset 0 0 0 1px rgb(var(--tb-primary));\n  background: rgb(var(--tb-primary) / 0.06);\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice--selected:focus-within {\n  box-shadow:\n    inset 0 0 0 1px rgb(var(--tb-primary)),\n    0 0 0 3px rgb(var(--tb-primary) / 0.25);\n}\n\n/* Disabled stays readable: a dashed edge and quieter text, with its reason */\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice--disabled {\n  border-style: dashed;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice--disabled :is(.rb-pay-choice__label, .rb-pay-choice__detail, .rb-pay-choice__price) {\n  opacity: 0.65;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__radio {\n  flex: 0 0 auto;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0.125rem 0 0;\n  accent-color: rgb(var(--tb-primary));\n  cursor: inherit;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__body {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__label {\n  font-weight: 700;\n  line-height: 1.35;\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__detail {\n  font-size: 0.875rem;\n  line-height: 1.4;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-text) / 0.7));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__reason {\n  font-size: 0.8125rem;\n  line-height: 1.4;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) :where([data-block=\"event-registration\"], [data-block=\"appointment-booking\"]) .rb-pay-choice__price {\n  flex: 0 0 auto;\n  font-weight: 700;\n  text-align: end;\n  white-space: nowrap;\n}\n\n/* =============================================================================\n * Block: Event Registration (pilot #76)\n * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) {\n  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);\n  --rb-event-tile-bg: var(--er-event-card-bg);\n  --rb-event-tile-border: var(--er-border);\n  --rb-event-tile-border-width: var(--er-event-card-border-width);\n  --rb-event-tile-border-hover: var(--er-border-hover);\n  --rb-event-tile-border-selected: var(--er-border-selected);\n  --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);\n  --rb-event-tile-bg-selected: rgb(var(--tb-primary) / 0.1);\n  --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));\n  --er-on-surface-muted: rgb(var(--tb-onSurface, var(--tb-text)) / 0.7);\n  --er-on-surface-subtle: rgb(var(--tb-onSurface, var(--tb-text)) / 0.6);\n  --er-on-surface-faint: rgb(var(--tb-onSurface, var(--tb-text)) / 0.5);\n  --er-on-surface-hover-bg: rgb(var(--tb-onSurface, var(--tb-text)) / 0.05);\n  --er-on-surface-disabled: rgb(var(--tb-onSurface, var(--tb-text)) / 0.78);\n  --er-on-surface-disabled-detail: rgb(var(--tb-onSurface, var(--tb-text)) / 0.68);\n}\n\n/* Container: styled by the shared .rb-reg-surface (registration-surface.css);\n   .er-container remains in markup as a hook and for the overlay/embedded\n   variants below. */\n\n/* SSR shell / required-island fallback */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell {\n  min-height: 24rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__steps {\n  margin-bottom: 1.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__eyebrow {\n  margin: 0 0 0.35rem;\n  color: var(--er-on-surface-subtle);\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  line-height: 1.2;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__title {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__copy {\n  margin: 0.35rem 0 0;\n  max-width: 36rem;\n  line-height: 1.45;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__cards {\n  margin-top: 0.25rem;\n  overflow: hidden;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__card {\n  display: grid;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n\n/* Shell skeleton lines: styled by the shared .rb-shell-line family\n   (registration-surface.css); legacy classes remain in markup as hooks. */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__summary {\n  align-items: center;\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  border: 1px solid var(--er-summary-border);\n  padding: 0.875rem 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-registration-shell__button-placeholder {\n  display: inline-flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255)));\n  padding: 0.625rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .event-registration__hydration-error {\n  border-radius: var(--rb-block-radius);\n  border: 1px solid var(--er-border-error);\n  background: var(--er-error-bg);\n  color: var(--er-error-text);\n  padding: 1rem;\n  font-size: 0.9375rem;\n  line-height: 1.45;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'].event-registration--embedded)\n  .er-container {\n  max-width: none;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n/* Empty/unavailable states */\n:where(.theme-scope) :where([data-block='event-registration']) .er-empty {\n  border-radius: var(--rb-block-radius);\n  border: 1px dashed var(--er-border);\n  padding: 3rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-empty__text {\n  opacity: 0.6;\n}\n\n/* Date step (issue 1581): one radio row per date, on the shared event tile */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-list__month {\n  margin: 0.5rem 0 0;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-list__month:first-child {\n  margin-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card.er-date-option {\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  padding: 0.875rem 1rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option:focus-within {\n  box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.25);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option__radio {\n  flex: 0 0 auto;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0;\n  accent-color: rgb(var(--tb-primary));\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option__date {\n  font-weight: 700;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option__time {\n  font-size: 0.875rem;\n  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option__places {\n  flex: 0 0 auto;\n  padding: 0.125rem 0.5rem;\n  border: 1px solid var(--er-border);\n  border-radius: 999px;\n  font-size: 0.75rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n\n/* Full dates stay selectable (a guest can still reach recovery) but read as quiet */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option--full {\n  border-style: dashed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-date-option--full\n  :is(.er-date-option__main, .er-date-option__places) {\n  opacity: 0.6;\n}\n\n/* Capacity badges */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge {\n  font-size: 0.875rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--available {\n  background: var(--er-capacity-available-bg);\n  color: var(--er-capacity-available-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--low {\n  background: var(--er-capacity-low-bg);\n  color: var(--er-capacity-low-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-capacity-badge--soldout {\n  background: var(--er-capacity-soldout-bg);\n  color: var(--er-capacity-soldout-text);\n}\n\n/* Selected event summary: superseded by the shared .rb-reg-summary\n   (registration-surface.css); no markup emitted .er-event-summary anymore. */\n\n/* Ticket counter */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-counter-group {\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-counter {\n  gap: 0.625rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-counter-btn {\n  width: 2.125rem;\n  height: 2.125rem;\n  border-radius: 50%;\n  border: 1px solid var(--er-border);\n  background: transparent;\n  cursor: pointer;\n  font-size: 1rem;\n  line-height: 1;\n  transition: border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-btn:hover:not(:disabled) {\n  border-color: var(--er-border-hover);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-counter-limit {\n  margin: 0;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-lines {\n  display: grid;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-list {\n  display: grid;\n  gap: 0.625rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-ticket-line {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 0.875rem;\n  min-height: 4.75rem;\n  padding: 0.875rem;\n  border: 1px solid var(--er-border);\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  background: var(--er-control-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line--disabled {\n  color: var(--er-on-surface-disabled);\n  background: var(--er-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-main {\n  min-width: 0;\n  display: grid;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-heading {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-name {\n  min-width: 0;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n  overflow-wrap: anywhere;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-price {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-detail {\n  margin: 0;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary {\n  padding: 0.75rem 0.875rem;\n  border: 1px solid var(--er-summary-border);\n  border-radius: calc(var(--rb-block-radius) * 0.75);\n  background: var(--er-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-ticket-line-summary-list {\n  margin: 0.25rem 0 0;\n  padding-left: 1.125rem;\n  color: var(--er-on-surface-muted);\n  font-size: 0.8125rem;\n  line-height: 1.4;\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-ticket-line {\n    grid-template-columns: minmax(0, 1fr);\n    align-items: stretch;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-ticket-line\n    .er-counter {\n    justify-content: flex-start;\n  }\n}\n}\n\n/* Fields use the theme's own form-label / form-input / form-textarea\n   (theme-core/src/inputs/generateInputCss.ts), like the site's form block. */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-label-optional {\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: normal;\n  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-field-hint {\n  margin: 0.375rem 0 0;\n  font-size: 0.8125rem;\n  line-height: 1.4;\n  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-consent-check {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-error {\n  font-size: 0.875rem;\n  color: var(--er-error-text);\n  margin-top: 0.25rem;\n}\n\n/* Back button */\n:where(.theme-scope) :where([data-block='event-registration']) .er-back-btn {\n  font-size: 0.9375rem;\n  font-weight: 700;\n  opacity: 0.8;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0 0.25rem;\n  min-height: 2.75rem;\n  transition: opacity var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-back-btn:hover {\n  opacity: 1;\n}\n\n/* State icon color variants (layout from registration-surface.css) */\n/* Success: a solid primary disc with an on-primary tick (issue 1581) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--success {\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--info {\n  background: var(--er-info-bg);\n  color: var(--er-info-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--error {\n  background: var(--er-error-bg);\n  color: var(--er-error-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--waitlist {\n  background: var(--er-waitlist-bg);\n  color: var(--er-waitlist-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .rb-state-icon--warning {\n  background: var(--er-waitlist-bg);\n  color: var(--er-waitlist-text);\n}\n\n/* Retry button */\n:where(.theme-scope) :where([data-block='event-registration']) .er-retry-btn {\n  padding: 0.5rem 1rem;\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  border: 1px solid var(--er-border);\n  background: transparent;\n  cursor: pointer;\n  transition: border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-retry-btn:hover {\n  border-color: var(--er-border-hover);\n}\n\n/* Typography */\n:where(.theme-scope) :where([data-block='event-registration']) .er-title {\n  font-family: var(--font-heading, inherit);\n  font-size: var(--er-step-title-size, 1.75rem);\n  line-height: 1.15;\n}\n\n/* Confirmation and error titles: never smaller than a step's heading */\n:where(.theme-scope) :where([data-block='event-registration']) .er-title--lg {\n  font-size: calc(var(--er-step-title-size, 1.75rem) * 1.15);\n  line-height: 1.1;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text {\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text--muted {\n  opacity: 0.7;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-text--faint {\n  opacity: 0.6;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-title {\n  font-weight: 500;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-card {\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card {\n  padding: 0.875rem 0;\n  border-width: 0 0\n    var(--rb-event-tile-border-width, var(--rb-border-width, 1px)) 0;\n  border-style: solid;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card:last-child {\n  border-bottom-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-option {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-option-main {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-title {\n  font-size: 1rem;\n  line-height: 1.35;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-event-title {\n  color: var(--er-on-surface);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text {\n  color: var(--er-on-surface);\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card\n  .er-text {\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text--muted {\n  color: var(--er-on-surface-muted);\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card\n  .er-text--faint {\n  color: var(--er-on-surface-faint);\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled {\n  color: var(--er-on-surface-disabled);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card--selected {\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-event-card--selected\n  .er-event-title {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled\n  .er-text--muted,\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-card--disabled\n  .er-text--faint {\n  color: var(--er-on-surface-disabled-detail);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-event-grid\n  .er-capacity-badge {\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-counter-value {\n  font-size: 1.25rem;\n  font-weight: 700;\n  width: 1.625rem;\n  text-align: center;\n}\n\n/* Layout stacks/rows: styled by the shared .rb-reg-stack / .rb-reg-row\n   (registration-surface.css); legacy classes remain in markup as hooks. */\n\n/* Event/date selection rows */\n:where(.theme-scope) :where([data-block='event-registration']) .er-event-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-center {\n  text-align: center;\n  padding: 2rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-icon {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 1rem;\n}\n\n/* Actions row: styled by the shared .rb-wizard-actions (registration-surface.css);\n   .er-actions remains in markup as a hook. */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-button-with-spinner {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-button-spinner {\n  flex-shrink: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-altcha {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-field\n  + .er-field {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-message {\n  margin-bottom: 1rem;\n}\n\n/* Stripe's Pay button is inside its iframe, so the way back sits above the form. */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-embedded-payment__back {\n  display: block;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-notice {\n  margin-bottom: 1rem;\n  width: 100%;\n  padding: 1.25rem;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  background: rgb(var(--tb-surface) / 0.5);\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-title {\n  margin: 0;\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-notice\n  .rb-state-icon {\n  margin: 0 auto 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-copy {\n  margin: 0.5rem 0 0;\n  font-size: 0.9375rem;\n  color: var(--er-on-surface-muted);\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-link {\n  margin-top: 0.75rem;\n  padding: 0;\n  border: 0;\n  background: none;\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-primary));\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-existing-registration-link:hover {\n  text-decoration: none;\n}\n\n/* Payment group container */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group\n  + .er-payment-group {\n  margin-top: 1.5rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  margin: 0 0 0.25rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group-subtitle {\n  font-size: 0.8125rem;\n  color: var(--er-on-surface-subtle);\n  margin: 0 0 0.5rem 0;\n}\n\n/* Payment option card */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem;\n  border: 1px solid var(--er-payment-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n  cursor: pointer;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option:hover {\n  border-color: var(--er-payment-border-hover);\n  box-shadow: 0 8px 18px rgb(var(--tb-shadow, 15 23 42) / 0.08);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--selected {\n  border-color: var(--er-payment-border-selected);\n  background-color: var(--er-payment-bg-selected);\n  box-shadow: 0 0 0 1px var(--er-payment-border-selected);\n}\n\n/* Discount code entry */\n:where(.theme-scope) :where([data-block='event-registration']) .er-discount {\n  margin-top: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__form {\n  display: grid;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__toggle {\n  background: transparent;\n  border: 0;\n  padding: 0;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  font-size: 0.875rem;\n  text-decoration: underline;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__toggle:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__label {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__input {\n  flex: 1;\n  border-radius: calc(var(--rb-block-radius) * 0.6);\n  border: 1px solid var(--er-border);\n  padding: 0.5rem 0.75rem;\n  background: rgb(var(--tb-background));\n  color: rgb(var(--tb-foreground));\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__input:focus {\n  outline: 2px solid var(--er-focus-ring);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__remove {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  color: var(--er-on-surface);\n  cursor: pointer;\n  opacity: 0.7;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__apply {\n  background: transparent;\n  border: 0;\n  padding: 0.25rem;\n  color: var(--er-on-surface);\n  cursor: pointer;\n  opacity: 0.8;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__remove:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__apply:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__hint {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-discount__feedback {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n/* Visually hide native radio but keep focusable (sr-only pattern) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-radio {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Focus ring on label when radio is focused */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option:focus-within {\n  outline: 2px solid var(--er-payment-border-selected);\n  outline-offset: 2px;\n}\n\n/* Content layout */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-name {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-detail {\n  font-size: 0.875rem;\n  color: var(--er-on-surface-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-description {\n  font-size: 0.8125rem;\n  color: var(--er-on-surface-subtle);\n  margin-top: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option-validity {\n  font-size: 0.75rem;\n  color: var(--er-on-surface-faint);\n}\n\n/* Checkmark indicator: styled by the shared .rb-option-check\n   (registration-surface.css); .er-check remains in markup as a hook. */\n\n/* Payment summary */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-summary {\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-price {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--er-on-surface);\n}\n\n/* Guest details section */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section {\n  margin-top: 1.5rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section\n  .er-title {\n  margin: 0 0 0.75rem;\n}\n\n/* Error banner for guest section */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section-error {\n  padding: 0.75rem 1rem;\n  margin-bottom: 1rem;\n  background: var(--er-error-bg);\n  border: 1px solid var(--er-border-error);\n  border-radius: calc(var(--rb-block-radius) * 0.5);\n  color: var(--er-error-text);\n  font-size: 0.875rem;\n}\n\n/* Card-based layout for guests */\n:where(.theme-scope) :where([data-block='event-registration']) .er-guest-cards {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-guest-card {\n  display: grid;\n  gap: 0.75rem;\n  padding: 1rem 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-card\n  .er-field\n  + .er-field {\n  margin-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-card\n  + .er-guest-card {\n  border-top: 1px solid var(--er-border);\n}\n\n\n/* Shake animation for validation errors */\n@keyframes er-shake {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  20%,\n  60% {\n    transform: translateX(-4px);\n  }\n  40%,\n  80% {\n    transform: translateX(4px);\n  }\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-guest-section--shake {\n  animation: er-shake 0.4s ease-in-out;\n}\n\n/* =============================================================================\n * Shared: Event Cards (Listing / Spotlight / Combined)\n * Uses:\n * - Tier 1 vars: --tb-*-{shade} (from theme palette)\n * - Tier 2 vars: --rb-block-transition (from theme scope)\n * - Tier 3 vars: --rb-event-card-* (from event-calendar + event-cards var generators)\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined'],\n    .event-card--catalogue\n  )\n  .event-card-media {\n  height: var(--rb-event-card-media-height, 16rem);\n  overflow: hidden;\n  position: relative;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined'],\n    .event-card--catalogue\n  )\n  .event-card-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transform: scale(1);\n  transition: transform var(--rb-event-card-image-transition-duration, 700ms)\n    ease;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'] .event-card:hover,\n    [data-block='event-spotlight'] .event-card:hover,\n    [data-block='event-calendar'] .event-card:hover,\n    [data-block='event-combined'] .event-card:hover,\n    .event-card--catalogue:hover\n  )\n  .event-card-image {\n  transform: scale(var(--rb-event-card-image-hover-scale, 1.08));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card {\n  transition: transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card-cta {\n  width: 100%;\n  justify-content: center;\n  text-align: center;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card:hover {\n  transform: translateY(var(--rb-event-card-hover-translate-y, 0px));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  background: var(--rb-event-card-overlay-color, rgb(var(--tb-primary)));\n  opacity: var(--rb-event-card-overlay-opacity, 0);\n  mix-blend-mode: var(--rb-event-card-overlay-blend-mode, multiply);\n  transition: opacity var(--rb-block-transition) ease;\n  pointer-events: none;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-card:hover\n  .event-card-overlay {\n  opacity: var(--rb-event-card-overlay-hover-opacity, 0);\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge {\n  display: inline-flex;\n  align-items: center;\n  width: fit-content;\n  padding: 0.35rem 0.95rem;\n  border-radius: 9999px;\n  font-size: 0.65rem;\n  font-weight: 700;\n  line-height: 1rem;\n  text-transform: uppercase;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge--overlay {\n  position: absolute;\n  top: 0.75rem;\n  left: 0.75rem;\n  z-index: 20;\n  margin-bottom: 0;\n  pointer-events: none;\n}\n\n/* =============================================================================\n * EventCard: Horizontal Layout (stack mode, md+ screens only)\n * ============================================================================= */\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal {\n    display: flex;\n    flex-direction: row;\n    gap: var(--rb-event-card-horizontal-gap, 1rem);\n  }\n\n  /* Image: ~1/3 width */\n  :where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-media {\n    width: var(--rb-event-card-horizontal-image-width, 33.333%);\n    min-width: 200px;\n    max-width: 320px;\n    height: auto;\n    aspect-ratio: 4/3;\n    flex-shrink: 0;\n  }\n\n  /* Content: fills remaining space */\n  :where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .card-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* Footer: row layout with button on left, capacity on right */\n  :where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-footer {\n    flex-direction: row-reverse;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  /* Button: auto width */\n  :where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-cta {\n    width: auto;\n  }\n\n  /* Capacity: right-aligned */\n  :where(.theme-scope:is(*, :scope))\n    :where(\n      [data-block='event-listing'],\n      [data-block='event-spotlight'],\n      [data-block='event-calendar'],\n      [data-block='event-combined']\n    )\n    .event-card--horizontal\n    .event-card-capacity {\n    text-align: right;\n  }\n}\n}\n\n/* Keep token list in sync with `EVENT_CATEGORY_BADGE_TOKENS` in `packages/blocks/src/system/constants/events.ts`. */\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='primary'] {\n  background-color: rgb(var(--tb-primary-200));\n  color: rgb(var(--tb-primary-800));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='secondary'] {\n  background-color: rgb(var(--tb-secondary-200));\n  color: rgb(var(--tb-secondary-800));\n}\n\n:where(.theme-scope)\n  :where(\n    [data-block='event-listing'],\n    [data-block='event-spotlight'],\n    [data-block='event-calendar'],\n    [data-block='event-combined']\n  )\n  .event-category-badge[data-category-token='accent'] {\n  background-color: rgb(var(--tb-accent-200));\n  color: rgb(var(--tb-accent-800));\n}\n\n/* Notice/info boxes */\n:where(.theme-scope) :where([data-block='event-registration']) .er-notice {\n  padding: 0.75rem 1rem;\n  border-radius: var(--er-radius);\n  margin-bottom: 1rem;\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-notice p {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-notice--info {\n  background-color: rgb(var(--tb-primary-100) / 0.5);\n  border: 1px solid rgb(var(--tb-primary-300) / 0.5);\n  color: rgb(var(--tb-primary-800));\n}\n\n/* Disabled payment group */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group--disabled {\n  opacity: 0.6;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-group--disabled\n  .er-payment-group-title {\n  color: var(--er-on-surface-faint);\n}\n\n/* Disabled payment option */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-option--disabled:hover {\n  border-color: var(--er-payment-border);\n  background-color: transparent;\n}\n\n/* =============================================================================\n * Payment Step Layout\n * Main flow + optional legacy sidebar area + footer summary/actions\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout {\n  display: grid;\n  gap: 1.25rem;\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'sidebar'\n    'main'\n    'footer';\n}\n\n/* When no sidebar, main takes full width */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout--no-sidebar {\n  grid-template-areas:\n    'main'\n    'footer';\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-payment-layout {\n    grid-template-columns: 1fr 260px;\n    grid-template-areas:\n      'main sidebar'\n      'footer footer';\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-payment-layout--no-sidebar {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'main'\n      'footer';\n  }\n}\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main {\n  grid-area: main;\n  /* A column, so an optional sign-in line can settle at the foot of the step. */\n  display: flex;\n  flex-direction: column;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main\n  > * {\n  flex-shrink: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main\n  > .er-portal-auth[data-placement='before'] {\n  margin-bottom: 1.5rem;\n}\n\n/* The optional sign-in line: pinned to the foot of the step behind a hairline,\n   and never closer than 1.5rem to the step's content. */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main\n  > .er-portal-auth[data-placement='after'] {\n  margin-top: auto;\n  padding-top: 1rem;\n  border-top: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-main\n  > :has(+ .er-portal-auth[data-placement='after']) {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-sidebar {\n  grid-area: sidebar;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-layout-footer {\n  grid-area: footer;\n  display: flex;\n  flex-direction: column;\n  gap: 0.875rem;\n}\n\n/* =============================================================================\n * Attendance mode tiles (in person / online)\n * =============================================================================\n */\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tiles {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  gap: 0.75rem;\n  align-items: stretch;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tiles\n  > [role='listitem'] {\n  min-width: 0;\n  display: flex;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile {\n  width: 100%;\n  min-height: 5.75rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  padding: 0.75rem 0.625rem;\n  border: 1px solid var(--er-payment-border);\n  border-radius: var(--rb-block-radius);\n  background: var(--er-control-bg);\n  cursor: pointer;\n  text-align: center;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile:hover {\n  border-color: var(--er-payment-border-hover);\n  box-shadow: 0 8px 18px rgb(var(--tb-shadow, 15 23 42) / 0.08);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile--selected {\n  border-color: var(--er-payment-border-selected);\n  background-color: var(--er-payment-bg-selected);\n  box-shadow: 0 0 0 1px var(--er-payment-border-selected);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-label {\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-payment-tile-detail {\n  font-size: 0.78125rem;\n  color: var(--er-on-surface-subtle);\n  line-height: 1.25;\n}\n\n/* =============================================================================\n * Order Summary Bar (horizontal, in footer)\n * Layout: [Title + meta on left] [Price on right]\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-summary-bar {\n  /* One row under the footer's hairline: what's booked, then the total\n     (issue 1581). */\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-event {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  margin: 0;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-meta {\n  font-size: 0.9375rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-meta\n  > span\n  + span::before {\n  content: ' \u00B7 ';\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-schedule {\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-text) / 0.7));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-price {\n  font-size: 1.125rem;\n  font-weight: 700;\n  flex-shrink: 0;\n  text-align: right;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pricing {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-items: baseline;\n  column-gap: 0.5rem;\n  row-gap: 0.125rem;\n  text-align: right;\n}\n\n/* Notes under the total take their own line */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pricing\n  > div {\n  flex-basis: 100%;\n}\n\n/* Product section in summary bar (for pass/membership selection) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 0.75rem 0;\n  background: transparent;\n  border-top: 1px solid var(--er-summary-border);\n  border-bottom: 1px solid var(--er-summary-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-name {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pass-escape {\n  margin-top: 0.25rem;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: rgb(var(--tb-primary));\n  font-size: 0.8125rem;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-pass-escape:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-detail {\n  font-size: 0.8125rem;\n  color: rgb(var(--tb-text) / 0.6);\n  margin-top: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-product-price {\n  font-weight: 600;\n  font-size: 0.9375rem;\n  flex-shrink: 0;\n  text-align: right;\n}\n\n/* Strikethrough price styling */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-price--struck {\n  text-decoration: line-through;\n  color: rgb(var(--tb-text) / 0.5);\n  font-size: 0.9375rem;\n  font-weight: 500;\n  text-align: right;\n}\n\n/* \"Included\" text styling */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-summary-bar-included {\n  font-size: 0.8125rem;\n  color: rgb(var(--tb-primary-600));\n  font-weight: 500;\n  text-align: right;\n}\n\n/* =============================================================================\n * Portal Auth Section (sidebar)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-portal-auth {\n  /* The surface the panel paints publishes its own foreground; --tb-onSurface\n     can be a different (near-black) colour from the site's text. */\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n  font-size: 0.9375rem;\n  line-height: 1.5;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-title {\n  font-weight: 600;\n  margin: 0 0 0.25rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth[data-placement='after']\n  .er-portal-auth-title {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text {\n  font-size: 0.9375rem;\n  color: var(--er-on-surface-muted);\n  margin: 0 0 1rem 0;\n  line-height: 1.4;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth\n  .er-portal-auth-text {\n  color: inherit;\n  margin: 0;\n  line-height: inherit;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link:hover {\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-link:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text--success {\n  color: rgb(var(--tb-success, 34 197 94));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-portal-auth-text--error {\n  color: rgb(var(--tb-error, 239 68 68));\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n}\n\n/* Modal */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--rb-modal-overlay-bg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal {\n  background: rgb(var(--tb-background));\n  border-radius: var(--rb-block-radius);\n  padding: 1.5rem;\n  max-width: 400px;\n  width: 100%;\n  position: relative;\n  box-shadow: 0 10px 25px rgb(var(--tb-shadow) / 0.2);\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  color: rgb(var(--tb-text) / 0.5);\n  padding: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-close:hover {\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-title {\n  font-size: 1.25rem;\n  font-weight: 600;\n  margin: 0 0 1rem 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-content {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-content\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-modal-btn {\n  padding: 0.75rem 1.5rem;\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n  border: none;\n  border-radius: var(--rb-block-radius);\n  font-weight: 500;\n  cursor: pointer;\n  transition: opacity 0.15s;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn:hover {\n  opacity: 0.9;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn--secondary {\n  background: transparent;\n  color: rgb(var(--tb-text));\n  border: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-modal-btn--secondary:hover {\n  background: rgb(var(--tb-text) / 0.05);\n}\n\n/* Booking card: in the page where the editor placed the block (issue 1581) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card {\n  display: flex;\n  flex-direction: column;\n  gap: 1.125rem;\n  padding: 1.5rem 1.75rem;\n  border: 1px solid var(--er-border);\n  border-radius: calc(var(--rb-block-radius) * 1.25);\n  background: rgb(var(--tb-surface));\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__row {\n  display: flex;\n  align-items: center;\n  gap: 1.25rem 1.75rem;\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__tile {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem;\n  width: 4.25rem;\n  height: 4.75rem;\n  border-radius: var(--rb-block-radius);\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__tile-month {\n  font-size: 0.75rem;\n  font-weight: 800;\n  letter-spacing: 0.1em;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__tile-day {\n  font-family: var(--font-heading, inherit);\n  font-size: 2rem;\n  line-height: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__badge {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 999px;\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__body {\n  flex: 1 1 16rem;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__when {\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__venue,\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__facts {\n  margin: 0;\n  font-size: 0.9375rem;\n  line-height: 1.45;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__facts {\n  margin-top: 0.25rem;\n  font-weight: 600;\n  color: inherit;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__cta {\n  flex: 0 0 auto;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__dates {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.625rem;\n  padding-top: 1.125rem;\n  border-top: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__dates-label {\n  margin-right: 0.375rem;\n  font-size: 0.8125rem;\n  font-weight: 800;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__date {\n  min-height: 2.75rem;\n  padding: 0 1rem;\n  border: 1px solid var(--er-border);\n  border-radius: 999px;\n  background: var(--er-control-bg);\n  color: inherit;\n  font: inherit;\n  font-size: 0.875rem;\n  font-weight: 700;\n  cursor: pointer;\n  transition: border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__date:hover {\n  border-color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__date[data-full] {\n  border-style: dashed;\n  background: transparent;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-card__more {\n  font-size: 0.875rem;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n/* Booking bar: fixed to the bottom once the visitor is past the first screen.\n   It stays mounted and slides: the card pushes it down in step as it rises\n   from the bottom of the screen (--er-bar-push, set per frame), and it slides\n   back up when the visitor scrolls past the card (issue 1581). */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 12000;\n  padding: 0.625rem max(1rem, env(safe-area-inset-right))\n    max(0.625rem, env(safe-area-inset-bottom))\n    max(1rem, env(safe-area-inset-left));\n  background: rgb(var(--tb-surface));\n  border-top: 1px solid var(--er-border);\n  box-shadow: 0 -8px 28px rgb(var(--tb-shadow) / 0.14);\n  /* Set per frame on the element while the card pushes the bar off. */\n  --er-bar-push: 0px;\n  transform: translateY(var(--er-bar-push));\n  transition:\n    transform 220ms ease,\n    visibility 0s linear 0s;\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar[data-state='hidden'] {\n  transform: translateY(calc(100% + 1.75rem));\n  visibility: hidden;\n  transition:\n    transform 220ms ease,\n    visibility 0s linear 220ms;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar[data-pushing='true'] {\n  /* Following the card frame by frame: no easing to lag behind. */\n  transition: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n    .er-booking-bar {\n    transform: none;\n    transition:\n      opacity 150ms ease,\n      visibility 0s linear 0s;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n    .er-booking-bar[data-state='hidden'] {\n    transform: none;\n    opacity: 0;\n    transition:\n      opacity 150ms ease,\n      visibility 0s linear 150ms;\n}\n\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__inner {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem 1.5rem;\n  width: 100%;\n  max-width: 77rem;\n  min-height: 2.75rem;\n  margin-inline: auto;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__info {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem 0.875rem;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__title {\n  font-family: var(--font-heading, inherit);\n  font-size: 1.25rem;\n  line-height: 1.2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__meta {\n  display: block;\n  min-width: 0;\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-text) / 0.75));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Facts are set apart by a thin muted rule rather than a dot (issue 1581) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__divider {\n  display: inline-block;\n  width: 0;\n  height: 0.875em;\n  margin-inline: 0.75rem;\n  border-left: 1px solid var(--er-border);\n  vertical-align: -0.0625em;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__fact--price {\n  font-weight: 600;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar[data-entry='inProgress'] .er-booking-bar__meta {\n  font-weight: 600;\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__progress {\n  flex: 0 0 7.5rem;\n  height: 4px;\n  border-radius: 4px;\n  background: rgb(var(--tb-text) / 0.12);\n  overflow: hidden;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__progress-fill {\n  display: block;\n  height: 100%;\n  border-radius: 4px;\n  background: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__cta {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n/* Booked or waitlisted: one quiet status line; the whole bar leads back to the card */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__status {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  width: 100%;\n  min-width: 0;\n  min-height: 2.75rem;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  text-align: start;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__status:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 4px;\n  border-radius: 4px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__check {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.375rem;\n  height: 1.375rem;\n  border-radius: 999px;\n  background: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__status-text {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-bar__status-title {\n  flex: 0 0 auto;\n  font-weight: 700;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n/* Phones: the title or status on the first line, the facts smaller and\n   quieter below it, beside a compact button (issue 1581). */\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__info {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__title {\n  max-width: 100%;\n  font-family: inherit;\n  font-size: 0.9375rem;\n  font-weight: 700;\n  line-height: 1.25;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__meta {\n  max-width: 100%;\n  font-size: 0.8125rem;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__divider {\n  margin-inline: 0.5rem;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__progress {\n  flex-basis: auto;\n  width: 6rem;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__status-text {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.125rem;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-overlay__header {\n  row-gap: 0.625rem;\n  padding: 0.875rem 1rem 0.75rem;\n}\n\n/* The status and its facts are on separate lines: no rule between them */\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar__status-text > .er-booking-bar__divider {\n  display: none;\n}\n\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-bar\n    .er-booking-bar__inner\n    > .er-booking-bar__cta {\n  min-height: 2.5rem;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n}\n}\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay {\n  position: fixed;\n  inset: 0;\n  height: 100dvh;\n  z-index: 14000;\n  display: flex;\n  align-items: stretch;\n  justify-content: stretch;\n  background: var(--rb-modal-overlay-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__panel {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100dvh;\n  min-height: 0;\n  overflow: hidden;\n  /* Surface, like the card, the bar and the system page's column, and what\n     the embedded Stripe checkout is branded with (checkoutBranding.ts). */\n  background: rgb(var(--tb-surface));\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__header {\n  flex: 0 0 auto;\n  z-index: 2;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.875rem 1rem;\n  padding: 1.125rem 1.25rem 1rem;\n  background: rgb(var(--tb-surface));\n  border-bottom: 1px solid var(--er-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__progress {\n  /* Pinned under the title, so the step stays in view while the step scrolls\n     (issue 1581). It takes the header's full width, on its own row. */\n  flex: 1 0 100%;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__progress\n  .rb-progress {\n  margin-bottom: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__heading {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__title {\n  margin: 0;\n  font-family: var(--font-heading, inherit);\n  font-size: 1.5rem;\n  line-height: 1.15;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__subtitle {\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-overlay__close {\n  flex: 0 0 auto;\n  width: 2.75rem;\n  height: 2.75rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--er-border);\n  border-radius: 999px;\n  background: transparent;\n  color: inherit;\n  line-height: 1;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay {\n  max-width: none;\n  border: 0;\n  border-radius: 0;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout {\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  gap: 0;\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'main'\n    'footer';\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout-main {\n  min-height: 0;\n  overflow: auto;\n  padding: 1.25rem;\n}\n\n/* Processing, confirmation and error take the whole panel (issue 1581) */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-whole-screen {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-whole-screen__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  padding: 1.5rem 1.25rem;\n}\n\n/* The confirmation's one action sits where the steps' Continue does: pinned\n   and full width in the panel, flowing under the content in the aside. */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-whole-screen__footer {\n  margin-top: 1.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-whole-screen__footer {\n  margin-top: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-whole-screen__footer\n  .er-whole-screen__action {\n  width: 100%;\n  justify-content: center;\n}\n\n/* The header already names the event and its date, so the footer summary\n   drops its title and schedule; the discount keeps just its name. */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  :is(.er-summary-bar-event, .er-summary-bar-schedule, .er-summary-bar-discount-detail) {\n  display: none;\n}\n\n/* On the date step the chosen date is the news, so it stays. */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-summary-bar[data-step='select-event']\n  .er-summary-bar-schedule {\n  display: inline;\n  color: inherit;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-payment-layout-footer {\n  position: relative;\n  z-index: 3;\n  padding: 0.875rem 1rem max(0.875rem, env(safe-area-inset-bottom));\n  background: rgb(var(--tb-surface));\n  border-top: 1px solid var(--er-border);\n  box-shadow: 0 -12px 26px rgb(var(--tb-shadow) / 0.12);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-container--overlay\n  .er-actions {\n  margin-top: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-overlay {\n    justify-content: flex-end;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-booking-overlay__panel {\n    width: min(32rem, 100vw);\n    min-height: 100%;\n    box-shadow: -16px 0 40px rgb(var(--tb-shadow) / 0.22);\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-container--overlay\n    .er-payment-layout-main {\n    padding: 1.5rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'])\n    .er-container--overlay\n    .er-payment-layout-footer {\n    padding: 0.875rem 1.25rem max(0.875rem, env(safe-area-inset-bottom));\n  }\n}\n}\n\n/* The system event page hosts the same panel in its sticky column (issue 1581):\n   from 1024px the steps scroll inside it and the footer stays pinned. */\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-container {\n    display: flex;\n    max-height: calc(100dvh - 9rem);\n    min-height: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-payment-layout {\n    flex: 1 1 auto;\n    min-height: 0;\n    gap: 0;\n    grid-template-rows: minmax(0, 1fr) auto;\n    grid-template-areas:\n      'main'\n      'footer';\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-payment-layout-main {\n    min-height: 0;\n    overflow: auto;\n    padding-bottom: 1rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-payment-layout-footer {\n    padding-top: 0.875rem;\n    border-top: 1px solid var(--er-border);\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-whole-screen {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-registration'].event-registration--embedded)\n    .er-whole-screen__body {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n  }\n}\n}\n\n/* Confirmation summary: only the facts known for certain */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-confirmation-summary {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  margin: 1.5rem 0 0;\n  padding: 1.125rem 1.25rem;\n  border: 1px solid var(--er-border);\n  border-radius: var(--rb-block-radius);\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-confirmation-summary__row {\n  display: flex;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-confirmation-summary__row dt {\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-confirmation-summary__row dd {\n  margin: 0;\n  font-weight: 700;\n  text-align: end;\n}\n\n/* Why passes and memberships are greyed out for more than one place */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-entitlement-note {\n  margin: 0;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--er-border);\n  font-size: 0.875rem;\n  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-entitlement-note__action {\n  padding: 0;\n  border: 0;\n  background: none;\n  color: rgb(var(--tb-primary));\n  font: inherit;\n  font-weight: 700;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n  cursor: pointer;\n}\n\n/* Magic Link Form */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-form\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-success {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-magic-link-success\n  .er-portal-auth-text {\n  margin: 0;\n}\n\n/* =============================================================================\n * Inline Links (.er-link)\n * For inline buttons styled as links (e.g., \"Not you? Log out\")\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-link {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n:where(.theme-scope) :where([data-block='event-registration']) .er-link:hover {\n  text-decoration: none;\n}\n\n/* Logged-in user hint with logout link */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-logged-in-hint {\n  font-size: 0.875rem;\n  opacity: 0.7;\n  margin: 0.25rem 0 0 0;\n}\n\n/* =============================================================================\n * Booking Mode Step\n * Early step for pass/membership holders to choose their payment mode\n * =============================================================================\n */\n\n/* Hero message for membership holders */\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem 1.25rem;\n  background: rgb(var(--tb-primary-100) / 0.4);\n  border: 1px solid rgb(var(--tb-primary-300) / 0.4);\n  border-radius: var(--rb-block-radius);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: rgb(var(--tb-primary));\n  margin-top: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-icon\n  svg {\n  width: 20px;\n  height: 20px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-content {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-title {\n  font-size: 1rem;\n  font-weight: 600;\n  margin: 0 0 0.125rem 0;\n  color: rgb(var(--tb-primary-800));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-registration'])\n  .er-booking-mode-hero-subtitle {\n  font-size: 0.875rem;\n  color: rgb(var(--tb-primary-700));\n  margin: 0;\n}\n\n/* Selection cards for pass holders */\n\n/* =============================================================================\n * Block: Event Calendar\n * Uses:\n * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)\n * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)\n * - Tier 3 vars: --ec-* (from event-calendar var generator)\n * =============================================================================\n */\n\n/* Main container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar {\n  width: 100%;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-container {\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  overflow: hidden;\n}\n\n/* Calendar navigation */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-nav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 2.5rem;\n  min-height: 2.5rem;\n  padding: 0.5rem;\n  border-radius: var(--rb-block-radius);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  transition: background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-nav-btn:hover {\n  background-color: var(--ec-nav-hover-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  min-width: 200px;\n  text-align: center;\n}\n\n/* Day headers */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-headers {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  background-color: var(--ec-header-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-header {\n  text-align: center;\n  padding: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  opacity: var(--ec-header-opacity);\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n/* Calendar grid */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n/* Day cells */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-calendar-day {\n  min-height: 100px;\n  border-bottom: 1px solid var(--ec-border-subtle);\n  border-right: 1px solid var(--ec-border-subtle);\n  padding: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day:nth-child(7n) {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--today {\n  background-color: var(--ec-today-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--other-month {\n  opacity: var(--ec-other-month-opacity);\n}\n\n/* Day number */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day-number {\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  opacity: var(--ec-day-number-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-day--today\n  .event-calendar-day-number {\n  font-weight: 700;\n  opacity: 1;\n  color: var(--ec-today-text);\n}\n\n/* Events list */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-events {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Event item - solid primary background */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: calc(var(--rb-block-radius) / 2);\n  background-color: var(--ec-event-solid-bg);\n  color: var(--ec-event-solid-text);\n  text-decoration: none;\n  overflow: hidden;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  font-family: inherit;\n  transition:\n    background-color var(--rb-block-transition) ease,\n    transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event:hover {\n  background-color: var(--ec-event-solid-hover-bg);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event:focus-visible {\n  outline: 2px solid var(--ec-event-solid-bg);\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event-time {\n  flex-shrink: 0;\n  white-space: nowrap;\n  font-weight: 600;\n  opacity: 0.9;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-event-title {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* More indicator - clickable button style */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more {\n  font-size: 0.75rem;\n  padding: 0.25rem 0.5rem;\n  color: rgb(var(--tb-primary));\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  border-radius: calc(var(--rb-block-radius) / 2);\n  font-family: inherit;\n  transition: background-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more:hover {\n  background-color: rgb(var(--tb-primary) / 0.1);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-more:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-empty {\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n  margin-top: 1rem;\n}\n\n/* Filters container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filter {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  min-width: 180px;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-filter-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  opacity: 0.7;\n}\n\n/* Event filter select inherits base styling from .form-select, only block-specific overrides here */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-filter-select {\n  /* Use theme input radius instead of block radius for consistency with other form inputs */\n  border-radius: var(--rb-input-radius, var(--rb-block-radius));\n}\n\n/* Category filter buttons */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-category-btn {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  cursor: pointer;\n  color: var(--ec-text);\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:hover:not(:disabled) {\n  border-color: rgb(var(--tb-primary) / 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn--active {\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-category-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Allow category filter to be wider for button group */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-filter:has(.event-category-buttons) {\n  min-width: auto;\n  flex: 1 1 auto;\n}\n\n/* Combined mode container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-combined {\n  width: 100%;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-combined-content {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Calendar view toggle (Month/Week) in Combined mode */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-toggle {\n  display: flex;\n  gap: 0.25rem;\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  cursor: pointer;\n  color: var(--ec-text);\n  opacity: 0.7;\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn:hover {\n  opacity: 1;\n  border-color: rgb(var(--tb-primary) / 0.5);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-calendar-view-btn--active {\n  opacity: 1;\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n}\n\n/* -----------------------------------------------------------------------------\n * Week Agenda View\n * Vertical agenda layout for week view with rich event details\n * ----------------------------------------------------------------------------- */\n\n/* Agenda week container */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-week {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n/* Individual day section */\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-day {\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day:last-child {\n  border-bottom: none;\n}\n\n/* Day header */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-header {\n  padding: 0.75rem 0;\n  background-color: var(--ec-header-bg);\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Today badge */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-today-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n  border-radius: var(--rb-button-radius);\n}\n\n/* Today highlight for entire day section */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day--today\n  .event-agenda-day-header {\n  background-color: var(--ec-today-bg);\n}\n\n/* Day content area */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-content {\n  padding: 0.75rem 0;\n}\n\n/* Events list within a day */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-day-events {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n * Agenda Event Card\n * Rich event card for agenda view\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-agenda-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 0.75rem;\n  background-color: var(--ec-surface);\n  border: 1px solid var(--ec-border-subtle);\n  border-radius: var(--rb-block-radius);\n  text-decoration: none;\n  /* Paints its own surface: its foreground and button context come from the\n   * opaque-panel registry (theme-core/src/blocks/opaquePanels.ts). */\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card:hover {\n  border-color: rgb(var(--tb-primary) / 0.5);\n  background-color: var(--ec-event-bg);\n}\n\n/* Category color indicator */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-indicator {\n  flex-shrink: 0;\n  width: 4px;\n  align-self: stretch;\n  border-radius: 2px;\n  min-height: 2.5rem;\n}\n\n/* Card content wrapper */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Header row: time + title */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-header {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-time {\n  font-size: 0.75rem;\n  font-weight: 600;\n  opacity: var(--ec-time-opacity);\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.3;\n}\n\n/* Details row: venue, price, capacity */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-details {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n.event-agenda-card-icon {\n  flex-shrink: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-price {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card-capacity {\n  font-weight: 500;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n.event-agenda-card-capacity--full {\n  font-weight: 600;\n}\n\n/*\n * Agenda rows\n *\n * The modal keeps the original button card above. Published agenda rows use\n * an article so their title and booking action can be separate, accessible\n * links without nesting anchors.\n */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda {\n  display: grid;\n  grid-template-columns: 0.25rem minmax(4.5rem, auto) minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: 1rem;\n  padding: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-indicator {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  > .event-agenda-card-time {\n  grid-column: 2;\n  grid-row: 1;\n  font-size: 0.875rem;\n  font-weight: 700;\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-content {\n  grid-column: 3;\n  grid-row: 1;\n  display: block;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title {\n  margin: 0;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title\n  a {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-title\n  a:hover {\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-details {\n  align-items: baseline;\n  gap: 0.25rem 0.6rem;\n  margin-top: 0.2rem;\n  font-size: 0.75rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-location {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-action {\n  grid-column: 4;\n  grid-row: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 0.5rem;\n  min-width: max-content;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-price {\n  font-size: 0.875rem;\n  font-weight: 700;\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-status {\n  font-size: 0.75rem;\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-card--agenda\n  .event-agenda-card-icon {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-agenda-empty {\n  margin: 0;\n  padding: 2rem 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda {\n    grid-template-columns: minmax(4.25rem, auto) minmax(0, 1fr);\n    grid-template-areas:\n      'time content'\n      'action action';\n    align-items: start;\n    column-gap: 0.75rem;\n    row-gap: 0.65rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-indicator {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    > .event-agenda-card-time {\n    grid-area: time;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-content {\n    grid-area: content;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-agenda-card--agenda\n    .event-agenda-card-action {\n    grid-area: action;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week Timetable View\n * Time-grid layout for recurring class schedules\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-timetable {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-selector {\n  display: none;\n  gap: 0.375rem;\n  overflow-x: auto;\n  padding-bottom: 0.125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-tab {\n  flex: 0 0 auto;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-button-radius);\n  background: transparent;\n  color: var(--ec-text);\n  cursor: pointer;\n  font: inherit;\n  font-size: 0.8125rem;\n  transition:\n    background-color var(--rb-block-transition) ease,\n    border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-tab--active {\n  background-color: rgb(var(--tb-primary));\n  border-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-container {\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-grid {\n  display: grid;\n  grid-template-columns: 4.5rem repeat(7, minmax(8rem, 1fr));\n  min-width: 62rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-rail,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day {\n  border-right: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day:last-child {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-heading {\n  min-height: 3.25rem;\n  margin: 0;\n  padding: 0.75rem 0.5rem;\n  background-color: var(--ec-header-bg);\n  border-bottom: 1px solid var(--ec-border-subtle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day--today\n  .event-timetable-day-heading {\n  background-color: var(--ec-today-bg);\n  color: var(--ec-today-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-today-badge {\n  padding: 0.125rem 0.375rem;\n  border-radius: var(--rb-button-radius);\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-body,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-body {\n  position: relative;\n  height: clamp(\n    34rem,\n    calc(var(--event-timetable-range-minutes, 900) * 0.055rem),\n    56rem\n  );\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-body {\n  background-color: var(--ec-header-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-time-label {\n  position: absolute;\n  left: 0.625rem;\n  transform: translateY(-50%);\n  font-size: 0.6875rem;\n  opacity: 0.65;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-hour-line {\n  position: absolute;\n  left: 0;\n  right: 0;\n  border-top: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event {\n  position: absolute;\n  min-height: 2.75rem;\n  padding: 0.375rem 0.5rem;\n  border: 1px solid var(--ec-border-subtle);\n  border-left-width: 4px;\n  border-radius: calc(var(--rb-block-radius) / 1.5);\n  background-color: var(--ec-surface);\n  box-shadow: 0 1px 2px rgb(var(--tb-text) / 0.08);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n  overflow: hidden;\n  transition:\n    border-color var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    transform var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event:hover {\n  box-shadow: 0 4px 12px rgb(var(--tb-text) / 0.12);\n  transform: translateY(-1px);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-time,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-title,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-teacher,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-meta,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-time {\n  font-size: 0.6875rem;\n  font-weight: 700;\n  opacity: var(--ec-time-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-title {\n  font-size: 0.8125rem;\n  font-weight: 700;\n  line-height: 1.25;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-teacher,\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-meta {\n  font-size: 0.6875rem;\n  opacity: 0.72;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  opacity: 0.85;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-event-capacity--full {\n  color: rgb(var(--tb-danger, 220 38 38));\n  opacity: 1;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-day-empty {\n  margin: 0;\n  padding: 1rem 0.5rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-timetable-empty {\n  margin: 0.25rem 0 0;\n  text-align: center;\n  font-size: 0.875rem;\n  opacity: var(--ec-empty-opacity);\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-day-selector {\n    display: flex;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-container {\n    overflow: hidden;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-grid {\n    grid-template-columns: 4rem minmax(0, 1fr);\n    min-width: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-day[data-selected='false'] {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-day {\n    border-right: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-time-rail {\n    border-right: 1px solid var(--ec-border-subtle);\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-timetable-day-heading {\n    justify-content: flex-start;\n    padding-inline: 0.75rem;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week Board View\n * Compact \"class day-board\": day columns side by side, one card per class,\n * three-state availability (available / filling / waitlist), and a footer CTA.\n * ----------------------------------------------------------------------------- */\n\n:where(.theme-scope) :where([data-block='event-calendar']) .event-week-board {\n  /* Status accent tokens \u2014 map the three availability states onto theme colours.\n   * available -> secondary, filling -> accent, waitlist -> muted text. */\n  --ec-status-available: rgb(var(--tb-secondary));\n  --ec-status-filling: rgb(var(--tb-accent));\n  --ec-status-waitlist: rgb(var(--tb-text) / 0.4);\n  --event-week-board-cols: 7;\n\n  border: 1px solid var(--ec-border);\n  border-radius: var(--rb-block-radius);\n  background-color: var(--ec-surface);\n  overflow: hidden;\n}\n\n/* Opt-in raised look: a soft drop shadow so the board lifts off the page.\n * Generic default (no [data-elevated]) stays flat. */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board[data-elevated] {\n  box-shadow: 0 14px 34px -24px rgb(var(--tb-text) / 0.35);\n}\n\n/* Top bar: authored title + week navigation + legend */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-top {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: 1rem;\n  padding: 1.1rem 1.5rem;\n  /* surfaceAlt gives the header/footer a legible tint against the white day-grid\n   * body \u2014 the faint `--ec-header-bg` (5% text) is invisible on light palettes. */\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-bottom: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-title {\n  grid-column: 1;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-navigation {\n  grid-column: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.65rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: 0;\n  border: 1px solid var(--ec-border);\n  border-radius: 999px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button:hover {\n  background-color: var(--ec-hover-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-nav-button:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-range {\n  min-width: 12rem;\n  margin: 0;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-loading {\n  font-weight: 400;\n  opacity: 0.65;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend {\n  grid-column: 3;\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  gap: 1.1rem;\n  flex-wrap: wrap;\n  font-size: 0.6875rem;\n  letter-spacing: 0.03em;\n  opacity: 0.75;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-error {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1.5rem;\n  border-bottom: 1px solid var(--ec-border-subtle);\n  color: rgb(var(--tb-error, var(--tb-text)));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-error\n  p {\n  margin: 0;\n  font-size: 0.8125rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot {\n  width: 0.55rem;\n  height: 0.55rem;\n  border-radius: 50%;\n  display: inline-block;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='available'] {\n  background-color: var(--ec-status-available);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='filling'] {\n  background-color: var(--ec-status-filling);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-legend-dot[data-status='waitlist'] {\n  background-color: var(--ec-status-waitlist);\n}\n\n/* Day columns grid */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--event-week-board-cols), minmax(0, 1fr));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day {\n  display: flex;\n  flex-direction: column;\n  min-height: 15rem;\n  /* Tabular column rule. Driven by the theme border tokens so borderless site\n   * styles (border.width: 'none' -> --rb-border-width: 0) render no grid at all,\n   * while hairline/thin/thick themes get a crisp full-strength divider. */\n  border-right: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day:last-child {\n  border-right: none;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.4rem;\n  padding: 0.9rem 0.9rem 0.65rem;\n  /* Header-row underline \u2014 same border-token gating as the column rules. */\n  border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day--today\n  .event-week-board-day-head {\n  background-color: var(--ec-today-bg);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-abbr {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  opacity: 0.65;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day--today\n  .event-week-board-day-abbr {\n  opacity: 1;\n  color: var(--ec-today-text);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-num {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  opacity: 0.5;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-day-body {\n  display: flex;\n  flex-direction: column;\n  gap: 0.65rem;\n  padding: 0.9rem;\n  flex: 1;\n}\n\n/* Class card */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.45rem;\n  padding: 0.8rem 0.85rem;\n  /* Full hairline border at the site style's border strength (0 on borderless\n   * styles), alongside the exaggerated status stripe on the left. `--ec-border-subtle`\n   * (half-strength) reads as no border at all on light palettes. */\n  border: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  border-left: 3px solid var(--ec-status-available);\n  border-radius: calc(var(--rb-block-radius) / 1.5);\n  background-color: var(--ec-surface);\n  color: inherit;\n  text-decoration: none;\n  transition:\n    transform var(--rb-block-transition) ease,\n    box-shadow var(--rb-block-transition) ease,\n    border-color var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card[data-status='filling'] {\n  border-left-color: var(--ec-status-filling);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card[data-status='waitlist'] {\n  border-left-color: var(--ec-status-waitlist);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px -8px rgb(var(--tb-text) / 0.28);\n  border-color: rgb(var(--tb-primary) / 0.4);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-title {\n  font-family: var(--font-heading, inherit);\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-time {\n  font-size: 0.75rem;\n  letter-spacing: 0.01em;\n  opacity: 0.7;\n}\n\n/* Capacity pill */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  padding: 0.15rem 0.6rem;\n  border-radius: 999px;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  /* Available (default): a calm neutral/muted pill \u2014 not a coloured outline.\n   * Filling -> amber and waitlist -> muted outline are handled by the\n   * data-status overrides below. */\n  border: 1px solid var(--ec-border);\n  background-color: rgb(var(--tb-text) / 0.06);\n  color: rgb(var(--tb-text) / 0.62);\n  border-color: var(--ec-border);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill[data-status='filling'] {\n  background-color: rgb(var(--tb-accent) / 0.14);\n  color: var(--ec-status-filling);\n  border-color: rgb(var(--tb-accent) / 0.32);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-card-pill[data-status='waitlist'] {\n  background-color: transparent;\n  color: rgb(var(--tb-text) / 0.6);\n  border-color: var(--ec-border);\n}\n\n/* Footer */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex-wrap: wrap;\n  padding: 1.1rem 1.5rem;\n  /* Matches the header tint (see .event-week-board-top). */\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-top: 1px solid var(--ec-border-subtle);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .event-week-board-foot-note {\n  margin: 0;\n  font-size: 0.875rem;\n  opacity: 0.75;\n}\n\n/* Responsive: collapse day columns to a stacked list on narrow viewports */\n@container rb-site (max-width: 1023px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-top {\n    grid-template-columns: 1fr;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-title,\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation,\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-legend {\n    grid-column: 1;\n    justify-self: center;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-grid {\n    grid-template-columns: 1fr;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-day {\n    min-height: 0;\n    border-right: none;\n    border-bottom: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-day:last-child {\n    border-bottom: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-day--empty {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-day-head {\n    border-bottom: none;\n    padding-bottom: 0.25rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-day-body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    padding-top: 0.35rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-card {\n    flex: 1 1 14rem;\n  }\n}\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation {\n    display: grid;\n    grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;\n    width: 100%;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-navigation\n    > :last-child {\n    grid-column: 1 / -1;\n    justify-self: center;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-range {\n    min-width: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-legend {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-week-board-card {\n    flex: 1 1 100%;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Week-board section band\n * Give the whole week-board section (head + panel) a subtle surface band so it\n * reads as a distinct zone from the page \u2014 the \"testimonials band\" pattern.\n * Painted as a pseudo-element above the section's fallback background layer\n * (z-index -10) but behind the content, so no block-content wiring is needed.\n * Surface + hairline rules are token-referenced: on a borderless site style\n * (--rb-border-width: 0) the band keeps its surface tint but drops the rules.\n * Opt-in only: the band paints when the board root carries [data-banded];\n * the generic default is bandless.\n * ----------------------------------------------------------------------------- */\n:where(.theme-scope)\n  [data-slot='section']:has(.event-calendar--week-board[data-banded])::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -9;\n  background-color: rgb(var(--tb-surfaceAlt));\n  border-block: var(--rb-border-width, 1px) solid rgb(var(--tb-border));\n  pointer-events: none;\n}\n\n/* -----------------------------------------------------------------------------\n * Event section head \u2014 split (heading left, intro right)\n * Rendered by the block frame (outside [data-block=\"event-calendar\"]) via\n * sectionHeaderLayoutNodes({ splitClassName }). Lays the heading and its\n * supporting intro out as a two-column head on wide viewports, stacking on\n * narrow ones. The section band above provides the distinct background.\n * ----------------------------------------------------------------------------- */\n:where(.theme-scope) .event-section-head--split {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: clamp(1.5rem, 4vw, 3.5rem);\n  flex-wrap: wrap;\n}\n\n:where(.theme-scope) .event-section-head--split > :where(h1, h2, h3) {\n  margin: 0;\n}\n\n:where(.theme-scope) .event-section-head--split > .rb-prose {\n  flex: 1 1 22rem;\n  max-width: 34rem;\n  margin: 0;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .event-section-head--split {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.75rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-section-head--split > .rb-prose {\n    flex-basis: auto;\n  }\n}\n}\n\n/* -----------------------------------------------------------------------------\n * Event Calendar Modals\n * Modal overlays for event details and day events list\n * ----------------------------------------------------------------------------- */\n\n/* Modal overlay */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--ec-modal-overlay-bg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Body-level modal portal baseline: clear sticky site/editor chrome unless a theme deliberately overrides it. */\n  z-index: var(--ec-modal-z-index, 20000);\n  padding: 1rem;\n  animation: ec-modal-fade-in 150ms ease-out;\n}\n\n@keyframes ec-modal-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Modal dialog */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal {\n  position: relative;\n  background: var(--ec-modal-bg);\n  border-radius: var(--rb-block-radius);\n  max-width: 28rem;\n  width: 100%;\n  max-height: 90vh;\n  overflow-y: auto;\n  box-shadow: var(--ec-modal-shadow);\n  animation: ec-modal-slide-in 200ms ease-out;\n}\n\n@keyframes ec-modal-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(-10px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* Event modal - constrained width for card */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal--event {\n  max-width: 26rem;\n}\n\n/* Day modal */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal--day {\n  max-width: 28rem;\n}\n\n/* Close button */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-close {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--ec-text);\n  opacity: 0.6;\n  cursor: pointer;\n  border-radius: 50%;\n  transition:\n    opacity var(--rb-block-transition) ease,\n    background-color var(--rb-block-transition) ease;\n  z-index: 10;\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal-close:hover {\n  opacity: 1;\n  background-color: rgb(var(--tb-text) / 0.1);\n}\n\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal-close:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n/* Modal header (for day modal) */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-header {\n  padding: 1.5rem 1.5rem 1rem;\n  padding-right: 3rem; /* Space for close button */\n  border-bottom: 1px solid var(--ec-border);\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--ec-text);\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-subtitle {\n  font-size: 0.875rem;\n  color: var(--ec-text);\n  opacity: 0.7;\n  margin: 0.25rem 0 0;\n}\n\n/* Modal content */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-modal-content {\n  padding: 1rem;\n}\n\n/* Event modal: tighter padding for card */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  .ec-modal--event\n  .ec-modal-content {\n  padding: 0.5rem;\n}\n\n/* Day events list */\n:where(.theme-scope) :where([data-block='event-calendar']) .ec-day-events-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 1rem;\n}\n\n/* AgendaEventCard in button mode inherits most styles, just needs cursor */\n:where(.theme-scope)\n  :where([data-block='event-calendar'])\n  button.event-agenda-card {\n  cursor: pointer;\n  text-align: left;\n  font-family: inherit;\n}\n\n/* Responsive adjustments */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-container {\n    margin-left: -1.5rem;\n    margin-right: -1.5rem;\n    border-left: none;\n    border-right: none;\n    border-radius: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-day-header {\n    font-size: 0.75rem;\n    padding: 0.375rem 0.125rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-day {\n    min-height: 88px;\n    padding: 0.125rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-title {\n    font-size: 0.9375rem;\n    min-width: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-day-number {\n    font-size: 0.75rem;\n    margin-bottom: 0.125rem;\n    padding: 0 0.125rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-event {\n    justify-content: center;\n    gap: 0.25rem;\n    padding: 0.1875rem 0.25rem;\n    font-size: 0.6875rem;\n    border-radius: calc(var(--rb-block-radius) / 3);\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-event-time {\n    text-align: center;\n    font-size: 0.625rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-event-title {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-more {\n    padding: 0.125rem 0.25rem;\n    font-size: 0.6875rem;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block='event-calendar'])\n    .event-calendar-header\n    > button {\n    margin-right: 0.25rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) :where([data-block='event-calendar']) .ec-modal {\n    max-width: 100%;\n    max-height: 85vh;\n    margin: 0 0.5rem;\n  }\n}\n}\n\n/*\n * Shared: Tab bar (underline style)\n *\n * Used by:\n * - Event Calendar (combined list/calendar view)\n * - Customer Portal (section navigation)\n *\n * Styling is driven by --rb-tab-* CSS variables.\n */\n\n:where(.theme-scope) .nav-tabs {\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: var(--rb-tab-border-width, 1px) solid var(--rb-tab-border-color, rgb(var(--tb-border)));\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) .nav-tab {\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background: transparent;\n  border: none;\n  border-bottom: var(--rb-tab-active-border-width, 2px) solid transparent;\n  margin-bottom: calc(-1 * var(--rb-tab-border-width, 1px));\n  cursor: pointer;\n  color: var(--rb-tab-text, rgb(var(--tb-text)));\n  opacity: var(--rb-tab-opacity, 0.7);\n  transition: all var(--rb-block-transition) ease;\n}\n\n:where(.theme-scope) .nav-tab:hover {\n  opacity: 1;\n}\n\n:where(.theme-scope) .nav-tab--active {\n  opacity: 1;\n  border-bottom-color: var(--rb-tab-active-color, rgb(var(--tb-primary)));\n  color: var(--rb-tab-active-color, rgb(var(--tb-primary)));\n}\n\n/* =============================================================================\n * Block: Appointment Booking\n *\n * Structural styling comes from the shared registration-surface layer\n * (registration-surface.css): surface container, option cards + check,\n * step indicator, wizard actions, on-surface text ramp, stacks, summary box\n * and skeleton shell. Colors flow through the --rb-reg-* contract, mapped\n * from this block's --ab-* Tier 3 vars by its var generator.\n *\n * Inputs use the theme-generated form-* classes; feedback boxes use the\n * theme-generated alert / alert-{tone} classes. Only genuinely\n * booking-specific rules live here.\n *\n * Uses:\n * - Tier 1 vars: --tb-* (from theme palette)\n * - Tier 3 vars: --ab-* (from appointment-booking var generator)\n * =============================================================================\n */\n\n/* Typography helpers */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-subtitle {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text {\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-text--sm {\n  font-size: 0.75rem;\n}\n\n/* Centered state (loading / terminal panels) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-center {\n  text-align: center;\n  padding: 2rem;\n}\n\n/* Terminal state title (below the state icon) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-terminal-title {\n  margin: 0.75rem 0 0.5rem 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n}\n\n/* State icon color variants (layout from registration-surface.css) */\n/* Success: a solid primary disc with an on-primary tick (issue 1581) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--success {\n  background: rgb(var(--tb-primary, 37 99 235));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--error {\n  background: var(--ab-error-bg, rgb(var(--tb-destructive, 220 38 38) / 0.1));\n  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--info {\n  background: var(--ab-info-bg, rgb(var(--tb-info, 14 165 233) / 0.1));\n  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .rb-state-icon--warning {\n  background: var(--ab-warning-bg, rgb(var(--tb-warning, 245 158 11) / 0.1));\n  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));\n}\n\n/* Payment option summary rows (label/value lines inside an option card) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-option-rows {\n  display: grid;\n  gap: 0.125rem;\n}\n\n/* Date/time pill grids (selection pills extend .rb-option-card) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-date-pill {\n  flex-direction: column;\n  align-items: center;\n  gap: 0.125rem;\n  padding: 0.5rem 0.875rem;\n  min-width: 4.25rem;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-time-pill {\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.875rem;\n  min-width: 5.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-caption {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0;\n  line-height: 1.2;\n  text-transform: uppercase;\n  color: var(--rb-reg-on-surface-subtle, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.6));\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-pill-value {\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n/* SSR shell skeleton (mirrors the hydrated layout to reduce hydration jump) */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-shell {\n  min-height: 18rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-shell-button {\n  display: inline-flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.6);\n  background: rgb(var(--tb-primary, 17 24 39));\n  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255)));\n  padding: 0.625rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* Inline text-link button (e.g. \"Load more dates\") */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-link {\n  display: inline;\n  color: rgb(var(--tb-primary, 17 24 39));\n  background: none;\n  border: none;\n  padding: 0;\n  font: inherit;\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-link:hover {\n  text-decoration: none;\n}\n\n/* Altcha wrapper */\n:where(.theme-scope) :where([data-block=\"appointment-booking\"]) .ab-altcha {\n  margin-top: 1rem;\n}\n\n/* =============================================================================\n * Shared: Inline Text Marks\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-inline-text-accent,\n:where(.theme-scope) .rb-inline-text-highlight {\n  font: inherit;\n  letter-spacing: inherit;\n  text-transform: inherit;\n}\n\n:where(.theme-scope) .rb-inline-text-accent-accent {\n  color: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope) .rb-inline-text-accent-brand {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-inline-text-accent-contrast {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) .rb-inline-text-highlight {\n  border-radius: 0.22em;\n  box-decoration-break: clone;\n  -webkit-box-decoration-break: clone;\n  padding: 0.02em 0.12em;\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-soft {\n  background: color-mix(in oklab, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))) 14%, transparent);\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-accent {\n  background: color-mix(in oklab, rgb(var(--tb-accent)) 28%, transparent);\n}\n\n:where(.theme-scope) .rb-inline-text-highlight-brand {\n  background: color-mix(in oklab, rgb(var(--tb-primary)) 24%, transparent);\n}\n\n/* =============================================================================\n * Block: Hero (Phase 2)\n * Uses theme palette vars directly (no Tier 3 vars needed)\n * =============================================================================\n */\n\n/* Eyebrow - color only (typography via .rb-eyebrow) */\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n/* Subheadline - supporting text below headline */\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-headline {\n  text-wrap: balance;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .hero-subheadline {\n  font-size: 1.125rem;\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n}\n\n@container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"hero\"]) .hero-subheadline {\n    font-size: 1.25rem;\n  }\n}\n}\n\n/* Hero typography scales. These classes are emitted by Theme V2 hero looks. */\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-quiet .hero-headline {\n  font-size: clamp(2rem, 4vw, 3rem);\n  line-height: 1.12;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-quiet .hero-subheadline {\n  font-size: clamp(1rem, 1.2vw, 1.25rem);\n  line-height: 1.55;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-editorial .hero-headline {\n  font-size: clamp(2.75rem, 5.6vw, 4.75rem);\n  line-height: 1.06;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-editorial .hero-subheadline {\n  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);\n  line-height: 1.55;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-headline {\n  font-size: clamp(3.5rem, 7.2vw, 6.25rem);\n  line-height: 1;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-subheadline {\n  font-size: clamp(1.125rem, 1.5vw, 1.5rem);\n  line-height: 1.5;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-headline {\n  font-size: clamp(4.25rem, 10vw, 8.5rem);\n  line-height: 0.94;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-subheadline {\n  font-size: clamp(1.125rem, 1.4vw, 1.5rem);\n  line-height: 1.45;\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {\n  font-size: clamp(3.5rem, 7.5vw, 6.5rem);\n}\n\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,\n:where(.theme-scope) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {\n  font-size: clamp(3rem, 6vw, 5.25rem);\n  line-height: 1.02;\n}\n\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"hero\"]) .rb-hero-typography-poster .hero-headline,\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"hero\"]) .rb-hero-typography-display .hero-headline,\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"hero\"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {\n    font-size: clamp(2.5rem, 11vw, 3.5rem);\n    line-height: 1.05;\n  }\n}\n}\n\n/* =============================================================================\n * Shared: Heading Group (used by CTA, single-button, etc.)\n * =============================================================================\n */\n\n/* Eyebrow - color only (typography via .rb-eyebrow) */\n:where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {\n  color: rgb(var(--tb-mutedText));\n}\n\n/* =============================================================================\n * Block: CTA (Phase 2)\n * =============================================================================\n */\n\n/* CTA content/body text */\n:where(.theme-scope) :where([data-block=\"cta-full\"]) .cta-content {\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText, 100 116 139))));\n}\n\n/* CTA button row container */\n:where(.theme-scope) :where([data-block=\"cta-full\"]) .cta-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Text-style CTA actions belong to the section foreground contract. */\n:where(.theme-scope) [data-block=\"cta-full\"] .cta-row .button-link {\n  color: var(--rb-surface-link-color, var(--rb-surface-text-color, rgb(var(--tb-primary))));\n}\n\n/* =============================================================================\n * Block: Body Text (content block, Phase 2)\n *\n * Style contract:\n * - Variant styling is keyed off `data-block-variant` on the PageRenderer wrapper.\n * - Prose sizing comes from `rb-prose-*` (theme-aware) in `packages/blocks/src/theme/styles.css`.\n * =============================================================================\n */\n\n/* Body copy rich text container */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-container {\n  max-width: 48rem;\n  margin-left: 0;\n  margin-right: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-container.rb-items-center {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Body copy rich text */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-body {\n  color: inherit;\n}\n\n/* Ensure editing mode doesn't silently change typography inside ProseMirror */\n:where(.theme-scope) :where([data-block=\"body-text\"]) .body-copy-body :where(.ProseMirror) {\n  font-size: inherit;\n  line-height: inherit;\n}\n\n/* Variant: Intro (centered, wider container, larger text, relaxed leading) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-container {\n  max-width: 60rem;\n}\n\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-body {\n  font-size: var(--rb-prose-lg-font-size);\n  line-height: var(--rb-prose-lg-line-height);\n}\n\n@container rb-site (min-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) .body-copy-body {\n    font-size: var(--rb-prose-xl-sm-font-size);\n    line-height: var(--rb-prose-xl-sm-line-height);\n  }\n}\n}\n\n/* Variant: Narrow (left-aligned, shorter line length) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"narrow\"]) .body-copy-container {\n  max-width: 34rem;\n  margin-left: 0;\n  margin-right: auto;\n}\n\n/* Override prose sizing via theme-aware vars (see styles.css) */\n:where(.theme-scope) :where([data-block=\"body-text\"][data-block-variant=\"intro\"]) {\n  /* Mobile-first: use rb-prose-lg sizing below 640px */\n  --rb-prose-lg-font-size: clamp(\n    calc(var(--fs-body, 16px) * 1.35),\n    calc(var(--fs-body, 16px) * 1.1 + 1.25vw),\n    calc(var(--fs-body, 16px) * 1.6)\n  );\n  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);\n\n  /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */\n  --rb-prose-xl-sm-font-size: clamp(\n    calc(var(--fs-body, 16px) * 1.55),\n    calc(var(--fs-body, 16px) * 1.25 + 1.5vw),\n    calc(var(--fs-body, 16px) * 1.8)\n  );\n  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);\n}\n\n/* =============================================================================\n * Block: Form (formCopy fragment, Phase 2)\n * =============================================================================\n */\n\n/* Form title */\n:where(.theme-scope) :where([data-block=\"form\"]) .form-copy-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n}\n\n/* Form intro text */\n:where(.theme-scope) :where([data-block=\"form\"]) .form-copy-intro {\n  font-size: 1rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n/* =============================================================================\n * Form Block (fb-*)\n *\n * Uses:\n * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive\n * - Tier 2 vars: --rb-block-radius\n * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*\n *\n * Note: Form input styling (form-input, form-select, etc.) is handled by\n * the input CSS generator. These styles are for form container/state only.\n * ============================================================================= */\n\n/* Form container */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* Two-column row (opt-in per field via schema layout) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-row-2 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));\n  gap: 1rem;\n}\n\n/* Field wrapper */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* Fieldset (for radio groups) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-fieldset {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Success state */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-success {\n  background-color: var(--fb-success-bg);\n  color: var(--fb-success-text);\n  border: 1px solid var(--fb-success-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n/* Error banner */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-error {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n  border-radius: var(--rb-block-radius);\n  padding: 0.75rem;\n  font-size: 0.875rem;\n  margin-bottom: 0.5rem;\n}\n\n/* Empty state (no form data) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-empty {\n  background-color: var(--fb-empty-bg);\n  color: var(--fb-empty-text);\n  border: 1px dashed var(--fb-empty-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1.5rem;\n  font-size: 0.875rem;\n  text-align: center;\n}\n\n/* Form actions (submit button container) */\n:where(.theme-scope) :where([data-block=\"form\"]) .fb-actions {\n  margin-top: 0.5rem;\n}\n\n/* =============================================================================\n * Block-Level Override Utilities\n *\n * These utility classes replace Tailwind theming utilities for block-level\n * settings like \"raised\" and \"rounded\". They use fixed values to match\n * Tailwind's defaults while allowing us to remove theming classes from safelist.\n * =============================================================================\n */\n\n/* Border Radius Utilities (replaces rounded-*) */\n:where(.theme-scope) .rb-rounded-sm {\n  border-radius: 0.125rem;\n}\n\n:where(.theme-scope) .rb-rounded-md {\n  border-radius: 0.375rem;\n}\n\n:where(.theme-scope) .rb-rounded-lg {\n  border-radius: 0.5rem;\n}\n\n:where(.theme-scope) .rb-rounded-xl {\n  border-radius: 0.75rem;\n}\n\n:where(.theme-scope) .rb-rounded-2xl {\n  border-radius: 1rem;\n}\n\n:where(.theme-scope) .rb-rounded-full {\n  border-radius: 9999px;\n}\n\n/* Shadow Utilities (defined in rb-utilities.css; theme-driven via --shadow-*) */\n\n/* =============================================================================\n * Block: Event List (Phase 3 client component migration)\n * =============================================================================\n */\n\n/* Empty state container */\n:where(.theme-scope) .event-list-empty {\n  border-radius: 0.75rem; /* rounded-xl equivalent */\n  border: 1px dashed rgb(var(--tb-border));\n  padding: 3rem;\n  text-align: center;\n}\n\n/* Reset filters button in empty state */\n:where(.theme-scope) .event-reset-filters-btn {\n  display: inline-block;\n  margin-top: 1rem;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: rgb(var(--tb-primary));\n  background: transparent;\n  border: 1px solid rgb(var(--tb-primary));\n  border-radius: var(--rb-button-radius, 0.375rem);\n  cursor: pointer;\n  transition:\n    background-color var(--rb-block-transition, 150ms) ease,\n    color var(--rb-block-transition, 150ms) ease;\n}\n\n:where(.theme-scope) .event-reset-filters-btn:hover {\n  background-color: rgb(var(--tb-primary));\n  color: rgb(var(--tb-onPrimary, 255 255 255));\n}\n\n:where(.theme-scope) .event-reset-filters-btn:focus-visible {\n  outline: 2px solid rgb(var(--tb-primary));\n  outline-offset: 2px;\n}\n\n/* Event titles always link to the event page, so a card or row whose CTA is\n   hidden (sold out, closed) is never a dead end (issue 1372). The link inherits\n   the heading's colour and only reveals itself on hover or keyboard focus.\n   Shared by EventCard, EventCompactRow and the offerings-preview course cards via `.event-title-link`. */\n:where(.theme-scope) .event-title-link {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .event-title-link:hover,\n:where(.theme-scope) .event-title-link:focus-visible {\n  text-decoration: underline;\n  text-underline-offset: 0.12em;\n}\n\n/* Catalogue cards can keep their media footprint when an event has no\n   resolved image. The date remains useful content and follows the site's\n   palette and typography tokens. */\n:where(.theme-scope) .event-card-date-fallback {\n  position: relative;\n  display: flex;\n  min-height: var(--rb-event-card-media-height, 16rem);\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.125rem;\n  overflow: hidden;\n  padding: 1.125rem;\n  border-bottom: 1px solid rgb(var(--tb-border, 229 231 235));\n  background: rgb(var(--tb-surfaceAlt, var(--tb-surface, 255 255 255)));\n  color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .event-card-date-fallback::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background: radial-gradient(\n    120% 140% at 0% 0%,\n    color-mix(in srgb, rgb(var(--tb-primary, 0 0 0)) 11%, transparent),\n    transparent 62%\n  );\n  content: '';\n}\n\n:where(.theme-scope) .event-card-date-fallback-label,\n:where(.theme-scope) .event-card-date-fallback-value {\n  position: relative;\n}\n\n:where(.theme-scope) .event-card-date-fallback-label {\n  color: rgb(var(--tb-mutedText, var(--tb-muted, 107 114 128)));\n  font-size: 0.72rem;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  line-height: 1.2;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) .event-card-date-fallback-value {\n  color: rgb(var(--tb-primary, 0 0 0));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem);\n  font-weight: 500;\n  letter-spacing: -0.025em;\n  line-height: 1.04;\n}\n\n:where(.theme-scope) .event-card-price {\n  color: rgb(var(--tb-text, 17 24 39));\n  font-weight: 600;\n}\n\n/* =============================================================================\n * Block: Carousel Navigation (Phase 3 client component migration)\n * =============================================================================\n */\n\n/* Layout\n *\n * Keep slide sizing/spacing as a single source of truth, shared by:\n * - SSR fallback (scrollable shell)\n * - Hydrated Embla carousel\n *\n * We use the padding/margin approach for slide spacing:\n * - Slides have symmetric left/right padding (half the gap each side)\n * - Track has negative margins to keep first/last slide flush with viewport edges\n * - This works reliably with Embla's position calculations\n *\n * Slides-per-view is provided via CSS vars set on `.carousel-root`:\n * - --rb-carousel-slides-to-show-mobile\n * - --rb-carousel-slides-to-show-tablet (optional)\n * - --rb-carousel-slides-to-show-desktop (optional)\n */\n:where(.theme-scope) .carousel-root {\n  --rb-carousel-slide-spacing: 1rem;\n  --rb-carousel-slides-to-show: var(--rb-carousel-slides-to-show-mobile, 1);\n}\n\n:where(.theme-scope) .carousel-root.rb-image-gallery-carousel--full-bleed {\n  --rb-carousel-slide-spacing: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .carousel-root {\n    --rb-carousel-slides-to-show: var(\n      --rb-carousel-slides-to-show-tablet,\n      var(--rb-carousel-slides-to-show-mobile, 1)\n    );\n  }\n}\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .carousel-root {\n    --rb-carousel-slides-to-show: var(\n      --rb-carousel-slides-to-show-desktop,\n      var(\n        --rb-carousel-slides-to-show-tablet,\n        var(--rb-carousel-slides-to-show-mobile, 1)\n      )\n    );\n  }\n}\n}\n\n/* Slides take exact percentage width with internal padding for gaps.\n * Padding is more reliable than margin (no collapsing, consistent on all slides). */\n:where(.theme-scope) .carousel-root .carousel-slide,\n:where(.theme-scope) .carousel-root .rb-overflow-x-auto > .rb-flex > * {\n  flex: 0 0 calc(100% / var(--rb-carousel-slides-to-show));\n  min-width: 0;\n  box-sizing: border-box;\n  padding-left: calc(var(--rb-carousel-slide-spacing) / 2);\n  padding-right: calc(var(--rb-carousel-slide-spacing) / 2);\n}\n\n/* Navigation buttons + dots are intentionally Tailwind-free and scoped to the\n * hydrated carousel root to avoid leaking styles globally. */\n:where(.theme-scope) .carousel-root .carousel-nav-btn {\n  position: absolute;\n  top: 50%;\n  z-index: 10;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 2.5rem;\n  width: 2.5rem;\n  border-radius: 9999px;\n  border: 1px solid rgb(var(--tb-border, 229 231 235) / 0.35);\n  background-color: rgb(var(--tb-surface, 248 250 252) / 0.9);\n  color: rgb(var(--tb-text, 17 24 39));\n  box-shadow: 0 4px 6px -1px rgb(var(--tb-shadow) / 0.1),\n    0 2px 4px -2px rgb(var(--tb-shadow) / 0.1);\n  cursor: pointer;\n  transform: translateY(-50%);\n  transition: background-color 0.2s ease, box-shadow 0.2s ease,\n    opacity 0.2s ease;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn--prev {\n  left: 0.5rem;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn--next {\n  right: 0.5rem;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn:hover {\n  background-color: rgb(var(--tb-surface, 248 250 252));\n  box-shadow: 0 10px 15px -3px rgb(var(--tb-shadow) / 0.1),\n    0 4px 6px -4px rgb(var(--tb-shadow) / 0.1);\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:where(.theme-scope) .carousel-root .carousel-nav-icon {\n  width: 1rem;\n  height: 1rem;\n}\n\n/* Hover-only arrows (no group-hover utilities in SDK runtime) */\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"] .carousel-nav-btn {\n  opacity: 0;\n  pointer-events: none;\n}\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"]:hover .carousel-nav-btn,\n:where(.theme-scope) .carousel-root[data-arrow-visibility=\"hover\"]:focus-within .carousel-nav-btn {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Dots */\n:where(.theme-scope) .carousel-root .carousel-dots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n/* Dots overlaid on the bottom of the carousel (used for image-dominant variants). */\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dots {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0.75rem;\n  z-index: 10;\n  margin-top: 0;\n  padding: 0.5rem 0.75rem;\n  pointer-events: none;\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {\n  pointer-events: auto;\n}\n\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {\n  background-color: rgb(var(--tb-surface, 248 250 252) / 0.55);\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot:hover {\n  background-color: rgb(var(--tb-surface, 248 250 252) / 0.75);\n}\n:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot[data-active=\"true\"] {\n  background-color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 9999px;\n  border: none;\n  background-color: rgb(var(--tb-border, 229 231 235));\n  transition: background-color 0.2s ease;\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot:hover {\n  background-color: rgb(var(--tb-text, 17 24 39) / 0.3);\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot[data-active=\"true\"] {\n  background-color: rgb(var(--tb-text, 17 24 39));\n}\n\n:where(.theme-scope) .carousel-root .carousel-dot:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgb(var(--tb-primary, 59 130 246) / 0.35);\n}\n\n/* =============================================================================\n * Block: Shop\n * Uses theme palette vars directly\n * ============================================================================= */\n\n/* Shop container */\n:where(.theme-scope) .shop {\n  width: 100%;\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) {\n  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);\n  --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));\n  --rb-modal-z-index: 20000;\n  --rb-modal-text: rgb(var(--tb-text, 17 24 39));\n  --rb-modal-heading: rgb(var(--tb-text, 17 24 39));\n  --rb-modal-link: rgb(var(--tb-primary, var(--tb-text, 17 24 39)));\n  --rb-modal-supporting: rgb(var(--tb-mutedText, 100 116 139));\n  --shop-card-radius: var(--rb-block-radius, var(--radius-card, 0.75rem));\n  --shop-control-radius: var(--rb-input-radius, var(--radius-control, 0.375rem));\n}\n\n:where(.theme-scope) .shop--empty {\n  text-align: center;\n  padding: 3rem 1rem;\n}\n\n:where(.theme-scope) .shop__empty-text {\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-mutedText))));\n  font-size: var(--fs-body, 1rem);\n}\n\n/* Error display */\n:where(.theme-scope) .shop__error {\n  background-color: rgb(var(--tb-destructive) / 0.1);\n  color: rgb(var(--tb-destructive));\n  padding: 0.75rem 1rem;\n  border-radius: var(--shop-control-radius);\n  margin-bottom: 1rem;\n  font-size: 0.875rem;\n}\n\n/* Sections */\n:where(.theme-scope) .shop__section {\n  margin-bottom: 2rem;\n}\n\n:where(.theme-scope) .shop__section:last-child {\n  margin-bottom: 0;\n}\n\n:where(.theme-scope) .shop__section-heading {\n  font-size: var(--fs-h3, 1.25rem);\n  font-weight: 600;\n  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-text))));\n  margin-bottom: 1rem;\n  font-family: var(--font-heading);\n}\n\n/* Products grid/list layout */\n:where(.theme-scope) .shop__products--grid {\n  display: grid;\n  grid-template-columns: repeat(var(--shop-columns, 2), 1fr);\n  gap: 1rem;\n}\n\n:where(.theme-scope) .shop__products--list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* Compact product register: useful for small, scannable pass/package sets. */\n:where(.theme-scope) .shop--register .shop__section {\n  margin-bottom: 0;\n}\n\n:where(.theme-scope) .shop--register .shop__section-heading {\n  margin-bottom: 1rem;\n  font-size: clamp(1.4rem, 2.2vw, 1.7rem);\n}\n\n:where(.theme-scope) .shop--register .shop__products--register {\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope) .shop--register .shop__card {\n  display: grid;\n  grid-template-columns: minmax(8rem, 0.85fr) auto minmax(12rem, 1.5fr) auto;\n  grid-template-rows: auto;\n  align-items: center;\n  column-gap: clamp(1rem, 3vw, 2.5rem);\n  padding: 1rem 0;\n  border: 0;\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n  border-radius: 0;\n  /* Boxless row: the opaque-panel registry hands the band's contract back. */\n  background: transparent;\n}\n\n:where(.theme-scope) .shop--register .shop__card-header {\n  display: contents;\n}\n\n:where(.theme-scope) .shop--register .shop__card-name,\n:where(.theme-scope) .shop--register .shop__card-price,\n:where(.theme-scope) .shop--register .shop__card-details,\n:where(.theme-scope) .shop--register .shop__cta,\n:where(.theme-scope) .shop--register .shop__purchase-unavailable {\n  margin: 0;\n}\n\n:where(.theme-scope) .shop--register .shop__card-name {\n  grid-column: 1;\n  grid-row: 1;\n  font-family: var(--font-heading);\n  font-size: 1.15rem;\n  font-weight: 400;\n}\n\n:where(.theme-scope) .shop--register .shop__card-price {\n  grid-column: 2;\n  grid-row: 1;\n  font-size: 0.98rem;\n  font-weight: 500;\n  white-space: nowrap;\n  color: var(--rb-surface-link-color, var(--rb-surface-text-color, inherit));\n}\n\n:where(.theme-scope) .shop--register .shop__card-description {\n  grid-column: 1 / -1;\n  margin-top: 0.35rem;\n}\n\n:where(.theme-scope) .shop--register .shop__card-details {\n  grid-column: 3;\n  grid-row: 1;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.35rem 1rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.86rem;\n}\n\n:where(.theme-scope) .shop--register .shop__cta,\n:where(.theme-scope) .shop--register .shop__purchase-unavailable {\n  grid-column: 4;\n  grid-row: 1;\n  align-self: center;\n  margin-left: auto;\n}\n\n:where(.theme-scope) .shop--register .shop__card > [role='status'] {\n  grid-column: 1 / -1;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .shop--register .shop__card {\n    grid-template-columns: minmax(0, 1fr) auto;\n    row-gap: 0.45rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .shop--register .shop__card-name {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .shop--register .shop__card-price {\n    grid-column: 2;\n    grid-row: 1;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .shop--register .shop__card-details {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .shop--register .shop__cta,\n  :where(.theme-scope:is(*, :scope)) .shop--register .shop__purchase-unavailable {\n    grid-column: 1 / -1;\n    grid-row: 3;\n    justify-self: start;\n    margin-left: 0;\n  }\n}\n}\n\n/* Product card */\n:where(.theme-scope) .shop__card {\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n  background: rgb(var(--tb-surface));\n  border: 1px solid rgb(var(--tb-border));\n  border-radius: var(--shop-card-radius);\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n/* No hover shadow (buttons + theme do the emphasis) */\n\n:where(.theme-scope) .shop__card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n:where(.theme-scope) .shop__card-name {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--rb-surface-heading-color, rgb(var(--tb-text)));\n  margin: 0;\n  font-family: var(--font-heading);\n}\n\n:where(.theme-scope) .shop__card-price {\n  font-size: 1.125rem;\n  font-weight: 700;\n  color: var(--rb-surface-link-color, rgb(var(--tb-primary)));\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .shop__card-interval {\n  font-size: 0.875rem;\n  font-weight: 400;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-description {\n  font-size: 0.875rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  line-height: 1.5;\n  margin: 0;\n}\n\n:where(.theme-scope) .shop__card-details {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem 1rem;\n  font-size: 0.875rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) .shop__card-credits {\n  font-weight: 500;\n}\n\n:where(.theme-scope) .shop__card-per-credit {\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-validity {\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n:where(.theme-scope) .shop__card-unlimited {\n  font-weight: 500;\n  color: var(--rb-surface-link-color, rgb(var(--tb-secondary, var(--tb-primary))));\n}\n\n/* CTA layout: use theme button classes for visuals */\n:where(.theme-scope) .shop__cta {\n  margin-top: auto;\n  align-self: flex-start;\n}\n\n:where(.theme-scope) .shop__purchase-unavailable {\n  margin: auto 0 0;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n/* Responsive grid */\n@container rb-site (max-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .shop__products--grid {\n    grid-template-columns: 1fr;\n  }\n}\n}\n\n:where(.theme-scope) .shop__modal-product {\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-mutedText));\n  margin: 0 0 1rem;\n}\n\n:where(.theme-scope) .shop__modal-interval {\n  font-size: 0.875rem;\n}\n\n/* Checkout form */\n:where(.theme-scope) .shop__modal-form {\n  margin-top: 0.25rem;\n}\n\n:where(.theme-scope) .shop__form-field {\n  margin-bottom: 1rem;\n}\n\n/* Modal error */\n:where(.theme-scope) .shop__modal-error {\n  background-color: rgb(var(--tb-destructive) / 0.1);\n  color: rgb(var(--tb-destructive));\n  padding: 0.625rem 0.75rem;\n  border-radius: var(--shop-control-radius);\n  font-size: 0.875rem;\n  margin-bottom: 1rem;\n}\n\n/* Modal actions */\n:where(.theme-scope) .shop__modal-actions {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n/* Duplicate membership warning */\n:where(.theme-scope) .shop__modal-warning {\n  padding: 0.5rem 0 0;\n}\n\n:where(.theme-scope) .shop__modal-warning-title {\n  font-size: 1rem;\n  font-weight: 600;\n  color: rgb(var(--tb-text));\n  margin: 0 0 0.5rem;\n}\n\n:where(.theme-scope) .shop__modal-warning-text {\n  font-size: 0.9375rem;\n  color: rgb(var(--tb-mutedText));\n  margin: 0 0 1.25rem;\n  line-height: 1.5;\n}\n\n:where(.theme-scope) .shop__modal-warning-actions {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n}\n\n/* Post-checkout return notice */\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return {\n  text-align: center;\n  padding: 1.5rem 1rem;\n  margin-bottom: 1.25rem;\n  border: 1px solid rgb(var(--tb-border));\n  border-radius: var(--shop-card-radius);\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n  background: rgb(var(--tb-surface));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .rb-state-icon--success {\n  background: rgb(var(--tb-success) / 0.12);\n  color: rgb(var(--tb-success));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .rb-state-icon--warning {\n  background: rgb(var(--tb-warning) / 0.12);\n  color: rgb(var(--tb-warning));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-title {\n  margin: 0.25rem 0 0.5rem 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n  font-family: var(--font-heading);\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-text {\n  margin: 0;\n  opacity: 0.75;\n}\n\n:where(.theme-scope) :where([data-block=\"shop\"]) .shop__return-dismiss {\n  margin-top: 0.875rem;\n}\n\n/* Mobile: full-width CTA buttons inside cards */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .shop__cta {\n    align-self: stretch;\n    width: 100%;\n  }\n}\n}\n\n/* =============================================================================\n * Block: Customer Portal\n * Uses --cp-* CSS variables (Tier 3)\n * ============================================================================= */\n\n/* Container */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-container {\n  font-family: var(--font-body);\n  font-size: var(--fs-body);\n  min-height: 200px;\n}\n\n/* Loading state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-loading__text {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n}\n\n/* Login form */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login {\n  max-width: 480px;\n  margin: 0 auto;\n  padding: 2rem;\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__title {\n  margin: 0 0 0.5rem;\n  text-align: left;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__subtitle {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n  text-align: left;\n  margin: 0 0 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__helper {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n  text-align: left;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-login__success {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  text-align: left;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link {\n  appearance: none;\n  background: none;\n  border: 0;\n  color: var(--cp-muted);\n  cursor: pointer;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link:hover {\n  color: var(--cp-text);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-login__reset-link:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 3px;\n}\n\n/* Form controls (layout only; actual form styling is theme-driven via .form-label/.form-input) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n\n/* Buttons: Uses theme button classes (primary, secondary, btn-sm, etc.) - no custom styles needed */\n\n/* Alerts */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert {\n  padding: 1rem 1.25rem;\n  border-radius: var(--cp-control-radius);\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  border-left: 4px solid transparent;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--success {\n  background: var(--cp-alert-success-bg);\n  color: var(--cp-alert-success-text);\n  border-color: var(--cp-alert-success-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--error {\n  background: var(--cp-alert-error-bg);\n  color: var(--cp-alert-error-text);\n  border-color: var(--cp-alert-error-border);\n}\n\n/* Header */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 0;\n  margin-bottom: 1rem;\n  border-bottom: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-header__welcome {\n  font-size: 1.125rem;\n  font-weight: 500;\n}\n\n/* Content area */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-content {\n  min-height: 200px;\n}\n\n/* Section */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-section {\n  animation: cp-fade-in 200ms ease;\n}\n\n@keyframes cp-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Empty state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px dashed var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-empty__text {\n  color: var(--cp-muted);\n  font-size: 0.9375rem;\n}\n\n/* Card */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card {\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n  padding: 1.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-title {\n  font-weight: 600;\n  font-size: 1rem;\n  color: var(--cp-text);\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-subtitle {\n  font-size: 0.875rem;\n  margin: 0.25rem 0 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-body {\n  font-size: 0.9375rem;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem 1rem;\n  font-size: 0.875rem;\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\n\n/* Event waitlists */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-waitlist-list {\n  display: grid;\n  gap: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlists\n  > .cp-alert {\n  margin-bottom: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-waitlist-card {\n  transition:\n    border-color 180ms ease,\n    box-shadow 180ms ease;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card--focused {\n  border-color: var(--cp-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 22%, transparent);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card__summary,\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card__position {\n  font-weight: 600;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-waitlist-card\n  .cp-card-body\n  p {\n  margin: 0.4rem 0;\n}\n\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-header {\n    flex-direction: column-reverse;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-actions {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-waitlist-card\n    .cp-card-actions\n    > * {\n    justify-content: center;\n    text-align: center;\n  }\n}\n}\n\n/* Badge */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 9999px;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--success {\n  background: var(--cp-badge-success-bg);\n  color: var(--cp-badge-success-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--warning {\n  background: var(--cp-badge-warning-bg);\n  color: var(--cp-badge-warning-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--error {\n  background: var(--cp-badge-error-bg);\n  color: var(--cp-badge-error-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--info {\n  background: var(--cp-badge-info-bg);\n  color: var(--cp-badge-info-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-badge--default {\n  background: var(--cp-badge-default-bg);\n  color: var(--cp-badge-default-text);\n}\n\n/* Progress bar (for credit display) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-progress {\n  height: 0.5rem;\n  background: var(--cp-progress-bg);\n  border-radius: 9999px;\n  overflow: hidden;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-progress__fill {\n  height: 100%;\n  background: var(--cp-progress-fill);\n  border-radius: 9999px;\n  transition: width 300ms ease;\n}\n\n/* Profile display */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  max-width: 500px;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__tiles {\n  /* Use tiles as a mini \"details grid\" rather than event occurrence selection. */\n  --rb-event-tile-bg: var(--cp-card-bg);\n  --rb-event-tile-border: var(--cp-card-border);\n  --rb-event-tile-radius: var(--cp-control-radius);\n\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__value {\n  font-size: 1rem;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-profile__edit {\n  align-self: flex-start;\n}\n\n/* Cards grid */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cards {\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n}\n\n/* A11y helpers */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Table */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table-wrap {\n  background: var(--cp-card-bg);\n  color: var(--cp-text);\n  --rb-surface-text-color: var(--cp-text);\n  --rb-surface-heading-color: var(--cp-text);\n  --rb-surface-link-color: var(--cp-primary);\n  --rb-surface-link-hover-color: var(--rb-prose-link-hover-color, var(--cp-primary));\n  --rb-surface-link-hover-decoration: initial;\n  --rb-surface-supporting-color: var(--cp-muted);\n  border: 1px solid var(--cp-card-border);\n  border-radius: var(--cp-card-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table th,\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table td {\n  padding: 0.875rem 1rem;\n  vertical-align: top;\n  border-bottom: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-table thead th {\n  text-align: left;\n  background: rgb(var(--tb-border) / 0.2);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-table\n  tbody\n  tr:last-child\n  td {\n  border-bottom: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  :is(.cp-row--past, .cp-row--muted) {\n  opacity: 0.65;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-title {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  font-weight: 600;\n  font-size: 0.9375rem;\n  line-height: 1.2;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__badges {\n  margin-left: auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__text {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-meta {\n  margin-top: 0.25rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n  font-size: 0.8125rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-note {\n  margin-top: 0.5rem;\n  padding-left: 0.75rem;\n  border-left: 3px solid var(--cp-border);\n  font-size: 0.8125rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-note--success {\n  border-left-color: rgb(var(--tb-success));\n  color: rgb(var(--tb-success));\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-note--error {\n  border-left-color: rgb(var(--tb-destructive));\n  color: rgb(var(--tb-destructive));\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-row-muted {\n  color: var(--cp-muted);\n}\n\n/* Table columns */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-col-tickets {\n  white-space: nowrap;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-col-actions {\n  text-align: right;\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-col-actions\n  .btn-sm {\n  white-space: nowrap;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__link {\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-row-title__link:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n}\n\n/* Mobile-only row content within table cells */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-only-mobile {\n  display: none;\n}\n\n/* Section title (for Upcoming/Past dividers) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-section-title {\n  margin: 0 0 1rem;\n}\n\n/* Past items (faded) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-card--past {\n  opacity: 0.6;\n}\n\n/* Profile actions */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-profile__actions {\n  display: flex;\n  gap: 0.75rem;\n  margin-top: 1rem;\n}\n\n/* Guest section in event cards */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests {\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--cp-border);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest__name {\n  color: var(--cp-text);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest__phone {\n  color: var(--cp-muted);\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__empty {\n  font-size: 0.875rem;\n  color: var(--cp-muted);\n  font-style: italic;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guests__edit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-guest-edit-row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__index {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--cp-muted);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__fields {\n  display: flex;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__fields\n  input {\n  flex: 1;\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guest-edit-row__error {\n  font-size: 0.75rem;\n  color: var(--cp-error);\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-guests__actions {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n/* Actions modal */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-actions-list {\n  display: grid;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n}\n\n/* In the actions modal, tiles sit on a surface modal, so use \"background\" for contrast. */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-actions-list\n  :where(.rb-tile) {\n  --rb-event-tile-bg: rgb(var(--tb-background));\n  --rb-event-tile-border: rgb(var(--tb-border));\n}\n\n/* Actions trigger: icon-only kebab button */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-actions-trigger.btn-sm {\n  padding: 0.35rem !important;\n  line-height: 1 !important;\n  min-width: 32px;\n  min-height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Tickets live in their own column on desktop; show them inline on mobile. */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-meta-tickets {\n  display: none;\n}\n\n/* Action tiles (use shared rb-tile primitive for base) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-action-tile {\n  appearance: none;\n  font: inherit;\n  text-align: left;\n  display: grid;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile__title {\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile__desc {\n  font-size: 0.875rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-action-tile--danger\n  .cp-action-tile__title {\n  color: rgb(var(--tb-destructive));\n}\n\n/* Modal form layout */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-form-grid {\n  display: grid;\n  gap: 0.75rem;\n  margin-top: 0.75rem;\n}\n\n/* Button modifiers */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-btn--link {\n  background: none;\n  border: none;\n  padding: 0;\n  color: var(--cp-primary);\n  font-size: 0.875rem;\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-btn--link:hover {\n  color: var(--cp-primary-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-btn--xs {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n}\n\n/* Small input */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-input--sm {\n  height: auto;\n  padding: 0.375rem 0.625rem;\n  font-size: 0.875rem;\n}\n\n/* Input error state */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-input--error {\n  border-color: var(--cp-error);\n}\n/* Small alert */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--sm {\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-modal__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n}\n\n/* Membership cancel confirmation */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-cancel-confirm {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__title {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__message {\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__warning {\n  margin-bottom: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-cancel-confirm__actions {\n  display: flex;\n  gap: 0.75rem;\n}\n\n/* Membership actions */\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-membership-actions {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-section-actions {\n  margin-top: 1rem;\n}\n\n:where(.theme-scope)\n  :where([data-block=\"customer-portal\"])\n  .cp-card-subtitle--spaced {\n  margin-top: 0.75rem;\n}\n\n/* Alert spacing utilities */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--mt {\n  margin-top: 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-alert--mb {\n  margin-bottom: 1rem;\n}\n\n/* Responsive: show everything without horizontal scrolling */\n@container rb-site (max-width: 640px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"customer-portal\"]) .cp-only-mobile {\n    display: flex;\n  }\n\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"customer-portal\"]) .cp-table thead {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-guests,\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-tickets,\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-table\n    :is(th, td).cp-col-actions {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"customer-portal\"]) .cp-meta-tickets {\n    display: inline;\n  }\n\n  /* Make the cell a positioning context for the kebab */\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-row\n    > td:first-child {\n    position: relative;\n    padding-right: 2.5rem;\n  }\n\n  /* Position kebab in top-right of the cell */\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-row-mobile-actions {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    margin-top: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-row-mobile-actions\n    .btn-sm {\n    width: auto;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :where([data-block=\"customer-portal\"])\n    .cp-profile__edit {\n    align-self: stretch;\n  }\n}\n}\n\n/* Placeholder (SSR) */\n:where(.theme-scope) :where([data-block=\"customer-portal\"]) .cp-placeholder {\n  /* Styles for SSR placeholder */\n}\n\n/* =============================================================================\n * Runtime: Header Navigation Dropdown (Tailwind-free)\n *\n * The SDK runtime does not ship Tailwind's `group-hover:*` / `group-focus-within:*`\n * utilities, so dropdown menus must be controlled via plain CSS selectors.\n * =============================================================================\n */\n\n:where(.theme-scope) .nav-dropdown-menu {\n  /*\n   * Keep these rails in sync with header/navDropdownSizing.ts.\n   * The JS placement gutter is 16px, matching the 1rem per-side gutter in calc(100vw - 2rem).\n   */\n  min-width: 12rem;\n  width: max-content;\n  max-width: min(22rem, calc(100vw - 2rem));\n  transform: translateX(var(--nav-dropdown-shift-x, 0px));\n}\n\n:where(.theme-scope) .nav-dropdown:hover > .nav-dropdown-menu,\n:where(.theme-scope) .nav-dropdown:focus-within > .nav-dropdown-menu,\n:where(.theme-scope) .nav-dropdown .nav-dropdown-trigger[aria-expanded=\"true\"] + .nav-dropdown-menu {\n  display: block;\n}\n\n/* =============================================================================\n * Block: Testimonials\n * Uses CSS vars: --rb-testimonial-* (Tier 3) and --rb-block-* (Tier 2)\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-avatar {\n  width: var(--rb-testimonial-avatar-size);\n  height: var(--rb-testimonial-avatar-size);\n  border-radius: var(--rb-testimonial-avatar-border-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-card {\n  border-radius: var(--rb-block-radius);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonial-quote {\n  display: var(--rb-testimonial-quote-display, block);\n  font-family: var(--rb-testimonial-quote-font, inherit);\n  font-size: var(--rb-testimonial-quote-size);\n  line-height: 1;\n  font-weight: var(--rb-testimonial-quote-weight, 700);\n  opacity: var(--rb-testimonial-quote-opacity);\n  color: var(--rb-testimonial-quote-color, rgb(var(--tb-primary)));\n}\n\n\n/* Split grid: title column + cards. On desktop the title takes one quarter and\n * the cards fill the remaining three quarters (so title + 3 cards each read as\n * a quarter). Stacks on mobile. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-heading,\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-cards {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-cards {\n  container-type: inline-size;\n  container-name: rb-testimonials-split-cards;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n@container rb-testimonials-split-cards (min-width: 36rem) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid.rb-sm-grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@container rb-testimonials-split-cards (min-width: 54rem) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid-card-list > .rb-grid.rb-lg-grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"testimonials\"]) .rb-testimonials-split-grid {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n    align-items: start;\n  }\n}\n}\n\n\n/* =============================================================================\n * Variant: featured-editorial\n *\n * An asymmetric layout: a large featured (spruce-ink) quote card beside a\n * column of stacked white cards. Renders NO avatars. Colours are palette\n * tokens only. Node structure is built in testimonialsCarousel.ts.\n * ============================================================================= */\n\n/* Establish an inline-size query container so the head and grid below respond\n * to the block's own width, not the browser viewport. A viewport @media query\n * collapses to 1-col in the dashboard's scaled preview canvas (which reads the\n * dashboard window, not the canvas) and when the block sits in a narrow column;\n * @container tracks the actual laid-out width \u2014 matching the split-grid variant. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe {\n  container-type: inline-size;\n  container-name: rb-testimonials-fe;\n}\n\n/* Section head: heading left, lead-in line to the right; stacks on mobile. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-head {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-leadin {\n  max-width: 30rem;\n}\n\n@container rb-testimonials-fe (min-width: 768px) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-head {\n    flex-direction: row;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: 1.5rem;\n  }\n}\n\n/* Card grid: featured (wider) beside the stacked column. Single column on\n * small screens. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 1.25rem;\n  align-items: stretch;\n}\n\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);\n  }\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-col {\n  display: grid;\n  gap: 1.25rem;\n  align-content: start;\n}\n\n/* Card shells. Fill, border, corners, elevation and padding all come from the\n * site style's card system: the lead card renders the role its Look asks for\n * (`.card-role-alternative` by default), each supporting card\n * `.card-role-default`, and the padding lands on the shared `.card-content`\n * hook inside. What is left here is structure.\n *\n * The flex column is stated rather than inherited: generated card CSS happens\n * to set one today, but a card variant owns fill and padding, not layout, so\n * this field's geometry \u2014 the quote growing and the attribution pinning to the\n * card's bottom edge \u2014 has to hold whatever surface the site style supplies. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card-body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* Quote mark: the site style's quote treatment, oversized serif */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-qmark {\n  display: block;\n  height: 1.6rem;\n  font-family: var(--font-heading, Georgia, serif);\n  font-style: italic;\n  font-size: 3.375rem;\n  line-height: 0.6;\n  color: var(--rb-testimonial-quote-color, rgb(var(--tb-secondary)));\n}\n\n/* Quote body. The inner <p> is targeted directly (not via :where) so the\n * serif display font and sizing win over the theme's base paragraph rule. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-quote {\n  flex: 1 1 auto;\n  margin-top: 1.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-quote p {\n  margin: 0;\n  font-family: var(--font-heading, Georgia, serif);\n  font-size: 1.15rem;\n  line-height: 1.5;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-card--feature .rb-testimonials-fe-quote p {\n  font-size: clamp(1.375rem, 2.4vw, 1.6875rem);\n  line-height: 1.42;\n  letter-spacing: -0.01em;\n}\n\n/* Attribution: name (bold) + context line, no avatar */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  margin-top: 1.625rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-name {\n  font-weight: 600;\n  font-size: 0.97rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text)));\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-fe-context {\n  font-size: 0.78rem;\n  letter-spacing: 0.02em;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n\n/* Testimonials carousel tweaks: arrow styling + gutters + equal-height cards */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn {\n  height: var(--rb-testimonial-carousel-arrow-size);\n  width: var(--rb-testimonial-carousel-arrow-size);\n  border-color: var(--rb-testimonial-carousel-arrow-border-color);\n  background-color: var(--rb-testimonial-carousel-arrow-bg);\n  color: var(--rb-testimonial-carousel-arrow-color);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn:hover {\n  background-color: var(--rb-testimonial-carousel-arrow-bg-hover);\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-icon {\n  width: var(--rb-testimonial-carousel-arrow-icon-size);\n  height: var(--rb-testimonial-carousel-arrow-icon-size);\n  stroke-width: var(--rb-testimonial-carousel-arrow-icon-stroke-width);\n}\n\n/* Equal-height cards: stretch track items and make cards fill */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-track {\n  align-items: stretch;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide {\n  display: flex;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide > * {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n}\n\n/* Prevent slide shadows from being clipped - add vertical padding to slides.\n * We don't use frame padding because it affects Embla's position calculations.\n * Horizontal shadow room comes from the slide's gap padding in carousel.css. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-slide {\n  padding-top: var(--rb-testimonial-carousel-shadow-pad);\n  padding-bottom: var(--rb-testimonial-carousel-shadow-pad);\n}\n\n/* Anchor each arrow's outer edge to the container's outer edge.\n * .rb-container has 1rem horizontal padding + `overflow: hidden`, so pulling the\n * arrow out by exactly that padding puts the arrow center on the carousel content\n * edge without any of the button being clipped. */\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {\n  left: -1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"testimonials\"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--next {\n  right: -1rem;\n}\n\n/*\n * Event Details (runtime node)\n *\n * Keep these rules minimal and theme-driven.\n */\n\n:where(.theme-scope) .event-details {\n  width: 100%;\n  max-width: 56.25rem; /* 900px */\n  margin-inline: 0;\n}\n\n:where(.theme-scope) .event-details-map-wrap {\n  max-width: 28rem;\n}\n\n/*\n * Shared: Tiles\n *\n * Used by:\n * - Event Registration: occurrence selection cards\n * - Event Details: \"Other dates\"\n * - Event Details: whole-series session schedule\n */\n\n:where(.theme-scope) :where(.rb-tile, .er-event-card) {\n  width: 100%;\n  text-align: left;\n  padding: 1rem;\n  border-radius: var(--rb-event-tile-radius, calc(var(--rb-block-radius) * 0.75));\n  border-style: var(--rb-tile-border-style, var(--rb-event-tile-border-style, var(--rb-border-style, solid)));\n  border-width: var(--rb-tile-border-width, var(--rb-event-tile-border-width, var(--rb-border-width, 1px)));\n  border-color: var(--rb-tile-border, var(--rb-event-tile-border, rgb(var(--tb-border))));\n  background: var(--rb-tile-bg, var(--rb-event-tile-bg, transparent));\n  transition: border-color var(--rb-block-transition) ease,\n              background-color var(--rb-block-transition) ease,\n              opacity var(--rb-block-transition) ease;\n  display: block;\n  opacity: var(--rb-tile-opacity, var(--rb-event-tile-opacity, 1));\n  color: inherit;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .rb-tiles-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--rb-tiles-grid-cols-sm, 2), minmax(0, 1fr));\n  gap: var(--rb-event-tiles-grid-gap, 0.5rem);\n}\n\n:where(.theme-scope) .rb-tile-treatment-quiet {\n  --rb-tile-bg: color-mix(in oklab, rgb(var(--tb-surface)), rgb(var(--tb-muted)) 48%);\n  --rb-tile-border: color-mix(in oklab, rgb(var(--tb-border)), transparent 35%);\n  --rb-tile-border-hover: color-mix(in oklab, rgb(var(--tb-primary)), transparent 40%);\n}\n\n:where(.theme-scope) .rb-tile-treatment-brand-depth {\n  --rb-brand-depth-surface: rgb(var(--tb-primary-800));\n  --rb-brand-depth-tile-surface: rgb(var(--tb-primary-900));\n  --rb-brand-depth-tile-surface-selected: rgb(var(--tb-primary-950));\n  --rb-tile-bg: var(--rb-brand-depth-tile-surface);\n  --rb-tile-bg-selected: var(--rb-brand-depth-tile-surface-selected);\n  --rb-tile-border: transparent;\n  --rb-tile-border-hover: transparent;\n  --rb-tile-border-selected: transparent;\n  --rb-tile-border-width: 0;\n  --rb-event-tile-radius: var(--rb-block-radius);\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-tiles-grid {\n    grid-template-columns: repeat(var(--rb-tiles-grid-cols-md, var(--rb-tiles-grid-cols-sm, 2)), minmax(0, 1fr));\n  }\n}\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card) {\n  cursor: pointer;\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.25);\n}\n\n:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):hover:not(:disabled) {\n  border-color: var(--rb-tile-border-hover, var(--rb-event-tile-border-hover, rgb(var(--tb-primary) / 0.5)));\n  opacity: var(--rb-tile-hover-opacity, var(--rb-event-tile-hover-opacity, var(--rb-tile-opacity, var(--rb-event-tile-opacity, 1))));\n}\n\n:where(.theme-scope) :where(.rb-tile--selected, .er-event-card--selected) {\n  border-color: var(--rb-tile-border-selected, var(--rb-event-tile-border-selected, rgb(var(--tb-primary))));\n  background: var(--rb-tile-bg-selected, var(--rb-event-tile-bg-selected, rgb(var(--tb-primary) / 0.1)));\n}\n\n:where(.theme-scope) :where(.rb-tile--disabled, .er-event-card--disabled) {\n  border-style: dashed;\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/*\n * A cancelled session stays on the run's schedule rather than disappearing from\n * it, so a visitor can see the week is accounted for. It reads as retired: a\n * dashed edge, quietened like supporting text, and the date itself struck\n * through. The \"Cancelled\" caption beside it keeps its own weight, which is why\n * only the date carries the line.\n */\n:where(.theme-scope) .rb-tile--cancelled {\n  border-style: dashed;\n  opacity: var(--rb-tile-cancelled-opacity, 0.65);\n}\n\n:where(.theme-scope) .rb-tile--cancelled :where(strong) {\n  text-decoration: line-through;\n}\n\n/* =============================================================================\n * Block: Newsletter Signup\n * =============================================================================\n */\n\n/* Newsletter copy styling */\n/* Size only: weight, family and colour come from the theme's heading styles */\n:where(.theme-scope) :where([data-block=\"newsletter-signup\"]) .newsletter-copy-title {\n  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);\n  line-height: 1.15;\n  text-wrap: balance;\n}\n\n:where(.theme-scope) :where([data-block=\"newsletter-signup\"]) .newsletter-copy-subtitle {\n  font-size: 1rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  opacity: 0.85;\n}\n\n/* Newsletter form container */\n:where(.theme-scope) .newsletter-form {\n  width: 100%;\n  max-width: 32rem;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Newsletter form fields container */\n:where(.theme-scope) .newsletter-form-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rb-gap-sm, 0.75rem);\n}\n\n/* Extra preset fields (name, company...). Labels are visually hidden, so\n   these sit in a row above the email entry. */\n:where(.theme-scope) .newsletter-extra-fields {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) .newsletter-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  text-align: left;\n}\n\n/* Email entry: the email field and the themed submit button share one shell.\n   The shell's look (background, border, corners, focus ring) comes from the\n   theme's input system via .form-input-group; this only handles layout. */\n:where(.theme-scope) .newsletter-entry {\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  text-align: left;\n}\n\n:where(.theme-scope) .newsletter-entry-group > button {\n  white-space: nowrap;\n}\n\n/* Too narrow for field and button side by side (phones, footer columns):\n   stack them inside the shell and keep pill themes from turning the taller\n   shell into a capsule. */\n@container (max-width: 22rem) {\n  :where(.theme-scope) .newsletter-entry .newsletter-entry-group {\n    flex-direction: column;\n    border-radius: min(var(--rb-input-radius, 0.5rem), 1rem);\n  }\n\n  :where(.theme-scope) .newsletter-entry .newsletter-entry-group > button {\n    width: 100%;\n    justify-content: center;\n  }\n}\n\n/* Topic choices (visitor picks what to hear about) as toggle chips. Each chip\n   is a real checkbox underneath; the chip is its visible face. */\n:where(.theme-scope) .newsletter-topics {\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n}\n\n:where(.theme-scope) .newsletter-topics-legend {\n  padding: 0;\n  margin-bottom: 0.625rem;\n  font-size: 0.9375rem;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) .newsletter-topic-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) .newsletter-stacked .newsletter-topics-legend {\n  width: 100%;\n}\n\n:where(.theme-scope) .newsletter-stacked .newsletter-topic-chips {\n  justify-content: center;\n}\n\n:where(.theme-scope) .newsletter-topic-chip {\n  position: relative;\n  display: inline-flex;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > span {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.4375rem 0.9375rem;\n  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);\n  border-radius: var(--rb-button-radius, var(--rb-input-radius, 9999px));\n  font-size: 0.9375rem;\n  line-height: 1.3;\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n}\n\n/* Tick that grows in when the chip is on */\n:where(.theme-scope) .newsletter-topic-chip > span::before {\n  content: \"\";\n  width: 0;\n  height: 0.7em;\n  background-color: currentColor;\n  clip-path: polygon(14% 52%, 0 67%, 38% 100%, 100% 22%, 85% 8%, 37% 70%);\n  transition: width 0.15s ease;\n}\n\n:where(.theme-scope) .newsletter-topic-chip:hover > span {\n  border-color: currentColor;\n}\n\n/* Same accent and mark colours as the theme's checkboxes */\n:where(.theme-scope) .newsletter-topic-chip > input:checked + span {\n  background-color: var(--rb-check-accent, rgb(var(--tb-primary)));\n  border-color: var(--rb-check-accent, rgb(var(--tb-primary)));\n  color: var(--rb-check-mark, rgb(var(--tb-onPrimary, 255 255 255)));\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input:checked + span::before {\n  width: 0.7em;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input:focus-visible + span {\n  outline: 2px solid var(--rb-check-accent, rgb(var(--tb-primary)));\n  outline-offset: 2px;\n}\n\n:where(.theme-scope) .newsletter-topic-chip > input:disabled + span {\n  opacity: 0.6;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) .newsletter-topic-chip > span,\n  :where(.theme-scope) .newsletter-topic-chip > span::before {\n    transition: none;\n  }\n}\n\n/* Error panel and field notes. The form block scopes these to its own\n   data-block, so the newsletter form (which also renders in the footer)\n   needs its own copy of the treatment. */\n:where(.theme-scope) .newsletter-form .fb-error:not([data-field-validation-message]) {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) .newsletter-form [data-field-validation-message] {\n  font-size: 0.875rem;\n  color: var(--fb-error-text);\n}\n\n/* Submit button container (only when a preset has no email field) */\n:where(.theme-scope) .newsletter-submit {\n  margin-top: 0.5rem;\n}\n\n/* ALTCHA widget container */\n:where(.theme-scope) .newsletter-altcha {\n  margin-top: 0.75rem;\n  display: flex;\n  justify-content: center;\n}\n\n/* Privacy note: quieter than the intro so the entry row leads */\n:where(.theme-scope) .newsletter-privacy-note {\n  margin-top: 0.75rem;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));\n  opacity: 0.85;\n  text-align: center;\n}\n\n/* =============================================================================\n * Inline Variant - left-aligned, wider entry row\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-inline .newsletter-form {\n  max-width: 40rem;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n:where(.theme-scope) .newsletter-inline .newsletter-privacy-note {\n  text-align: left;\n}\n\n/* =============================================================================\n * Editorial Split Variant\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-editorial-split {\n  display: grid;\n  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);\n  gap: clamp(2.5rem, 7vw, 7rem);\n  align-items: center;\n  text-align: left;\n}\n\n:where(.theme-scope) .newsletter-editorial-split-copy {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rb-gap-sm, 0.75rem);\n}\n\n:where(.theme-scope) .newsletter-editorial-split-form {\n  min-width: 0;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-form {\n  max-width: none;\n  margin-inline: 0;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-copy-title {\n  font-size: clamp(2rem, 4vw, 3.5rem);\n  font-weight: 500;\n}\n\n:where(.theme-scope) .newsletter-editorial-split .newsletter-privacy-note {\n  text-align: left;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .newsletter-editorial-split {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 2rem;\n  }\n}\n}\n\n/* =============================================================================\n * Success State\n * =============================================================================\n */\n\n:where(.theme-scope) .newsletter-success {\n  text-align: center;\n}\n\n:where(.theme-scope) .newsletter-success .fb-success {\n  padding: 1rem 1.5rem;\n  background-color: rgb(var(--tb-success, 34 197 94) / 0.1);\n  border-radius: var(--radius-md, 0.5rem);\n  color: rgb(var(--tb-text));\n}\n\n/* =============================================================================\n * Block: Contact + Newsletter\n * =============================================================================\n */\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));\n  gap: clamp(2.5rem, 6vw, 4rem);\n  align-items: start;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-column {\n  min-width: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-copy {\n  margin-bottom: 1.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .form-copy-title,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-copy-title {\n  margin: 0 0 0.75rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .form-copy-intro,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-copy-subtitle {\n  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .contact-newsletter-info {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-form {\n  max-width: none;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .newsletter-privacy-note {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-row-2 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));\n  gap: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-fieldset {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border: none;\n  padding: 0;\n  margin: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-success,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-error,\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-empty {\n  border-radius: var(--rb-block-radius);\n  padding: 1rem;\n  font-size: 0.875rem;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-success {\n  background-color: var(--fb-success-bg);\n  color: var(--fb-success-text);\n  border: 1px solid var(--fb-success-border);\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-error {\n  background-color: var(--fb-error-bg);\n  color: var(--fb-error-text);\n  border: 1px solid var(--fb-error-border);\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-empty {\n  background-color: var(--fb-empty-bg);\n  color: var(--fb-empty-text);\n  border: 1px dashed var(--fb-empty-border);\n  text-align: center;\n}\n\n:where(.theme-scope) :where([data-block=\"contact-newsletter\"]) .fb-actions {\n  margin-top: 0.5rem;\n}\n\n/* =============================================================================\n * Block: Team Members\n * =============================================================================\n *\n * Site/theme authors sometimes need different thumbnail shapes/sizes without\n * changing global fragment defaults. We expose these controls on the block and\n * style them via data attributes on the `.rb-team-members` wrapper.\n */\n\n/* Scope all block-static CSS to ThemeScope to avoid leaking into host apps/dashboard. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-align=\"left\"]) {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-align=\"left\"]) :where(.rb-team-member) {\n  align-items: flex-start;\n  text-align: left;\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-layout-width=\"lg-3-4-left\"]) {\n    width: 75%;\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-photo {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-role {\n  font-weight: 600;\n}\n\n/* Thumbnail sizing: map `data-image-col-size` to a sensible max thumbnail width. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members) {\n  --rb-team-thumb-max: 11.25rem; /* ~180px default */\n  --rb-team-image-basis: 33.333%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/4\"]) {\n  --rb-team-thumb-max: 8.75rem; /* ~140px */\n  --rb-team-image-basis: 25%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/3\"]) {\n  --rb-team-thumb-max: 11.25rem; /* ~180px */\n  --rb-team-image-basis: 33.333%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"2/5\"]) {\n  --rb-team-thumb-max: 13.75rem; /* ~220px */\n  --rb-team-image-basis: 40%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"1/2\"]) {\n  --rb-team-thumb-max: 17.5rem; /* ~280px */\n  --rb-team-image-basis: 50%;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) :where(.rb-team-members[data-image-col-size=\"2/3\"]) {\n  --rb-team-thumb-max: 22.5rem; /* ~360px */\n  --rb-team-image-basis: 66.667%;\n}\n\n/* The wrap is the shape/padding boundary; ensure it expands within the grid cell. */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-member-photo-wrap {\n  width: 100%;\n  overflow: hidden;\n}\n\n/* In grid mode, cap thumbnail width so headshots don't dominate the card. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"grid\"]) :where(.rb-team-member-photo-wrap) {\n  max-width: var(--rb-team-thumb-max);\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"grid\"]) :where(.rb-team-members[data-layout-align=\"center\"]) :where(.rb-team-member-photo-wrap) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Stack variant: always left-aligned, regardless of the block alignment field. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members) {\n  text-align: left;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member) {\n  text-align: left;\n  align-items: flex-start;\n}\n\n/* Stack items: add comfortable per-item vertical padding so entries breathe. */\n:where(.theme-scope) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member--stack) {\n  padding-block: 1.25rem;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n/* Stack variant: enforce real column ratio at md+ (fixes transform/fallback pitfalls). */\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member-photo-col) {\n    flex: 0 0 var(--rb-team-image-basis);\n  }\n\n  /* Stack variant: increase media/text gap on desktop. */\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-member--stack) {\n    gap: 1.5rem;\n  }\n\n  /* Stack variant: optional vertical centering of text against thumbnail. */\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-content-align=\"center\"]) :where(.rb-team-member--stack) {\n    align-items: center;\n  }\n\n  /* Stack variant: image position control */\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-image-position=\"right\"]) :where(.rb-team-member--stack) {\n    flex-direction: row-reverse;\n  }\n\n  :where(.theme-scope:is(*, :scope)) :where([data-block=\"team-members\"][data-block-variant=\"stack\"]) :where(.rb-team-members[data-stack-image-position=\"alternate\"]) :where(.rb-team-member--stack:nth-child(even)) {\n    flex-direction: row-reverse;\n  }\n}\n}\n\n/* Thumbnail padding (space around image inside the item) */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"sm\"] .rb-team-member-photo-wrap {\n  padding: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"md\"] .rb-team-member-photo-wrap {\n  padding: 1rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-pad=\"lg\"] .rb-team-member-photo-wrap {\n  padding: 1.5rem;\n}\n\n/* Thumbnail shape */\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"square\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"square\"] .rb-team-member-photo-wrap {\n  border-radius: 0;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"rounded\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"rounded\"] .rb-team-member-photo-wrap {\n  border-radius: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"round\"] .rb-team-member-photo,\n:where(.theme-scope) :where([data-block=\"team-members\"]) .rb-team-members[data-thumb-shape=\"round\"] .rb-team-member-photo-wrap {\n  border-radius: 9999px;\n}\n\n/* The callout is its own opaque surface: tones tint over the theme surface,\n * not over whatever band the callout sits on, so its foreground and button\n * context (theme-core/src/blocks/opaquePanels.ts) hold on any section. */\n:where(.theme-scope) .feedback-callout {\n  background: rgb(var(--tb-surface, 248 250 252));\n  border-color: rgb(var(--tb-border, 226 232 240) / 0.72);\n  --rb-feedback-callout-bg-opacity: 0.1;\n  --rb-feedback-callout-border-opacity: 0.24;\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"info\"] {\n  --rb-feedback-callout-bg-opacity: 0.08;\n  background:\n    linear-gradient(rgb(var(--tb-primary, 37 99 235) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-primary, 37 99 235) / var(--rb-feedback-callout-bg-opacity))),\n    rgb(var(--tb-surface, 248 250 252));\n  border-color: rgb(var(--tb-primary, 37 99 235) / var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"success\"] {\n  background:\n    linear-gradient(rgb(var(--tb-success, 34 197 94) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-success, 34 197 94) / var(--rb-feedback-callout-bg-opacity))),\n    rgb(var(--tb-surface, 248 250 252));\n  border-color: rgb(var(--tb-success, 34 197 94) / var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"warning\"] {\n  --rb-feedback-callout-bg-opacity: 0.12;\n  --rb-feedback-callout-border-opacity: 0.28;\n  background:\n    linear-gradient(rgb(var(--tb-warning, 245 158 11) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-warning, 245 158 11) / var(--rb-feedback-callout-bg-opacity))),\n    rgb(var(--tb-surface, 248 250 252));\n  border-color: rgb(var(--tb-warning, 245 158 11) / var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout[data-feedback-tone=\"error\"] {\n  --rb-feedback-callout-border-opacity: 0.26;\n  background:\n    linear-gradient(rgb(var(--tb-destructive, 239 68 68) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-destructive, 239 68 68) / var(--rb-feedback-callout-bg-opacity))),\n    rgb(var(--tb-surface, 248 250 252));\n  border-color: rgb(var(--tb-destructive, 239 68 68) / var(--rb-feedback-callout-border-opacity));\n}\n\n:where(.theme-scope) .feedback-callout__title {\n  margin: 0;\n}\n\n:where(.theme-scope) .feedback-callout__body > :first-child {\n  margin-top: 0;\n}\n\n:where(.theme-scope) .feedback-callout__body > :last-child {\n  margin-bottom: 0;\n}\n\n/* =============================================================================\n * Block: Event Compact Row\n * Dense row layout for event-calendar compact list mode\n * ============================================================================= */\n\n:where(.theme-scope) .event-listing-compact-container {\n  --event-compact-divider-color: color-mix(\n    in oklab,\n    rgb(var(--tb-border, 229 231 235)),\n    rgb(var(--tb-text, 17 24 39)) 4%\n  );\n  --event-compact-secondary-text: color-mix(\n    in oklab,\n    rgb(var(--tb-text, 17 24 39)),\n    rgb(var(--tb-background, 255 255 255)) 28%\n  );\n\n  width: min(100%, 92rem);\n  margin-inline: auto;\n  overflow: hidden;\n  container: event-compact-list / inline-size;\n  border: 1px solid var(--event-compact-divider-color);\n  border-radius: 1rem;\n  background: rgb(var(--tb-surface, 255 255 255));\n  box-shadow: none;\n}\n\n:where(.theme-scope) .rb-event-list-treatment-lined-panel .event-listing-compact-container {\n  --event-compact-divider-color: color-mix(\n    in oklab,\n    rgb(var(--tb-border, 229 231 235)),\n    rgb(var(--tb-text, 17 24 39)) 8%\n  );\n  background: rgb(var(--tb-surface, 255 255 255));\n  border-color: color-mix(\n    in oklab,\n    rgb(var(--tb-primary, 0 0 0)),\n    rgb(var(--tb-border, 229 231 235)) 72%\n  );\n}\n\n:where(.theme-scope) .event-compact-row {\n  display: grid;\n  grid-template-columns: clamp(4.5rem, 6vw, 6.25rem) minmax(0, 1fr);\n  align-items: center;\n  min-height: 6rem;\n  padding: 1rem clamp(1.25rem, 2.6vw, 2.25rem);\n  border-bottom: 1px solid var(--event-compact-divider-color);\n  transition: background-color 150ms ease;\n}\n\n:where(.theme-scope) .event-compact-row:last-child {\n  border-bottom: none;\n}\n\n:where(.theme-scope) .event-compact-row:hover {\n  background-color: rgb(var(--tb-primary, 0 0 0) / 0.035);\n}\n\n:where(.theme-scope) .event-compact-row-date {\n  display: grid;\n  grid-template-rows: 1rem minmax(2.7rem, auto) 1rem;\n  place-items: center;\n  gap: 0;\n  min-width: 0;\n  padding-right: clamp(0.8rem, 1.6vw, 1.35rem);\n  text-align: center;\n  text-decoration: none;\n}\n\n:where(.theme-scope) .event-compact-row-body {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  border-left: 1px solid var(--event-compact-divider-color);\n}\n\n:where(.theme-scope) .event-compact-row-date-weekday,\n:where(.theme-scope) .event-compact-row-date-month {\n  display: grid;\n  place-items: center;\n  block-size: 1rem;\n  color: rgb(var(--tb-primary, 0 0 0));\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: normal;\n  letter-spacing: 0.08em;\n}\n\n:where(.theme-scope) .event-compact-row-date-day {\n  display: grid;\n  place-items: center;\n  min-block-size: clamp(2rem, 3vw, 2.6rem);\n  color: rgb(var(--tb-text, 17 24 39));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem);\n  font-weight: 400;\n  line-height: 1;\n}\n\n:where(.theme-scope) .event-compact-row-content {\n  min-width: 0;\n  display: flex;\n  flex: 1 1 18rem;\n  flex-direction: column;\n  gap: 0.625rem;\n  height: 100%;\n  justify-content: center;\n  padding-inline: clamp(1rem, 2.4vw, 2.4rem);\n}\n\n:where(.theme-scope) .event-compact-row-title {\n  margin: 0;\n  color: var(--rb-surface-heading-color, var(--rb-surface-text-color, rgb(var(--tb-primary, var(--tb-text, 17 24 39)))));\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);\n  font-weight: 400;\n  line-height: 1.2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.9rem;\n  min-width: 0;\n  color: var(--event-compact-secondary-text);\n  font-size: 0.875rem;\n  line-height: 1.35;\n}\n\n:where(.theme-scope) .event-compact-row-venue {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.45rem;\n  min-width: 0;\n}\n\n:where(.theme-scope) .event-compact-row-venue svg {\n  width: 1.05em;\n  height: 1.05em;\n}\n\n:where(.theme-scope) .event-compact-row-teacher,\n:where(.theme-scope) .event-compact-row-price {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.9rem;\n}\n\n:where(.theme-scope) .event-compact-row-teacher::before,\n:where(.theme-scope) .event-compact-row-price::before {\n  content: \"\";\n  width: 0.18rem;\n  height: 0.18rem;\n  border-radius: 9999px;\n  background: currentColor;\n}\n\n:where(.theme-scope) .event-compact-row-price {\n  color: inherit;\n  font-weight: inherit;\n}\n\n:where(.theme-scope) .event-compact-row-action {\n  display: grid;\n  flex: 0 1 clamp(14rem, 22vw, 19rem);\n  align-content: center;\n  gap: 0.75rem;\n  height: 100%;\n  padding-left: clamp(1.1rem, 2.4vw, 2.4rem);\n  border-left: 1px solid var(--event-compact-divider-color);\n}\n\n:where(.theme-scope) .event-compact-row-datetime {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.65rem;\n  color: var(--event-compact-secondary-text);\n  font-size: 0.875rem;\n  line-height: 1.3;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-datetime svg {\n  width: 1.1em;\n  height: 1.1em;\n  flex-shrink: 0;\n}\n\n:where(.theme-scope) .event-compact-row-action-price {\n  display: none;\n}\n\n:where(.theme-scope) .event-compact-row-status {\n  color: rgb(var(--tb-muted, var(--tb-text, 17 24 39)));\n  font-weight: 500;\n}\n\n:where(.theme-scope) .event-compact-row-cta {\n  width: min(100%, 15rem);\n  min-height: 2.7rem;\n  justify-content: space-between;\n  gap: 1rem;\n  white-space: nowrap;\n}\n\n:where(.theme-scope) .event-compact-row-cta svg {\n  width: 1.25rem;\n  height: 1.25rem;\n  flex-shrink: 0;\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .event-listing-compact-container {\n    border-radius: 0.875rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row {\n    grid-template-columns: 4.25rem minmax(0, 1fr);\n    min-height: 0;\n    padding: 1rem;\n    row-gap: 0.85rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-date {\n    align-self: start;\n    grid-row: 1;\n    padding-right: 0.75rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-body {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.85rem;\n    height: auto;\n    padding-left: 0.9rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-date-day {\n    font-size: 1.65rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-content {\n    flex: none;\n    gap: 0.625rem;\n    height: auto;\n    padding-inline: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-title {\n    font-size: 1.15rem;\n    overflow: visible;\n    text-overflow: clip;\n    white-space: normal;\n    overflow-wrap: break-word;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-venue {\n    max-width: 100%;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-venue svg {\n    flex-shrink: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-meta {\n    flex-direction: column;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-meta .event-compact-row-price {\n    display: none;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-teacher::before,\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-price::before {\n    content: none;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-action {\n    flex: none;\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0.7rem;\n    height: auto;\n    width: 100%;\n    padding-left: 0;\n    padding-top: 0;\n    border-left: 0;\n    border-top: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-datetime {\n    display: flex;\n    flex-wrap: wrap;\n    white-space: normal;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-action-price {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.55rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-action-price::before {\n    content: \"\\00b7\";\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-cta {\n    width: min(100%, 12rem);\n    min-height: 2.65rem;\n    justify-content: space-between;\n    gap: 0.65rem;\n    padding-inline: 1rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .event-compact-row-cta span {\n    min-width: 0;\n  }\n}\n}\n\n@container event-compact-list (max-width: 48rem) {\n  :where(.theme-scope) .event-compact-row {\n    grid-template-columns: 4.25rem minmax(0, 1fr);\n    min-height: 0;\n    padding: 1rem;\n    row-gap: 0.85rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date {\n    align-self: start;\n    grid-row: 1;\n    padding-right: 0.75rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-body {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.85rem;\n    height: auto;\n    padding-left: 0.9rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-date-day {\n    font-size: 1.65rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-content {\n    flex: none;\n    gap: 0.625rem;\n    height: auto;\n    padding-inline: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-title {\n    font-size: 1.15rem;\n    overflow: visible;\n    text-overflow: clip;\n    white-space: normal;\n    overflow-wrap: break-word;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue {\n    max-width: 100%;\n  }\n\n  :where(.theme-scope) .event-compact-row-venue svg {\n    flex-shrink: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta {\n    flex-direction: column;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-meta .event-compact-row-price {\n    display: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-teacher::before,\n  :where(.theme-scope) .event-compact-row-price::before {\n    content: none;\n  }\n\n  :where(.theme-scope) .event-compact-row-action {\n    flex: none;\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0.7rem;\n    height: auto;\n    width: 100%;\n    padding-left: 0;\n    padding-top: 0;\n    border-left: 0;\n    border-top: 0;\n  }\n\n  :where(.theme-scope) .event-compact-row-datetime {\n    display: flex;\n    flex-wrap: wrap;\n    white-space: normal;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.55rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-action-price::before {\n    content: \"\\00b7\";\n  }\n\n  :where(.theme-scope) .event-compact-row-cta {\n    width: min(100%, 12rem);\n    min-height: 2.65rem;\n    justify-content: space-between;\n    gap: 0.65rem;\n    padding-inline: 1rem;\n  }\n\n  :where(.theme-scope) .event-compact-row-cta span {\n    min-width: 0;\n  }\n}\n\n:where(.theme-scope) .section-state__callout {\n  text-align: center;\n  padding: 2rem;\n}\n\n:where(.theme-scope) .section-state__callout .feedback-callout__body {\n  margin-inline: auto;\n  max-width: 40rem;\n}\n\n:where(.theme-scope) .section-state__callout .feedback-callout__actions {\n  justify-content: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.theme-scope) :where([data-rb-background-video=\"true\"]) {\n    display: none !important;\n  }\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback {\n  border: 1px solid rgb(var(--tb-text, 17 24 39) / 0.12);\n  border-radius: 1rem;\n  padding: 0.875rem 1rem;\n  /* Opaque surface; foreground and button context come from the opaque-panel\n   * registry (theme-core/src/blocks/opaquePanels.ts). Tones tint over it. */\n  background: rgb(var(--tb-surface, 255 255 255));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"success\"] {\n  border-color: rgb(var(--tb-success, 34 197 94) / 0.3);\n  background:\n    linear-gradient(rgb(var(--tb-success, 34 197 94) / 0.1), rgb(var(--tb-success, 34 197 94) / 0.1)),\n    rgb(var(--tb-surface, 255 255 255));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"warning\"] {\n  border-color: rgb(var(--tb-warning, 245 158 11) / 0.35);\n  background:\n    linear-gradient(rgb(var(--tb-warning, 245 158 11) / 0.12), rgb(var(--tb-warning, 245 158 11) / 0.12)),\n    rgb(var(--tb-surface, 255 255 255));\n}\n\n:where(.theme-scope) [data-block=\"gifting\"] .gifting-feedback[data-feedback-tone=\"error\"] {\n  border-color: rgb(var(--tb-destructive, 239 68 68) / 0.3);\n  background:\n    linear-gradient(rgb(var(--tb-destructive, 239 68 68) / 0.1), rgb(var(--tb-destructive, 239 68 68) / 0.1)),\n    rgb(var(--tb-surface, 255 255 255));\n}\n\n/* =============================================================================\n * Shared: Heading Decorations\n * =============================================================================\n */\n\n/*\n * The mark sits inside a full-width block row so it inherits the heading group's\n * `text-align`: a centred heading centres the mark, a left-aligned heading keeps\n * it at the start. The heading stacks are flexbox, where `text-align` positions\n * inline content but not flex items \u2014 so the row (a stretched block flex item)\n * is what carries the alignment, and the inline-block mark follows it. Alignment\n * is never configured directly; it follows the heading.\n */\n:where(.theme-scope) .rb-heading-decoration-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n:where(.theme-scope) .rb-heading-decoration-row {\n  display: block;\n  width: 100%;\n  margin-top: 0.35rem;\n  line-height: 0;\n  pointer-events: none;\n}\n\n:where(.theme-scope) .rb-heading-decoration {\n  display: inline-block;\n  vertical-align: top;\n}\n\n:where(.theme-scope) .rb-heading-decoration-organic-squiggle {\n  width: clamp(5.5rem, 15vw, 9rem);\n  height: 1.1rem;\n  background-color: currentColor;\n  opacity: 0.9;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg width='144' height='18' viewBox='0 0 144 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10C15 1 27 1 40 10C53 18 66 18 79 10C92 1 105 1 118 10C127 16 136 17 142 12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg width='144' height='18' viewBox='0 0 144 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10C15 1 27 1 40 10C53 18 66 18 79 10C92 1 105 1 118 10C127 16 136 17 142 12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n}\n\n:where(.theme-scope) .rb-heading-decoration-short-center-rule {\n  width: 4.5rem;\n  height: 0.125rem;\n  border-radius: 999px;\n  background-color: currentColor;\n  opacity: 0.75;\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-text {\n  color: rgb(var(--tb-text));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-primary {\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-secondary {\n  color: rgb(var(--tb-secondary));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-accent {\n  color: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-border {\n  color: rgb(var(--tb-border));\n}\n\n:where(.theme-scope) .rb-heading-decoration-color-muted {\n  color: rgb(var(--tb-mutedText));\n}\n\n/* =============================================================================\n * Block: Feature Card Icons\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-feature-card-icon-zone {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  margin-bottom: 0.125rem;\n  color: rgb(var(--tb-primary));\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--empty {\n  visibility: hidden;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--plain {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--soft-badge,\n:where(.theme-scope) .rb-feature-card-icon-zone--utility-badge {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--soft-badge {\n  background-color: rgb(var(--tb-primary) / 10%);\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--utility-badge {\n  background-color: rgb(var(--tb-surface));\n  border: 1px solid rgb(var(--tb-border));\n  box-shadow: 0 1px 2px rgb(var(--tb-shadow) / 0.08);\n}\n\n:where(.theme-scope) .rb-feature-card-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon--generated {\n  object-fit: contain;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--generated {\n  align-self: center;\n  inline-size: min(var(--rb-feature-card-generated-icon-size, 75px), 100%);\n  max-inline-size: 100%;\n  block-size: auto;\n  aspect-ratio: 1;\n  margin-inline: auto;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--plain .rb-feature-card-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n:where(.theme-scope) .rb-feature-card-icon-zone--generated .rb-feature-card-icon--generated {\n  inline-size: 100%;\n  max-inline-size: 100%;\n  block-size: 100%;\n}\n\n/* --- Card marker mode (icons / numbers / none) -----------------------------\n *\n * The icon zone and the number zone both sit in the DOM; the grid's\n * `data-card-marker` attribute decides which shows. The default (legacy\n * content with no attribute) shows icons and hides the number zone.\n */\n:where(.theme-scope) .rb-feature-card-number-zone {\n  display: none; /* shown only in numbers mode */\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 2.5rem;\n  height: 2.5rem;\n  margin-bottom: 0.125rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n  background-color: rgb(var(--tb-primary) / 10%);\n  color: rgb(var(--tb-primary));\n  counter-increment: rb-feature-card-number;\n}\n:where(.theme-scope) .rb-feature-card-number-zone::before {\n  content: counter(rb-feature-card-number, decimal-leading-zero);\n  font-weight: 700;\n  font-size: 0.95rem;\n  line-height: 1;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid {\n  counter-reset: rb-feature-card-number;\n}\n\n:where(.theme-scope) [data-card-marker=\"numbers\"] .rb-feature-card-number-zone {\n  display: inline-flex;\n}\n:where(.theme-scope) [data-card-marker=\"numbers\"] .rb-feature-card-icon-zone {\n  display: none;\n}\n:where(.theme-scope) [data-card-marker=\"none\"] .rb-feature-card-icon-zone,\n:where(.theme-scope) [data-card-marker=\"none\"] .rb-feature-card-number-zone {\n  display: none;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"portrait-bio\"][data-block-variant=\"media-copy\"] .rb-intro-media-wrap {\n  max-width: min(100%, 24rem);\n  margin-inline: auto;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"portrait-bio\"][data-block-variant=\"media-copy\"] .rb-intro-media {\n  aspect-ratio: 1 / 1 !important;\n  border-radius: 9999px;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) [data-block=\"intro\"][data-block-variant=\"statement-media\"] .rb-intro-statement-media-title {\n    grid-column: 1 / -1;\n  }\n}\n}\n\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) [data-block=\"intro\"][data-block-variant=\"statement-media\"] .rb-intro-statement-media-title {\n    grid-column: auto;\n  }\n}\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-title {\n  font-size: clamp(2rem, 1.56rem + 1.4vw, 3rem);\n  line-height: 1.14;\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-copy {\n  gap: var(--rb-space-5, 1.25rem);\n}\n\n:where(.theme-scope) [data-block=\"intro\"][data-block-composition=\"editorial-statement\"] .rb-intro-copy .rb-prose {\n  font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.375rem);\n  line-height: 1.65;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-section {\n  width: min(100%, 66rem);\n  margin-inline: auto;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-heading {\n  max-width: 44rem;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-header {\n  display: flex;\n  gap: 2rem;\n  align-items: end;\n  justify-content: space-between;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-eyebrow {\n  margin: 0;\n  color: rgb(var(--tb-accent));\n  font-size: 0.72rem;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-heading-title {\n  margin: 0;\n  font-size: clamp(2rem, 4.6vw, 3.3rem);\n  line-height: 1.08;\n}\n\n:where(.theme-scope) .recurring-schedule {\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope) .recurring-schedule-row {\n  display: grid;\n  grid-template-columns: minmax(9rem, 0.82fr) minmax(16rem, 1.5fr) auto;\n  grid-template-rows: auto auto;\n  column-gap: clamp(1.5rem, 4vw, 2.75rem);\n  row-gap: 0.15rem;\n  align-items: center;\n  padding: 1.4rem 0.75rem;\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n  color: inherit;\n}\n\n:where(.theme-scope) .recurring-schedule-day,\n:where(.theme-scope) .recurring-schedule-time,\n:where(.theme-scope) .recurring-schedule-title,\n:where(.theme-scope) .recurring-schedule-venue {\n  margin: 0;\n}\n\n:where(.theme-scope) .recurring-schedule-day {\n  grid-column: 1;\n  grid-row: 1;\n  font-family: var(--font-heading);\n  font-size: clamp(1.25rem, 2vw, 1.5rem);\n  line-height: 1;\n}\n\n:where(.theme-scope) .recurring-schedule-time {\n  grid-column: 1;\n  grid-row: 2;\n  display: flex;\n  gap: 0.35rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.86rem;\n  font-variant-numeric: tabular-nums;\n}\n\n:where(.theme-scope) .recurring-schedule-details {\n  grid-column: 2;\n  grid-row: 1 / span 2;\n  align-self: center;\n}\n\n:where(.theme-scope) .recurring-schedule-title {\n  font-size: 1.06rem;\n  font-weight: 500;\n}\n\n:where(.theme-scope) .recurring-schedule-venue {\n  margin-top: 0.2rem;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n  font-size: 0.92rem;\n}\n\n:where(.theme-scope) .recurring-schedule-action {\n  grid-column: 3;\n  grid-row: 1 / span 2;\n  min-width: 4.5rem;\n  text-align: right;\n}\n\n:where(.theme-scope) .recurring-schedule-see-all {\n  width: fit-content;\n  color: inherit;\n  text-underline-offset: 0.3em;\n}\n\n:where(.theme-scope) .recurring-schedule-empty {\n  margin: 0;\n  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"recurring-schedule\"]) .recurring-schedule-header {\n    align-items: start;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .recurring-schedule-row {\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto auto;\n    gap: 0.5rem 1rem;\n    align-items: start;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .recurring-schedule-day {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .recurring-schedule-time {\n    grid-column: 1;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .recurring-schedule-details {\n    grid-column: 1 / -1;\n    grid-row: 3;\n    margin-top: 0.35rem;\n  }\n\n  :where(.theme-scope:is(*, :scope)) .recurring-schedule-action {\n    grid-column: 2;\n    grid-row: 1 / span 2;\n  }\n}\n}\n\n/* =============================================================================\n * Event list treatments: registers and dense indexes\n *\n * These treatments retain the event list's content and structural layout.\n * Their contrast relationships come exclusively from the active semantic\n * section surface and named palette tokens.\n *\n * The treatment list is `:is()`, not `:where()`, so each rule outranks the card\n * role (`.card-role-x.card-role-x`) the event card also carries: the rows must\n * stay boxless whichever stylesheet the page loads last.\n * ============================================================================= */\n\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card {\n  position: relative;\n  overflow: visible;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  /* Boxless row: the opaque-panel registry hands the band's contract back. */\n}\n\n/* Register treatments intentionally prioritise schedule data over imagery. */\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-media {\n  display: none;\n}\n\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .card-content {\n  min-width: 0;\n  padding: 1.5rem 0.625rem;\n}\n\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .card-title {\n  min-width: 0;\n  margin-bottom: 0.25rem;\n}\n\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-footer {\n  min-width: 8rem;\n  padding-top: 0;\n}\n\n:where(.theme-scope)\n  :is(\n    .rb-event-list-treatment-ruled-register,\n    .rb-event-list-treatment-editorial-register,\n    .rb-event-list-treatment-dense-index\n  )\n  .event-card.event-card\n  .event-card-cta {\n  width: 100%;\n}\n\n/* Ruled register: open rows with quiet rules on the current section surface. */\n:where(.theme-scope)\n  .rb-event-list-treatment-ruled-register\n  .event-card.event-card {\n  border-top: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-ruled-register\n  .event-card.event-card:last-child {\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 78%);\n}\n\n/* Editorial register: generous rows, an accent marker and display-led titles. */\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card {\n  border-top: 1px solid color-mix(in oklab, rgb(var(--tb-border)), transparent 20%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card:last-child {\n  border-bottom: 1px solid color-mix(in oklab, rgb(var(--tb-border)), transparent 20%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card::before {\n  content: \"\";\n  position: absolute;\n  inset-block: 1.75rem;\n  inset-inline-start: 0;\n  width: 0.25rem;\n  border-radius: var(--rb-block-radius, 0.75rem);\n  background: rgb(var(--tb-accent));\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card\n  .card-content {\n  padding-block: 1.875rem;\n  padding-inline-start: clamp(1.25rem, 2.5vw, 2rem);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-editorial-register\n  .event-card.event-card\n  .card-title {\n  font-family: var(--font-heading, var(--font-body, inherit));\n  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);\n  font-weight: 500;\n  line-height: 1.15;\n}\n\n/* Dense index: stronger outside rule and reduced row rhythm, without opting\n * the block into its structurally different compact-list facet. */\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card {\n  border-bottom: 1px solid color-mix(in oklab, currentColor, transparent 62%);\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card:first-child {\n  border-top: 2px solid currentColor;\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card\n  .card-content {\n  padding-block: 1.125rem;\n}\n\n:where(.theme-scope)\n  .rb-event-list-treatment-dense-index\n  .event-card.event-card\n  .card-title {\n  font-size: 1rem;\n  line-height: 1.35;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal {\n    display: block;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content {\n    display: grid;\n    grid-template-columns: minmax(8.5rem, 0.7fr) minmax(15rem, 1.55fr) auto;\n    grid-template-rows: auto auto auto;\n    align-items: center;\n    column-gap: clamp(1.25rem, 3vw, 2.625rem);\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-title {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > div.rb-caption {\n    grid-column: 1;\n    grid-row: 1 / span 6;\n    margin-bottom: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > div.rb-mb-3 {\n    grid-column: 2;\n    margin-bottom: 0;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .event-category-badge {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .card-body,\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .card-content > .status-muted:not(.event-card-capacity) {\n    grid-column: 2;\n  }\n\n  :where(.theme-scope:is(*, :scope))\n    :is(\n      .rb-event-list-treatment-ruled-register,\n      .rb-event-list-treatment-editorial-register,\n      .rb-event-list-treatment-dense-index\n    )\n    .event-card.event-card.event-card--horizontal\n    .event-card-footer {\n    grid-column: 3;\n    grid-row: 1 / span 6;\n    flex-direction: column;\n    justify-content: center;\n    align-items: stretch;\n  }\n}\n}\n\n/* =============================================================================\n * Feature-card composition Looks promoted from block-treatment studies.\n * Palette relationships use named semantic tokens; copy and media stay in the\n * existing feature-card content contract.\n * ============================================================================= */\n\n/* Asymmetric emphasis: repeat a 5/7 pair rhythm and give each even card a\n * semantic secondary surface. This remains useful with more than two cards. */\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-cards-grid {\n  align-items: start;\n}\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card {\n  height: auto;\n  overflow: visible;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card:nth-child(even) {\n  padding: clamp(1.125rem, 2.5vw, 1.875rem);\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 1.5);\n  background: rgb(var(--tb-secondary));\n  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n  .rb-feature-card:nth-child(even) > .rb-feature-card-media {\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n/* Framed programme: a close-set family of cards on a semantic depth section.\n * The Look asks for the `alternative` card role; the site style's card system\n * supplies the surface. */\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-cards-grid {\n  gap: clamp(1rem, 2vw, 1.5rem);\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-card > .rb-feature-card-media {\n  width: 100%;\n  max-width: 100%;\n  margin: 0;\n  border-radius: var(--rb-block-radius, 0.75rem);\n}\n\n:where(.theme-scope)\n  [data-block=\"feature-cards\"][data-block-composition=\"framed-programme\"]\n  .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n  padding-bottom: 0;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope))\n    [data-block=\"feature-cards\"][data-block-composition=\"asymmetric-emphasis\"]\n    .rb-feature-cards-grid.rb-grid-cols-2 {\n    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n  }\n}\n}\n\n/* --- Feature card media + padding behaviour (all looks) -------------------- */\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame {\n  width: calc(100% + 2 * var(--rb-card-pad, 0rem));\n  max-width: none;\n  margin: calc(-1 * var(--rb-card-pad, 0rem)) calc(-1 * var(--rb-card-pad, 0rem)) 0;\n}\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame + .rb-feature-card-content {\n  margin-top: 1.4rem;\n}\n\n:where(.theme-scope) .rb-feature-card[class*=\"rb-container-pad-\"]:not(.rb-container-pad-none) > .rb-feature-card-content {\n  padding: 0;\n}\n\n:where(.theme-scope) .rb-feature-card > .rb-bg-surface,\n:where(.theme-scope) .rb-feature-card > .rb-feature-card-media-frame {\n  border-start-start-radius: inherit;\n  border-start-end-radius: inherit;\n}\n\n/* --- Editorial diptych + pathways ----------------------------------------- */\n\n:where(.theme-scope) .rb-feature-cards-heading--editorial {\n  margin-inline: 0;\n  text-align: left;\n}\n\n:where(.theme-scope) .rb-feature-cards-eyebrow {\n  margin: 0;\n  color: rgb(var(--tb-accent));\n  font-size: 0.72rem;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych {\n  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);\n  align-items: stretch;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  align-items: start;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card {\n  border: 0;\n  box-shadow: none;\n  height: auto;\n  min-width: 0;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card[data-surface-role=\"open\"] > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid:is(\n  .rb-feature-cards-grid--editorial-diptych,\n  .rb-feature-cards-grid--editorial-pathways\n) .rb-feature-card[data-surface-role=\"open\"] > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-feature-card-content {\n  padding-inline: 0;\n}\n\n/* Diptych filled panel: a composition over the `alternative` role's surface.\n   It paints primary (below); its foreground and button context for that paint\n   come from theme-core/src/blocks/opaquePanels.ts. */\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] > .rb-bg-surface {\n  background: rgb(var(--tb-primary));\n  border-radius: inherit;\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] > .rb-feature-card-media-frame {\n  width: calc(100% - 2.5rem);\n  margin: 1.25rem 1.25rem 0;\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.55);\n}\n\n:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card-content {\n  padding-top: 1.35rem;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role=\"panel\"] {\n    margin-top: clamp(2rem, 5vw, 4.5rem);\n  }\n\n  :where(.theme-scope:is(*, :scope)) .rb-feature-cards-grid--editorial-pathways .rb-feature-card + .rb-feature-card {\n    border-left: 1px solid color-mix(in oklab, currentColor, transparent 82%);\n    padding-left: clamp(1.5rem, 4vw, 4rem);\n  }\n}\n}\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) .rb-feature-cards-grid:is(\n    .rb-feature-cards-grid--editorial-diptych,\n    .rb-feature-cards-grid--editorial-pathways\n  ) {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n}\n\n/* =============================================================================\n * Offerings Preview composition Looks promoted from the Fran Andr\u00E9 treatment\n * study. The outer section surface remains independently configurable. These\n * rules use expanded semantic palette tokens only.\n * ============================================================================= */\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  [data-offering-presentation=\"featured-summary\"]\n  .offerings-preview-card-header {\n  text-align: left;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-date {\n  margin: 0;\n  font-family: var(--font-heading, inherit);\n  font-size: clamp(1.125rem, 2.2vw, 1.5rem);\n  font-weight: 650;\n  line-height: 1.22;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-date time {\n  display: inline-block;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts {\n  display: grid;\n  gap: 0;\n  margin: clamp(1.25rem, 3vw, 2rem) 0 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts > div {\n  display: grid;\n  grid-template-columns: minmax(5.5rem, 0.65fr) minmax(0, 1.35fr);\n  gap: 1rem;\n  padding-block: 0.6rem;\n  border-top: 1px solid rgb(var(--tb-border) / 0.72);\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts dt {\n  font-size: 0.72rem;\n  font-weight: 750;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"]\n  .offerings-preview-summary-facts dd {\n  min-width: 0;\n  margin: 0;\n  font-weight: 600;\n}\n\n/* --- Composition Looks ----------------------------------------------------\n * Each of these compositions is paired with a card role on the Look\n * (`alternative`, `open`, `default`), so the group card's fill, elevation and\n * padding come from the site style's card system, and nothing below names a\n * colour.\n *\n * Geometry is a different question from colour. A composition that says the\n * rows are *joined* is making a structural statement, and it can only be true\n * if the rows stop drawing their own corners and edges \u2014 so flattening\n * geometry (radius, border width) on inner items is allowed where the\n * composition's meaning depends on it. Choosing what colour those edges would\n * have been is not.\n * ------------------------------------------------------------------------- */\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview {\n  container: rb-offerings-preview / inline-size;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview-card {\n  min-width: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition-kind=\"offerings-preview\"]\n  .offerings-preview-card-footer {\n  margin-top: auto;\n  padding-top: clamp(1.25rem, 3vw, 2rem);\n}\n\n/* Paired feature cards: one editorial lead and one supporting route. With a\n * third group the grid returns to equal columns rather than implying a new\n * source hierarchy. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"paired-feature-cards\"]\n  .offerings-preview-grid {\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important;\n  gap: clamp(1rem, 2.5vw, 1.5rem);\n}\n\n@container rb-offerings-preview (min-width: 52rem) {\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"paired-feature-cards\"]\n    .offerings-preview-grid:has(> .offerings-preview-card:nth-child(2):last-child) {\n    grid-template-columns: minmax(0, 1.22fr) minmax(18rem, 0.78fr) !important;\n  }\n}\n\n/* Open editorial columns: hierarchy without an item fill. The `open` card role\n * supplies whatever marking the site style gives a boxless card. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"open-editorial-columns\"]\n  .offerings-preview-grid {\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)) !important;\n  gap: clamp(1.5rem, 4vw, 3rem);\n}\n\n/* Joined programme panel: every group remains independently editable, but the\n * rows are clipped into one column so they read as a single programme. Each\n * row's surface is its own `default` card. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview {\n  overflow: hidden;\n  gap: 0;\n  border-radius: calc(var(--rb-block-radius, 0.75rem) * 1.75);\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-grid {\n  grid-template-columns: minmax(0, 1fr) !important;\n  gap: 0;\n}\n\n/* Geometry, not colour: a joined panel is only joined if its rows stop drawing\n * their own corners and outlines. The card role still owns every fill, and the\n * panel's own corners are clipped by the wrapper above. */\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-card {\n  border-radius: 0;\n  border-width: 0;\n}\n\n:where(.theme-scope)\n  [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n  .offerings-preview-card + .offerings-preview-card {\n  border-top-width: 1px;\n}\n\n@container rb-offerings-preview (min-width: 58rem) {\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n    .offerings-preview-card-content {\n    display: grid;\n    grid-template-columns: minmax(15rem, 1.1fr) minmax(19rem, 1.4fr) minmax(10rem, auto);\n    align-items: center;\n    gap: clamp(1.5rem, 4vw, 4rem);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"offerings-preview\"][data-block-composition=\"joined-programme-panel\"]\n    .offerings-preview-card-footer {\n    margin-top: 0;\n    padding-top: 0;\n    justify-content: flex-end;\n  }\n}\n\n/* =============================================================================\n * Featured-editorial testimonial compositions, promoted from the Fran Andr\u00E9\n * treatment study and keyed on the Look's composition intent.\n *\n * Structure only. Which card each slot renders is the block's own lead /\n * support structure (`.card-role-alternative` on the lead, `.card-role-default`\n * on each supporting voice) and what those cards look like belongs to the site\n * style's card system \u2014 so nothing here sets a fill, a border or a corner.\n * ============================================================================= */\n\n/* Evergreen lead: the lead voice remains dominant while the supporting column\n * opens into two equal compact voices at wider widths. */\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"evergreen-lead\"]\n    .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"evergreen-lead\"]\n    .rb-testimonials-fe-col {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n/* Room and response: a tall lead voice with its responses stacked beside it in\n * the existing support column. */\n:where(.theme-scope)\n  [data-block=\"testimonials\"][data-block-composition=\"room-and-response\"]\n  .rb-testimonials-fe-card--feature {\n  min-height: 27rem;\n}\n\n/* Open floor: the section head becomes an editorial rail while proof occupies\n * a lead-over-supporting field. */\n@container rb-testimonials-fe (min-width: 1024px) {\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe {\n    display: grid;\n    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.6fr);\n    align-items: start;\n    gap: clamp(2rem, 5vw, 5rem);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-head {\n    display: block;\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-leadin {\n    margin-top: 1.5rem;\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  :where(.theme-scope)\n    [data-block=\"testimonials\"][data-block-composition=\"open-floor\"]\n    .rb-testimonials-fe-col {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n/* Open-editorial testimonials composition, selected by a Look\n * (`composition: { kind: 'testimonials', treatment: 'open-editorial' }`).\n *\n * Two jobs. First, *boxless*: `styledCard` always renders an opaque\n * `.rb-bg-surface` fill layer, so a testimonial with no card role has to clear\n * it or it paints a white box on the section band (the same shape\n * feature-card-compositions.css uses for `[data-surface-role=\"open\"]`).\n * Second, the composition proper: a hairline before the attribution, an accent\n * ring on the avatar, comfortable prose.\n *\n * What is *not* here: whether the testimonial sits in a card (the Look's\n * `cardRole`), how that card looks (the site style's card system), or the quote\n * mark (the site style's quote treatment, via the --rb-testimonial-quote-* vars\n * in testimonials.css).\n *\n * The block attribute is deliberately outside `:where()` so these rules outrank\n * the card's own utility classes, matching the compositions above. */\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-card {\n  background: transparent;\n  border: 0;\n  border-radius: 0;\n  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.5rem);\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-card > .rb-bg-surface {\n  background: transparent;\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-prose {\n  font-size: 1.0625rem;\n  line-height: 1.7;\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-attribution {\n  margin-top: 1.25rem;\n  padding-top: 1.25rem;\n  border-top: 1px solid rgb(var(--tb-border) / 0.75);\n}\n\n:where(.theme-scope) [data-block=\"testimonials\"][data-block-composition=\"open-editorial\"] .rb-testimonial-avatar {\n  box-shadow:\n    0 0 0 2px rgb(var(--tb-surface)),\n    0 0 0 4px rgb(var(--tb-primary) / 0.3);\n}\n\n/* =============================================================================\n * Block: Appointment Services\n * ============================================================================= */\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 1rem;\n  row-gap: 0.5rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-main {\n  flex: 1 1 16rem;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-price {\n  flex: 0 0 auto;\n}\n\n:where(.theme-scope) :where([data-block=\"appointment-services\"]) .appointment-services-row-action {\n  flex: 1 0 100%;\n}\n\n@container rb-site (min-width: 768px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n:where(.theme-scope:is(*, :scope)) :where([data-block=\"appointment-services\"]) .appointment-services-row-action {\n    flex: 0 0 auto;\n  }\n}\n}\n\n/* =============================================================================\n * Site footer: social links\n *\n * Icon links get a 40px tap target with a hairline ring drawn from the link's\n * own colour, so it follows the footer's text colour on any surface. Links\n * without an icon (unknown platforms) stay plain text.\n * =============================================================================\n */\n\n:where(.theme-scope) .rb-footer-socials {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.75rem 1.25rem;\n}\n\n:where(.theme-scope) .rb-footer-social-link:has(> .rb-footer-social-icon) {\n  display: inline-grid;\n  place-items: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);\n  border-radius: 9999px;\n}\n\n:where(.theme-scope) .rb-footer-socials:has(.rb-footer-social-icon) {\n  gap: 0.5rem;\n}\n\n:where(.theme-scope) .rb-footer-social-link:has(> .rb-footer-social-icon):hover {\n  border-color: currentColor;\n}\n\n:where(.theme-scope) .rb-footer-social-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n/* =============================================================================\n * Arrangement Looks: shared structure (issue 1575 Phase 1a).\n *\n * Proposed home: packages/theme-core/src/blocks-static/arrangements.css,\n * imported before ./skins/index.css. Style-neutral: no colours, no fonts.\n * Keyed only on the shared hooks (data-arrangement, data-knob-*, data-has-*,\n * data-photo-count, data-mode) and data-slot, so it passes the skin contract\n * selector rule too.\n *\n * Responsive rules are @media, like the rest of blocks-static: the\n * container-responsive generator rewrites them to @container for the\n * dashboard preview. Fluid sizes use cqi, which falls back to the viewport\n * when there is no size container (published) and follows the preview frame\n * when there is one. Rerun generate-container-responsive-css after changing.\n *\n * Skins set measurements through --rb-skin-* tokens (style data, G9); the\n * defaults here are the fallbacks.\n * ============================================================================= */\n\n/* ---------------------------------------------------------------- shared */\n.theme-scope [data-arrangement] [data-slot=\"frame\"] {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  column-gap: var(--rb-skin-gutter, 1.5rem);\n  row-gap: var(--rb-skin-stack-gap, 2rem);\n  align-items: center;\n  position: relative;\n}\n.theme-scope [data-arrangement] [data-slot=\"frame\"] > * { grid-column: 1 / -1; min-width: 0; }\n.theme-scope [data-arrangement] [data-slot=\"copy\"] {\n  display: grid;\n  gap: var(--rb-skin-copy-gap, 1.25rem);\n  justify-items: start;\n  align-content: center;\n  min-width: 0;\n  text-align: start;\n}\n.theme-scope [data-arrangement] [data-slot=\"headline\"],\n.theme-scope [data-arrangement] [data-slot=\"lede\"],\n.theme-scope [data-arrangement] [data-slot=\"caption\"],\n.theme-scope [data-arrangement] [data-slot=\"eyebrow\"] { margin: 0; }\n.theme-scope [data-arrangement] [data-slot=\"lede\"] { max-width: 36em; }\n.theme-scope [data-arrangement] [data-slot=\"headline\"] { text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }\n.theme-scope [data-arrangement] [data-slot=\"actions\"] { margin-top: 0.5rem; justify-content: flex-start; flex-wrap: wrap; }\n.theme-scope [data-arrangement] [data-slot=\"media\"] { position: relative; margin: 0; min-width: 0; }\n.theme-scope [data-arrangement] [data-slot=\"media\"] [data-slot=\"photo\"] { display: block; width: 100%; height: 100%; object-fit: cover; }\n.theme-scope [data-arrangement] [data-slot=\"sticker\"] { margin: 0; justify-self: start; max-width: 18rem; position: relative; z-index: 2; }\n\n/* Published, no photo: the empty frame (and the sticker riding on it) goes. */\n.theme-scope [data-arrangement][data-has-photo=\"false\"] [data-slot=\"media\"]:not(:has([data-placeholder-field])) { display: none; }\n\n/* ---------------------------------------------------- hero: split */\n.theme-scope [data-arrangement=\"split\"] [data-slot=\"frame\"] { grid-auto-flow: dense; }\n.theme-scope [data-arrangement=\"split\"] [data-slot=\"copy\"] { grid-column: 1 / 7; grid-row: 1; }\n.theme-scope [data-arrangement=\"split\"] [data-slot=\"media\"] {\n  grid-column: 7 / 13; grid-row: 1; align-self: stretch;\n  min-height: 0; /* Arrangement panes omit the legacy inline height. */\n  border-radius: 0;\n  overflow: visible;\n  aspect-ratio: 4 / 5;\n}\n.theme-scope [data-arrangement=\"split\"] [data-slot=\"media\"] [data-slot=\"photo\"] { position: absolute; inset: 0; }\n.theme-scope [data-arrangement=\"split\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 7 / 13; }\n.theme-scope [data-arrangement=\"split\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 7; }\n.theme-scope [data-arrangement=\"split\"][data-has-photo=\"false\"] [data-slot=\"copy\"] { grid-column: 1 / 10; }\n\n/* ---------------------------------------------- hero: headline-row */\n.theme-scope [data-arrangement=\"headline-row\"] [data-slot=\"frame\"] { align-items: start; }\n.theme-scope [data-arrangement=\"headline-row\"] [data-slot=\"headline\"] { grid-column: 1 / -1; margin-bottom: clamp(1rem, 3cqi, 3.5rem); }\n.theme-scope [data-arrangement=\"headline-row\"] [data-slot=\"copy\"] { grid-column: 1 / 6; align-content: start; }\n.theme-scope [data-arrangement=\"headline-row\"] [data-slot=\"media\"] { grid-column: 7 / 13; aspect-ratio: 3 / 2; }\n.theme-scope [data-arrangement=\"headline-row\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 8 / 13; grid-row: 3; }\n.theme-scope [data-arrangement=\"headline-row\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 7; grid-row: 3; }\n.theme-scope [data-arrangement=\"headline-row\"][data-has-photo=\"false\"] [data-slot=\"copy\"] { grid-column: 1 / 9; }\n\n/* ----------------------------------------- hero: copy-over-gallery */\n.theme-scope [data-arrangement=\"copy-over-gallery\"] [data-slot=\"copy\"] { grid-column: 1 / 10; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"] [data-slot=\"gallery\"] {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: repeat(var(--rb-gallery-count, 1), minmax(0, 1fr));\n  gap: var(--rb-skin-gutter, 1.5rem);\n  margin-top: clamp(1.5rem, 4cqi, 4rem);\n}\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] { --rb-gallery-count: 2; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] { --rb-gallery-count: 3; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 16 / 7; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-photo-count=\"2\"] [data-slot=\"media\"],\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-photo-count=\"3\"] [data-slot=\"media\"] { aspect-ratio: 4 / 3; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-has-photo=\"false\"] [data-slot=\"gallery\"]:not(:has([data-placeholder-field])) { display: none; }\n\n/* --------------------------------------------------- hero: classic */\n.theme-scope [data-arrangement=\"classic\"][data-has-photo=\"true\"] [data-slot=\"copy\"] { min-height: 0; }\n.theme-scope [data-arrangement=\"classic\"] [data-slot=\"copy\"] {\n  max-width: min(40rem, 100%);\n  margin-inline: 0 auto;\n  justify-items: start;\n  text-align: start;\n}\n\n/* ------------------------------------------------- hero: page-head */\n.theme-scope [data-arrangement=\"page-head\"] [data-slot=\"copy\"] { grid-column: 1 / 10; }\n.theme-scope [data-arrangement=\"page-head\"] [data-slot=\"facts\"] {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--rb-skin-gutter, 1.5rem);\n  margin: 0;\n}\n\n/* Copy-column sticker (the photo-off sticker, if the node is added). */\n.theme-scope [data-arrangement] [data-slot=\"copy\"] > [data-slot=\"sticker\"] { margin-top: 0.5rem; }\n\n/* ===================================================== FEATURE CARDS */\n.theme-scope [data-arrangement] [data-slot=\"head\"] { display: grid; gap: 0.75rem; max-width: 44rem; margin-inline: 0 auto; justify-items: start; text-align: start; }\n.theme-scope [data-arrangement] [data-slot=\"head\"] > [data-slot=\"heading\"],\n.theme-scope [data-arrangement] [data-slot=\"head\"] > [data-slot=\"intro\"] { text-align: start; }\n/* Items that sit on the section ground carry no box of their own. */\n:where(.theme-scope [data-arrangement] [data-slot=\"item\"][data-surface=\"section\"]) { border: 0; background: none; box-shadow: none; border-radius: 0; }\n.theme-scope [data-arrangement] [data-slot=\"item\"][data-surface=\"section\"] > [data-slot=\"item-body\"] { padding-inline: 0; }\n.theme-scope [data-arrangement] [data-slot=\"heading\"],\n.theme-scope [data-arrangement] [data-slot=\"intro\"],\n.theme-scope [data-arrangement] [data-slot=\"eyebrow\"] { margin: 0; }\n.theme-scope [data-arrangement][data-knob-show-photos=\"false\"] [data-slot=\"item-media\"] { display: none; }\n.theme-scope [data-arrangement] [data-slot=\"item-title\"],\n.theme-scope [data-arrangement] [data-slot=\"item-text\"] { margin: 0; }\n\n/* lead-support: the lead takes a whole row; the rest share the next one, whatever their count. */\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"items\"] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: clamp(2rem, 4cqi, 3.5rem) var(--rb-skin-gutter, 1.5rem);\n  counter-reset: rb-feature-card-number;\n}\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"items\"] > [data-slot=\"item\"] { flex: 1 1 0; min-width: min(100%, 15rem); }\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] {\n  flex: 1 1 100%;\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  align-items: stretch;\n  column-gap: 0;\n}\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { grid-column: 1 / 8; min-height: 22rem; }\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { grid-column: 8 / 13; align-self: center; }\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] [data-slot=\"item-media\"] [data-slot=\"photo\"] { height: 100%; aspect-ratio: auto; }\n.theme-scope [data-arrangement=\"lead-support\"][data-knob-show-photos=\"false\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"],\n.theme-scope [data-arrangement=\"lead-support\"] [data-slot=\"lead\"]:not(:has(> [data-slot=\"item-media\"])) > [data-slot=\"item-body\"] { grid-column: 1 / -1; }\n\n/* index: one column of ruled rows; title left, text and actions right. */\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"items\"],\n.theme-scope [data-arrangement=\"sequence\"] [data-slot=\"items\"] { list-style: none; margin: 0; padding: 0; counter-reset: rb-feature-card-number; }\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"item\"] {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n  column-gap: var(--rb-skin-gutter, 1.5rem);\n  row-gap: 0.5rem;\n  align-items: baseline;\n  counter-increment: rb-feature-card-number;\n}\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"item\"] > * { grid-column: 2; }\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"item\"] > [data-slot=\"item-title\"] { grid-column: 1; grid-row: 1 / span 3; }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr); }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > * { grid-column: 3; }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > [data-slot=\"item-title\"] { grid-column: 2; }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > [data-slot=\"numeral\"] { grid-column: 1; grid-row: 1 / span 3; }\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"numeral\"] { display: none; }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"numeral\"] { display: block; }\n\n/* sequence: the steps. Default structure is a row; skins turn it into a rail or a staircase. */\n.theme-scope [data-arrangement=\"sequence\"] [data-slot=\"items\"] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));\n  gap: var(--rb-skin-gutter, 1.5rem);\n}\n.theme-scope [data-arrangement=\"sequence\"] [data-slot=\"item\"] { display: grid; gap: 0.625rem; align-content: start; counter-increment: rb-feature-card-number; }\n.theme-scope [data-arrangement=\"sequence\"] [data-slot=\"numeral\"] { display: block; }\n.theme-scope [data-arrangement=\"index\"] [data-slot=\"numeral\"]::before,\n.theme-scope [data-arrangement=\"sequence\"] [data-slot=\"numeral\"]::before { content: counter(rb-feature-card-number); }\n\n/* ===================================================== CALENDAR LIST */\n.theme-scope [data-arrangement][data-mode=\"list\"] [data-slot=\"list\"] { list-style: none; margin: 0; padding: 0; }\n.theme-scope :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: center; padding-block: 1.125rem; }\n.theme-scope [data-arrangement=\"ledger\"] [data-slot=\"row-continued\"] [data-slot=\"date\"] { visibility: hidden; }\n.theme-scope :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"date\"] { grid-column: 1; }\n.theme-scope :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"what\"] { grid-column: 2; }\n.theme-scope :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"action\"] { grid-column: 3; justify-self: end; }\n.theme-scope [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] { display: flex; flex-direction: column; line-height: 1.2; margin: 0; }\n.theme-scope [data-arrangement][data-mode=\"list\"] [data-slot=\"what\"] { min-width: 0; }\n.theme-scope [data-arrangement][data-mode=\"list\"] :is([data-slot=\"item-title\"], [data-slot=\"item-meta\"]) { margin: 0; }\n.theme-scope [data-arrangement=\"compact\"] [data-slot=\"panel\"] { margin-inline: 0 auto; }\n.theme-scope [data-arrangement=\"compact\"] [data-slot=\"row\"] { column-gap: 1rem; padding-block: 0.75rem; }\n.theme-scope [data-arrangement=\"compact\"] [data-slot=\"date\"] { flex-direction: row; gap: 0.375rem; align-items: baseline; }\n.theme-scope [data-arrangement=\"day-groups\"] [data-slot=\"group\"] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--rb-skin-gutter, 1.5rem); padding-block: 1.5rem 0.75rem; }\n.theme-scope [data-arrangement=\"day-groups\"] [data-slot=\"group-label\"] { grid-column: 1 / 4; display: flex; flex-direction: column; gap: 0.125rem; margin: 0; }\n.theme-scope [data-arrangement=\"day-groups\"] [data-slot=\"group\"] > * + * { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; }\n.theme-scope [data-arrangement=\"day-groups\"] [data-slot=\"row\"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: center; padding-block: 1rem; }\n.theme-scope [data-arrangement=\"day-groups\"] [data-slot=\"action\"] { grid-column: 2; }\n\n/* ============================================================ PHONE */\n/* Responsive rules qualify the root with :is(*, :scope): the preview container generator wraps them\n * in a scope rule, where a selector reaches the scope root only through :scope. */\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }\n  .theme-scope:is(*, :scope) [data-arrangement] [data-slot=\"frame\"] > *,\n  .theme-scope:is(*, :scope) [data-arrangement=\"split\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"split\"][data-knob-image-position=\"left\"] [data-slot=\"media\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"headline-row\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"headline-row\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / -1; grid-row: auto; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"split\"] [data-slot=\"media\"] { order: -1; aspect-ratio: 4 / 3; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"headline-row\"] [data-slot=\"headline\"] { margin-bottom: 0; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"] [data-slot=\"gallery\"] { grid-template-columns: minmax(0, 1fr); margin-top: 0.5rem; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 4 / 3; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"page-head\"] [data-slot=\"facts\"] { grid-template-columns: minmax(0, 1fr); }\n\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] { grid-template-columns: minmax(0, 1fr); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { grid-column: 1 / -1; min-height: 0; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-support\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { aspect-ratio: 3 / 2; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"] [data-slot=\"item\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] { grid-template-columns: minmax(0, 1fr); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"] [data-slot=\"item\"] > *,\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > * { grid-column: 1; grid-row: auto; }\n\n  .theme-scope:is(*, :scope) :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { grid-template-columns: 4rem minmax(0, 1fr); column-gap: 0.875rem; row-gap: 0.5rem; align-items: start; }\n  .theme-scope:is(*, :scope) :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"date\"] { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; }\n  .theme-scope:is(*, :scope) :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"what\"] { grid-column: 2; grid-row: 1; }\n  .theme-scope:is(*, :scope) :is([data-arrangement=\"ledger\"], [data-arrangement=\"compact\"]) [data-slot=\"action\"] { grid-column: 2; grid-row: 2; justify-self: start; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"group\"] { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"group-label\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"group\"] > * + * { grid-column: 1 / -1; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"group-label\"] { flex-direction: row; gap: 0.625rem; align-items: baseline; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"row\"] { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"] [data-slot=\"action\"] { grid-column: 1; justify-self: start; }\n}\n}\n\n/* Phase 1b: shared rail and quote structures */\n/* Responsive rules qualify the root with :is(*, :scope), like the Phase 1a rules above. */\n\n.theme-scope [data-arrangement] [data-slot=\"layout\"] {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  column-gap: var(--rb-skin-gutter, 1.5rem);\n  row-gap: 0;\n  align-items: start;\n}\n.theme-scope [data-arrangement] [data-slot=\"layout\"] > * { grid-column: span var(--rb-skin-main, 12) / -1; min-width: 0; }\n.theme-scope [data-arrangement] [data-slot=\"layout\"] > [data-slot=\"head\"] { grid-column: 1 / span var(--rb-skin-rail, 12); }\n\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"copy\"] { grid-column: 2; grid-row: 1; justify-items: center; text-align: center; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"2\"] [data-slot=\"gallery\"],\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] { display: contents; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 3 / 4; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(1),\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(1) { grid-column: 1; grid-row: 1; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(2),\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(2) { grid-column: 3; grid-row: 1; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(3) { display: none; }\n\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"frame\"],\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"0\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr); }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] { grid-column: 2; grid-row: 2; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 16 / 9; }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-has-photo=\"false\"] [data-slot=\"gallery\"]:not(:has([data-placeholder-field])) { display: none; }\n\n.theme-scope [data-arrangement] [data-slot=\"items\"] > [data-slot=\"lead\"],\n.theme-scope [data-arrangement=\"lead-rest\"] [data-slot=\"item\"],\n.theme-scope [data-arrangement=\"columns\"] [data-slot=\"item\"],\n.theme-scope [data-arrangement=\"slides\"] [data-slot=\"item\"],\n.theme-scope [data-arrangement=\"track\"] [data-slot=\"item\"] { margin: 0; display: grid; gap: 16px; align-content: start; min-width: 0; }\n.theme-scope [data-arrangement] [data-slot=\"quote\"] { margin: 0; }\n.theme-scope [data-arrangement] [data-slot=\"quote\"] > * { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }\n.theme-scope [data-arrangement] [data-slot=\"attribution\"] { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }\n\n.theme-scope [data-arrangement=\"lead-rest\"] [data-slot=\"items\"] {\n  list-style: none; margin: 0; padding: 0;\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 64px var(--rb-skin-gutter, 1.5rem);\n}\n.theme-scope [data-arrangement=\"lead-rest\"] [data-slot=\"items\"] > [data-slot=\"lead\"] { grid-column: 1 / -1; }\n.theme-scope [data-arrangement=\"lead-rest\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n\n.theme-scope [data-arrangement=\"columns\"] [data-slot=\"items\"] {\n  list-style: none; margin: 0; padding: 0;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 40px var(--rb-skin-gutter, 1.5rem);\n}\n\n.theme-scope [data-arrangement=\"single\"] [data-slot=\"items\"] { list-style: none; margin: 0; padding: 0; max-width: 56rem; }\n\n.theme-scope :is([data-arrangement=\"slides\"], [data-arrangement=\"track\"]) [data-slot=\"items\"] { margin: 0; padding: 0; display: flex; }\n.theme-scope :is([data-arrangement=\"slides\"], [data-arrangement=\"track\"]) [data-slot=\"items\"] > * { flex: 0 0 calc(100% / var(--rb-carousel-slides-to-show, 1)); min-width: 0; padding-right: var(--rb-skin-gutter, 1.5rem); }\n.theme-scope [data-arrangement=\"slides\"] [data-slot=\"items\"] > [data-current=\"false\"] { visibility: hidden; }\n\n.theme-scope [data-arrangement] [data-slot=\"controls\"] { display: flex; align-items: center; gap: 14px; margin-top: 32px; }\n.theme-scope [data-arrangement] [data-slot=\"controls\"] [data-slot=\"control\"] { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer; }\n.theme-scope [data-arrangement] [data-slot=\"control\"]:disabled { cursor: default; }\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement] [data-slot=\"layout\"] { grid-template-columns: minmax(0, 1fr); row-gap: 0; }\n  .theme-scope:is(*, :scope) [data-arrangement] [data-slot=\"layout\"] > *,\n  .theme-scope:is(*, :scope) [data-arrangement] [data-slot=\"layout\"] > [data-slot=\"head\"] { grid-column: 1 / -1; }\n\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"frame\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"frame\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"0\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"copy\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] { grid-column: 1; grid-row: auto; }\n\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(2),\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(2) { display: none; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(1),\n  .theme-scope:is(*, :scope) [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(1) { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }\n\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-rest\"] [data-slot=\"items\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"lead-rest\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); gap: 28px; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"track\"] [data-slot=\"items\"] > * { flex-basis: 84%; }\n}\n}\n\n.theme-scope [data-arrangement] .rb-container { max-width: var(--rb-skin-wrap, 1280px); padding-inline: clamp(20px, 4cqi, var(--rb-skin-margin, 40px)); }\n.theme-scope [data-arrangement=\"copy-over-gallery\"][data-treat=\"arch-frame\"] [data-slot=\"frame\"] { display: grid; gap: var(--rb-skin-gutter, 1.5rem); }\n\n.theme-scope [data-arrangement=\"month-grid\"] [data-slot=\"grid\"],\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"grid\"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }\n.theme-scope [data-arrangement=\"month-day\"][data-slot=\"frame\"],\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"frame\"] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--rb-skin-gutter, 1.5rem); }\n.theme-scope [data-arrangement=\"month-grid\"] [data-slot=\"date\"] { display: grid; align-content: start; min-height: 6rem; }\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"list\"] { display: grid; gap: 1rem; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"month-day\"][data-slot=\"frame\"], .theme-scope:is(*, :scope) [data-arrangement=\"month-day\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); }\n}\n}\n\n.theme-scope [data-arrangement] [data-slot=\"control\"] { color: var(--rb-surface-text-color, rgb(var(--tb-text))); background: transparent; border: 1px solid var(--rb-surface-mark-color, currentcolor); }\n.theme-scope [data-arrangement] [data-slot=\"control\"]:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; }\n.theme-scope [data-arrangement=\"month-grid\"] [data-slot=\"control\"],\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"control\"] { min-height: 44px; min-width: 0; width: 100%; }\n\n.theme-scope [data-arrangement=\"columns\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:only-child) { grid-template-columns: minmax(0, 1fr); }\n.theme-scope [data-arrangement=\"columns\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"columns\"] [data-slot=\"items\"],\n  .theme-scope:is(*, :scope) [data-arrangement=\"columns\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }\n}\n}\n\n.theme-scope :is([data-arrangement=\"month-grid\"], [data-arrangement=\"month-day\"]) [data-other-month=\"true\"] :is([data-slot=\"date-label\"], [data-slot=\"control\"]) { color: var(--rb-surface-supporting-color); }\n\n/* Named event parts share the ordinary item foregrounds and action language. */\n.theme-scope .rb-item-text-link { color: var(--rb-surface-link-color); text-decoration: underline; text-decoration-color: var(--rb-surface-mark-color); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }\n.theme-scope [data-arrangement] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 2rem; font-weight: 800; }\n.theme-scope [data-arrangement] [data-slot=\"item-text\"] { margin-block: 0.5rem 0; }\n.theme-scope [data-arrangement=\"grid\"] [data-slot=\"item-body\"] { padding: 1.5rem; }\n.theme-scope [data-arrangement=\"grid\"] [data-slot=\"item-actions\"] { margin-top: 1rem; }\n\n/* Item bodies fill the card so their actions share a bottom baseline. */\n.theme-scope [data-arrangement=\"grid\"] [data-slot=\"item\"] { display: flex; flex-direction: column; }\n.theme-scope [data-arrangement] :is([data-slot=\"item\"], [data-slot=\"lead\"]) > [data-slot=\"item-body\"] { display: flex; flex-direction: column; flex: 1; }\n.theme-scope [data-arrangement] [data-slot=\"item-body\"] > [data-slot=\"item-actions\"] { margin-top: auto; padding-top: 1rem; }\n/* A lone link-like action sits flush with the text; a filled button keeps its own box. The first\n * rule is the frozen legacy form (no arrangement around it), at its original specificity. */\n.theme-scope :is([data-slot=\"item-actions\"], [data-slot=\"action\"], .rb-feature-card .cta-row):not(:where([data-arrangement] *)) :is(a, button):only-child { padding: 0; min-height: 0; }\n.theme-scope [data-arrangement] :is([data-slot=\"item-actions\"], [data-slot=\"action\"], .cta-row) :is(a, button):only-child:not(.button-primary, .button-secondary) { padding: 0; min-height: 0; }\n.theme-scope [data-arrangement] [data-slot=\"more\"] { grid-column: 1 / -1; }\n/* Capacity decoration is attached only to the places phrase. */\n.theme-scope [data-arrangement] :is([data-availability=\"low\"], [data-availability=\"full\"]) [data-event-places]::before { content: \"\"; display: inline-block; width: 0.4em; height: 0.4em; margin-right: 0.45em; border-radius: 50%; vertical-align: 0.1em; }\n.theme-scope [data-arrangement] [data-availability=\"low\"] [data-event-places]::before { background: var(--rb-surface-mark-color); }\n.theme-scope [data-arrangement] [data-availability=\"full\"] [data-event-places]::before { background: var(--rb-surface-muted-color); }\n/* Compact date rails keep their own line at every width. */\n.theme-scope [data-arrangement=\"compact\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { grid-template-columns: max-content minmax(0, 1fr) auto; }\n.theme-scope [data-arrangement=\"compact\"] [data-slot=\"date\"] { flex-direction: row; flex-wrap: nowrap; white-space: nowrap; }\n@container rb-site (max-width: 639px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"compact\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { grid-template-columns: minmax(0, 1fr) auto; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"compact\"] [data-slot=\"date\"] { grid-column: 1 / -1; grid-row: 1; flex-direction: row; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"compact\"] [data-slot=\"what\"] { grid-column: 1; grid-row: 2; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"compact\"] [data-slot=\"action\"] { grid-column: 2; grid-row: 2; }\n}\n}\n\n/* The live card lists use the same arrangements and semantic parts. */\n/* auto-fill keeps a short group (one or two offerings) at the width of a full row card. */\n.theme-scope [data-arrangement=\"cards\"] [data-card-list] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--rb-skin-gutter, 1.5rem); }\n.theme-scope [data-arrangement] [data-card-list-item] { min-width: 0; }\n.theme-scope [data-arrangement=\"cards\"] [data-card-list-item] { display: flex; flex-direction: column; }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"item-body\"] { display: flex; flex: 1; flex-direction: column; gap: var(--rb-skin-copy-gap, 0.75rem); padding: var(--rb-skin-gutter, 1.5rem); }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"photo\"] { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"facts\"] { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0; }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"facts\"] dt { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.75em; }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"facts\"] dd { margin: 0; }\n.theme-scope [data-arrangement] [data-slot=\"chips\"] { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n.theme-scope [data-arrangement] [data-slot=\"figure\"] { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }\n/* Scoped to card-list items so the event header (and each skin) sizes its own figure. */\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"figure\"] strong { font-size: clamp(2rem, 5cqi, 4rem); line-height: 1; }\n.theme-scope [data-arrangement] :is([data-slot=\"schedule\"], [data-slot=\"availability\"]) { margin: 0; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"item-actions\"] { margin-top: auto; }\n.theme-scope [data-arrangement=\"index\"] [data-card-list-item] > :is([data-slot=\"chips\"], [data-slot=\"figure\"], [data-slot=\"facts\"], [data-slot=\"schedule\"], [data-slot=\"availability\"]) { grid-column: 2; }\n.theme-scope [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-card-list-item] > :is([data-slot=\"chips\"], [data-slot=\"figure\"], [data-slot=\"facts\"], [data-slot=\"schedule\"], [data-slot=\"availability\"]) { grid-column: 3; }\n.theme-scope [data-arrangement=\"plates\"] [data-card-list] { display: grid; gap: 3rem; }\n.theme-scope [data-arrangement=\"plates\"] [data-card-list-item] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--rb-skin-gutter, 1.5rem); align-items: center; }\n.theme-scope [data-arrangement=\"plates\"] [data-slot=\"item-media\"] { position: relative; isolation: isolate; margin: var(--rb-skin-plate, 1rem); }\n.theme-scope [data-arrangement=\"plates\"] [data-slot=\"item-media\"]::before { content: \"\"; position: absolute; inset: 0; translate: calc(-1 * var(--rb-skin-plate, 1rem)) var(--rb-skin-plate, 1rem); background: var(--rb-surface-mark-color); z-index: -1; }\n.theme-scope [data-arrangement=\"plates\"] [data-card-list-item]:not(:has([data-slot=\"item-media\"])) [data-slot=\"item-body\"],\n.theme-scope [data-arrangement=\"plates\"][data-knob-show-photos=\"false\"] [data-slot=\"item-body\"] { grid-column: 1 / -1; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"plates\"] [data-card-list-item] { grid-template-columns: minmax(0, 1fr); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"] [data-card-list-item] > *,\n  .theme-scope:is(*, :scope) [data-arrangement=\"index\"][data-knob-card-marker=\"numbers\"] [data-card-list-item] > * { grid-column: 1; }\n}\n}\n.theme-scope [data-arrangement=\"cards\"] [data-card-list] { counter-reset: rb-feature-card-number; }\n.theme-scope [data-arrangement=\"cards\"] [data-card-list-item] { counter-increment: rb-feature-card-number; }\n.theme-scope [data-arrangement] [data-card-list-item] [data-slot=\"numeral\"] { display: none; }\n.theme-scope [data-arrangement][data-knob-card-marker=\"numbers\"] [data-card-list-item] [data-slot=\"numeral\"] { display: block; }\n.theme-scope [data-arrangement=\"cards\"][data-knob-card-marker=\"numbers\"] [data-card-list-item] [data-slot=\"numeral\"]::before { content: counter(rb-feature-card-number); }\n\n/* Live event header and quiet logistics panel. */\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"frame\"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5cqi, 5rem); align-items: center; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"copy\"] { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"headline\"] { font-size: clamp(2.5rem, 7cqi, 6rem); line-height: 1.05; overflow-wrap: anywhere; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"lede\"] { max-width: 56ch; font-size: clamp(1.125rem, 2cqi, 1.5rem); }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"figure\"] { display: flex; flex-direction: column; align-items: center; margin: 0; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"figure-value\"] { font-size: clamp(5rem, 18cqi, 16rem); line-height: 0.85; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"panel\"] { margin-top: 3rem; padding-top: 2rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n.theme-scope [data-arrangement=\"details-panel\"] [data-slot=\"panel\"] { padding: clamp(1.5rem, 4cqi, 3rem); border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 0); }\n.theme-scope [data-arrangement=\"details-panel\"] [data-slot=\"panel-heading\"] { margin-bottom: 1.5rem; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"event-header\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .theme-scope:is(*, :scope) [data-arrangement=\"event-header\"] [data-slot=\"figure\"] { align-items: flex-start; }\n}\n}\n\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"fact-label\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.875rem; margin-bottom: 0.375rem; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"fact-value\"] { margin: 0; font-weight: 600; }\n\n/* Grouped catalogues: the block heading sits on the same edge as its groups, and each group\n * heading reads one step below it. */\n.theme-scope [data-arrangement] [data-slot=\"stack\"] > :is([data-slot=\"heading\"], [data-slot=\"intro\"]) { text-align: var(--rb-skin-head-align, start); }\n.theme-scope [data-arrangement] [data-offering-source] > [data-slot=\"head\"] [data-slot=\"heading\"] { font-size: var(--rb-skin-group-heading-size, clamp(1.375rem, 2.2cqi, 1.875rem)); line-height: 1.15; }\n\n/* Event header: the header runs the full container (the block own reading width is for the\n * details below it), the copy takes the first column and the data-fed numeral stands beside it. */\n.theme-scope [data-arrangement=\"event-header\"] [data-block=\"event-details\"] { max-width: none; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"frame\"] > [data-slot=\"copy\"] { grid-column: 1; grid-row: 1; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"frame\"] > [data-slot=\"figure\"] { grid-column: 2; grid-row: 1; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"panel\"] { max-width: 56rem; }\n.theme-scope [data-arrangement=\"event-header\"] [data-slot=\"copy\"] > :is([data-slot=\"lede\"], [data-slot=\"facts\"]) { max-width: 52rem; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"event-header\"] [data-slot=\"frame\"] > :is([data-slot=\"copy\"], [data-slot=\"figure\"]) { grid-column: 1; grid-row: auto; }\n}\n}\n\n/* Month frames place the grid and chosen day in separate columns. */\n.theme-scope [data-arrangement=\"month-day\"][data-slot=\"frame\"] > *,\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"frame\"] > * { grid-column: auto; }\n\n/* Independent live time and places parts stay in their own columns. */\n.theme-scope [data-arrangement=\"ledger\"][data-mode=\"list\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { grid-template-columns: var(--rb-event-date-width, 7rem) minmax(0, 1fr) minmax(6rem, auto) minmax(5rem, auto) auto; }\n.theme-scope [data-arrangement=\"ledger\"][data-mode=\"list\"] [data-slot=\"time\"] { grid-column: 3; }\n.theme-scope [data-arrangement=\"ledger\"][data-mode=\"list\"] [data-slot=\"places\"] { grid-column: 4; }\n.theme-scope [data-arrangement=\"ledger\"][data-mode=\"list\"] [data-slot=\"action\"] { grid-column: 5; }\n.theme-scope [data-arrangement=\"day-groups\"][data-mode=\"list\"] [data-slot=\"row\"] { grid-template-columns: minmax(0, 1fr) minmax(6rem, auto) minmax(5rem, auto) auto; }\n.theme-scope [data-arrangement=\"day-groups\"][data-mode=\"list\"] [data-slot=\"time\"] { grid-column: 2; }\n.theme-scope [data-arrangement=\"day-groups\"][data-mode=\"list\"] [data-slot=\"places\"] { grid-column: 3; }\n.theme-scope [data-arrangement=\"day-groups\"][data-mode=\"list\"] [data-slot=\"action\"] { grid-column: 4; }\n.theme-scope [data-arrangement][data-mode=\"list\"] :is([data-slot=\"time\"], [data-slot=\"places\"], [data-slot=\"price\"]) { margin: 0; }\n@container rb-site (max-width: 1023px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"ledger\"][data-mode=\"list\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.5rem 0.875rem; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"ledger\"][data-mode=\"list\"] :is([data-slot=\"time\"], [data-slot=\"places\"], [data-slot=\"action\"]) { grid-column: 2; grid-row: auto; justify-self: start; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"][data-mode=\"list\"] [data-slot=\"row\"] { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }\n  .theme-scope:is(*, :scope) [data-arrangement=\"day-groups\"][data-mode=\"list\"] :is([data-slot=\"time\"], [data-slot=\"places\"], [data-slot=\"action\"]) { grid-column: 1; grid-row: auto; justify-self: start; }\n}\n}\n\n/* Calendar numbers and marks have one geometry in both month Looks. */\n.theme-scope :is([data-arrangement=\"month-grid\"], [data-arrangement=\"month-day\"]) [data-slot=\"date\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; margin: 0; box-shadow: none; }\n.theme-scope :is([data-arrangement=\"month-grid\"], [data-arrangement=\"month-day\"]) [data-slot=\"date\"][data-today=\"true\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) { box-shadow: inset 0 0 0 1px var(--rb-surface-text-color); }\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"date\"][data-current=\"true\"] [data-slot=\"control\"] { font-weight: 800; text-decoration: underline; text-underline-offset: 0.25em; }\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"date\"] [data-slot=\"item-meta\"] { display: flex; gap: 0.25rem; justify-content: center; width: 2.75rem; min-height: 0.5rem; margin: 0.25rem 0 0; }\n.theme-scope [data-arrangement=\"month-day\"] [data-slot=\"mark\"] { width: 5px; height: 5px; border-radius: 50%; background: var(--rb-surface-mark-color); }\n\n/* Empty arrangement lists stay on their section ground, without a legacy box. */\n.theme-scope [data-arrangement] [data-event-list-empty] { display: grid; justify-items: start; gap: 0.75rem; padding-block: 1.5rem; text-align: start; }\n.theme-scope [data-arrangement] [data-event-list-empty] p { margin: 0; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n.theme-scope [data-arrangement] [data-event-list-empty] [data-slot=\"action\"] { margin: 0; padding: 0; border: 0; background: none; color: var(--rb-surface-text-color); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }\n.theme-scope [data-arrangement] [data-event-list-empty] [data-slot=\"action\"] button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: inherit; cursor: pointer; }\n\n/* ---------------------------------------------------- image gallery: tiles */\n.theme-scope [data-arrangement=\"tiles\"]:not(:has([data-slot=\"heading\"], [data-slot=\"intro\"], [data-slot=\"photo\"], [data-placeholder-field])) { display: none; }\n.theme-scope [data-arrangement=\"tiles\"] [data-slot=\"items\"] {\n  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--rb-skin-gallery-gap, 1.5rem); list-style: none; padding: 0;\n  margin: 0 auto; max-width: 64rem;\n}\n.theme-scope [data-arrangement=\"tiles\"] [data-slot=\"item\"] { min-width: 0; margin: 0; }\n.theme-scope [data-arrangement=\"tiles\"] [data-slot=\"figure\"] { display: grid; gap: 0; align-items: stretch; min-width: 0; margin: 0; }\n.theme-scope [data-arrangement=\"tiles\"] [data-slot=\"media\"] { aspect-ratio: 1; overflow: hidden; }\n.theme-scope [data-arrangement=\"tiles\"] [data-slot=\"photo\"] { width: 100%; height: 100%; object-fit: cover; }\n.theme-scope [data-arrangement=\"tiles\"] [data-slot=\"item\"]:not(:has([data-slot=\"photo\"], [data-placeholder-field])),\n.theme-scope [data-arrangement=\"tiles\"] [data-slot=\"items\"]:not(:has([data-slot=\"photo\"], [data-placeholder-field])) { display: none; }\n.theme-scope [data-arrangement=\"tiles\"] [data-slot=\"head\"]:not(:has(*)) { display: none; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n.theme-scope:is(*, :scope) [data-arrangement=\"tiles\"] [data-slot=\"items\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n}\n\n/* Bounded style skins (issue 1575, D14): one stylesheet per arrangement style, keyed on data-skin. */\n\n/* =============================================================================\n * Fulcrum skin (issue 1575 Phase 1a, D14).\n *\n * Calm and editorial: Newsreader does the talking at weight 400, hairlines\n * stand in for boxes, and the boldness sits in one place, the offset plate\n * photos are mounted on. Five marks only: the lintel (a short accent bar on a\n * heading edge), the start mark (a hairline with an accent segment where\n * reading begins), the offset plate, the hung numeral and sentence case\n * throughout.\n *\n * Bounded skin: only the shared hooks and slots, colours only from tokens and\n * resolved-surface variables, measurements from --rb-skin-* tokens. Surfaces\n * are never chosen here; the plate flips where the section ground is the\n * brand band, because a brand plate would vanish on it.\n * ============================================================================= */\n\n[data-skin=\"fulcrum\"] {\n  --tt-eyebrow: none;\n  --ls-eyebrow: 0;\n  --fw-eyebrow: 500;\n  --fs-eyebrow: 0.9375rem;\n}\n\n/* The plate: brand tone on page grounds; the deepest tone, offset up-left, on the brand band. */\n[data-skin=\"fulcrum\"] [data-arrangement] {\n  --fulcrum-plate: var(--rb-skin-plate, 16px);\n  --fulcrum-plate-x: var(--fulcrum-plate);\n  --fulcrum-plate-colour: rgb(var(--tb-secondary));\n}\n/* The start mark reads the mark colour of the slot it is drawn on, so it is defined there:\n * the surface variables are set on the section and its slots, not on the block root. */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot] {\n  --fulcrum-start: linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) 0 0 / var(--rb-skin-mark-length, 44px) var(--rb-skin-mark-weight, 2px) no-repeat;\n}\n[data-skin=\"fulcrum\"] [data-arrangement][data-surface=\"secondary\"],\n[data-skin=\"fulcrum\"] [data-arrangement] [data-surface=\"secondary\"] {\n  --fulcrum-plate-x: calc(var(--fulcrum-plate) * -1);\n  --fulcrum-plate-colour: rgb(var(--tb-primary-900));\n}\n\n/* ------------------------------------------------------------ section air */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: clamp(4rem, 8cqi, 7rem); }\n[data-skin=\"fulcrum\"] [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: clamp(3.5rem, 7cqi, 6.5rem); }\n\n/* ------------------------------------------------------------ type */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"headline\"],\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"heading\"],\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"item-title\"],\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"panel-heading\"],\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"group-label\"] {\n  font-family: var(--font-heading);\n  font-weight: 400;\n  color: var(--rb-surface-heading-color);\n  text-wrap: balance;\n}\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"headline\"] { line-height: 1.02; letter-spacing: -0.022em; }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"eyebrow\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"lede\"] {\n  font-size: clamp(1.0625rem, 1.4cqi, 1.25rem);\n  line-height: 1.6;\n  color: var(--rb-surface-muted-color, var(--rb-surface-text-color));\n  max-width: 34em;\n}\n\n/* Headline steps: length (short, medium, long) x headline size (Quieter, Standard). */\n[data-skin=\"fulcrum\"] [data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 5.2cqi, 4.75rem); }\n[data-skin=\"fulcrum\"] [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.5rem, 4.2cqi, 3.75rem); }\n[data-skin=\"fulcrum\"] [data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(2.25rem, 4.4cqi, 4rem); }\n[data-skin=\"fulcrum\"] [data-length=\"medium\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.125rem, 3.6cqi, 3.25rem); }\n[data-skin=\"fulcrum\"] [data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(2rem, 3cqi, 2.75rem); line-height: 1.1; }\n/* The big headline row runs a step louder. */\n[data-skin=\"fulcrum\"] [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3rem, 6.6cqi, 6rem); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 5.2cqi, 4.75rem); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"headline-row\"][data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(2.5rem, 5.2cqi, 4.75rem); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"headline-row\"] [data-slot=\"headline\"] { max-width: 13em; }\n\n/* The lintel: a short accent bar on the heading own edge. */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"copy\"]::before,\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"head\"]::before,\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"frame\"] > [data-slot=\"eyebrow\"]:first-child::before {\n  content: \"\";\n  display: block;\n  width: 36px;\n  height: var(--rb-skin-mark-weight, 2px);\n  background: var(--rb-surface-mark-color);\n}\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"frame\"] > [data-slot=\"eyebrow\"]:first-child::before { margin-bottom: 1rem; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"headline-row\"] [data-slot=\"copy\"]::before { content: none; }\n\n/* The start mark on a sheet: drawn over the sheet own top edge, since a sheet paints its own ground. */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"sticker\"]::before,\n[data-skin=\"fulcrum\"] [data-treat=\"panel\"] [data-slot=\"copy\"]::before,\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"panel\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--rb-skin-mark-length, 44px);\n  height: var(--rb-skin-mark-weight, 2px);\n  background: var(--rb-surface-mark-color);\n}\n\n/* The sticker: a sheet with a start mark, set in italic serif. */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"sticker\"] {\n  display: block;\n  padding: 0.875rem 1.125rem 0.875rem 1.25rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  font-family: var(--font-heading);\n  font-style: italic;\n  font-size: 1.3125rem;\n  line-height: 1.2;\n}\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"caption\"] {\n  font-family: var(--font-heading);\n  font-style: italic;\n  font-size: 1.1875rem;\n  color: var(--rb-surface-muted-color, var(--rb-surface-text-color));\n}\n\n/* ================================================================== HERO */\n/* split \u00B7 plate: the photo sits on an offset plate in the brand tone. */\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"] [data-slot=\"frame\"] { column-gap: var(--rb-skin-gutter, 28px); align-items: center; }\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"] [data-slot=\"copy\"] { grid-column: 1 / 7; }\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"] [data-slot=\"media\"] {\n  grid-column: 8 / 13;\n  aspect-ratio: 4 / 4.6;\n  margin: 0 var(--fulcrum-plate) var(--fulcrum-plate) 0;\n  box-shadow: var(--fulcrum-plate-x) var(--fulcrum-plate-x) 0 var(--fulcrum-plate-colour);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 6; }\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 7 / 13; }\n[data-skin=\"fulcrum\"] [data-treat=\"plate\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: -2.5rem; bottom: 3rem; max-width: 16rem; }\n\n/* headline-row \u00B7 quiet: the headline alone on top, then text left and a plated photo right. */\n[data-skin=\"fulcrum\"] [data-treat=\"quiet\"] [data-slot=\"frame\"] { row-gap: 2.5rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"quiet\"] [data-slot=\"copy\"] { grid-column: 1 / 6; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-top: 1.75rem; background: var(--fulcrum-start); }\n[data-skin=\"fulcrum\"] [data-treat=\"quiet\"] [data-slot=\"media\"] {\n  grid-column: 7 / 13;\n  margin-right: var(--fulcrum-plate);\n  box-shadow: var(--fulcrum-plate-x) var(--fulcrum-plate-x) 0 var(--fulcrum-plate-colour);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"quiet\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: -1.25rem; top: -1.75rem; }\n\n/* copy-over-gallery \u00B7 plates: the title, then the photos on plates in a row. */\n[data-skin=\"fulcrum\"] [data-treat=\"plates\"] [data-slot=\"copy\"] { grid-column: 1 / 9; }\n[data-skin=\"fulcrum\"] [data-treat=\"plates\"] [data-slot=\"gallery\"] { column-gap: calc(var(--rb-skin-gutter, 28px) + var(--fulcrum-plate)); margin-right: var(--fulcrum-plate); }\n[data-skin=\"fulcrum\"] [data-treat=\"plates\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { box-shadow: var(--fulcrum-plate-x) var(--fulcrum-plate-x) 0 var(--fulcrum-plate-colour); }\n[data-skin=\"fulcrum\"] [data-treat=\"plates\"] [data-slot=\"gallery\"] [data-slot=\"sticker\"] { position: absolute; left: 2rem; bottom: -1.5rem; }\n\n/* classic \u00B7 panel: the photo fills the section; the copy sits on a sheet low on the left. */\n[data-skin=\"fulcrum\"] [data-treat=\"panel\"] [data-slot=\"section\"] { --rb-section-pad-y: clamp(3rem, 7cqi, 5.5rem); padding-top: clamp(9rem, 16cqi, 12.5rem); }\n[data-skin=\"fulcrum\"] [data-treat=\"panel\"] [data-slot=\"copy\"] {\n  position: relative;\n  max-width: min(36rem, 100%);\n  padding: clamp(2rem, 3.4cqi, 3rem);\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"panel\"] [data-slot=\"headline\"] { font-size: clamp(2.25rem, 3.6cqi, 3.5rem); }\n[data-skin=\"fulcrum\"] [data-treat=\"panel\"][data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(1.875rem, 2.6cqi, 2.5rem); }\n\n/* page-head \u00B7 ruled: no photo; the title over a hairline that runs the measure. */\n[data-skin=\"fulcrum\"] [data-treat=\"ruled\"] [data-slot=\"copy\"] {\n  grid-column: 1 / -1;\n  padding-bottom: 2.5rem;\n  border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"ruled\"] [data-slot=\"copy\"] > * { max-width: 46rem; }\n\n/* ========================================================== FEATURE CARDS */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"head\"] { gap: 0.875rem; margin-bottom: clamp(2.5rem, 4.4cqi, 4rem); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"heading\"] { font-size: clamp(2rem, 3.4cqi, 3.125rem); line-height: 1.06; letter-spacing: -0.018em; }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"intro\"] { font-size: 1.1875rem; line-height: 1.6; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"item-title\"] { font-size: 1.625rem; line-height: 1.18; letter-spacing: -0.008em; }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"item-text\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"item-body\"] { display: grid; gap: 0.75rem; align-content: start; }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"icon\"] { color: var(--rb-surface-text-color); }\n\n/* cards \u00B7 cards: quiet sheets with a hairline edge. */\n[data-skin=\"fulcrum\"] [data-treat=\"cards\"] [data-slot=\"item\"] {\n  border: var(--rb-skin-rule, 1px) solid rgb(var(--tb-border));\n  border-radius: var(--rb-skin-radius, 3px);\n  overflow: hidden;\n  box-shadow: none;\n}\n[data-skin=\"fulcrum\"] [data-treat=\"cards\"] [data-slot=\"item-body\"] { padding: 1.75rem 1.75rem 1.625rem; }\n\n/* cards \u00B7 open: no boxes; each column starts with a start mark. */\n[data-skin=\"fulcrum\"] [data-treat=\"open\"] [data-slot=\"items\"] { row-gap: 3.5rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"open\"] [data-slot=\"item\"] { background: none; box-shadow: none; border: 0; }\n[data-skin=\"fulcrum\"] [data-treat=\"open\"] [data-slot=\"item-media\"] { margin-bottom: 1.375rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"open\"] [data-slot=\"item-body\"] {\n  padding: 1.5rem 0 0;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  background: var(--fulcrum-start);\n}\n\n/* lead-support \u00B7 pathway: a wide photo joined to the statement card, then open columns. */\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"lead\"] { border-radius: var(--rb-skin-radius, 3px); overflow: hidden; margin-bottom: clamp(2rem, 4cqi, 3rem); }\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { align-self: stretch; justify-content: center; padding: clamp(2rem, 4cqi, 3.5rem) clamp(1.75rem, 3.6cqi, 3.25rem); gap: 1.125rem; }\n/* The lead statement reads top to bottom with its action straight after the text, as in the mockup. */\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] > [data-slot=\"item-actions\"] { margin-top: 0.5rem; padding-top: 0; }\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"lead\"] [data-slot=\"item-title\"] { font-size: clamp(1.875rem, 2.8cqi, 2.375rem); line-height: 1.08; }\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"item\"] [data-slot=\"item-media\"] { margin-bottom: 1.25rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"pathway\"] [data-slot=\"item\"] > [data-slot=\"item-body\"] {\n  padding-top: 1.5rem;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  background: var(--fulcrum-start);\n}\n\n/* index \u00B7 register: a ruled list, the situation left and the answer right. */\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] [data-slot=\"items\"] { border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] [data-slot=\"item\"] { padding-block: 2rem 2.125rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] [data-slot=\"item-title\"] { font-size: 1.75rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] [data-slot=\"numeral\"] { font-family: var(--font-heading); font-weight: 300; font-size: 44px; line-height: 0.9; color: var(--rb-surface-mark-color); }\n\n/* sequence \u00B7 rail-steps: the heading in a rail, numbered steps ruled beside it. */\n/* The shared 12-column section layout takes the rail and main spans from these two tokens. */\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"],\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] { --rb-skin-rail: 4; --rb-skin-main: 8; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"head\"],\n[data-skin=\"fulcrum\"] [data-treat=\"register\"] [data-slot=\"head\"] { margin-bottom: 0; padding-right: 2rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 1fr); gap: 0; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"item\"] {\n  grid-template-columns: 4.5rem minmax(0, 1fr);\n  column-gap: 1.5rem;\n  row-gap: 0.625rem;\n  padding-block: 2rem;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"item\"]:last-child { border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"item\"] > * { grid-column: 2; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"item\"] > [data-slot=\"numeral\"] {\n  grid-column: 1;\n  grid-row: 1 / span 4;\n  font-family: var(--font-heading);\n  font-weight: 300;\n  font-size: 56px;\n  line-height: 0.9;\n  color: var(--rb-surface-mark-color);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"rail-steps\"] [data-slot=\"item-media\"] { display: none; }\n\n/* ============================================================== CALENDAR */\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"day\"],\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"group-date\"] { font-family: var(--font-heading); font-weight: 400; font-size: 1.5625rem; line-height: 1.1; }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]),\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"time-length\"],\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"item-meta\"] { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"time-start\"] { font-weight: 500; font-variant-numeric: tabular-nums; }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"item-title\"] { font-size: 1.375rem; line-height: 1.2; }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"places\"],\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"places-low\"],\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"places-full\"] { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"places-low\"] { color: var(--rb-surface-text-color); font-weight: 500; }\n\n/* ledger \u00B7 card: the session ledger inside a quiet sheet. */\n/* The Look container role paints the sheet; rows inherit its ink. */\n[data-skin=\"fulcrum\"] [data-treat=\"card\"][data-mode=\"list\"] [data-slot=\"list\"] {\n  padding: 0.25rem 2.25rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"card\"] [data-slot=\"row\"],\n[data-skin=\"fulcrum\"] [data-treat=\"card\"] [data-slot=\"row-continued\"] { border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"card\"] [data-slot=\"list\"] > :first-child { border-top: 0; }\n\n/* day-groups \u00B7 rail: the day in the rail, sessions ruled beside it. */\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"][data-mode=\"list\"] [data-slot=\"list\"] { border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"group\"] { border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-block: 1.75rem 1rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"group-label\"] { font-size: 1.75rem; line-height: 1.15; }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"group-day\"] { font-family: var(--font-heading); }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"group-date\"] { font-family: var(--font-body); font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"row\"] + [data-slot=\"row\"] { border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"rail\"] [data-slot=\"row\"] { padding-block: 0.875rem; }\n\n/* compact: the next three in a sheet with a start mark. */\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"panel\"] {\n  position: relative;\n  max-width: 52rem;\n  padding: 1.5rem 1.75rem 1.25rem;\n  border: var(--rb-skin-rule, 1px) solid rgb(var(--tb-border));\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-family: var(--font-body); font-size: 1rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"item-title\"] { font-size: 1.3125rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"panel-heading\"] { font-style: italic; font-size: 1.375rem; line-height: 1.2; margin: 0 0 0.75rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"compact\"] [data-slot=\"row\"] { padding-block: 0.875rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n\n/* month-grid \u00B7 sheet: the month in a quiet sheet, ruled between days. */\n[data-skin=\"fulcrum\"] [data-treat=\"sheet\"] [data-slot=\"grid\"] {\n  gap: 0;\n  padding: 1.5rem 1.5rem 1.25rem;\n  border: var(--rb-skin-rule, 1px) solid rgb(var(--tb-border));\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"sheet\"] [data-slot=\"group-label\"] { padding: 0 0.5rem 0.75rem; font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-treat=\"sheet\"] [data-slot=\"date\"] { gap: 0.25rem; min-height: 6.25rem; padding: 0.5rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] :is([data-treat=\"sheet\"], [data-treat=\"ruled\"]) :is([data-slot=\"control\"], [data-slot=\"date-label\"]) {\n  justify-self: start;\n  width: 2.25rem;\n  height: 2.25rem;\n  min-height: 0;\n  border: 0;\n  border-radius: var(--rb-skin-radius, 3px);\n  font-family: var(--font-heading);\n  font-size: 1.125rem;\n}\n\n[data-skin=\"fulcrum\"] [data-treat=\"sheet\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: block; font-size: 0.875rem; line-height: 1.3; color: var(--rb-surface-text-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"sheet\"] [data-slot=\"date\"] [data-slot=\"time\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-variant-numeric: tabular-nums; }\n\n/* month-day \u00B7 ruled: a small ruled month beside the chosen day. */\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"grid\"] { gap: 0; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"group-label\"] { padding: 0.625rem 0 0.375rem; text-align: center; font-size: 0.875rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"date\"] { justify-items: center; padding: 0.25rem 0; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"date\"] [data-slot=\"item-meta\"] { font-size: 0.75rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"panel\"] { padding-top: 1.375rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); background: var(--fulcrum-start); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"panel-heading\"] { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; margin: 0 0 0.75rem; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"month-day\"] [data-slot=\"panel\"] [data-slot=\"row\"] { display: block; padding-block: 0.75rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n\n/* ========================================================== TESTIMONIALS */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"quote\"] { font-family: var(--font-heading); color: var(--rb-surface-heading-color); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"attribution\"] { gap: 0.125rem 0.75rem; font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"] { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--rb-surface-text-color); }\n\n/* lead-rest, single and slides \u00B7 hung: the quote mark hangs outside the text edge. */\n[data-skin=\"fulcrum\"] [data-treat=\"hung\"] :is([data-slot=\"lead\"], [data-slot=\"item\"]) > [data-slot=\"quote\"] { position: relative; }\n[data-skin=\"fulcrum\"] [data-treat=\"hung\"] :is([data-slot=\"lead\"], [data-slot=\"item\"]) > [data-slot=\"quote\"]::before { content: \"\\201C\"; position: absolute; right: 100%; top: -0.05em; margin-right: 0.12em; font-size: 64px; line-height: 1; color: var(--rb-surface-mark-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"hung\"] [data-slot=\"lead\"],\n[data-skin=\"fulcrum\"] [data-arrangement=\"single\"][data-treat=\"hung\"] [data-slot=\"item\"],\n[data-skin=\"fulcrum\"] [data-arrangement=\"slides\"][data-treat=\"hung\"] [data-slot=\"item\"] { max-width: 55rem; gap: 1.5rem; }\n[data-skin=\"fulcrum\"] [data-treat=\"hung\"] [data-slot=\"lead\"] > [data-slot=\"quote\"],\n[data-skin=\"fulcrum\"] [data-arrangement=\"single\"][data-treat=\"hung\"] [data-slot=\"quote\"],\n[data-skin=\"fulcrum\"] [data-arrangement=\"slides\"][data-treat=\"hung\"] [data-slot=\"quote\"] { font-size: clamp(1.625rem, 2.9cqi, 2.5rem); line-height: 1.24; letter-spacing: -0.012em; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] { row-gap: 4.5rem; column-gap: 3rem; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] > [data-slot=\"item\"] { padding-right: 2rem; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] > [data-slot=\"item\"] > [data-slot=\"quote\"] { font-size: 1.375rem; line-height: 1.4; }\n\n/* columns \u00B7 cases: quiet sheets with a start mark over the top edge. The scroll row matches any item in\n * the list, since the carousel wraps each card in a slide once hydrated. */\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"cases\"] [data-slot=\"item\"],\n[data-skin=\"fulcrum\"] [data-arrangement=\"track\"][data-treat=\"cards\"] [data-slot=\"items\"] [data-slot=\"item\"] {\n  position: relative;\n  padding: 2.25rem 2.125rem 2rem;\n  border: var(--rb-skin-rule, 1px) solid rgb(var(--tb-border));\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"cases\"] [data-slot=\"item\"]::before,\n[data-skin=\"fulcrum\"] [data-arrangement=\"track\"][data-treat=\"cards\"] [data-slot=\"items\"] [data-slot=\"item\"]::before {\n  content: \"\";\n  position: absolute;\n  left: -1px;\n  top: -1px;\n  width: 56px;\n  height: var(--rb-skin-mark-weight, 2px);\n  background: var(--rb-surface-mark-color);\n}\n[data-skin=\"fulcrum\"] [data-treat=\"cases\"] [data-slot=\"quote\"] { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--rb-surface-text-color); }\n[data-skin=\"fulcrum\"] [data-treat=\"cases\"] [data-slot=\"attribution\"] { margin-top: auto; padding-top: 1.125rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"track\"][data-treat=\"cards\"] [data-slot=\"quote\"] { font-size: 1.3125rem; line-height: 1.4; }\n\n/* columns \u00B7 ruled: the head in a rail, the quotes in one ruled column beside it. */\n[data-skin=\"fulcrum\"] [data-arrangement=\"columns\"][data-treat=\"ruled\"] { --rb-skin-rail: 4; --rb-skin-main: 8; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"columns\"][data-treat=\"ruled\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"columns\"][data-treat=\"ruled\"] [data-slot=\"item\"] { padding-block: 1.875rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); background: var(--fulcrum-start); }\n[data-skin=\"fulcrum\"] [data-arrangement=\"columns\"][data-treat=\"ruled\"] [data-slot=\"quote\"] { font-size: 1.4375rem; line-height: 1.38; }\n\n/* The quote arrows: square-cornered, hairline, the label in the text colour. */\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"controls\"] [data-slot=\"control\"] { border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 3px); color: var(--rb-surface-text-color); }\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"counter\"] { font-variant-numeric: tabular-nums; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* ================================================================= PHONE */\n/* Phone headline steps fit the longest word each length allows in a 358px column: short (12 characters,\n * measured on wide words like \"Commonwealth\") at 40px, medium (18) at 34px; long titles wrap. */\n/* Phone rules qualify the root with :is(*, :scope): the preview container generator wraps them in a\n * scope rule, where a selector reaches the scope root only through :scope. */\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement] { --fulcrum-plate: 10px; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: 3.5rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: 2.5rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-length=\"short\"] [data-slot=\"headline\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"short\"] [data-slot=\"headline\"] { font-size: 2.5rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: 2.25rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-length=\"medium\"] [data-slot=\"headline\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"medium\"] [data-slot=\"headline\"] { font-size: 2.125rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-length=\"long\"] [data-slot=\"headline\"] { font-size: 1.875rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat] [data-slot=\"copy\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat] [data-slot=\"media\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"plate\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"plate\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / -1; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"plate\"] [data-slot=\"media\"] { aspect-ratio: 4 / 3.4; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: auto; right: 0.75rem; top: auto; bottom: 0.75rem; margin-top: 0; max-width: min(18rem, calc(100% - 1.5rem)); }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"panel\"] [data-slot=\"section\"] { padding-top: 13rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"panel\"] [data-slot=\"copy\"] { padding: 1.75rem 1.375rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement] [data-slot=\"item-title\"] { font-size: 1.5rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"cards\"] [data-slot=\"item-body\"] { padding: 1.5rem 1.375rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"pathway\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { padding: 2rem 1.625rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"rail-steps\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"register\"] { --rb-skin-rail: 12; --rb-skin-main: 12; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"rail-steps\"] [data-slot=\"head\"],\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"register\"] [data-slot=\"head\"] { margin-bottom: 2rem; padding-right: 0; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"rail-steps\"] [data-slot=\"item\"] { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"rail-steps\"] [data-slot=\"item\"] > [data-slot=\"numeral\"] { font-size: 40px; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"card\"][data-mode=\"list\"] [data-slot=\"list\"] { padding: 0 1.125rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"compact\"] [data-slot=\"panel\"] { padding: 1.5rem 1.25rem 1.25rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"hung\"] :is([data-slot=\"lead\"], [data-slot=\"item\"]) > [data-slot=\"quote\"]::before { position: static; display: block; height: 0.6em; margin: 0 0 -0.05em; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] { row-gap: 2.75rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] > [data-slot=\"item\"] { padding-right: 0; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-arrangement=\"columns\"][data-treat=\"ruled\"] { --rb-skin-rail: 12; --rb-skin-main: 12; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"sheet\"] [data-slot=\"grid\"] { padding: 1rem 0.75rem; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"sheet\"] [data-slot=\"date\"] { min-height: 3.25rem; padding: 0.25rem 0; border: 0; justify-items: center; }\n  [data-skin=\"fulcrum\"]:is(*, :scope) [data-treat=\"sheet\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: none; }\n}\n}\n\n[data-skin=\"fulcrum\"] [data-arrangement] [data-slot=\"attribution\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n[data-skin=\"fulcrum\"] [data-arrangement] :is([data-slot=\"lede\"], [data-slot=\"intro\"], [data-slot=\"item-meta\"], [data-slot=\"attribution\"]) { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* Event date parts are written as entered, with no text-transform. */\n[data-skin=\"fulcrum\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] { text-transform: none; }\n\n[data-skin=\"fulcrum\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] :is([data-slot=\"weekday\"], [data-slot=\"day\"], [data-slot=\"month\"]) { text-transform: none; }\n\n/* Catalogue facts are a quiet ruled register beside the plate. */\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"facts\"] { border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-block: 0.75rem; }\n[data-skin=\"fulcrum\"] [data-slot=\"chip\"] { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }\n[data-skin=\"fulcrum\"] [data-slot=\"figure-value\"] { font-family: var(--font-heading); }\n/* type-plates: landscape sheets two to a row, a small plated photo beside the title, the facts in\n * ruled columns, and a text link to finish. */\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: var(--rb-skin-gutter, 28px); }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] {\n  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);\n  align-items: start;\n  gap: 0 1.5rem;\n  padding: 1.25rem 1.5rem 1.25rem 1.25rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: var(--rb-skin-radius, 3px);\n}\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-media\"] { margin: 0 var(--fulcrum-plate-small) var(--fulcrum-plate-small) 0; --fulcrum-plate-small: 10px; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-media\"]::before { translate: var(--fulcrum-plate-small) var(--fulcrum-plate-small); background: var(--fulcrum-plate-colour); }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"photo\"] { aspect-ratio: 4 / 5; height: 100%; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-body\"] { padding: 0.25rem 0 0; gap: 0.625rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-title\"] { font-size: 1.5rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-text\"] { margin: 0; font-size: 0.9375rem; line-height: 1.55; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"facts\"] { display: flex; flex-wrap: nowrap; gap: 0; margin-top: 0.375rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"facts\"] > * { flex: 1 1 auto; padding: 0 0.75rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"facts\"] > :first-child { padding-left: 0; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"facts\"] > * + * { border-left: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"facts\"] [data-slot=\"fact-value\"] { font-family: var(--font-heading); font-size: 1.1875rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] :is([data-slot=\"schedule\"], [data-slot=\"availability\"]) { font-size: 0.875rem; }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"type-plates\"] [data-card-list-item] [data-slot=\"item-actions\"] { margin-top: auto; padding-top: 0.5rem; }\n\n/* A clear heading over a ruled at-a-glance strip. */\n[data-skin=\"fulcrum\"] [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-top: 1.5rem; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"event-header\"] [data-slot=\"headline\"] { font-weight: 400; letter-spacing: -0.04em; }\n[data-skin=\"fulcrum\"] [data-arrangement=\"event-header\"] [data-slot=\"figure-value\"] { font-weight: 300; font-size: clamp(6rem, 18cqi, 16rem); }\n\n/* Ruled rows and next three: the weekday leads in the serif, the date sits small beneath it,\n * as in the mockup ledger (\"Thu\" over \"1 Oct\"). */\n[data-skin=\"fulcrum\"] [data-arrangement]:is([data-treat=\"card\"], [data-treat=\"compact\"])[data-mode=\"list\"] [data-slot=\"date\"] { display: flex; flex-flow: row wrap; align-content: start; column-gap: 0.3em; row-gap: 0.125rem; }\n[data-skin=\"fulcrum\"] [data-arrangement]:is([data-treat=\"card\"], [data-treat=\"compact\"])[data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"weekday\"] { flex-basis: 100%; font-family: var(--font-heading); font-size: 1.5625rem; line-height: 1.1; color: var(--rb-surface-heading-color); }\n[data-skin=\"fulcrum\"] [data-arrangement]:is([data-treat=\"card\"], [data-treat=\"compact\"])[data-mode=\"list\"] [data-slot=\"date\"] :is([data-slot=\"day\"], [data-slot=\"month\"]) { font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; line-height: 1.3; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"compact\"][data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"weekday\"] { font-size: 1.25rem; }\n/* The compact panel carries the heading inside its sheet, so the section head has no lintel of its own. */\n[data-skin=\"fulcrum\"] [data-arrangement][data-treat=\"compact\"] [data-slot=\"head\"]::before { content: none; }\n\n/* Hung quotes: the smaller quotes beside the lead each start on a hairline with a start mark. */\n[data-skin=\"fulcrum\"] [data-arrangement=\"lead-rest\"][data-treat=\"hung\"] [data-slot=\"items\"] > [data-slot=\"item\"] { padding-top: 1.5rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); background: var(--fulcrum-start); }\n\n/* Live next dates use the same card parts in every arrangement. */\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"dates\"] { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; padding-block: 0.625rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); font-variant-numeric: tabular-nums; }\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"date-places\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.875rem; }\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"navigation\"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; padding-block: 0.875rem; margin-bottom: 1rem; border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"fulcrum\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { font: inherit; color: var(--rb-surface-text-color); padding: 0.5rem 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 0); }\n\n[data-skin=\"fulcrum\"] [data-mode=\"list\"] [data-slot=\"time\"] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-surface-text-color); }\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { font-family: var(--font-heading); font-size: 1.125rem; }\n[data-skin=\"fulcrum\"] [data-card-list-item] [data-slot=\"date-places\"] { font-family: var(--font-body); }\n\n/* =============================================================================\n * Poster skin (issue 1575 Phase 1a, D14).\n *\n * Loud but controlled: very large condensed type, flat colour blocks, and hard\n * offset shadows on anything you can press or pick. One fact is set huge (a\n * date, a time, a step number); one sticker carries the news. Photos are\n * graphic material: greyscale, multiplied over a palette colour.\n *\n * Bounded skin: only the shared hooks and slots, colours only from tokens and\n * resolved-surface variables, measurements from --rb-skin-* tokens. Boxes\n * drawn around items that sit on the section ground are edges and shadows\n * only; they never paint a ground of their own.\n * ============================================================================= */\n\n[data-skin=\"poster\"] {\n  --tt-eyebrow: none;\n  --ls-eyebrow: 0;\n  --fw-eyebrow: 700;\n  --fs-eyebrow: 0.9375rem;\n}\n\n/* The hard shadow: the ground ink on light grounds, the deep brand tone on the brand block, the brand on the inverse slab. */\n[data-skin=\"poster\"] [data-arrangement] > [data-slot=\"section\"] {\n  --poster-shadow: var(--rb-surface-text-color);\n  --poster-rule: var(--rb-skin-rule, 3px) solid var(--rb-surface-text-color);\n  --poster-edge: 2px solid var(--rb-surface-text-color);\n  --poster-lift: var(--rb-skin-shadow-offset, 8px);\n  --rb-section-pad-y: clamp(4rem, 8cqi, 7rem);\n}\n[data-skin=\"poster\"] [data-arrangement][data-surface=\"primary\"] > [data-slot=\"section\"] { --poster-shadow: rgb(var(--tb-secondary)); }\n[data-skin=\"poster\"] [data-arrangement][data-surface=\"text\"] > [data-slot=\"section\"] { --poster-shadow: rgb(var(--tb-primary)); }\n[data-skin=\"poster\"] [data-arrangement][data-length] > [data-slot=\"section\"] { --rb-section-pad-y: clamp(2.5rem, 5cqi, 4.5rem); overflow-x: clip; }\n\n/* ------------------------------------------------------------ type */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"headline\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"heading\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-title\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"panel-heading\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"group-label\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"numeral\"],\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"time-start\"] {\n  font-family: var(--font-heading);\n  font-stretch: var(--font-stretch-heading, normal);\n  font-weight: 900;\n  letter-spacing: -0.005em;\n  color: var(--rb-surface-heading-color);\n  font-variant-numeric: lining-nums;\n}\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"headline\"] { line-height: 0.86; text-wrap: balance; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"eyebrow\"] { color: var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"lede\"] { font-size: clamp(1.125rem, 1.5cqi, 1.3125rem); line-height: 1.45; max-width: 36em; }\n\n/* Headline steps: length (short, medium, long) x headline size (Quieter, Standard, Louder). */\n[data-skin=\"poster\"] [data-length=\"short\"][data-knob-headline=\"display\"] [data-slot=\"headline\"] { font-size: clamp(4rem, 9cqi, 8.75rem); }\n[data-skin=\"poster\"] [data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3.5rem, 7cqi, 6.5rem); }\n[data-skin=\"poster\"] [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(3rem, 5.4cqi, 5rem); }\n[data-skin=\"poster\"] [data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3rem, 5.6cqi, 5.25rem); }\n[data-skin=\"poster\"] [data-length=\"medium\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 4.6cqi, 4.25rem); }\n[data-skin=\"poster\"] [data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(2.5rem, 3.6cqi, 3.5rem); line-height: 0.92; }\n/* The poster headline: one line across the measure. */\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"display\"] [data-slot=\"headline\"] { font-size: clamp(4.5rem, 14cqi, 13.75rem); }\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(4rem, 10.5cqi, 10rem); }\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(3.5rem, 7.5cqi, 7rem); }\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3.5rem, 8cqi, 7.5rem); }\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"medium\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(3rem, 6cqi, 5.5rem); }\n[data-skin=\"poster\"] [data-arrangement=\"headline-row\"][data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 4.6cqi, 4.25rem); }\n\n/* The sticker: the one piece of news, tilted, with its own edge and shadow. */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"sticker\"] {\n  display: inline-block;\n  padding: 0.6875rem 1rem 0.625rem;\n  border: var(--poster-edge);\n  box-shadow: 4px 4px 0 var(--poster-shadow);\n  transform: rotate(var(--rb-skin-rotation, -4deg));\n  font-family: var(--font-heading);\n  font-weight: 900;\n  font-size: 1.375rem;\n  line-height: 1;\n}\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"caption\"] { font-weight: 700; font-size: 0.9375rem; }\n\n/* Working display registers from the Archivo mockup. */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-title\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"panel-heading\"] { font-stretch: 75%; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"sticker\"] { font-stretch: 70%; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"actions\"] > *,\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"action\"] > * { font-stretch: 85%; }\n\n/* Duotone: photos are greyscale with a palette colour multiplied over them (the pop colour in the hero, the brand elsewhere). */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"media\"],\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-media\"] { position: relative; --poster-tone: rgb(var(--tb-primary)); }\n\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"photo\"] { filter: grayscale(1) contrast(1.18) brightness(1.04); }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"media\"]:has([data-slot=\"photo\"])::after,\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-media\"]:has([data-slot=\"photo\"])::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n  background: var(--poster-tone);\n  mix-blend-mode: multiply;\n  clip-path: var(--poster-cut, none);\n}\n\n[data-skin=\"poster\"] [data-arrangement][data-length] [data-slot=\"media\"]:has([data-slot=\"photo\"])::after,\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"lead\"] > [data-slot=\"item-media\"]:has([data-slot=\"photo\"])::after { background: rgb(var(--tb-accent)); }\n\n/* ================================================================== HERO */\n/* headline-row \u00B7 slab: one huge line, copy left, the photo cut into a slab that bleeds off the right edge. */\n[data-skin=\"poster\"] [data-treat=\"slab\"] [data-slot=\"frame\"] { row-gap: 0; align-items: stretch; }\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-arrangement=\"headline-row\"] [data-slot=\"headline\"] { margin: 0 0 2.75rem -0.04em; max-width: none; }\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-arrangement=\"headline-row\"] [data-slot=\"copy\"] { grid-column: 1 / 6; align-content: start; padding-bottom: 2.5rem; }\n/* The cut is applied to the photo and its tone, never the frame, so a sticker can ride over the slanted edge. */\n[data-skin=\"poster\"] [data-treat=\"slab\"] [data-slot=\"media\"] {\n  --poster-cut: polygon(14% 0, 100% 0, 100% 100%, 0 100%);\n  grid-column: 7 / -1;\n  min-height: 28rem;\n  aspect-ratio: auto;\n  margin-right: calc((100cqi - min(100cqi, 80rem)) / -2 - 1.5rem);\n}\n[data-skin=\"poster\"] [data-treat=\"slab\"] [data-slot=\"media\"] [data-slot=\"photo\"] { position: absolute; inset: 0; clip-path: var(--poster-cut); }\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-arrangement=\"split\"] [data-slot=\"copy\"] { grid-column: 1 / 7; padding-block: 1rem; }\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-arrangement=\"split\"] [data-slot=\"media\"] { min-height: 35rem; }\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] {\n  --poster-cut: polygon(0 0, 100% 0, 86% 100%, 0 100%);\n  grid-column: 1 / 6;\n  margin-right: 0;\n  margin-left: calc((100cqi - min(100cqi, 80rem)) / -2 - 1.5rem);\n}\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-knob-image-position=\"left\"][data-arrangement=\"headline-row\"] [data-slot=\"copy\"],\n[data-skin=\"poster\"] [data-treat=\"slab\"][data-knob-image-position=\"left\"][data-arrangement=\"split\"] [data-slot=\"copy\"] { grid-column: 7 / -1; }\n[data-skin=\"poster\"] [data-treat=\"slab\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: 3%; top: 42%; }\n\n/* copy-over-gallery \u00B7 strip: the title, then the photos as one edge-to-edge strip between heavy rules. */\n[data-skin=\"poster\"] [data-treat=\"strip\"] [data-slot=\"copy\"] { grid-column: 1 / 10; }\n[data-skin=\"poster\"] [data-treat=\"strip\"] [data-slot=\"gallery\"] {\n  gap: 0;\n  margin-inline: calc((100cqi - min(100cqi, 80rem)) / -2 - 1.5rem);\n  border-block: var(--poster-rule);\n}\n[data-skin=\"poster\"] [data-treat=\"strip\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: auto; height: clamp(16rem, 30cqi, 26rem); }\n[data-skin=\"poster\"] [data-treat=\"strip\"] [data-slot=\"gallery\"] [data-slot=\"photo\"] { position: absolute; inset: 0; }\n[data-skin=\"poster\"] [data-treat=\"strip\"] [data-slot=\"gallery\"] [data-slot=\"sticker\"] { position: absolute; top: -1.75rem; right: 12%; }\n\n/* classic \u00B7 band: the photo fills the section; the copy sits on a block that runs to the edge. */\n[data-skin=\"poster\"] [data-treat=\"band\"] > [data-slot=\"section\"] { padding-top: clamp(14rem, 26cqi, 22rem); }\n[data-skin=\"poster\"] [data-treat=\"band\"] [data-slot=\"copy\"] {\n  max-width: min(46rem, 100%);\n  padding: clamp(1.75rem, 3cqi, 2.75rem) clamp(1.75rem, 3cqi, 2.75rem) clamp(2rem, 3.4cqi, 3rem);\n  border: var(--poster-edge);\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n}\n\n/* page-head \u00B7 numeral: no photo; with no facts to set huge, the title takes the measure over a heavy rule. */\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"copy\"] {\n  grid-column: 1 / -1;\n  padding-bottom: 2.5rem;\n  border-bottom: var(--poster-rule);\n}\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"copy\"] > [data-slot=\"lede\"] { max-width: 40em; }\n\n/* ========================================================= SECTION HEADS */\n/* Heading left, intro right, on a shared baseline. */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"head\"] {\n  max-width: none;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  column-gap: var(--rb-skin-gutter, 24px);\n  align-items: end;\n  margin-bottom: clamp(2.25rem, 4cqi, 3.5rem);\n}\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"head\"] > [data-slot=\"eyebrow\"] { grid-column: 1 / -1; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"head\"] > [data-slot=\"intro\"] { grid-column: 2; padding-bottom: 0.375rem; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"heading\"] { font-size: clamp(3rem, 6.2cqi, 6rem); line-height: 0.9; text-wrap: balance; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"intro\"] { font-size: clamp(1.0625rem, 1.4cqi, 1.25rem); line-height: 1.45; }\n\n/* ========================================================== FEATURE CARDS */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-title\"] { font-size: clamp(1.875rem, 2.6cqi, 2.5rem); line-height: 0.92; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"item-body\"] { display: grid; gap: 0.75rem; align-content: start; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"numeral\"] { font-size: 96px; line-height: 0.8; color: var(--rb-surface-mark-color); }\n\n/* cards \u00B7 punchy: boxed cards with a hard shadow. */\n[data-skin=\"poster\"] [data-treat=\"punchy\"] [data-slot=\"items\"] { gap: 2rem; }\n[data-skin=\"poster\"] [data-treat=\"punchy\"] [data-slot=\"item\"],\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"items\"] > [data-slot=\"item\"] {\n  border: var(--poster-edge);\n  border-radius: 0;\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n}\n[data-skin=\"poster\"] [data-treat=\"punchy\"] [data-slot=\"item-media\"],\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"items\"] > [data-slot=\"item\"] > [data-slot=\"item-media\"] { border-bottom: 2px solid var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-treat=\"punchy\"] [data-slot=\"item-body\"],\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"items\"] > [data-slot=\"item\"] > [data-slot=\"item-body\"] { padding: 1.5rem 1.625rem; }\n\n/* cards \u00B7 open-heavy: no boxes and no photos; an 8px rule tops each column, and the number is the visual. */\n[data-skin=\"poster\"] [data-treat=\"open-heavy\"] [data-slot=\"item-media\"] { display: none; }\n[data-skin=\"poster\"] [data-treat=\"open-heavy\"] [data-slot=\"item-body\"] { padding-top: 1.125rem; border-top: 8px solid var(--rb-surface-text-color); gap: 0.875rem; }\n[data-skin=\"poster\"] [data-treat=\"open-heavy\"] [data-slot=\"numeral\"] { font-size: clamp(96px, 9cqi, 150px); }\n\n/* lead-support \u00B7 duotone-lead: the lead on the brand block with a slanted photo, the rest as boxed cards. */\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] {\n  border: var(--poster-edge);\n  box-shadow: 10px 10px 0 var(--poster-shadow);\n  margin-bottom: 1rem;\n}\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { min-height: 26rem; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { align-self: stretch; align-content: start; padding: 2.5rem 2.5rem 2.25rem 0.75rem; gap: 1rem; }\n[data-skin=\"poster\"] [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] [data-slot=\"item-title\"] { font-size: clamp(2.75rem, 4.6cqi, 4.5rem); }\n\n/* index \u00B7 loud: heavy rules between rows and display titles. */\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"items\"] { border-bottom: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"item\"] { padding-block: 1.375rem; border-top: var(--poster-rule); align-items: center; }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"item-title\"] { font-size: clamp(2.125rem, 3.4cqi, 3rem); }\n\n/* sequence \u00B7 stairs: boxed steps that climb from left to right. */\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"items\"] { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 1.25rem; align-items: end; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"items\"] > [data-slot=\"item\"] {\n  padding: 1.25rem 1.25rem 1.375rem;\n  border: var(--poster-edge);\n  box-shadow: 6px 6px 0 var(--poster-shadow);\n  align-content: start;\n}\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(1) { min-height: 18rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(2) { min-height: 21rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(3) { min-height: 24rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(4) { min-height: 27rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(5) { min-height: 30rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(6) { min-height: 33rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item-title\"] { font-size: 1.75rem; }\n[data-skin=\"poster\"] [data-treat=\"stairs\"] [data-slot=\"item-media\"] { display: none; }\n\n/* ============================================================== CALENDAR */\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"item-title\"] { font-size: 1.625rem; line-height: 1; }\n[data-skin=\"poster\"] [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]),\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"group-date\"] { font-weight: 700; font-size: 0.9375rem; line-height: 1.15; }\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"time-length\"],\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"item-meta\"] { font-size: 0.9375rem; }\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"places\"],\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"places-low\"],\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"places-full\"] { font-size: 0.875rem; font-weight: 700; }\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"places-low\"],\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"places-full\"] { justify-self: start; padding: 0.375rem 0.6875rem 0.3125rem; border: var(--poster-edge); border-radius: 99px; }\n\n/* ledger \u00B7 loud: a heavy rule starts each day; the date and time are set huge. */\n[data-skin=\"poster\"] [data-treat=\"loud\"][data-mode=\"list\"] [data-slot=\"list\"] { border-bottom: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"row\"],\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"row-continued\"] { grid-template-columns: 10.5rem minmax(0, 1fr) auto; column-gap: 2rem; padding-block: 1.25rem; }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"row\"] { border-top: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"row-continued\"] { border-top: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"date\"] { flex-direction: row; align-items: flex-end; gap: 0.75rem; }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 72px; line-height: 0.8; color: var(--rb-surface-mark-color); }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"item-title\"] { font-size: 1.625rem; line-height: 1.05; }\n[data-skin=\"poster\"] [data-treat=\"loud\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]) { width: 3.2em; }\n[data-skin=\"poster\"] [data-treat=\"loud\"] [data-slot=\"time-start\"] { font-size: 46px; line-height: 1; }\n\n/* day-groups \u00B7 numeral: the day set big in the rail. */\n[data-skin=\"poster\"] [data-treat=\"numeral\"][data-mode=\"list\"] [data-slot=\"list\"] { border-bottom: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"group\"] { border-top: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"group-label\"] { font-size: 52px; line-height: 0.9; }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"group-day\"] { font-family: var(--font-heading); font-stretch: var(--font-stretch-heading, normal); }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"group-date\"] { font-family: var(--font-body); }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"row\"] + [data-slot=\"row\"] { border-top: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"poster\"] [data-treat=\"numeral\"] [data-slot=\"time-start\"] { font-size: 34px; line-height: 1; }\n\n/* grid \u00B7 tiles: boxed session cards topped by a date tile in the pop colour. */\n[data-skin=\"poster\"] [data-treat=\"tiles\"] [data-slot=\"list\"] { gap: 2rem; }\n[data-skin=\"poster\"] [data-treat=\"tiles\"] [data-slot=\"item\"] {\n  border: var(--poster-edge);\n  border-radius: 0;\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n  overflow: visible;\n}\n[data-skin=\"poster\"] [data-treat=\"tiles\"] [data-slot=\"date\"] {\n  flex-direction: row;\n  align-items: flex-end;\n  gap: 0.625rem;\n  padding: 1.25rem 1.5rem 1rem;\n  border-bottom: var(--poster-edge);\n}\n[data-skin=\"poster\"] [data-treat=\"tiles\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 96px; line-height: 0.8; color: var(--rb-surface-heading-color); }\n[data-skin=\"poster\"] [data-treat=\"tiles\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]) { font-weight: 800; font-size: 1.125rem; }\n/* The tile reads like the mockup: the big day first, month and weekday stacked beside it. */\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"tiles\"] [data-slot=\"item\"] [data-slot=\"date\"] { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: end; justify-items: start; column-gap: 0.625rem; row-gap: 0; text-align: start; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"tiles\"] [data-slot=\"item\"] [data-slot=\"date\"] [data-slot=\"day\"] { grid-column: 1; grid-row: 1 / span 2; font-size: 64px; line-height: 0.85; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"tiles\"] [data-slot=\"item\"] [data-slot=\"date\"] [data-slot=\"month\"] { grid-column: 2; grid-row: 1; align-self: end; line-height: 1.1; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"tiles\"] [data-slot=\"item\"] [data-slot=\"date\"] [data-slot=\"weekday\"] { grid-column: 2; grid-row: 2; align-self: start; line-height: 1.1; }\n\n/* compact: the next three in a boxed panel with heavy rules. */\n[data-skin=\"poster\"] [data-treat=\"compact\"] [data-slot=\"panel\"] {\n  max-width: 52rem;\n  padding: 1.5rem 1.75rem 1.25rem;\n  border: var(--poster-edge);\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n}\n[data-skin=\"poster\"] [data-treat=\"compact\"] [data-slot=\"panel-heading\"] { font-size: 36px; line-height: 0.9; margin: 0 0 0.75rem; }\n[data-skin=\"poster\"] [data-treat=\"compact\"] [data-slot=\"row\"] { border-top: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"compact\"] [data-slot=\"time-start\"] { font-size: 30px; }\n[data-skin=\"poster\"] [data-treat=\"compact\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--rb-surface-text-color); }\n\n/* month-grid \u00B7 heavy: a heavy rule over the week names, soft hairlines between days, today ringed hard. */\n[data-skin=\"poster\"] [data-treat=\"heavy\"] [data-slot=\"grid\"] { gap: 0; border-top: var(--poster-rule); border-left: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"poster\"] [data-treat=\"heavy\"] [data-slot=\"group-label\"] { padding: 0.625rem 0.5rem; font-weight: 800; font-size: 0.9375rem; border-right: 1px solid var(--rb-surface-line-color); border-bottom: var(--poster-rule); }\n[data-skin=\"poster\"] [data-treat=\"heavy\"] [data-slot=\"date\"] { gap: 0.25rem; min-height: 6.5rem; padding: 0.5rem; border-right: 1px solid var(--rb-surface-line-color); border-bottom: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"poster\"] [data-treat=\"heavy\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) {\n  justify-self: start;\n  width: auto;\n  min-width: 2.5rem;\n  height: 2.5rem;\n  min-height: 0;\n  padding: 0 0.25rem;\n  border: 0;\n  border-radius: 0;\n  font-family: var(--font-heading);\n  font-stretch: 62%;\n  font-weight: 900;\n  font-size: 30px;\n  line-height: 0.9;\n}\n\n[data-skin=\"poster\"] [data-treat=\"heavy\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: block; font-size: 0.875rem; line-height: 1.25; font-weight: 600; color: var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-treat=\"heavy\"] [data-slot=\"date\"] [data-slot=\"time\"] { font-stretch: 75%; font-weight: 900; }\n\n/* ========================================================== TESTIMONIALS */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"quote\"] { font-weight: 500; color: var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"attribution\"] { gap: 0.125rem 0.625rem; font-size: 0.96875rem; }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"] { font-family: var(--font-body); font-stretch: 85%; font-weight: 800; font-size: 0.96875rem; line-height: 1.3; letter-spacing: 0; color: var(--rb-surface-text-color); }\n\n/* lead-rest \u00B7 tilt: the lead quote huge and condensed on the left, the rest as boxed cards\n * stacked on the right, tilted a little either way. */\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 6cqi, 5rem); row-gap: 2.25rem; align-items: start; }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"lead\"] { grid-column: 1; grid-row: 1 / span 6; }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"item\"] { grid-column: 2; }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"]:not(:has(> [data-slot=\"item\"])) { grid-template-columns: minmax(0, 1fr); }\n[data-skin=\"poster\"] :is([data-treat=\"tilt\"], [data-treat=\"display\"]) [data-slot=\"lead\"] > [data-slot=\"quote\"],\n[data-skin=\"poster\"] [data-arrangement=\"single\"][data-treat=\"display\"] [data-slot=\"quote\"],\n[data-skin=\"poster\"] [data-arrangement=\"slides\"][data-treat=\"display\"] [data-slot=\"quote\"] {\n  font-family: var(--font-heading);\n  font-stretch: 62%;\n  font-weight: 900;\n  font-size: clamp(2.5rem, 4.8cqi, 4.5rem);\n  line-height: 0.94;\n  color: var(--rb-surface-heading-color);\n}\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"item\"] {\n  padding: 1.5rem 1.5rem 1.25rem;\n  border: var(--poster-edge);\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n}\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"]:not([data-knob-tilt=\"false\"]) [data-slot=\"items\"] > [data-slot=\"item\"]:nth-child(2) { transform: rotate(calc(var(--rb-skin-rotation, -4deg) * 0.4)); }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"]:not([data-knob-tilt=\"false\"]) [data-slot=\"items\"] > [data-slot=\"item\"]:nth-child(3) { transform: rotate(calc(var(--rb-skin-rotation, -4deg) * -0.3)); margin-inline: -1.5rem 1.5rem; }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"]:not([data-knob-tilt=\"false\"]) [data-slot=\"items\"] > [data-slot=\"item\"]:nth-child(4) { transform: rotate(calc(var(--rb-skin-rotation, -4deg) * 0.25)); }\n[data-skin=\"poster\"] [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"item\"] > [data-slot=\"quote\"] { font-size: 1.125rem; line-height: 1.45; }\n\n/* single and slides \u00B7 display: one quote set huge across ten columns. */\n[data-skin=\"poster\"] [data-arrangement=\"single\"][data-treat=\"display\"] [data-slot=\"items\"],\n[data-skin=\"poster\"] [data-arrangement=\"slides\"][data-treat=\"display\"] [data-slot=\"items\"] { max-width: min(100%, 68rem); }\n[data-skin=\"poster\"] [data-arrangement=\"single\"][data-treat=\"display\"] [data-slot=\"quote\"],\n[data-skin=\"poster\"] [data-arrangement=\"slides\"][data-treat=\"display\"] [data-slot=\"quote\"] { font-size: clamp(2.75rem, 6cqi, 5.75rem); }\n[data-skin=\"poster\"] [data-treat=\"display\"] [data-slot=\"attribution\"] [data-slot=\"item-title\"] { font-size: 1.375rem; font-stretch: 85%; }\n\n/* columns \u00B7 outcome and track \u00B7 punchy: boxed quote cards with a hard shadow, the name under a rule. */\n[data-skin=\"poster\"] [data-arrangement=\"columns\"][data-treat=\"outcome\"] [data-slot=\"items\"] { gap: 2rem; }\n[data-skin=\"poster\"] [data-arrangement=\"columns\"][data-treat=\"outcome\"] [data-slot=\"item\"],\n[data-skin=\"poster\"] [data-arrangement=\"track\"][data-treat=\"punchy\"] [data-slot=\"items\"] [data-slot=\"item\"] {\n  padding: 1.625rem 1.625rem 1.375rem;\n  border: var(--poster-edge);\n  box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow);\n}\n[data-skin=\"poster\"] [data-arrangement=\"track\"][data-treat=\"punchy\"] [data-slot=\"items\"] { padding: 0.25rem 0.75rem 1rem 0.25rem; }\n[data-skin=\"poster\"] :is([data-treat=\"outcome\"], [data-treat=\"punchy\"]) [data-slot=\"quote\"] { font-size: 1.1875rem; line-height: 1.45; }\n[data-skin=\"poster\"] :is([data-treat=\"outcome\"], [data-treat=\"punchy\"]) [data-slot=\"attribution\"] { margin-top: auto; padding-top: 0.75rem; border-top: 2px solid var(--rb-surface-text-color); }\n\n/* The quote arrows: square, edged, with the hard shadow. */\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"controls\"] [data-slot=\"control\"] { border: var(--poster-edge); border-radius: 0; box-shadow: 3px 3px 0 var(--poster-shadow); color: var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"counter\"] { font-family: var(--font-heading); font-stretch: 75%; font-weight: 900; font-size: 1.375rem; font-variant-numeric: tabular-nums lining-nums; }\n\n/* ================================================================= PHONE */\n/* Phone headline steps fit the longest word each length allows in a 358px column: short (12 characters,\n * measured on wide words like \"Commonwealth\") at 56px or less, medium (18) at 40px; long titles wrap. */\n/* Phone rules qualify the root with :is(*, :scope): the preview container generator wraps them in a\n * scope rule, where a selector reaches the scope root only through :scope. */\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"poster\"]:is(*, :scope) [data-arrangement] > [data-slot=\"section\"] { --rb-section-pad-y: 3.5rem; --poster-lift: 6px; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"display\"] [data-slot=\"headline\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"display\"] [data-slot=\"headline\"] { font-size: 3.5rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: 3.125rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: 2.75rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-length=\"medium\"] [data-slot=\"headline\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"medium\"] [data-slot=\"headline\"] { font-size: 2.5rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-length=\"long\"] [data-slot=\"headline\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"headline-row\"][data-length=\"long\"] [data-slot=\"headline\"] { font-size: 2.25rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"][data-arrangement=\"headline-row\"] [data-slot=\"headline\"] { margin-bottom: 0.5rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat] [data-slot=\"copy\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"][data-knob-image-position=\"left\"][data-arrangement=\"headline-row\"] [data-slot=\"copy\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"][data-knob-image-position=\"left\"][data-arrangement=\"split\"] [data-slot=\"copy\"] { grid-column: 1 / -1; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"] [data-slot=\"media\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"][data-arrangement=\"split\"] [data-slot=\"media\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] {\n    --poster-cut: polygon(0 10%, 100% 0, 100% 100%, 0 100%);\n    grid-column: 1 / -1;\n    min-height: 0;\n    height: 18rem;\n    margin-inline: -1rem;\n  }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"slab\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { left: auto; right: 1rem; top: -0.875rem; font-size: 1.1875rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"strip\"] [data-slot=\"gallery\"] { margin-inline: -1rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"band\"] > [data-slot=\"section\"] { padding-top: 13rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement] [data-slot=\"head\"] { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement] [data-slot=\"head\"] > [data-slot=\"intro\"] { grid-column: 1; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement] [data-slot=\"heading\"] { font-size: 3rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { min-height: 0; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"duotone-lead\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { padding: 1.5rem 1.375rem 1.75rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"items\"] { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(1),\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(2),\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(3),\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(4),\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(5),\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(6) { min-height: 0; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(2) { margin-left: 0.875rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(3) { margin-left: 1.75rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(4) { margin-left: 2.625rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"stairs\"] [data-slot=\"item\"]:nth-child(5) { margin-left: 3.5rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"row\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"row-continued\"] { grid-template-columns: 4rem minmax(0, 1fr) auto; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"date\"] { flex-direction: column; align-items: flex-start; gap: 0.25rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 44px; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"time-start\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"numeral\"] [data-slot=\"time-start\"] { font-size: 28px; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"numeral\"] [data-slot=\"group-label\"] { font-size: 40px; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"compact\"] [data-slot=\"panel\"] { padding: 1.25rem 1.125rem 1rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"lead\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"] [data-slot=\"items\"] > [data-slot=\"item\"] { grid-column: 1; grid-row: auto; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"tilt\"]:not([data-knob-tilt=\"false\"]) [data-slot=\"items\"] > [data-slot=\"item\"]:nth-child(3) { margin-inline: 0 0.375rem; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"heavy\"] [data-slot=\"grid\"] { border-left: 0; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"heavy\"] :is([data-slot=\"date\"], [data-slot=\"group-label\"]) { border-right: 0; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"heavy\"] [data-slot=\"date\"] { min-height: 3.25rem; padding: 0.25rem; border-bottom: 0; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"heavy\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: none; }\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"heavy\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) { font-size: 22px; }\n}\n}\n\n[data-skin=\"poster\"] [data-arrangement] [data-slot=\"attribution\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n[data-skin=\"poster\"] [data-arrangement] :is([data-slot=\"lede\"], [data-slot=\"intro\"], [data-slot=\"item-meta\"], [data-slot=\"attribution\"]) { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* Event date parts are written as entered, with no text-transform. */\n[data-skin=\"poster\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] { text-transform: none; }\n\n[data-skin=\"poster\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] :is([data-slot=\"weekday\"], [data-slot=\"day\"], [data-slot=\"month\"]) { text-transform: none; }\n\n/* Live class categories and session figures carry the poster typography. */\n/* Level and category chips are small outlined pills, as on the mockup class cards. */\n[data-skin=\"poster\"] [data-slot=\"chip\"] { display: inline-block; border: 2px solid var(--rb-surface-text-color); border-radius: 999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 700; line-height: 1.4; }\n[data-skin=\"poster\"] [data-slot=\"figure-value\"] { font-family: var(--font-heading); font-weight: 900; font-size: clamp(3rem, 8cqi, 7rem); }\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"facts\"] [data-slot=\"fact-value\"] { font-weight: 800; }\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"facts\"] { padding-top: 0.75rem; border-top: 2px solid var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-slot=\"schedule\"] { font-weight: 700; }\n\n/* Course head: condensed title, outlined live session figure, ruled facts. */\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"headline\"] { font-size: clamp(3rem, 6.4cqi, 5.75rem); line-height: 0.92; }\n/* The live session count stands beside the copy as a giant outlined numeral, drawn\n * in the surface primary-action ink (the pop colour on the brand block): a decorative stroke, never text. */\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"figure\"] [data-slot=\"figure-value\"] { font-size: clamp(9rem, 26cqi, 21rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 4px var(--rb-action-primary-base-background-color, var(--rb-surface-mark-color)); }\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"figure-label\"] { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }\n/* Facts: each column starts on its own heavy rule, values in the condensed display face. */\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { column-gap: 1rem; }\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"facts\"] > * { padding-top: 0.75rem; border-top: var(--poster-rule); }\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"fact-value\"] { font-family: var(--font-heading); font-weight: 800; font-size: 1.3125rem; line-height: 1.15; }\n[data-skin=\"poster\"] [data-arrangement=\"event-header\"] [data-slot=\"availability\"] { align-self: flex-start; border: var(--poster-edge); padding: 0.5rem 0.75rem; transform: rotate(-3deg); }\n\n/* Ruled rows: the big day first, weekday and month stacked beside it (\"30 Wed / today\"). */\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"loud\"][data-mode=\"list\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) [data-slot=\"date\"] { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; justify-items: start; column-gap: 0.5rem; row-gap: 0; text-align: start; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"loud\"][data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"day\"] { grid-column: 1; grid-row: 1 / span 2; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"loud\"][data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"weekday\"] { grid-column: 2; grid-row: 1; align-self: end; width: auto; font-weight: 800; }\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"loud\"][data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"month\"] { grid-column: 2; grid-row: 2; align-self: start; width: auto; font-weight: 800; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"row\"],\n  [data-skin=\"poster\"]:is(*, :scope) [data-treat=\"loud\"] [data-slot=\"row-continued\"] { grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: 0.875rem; }\n}\n}\n\n/* A display quote leaves air before the name. */\n[data-skin=\"poster\"] [data-arrangement][data-treat=\"display\"] [data-slot=\"attribution\"] { margin-top: 1.5rem; }\n\n/* Live next dates use the same card parts in every arrangement. */\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"dates\"] { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; padding-block: 0.625rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); font-variant-numeric: tabular-nums; }\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"date-places\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.875rem; }\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"navigation\"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; padding-block: 0.875rem; margin-bottom: 1rem; border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"poster\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { font: inherit; color: var(--rb-surface-text-color); padding: 0.5rem 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 0); }\n\n[data-skin=\"poster\"] [data-mode=\"list\"] [data-slot=\"time\"] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-surface-text-color); }\n[data-skin=\"poster\"] [data-arrangement=\"ledger\"] { --rb-event-date-width: 10.5rem; }\n[data-skin=\"poster\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { border-top-width: 2px; font-weight: 800; }\n[data-skin=\"poster\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { border: var(--poster-edge); box-shadow: var(--poster-lift) var(--poster-lift) 0 var(--poster-shadow); font-weight: 800; }\n\n/* =============================================================================\n * Lantern skin (issue 1575 Phase 1b, D10, D14).\n *\n * Dark first, candlelit and symmetrical: Gloock carries the display lines,\n * Alegreya Sans the reading. Every photo is seen through an arched window,\n * one small lozenge rule (rule, outlined lozenge, rule) sits above each\n * section head, and the lit inverse panel is kept for the one thing you\n * would pick. The ornament colour is the surface mark colour, never text.\n *\n * Bounded skin: only the shared hooks and slots, colours only from tokens and\n * resolved-surface variables, measurements from --rb-skin-* tokens. The arch\n * profiles are skin-local custom properties (they are the style, not a\n * measurement another style would tune). Translucent fills (date tablets, the\n * candle glow) are drawn on pseudo-elements from a surface variable with\n * resolved surfaces, so no colour is mixed here.\n * ============================================================================= */\n\n[data-skin=\"lantern\"] {\n  --tt-eyebrow: none;\n  --ls-eyebrow: 0.02em;\n  --fw-eyebrow: 400;\n  --fs-eyebrow: 1.0625rem;\n}\n\n[data-skin=\"lantern\"] [data-arrangement] {\n  --lantern-arch: 9999px 9999px 0 0;\n  --lantern-arch-wide: 50% 50% 0 0 / 150px 150px 0 0;\n  --lantern-arch-card: 50% 50% 0 0 / 70px 70px 0 0;\n  --lantern-tablet: 48px 48px 6px 6px;\n  --lantern-head-gap: 64px;\n}\n\n/* ------------------------------------------------------------ section air */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: clamp(4.5rem, 8.4cqi, 7.5rem); }\n[data-skin=\"lantern\"] [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: clamp(3.5rem, 6.2cqi, 5.5rem); }\n\n/* ------------------------------------------------------------ type */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"headline\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"heading\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"item-title\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"panel-heading\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"group-day\"] {\n  font-family: var(--font-heading);\n  font-weight: 400;\n  letter-spacing: -0.008em;\n  color: var(--rb-surface-heading-color);\n  text-wrap: balance;\n}\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"eyebrow\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"caption\"] { font-size: 1.0625rem; letter-spacing: 0.02em; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"lede\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"intro\"] { font-size: clamp(1.1875rem, 1.45cqi, 1.3125rem); line-height: 1.55; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); max-width: 34em; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"item-text\"] { font-size: 1.125rem; line-height: 1.6; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"icon\"] { color: var(--rb-surface-text-color); }\n\n/* Section heads: centred under the lozenge rule. */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"head\"] {\n  grid-template-columns: minmax(0, 1fr);\n  position: relative;\n  justify-items: center;\n  text-align: center;\n  justify-self: center;\n  margin-inline: auto;\n  max-width: 48rem;\n  gap: 1.125rem;\n  padding-top: 2rem;\n  margin-bottom: var(--lantern-head-gap);\n}\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"head\"] > [data-slot=\"heading\"],\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"head\"] > [data-slot=\"intro\"] { text-align: center; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"heading\"] { font-size: clamp(2.25rem, 3.9cqi, 3.375rem); line-height: 1.08; }\n\n/* The lozenge rule: two short rules either side of an outlined lozenge. */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"head\"]::before,\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"copy\"]::before,\n[data-skin=\"lantern\"] [data-treat=\"centred\"] [data-slot=\"copy\"]::before,\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"false\"] [data-slot=\"copy\"]::before,\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"lead\"] > [data-slot=\"quote\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 92px;\n  height: 9px;\n  transform: translateX(-50%);\n  background: linear-gradient(to right, var(--rb-surface-mark-color) 0 34px, transparent 34px 58px, var(--rb-surface-mark-color) 58px) center 4px / 92px 1px no-repeat;\n}\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"head\"]::after,\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"copy\"]::after,\n[data-skin=\"lantern\"] [data-treat=\"centred\"] [data-slot=\"copy\"]::after,\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"false\"] [data-slot=\"copy\"]::after,\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"lead\"] > [data-slot=\"quote\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 1px;\n  left: 50%;\n  width: 7px;\n  height: 7px;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: translateX(-50%) rotate(45deg);\n}\n\n/* Candle glow (knob, on by default where offered): a derived mark tint behind centred type,\n * painted and checked by the surface resolver. */\n[data-skin=\"lantern\"] [data-knob-candle-glow=\"true\"] [data-slot=\"frame\"] { isolation: isolate; }\n\n/* The sticker line: an outlined pill in the display face, on the ground. */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"sticker\"] {\n  display: inline-block;\n  padding: 0.625rem 1.375rem;\n  border: 1px solid var(--rb-surface-mark-color);\n  border-radius: 999px;\n  font-family: var(--font-heading);\n  font-size: 1.1875rem;\n  line-height: 1.2;\n  text-align: center;\n}\n\n/* ================================================================== HERO */\n/* Headline steps: length (short, medium, long) x headline size (Quieter, Standard). */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"headline\"] { line-height: 1.02; letter-spacing: -0.012em; }\n[data-skin=\"lantern\"] [data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3.25rem, 6.2cqi, 5.625rem); }\n[data-skin=\"lantern\"] [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.875rem, 4.8cqi, 4.25rem); }\n[data-skin=\"lantern\"] [data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 5cqi, 4.5rem); }\n[data-skin=\"lantern\"] [data-length=\"medium\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.5rem, 4.2cqi, 3.75rem); }\n[data-skin=\"lantern\"] [data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(2.125rem, 3.4cqi, 3rem); line-height: 1.08; }\n\n/* Centred copy shared by the centred hero treatments. */\n[data-skin=\"lantern\"] :is([data-treat=\"arches\"], [data-treat=\"centred\"], [data-treat=\"veil\"], [data-treat=\"arch-frame\"]) [data-slot=\"copy\"] {\n  position: relative;\n  grid-column: 1 / -1;\n  justify-items: center;\n  justify-self: center;\n  text-align: center;\n  max-width: 56rem;\n  margin-inline: auto;\n}\n[data-skin=\"lantern\"] :is([data-treat=\"arches\"], [data-treat=\"centred\"], [data-treat=\"veil\"]) [data-slot=\"copy\"] { padding-top: 2.5rem; }\n[data-skin=\"lantern\"] :is([data-treat=\"arches\"], [data-treat=\"centred\"], [data-treat=\"veil\"], [data-treat=\"arch-frame\"]) [data-slot=\"actions\"] { justify-content: center; }\n[data-skin=\"lantern\"] :is([data-treat=\"arches\"], [data-treat=\"centred\"], [data-treat=\"veil\"], [data-treat=\"arch-frame\"]) [data-slot=\"lede\"] { text-align: center; }\n\n/* split \u00B7 arch: one arched window beside a left-set title, lined inside. */\n[data-skin=\"lantern\"] [data-treat=\"arch\"] [data-slot=\"frame\"] { column-gap: var(--rb-skin-gutter, 32px); }\n[data-skin=\"lantern\"] [data-treat=\"arch\"] [data-slot=\"copy\"] { grid-column: 1 / 7; }\n[data-skin=\"lantern\"] [data-treat=\"arch\"] [data-slot=\"media\"] { grid-column: 8 / 13; aspect-ratio: 4 / 5; }\n[data-skin=\"lantern\"] [data-treat=\"arch\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 6; }\n[data-skin=\"lantern\"] [data-treat=\"arch\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 7 / 13; }\n[data-skin=\"lantern\"] [data-treat=\"arch\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: -2rem; bottom: 3.5rem; }\n\n/* The arched window: the photo takes the arch; a hairline arch runs just inside it. */\n[data-skin=\"lantern\"] :is([data-treat=\"arch\"], [data-treat=\"arches\"], [data-treat=\"arch-frame\"]) [data-slot=\"media\"] [data-slot=\"photo\"] { border-radius: var(--lantern-arch); }\n[data-skin=\"lantern\"] :is([data-treat=\"arch\"], [data-treat=\"arches\"]) [data-slot=\"media\"]:has([data-slot=\"photo\"])::after {\n  content: \"\";\n  position: absolute;\n  inset: 10px 10px 0;\n  z-index: 1;\n  pointer-events: none;\n  border: 1px solid var(--rb-surface-text-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n  opacity: 0.55;\n}\n\n/* copy-over-gallery \u00B7 arches: the centred title in its glow, the photos standing below in arches. */\n[data-skin=\"lantern\"] [data-arrangement=\"copy-over-gallery\"][data-treat=\"arches\"][data-has-photo=\"true\"] [data-slot=\"section\"] { padding-bottom: 0; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"gallery\"] {\n  margin-top: clamp(3rem, 5.2cqi, 4.75rem);\n  gap: 28px;\n  align-items: end;\n  justify-content: center;\n  grid-template-columns: minmax(0, 28rem);\n}\n[data-skin=\"lantern\"] [data-treat=\"arches\"][data-photo-count=\"2\"] [data-slot=\"gallery\"] { grid-template-columns: repeat(2, minmax(0, 25rem)); }\n[data-skin=\"lantern\"] [data-treat=\"arches\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] { grid-template-columns: 1fr 1.28fr 1fr; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 3 / 3.4; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] [data-slot=\"media\"],\n[data-skin=\"lantern\"] [data-treat=\"arches\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] [data-slot=\"media\"]:nth-child(2) { aspect-ratio: 3 / 3.55; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"gallery\"] [data-slot=\"sticker\"] { position: absolute; left: 50%; bottom: 2.5rem; transform: translateX(-50%); white-space: nowrap; }\n\n/* classic \u00B7 veil: the photo fills the section; the copy is a band in the deepest tone\n * at its foot (the copy slot is the card role, which Lantern maps to that tone). Under the\n * type the band is the resolved opaque paint; above it the same paint fades up into the photo. */\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"true\"] [data-slot=\"section\"] { padding-bottom: 0; padding-top: clamp(14rem, 26cqi, 22rem); overflow: clip; }\n[data-skin=\"lantern\"] [data-treat=\"veil\"] [data-slot=\"copy\"] { max-width: none; padding: 3rem 0 4.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"true\"] [data-slot=\"copy\"] {\n  margin-inline: calc(50% - 50cqi);\n  padding-inline: calc(50cqi - 50%);\n}\n[data-skin=\"lantern\"] [data-treat=\"veil\"] [data-slot=\"copy\"] > * { justify-self: center; max-width: 56rem; }\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"true\"] [data-slot=\"copy\"] > [data-slot=\"lede\"] { max-width: 34em; }\n/* Above the band, the same resolved paint fades up into the photo. */\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"true\"] [data-slot=\"copy\"]::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: auto;\n  bottom: 100%;\n  width: auto;\n  height: 10rem;\n  transform: none;\n  pointer-events: none;\n  background: inherit;\n  mask-image: linear-gradient(to top, currentcolor, transparent);\n}\n/* With a photo the copy pseudo is the fade (and in the arch frame it is the inner arch),\n * so the lozenge sits on the headline. */\n[data-skin=\"lantern\"] :is([data-treat=\"veil\"][data-has-photo=\"true\"], [data-treat=\"arch-frame\"]) [data-slot=\"headline\"] { position: relative; padding-top: 2.25rem; }\n[data-skin=\"lantern\"] :is([data-treat=\"veil\"][data-has-photo=\"true\"], [data-treat=\"arch-frame\"]) [data-slot=\"headline\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 92px;\n  height: 9px;\n  transform: translateX(-50%);\n  background: linear-gradient(to right, var(--rb-surface-mark-color) 0 34px, transparent 34px 58px, var(--rb-surface-mark-color) 58px) center 4px / 92px 1px no-repeat;\n}\n[data-skin=\"lantern\"] :is([data-treat=\"veil\"][data-has-photo=\"true\"], [data-treat=\"arch-frame\"]) [data-slot=\"headline\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 1px;\n  left: 50%;\n  width: 7px;\n  height: 7px;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: translateX(-50%) rotate(45deg);\n}\n[data-skin=\"lantern\"] [data-treat=\"veil\"][data-has-photo=\"false\"] [data-slot=\"copy\"] {\n  padding: 4.5rem 2.75rem 4rem;\n  border-radius: 12px;\n  max-width: 61rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"veil\"] [data-slot=\"caption\"] { order: -1; }\n\n/* page-head \u00B7 centred: the title centred on the ground, the lozenge above it. */\n[data-skin=\"lantern\"] [data-treat=\"centred\"] [data-slot=\"facts\"] {\n  max-width: 61rem;\n  margin-inline: auto;\n  gap: 0;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"lantern\"] [data-treat=\"centred\"] [data-slot=\"facts\"] > * { padding: 1.625rem 1.125rem 0; text-align: center; }\n[data-skin=\"lantern\"] [data-treat=\"centred\"] [data-slot=\"facts\"] > * + * { border-left: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n\n/* copy-over-gallery \u00B7 arch-frame: the title stands in a double arch outline between two arched photos.\n * With one photo (all of 1b) the photo stands under the frame as a wide shallow arch;\n * with none, the frame stands alone. */\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"] [data-slot=\"frame\"] { align-items: end; }\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"] [data-slot=\"copy\"] {\n  align-self: stretch;\n  align-content: end;\n  max-width: none;\n  padding: clamp(7rem, 10cqi, 9.5rem) clamp(1.5rem, 3cqi, 2.75rem) 3.5rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n  gap: 1.25rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"] [data-slot=\"copy\"]::before {\n  content: \"\";\n  position: absolute;\n  inset: 8px 8px 0;\n  pointer-events: none;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n  opacity: 0.55;\n}\n\n[data-skin=\"lantern\"] :is([data-treat=\"arch-frame\"], [data-treat=\"veil\"]) [data-slot=\"eyebrow\"] { order: 5; }\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"media\"] { aspect-ratio: 16 / 7; }\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"media\"] [data-slot=\"photo\"] { border-radius: var(--lantern-arch-wide); }\n[data-skin=\"lantern\"] [data-treat=\"arch-frame\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: 50%; top: -1.5rem; transform: translateX(-50%); white-space: nowrap; }\n\n/* ========================================================== FEATURE CARDS */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"item-title\"] { font-size: 1.6875rem; line-height: 1.18; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"item-body\"] { display: grid; gap: 0.75rem; align-content: start; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"item-actions\"] { margin-top: 0.5rem; }\n\n/* cards \u00B7 cards: quiet sheets with a shallow-arched photo set into them. */\n[data-skin=\"lantern\"] [data-treat=\"cards\"] [data-slot=\"items\"] { gap: 1.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"cards\"] [data-slot=\"item\"] {\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: var(--rb-skin-radius, 10px);\n  overflow: hidden;\n}\n[data-skin=\"lantern\"] [data-treat=\"cards\"] [data-slot=\"item-media\"] { width: auto; margin: 1.125rem 1.125rem 0; }\n[data-skin=\"lantern\"] [data-treat=\"cards\"] [data-slot=\"item-media\"] [data-slot=\"photo\"] { height: 11.5rem; border-radius: var(--lantern-arch-card); }\n[data-skin=\"lantern\"] [data-treat=\"cards\"] [data-slot=\"item-body\"] { padding: 1.5rem 1.75rem 1.75rem; }\n\n/* cards \u00B7 arches: boxless centred columns under tall arched photos. Without a photo\n * each column stands under a small outlined niche instead. */\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"items\"] { gap: 3.5rem 2.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"item\"],\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"item\"] [data-slot=\"item-body\"] { justify-items: center; text-align: center; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"item\"] [data-slot=\"item-media\"] { aspect-ratio: 4 / 4.6; margin-bottom: 1.75rem; border-radius: var(--lantern-arch); }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"item\"] [data-slot=\"item-media\"] [data-slot=\"photo\"] { height: 100%; }\n[data-skin=\"lantern\"] [data-treat=\"arches\"] [data-slot=\"item\"]:not(:has([data-slot=\"item-media\"])) [data-slot=\"item-body\"]::before,\n[data-skin=\"lantern\"] [data-treat=\"arches\"][data-knob-show-photos=\"false\"] [data-slot=\"item\"] [data-slot=\"item-body\"]::before {\n  content: \"\";\n  display: block;\n  width: 4.5rem;\n  aspect-ratio: 1 / 1.25;\n  margin: 0 auto 0.75rem;\n  border: 1px solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n}\n\n/* lead-support \u00B7 arch-beside: the lead is the lit panel (statement role) with an arched\n * photo and corner brackets; the rest follow as small centred arches. */\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"] {\n  position: relative;\n  align-items: center;\n  padding: clamp(1.5rem, 3cqi, 2.5rem);\n  border-radius: 12px;\n  margin-bottom: 1.5rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"]::before {\n  content: \"\";\n  position: absolute;\n  inset: 12px;\n  pointer-events: none;\n  background:\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) left top / 22px 1.5px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) left top / 1.5px 22px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) right top / 22px 1.5px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) right top / 1.5px 22px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) left bottom / 22px 1.5px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) left bottom / 1.5px 22px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) right bottom / 22px 1.5px no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) right bottom / 1.5px 22px no-repeat;\n}\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { grid-column: 1 / 6; min-height: 0; aspect-ratio: 4 / 5; border-radius: var(--lantern-arch); }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] [data-slot=\"photo\"] { height: 100%; }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { grid-column: 7 / 13; gap: 1.25rem; padding-right: 1rem; }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"lead\"] [data-slot=\"item-title\"] { font-size: clamp(2.125rem, 3.4cqi, 3rem); line-height: 1.08; }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"items\"] > [data-slot=\"item\"],\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"items\"] > [data-slot=\"item\"] [data-slot=\"item-body\"] { justify-items: center; text-align: center; }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"items\"] > [data-slot=\"item\"] [data-slot=\"item-media\"] { width: 62%; aspect-ratio: 3 / 3.6; margin: 0 auto 1.25rem; border-radius: var(--lantern-arch); }\n[data-skin=\"lantern\"] [data-treat=\"arch-beside\"] [data-slot=\"items\"] > [data-slot=\"item\"] [data-slot=\"item-media\"] [data-slot=\"photo\"] { height: 100%; }\n\n/* index \u00B7 two-col: two columns of ruled rows with display titles. */\n[data-skin=\"lantern\"] [data-treat=\"two-col\"] [data-slot=\"items\"] {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  column-gap: 4rem;\n  max-width: 61rem;\n  margin-inline: auto;\n}\n[data-skin=\"lantern\"] [data-arrangement][data-treat=\"two-col\"] [data-slot=\"item\"] {\n  grid-template-columns: minmax(0, 1fr);\n  padding-block: 1.5rem;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"lantern\"] [data-treat=\"two-col\"] [data-slot=\"item\"] > *,\n[data-skin=\"lantern\"] [data-treat=\"two-col\"] [data-slot=\"item\"] > [data-slot=\"item-title\"] { grid-column: 1; grid-row: auto; }\n[data-skin=\"lantern\"] [data-treat=\"two-col\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] { grid-template-columns: 3rem minmax(0, 1fr); }\n[data-skin=\"lantern\"] [data-treat=\"two-col\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > * { grid-column: 2; }\n[data-skin=\"lantern\"] [data-treat=\"two-col\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > [data-slot=\"numeral\"] { grid-column: 1; grid-row: 1 / span 3; }\n[data-skin=\"lantern\"] [data-treat=\"two-col\"] [data-slot=\"item-title\"] { font-size: 1.4375rem; }\n/* Without numbers each row is marked by a small outlined lozenge. */\n[data-skin=\"lantern\"] [data-arrangement][data-treat=\"two-col\"]:not([data-knob-card-marker=\"numbers\"]) [data-slot=\"item\"] { position: relative; padding-left: 1.75rem; }\n[data-skin=\"lantern\"] [data-treat=\"two-col\"]:not([data-knob-card-marker=\"numbers\"]) [data-slot=\"item\"]::before {\n  content: \"\";\n  position: absolute;\n  left: 0.25rem;\n  top: calc(1.5rem + 0.6em);\n  width: 7px;\n  height: 7px;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: rotate(45deg);\n}\n[data-skin=\"lantern\"] [data-treat=\"two-col\"] [data-slot=\"numeral\"] { font-family: var(--font-heading); font-size: 1.375rem; color: var(--rb-surface-text-color); }\n\n/* sequence \u00B7 arch-row: each step stands in an arch outline; the numeral is a display\n * figure in the mark colour (a 40px-plus numeral). */\n[data-skin=\"lantern\"] [data-treat=\"arch-row\"] [data-slot=\"items\"] { gap: 1.75rem; }\n[data-skin=\"lantern\"] [data-arrangement][data-treat=\"arch-row\"] [data-slot=\"item\"] {\n  justify-items: center;\n  text-align: center;\n  padding: 4rem 1.875rem 2.25rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n  gap: 0.875rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"arch-row\"] [data-slot=\"numeral\"] { font-family: var(--font-heading); font-size: 48px; line-height: 1; color: var(--rb-surface-mark-color); }\n[data-skin=\"lantern\"] [data-treat=\"arch-row\"] [data-slot=\"item-media\"] { display: none; }\n\n/* ============================================================== CALENDAR */\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"item-title\"] { font-size: 1.5625rem; line-height: 1.15; }\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"item-meta\"],\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"time-length\"],\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"places\"],\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"places-full\"] { font-size: 1.0625rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"time\"],\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"date\"] { font-variant-numeric: lining-nums tabular-nums; }\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-family: var(--font-heading); font-size: 2.25rem; line-height: 1.05; color: var(--rb-surface-heading-color); }\n[data-skin=\"lantern\"] [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]) { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n/* Few places left: an outlined lozenge before the line. */\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"places-low\"] { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 1.0625rem; color: var(--rb-surface-text-color); }\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"places-low\"]::before {\n  content: \"\";\n  width: 7px;\n  height: 7px;\n  flex: none;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: rotate(45deg);\n}\n\n/* The date tablet: an arch-topped plate with a quiet fill (a derived text tint). */\n[data-skin=\"lantern\"] [data-treat=\"tablets\"] [data-slot=\"date\"] {\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: start;\n  text-align: center;\n  min-height: 6.75rem;\n  padding: 1.25rem 0.375rem 0.75rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"tablets\"] [data-slot=\"date\"] { border-radius: var(--lantern-tablet); }\n\n/* ledger \u00B7 tablets: a centred, ruled ledger led by tablets. */\n[data-skin=\"lantern\"] [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"list\"] { max-width: 61rem; margin-inline: auto; border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"lantern\"] [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"row\"],\n[data-skin=\"lantern\"] [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"row-continued\"] {\n  grid-template-columns: 7rem minmax(0, 1fr) auto;\n  column-gap: 1.75rem;\n  border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"lantern\"] [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"row-continued\"] { border-top-style: dotted; }\n\n/* grid \u00B7 tablets: date tablets in quiet cards, one session to a row. */\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"list\"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 57.5rem; margin-inline: auto; }\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item\"] {\n  display: grid;\n  grid-template-columns: 6rem minmax(0, 1fr);\n  column-gap: 1.75rem;\n  align-items: center;\n  padding: 1.125rem 1.75rem 1.125rem 1.125rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: var(--rb-skin-radius, 10px);\n  box-shadow: none;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-body\"] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  column-gap: 1.5rem;\n  row-gap: 0.25rem;\n  align-items: center;\n  padding: 0;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-body\"] > * { grid-column: 1; }\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-body\"] > [data-slot=\"item-actions\"] { grid-column: 2; grid-row: 1 / span 4; display: flex; align-items: center; gap: 1rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-text\"] { font-size: 1.0625rem; }\n\n/* day-groups \u00B7 arch-heads: the day stands in an arch outline in the rail. */\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"][data-mode=\"list\"] [data-slot=\"list\"] { max-width: 61rem; margin-inline: auto; }\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"] [data-slot=\"group\"] { padding-block: 1.75rem; }\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"] [data-slot=\"group-label\"] {\n  align-self: start;\n  align-items: center;\n  text-align: center;\n  padding: 2.75rem 0.75rem 1rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch);\n}\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"] [data-slot=\"group-day\"] { font-size: 1.875rem; line-height: 1.1; }\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"] [data-slot=\"group-date\"] { font-size: 1.0625rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-treat=\"arch-heads\"] [data-slot=\"row\"] { border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n\n/* compact \u00B7 compact: the next three in a quiet panel under a centred heading. */\n[data-skin=\"lantern\"] [data-arrangement=\"compact\"] [data-slot=\"panel\"] {\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: 12px;\n  padding: 1.75rem 2rem;\n  max-width: 45rem;\n  margin-inline: auto;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"compact\"] [data-slot=\"panel-heading\"] { font-size: 1.5rem; text-align: center; margin: 0 0 0.75rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"compact\"] [data-slot=\"row\"] { border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-block: 0.875rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"compact\"] [data-slot=\"item-title\"] { font-size: 1.375rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"compact\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-family: var(--font-body); font-size: 1.0625rem; }\n\n/* month-grid \u00B7 lit: a quiet month on the ground, today lit by the mark colour. */\n[data-skin=\"lantern\"] [data-treat=\"lit\"] [data-slot=\"grid\"] { gap: 0; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); border-left: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"lantern\"] [data-treat=\"lit\"] [data-slot=\"group-label\"] { padding: 0.75rem 0.5rem; text-align: center; font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); border-right: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"lantern\"] [data-treat=\"lit\"] [data-slot=\"date\"] {\n  gap: 0.25rem;\n  min-height: 7rem;\n  padding: 0.375rem;\n  border-right: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n}\n[data-skin=\"lantern\"] [data-treat=\"lit\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) {\n  justify-self: start;\n  width: 2.25rem;\n  height: 2.25rem;\n  min-height: 0;\n  border: 0;\n  border-radius: 999px;\n  font-family: var(--font-heading);\n  font-size: 1.125rem;\n  font-variant-numeric: lining-nums;\n}\n\n[data-skin=\"lantern\"] [data-treat=\"lit\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: block; font-size: 0.875rem; line-height: 1.3; color: var(--rb-surface-text-color); padding-left: 0.25rem; }\n[data-skin=\"lantern\"] [data-treat=\"lit\"] [data-slot=\"date\"] [data-slot=\"time\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-variant-numeric: lining-nums tabular-nums; }\n\n/* ========================================================== TESTIMONIALS */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"quote\"] { font-size: 1.25rem; line-height: 1.55; color: var(--rb-surface-text-color); }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"attribution\"] { justify-content: center; gap: 0.125rem 0.3em; font-size: 1.09375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"] { font-family: inherit; font-size: inherit; font-weight: 400; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"]::after { content: \",\"; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"]:last-child::after { content: none; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-meta\"] + [data-slot=\"item-meta\"]::before { content: \"\u00B7 \"; }\n\n/* lead-rest, single and slides \u00B7 quote-arch: the lead quote in a shallow double arch\n * outline under the lozenge; small quotes flank a vertical lozenge rule. With the arch\n * frame off the outline goes, the centred display quote and its lozenge stay. */\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"items\"] { text-align: center; }\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"lead\"],\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"],\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] {\n  position: relative;\n  justify-self: center;\n  justify-items: center;\n  width: 100%;\n  max-width: 53.75rem;\n  margin-inline: auto;\n  padding: 8rem clamp(1.5rem, 4.5cqi, 4.5rem) 2.5rem;\n  gap: 1.625rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch-wide);\n}\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"lead\"]::before,\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"]::before,\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"items\"]::before {\n  content: \"\";\n  position: absolute;\n  inset: 8px 8px 0;\n  pointer-events: none;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-mark-color);\n  border-bottom: 0;\n  border-radius: var(--lantern-arch-wide);\n  opacity: 0.55;\n}\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"lead\"],\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"items\"] > [data-slot=\"item\"],\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"items\"] { border: 0; padding-top: 3rem; }\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"lead\"]::before,\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"items\"] > [data-slot=\"item\"]::before,\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"items\"]::before { content: none; }\n[data-skin=\"lantern\"] [data-treat=\"quote-arch\"] [data-slot=\"lead\"] > [data-slot=\"quote\"],\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"],\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"] {\n  position: relative;\n  padding-top: 2.5rem;\n  font-family: var(--font-heading);\n  font-size: clamp(1.625rem, 2.6cqi, 2.25rem);\n  line-height: 1.32;\n  text-wrap: balance;\n  color: var(--rb-surface-heading-color);\n}\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"]::before,\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 92px;\n  height: 9px;\n  transform: translateX(-50%);\n  background: linear-gradient(to right, var(--rb-surface-mark-color) 0 34px, transparent 34px 58px, var(--rb-surface-mark-color) 58px) center 4px / 92px 1px no-repeat;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"]::after,\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"quote\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 1px;\n  left: 50%;\n  width: 7px;\n  height: 7px;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: translateX(-50%) rotate(45deg);\n}\n[data-skin=\"lantern\"] [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"] { justify-items: center; gap: 1.625rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] {\n  max-width: 62.5rem;\n  margin-inline: auto;\n  column-gap: 6rem;\n  row-gap: 4.5rem;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"] { position: relative; justify-items: center; gap: 0.75rem; }\n/* Exactly two small quotes: a vertical lozenge rule between them, centred in the gap. */\n[data-skin=\"lantern\"] [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(3):last-child) > [data-slot=\"item\"]:nth-child(2)::after {\n  content: \"\";\n  position: absolute;\n  right: -3rem;\n  top: 0;\n  width: 9px;\n  height: 6rem;\n  transform: translateX(50%);\n  background:\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) center top / 1px 2.25rem no-repeat,\n    linear-gradient(var(--rb-surface-mark-color), var(--rb-surface-mark-color)) center bottom / 1px 2.25rem no-repeat;\n}\n[data-skin=\"lantern\"] [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"]:has(> [data-slot=\"item\"]:nth-child(3):last-child) > [data-slot=\"item\"]:nth-child(2)::before {\n  content: \"\";\n  position: absolute;\n  right: -3rem;\n  top: calc(3rem - 4.5px);\n  width: 7px;\n  height: 7px;\n  border: 1.5px solid var(--rb-surface-mark-color);\n  transform: translateX(50%) rotate(45deg);\n}\n\n/* columns \u00B7 cards: quiet sheets (the card role), centred. */\n[data-skin=\"lantern\"] [data-arrangement=\"columns\"][data-treat=\"cards\"] [data-slot=\"item\"] {\n  justify-items: center;\n  text-align: center;\n  padding: 2.25rem 2rem 1.875rem;\n  border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color);\n  border-radius: var(--rb-skin-radius, 10px);\n}\n[data-skin=\"lantern\"] [data-arrangement=\"columns\"][data-treat=\"cards\"] [data-slot=\"quote\"] { font-size: 1.1875rem; }\n\n/* The quote arrows: round, outlined in the mark colour, the label in the text colour. Never moves on its own. */\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"controls\"] { justify-content: center; gap: 1.125rem; margin-top: 2rem; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"controls\"] [data-slot=\"control\"] { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rb-surface-mark-color); color: var(--rb-surface-text-color); background-color: transparent; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"counter\"] { font-variant-numeric: lining-nums tabular-nums; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* ================================================================= PHONE */\n/* Phone headline steps fit the longest word each length allows in a 358px column in\n * Gloock: short (12 characters, \"Commonwealth\") at 44px, medium (18) at 34px; long titles wrap.\n * Phone rules qualify the root with :is(*, :scope): the preview container generator wraps them\n * in a scope rule, where a selector reaches the scope root only through :scope. */\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"lantern\"]:is(*, :scope) [data-arrangement] { --lantern-head-gap: 2.75rem; --lantern-arch-wide: 50% 50% 0 0 / 90px 90px 0 0; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: 4rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: 3rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-length=\"short\"] [data-slot=\"headline\"] { font-size: 2.75rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: 2.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-length=\"medium\"] [data-slot=\"headline\"] { font-size: 2.125rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-length=\"long\"] [data-slot=\"headline\"] { font-size: 1.875rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement] [data-slot=\"heading\"] { font-size: 2.125rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement] [data-slot=\"item-title\"] { font-size: 1.5rem; }\n\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat] [data-slot=\"copy\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat] [data-slot=\"media\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / -1; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch\"] [data-slot=\"media\"] { aspect-ratio: 4 / 4.6; margin-inline: 1.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { left: 50%; bottom: -1.25rem; transform: translateX(-50%); white-space: nowrap; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arches\"] [data-slot=\"gallery\"] { margin-top: 2.5rem; gap: 0.75rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arches\"][data-photo-count=\"3\"] [data-slot=\"gallery\"] { grid-template-columns: 0.5fr 1fr 0.5fr; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arches\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 3 / 3.6; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arches\"] [data-slot=\"gallery\"] [data-slot=\"sticker\"] { bottom: 1.5rem; white-space: normal; width: max-content; max-width: 80%; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"veil\"][data-has-photo=\"true\"] [data-slot=\"section\"] { padding-top: 15rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"veil\"] [data-slot=\"copy\"] { padding-bottom: 3rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"veil\"][data-has-photo=\"false\"] [data-slot=\"copy\"] { padding: 3.5rem 1.375rem 3rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"centred\"] [data-slot=\"facts\"] > * + * { border-left: 0; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-frame\"] [data-slot=\"copy\"] { padding: 6.5rem 1.25rem 2.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"media\"] { aspect-ratio: 4 / 3; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-frame\"][data-photo-count=\"1\"] [data-slot=\"media\"] [data-slot=\"photo\"] { border-radius: var(--lantern-arch); }\n\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-beside\"] [data-slot=\"lead\"] { padding: 1.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-beside\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { padding-right: 0; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-beside\"] [data-slot=\"lead\"] [data-slot=\"item-title\"] { font-size: 2rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-beside\"] [data-slot=\"items\"] > [data-slot=\"item\"] [data-slot=\"item-media\"] { width: 70%; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"two-col\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-row\"] [data-slot=\"item\"] { padding: 3.25rem 1.5rem 1.75rem; }\n\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"row\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"ledger\"][data-treat=\"tablets\"] [data-slot=\"row-continued\"] { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"tablets\"] [data-slot=\"date\"] { min-height: 5.5rem; padding-top: 1rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"tablets\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 1.875rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item\"] { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; padding: 0.875rem; align-items: start; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-body\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"item-body\"] > [data-slot=\"item-actions\"] { grid-column: 1; grid-row: auto; flex-wrap: wrap; margin-top: 0.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arch-heads\"] [data-slot=\"group-label\"] { padding: 0.75rem 0 0; border: 0; text-align: left; align-items: baseline; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"compact\"] [data-slot=\"panel\"] { padding: 1.25rem 1.125rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"lit\"] [data-slot=\"date\"] { min-height: 3.5rem; padding: 0.125rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"lit\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: none; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"lit\"] :is([data-slot=\"control\"], [data-slot=\"date-label\"]) { width: 2rem; height: 2rem; font-size: 1rem; }\n\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"quote-arch\"] [data-slot=\"lead\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"single\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"],\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"slides\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] { padding: 5.5rem 1.25rem 1.75rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"]::before,\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"lead-rest\"][data-treat=\"quote-arch\"] [data-slot=\"items\"] > [data-slot=\"item\"]::after { content: none; }\n}\n}\n\n[data-skin=\"lantern\"] [data-arrangement] :is([data-slot=\"lede\"], [data-slot=\"intro\"], [data-slot=\"item-meta\"], [data-slot=\"attribution\"]) { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* Event date parts are written as entered, with no text-transform. */\n[data-skin=\"lantern\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] { text-transform: none; }\n\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"date\"] { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: 1rem 1rem 0.25rem 0.25rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"grid\"][data-treat=\"tablets\"] [data-slot=\"day\"] { font-family: var(--font-heading); font-size: 2.75rem; line-height: 1; }\n\n[data-skin=\"lantern\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] :is([data-slot=\"weekday\"], [data-slot=\"day\"], [data-slot=\"month\"]) { text-transform: none; }\n\n/* Price and date chips use the resolved item ink and line. */\n[data-skin=\"lantern\"] [data-card-list-item] :is([data-slot=\"schedule\"], [data-slot=\"chip\"]) { border: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); border-radius: 999px; padding: 0.375rem 0.75rem; }\n/* The price reads as the card figure in the display serif, as on the mockup class cards (\"12 suggested\"). */\n[data-skin=\"lantern\"] [data-card-list-item] :is([data-fact=\"price\"], [data-fact=\"fee\"]) [data-slot=\"fact-value\"] { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.1; }\n[data-skin=\"lantern\"] [data-slot=\"figure-value\"] { font-family: var(--font-heading); font-style: italic; }\n[data-skin=\"lantern\"] [data-slot=\"schedule\"] { align-self: start; }\n\n/* Quiet retreat facts and a generous live figure. */\n[data-skin=\"lantern\"] [data-arrangement=\"event-header\"] [data-slot=\"headline\"] { font-weight: 400; }\n[data-skin=\"lantern\"] [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { border-block: 1px solid var(--rb-surface-line-color); padding-block: 1.5rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"event-header\"] [data-slot=\"figure-value\"] { font-size: clamp(6rem, 18cqi, 16rem); }\n[data-skin=\"lantern\"] [data-arrangement=\"details-panel\"] [data-slot=\"panel\"] { border-radius: var(--rb-skin-radius, 1rem); }\n\n/* Lantern buttons carry a visible ring, so a lone item button keeps its own box (the flush rule\n * is for link-like actions). */\n[data-skin=\"lantern\"] [data-arrangement][data-knob-action-style=\"button\"] :is([data-slot=\"item-actions\"], [data-slot=\"action\"]):is([data-slot]) > :first-child:last-child { padding: 0.5rem 1.125rem; min-height: 2.5rem; }\n/* Lantern centres its section heads, catalogue block headings included. */\n[data-skin=\"lantern\"] [data-arrangement] { --rb-skin-head-align: center; }\n[data-skin=\"lantern\"] [data-arrangement] [data-slot=\"stack\"] > [data-slot=\"intro\"] { margin-inline: auto; }\n\n/* Live next dates use the same card parts in every arrangement. */\n[data-skin=\"lantern\"] [data-card-list-item] [data-slot=\"dates\"] { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }\n[data-skin=\"lantern\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; padding-block: 0.625rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); font-variant-numeric: tabular-nums; }\n[data-skin=\"lantern\"] [data-card-list-item] [data-slot=\"date-places\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.875rem; }\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"navigation\"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; padding-block: 0.875rem; margin-bottom: 1rem; border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"lantern\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { font: inherit; color: var(--rb-surface-text-color); padding: 0.5rem 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 0); }\n\n[data-skin=\"lantern\"] [data-mode=\"list\"] [data-slot=\"time\"] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-surface-text-color); }\n[data-skin=\"lantern\"] [data-card-list-item] [data-slot=\"dates\"] { gap: 0.5rem; }\n[data-skin=\"lantern\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { padding: 0.625rem 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: var(--lantern-tablet); }\n\n/* Centred footer: the same lozenge head over a quiet, deep-ground ending. */\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] { padding-block: 5.5rem 2.25rem; border-top: 0; text-align: center; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] > [data-slot=\"stack\"] { padding-block: 0; gap: 0; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"head\"] { margin-bottom: 0; gap: 0.75rem; width: 100%; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"heading\"] { font-size: clamp(2rem, 3cqi, 2.5rem); line-height: 1.1; margin-top: 0.25rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"intro\"] { --rb-surface-text-color: var(--rb-surface-muted-color); font-size: 1.125rem; line-height: 1.55; color: var(--rb-surface-muted-color); }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"navigation\"] { font-family: var(--font-heading); font-size: 1.125rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] > [data-slot=\"stack\"] > [data-slot=\"navigation\"] { margin-top: 2.25rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"navigation\"] [data-slot=\"stack\"]:has(> :not([data-slot])) { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2.5rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"contact\"] { margin-top: 1.75rem; gap: 0.5rem 1.75rem; font-size: 1.0625rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"contact\"] [data-slot=\"stack\"] { gap: 0.5rem 1.75rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"schedule\"] { margin-top: 0.75rem; width: min(100%, 20rem); align-self: center; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] > [data-slot=\"stack\"] > [data-slot=\"social\"] { margin-top: 1.75rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"social\"] [data-slot=\"social\"] { justify-content: center; gap: 0.75rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"social\"] [data-slot=\"social\"] > * { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rb-surface-mark-color); border-radius: 50%; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"social\"] [data-slot=\"social\"] > * > * { width: 19px; height: 19px; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"panel\"] { margin-top: 2.5rem; max-width: 36rem; width: 100%; margin-inline: auto; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"base\"] { --rb-surface-text-color: var(--rb-surface-muted-color); --rb-surface-link-color: var(--rb-surface-muted-color); gap: 0.5rem 1.5rem; font-size: 0.9375rem; color: var(--rb-surface-muted-color); }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"stack\"] > [data-slot=\"base\"] { margin-top: 3.5rem; padding: 1.5rem 0 0; border-top: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"base\"] > [data-slot=\"base\"] { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"base\"] [data-slot=\"navigation\"] { font-family: var(--font-body); font-size: inherit; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"caption\"] { font-size: inherit; letter-spacing: normal; }\n\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"footer-centred\"] { padding-top: 4rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"footer-centred\"] [data-slot=\"navigation\"] [data-slot=\"stack\"]:has(> :not([data-slot])) { gap: 0.5rem 1.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-arrangement=\"footer-centred\"] [data-slot=\"base\"] > [data-slot=\"base\"] { justify-content: center; text-align: center; }\n}\n}\n\n/* Leaf utilities inherit the decided footer type, including the quieter legal row. */\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"navigation\"] * { font-family: inherit; font-size: inherit; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"contact\"] * { font-family: var(--font-body); font-size: inherit; }\n\n/* Visual review: contact emphasis, quiet hours, and balanced sparse/panel endings. */\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"contact\"] > [data-slot=\"stack\"] > [data-slot=\"stack\"] > * { text-decoration: underline; text-decoration-color: var(--rb-surface-mark-color); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"contact\"] > [data-slot=\"stack\"] > :not([data-slot]) { font-style: normal; opacity: 1; color: var(--rb-surface-muted-color); }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"schedule\"] [data-slot=\"inline\"] > :first-child { text-transform: none; letter-spacing: normal; font-weight: 500; font-size: inherit; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"]:not(:has([data-slot=\"base\"])) { padding-bottom: 4rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] > [data-slot=\"panel\"] { margin-bottom: 3.5rem; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"][data-slot=\"section\"] [data-slot=\"head\"]::after { border-width: 1.5px; }\n[data-skin=\"lantern\"] [data-arrangement=\"footer-centred\"] [data-slot=\"panel\"] [data-slot=\"group-label\"] { font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--rb-surface-text-color); }\n\n/* ================================================= MEDIA TEXT: CIRCLE BESIDE\n * Kept separate from footer dressing for concurrent footer work.\n */\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"frame\"] {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  column-gap: var(--rb-skin-gutter);\n  align-items: center;\n}\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"media\"] { grid-column: 1 / 6; min-width: 0; }\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"copy\"] {\n  grid-column: 7 / 13;\n  display: grid;\n  gap: var(--rb-skin-copy-gap);\n  justify-items: start;\n  max-width: 34rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"][data-knob-image-position=\"right\"] [data-slot=\"media\"] { grid-column: 8 / 13; grid-row: 1; }\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"][data-knob-image-position=\"right\"] [data-slot=\"copy\"] { grid-column: 1 / 7; grid-row: 1; }\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"head\"]:not(:has(*)) { display: none; }\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"head\"] {\n  justify-self: start;\n  justify-items: start;\n  text-align: start;\n  margin: 0;\n  padding-top: 2rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"head\"] > [data-slot=\"heading\"] { text-align: start; }\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"head\"]::before {\n  left: 0;\n  transform: none;\n  background: linear-gradient(to right, transparent 0 18px, var(--rb-surface-mark-color) 18px) center 4px / 52px 1px no-repeat;\n  width: 52px;\n  height: 9px;\n}\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"head\"]::after { left: 1px; transform: rotate(45deg); }\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"intro\"] { font-size: 1.1875rem; line-height: 1.65; max-width: none; color: var(--rb-surface-muted-color); }\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"intro\"] > [data-slot=\"lede\"] { font-size: inherit; line-height: inherit; color: var(--rb-surface-text-color); }\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"][data-has-photo=\"false\"] [data-slot=\"media\"]:not(:has([data-placeholder-field])) { display: none; }\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"][data-has-photo=\"false\"] [data-slot=\"frame\"]:not(:has([data-placeholder-field])) > [data-slot=\"copy\"] { grid-column: 1 / -1; grid-row: auto; }\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-placeholder-field] { aspect-ratio: 1; height: auto; border-radius: 50%; overflow: hidden; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"circle-beside\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"circle-beside\"] [data-slot=\"frame\"] > [data-slot=\"media\"] { grid-column: 1 / -1; grid-row: auto; width: 76%; justify-self: center; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"circle-beside\"] [data-slot=\"frame\"] > [data-slot=\"copy\"] { grid-column: 1 / -1; grid-row: auto; }\n}\n}\n\n/* ---------------------------------------------------- image gallery: Lucy Looks */\n[data-skin=\"lantern\"] [data-arrangement=\"tiles\"] [data-slot=\"head\"] { width: 100%; }\n[data-skin=\"lantern\"] [data-arrangement=\"tiles\"] [data-slot=\"head\"]:not(:has([data-slot=\"heading\"])) { padding-top: 0; }\n[data-skin=\"lantern\"] [data-arrangement=\"tiles\"] [data-slot=\"head\"]:not(:has([data-slot=\"heading\"]))::before,\n[data-skin=\"lantern\"] [data-arrangement=\"tiles\"] [data-slot=\"head\"]:not(:has([data-slot=\"heading\"]))::after { display: none; }\n[data-skin=\"lantern\"] [data-treat=\"square-tiles\"] [data-slot=\"items\"] { --rb-skin-gallery-gap: 0; border-radius: var(--rb-skin-radius, 10px); overflow: hidden; }\n[data-skin=\"lantern\"] [data-treat=\"square-tiles\"] [data-slot=\"caption\"] { display: none; }\n[data-skin=\"lantern\"] [data-treat=\"arched-captions\"] [data-slot=\"items\"] { --rb-skin-gallery-gap: clamp(1rem, 3cqi, 2.5rem); align-items: start; }\n[data-skin=\"lantern\"] [data-treat=\"arched-captions\"] [data-slot=\"item\"]:nth-child(3n + 2) { transform: translateY(4.5rem); }\n[data-skin=\"lantern\"] [data-treat=\"arched-captions\"] [data-slot=\"items\"]:has([data-slot=\"item\"]:nth-child(3n + 2)) { padding-bottom: 4.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"arched-captions\"] [data-slot=\"media\"] { aspect-ratio: 3 / 4; border-radius: var(--lantern-arch); }\n[data-skin=\"lantern\"] [data-treat=\"arched-captions\"] [data-slot=\"caption\"] { margin-top: 1rem; text-align: center; font-size: 1rem; line-height: 1.5; color: var(--rb-surface-muted-color); }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-captions\"] [data-slot=\"item\"]:nth-child(3n + 2) { transform: none; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-captions\"] [data-slot=\"item\"]:nth-child(2n) { transform: translateY(3rem); }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-captions\"] [data-slot=\"items\"]:has([data-slot=\"item\"]:nth-child(3n + 2)) { padding-bottom: 0; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-captions\"] [data-slot=\"items\"]:has([data-slot=\"item\"]:nth-child(2n)) { padding-bottom: 3rem; }\n}\n}\n\n/* ---------------------------------------------------- newsletter: Signup in an arch */\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"frame\"] {\n  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;\n  text-align: center; gap: 1.125rem; width: 100%; max-width: 53.75rem; margin-inline: auto;\n  padding: 7rem clamp(1.5rem, 5cqi, 5rem) 3rem;\n  border: 1px solid var(--rb-surface-mark-color); border-bottom: 0; border-radius: var(--lantern-arch-wide);\n}\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"frame\"]::before {\n  content: \"\"; position: absolute; inset: 8px 8px 0; pointer-events: none;\n  border: 1px solid var(--rb-surface-mark-color); border-bottom: 0; border-radius: var(--lantern-arch-wide); opacity: 0.55;\n}\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"frame\"] { border-color: transparent; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"frame\"]::before { display: none; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"head\"] { margin: 0; width: 100%; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"head\"]:not(:has(*)) { display: none; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"head\"]:not(:has([data-slot=\"heading\"])) { padding-top: 0; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"head\"]:not(:has([data-slot=\"heading\"]))::before,\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"head\"]:not(:has([data-slot=\"heading\"]))::after { display: none; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"intro\"] { --rb-surface-text-color: var(--rb-surface-muted-color); color: var(--rb-surface-muted-color); }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"panel\"] { width: 100%; max-width: 44rem; margin-top: 1.25rem; text-align: left; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"grid\"] { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; align-items: end; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"items\"] { display: contents; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"item\"] { display: grid; gap: 0.4rem; min-width: 0; flex: 1 1 12rem; margin: 0; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"row\"] { display: grid; gap: 0.4rem; min-width: 0; flex: 1.35 1 16rem; margin: 0; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"fact-label\"] { font-size: 1rem; font-weight: 500; color: var(--rb-surface-text-color); }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"control\"] {\n  width: 100%; min-width: 0; min-height: 52px; padding: 0.8rem 1.25rem;\n  border: 1px solid var(--rb-surface-muted-color); border-radius: 9999px;\n  background: transparent; color: var(--rb-surface-text-color); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.4;\n}\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"control\"]::placeholder { color: var(--rb-surface-muted-color); opacity: 1; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"control\"]:focus-visible { outline: 2px solid var(--rb-surface-mark-color); outline-offset: 2px; border-color: var(--rb-surface-mark-color); }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"actions\"] { margin: 0; flex: 0 0 auto; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"action\"] { min-height: 52px; padding-block: 0; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"grid\"] > :not([data-slot]) { flex-basis: 100%; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"caption\"] { margin-top: 1.25rem; font-size: 1rem; line-height: 1.5; color: var(--rb-surface-muted-color); text-align: center; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"outcome\"] { width: 100%; margin-top: 1rem; font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.3; text-align: center; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"frame\"]:not(:has([data-slot=\"heading\"])) { padding-top: 4.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"][data-knob-arch-frame=\"false\"] [data-slot=\"frame\"] { padding-top: 0; }\n[data-skin=\"lantern\"] [data-treat=\"signup-arch\"] [data-slot=\"panel\"]:not(:has([data-slot=\"item\"])) { max-width: 34rem; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"signup-arch\"] [data-slot=\"frame\"] { padding: 5rem 1.25rem 2.5rem; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"signup-arch\"] [data-slot=\"grid\"] { flex-direction: column; align-items: stretch; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"signup-arch\"] :is([data-slot=\"item\"], [data-slot=\"row\"], [data-slot=\"actions\"]) { flex: none; width: 100%; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"signup-arch\"] [data-slot=\"action\"] { width: 100%; }\n}\n}\n\n/* ---------------------------------------------------- form: beside introduction, arched panel */\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"frame\"] { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"copy\"] { grid-column: 1 / 6; padding-top: 0; min-width: 0; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"head\"] { padding-top: 5rem; display: grid; justify-items: start; justify-self: start; margin-inline: 0; width: 100%; text-align: left; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"head\"] > :is([data-slot=\"heading\"], [data-slot=\"intro\"]) { text-align: left; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"head\"]::before { width: 52px; height: 9px; left: 0; transform: none; background: linear-gradient(to right, transparent 0 18px, var(--rb-surface-mark-color) 18px) center 4px / 52px 1px no-repeat; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"head\"]::after { left: 0; transform: rotate(45deg); }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"intro\"] { font-size: 1.1875rem; line-height: 1.65; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"head\"]:not(:has([data-slot=\"heading\"])) { padding-top: 0; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"head\"]:not(:has([data-slot=\"heading\"]))::before,\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"head\"]:not(:has([data-slot=\"heading\"]))::after { display: none; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"copy\"]:not(:has([data-slot=\"heading\"], [data-slot=\"intro\"])) { display: none; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"panel\"] {\n  grid-column: 7 / 13; min-width: 0; padding: 5.5rem clamp(1.5rem, 3cqi, 2.75rem) 2.5rem;\n  border: 1px solid var(--rb-surface-mark-color); border-radius: 50% 50% var(--rb-skin-radius, 10px) var(--rb-skin-radius, 10px) / 140px 140px var(--rb-skin-radius, 10px) var(--rb-skin-radius, 10px);\n}\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"panel\"]::before {\n  content: \"\"; position: absolute; inset: 8px 8px auto; height: 160px; pointer-events: none;\n  border: 1px solid var(--rb-surface-mark-color); border-bottom: 0; border-radius: 50% 50% 0 0 / 132px 132px 0 0; opacity: 0.55;\n  mask-image: linear-gradient(currentcolor 40%, transparent);\n}\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"frame\"]:not(:has([data-slot=\"heading\"], [data-slot=\"intro\"])) > [data-slot=\"panel\"] { grid-column: 1 / -1; width: 100%; max-width: 44rem; margin-inline: auto; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"][data-knob-arch-frame=\"false\"] [data-slot=\"panel\"] { border-color: transparent; border-radius: var(--rb-skin-radius, 10px); padding-top: 2.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"][data-knob-arch-frame=\"false\"] [data-slot=\"panel\"]::before { display: none; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"grid\"] { display: grid; gap: 1.25rem; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"group\"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"item\"] { min-width: 0; margin: 0; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"fact-label\"] { font-weight: 500; color: var(--rb-surface-text-color); font-size: 1rem; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"control\"] {\n  width: 100%; min-width: 0; padding: 0.875rem 1rem; border: 1px solid var(--rb-surface-muted-color);\n  border-radius: var(--rb-skin-radius, 10px); background: transparent; color: var(--rb-surface-text-color); font-family: var(--font-body); font-size: 1.0625rem;\n}\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-control=\"select\"] { padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--rb-surface-text-color) 50%), linear-gradient(135deg, var(--rb-surface-text-color) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"intro\"] > [data-slot=\"lede\"] { font-size: inherit; line-height: inherit; color: var(--rb-surface-text-color); }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"control\"]::placeholder { color: var(--rb-surface-muted-color); opacity: 1; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"mark\"] { border-color: var(--rb-surface-muted-color); }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] :is([data-slot=\"control\"], [data-slot=\"mark\"]):focus-visible { outline: 2px solid var(--rb-surface-mark-color); outline-offset: 2px; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"actions\"] { margin-top: 0.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"inline\"] { display: flex; flex-wrap: wrap; gap: 1rem; }\n[data-skin=\"lantern\"] [data-treat=\"arched-panel\"] [data-slot=\"outcome\"] { padding: 1rem 0 2rem; text-align: center; font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.3; color: var(--rb-surface-text-color); }\n@container rb-site (max-width: 1023px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-panel\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-panel\"] :is([data-slot=\"copy\"], [data-slot=\"panel\"]) { grid-column: 1 / -1; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-panel\"] [data-slot=\"copy\"] { padding-top: 0; }\n}\n}\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-panel\"] [data-slot=\"panel\"] { padding: 4.5rem 1.125rem 1.75rem; border-radius: 50% 50% var(--rb-skin-radius, 10px) var(--rb-skin-radius, 10px) / 90px 90px var(--rb-skin-radius, 10px) var(--rb-skin-radius, 10px); }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-panel\"] [data-slot=\"panel\"]::before { border-radius: 50% 50% 0 0 / 84px 84px 0 0; height: 110px; }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-panel\"][data-knob-arch-frame=\"false\"] [data-slot=\"panel\"] { padding-top: 1.75rem; border-radius: var(--rb-skin-radius, 10px); }\n  [data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"arched-panel\"] [data-slot=\"group\"] { grid-template-columns: minmax(0, 1fr); }\n}\n}\n\n/* Lucy slice 5 \u2014 Reading column. Existing rich-text nodes carry semantic hooks. */\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"copy\"] { width: 100%; max-width: 36rem; margin-inline: auto; align-items: stretch; gap: 1.25rem; text-align: left; }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"item-body\"] { width: 100%; font-size: 1.1875rem; line-height: 1.7; text-align: left; }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"lede\"] { font-size: clamp(1.3125rem, 1.8cqi, 1.5rem); line-height: 1.55; color: var(--rb-surface-text-color); }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"heading\"] { position: relative; padding-top: 2rem; margin-block: 2.25rem 1.25rem; font-size: clamp(1.75rem, 2.6cqi, 2.125rem); line-height: 1.12; text-align: center; color: var(--rb-surface-heading-color); }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"heading\"]::before { content: \"\"; position: absolute; top: 0; left: 50%; width: 92px; height: 9px; transform: translateX(-50%); background: linear-gradient(to right, var(--rb-surface-mark-color) 0 34px, transparent 34px 58px, var(--rb-surface-mark-color) 58px) center 4px / 92px 1px no-repeat; }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"heading\"]::after { content: \"\"; position: absolute; top: 1px; left: 50%; width: 7px; height: 7px; border: 1.5px solid var(--rb-surface-mark-color); transform: translateX(-50%) rotate(45deg); }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"quote\"] { position: relative; margin: 2rem 0; padding: 2.25rem 0.5rem 2rem; border: 0; border-bottom: 1px solid var(--rb-surface-line-color); text-align: center; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.3cqi, 1.875rem); line-height: 1.3; text-wrap: balance; color: var(--rb-surface-heading-color); }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"quote\"] > * { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"quote\"]::before { content: \"\"; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, var(--rb-surface-line-color) 0 calc(50% - 12px), transparent calc(50% - 12px) calc(50% + 12px), var(--rb-surface-line-color) calc(50% + 12px)); }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"quote\"]::after { content: \"\"; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; border: 1.5px solid var(--rb-surface-mark-color); transform: translateX(-50%) rotate(45deg); }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"photo\"] { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 1.5rem 0; border-radius: 50% 50% 0 0 / 90px 90px 0 0; }\n@container rb-site (min-width: 1024px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"lantern\"]:is(*, :scope) [data-treat=\"reading-column\"] [data-slot=\"photo\"] { width: calc(100% + 12rem); margin-inline: -6rem; border-radius: var(--lantern-arch-wide); }\n}\n}\n\n/* Reading-column flow owns one gap; optional title spans the whole column. */\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"item-body\"] { display: grid; gap: 1.25rem; }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"item-body\"] > * { margin-block: 0; }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"item-body\"] > [data-slot=\"heading\"] { margin-top: 2.25rem; }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"item-body\"] > [data-slot=\"quote\"] { margin-block: 2rem; }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"item-body\"] > [data-slot=\"photo\"] { margin-block: 1.5rem; }\n[data-skin=\"lantern\"] [data-treat=\"reading-column\"] [data-slot=\"copy\"] > [data-slot=\"heading\"] { width: 100%; margin-top: 0; font-size: clamp(2.25rem, 3.9cqi, 3.375rem); }\n\n/* Rich-text links use the same ink and decorative underline as the mockup. */\n[data-skin=\"lantern\"] [data-treat=\"circle-beside\"] [data-slot=\"intro\"] [data-control=\"link\"] { color: var(--rb-surface-text-color); text-decoration-color: var(--rb-surface-mark-color); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }\n\n/* =============================================================================\n * Measure skin (issue 1575 Phase 1b, D14).\n *\n * Swiss and warm: one grotesque (Instrument Sans) through weight, size and\n * width; a visible twelve-column grid; a heavy rule and a small hanging title\n * at the top of every section; square corners and no shadows. The accent is\n * only ever a small square marker, never text.\n *\n * The grid is style data, not CSS: the skin tokens in the style data set the gutter,\n * the container measure and margin, and the rail and main spans that the\n * shared section shell (arrangements.css) reads, so the rail title and the\n * content share one top line on every block. This skin dresses the shell\n * (the heavy rule, the small rail title) and the Looks.\n *\n * Bounded skin: only the shared hooks and slots, colours only from tokens and\n * resolved-surface variables. The column guides are drawn from the line\n * colour on a pseudo-element; gradient stop lengths that\n * need calc() live in custom properties.\n * ============================================================================= */\n\n[data-skin=\"measure\"] {\n  --tt-eyebrow: none;\n  --ls-eyebrow: 0;\n  --fw-eyebrow: 500;\n  --fs-eyebrow: 0.8125rem;\n}\n\n[data-skin=\"measure\"] [data-arrangement] {\n  --measure-guide-a: calc(100% - var(--rb-skin-gutter, 24px) - 1px);\n  --measure-guide-b: calc(100% - var(--rb-skin-gutter, 24px));\n  --measure-indent: calc((100% + var(--rb-skin-gutter, 24px)) / 4);\n}\n\n/* ------------------------------------------------------------ section air */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: clamp(4.5rem, 8.4cqi, 8rem); }\n[data-skin=\"measure\"] [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: clamp(3.5rem, 6cqi, 6rem); }\n\n/* -------------------------------------------- the hanging rail (dressing) */\n/* The shared shell puts the head in the rail and the body in the main measure.\n * Measure draws the heavy rule across the whole grid and sets the rail title\n * small: position and rule carry the hierarchy. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"layout\"] { border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); padding-top: 1.25rem; row-gap: 1.25rem; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"head\"] { gap: 0.25rem; max-width: none; margin: 0; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"heading\"] {\n  font-family: var(--font-heading);\n  font-size: 1.0625rem;\n  line-height: 1.35;\n  font-weight: 600;\n  letter-spacing: 0;\n  font-stretch: 100%;\n  color: var(--rb-surface-heading-color);\n}\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"intro\"] { font-size: 0.9375rem; line-height: 1.5; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"eyebrow\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"caption\"] { font-size: 0.8125rem; line-height: 1.4; font-weight: 500; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* Tabular figures for data: times, dates, places, counters. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"date\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"time\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"numeral\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"places\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"places-low\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"places-full\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"counter\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"facts\"] { font-variant-numeric: tabular-nums; }\n\n/* The marker square: the accent has this one job. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"places-low\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"sticker\"] { display: inline-flex; align-items: baseline; gap: 0.625rem; color: var(--rb-surface-text-color); font-weight: 500; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"places-low\"]::before,\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"sticker\"]::before {\n  content: \"\";\n  width: 0.56em;\n  height: 0.56em;\n  flex: none;\n  background-color: var(--rb-surface-mark-color);\n}\n\n/* Square geometry wherever this skin draws a box or a photo. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"media\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-media\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"lead\"],\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"panel\"] { border-radius: 0; box-shadow: none; }\n\n/* Owned item surfaces keep a faint sheet edge so they read where sheet and ground are close. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item\"]:not([data-surface=\"section\"]),\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"lead\"]:not([data-surface=\"section\"]) { box-shadow: inset 0 0 0 1px var(--rb-surface-line-color); }\n\n/* Column guides (knob, on by default where offered): the twelve real columns, drawn\n * from the gutter token. Decorative; they carry no text. */\n[data-skin=\"measure\"] [data-knob-column-guides=\"true\"] { overflow: clip; }\n[data-skin=\"measure\"] [data-knob-column-guides=\"true\"] [data-slot=\"frame\"] { isolation: isolate; }\n[data-skin=\"measure\"] [data-knob-column-guides=\"true\"] [data-slot=\"frame\"]::before {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n  top: -50rem;\n  bottom: -50rem;\n  left: 0;\n  right: calc(-1 * var(--rb-skin-gutter, 24px));\n  background-image: linear-gradient(to right, var(--rb-surface-line-color) 0 1px, transparent 1px var(--measure-guide-a), var(--rb-surface-line-color) var(--measure-guide-a) var(--measure-guide-b), transparent var(--measure-guide-b));\n  background-size: calc(100% / 12) 100%;\n  background-repeat: repeat-x;\n}\n\n/* ================================================================== HERO */\n/* Headline steps. Scale contrast is the point: Standard on a short line is the\n * 136px display size, set at 88% width from the style typography. */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"headline\"] {\n  font-family: var(--font-heading);\n  font-weight: 500;\n  line-height: 0.93;\n  letter-spacing: -0.042em;\n  color: var(--rb-surface-heading-color);\n  font-size: clamp(2.5rem, 5.4cqi, 5.25rem);\n}\n[data-skin=\"measure\"] [data-length=\"short\"][data-knob-headline=\"display\"] [data-slot=\"headline\"] { font-size: clamp(3.5rem, 9.6cqi, 9.5rem); }\n[data-skin=\"measure\"] [data-length=\"short\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(3.25rem, 8.6cqi, 8.5rem); }\n[data-skin=\"measure\"] [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 6cqi, 6rem); }\n[data-skin=\"measure\"] [data-length=\"medium\"][data-knob-headline=\"auto\"] [data-slot=\"headline\"] { font-size: clamp(2.75rem, 6.4cqi, 6.5rem); line-height: 0.96; }\n[data-skin=\"measure\"] [data-length=\"medium\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(2.375rem, 4.8cqi, 4.75rem); line-height: 0.98; }\n[data-skin=\"measure\"] [data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(2rem, 3.8cqi, 3.75rem); line-height: 1.02; letter-spacing: -0.03em; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"lede\"] { font-size: 1.0625rem; line-height: 1.55; color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"actions\"] { gap: 0.75rem 1.5rem; align-items: center; }\n\n/* headline-row \u00B7 guides: the display headline across the grid over the guides, then the\n * lede under a heavy rule and the photo on columns 7 to 12. */\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"frame\"] { align-items: start; row-gap: 0; }\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"headline\"] { grid-column: 1 / 12; max-width: 11.5em; margin-bottom: clamp(3rem, 6cqi, 6rem); }\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"copy\"] { grid-column: 1 / 7; align-content: start; padding-top: 0.875rem; border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); gap: 1.75rem; }\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"copy\"] > [data-slot=\"lede\"] { max-width: 24em; }\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"media\"] { grid-column: 7 / 13; aspect-ratio: 3 / 2; align-self: start; }\n[data-skin=\"measure\"] [data-treat=\"guides\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 7; }\n[data-skin=\"measure\"] [data-treat=\"guides\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 7 / 13; }\n[data-skin=\"measure\"] [data-treat=\"guides\"][data-has-photo=\"false\"] [data-slot=\"copy\"] { grid-column: 4 / 10; }\n[data-skin=\"measure\"] [data-treat=\"guides\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: 0; top: calc(100% + 0.75rem); }\n\n/* split \u00B7 grid: the copy on columns 1 to 4 under a heavy rule with the smaller display\n * headline at 92% width; the photo on 5 to 12 at 3:2. */\n[data-skin=\"measure\"] [data-treat=\"grid\"] [data-slot=\"frame\"] { align-items: start; }\n[data-skin=\"measure\"] [data-treat=\"grid\"] [data-slot=\"copy\"] { grid-column: 1 / 5; align-content: start; padding-top: 0.875rem; border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-treat=\"grid\"] [data-slot=\"media\"] { grid-column: 5 / 13; aspect-ratio: 3 / 2; }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-knob-image-position=\"left\"] [data-slot=\"copy\"] { grid-column: 9 / 13; }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-knob-image-position=\"left\"] [data-slot=\"media\"] { grid-column: 1 / 9; }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-has-photo=\"false\"] [data-slot=\"copy\"] { grid-column: 1 / 9; }\n[data-skin=\"measure\"] [data-treat=\"grid\"] [data-slot=\"headline\"] { line-height: 1; letter-spacing: -0.032em; font-stretch: 92%; }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-length] [data-slot=\"headline\"] { font-size: clamp(2.25rem, 4.3cqi, 4rem); }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: clamp(1.875rem, 3.4cqi, 3.125rem); }\n[data-skin=\"measure\"] [data-treat=\"grid\"][data-length=\"long\"] [data-slot=\"headline\"] { font-size: clamp(1.75rem, 3cqi, 2.75rem); }\n[data-skin=\"measure\"] [data-treat=\"grid\"] [data-slot=\"media\"] [data-slot=\"sticker\"] { position: absolute; left: 0; top: calc(100% + 0.75rem); }\n\n/* copy-over-gallery \u00B7 full-grid: the headline across the grid, the lede and actions set in\n * to the main measure, then the photo across all twelve columns. */\n[data-skin=\"measure\"] [data-treat=\"full-grid\"] [data-slot=\"copy\"] { grid-column: 1 / -1; gap: 1.75rem; }\n[data-skin=\"measure\"] [data-treat=\"full-grid\"] [data-slot=\"lede\"],\n[data-skin=\"measure\"] [data-treat=\"full-grid\"] [data-slot=\"actions\"] { margin-inline-start: var(--measure-indent); max-width: 34em; }\n[data-skin=\"measure\"] [data-treat=\"full-grid\"] [data-slot=\"gallery\"] { margin-top: 3.5rem; }\n[data-skin=\"measure\"] [data-treat=\"full-grid\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 21 / 9; }\n[data-skin=\"measure\"] [data-treat=\"full-grid\"] [data-slot=\"gallery\"] [data-slot=\"sticker\"] { position: absolute; left: 0; top: calc(100% + 0.75rem); }\n\n/* page-head \u00B7 facts-strip: the display title over the guides, the lede set in, a heavy rule\n * under it all. Facts (a later content field) would follow as a strip of figures. */\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"copy\"] { grid-column: 1 / -1; gap: 1.75rem; padding-bottom: clamp(2.5rem, 4cqi, 4rem); border-bottom: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"lede\"],\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"actions\"] { margin-inline-start: var(--measure-indent); max-width: 36em; }\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"lede\"] { font-size: clamp(1.1875rem, 1.6cqi, 1.375rem); }\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"facts\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3.5rem, 6cqi, 6rem); }\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"facts\"] > * { padding-top: 0.875rem; border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-treat=\"facts-strip\"] [data-slot=\"caption\"] { order: -1; }\n\n/* ========================================================== FEATURE CARDS */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-title\"] {\n  font-family: var(--font-heading);\n  font-size: 1.375rem;\n  line-height: 1.25;\n  font-weight: 500;\n  letter-spacing: -0.01em;\n  font-stretch: 100%;\n  color: var(--rb-surface-heading-color);\n}\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-text\"] { color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-body\"] { display: grid; gap: 0.875rem; align-content: start; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-media\"] { margin: 0 0 1.125rem; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"item-actions\"] { font-weight: 500; }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"numeral\"] {\n  font-size: 56px;\n  line-height: 0.9;\n  font-weight: 400;\n  letter-spacing: -0.04em;\n  font-stretch: 88%;\n  color: var(--rb-surface-text-color);\n}\n\n/* cards \u00B7 sheets: square sheets in the main measure, the photo flush at the top. */\n[data-skin=\"measure\"] [data-treat=\"sheets\"] [data-slot=\"items\"] { gap: 2.5rem var(--rb-skin-gutter, 24px); }\n[data-skin=\"measure\"] [data-treat=\"sheets\"] [data-slot=\"item-media\"] { margin: 0; aspect-ratio: 3 / 2; }\n[data-skin=\"measure\"] [data-treat=\"sheets\"] [data-slot=\"item-body\"] { padding: 1.5rem; }\n\n/* cards \u00B7 open: boxless columns in the main measure. */\n[data-skin=\"measure\"] [data-treat=\"open\"] [data-slot=\"items\"] { gap: 3.5rem var(--rb-skin-gutter, 24px); }\n[data-skin=\"measure\"] [data-treat=\"open\"] [data-slot=\"item\"] { padding: 0; }\n[data-skin=\"measure\"] [data-treat=\"open\"] [data-slot=\"item-media\"] { aspect-ratio: 4 / 3; }\n\n/* lead-support \u00B7 breakout: the lead is the brand field (statement role) at card scale,\n * its photo on 8 of the main columns and its text beside it; the rest follow as hairline columns. */\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"items\"] { column-gap: var(--rb-skin-gutter, 24px); }\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"lead\"] { column-gap: var(--rb-skin-gutter, 24px); padding: clamp(1.25rem, 2.8cqi, 2.5rem); margin-bottom: 0.5rem; }\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"] { grid-column: 1 / 7; aspect-ratio: 4 / 3; min-height: 0; margin: 0; }\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { grid-column: 7 / 13; align-self: start; gap: 1.25rem; }\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"lead\"] [data-slot=\"item-title\"] { font-size: clamp(1.875rem, 3cqi, 2.75rem); letter-spacing: -0.03em; line-height: 1.02; font-stretch: 92%; }\n[data-skin=\"measure\"] [data-treat=\"breakout\"] [data-slot=\"items\"] > [data-slot=\"item\"] { padding-top: 0.875rem; border-top: 1px solid var(--rb-surface-line-color); }\n\n/* index \u00B7 price-index: hairline rows in the main measure; title and text left, actions right. */\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item\"] {\n  grid-template-columns: minmax(0, 1fr) auto;\n  padding-block: 1.375rem 1.5rem;\n  border-bottom: 1px solid var(--rb-surface-line-color);\n}\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item\"]:first-child { padding-top: 0; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item\"] > *,\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item\"] > [data-slot=\"item-title\"] { grid-column: 1; grid-row: auto; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item\"] > [data-slot=\"item-actions\"] { grid-column: 2; grid-row: 1 / span 3; align-self: start; justify-self: end; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"] [data-slot=\"item-text\"] { max-width: 34em; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] { grid-template-columns: 4rem minmax(0, 1fr) auto; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > * { grid-column: 2; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > [data-slot=\"numeral\"] { grid-column: 1; grid-row: 1 / span 3; font-size: 1.375rem; font-weight: 500; letter-spacing: 0; font-stretch: 100%; }\n[data-skin=\"measure\"] [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > [data-slot=\"item-actions\"] { grid-column: 3; }\n\n/* sequence \u00B7 numbered: large light numerals over a hairline. Only real sequences are numbered. */\n[data-skin=\"measure\"] [data-treat=\"numbered\"] [data-slot=\"items\"] { gap: 2.5rem var(--rb-skin-gutter, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }\n[data-skin=\"measure\"] [data-treat=\"numbered\"] [data-slot=\"item-media\"] { display: none; }\n[data-skin=\"measure\"] [data-treat=\"numbered\"] [data-slot=\"numeral\"] { font-size: 72px; padding-bottom: 1.125rem; margin-bottom: 0.375rem; border-bottom: 1px solid var(--rb-surface-line-color); }\n\n/* ============================================================== CALENDAR */\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"item-title\"] { font-size: 1.375rem; }\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"item-meta\"],\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"time-length\"],\n[data-skin=\"measure\"] [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]),\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"places\"],\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"places-full\"] { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"places-low\"] { font-size: 0.9375rem; }\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"day\"],\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"time-start\"] { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; font-stretch: 100%; color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]) { color: var(--rb-surface-text-color); font-size: 1.375rem; line-height: 1.2; }\n\n/* ledger \u00B7 rows: hairline rows, the date as one line. */\n[data-skin=\"measure\"] [data-treat=\"rows\"] [data-slot=\"row\"],\n[data-skin=\"measure\"] [data-treat=\"rows\"] [data-slot=\"row-continued\"] {\n  grid-template-columns: 7rem minmax(0, 1fr) auto;\n  align-items: baseline;\n  padding-block: 1.25rem;\n  border-top: 1px solid var(--rb-surface-line-color);\n}\n[data-skin=\"measure\"] [data-treat=\"rows\"][data-mode=\"list\"] [data-slot=\"list\"] { border-bottom: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"rows\"] [data-slot=\"date\"] { flex-direction: row; gap: 0.375rem; align-items: baseline; }\n\n/* day-groups \u00B7 rail: a heavy rule on each day, hairlines between its sessions. */\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"group\"] { border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); padding-block: 0.875rem 0.5rem; }\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"group-label\"] { gap: 0.125rem; }\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"group-day\"] { font-size: 1.0625rem; font-weight: 600; color: var(--rb-surface-heading-color); }\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"group-date\"] { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"row\"] { border-bottom: 1px solid var(--rb-surface-line-color); align-items: baseline; padding-top: 0.25rem; }\n[data-skin=\"measure\"] [data-treat=\"rail\"] [data-slot=\"row\"]:last-child { border-bottom: 0; }\n\n/* grid \u00B7 big-day: square sheets (the card role) led by a large day number. */\n[data-skin=\"measure\"] [data-treat=\"big-day\"] [data-slot=\"list\"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rb-skin-gutter, 24px); }\n[data-skin=\"measure\"] [data-treat=\"big-day\"] [data-slot=\"item\"] { display: grid; align-content: start; gap: 0.875rem; padding: 1.5rem 1.5rem 1.75rem; }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"big-day\"] [data-slot=\"date\"] { flex-direction: row; align-items: flex-end; gap: 0.625rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] [data-treat=\"big-day\"] [data-slot=\"date\"] [data-slot=\"day\"] { font-size: 72px; line-height: 0.8; font-weight: 500; letter-spacing: -0.05em; font-stretch: 88%; }\n[data-skin=\"measure\"] [data-treat=\"big-day\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]) { font-size: 0.9375rem; font-weight: 500; }\n[data-skin=\"measure\"] [data-treat=\"big-day\"] [data-slot=\"item-body\"] { padding: 0; }\n\n/* compact \u00B7 compact: no box; a heavy rule over the panel, the marker on the first row. */\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"panel\"] { border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); padding-top: 0.875rem; }\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"panel-heading\"] { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.5rem; }\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"row\"] { border-top: 1px solid var(--rb-surface-line-color); padding-block: 0.75rem; }\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"date\"] [data-slot=\"day\"],\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"time-start\"],\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"date-label\"] { font-size: 1.0625rem; }\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"item-title\"] { font-size: 1.1875rem; }\n[data-skin=\"measure\"] [data-treat=\"compact\"] [data-slot=\"list\"] > [data-slot=\"row\"]:first-child [data-slot=\"time\"]::before {\n  content: \"\";\n  display: inline-block;\n  width: 0.56em;\n  height: 0.56em;\n  margin-right: 0.5rem;\n  background-color: var(--rb-surface-mark-color);\n}\n\n/* month-grid \u00B7 fill and month-day \u00B7 day-rail: square cells on hairlines, today marked by the square. */\n[data-skin=\"measure\"] :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) [data-slot=\"grid\"] { gap: 0; border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); }\n[data-skin=\"measure\"] :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) [data-slot=\"group-label\"] { padding: 0.625rem 0.5rem 0.625rem 0; font-size: 0.8125rem; font-weight: 500; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); border-bottom: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) [data-slot=\"date\"] { gap: 0.25rem; padding: 0.5rem 0.5rem 0.625rem 0; border-bottom: 1px solid var(--rb-surface-line-color); min-height: 6.5rem; }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"date\"] { min-height: 4rem; }\n[data-skin=\"measure\"] :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) :is([data-slot=\"control\"], [data-slot=\"date-label\"]) {\n  justify-self: start;\n  display: inline-flex;\n  align-items: baseline;\n  gap: 0.375rem;\n  width: auto;\n  min-width: 2.75rem;\n  height: auto;\n  min-height: 2.75rem;\n  padding: 0;\n  border: 0;\n  justify-content: start;\n  font-size: 1.375rem;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  letter-spacing: -0.01em;\n}\n\n[data-skin=\"measure\"] [data-treat=\"fill\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: block; font-size: 0.8125rem; line-height: 1.35; color: var(--rb-surface-text-color); padding-top: 0.25rem; border-top: 1px solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] [data-treat=\"fill\"] [data-slot=\"date\"] [data-slot=\"time\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"date\"] [data-slot=\"item-meta\"] { font-size: 0.8125rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"panel\"] { border-top: var(--rb-skin-rule, 2px) solid var(--rb-surface-text-color); padding-top: 0.875rem; }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"panel-heading\"] { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.5rem; }\n[data-skin=\"measure\"] [data-treat=\"day-rail\"] [data-slot=\"panel\"] [data-slot=\"row\"] { display: block; padding-block: 0.75rem; border-top: 1px solid var(--rb-surface-line-color); }\n\n/* ========================================================== TESTIMONIALS */\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"quote\"] { color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"attribution\"] { font-size: 0.9375rem; color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"attribution\"] [data-slot=\"item-title\"] { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--rb-surface-text-color); }\n\n/* lead-rest and single \u00B7 hanging: the lead quote large in the main measure with its opening\n * mark hung into the gutter; the small quotes on hairlines below. */\n[data-skin=\"measure\"] [data-treat=\"hanging\"] [data-slot=\"lead\"] > [data-slot=\"quote\"],\n[data-skin=\"measure\"] [data-arrangement=\"single\"][data-treat=\"hanging\"] [data-slot=\"quote\"],\n[data-skin=\"measure\"] [data-treat=\"counter\"] [data-slot=\"quote\"] {\n  position: relative;\n  font-size: clamp(1.5625rem, 2.55cqi, 2.375rem);\n  line-height: 1.2;\n  letter-spacing: -0.018em;\n}\n[data-skin=\"measure\"] [data-treat=\"hanging\"] [data-slot=\"lead\"] > [data-slot=\"quote\"]::before,\n[data-skin=\"measure\"] [data-arrangement=\"single\"][data-treat=\"hanging\"] [data-slot=\"quote\"]::before,\n[data-skin=\"measure\"] [data-treat=\"counter\"] [data-slot=\"quote\"]::before { content: \"\\201C\"; position: absolute; right: 100%; top: 0; }\n[data-skin=\"measure\"] [data-arrangement=\"lead-rest\"][data-treat=\"hanging\"] [data-slot=\"items\"] { row-gap: 3.5rem; column-gap: var(--rb-skin-gutter, 24px); }\n[data-skin=\"measure\"] [data-arrangement=\"lead-rest\"][data-treat=\"hanging\"] [data-slot=\"lead\"] { gap: 1.25rem; }\n[data-skin=\"measure\"] [data-arrangement=\"lead-rest\"][data-treat=\"hanging\"] [data-slot=\"items\"] > [data-slot=\"item\"],\n[data-skin=\"measure\"] [data-treat=\"hairline\"] [data-slot=\"items\"] > [data-slot=\"item\"] {\n  padding-top: 1rem;\n  border-top: 1px solid var(--rb-surface-line-color);\n  gap: 0.75rem;\n}\n\n/* slides \u00B7 counter: the quote large, a hairline, then the count on the left and square arrows right. */\n[data-skin=\"measure\"] [data-treat=\"counter\"] [data-slot=\"controls\"] { border-top: 1px solid var(--rb-surface-line-color); padding-top: 0.875rem; margin-top: 1.75rem; }\n[data-skin=\"measure\"] [data-treat=\"counter\"] [data-slot=\"counter\"] { order: -1; margin-right: auto; font-size: 1.375rem; font-weight: 500; color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"controls\"] [data-slot=\"control\"] {\n  width: 44px;\n  height: 44px;\n  border-radius: 0;\n  border: 1.5px solid var(--rb-surface-text-color);\n  color: var(--rb-surface-text-color);\n  background-color: transparent;\n}\n\n/* ================================================================= PHONE */\n/* Phone headline steps fit the longest word each length allows in a 358px column at 88% width:\n * short (12 characters, \"Commonwealth\") at 52px, medium (18) at 36px; long titles wrap.\n * Phone rules qualify the root with :is(*, :scope): the preview container generator wraps them\n * in a scope rule, where a selector reaches the scope root only through :scope. */\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"measure\"]:is(*, :scope) [data-arrangement] { --measure-indent: 0px; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-arrangement] [data-slot=\"section\"] { --rb-section-pad-y: 4rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-arrangement][data-length] [data-slot=\"section\"] { --rb-section-pad-y: 3rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-knob-column-guides=\"true\"] [data-slot=\"frame\"]::before { background-size: calc(100% / 4) 100%; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-length=\"short\"] [data-slot=\"headline\"] { font-size: 3.25rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-length=\"short\"][data-knob-headline=\"quiet\"] [data-slot=\"headline\"] { font-size: 2.75rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-length=\"medium\"] [data-slot=\"headline\"] { font-size: 2.25rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-length=\"long\"] [data-slot=\"headline\"] { font-size: 1.875rem; }\n\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat] [data-slot=\"copy\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat] [data-slot=\"media\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat][data-knob-image-position=\"left\"] [data-slot=\"copy\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat][data-knob-image-position=\"left\"] [data-slot=\"media\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"guides\"] [data-slot=\"headline\"] { grid-column: 1 / -1; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"guides\"] [data-slot=\"headline\"] { margin-bottom: 1.5rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"grid\"] [data-slot=\"media\"] { order: 2; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat] [data-slot=\"media\"]:has([data-slot=\"sticker\"]) { margin-bottom: 2.25rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"full-grid\"][data-photo-count=\"1\"] [data-slot=\"gallery\"] [data-slot=\"media\"] { aspect-ratio: 4 / 3; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"facts-strip\"] [data-slot=\"facts\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }\n\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"breakout\"] [data-slot=\"lead\"] > [data-slot=\"item-media\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"breakout\"] [data-slot=\"lead\"] > [data-slot=\"item-body\"] { grid-column: 1 / -1; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"price-index\"] [data-slot=\"item\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"price-index\"] [data-slot=\"item\"] > [data-slot=\"item-actions\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"price-index\"][data-knob-card-marker=\"numbers\"] [data-slot=\"item\"] > * { grid-column: 1; grid-row: auto; justify-self: start; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"numbered\"] [data-slot=\"items\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"numbered\"] [data-slot=\"item\"] { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"numbered\"] [data-slot=\"item\"] > * { grid-column: 2; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"numbered\"] [data-slot=\"numeral\"] { grid-column: 1; grid-row: 1 / span 3; font-size: 44px; border: 0; padding: 0; margin: 0; }\n\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"rows\"] [data-slot=\"row\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"rows\"] [data-slot=\"row-continued\"] { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 0.875rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-arrangement][data-treat=\"rows\"] [data-slot=\"action\"] { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 0.5rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"rows\"] [data-slot=\"date\"] { flex-direction: column; gap: 0; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-mode=\"list\"] [data-slot=\"date\"] [data-slot=\"day\"],\n  [data-skin=\"measure\"]:is(*, :scope) [data-mode=\"list\"] :is([data-slot=\"weekday\"], [data-slot=\"month\"]),\n  [data-skin=\"measure\"]:is(*, :scope) [data-mode=\"list\"] [data-slot=\"time-start\"] { font-size: 1.1875rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"big-day\"] [data-slot=\"list\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"measure\"]:is(*, :scope) :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) [data-slot=\"date\"] { min-height: 3.25rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"fill\"] [data-slot=\"date\"] [data-slot=\"item\"] { display: none; }\n  [data-skin=\"measure\"]:is(*, :scope) :is([data-treat=\"fill\"], [data-treat=\"day-rail\"]) :is([data-slot=\"control\"], [data-slot=\"date-label\"]) { font-size: 1.0625rem; }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"day-rail\"] [data-slot=\"frame\"] { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"hanging\"] [data-slot=\"lead\"] > [data-slot=\"quote\"]::before,\n  [data-skin=\"measure\"]:is(*, :scope) [data-arrangement=\"single\"][data-treat=\"hanging\"] [data-slot=\"quote\"]::before,\n  [data-skin=\"measure\"]:is(*, :scope) [data-treat=\"counter\"] [data-slot=\"quote\"]::before { position: static; }\n}\n}\n\n[data-skin=\"measure\"] [data-arrangement] [data-slot=\"attribution\"] { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n[data-skin=\"measure\"] [data-arrangement] :is([data-slot=\"lede\"], [data-slot=\"intro\"], [data-slot=\"item-meta\"], [data-slot=\"attribution\"]) { --rb-surface-supporting-color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); }\n\n/* Event date parts are written as entered, with no text-transform. */\n[data-skin=\"measure\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] { text-transform: none; }\n\n[data-skin=\"measure\"] [data-arrangement][data-mode=\"list\"] [data-slot=\"date\"] :is([data-slot=\"weekday\"], [data-slot=\"day\"], [data-slot=\"month\"]) { text-transform: none; }\n\n/* Duration and fee pairs share the measured catalogue register. */\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"facts\"] { border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-block: 0.75rem; justify-content: space-between; }\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"facts\"] [data-slot=\"fact-value\"] { font-variant-numeric: tabular-nums; font-weight: 700; }\n[data-skin=\"measure\"] [data-slot=\"figure-value\"] { font-family: var(--font-heading); font-weight: 900; font-size: clamp(3rem, 7cqi, 6rem); }\n[data-skin=\"measure\"] [data-slot=\"chip\"] { border-bottom: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] [data-slot=\"schedule\"] { font-variant-numeric: tabular-nums; }\n\n/* The individual-page facts strip, populated by live event data. */\n[data-skin=\"measure\"] [data-arrangement=\"event-header\"] [data-slot=\"facts\"] { border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); padding-block: 1.25rem; }\n[data-skin=\"measure\"] [data-arrangement=\"event-header\"] [data-slot=\"fact-value\"] { font-variant-numeric: tabular-nums; font-size: 1.25rem; }\n[data-skin=\"measure\"] [data-arrangement=\"event-header\"] [data-slot=\"headline\"] { font-weight: 800; letter-spacing: -0.04em; }\n\n/* price-index on a live catalogue: the words run down the main column, the duration and fee sit\n * in their own column and the action ends the row, as in the mockup session index. */\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) { grid-template-columns: minmax(0, 1fr) minmax(0, 13rem) auto; column-gap: 2rem; align-items: start; }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) > * { grid-column: 1; grid-row: auto; }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) > [data-slot=\"facts\"] { grid-column: 2; grid-row: 1 / span 4; }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) > [data-slot=\"item-actions\"] { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; justify-self: end; }\n@container rb-site (max-width: 767px) {\n@scope ([data-rb-responsive-mode=\"container\"]) to (:scope [data-rb-responsive-mode]) {\n[data-skin=\"measure\"]:is(*, :scope) [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) { grid-template-columns: minmax(0, 1fr); }\n  [data-skin=\"measure\"]:is(*, :scope) [data-arrangement][data-treat=\"price-index\"] [data-card-list-item]:is([data-slot]) > :is([data-slot=\"facts\"], [data-slot=\"item-actions\"]) { grid-column: 1; grid-row: auto; justify-self: start; }\n}\n}\n\n/* Next three: the date reads on one line (\"Mon 5 Oct\") and the sheet keeps an inner margin. */\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"compact\"] :is([data-slot=\"row\"], [data-slot=\"row-continued\"]) [data-slot=\"date\"] { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 0.3em; }\n[data-skin=\"measure\"] [data-arrangement][data-treat=\"compact\"] [data-slot=\"panel\"]:is([data-slot]) { padding: 0.875rem 1.25rem 1.25rem; }\n/* Catalogue group headings sit one step under the rail heading, in the body weight scale. */\n[data-skin=\"measure\"] [data-arrangement] { --rb-skin-group-heading-size: 1.0625rem; }\n\n/* Live next dates use the same card parts in every arrangement. */\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"dates\"] { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; padding-block: 0.625rem; border-top: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); font-variant-numeric: tabular-nums; }\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"date-places\"] { color: var(--rb-surface-muted-color, var(--rb-surface-text-color)); font-size: 0.875rem; }\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"navigation\"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; padding-block: 0.875rem; margin-bottom: 1rem; border-block: var(--rb-skin-rule, 1px) solid var(--rb-surface-line-color); }\n[data-skin=\"measure\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { font: inherit; color: var(--rb-surface-text-color); padding: 0.5rem 0.75rem; border: 1px solid var(--rb-surface-line-color); border-radius: var(--rb-skin-radius, 0); }\n\n[data-skin=\"measure\"] [data-mode=\"list\"] [data-slot=\"time\"] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-surface-text-color); }\n[data-skin=\"measure\"] [data-card-list-item] [data-slot=\"dates\"] [data-slot=\"date\"] { font-size: 0.9375rem; }\n[data-skin=\"measure\"] [data-slot=\"navigation\"] [data-slot=\"control\"] { border-radius: 0; font-size: 0.9375rem; }";