@riverbankcms/sdk 0.80.0 → 0.81.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;
     }
@@ -6211,7 +6303,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 +6392,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 +6494,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 +9034,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 +9082,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 +9346,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 +9372,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 +9392,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 +9433,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 +9458,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 +9492,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 +9510,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 +9522,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 +9553,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 +9826,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 +9941,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 +10073,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;
+}
+