@riverbankcms/sdk 0.80.0 → 0.82.0

package/dist/styles/index.css

@@ -1577,50 +1577,50 @@
 
   .rb-container-pad-none {
     --rb-card-pad: 0rem;
-    padding: var(--rb-card-pad);
+    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
   }
   .rb-container-pad-compact {
     --rb-card-pad: 1rem;
-    padding: var(--rb-card-pad);
+    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
   }
   .rb-container-pad-cozy {
     --rb-card-pad: 1.5rem;
-    padding: var(--rb-card-pad);
+    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
   }
   .rb-container-pad-medium {
     --rb-card-pad: 1.5rem;
-    padding: var(--rb-card-pad);
+    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
   }
   .rb-container-pad-comfortable {
     --rb-card-pad: 2rem;
-    padding: var(--rb-card-pad);
+    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
   }
   .rb-container-pad-spacious {
     --rb-card-pad: 2.5rem;
-    padding: var(--rb-card-pad);
+    padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
   }
 
   @media (min-width: 640px) {
     @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
       .rb-container-pad-compact {
         --rb-card-pad: 1.5rem;
-        padding: var(--rb-card-pad);
+        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
       }
       .rb-container-pad-cozy {
         --rb-card-pad: 2rem;
-        padding: var(--rb-card-pad);
+        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
       }
       .rb-container-pad-medium {
         --rb-card-pad: 2rem;
-        padding: var(--rb-card-pad);
+        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
       }
       .rb-container-pad-comfortable {
         --rb-card-pad: 2.5rem;
-        padding: var(--rb-card-pad);
+        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
       }
       .rb-container-pad-spacious {
         --rb-card-pad: 3.5rem;
-        padding: var(--rb-card-pad);
+        padding: calc(var(--rb-card-pad) + var(--rb-opening-content-clearance, 0px)) var(--rb-card-pad) var(--rb-card-pad);
       }
     }
   }
@@ -1795,15 +1795,32 @@
 
   :where(.theme-scope)
     :where([data-site-document-overlay-content='true'])
-    :where([data-block]):first-of-type
+    :where([data-page-block-position='first'], [data-page-block-position='only'])
     > :where([data-slot='section'])
-    > :where(.rb-container) {
-    padding-top: calc(
+    > .rb-container {
+    --rb-opening-content-clearance: calc(
       var(--site-overlay-header-clearance, 0px) +
-        var(--site-overlay-opening-content-extra-pad, 0px)
+        var(--site-overlay-opening-content-extra-pad, clamp(1rem, 2vw, 1.75rem))
     );
   }
 
+  :where(.theme-scope)
+    :where([data-site-document-overlay-content='true'])
+    :where([data-page-block-position='first'], [data-page-block-position='only'])
+    > :where([data-slot='section'])
+    > .rb-container:not([class*='rb-container-pad-']) {
+    padding-top: var(--rb-opening-content-clearance, 0px);
+  }
+
+  :where(.theme-scope)
+    :where([data-site-document-overlay-content='true'])
+    :where([data-page-block-position='first'], [data-page-block-position='only'])
+    > :where([data-slot='section'])
+    > .rb-container
+    :where([class*='rb-container-pad-']) {
+    --rb-opening-content-clearance: 0px;
+  }
+
   /* -------------------------------------------------------------------------- */
   /* Header: Mobile nav overlay transitions                                      */
   /* -------------------------------------------------------------------------- */
@@ -1900,7 +1917,7 @@
     border: 1px solid rgb(var(--tb-border) / 0.82);
     background: rgb(var(--tb-surface) / 0.96);
     color: rgb(var(--tb-text));
-    box-shadow: 0 10px 28px rgb(var(--tb-neutral-950) / 0.12);
+    box-shadow: none;
   }
 
   /*
@@ -2073,7 +2090,7 @@
 
   /* Neutral prose uses theme text color by default */
   :where(.theme-scope) .rb-prose-neutral {
-    color: rgb(var(--tb-text));
+    color: var(--section-text-color, rgb(var(--tb-text)));
   }
 
   :where(.theme-scope) .rb-prose p,
@@ -2106,8 +2123,11 @@
   }
 
   :where(.theme-scope) .rb-prose a {
-    /* Global prose link style with theme-level overrides */
-    color: var(--rb-prose-link-color, rgb(var(--tb-primary)));
+    --rb-prose-effective-link-color: var(
+      --section-link-color,
+      var(--rb-prose-link-color, rgb(var(--tb-primary)))
+    );
+    color: var(--rb-prose-effective-link-color);
     text-decoration-line: var(--rb-prose-link-decoration-line, underline);
     text-decoration-style: var(--rb-prose-link-underline-style, solid);
     text-decoration-thickness: var(
@@ -2116,8 +2136,15 @@
     );
     text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
     text-decoration-color: var(
-      --rb-prose-link-decoration-color,
-      rgba(var(--tb-primary), 0.3)
+      --section-link-decoration-color,
+      var(
+        --rb-prose-link-decoration-color,
+        color-mix(
+          in srgb,
+          var(--rb-prose-effective-link-color) 35%,
+          transparent
+        )
+      )
     );
     transition:
       color 150ms ease,
@@ -2127,20 +2154,20 @@
   :where(.theme-scope) .rb-prose a:hover {
     color: var(
       --rb-prose-link-hover-color,
-      var(--rb-prose-link-color, rgb(var(--tb-primary)))
+      var(--rb-prose-effective-link-color)
     );
     text-decoration-color: var(
       --rb-prose-link-hover-decoration-color,
       var(
         --rb-prose-link-hover-color,
-        var(--rb-prose-link-color, rgb(var(--tb-primary)))
+        var(--rb-prose-effective-link-color)
       )
     );
   }
 
   :where(.theme-scope) .rb-prose blockquote {
     /* Blockquotes use muted text color */
-    color: rgb(var(--tb-mutedText));
+    color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
     border-left-color: rgb(var(--tb-border));
   }
 
@@ -2771,6 +2798,13 @@
     transition: padding 300ms var(--motion-ease, ease);
   }
 
+  :where(.theme-scope)
+    .header-variant-classic
+    .rb-header-layout:has(.header-logo-accommodation-popout-badge) {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
   /* Vertical variants need more breathing room
    Note: header-variant-* is on Section (ancestor), rb-header-layout on inner div */
   :where(.theme-scope) .header-variant-centered .rb-header-layout {
@@ -2864,17 +2898,46 @@
     background: var(--color-surface, #fff);
     box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.08));
     padding: 0.5rem;
+    transition:
+      margin 300ms var(--motion-ease, ease),
+      padding 300ms var(--motion-ease, ease);
   }
 
   :where(.theme-scope) .header-logo-accommodation-popout-badge {
     position: relative;
     z-index: 1;
-    margin-block: -0.35rem -0.9rem;
+    margin-block: 0 -1.25rem;
   }
 
   :where(.theme-scope)
     .header-logo-size-display.header-logo-accommodation-popout-badge {
-    margin-block: -0.75rem -2rem;
+    margin-block: 0 -4rem;
+  }
+
+  :where(.theme-scope)
+    .rb-header-shrink.header-scrolled.header-variant-classic
+    .header-logo-size-display.header-logo-accommodation-plate,
+  :where(.theme-scope)
+    .rb-header-shrink.header-scrolled.header-variant-classic
+    .header-logo-size-display.header-logo-accommodation-popout-badge,
+  :where(.theme-scope)
+    .rb-header-shrink.header-scrolled.header-variant-classic
+    .header-logo-size-display.header-logo-accommodation-centered-masthead,
+  :where(.theme-scope)
+    .rb-header-shrink.header-scrolled.header-variant-centered
+    .header-logo-size-display.header-logo-accommodation-centered-badge,
+  :where(.theme-scope)
+    .rb-header-shrink.header-scrolled.header-variant-centered
+    .header-logo-size-display.header-logo-accommodation-centered-masthead {
+    position: relative;
+    z-index: 1;
+    margin-block: 0 -2.75rem;
+  }
+
+  :where(.theme-scope)
+    .rb-header-shrink.header-scrolled.header-variant-centered
+    .rb-header-layout {
+    gap: 0.75rem;
   }
 
   :where(.theme-scope) .header-logo-accommodation-centered-masthead {
@@ -2933,7 +2996,7 @@
   :where(.theme-scope)
     .rb-header-shrink.header-scrolled
     .header-logo-size-display.rb-header-logo-lg {
-    height: 5rem;
+    height: 3.75rem;
   }
   :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
     font-size: 0.875rem;
@@ -2950,10 +3013,39 @@
       height: 5.5rem;
     }
 
+    :where(.theme-scope)
+      .rb-header-shrink.header-scrolled
+      .header-logo-size-display.rb-header-logo-sm,
+    :where(.theme-scope)
+      .rb-header-shrink.header-scrolled
+      .header-logo-size-display.rb-header-logo-lg {
+      height: 3.5rem;
+    }
+
     :where(.theme-scope) .header-logo-accommodation-popout-badge {
       margin-block: 0;
     }
 
+    :where(.theme-scope)
+      .rb-header-shrink.header-scrolled
+      .header-logo-size-display.header-logo-accommodation-plate,
+    :where(.theme-scope)
+      .rb-header-shrink.header-scrolled
+      .header-logo-size-display.header-logo-accommodation-popout-badge,
+    :where(.theme-scope)
+      .rb-header-shrink.header-scrolled
+      .header-logo-size-display.header-logo-accommodation-centered-masthead,
+    :where(.theme-scope)
+      .rb-header-shrink.header-scrolled
+      .header-logo-size-display.header-logo-accommodation-centered-badge,
+    :where(.theme-scope)
+      .rb-header-shrink.header-scrolled
+      .header-logo-size-display.header-logo-accommodation-centered-masthead {
+      position: relative;
+      z-index: 1;
+      margin-block: 0 -2.75rem;
+    }
+
     :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
       font-size: 0.75rem;
     }
@@ -3150,6 +3242,14 @@
   margin-inline: 0;
 }
 
+:where(.theme-scope) :where([data-block="event-registration"].event-registration--embedded) .er-container {
+  max-width: none;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
 /* Empty/unavailable states */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-empty {
   border-radius: var(--rb-block-radius);
@@ -3192,13 +3292,26 @@
 }
 
 /* Ticket counter */
+:where(.theme-scope) :where([data-block="event-registration"]) .er-ticket-counter-group {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  flex-wrap: wrap;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-counter {
+  gap: 0.625rem;
+}
+
 :where(.theme-scope) :where([data-block="event-registration"]) .er-counter-btn {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2.125rem;
+  height: 2.125rem;
   border-radius: 50%;
   border: 1px solid var(--er-border);
   background: transparent;
   cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
   transition: border-color var(--rb-block-transition) ease;
 }
 
@@ -3211,6 +3324,13 @@
   cursor: not-allowed;
 }
 
+:where(.theme-scope) :where([data-block="event-registration"]) .er-ticket-counter-limit {
+  margin: 0;
+  color: var(--er-on-surface-muted);
+  font-size: 0.8125rem;
+  line-height: 1.35;
+}
+
 /* Form inputs */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-input {
   width: 100%;
@@ -3342,6 +3462,38 @@
   color: var(--er-on-surface);
 }
 
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid .er-event-card {
+  padding: 0.75rem 0;
+  border-width: 0 0 var(--rb-event-tile-border-width, var(--rb-border-width, 1px)) 0;
+  border-style: solid;
+  border-radius: 0;
+  background: transparent;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid .er-event-card:last-child {
+  border-bottom-width: 0;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-option {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-option-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid .er-event-title {
+  font-size: 1rem;
+  line-height: 1.35;
+  font-weight: 600;
+}
+
 :where(.theme-scope) :where([data-block="event-registration"]) .er-event-card .er-event-title {
   color: var(--er-on-surface);
 }
@@ -3351,6 +3503,10 @@
   margin: 0;
 }
 
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid .er-event-card .er-text {
+  line-height: 1.4;
+}
+
 :where(.theme-scope) :where([data-block="event-registration"]) .er-event-card .er-text--muted {
   color: var(--er-on-surface-muted);
   opacity: 1;
@@ -3365,15 +3521,27 @@
   color: var(--er-on-surface-disabled);
 }
 
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid .er-event-card--selected {
+  background: transparent;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid .er-event-card--selected .er-event-title {
+  color: rgb(var(--tb-primary));
+}
+
 :where(.theme-scope) :where([data-block="event-registration"]) .er-event-card--disabled .er-text--muted,
 :where(.theme-scope) :where([data-block="event-registration"]) .er-event-card--disabled .er-text--faint {
   color: var(--er-on-surface-disabled-detail);
 }
 
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid .er-capacity-badge {
+  white-space: nowrap;
+}
+
 :where(.theme-scope) :where([data-block="event-registration"]) .er-counter-value {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 700;
-  width: 2rem;
+  width: 1.625rem;
   text-align: center;
 }
 
@@ -3388,17 +3556,11 @@
   gap: 0.75rem;
 }
 
-/* Event selection cards grid (1 col mobile, 2 cols on larger screens) */
+/* Event/date selection rows */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  gap: 0.75rem;
-}
-
-@media (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+  gap: 0;
 }
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-row {
@@ -4021,35 +4183,6 @@
   pointer-events: none;
 }
 
-:where(.theme-scope)
-  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
-  .event-card-badges,
-:where(.theme-scope)
-  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
-  .event-card-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-:where(.theme-scope)
-  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
-  .event-card-badge,
-:where(.theme-scope)
-  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
-  .event-card-tag {
-  display: inline-flex;
-  align-items: center;
-  width: fit-content;
-  padding: 0.2rem 0.6rem;
-  border-radius: 9999px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  line-height: 1rem;
-  color: rgb(var(--tb-text));
-  background: rgba(var(--tb-border), 0.6);
-}
-
 /* =============================================================================
  * EventCard: Horizontal Layout (stack mode, md+ screens only)
  * ============================================================================= */
@@ -4057,7 +4190,7 @@
 @media (min-width: 768px) {
   :where(.theme-scope)
     :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
-    .event-card[data-orientation="horizontal"] {
+    .event-card--horizontal {
     display: flex;
     flex-direction: row;
     gap: var(--rb-event-card-horizontal-gap, 1rem);
@@ -4066,7 +4199,7 @@
   /* Image: ~1/3 width */
   :where(.theme-scope)
     :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
-    .event-card[data-orientation="horizontal"] .event-card-media {
+    .event-card--horizontal .event-card-media {
     width: var(--rb-event-card-horizontal-image-width, 33.333%);
     min-width: 200px;
     max-width: 320px;
@@ -4078,7 +4211,7 @@
   /* Content: fills remaining space */
   :where(.theme-scope)
     :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
-    .event-card[data-orientation="horizontal"] .card-content {
+    .event-card--horizontal .card-content {
     flex: 1;
     min-width: 0;
   }
@@ -4086,7 +4219,7 @@
   /* Footer: row layout with button on left, capacity on right */
   :where(.theme-scope)
     :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
-    .event-card[data-orientation="horizontal"] .event-card-footer {
+    .event-card--horizontal .event-card-footer {
     flex-direction: row-reverse;
     justify-content: space-between;
     align-items: center;
@@ -4095,14 +4228,14 @@
   /* Button: auto width */
   :where(.theme-scope)
     :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
-    .event-card[data-orientation="horizontal"] .event-card-cta {
+    .event-card--horizontal .event-card-cta {
     width: auto;
   }
 
   /* Capacity: right-aligned */
   :where(.theme-scope)
     :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
-    .event-card[data-orientation="horizontal"] .event-card-capacity {
+    .event-card--horizontal .event-card-capacity {
     text-align: right;
   }
 }
@@ -4169,14 +4302,14 @@
 }
 
 /* =============================================================================
- * Payment Step Layout (redesigned)
- * Three-area grid: main (tiles) + sidebar (portal auth) + footer (summary + actions)
+ * Payment Step Layout
+ * Main flow + optional legacy sidebar area + footer summary/actions
  * =============================================================================
  */
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout {
   display: grid;
-  gap: 1.5rem;
+  gap: 1.25rem;
   grid-template-columns: 1fr;
   grid-template-areas:
     "sidebar"
@@ -4184,6 +4317,13 @@
     "footer";
 }
 
+/* When no sidebar, main takes full width */
+:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout--no-sidebar {
+  grid-template-areas:
+    "main"
+    "footer";
+}
+
 @media (min-width: 768px) {
   :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout {
     grid-template-columns: 1fr 260px;
@@ -4192,7 +4332,6 @@
       "footer footer";
   }
 
-  /* When no sidebar, main takes full width */
   :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout--no-sidebar {
     grid-template-columns: 1fr;
     grid-template-areas:
@@ -4205,6 +4344,10 @@
   grid-area: main;
 }
 
+:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout-main > .er-portal-auth {
+  margin-bottom: 1.5rem;
+}
+
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout-sidebar {
   grid-area: sidebar;
 }
@@ -4213,7 +4356,7 @@
   grid-area: footer;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.875rem;
 }
 
 /* =============================================================================
@@ -4225,14 +4368,23 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 0.75rem;
+  align-items: stretch;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tiles > [role="listitem"] {
+  min-width: 0;
+  display: flex;
 }
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile {
+  width: 100%;
+  min-height: 5.75rem;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.375rem;
-  padding: 1rem 0.75rem;
+  justify-content: center;
+  gap: 0.25rem;
+  padding: 0.75rem 0.625rem;
   border: 2px solid var(--er-payment-border);
   border-radius: var(--rb-block-radius);
   background: transparent;
@@ -4315,14 +4467,14 @@
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile-label {
   font-weight: 500;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   line-height: 1.2;
 }
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile-detail {
-  font-size: 0.8125rem;
+  font-size: 0.78125rem;
   color: var(--er-on-surface-subtle);
-  line-height: 1.2;
+  line-height: 1.25;
 }
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile-check {
@@ -4349,12 +4501,13 @@
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   gap: 1rem;
-  padding: 0.875rem 1rem;
-  background: var(--er-summary-bg);
-  border: 1px solid var(--er-summary-border);
-  border-radius: var(--rb-block-radius);
+  padding: 0.875rem 0;
+  background: transparent;
+  border-top: 1px solid var(--er-summary-border);
+  border-bottom: 1px solid var(--er-summary-border);
+  border-radius: 0;
 }
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-info {
@@ -4364,19 +4517,20 @@
 }
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-event {
-  font-size: 1rem;
+  font-size: 0.9375rem;
   font-weight: 600;
   margin: 0;
   line-height: 1.3;
 }
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-meta {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   color: rgba(var(--tb-text), 0.7);
+  line-height: 1.35;
 }
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-price {
-  font-size: 1.125rem;
+  font-size: 1rem;
   font-weight: 700;
   flex-shrink: 0;
   display: block;
@@ -4397,8 +4551,9 @@
   justify-content: space-between;
   align-items: flex-start;
   gap: 1rem;
-  padding: 0.75rem 1rem;
-  background: rgba(var(--tb-primary-100), 0.3);
+  padding: 0.75rem 0;
+  background: transparent;
+  border-top: 1px solid var(--er-summary-border);
   border-bottom: 1px solid var(--er-summary-border);
 }
 
@@ -5579,7 +5734,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 50;
+  /* Body-level modal portal baseline: clear sticky site/editor chrome unless a theme deliberately overrides it. */
+  z-index: var(--ec-modal-z-index, 20000);
   padding: 1rem;
   animation: ec-modal-fade-in 150ms ease-out;
 }
@@ -6211,7 +6367,7 @@
 /* Subheadline - supporting text below headline */
 :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
   font-size: 1.125rem;
-  color: var(--section-text-color, rgb(var(--tb-text)));
+  color: var(--section-supporting-color, var(--section-text-color, rgb(var(--tb-text))));
 }
 
 @media (min-width: 640px) {
@@ -6300,7 +6456,7 @@
 
 /* CTA content/body text */
 :where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
-  color: rgb(var(--tb-mutedText));
+  color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
 }
 
 /* CTA button row container */
@@ -6402,7 +6558,7 @@
 /* Form intro text */
 :where(.theme-scope) :where([data-block="form"]) .form-copy-intro {
   font-size: 1rem;
-  color: rgb(var(--tb-text));
+  color: var(--section-text-color, rgb(var(--tb-text)));
 }
 
 /* =============================================================================
@@ -8942,7 +9098,7 @@
 
 :where(.theme-scope) :where([data-block="newsletter-signup"]) .newsletter-copy-subtitle {
   font-size: 1rem;
-  color: rgb(var(--tb-text));
+  color: var(--section-text-color, rgb(var(--tb-text)));
   opacity: 0.85;
 }
 
@@ -8990,7 +9146,7 @@
 :where(.theme-scope) .newsletter-privacy-note {
   margin-top: 0.75rem;
   font-size: 0.75rem;
-  color: rgb(var(--tb-muted-text));
+  color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
   text-align: center;
 }
 
@@ -9254,10 +9410,16 @@
     rgb(var(--tb-border, 229 231 235)),
     rgb(var(--tb-text, 17 24 39)) 4%
   );
+  --event-compact-secondary-text: color-mix(
+    in oklab,
+    rgb(var(--tb-text, 17 24 39)),
+    rgb(var(--tb-background, 255 255 255)) 28%
+  );
 
   width: min(100%, 92rem);
   margin-inline: auto;
   overflow: hidden;
+  container: event-compact-list / inline-size;
   border: 1px solid var(--event-compact-divider-color);
   border-radius: 1rem;
   background: rgb(var(--tb-background, 255 255 255));
@@ -9274,10 +9436,10 @@
 
 :where(.theme-scope) .event-compact-row {
   display: grid;
-  grid-template-columns: clamp(5rem, 7vw, 7rem) minmax(0, 1fr) clamp(15rem, 24vw, 21rem);
+  grid-template-columns: clamp(4.5rem, 6vw, 6.25rem) minmax(0, 1fr);
   align-items: center;
-  min-height: 6.75rem;
-  padding: 1.35rem clamp(1.5rem, 3vw, 2.6rem);
+  min-height: 6rem;
+  padding: 1rem clamp(1.25rem, 2.6vw, 2.25rem);
   border-bottom: 1px solid var(--event-compact-divider-color);
   transition: background-color 150ms ease;
 }
@@ -9294,13 +9456,21 @@
   display: grid;
   grid-template-rows: 1rem minmax(2.7rem, auto) 1rem;
   place-items: center;
-  gap: 0.35rem;
+  gap: 0;
   min-width: 0;
-  padding-right: clamp(1rem, 2vw, 1.75rem);
+  padding-right: clamp(0.8rem, 1.6vw, 1.35rem);
   text-align: center;
   text-decoration: none;
 }
 
+:where(.theme-scope) .event-compact-row-body {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  border-left: 1px solid var(--event-compact-divider-color);
+}
+
 :where(.theme-scope) .event-compact-row-date-weekday,
 :where(.theme-scope) .event-compact-row-date-month {
   display: grid;
@@ -9327,20 +9497,19 @@
 :where(.theme-scope) .event-compact-row-content {
   min-width: 0;
   display: flex;
+  flex: 1 1 18rem;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.625rem;
   height: 100%;
   justify-content: center;
-  padding-inline: clamp(1.4rem, 3vw, 3.2rem);
-  border-left: 1px solid var(--event-compact-divider-color);
+  padding-inline: clamp(1rem, 2.4vw, 2.4rem);
 }
 
 :where(.theme-scope) .event-compact-row-title {
   margin: 0;
   color: rgb(var(--tb-text, 17 24 39));
   font-family: var(--font-heading, var(--font-body, inherit));
-  /* Row titles sit at the theme's h3 scale so section headings stay dominant */
-  font-size: var(--fs-h3-fluid, clamp(1.1rem, 1rem + 0.7vw, 1.5rem));
+  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
   font-weight: 400;
   line-height: 1.2;
   overflow: hidden;
@@ -9353,8 +9522,8 @@
   align-items: center;
   gap: 0.9rem;
   min-width: 0;
-  color: rgb(var(--tb-text, 17 24 39));
-  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
+  color: var(--event-compact-secondary-text);
+  font-size: 0.875rem;
   line-height: 1.35;
 }
 
@@ -9387,16 +9556,17 @@
 }
 
 :where(.theme-scope) .event-compact-row-price {
-  color: rgb(var(--tb-secondary, var(--tb-primary, 0 0 0)));
-  font-weight: 600;
+  color: inherit;
+  font-weight: inherit;
 }
 
 :where(.theme-scope) .event-compact-row-action {
   display: grid;
+  flex: 0 1 clamp(14rem, 22vw, 19rem);
   align-content: center;
-  gap: 1rem;
+  gap: 0.75rem;
   height: 100%;
-  padding-left: clamp(1.5rem, 3vw, 3.2rem);
+  padding-left: clamp(1.1rem, 2.4vw, 2.4rem);
   border-left: 1px solid var(--event-compact-divider-color);
 }
 
@@ -9404,8 +9574,8 @@
   display: inline-flex;
   align-items: center;
   gap: 0.65rem;
-  color: rgb(var(--tb-text, 17 24 39));
-  font-size: clamp(0.9375rem, 1.45vw, 1.0625rem);
+  color: var(--event-compact-secondary-text);
+  font-size: 0.875rem;
   line-height: 1.3;
   white-space: nowrap;
 }
@@ -9416,6 +9586,10 @@
   flex-shrink: 0;
 }
 
+:where(.theme-scope) .event-compact-row-action-price {
+  display: none;
+}
+
 :where(.theme-scope) .event-compact-row-status {
   color: rgb(var(--tb-muted, var(--tb-text, 17 24 39)));
   font-weight: 500;
@@ -9443,52 +9617,213 @@
   }
 
   :where(.theme-scope) .event-compact-row {
-    grid-template-columns: 4.75rem minmax(0, 1fr);
+    grid-template-columns: 4.25rem minmax(0, 1fr);
     min-height: 0;
-    padding: 1.25rem;
-    row-gap: 1.1rem;
+    padding: 1rem;
+    row-gap: 0.85rem;
   }
 
   :where(.theme-scope) .event-compact-row-date {
-    padding-right: 0.9rem;
+    align-self: start;
+    grid-row: 1;
+    padding-right: 0.75rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-body {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.85rem;
+    height: auto;
+    padding-left: 0.9rem;
   }
 
   :where(.theme-scope) .event-compact-row-date-day {
-    font-size: 1.85rem;
+    font-size: 1.65rem;
   }
 
   :where(.theme-scope) .event-compact-row-content {
-    gap: 0.75rem;
-    padding-left: 1.1rem;
-    padding-right: 0;
+    flex: none;
+    gap: 0.625rem;
+    height: auto;
+    padding-inline: 0;
   }
 
   :where(.theme-scope) .event-compact-row-title {
-    font-size: clamp(1.15rem, 5vw, 1.35rem);
+    font-size: 1.15rem;
+    overflow: visible;
+    text-overflow: clip;
     white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  :where(.theme-scope) .event-compact-row-venue {
+    max-width: 100%;
+  }
+
+  :where(.theme-scope) .event-compact-row-venue svg {
+    flex-shrink: 0;
   }
 
   :where(.theme-scope) .event-compact-row-meta {
+    flex-direction: column;
+    align-items: flex-start;
     flex-wrap: wrap;
-    gap: 0.5rem 0.8rem;
+    gap: 0.35rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-meta .event-compact-row-price {
+    display: none;
+  }
+
+  :where(.theme-scope) .event-compact-row-teacher::before,
+  :where(.theme-scope) .event-compact-row-price::before {
+    content: none;
   }
 
   :where(.theme-scope) .event-compact-row-action {
-    grid-column: 1 / -1;
+    flex: none;
     grid-template-columns: minmax(0, 1fr);
-    gap: 0.85rem;
+    gap: 0.7rem;
+    height: auto;
+    width: 100%;
     padding-left: 0;
-    padding-top: 1rem;
-    border-left: none;
-    border-top: 1px solid var(--event-compact-divider-color);
+    padding-top: 0;
+    border-left: 0;
+    border-top: 0;
   }
 
   :where(.theme-scope) .event-compact-row-datetime {
+    display: flex;
+    flex-wrap: wrap;
     white-space: normal;
   }
 
+  :where(.theme-scope) .event-compact-row-action-price {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-action-price::before {
+    content: "\00b7";
+  }
+
   :where(.theme-scope) .event-compact-row-cta {
+    width: min(100%, 12rem);
+    min-height: 2.65rem;
+    justify-content: space-between;
+    gap: 0.65rem;
+    padding-inline: 1rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-cta span {
+    min-width: 0;
+  }
+}
+
+@container event-compact-list (max-width: 48rem) {
+  :where(.theme-scope) .event-compact-row {
+    grid-template-columns: 4.25rem minmax(0, 1fr);
+    min-height: 0;
+    padding: 1rem;
+    row-gap: 0.85rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-date {
+    align-self: start;
+    grid-row: 1;
+    padding-right: 0.75rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-body {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.85rem;
+    height: auto;
+    padding-left: 0.9rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-date-day {
+    font-size: 1.65rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-content {
+    flex: none;
+    gap: 0.625rem;
+    height: auto;
+    padding-inline: 0;
+  }
+
+  :where(.theme-scope) .event-compact-row-title {
+    font-size: 1.15rem;
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  :where(.theme-scope) .event-compact-row-venue {
+    max-width: 100%;
+  }
+
+  :where(.theme-scope) .event-compact-row-venue svg {
+    flex-shrink: 0;
+  }
+
+  :where(.theme-scope) .event-compact-row-meta {
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-meta .event-compact-row-price {
+    display: none;
+  }
+
+  :where(.theme-scope) .event-compact-row-teacher::before,
+  :where(.theme-scope) .event-compact-row-price::before {
+    content: none;
+  }
+
+  :where(.theme-scope) .event-compact-row-action {
+    flex: none;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.7rem;
+    height: auto;
     width: 100%;
+    padding-left: 0;
+    padding-top: 0;
+    border-left: 0;
+    border-top: 0;
+  }
+
+  :where(.theme-scope) .event-compact-row-datetime {
+    display: flex;
+    flex-wrap: wrap;
+    white-space: normal;
+  }
+
+  :where(.theme-scope) .event-compact-row-action-price {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-action-price::before {
+    content: "\00b7";
+  }
+
+  :where(.theme-scope) .event-compact-row-cta {
+    width: min(100%, 12rem);
+    min-height: 2.65rem;
+    justify-content: space-between;
+    gap: 0.65rem;
+    padding-inline: 1rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-cta span {
+    min-width: 0;
   }
 }
 
@@ -9555,15 +9890,23 @@
  * is what carries the alignment, and the inline-block mark follows it. Alignment
  * is never configured directly; it follows the heading.
  */
+:where(.theme-scope) .rb-heading-decoration-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
 :where(.theme-scope) .rb-heading-decoration-row {
   display: block;
   width: 100%;
   margin-top: 0.35rem;
+  line-height: 0;
   pointer-events: none;
 }
 
 :where(.theme-scope) .rb-heading-decoration {
   display: inline-block;
+  vertical-align: top;
 }
 
 :where(.theme-scope) .rb-heading-decoration-organic-squiggle {
@@ -9662,6 +10005,47 @@
   height: 1.5rem;
 }
 
+/* --- Card marker mode (icons / numbers / none) -----------------------------
+ *
+ * The icon zone and the number zone both sit in the DOM; the grid's
+ * `data-card-marker` attribute decides which shows. The default (legacy
+ * content with no attribute) shows icons and hides the number zone.
+ */
+:where(.theme-scope) .rb-feature-card-number-zone {
+  display: none; /* shown only in numbers mode */
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-bottom: 0.125rem;
+  border-radius: var(--rb-block-radius, 0.75rem);
+  background-color: rgb(var(--tb-primary) / 10%);
+  color: rgb(var(--tb-primary));
+  counter-increment: rb-feature-card-number;
+}
+:where(.theme-scope) .rb-feature-card-number-zone::before {
+  content: counter(rb-feature-card-number, decimal-leading-zero);
+  font-weight: 700;
+  font-size: 0.95rem;
+  line-height: 1;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid {
+  counter-reset: rb-feature-card-number;
+}
+
+:where(.theme-scope) [data-card-marker="numbers"] .rb-feature-card-number-zone {
+  display: inline-flex;
+}
+:where(.theme-scope) [data-card-marker="numbers"] .rb-feature-card-icon-zone {
+  display: none;
+}
+:where(.theme-scope) [data-card-marker="none"] .rb-feature-card-icon-zone,
+:where(.theme-scope) [data-card-marker="none"] .rb-feature-card-number-zone {
+  display: none;
+}
+
 
 /* =============================================================================
  * Shared: Card treatments
@@ -9753,4 +10137,93 @@
   padding-inline: 0;
 }
 
+/* --- Colour-blocked --------------------------------------------------------- */
+
+/*
+ * Bold, flat cards that each take a different palette colour by position,
+ * cycled across the grid, with a staggered vertical offset on wider screens.
+ * The background layer (`.rb-bg-surface`) is recoloured per card; the card's
+ * text colour is set to the matching on-colour so content stays readable.
+ */
+:where(.theme-scope) .rb-card-treatment-color-blocked {
+  box-shadow: none;
+}
+
+/* Per-card colour cycle. The `on*` colours are always derived by the palette
+ * (expandPalette emits onSurface/onSecondary/onPrimary), so no fallback. */
+:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) > .rb-bg-surface {
+  background: rgb(var(--tb-surface));
+}
+:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) {
+  color: rgb(var(--tb-onSurface));
+}
+
+:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) > .rb-bg-surface {
+  background: rgb(var(--tb-secondary));
+}
+:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) {
+  color: rgb(var(--tb-onSecondary));
+}
+
+:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) > .rb-bg-surface {
+  background: rgb(var(--tb-primary));
+}
+:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) {
+  color: rgb(var(--tb-onPrimary));
+}
+
+/* Body copy carries an inline muted colour from the block; force it to the
+ * card's on-colour so it reads on every block (inline style needs !important). */
+:where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-body {
+  color: inherit !important;
+  opacity: 0.9;
+}
+
+/* The number marker defaults to the brand accent, which collides with the
+ * primary-coloured card in the cycle. On colour-blocked cards use the card's
+ * own on-colour (the palette guarantees it's legible on that background) and a
+ * faint tint of it for the badge, so the number always contrasts. */
+:where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-number-zone {
+  color: inherit;
+  background-color: color-mix(in oklab, currentColor, transparent 88%);
+}
+
+/* Staggered offset: drop the middle column on wider screens. Scoped to a 3-up
+ * grid (`.rb-grid-cols-3`) so 2-/4-column grids don't get a misaligned stagger;
+ * the colour cycle still reads as a diagonal at any column count. */
+@media (min-width: 768px) {
+  :where(.theme-scope) .rb-grid-cols-3 .rb-card-treatment-color-blocked:nth-child(3n + 2) {
+    margin-top: 2.75rem;
+    /* Override the card's `h-full` so the grid's stretch shrinks the card by the
+     * margin (a genuinely shorter card) instead of keeping full height and
+     * overflowing the section, which clips the rounded bottom corners. */
+    height: auto;
+  }
+}
+
+
+:where(.theme-scope) [data-block="intro"][data-block-look="intro-portrait-bio"][data-block-variant="media-copy"] .rb-intro-media-wrap {
+  max-width: min(100%, 24rem);
+  margin-inline: auto;
+}
+
+:where(.theme-scope) [data-block="intro"][data-block-look="intro-portrait-bio"][data-block-variant="media-copy"] .rb-intro-media {
+  aspect-ratio: 1 / 1 !important;
+  border-radius: 9999px;
+}
+
+:where(.theme-scope) [data-block="intro"][data-block-look="intro-editorial-statement"] .rb-intro-title {
+  font-size: clamp(2rem, 1.56rem + 1.4vw, 3rem);
+  line-height: 1.14;
+}
+
+:where(.theme-scope) [data-block="intro"][data-block-look="intro-editorial-statement"] .rb-intro-copy {
+  gap: var(--rb-space-5, 1.25rem);
+}
+
+:where(.theme-scope) [data-block="intro"][data-block-look="intro-editorial-statement"] .rb-intro-copy .rb-prose {
+  font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.375rem);
+  line-height: 1.65;
+}
+