@fluid-theme/core 0.4.3 → 2.1.0

package/src/components/card.css

@@ -1,419 +1,241 @@
 /**
- * Fluid Framework - Card Component
+ * Fluid Theme - Card Component
  * @layer components
  *
- * Cards are containers that group related content.
- * They provide subtle elevation and visual boundaries.
- * Uses container queries for truly responsive behavior.
+ * Open by default: no box, padding, shadow or lift. Media in true colour at
+ * its natural ratio (or data-aspect), then the body under an ink hairline:
+ * eyebrow, serif title, dek, meta. In a .grid the cards share a hang line:
+ * image bottoms and hairlines line up across a row whatever each image's
+ * ratio, and the bodies hang from it. Hover underlines the title; nothing
+ * moves. A card with no media carries the rule on its own top edge, so a
+ * child theme that writes .card { border: … } replaces it.
  *
  * Usage:
- *   <article class="card">...</article>
- *   <div class="card" data-variant="elevated">...</div>
- *   <article class="card" data-variant="outlined">...</article>
- *   <a href="#" class="card" data-interactive>Clickable card</a>
- *
- * Structure (optional):
  *   <article class="card">
- *     <img class="card__media" src="..." alt="...">
- *     <div class="card__content">
+ *     <img class="card__media" src="..." alt="..." width="800" height="600">
+ *     <div class="card__content">            (.card__body works too)
+ *       <p class="eyebrow">Essay</p>
  *       <h3 class="card__title">Title</h3>
- *       <p class="card__description">Description</p>
+ *       <p class="card__description">Dek</p>
+ *       <p class="card__meta">12 May 2026</p>
  *     </div>
  *     <footer class="card__footer">Actions</footer>
  *   </article>
+ *
+ * Boxed cards: data-variant="outlined" (hairline box), "filled" (surface),
+ * "elevated" (raised surface; a shadow only when --shadow-style is not 0).
+ * Opt-ins: data-treatment="duotone" (hue from --accent; wrap the image in
+ * .card__media-wrap), data-layout="horizontal", data-type="profile|stat|
+ * feature|testimonial|pricing".
  */
 
 @layer components {
-  /* Base card */
   .card {
-    /* Container for queries - only when explicitly enabled */
     container-name: card;
-
-    /* Layout */
+    position: relative;
     display: flex;
     flex-direction: column;
-
-    /* Prevent collapse in grid/flex layouts */
     min-inline-size: 0;
-
-    /* Visual */
-    background-color: var(--_card-bg, var(--color-surface-raised));
-    border: var(--border-width) solid var(--_card-border, var(--color-border-subtle));
-    border-radius: var(--radius-card, var(--radius-xl));
-
-    /* Overflow: clip media but allow focus rings and shadows to paint */
+    color: inherit;
+    background-color: var(--_card-bg, transparent);
+    border: var(--border-width) solid var(--_card-border, transparent);
+    /* Only a boxed card is rounded: an open card paints its top edge only,
+       and a radius bent that hairline into an arc ("a smile") over it. */
+    border-radius: var(--_card-radius, 0);
+    box-shadow: var(--_card-shadow, none);
     overflow: clip;
     overflow-clip-margin: 4px;
-
-    /* Transitions */
-    transition:
-      box-shadow var(--duration-normal) var(--ease-fluid),
-      border-color var(--duration-normal) var(--ease-fluid),
-      transform var(--duration-normal) var(--ease-settle);
   }
 
-  /* Enable container queries only when needed */
-  .card[data-container] {
-    container-type: inline-size;
-  }
+  .card[data-container] { container-type: inline-size; }
 
 
   /* ========================================
-     VARIANTS
-     Different visual treatments
+     BOXED VARIANTS
      ======================================== */
 
-  /* Elevated - floating appearance */
-  .card[data-variant="elevated"] {
-    --_card-border: transparent;
-    box-shadow: var(--shadow-md);
-  }
-
-  .card[data-variant="elevated"]:hover {
-    box-shadow: var(--shadow-lg);
-  }
-
-  /* Dark mode: use accent glow since shadows are barely visible on dark */
-  @media (prefers-color-scheme: dark) {
-    .card[data-variant="elevated"] {
-      box-shadow:
-        0 0 0 1px oklch(from var(--accent) l c h / 0.15),
-        0 4px 20px oklch(from var(--accent) l c h / 0.1);
-    }
-
-    .card[data-variant="elevated"]:hover {
-      box-shadow:
-        0 0 0 1px oklch(from var(--accent) l c h / 0.25),
-        0 8px 30px oklch(from var(--accent) l c h / 0.15);
-    }
-  }
-
-  /* Also support explicit dark theme */
-  [data-theme="dark"] .card[data-variant="elevated"] {
-    box-shadow:
-      0 0 0 1px oklch(from var(--accent) l c h / 0.15),
-      0 4px 20px oklch(from var(--accent) l c h / 0.1);
-  }
-
-  [data-theme="dark"] .card[data-variant="elevated"]:hover {
-    box-shadow:
-      0 0 0 1px oklch(from var(--accent) l c h / 0.25),
-      0 8px 30px oklch(from var(--accent) l c h / 0.15);
-  }
-
-  /* Outlined - border emphasis */
-  .card[data-variant="outlined"] {
-    --_card-bg: transparent;
+  .card:is([data-variant="outlined"], [data-variant="filled"], [data-variant="elevated"]) {
+    --_card-pad: var(--space-m);
+    --_card-rule: transparent;
     --_card-border: var(--color-border);
+    --_card-radius: var(--radius-card);
   }
 
-  /* Ghost - minimal, content-focused */
-  .card[data-variant="ghost"] {
-    --_card-bg: transparent;
-    --_card-border: transparent;
-  }
+  .card[data-variant="filled"] { --_card-bg: var(--color-surface); --_card-border: transparent; }
 
-  /* Filled - solid background */
-  .card[data-variant="filled"] {
-    --_card-bg: var(--color-surface);
-    --_card-border: transparent;
+  .card[data-variant="elevated"] {
+    --_card-bg: var(--color-surface-raised);
+    --_card-shadow: var(--shadow-md);
   }
 
 
   /* ========================================
      INTERACTIVE CARDS
-     Clickable/hoverable cards
      ======================================== */
 
   .card[data-interactive],
   a.card {
     cursor: pointer;
     text-decoration: none;
-    color: inherit;
-  }
-
-  .card[data-interactive]:hover,
-  a.card:hover {
-    --_card-border: var(--accent);
-    box-shadow: var(--shadow-sm);
   }
 
-  .card[data-interactive]:active,
-  a.card:active {
-    transform: scale(0.99);
+  :is(.card[data-interactive], a.card):hover .card__title {
+    text-decoration-line: underline;
+    text-decoration-color: var(--accent-ink);
+    text-decoration-thickness: 0.06em;
+    text-underline-offset: 0.22em;
   }
 
-  .card[data-interactive]:focus-visible,
-  a.card:focus-visible {
-    outline: 2px solid transparent;
-    box-shadow:
-      var(--shadow-glow),
-      0 0 0 2px var(--color-background),
-      0 0 0 4px var(--accent);
+  :is(.card[data-interactive], a.card):focus-visible {
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 2px;
   }
 
 
   /* ========================================
-     CARD STRUCTURE
-     Optional semantic sections
+     STRUCTURE
      ======================================== */
 
-  /* Media - images, video, etc. */
   .card__media {
-    /* Full width, maintain aspect */
     inline-size: 100%;
     block-size: auto;
-    object-fit: cover;
-
-    /* Remove from flow for overlay positioning */
     flex-shrink: 0;
-
-    /* Auto-apply theme-aware duotone tint */
-    filter: grayscale(100%) contrast(1.1);
-    transition: filter var(--duration-normal) var(--ease-fluid);
+    border-radius: var(--radius-card);
   }
 
-  /* Duotone wrapper for blend mode overlay */
-  .card__media-wrap {
-    position: relative;
-    overflow: hidden;
+  :is(.card__media, .card__media-wrap) + :is(.card__content, .card__body) {
+    margin-block-start: var(--_card-pad, var(--space-s));
+    border-block-start: var(--border-width) solid var(--_card-rule, var(--color-border-strong));
   }
 
-  .card__media-wrap::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      135deg,
-      var(--duotone-dark, oklch(0.3 0.1 220)) 0%,
-      var(--duotone-light, oklch(0.7 0.1 200)) 100%
-    );
-    mix-blend-mode: multiply;
-    opacity: 0.85;
-    pointer-events: none;
-    transition: opacity var(--duration-normal) var(--ease-fluid);
+  /* An open card with no media: the rule is the card's own top edge. */
+  .card:not([data-variant]):not(:has(> :is(.card__media, .card__media-wrap))) {
+    border-block-start-color: var(--_card-rule, var(--color-border-strong));
   }
 
-  /* Hover: reveal more of original image */
-  .card:hover .card__media {
-    filter: grayscale(60%) contrast(1.05);
-  }
-
-  .card:hover .card__media-wrap::after {
-    opacity: 0.6;
-  }
-
-  /* Opt-out of duotone effect */
-  .card__media[data-no-duotone],
-  .card[data-no-duotone] .card__media {
-    filter: none;
-  }
-
-  /* Focal point control for card media */
-  .card__media[data-focus="top"] { object-position: center top; }
-  .card__media[data-focus="bottom"] { object-position: center bottom; }
-  .card__media[data-focus="left"] { object-position: left center; }
-  .card__media[data-focus="right"] { object-position: right center; }
-  .card__media[data-focus="center"] { object-position: center center; }
-
-  /* Custom focal point via CSS custom properties */
-  .card__media[style*="--focus"] {
-    object-position: var(--focus-x, 50%) var(--focus-y, 50%);
-  }
-
-  /* Aspect ratio variants for media */
-  .card__media[data-aspect="square"] {
-    aspect-ratio: 1;
-  }
-
-  .card__media[data-aspect="video"] {
-    aspect-ratio: 16 / 9;
-  }
-
-  .card__media[data-aspect="portrait"] {
-    aspect-ratio: 3 / 4;
-  }
-
-  .card__media[data-aspect="wide"] {
-    aspect-ratio: 21 / 9;
-  }
-
-  /* Content area */
-  .card__content {
+  :is(.card__content, .card__body) {
     flex: 1;
-    padding: var(--space-5);
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
+    gap: var(--space-xs);
+    padding: var(--_card-pad, 0);
+    padding-block-start: var(--_card-pad, var(--space-s));
+  }
+
+  /* The hang line: in a .grid, a card with media spans two rows of the
+     grid (three with a footer) as a subgrid, the media bottom-aligned in
+     the first. Needs subgrid; without it cards keep the flex column. */
+  @supports (grid-template-rows: subgrid) {
+    .grid > .card:has(> .card__media, > .card__media-wrap):not([data-layout]) {
+      display: grid;
+      grid-row: span 2;
+      grid-template-rows: subgrid;
+      row-gap: 0;
+    }
+
+    .grid > .card:has(> .card__media, > .card__media-wrap):has(> .card__footer):not([data-layout]) { grid-row: span 3; }
+
+    .grid > .card > :is(.card__media, .card__media-wrap) { align-self: end; }
   }
 
-  /* Title */
+  .card :is(.eyebrow, p) { margin: 0; }
+
   .card__title {
-    font-size: var(--font-size-lg);
-    font-weight: var(--weight-semibold);
-    line-height: var(--leading-tight);
+    font-family: var(--font-heading);
+    font-size: var(--step-1);
+    font-weight: calc(var(--weight-medium) + var(--_dark-weight));
+    line-height: var(--leading-heading);
+    letter-spacing: var(--tracking-normal);
+    text-wrap: balance;
     margin: 0;
   }
 
-  /* Description */
-  .card__description {
-    color: var(--color-text-muted);
-    margin: 0;
-  }
+  /* A title link is not a link in running text: no underline at rest,
+     the accent underline on hover and focus (spec §9). */
+  .card__title a { text-decoration-color: transparent; }
+  .card__title a:is(:hover, :focus-visible) { text-decoration-color: var(--accent-ink); }
+
 
-  /* Metadata - tags, dates, etc. */
   .card__meta {
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-2);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-subtle);
+    font-size: var(--step--1);
+    color: var(--color-text-muted);
+    font-variant-numeric: lining-nums proportional-nums;   /* tabular widens the comma */
   }
 
-  /* Footer - actions, links */
   .card__footer {
-    padding: var(--space-4) var(--space-5);
-    border-block-start: 1px solid var(--color-border-subtle);
     display: flex;
     gap: var(--space-3);
     align-items: center;
+    padding-block: var(--space-s);
+    padding-inline: var(--_card-pad, 0);
+    border-block-start: var(--border-width) solid var(--color-border);
   }
 
-  /* Push footer actions to end */
-  .card__footer[data-align="end"] {
-    justify-content: flex-end;
-  }
-
-  .card__footer[data-align="between"] {
-    justify-content: space-between;
-  }
-
-
-  /* ========================================
-     SIZE VARIANTS
-     Compact for lists, spacious for features
-     ======================================== */
-
-  .card[data-size="sm"] .card__content {
-    padding: var(--space-4);
-    gap: var(--space-2);
-  }
-
-  .card[data-size="sm"] .card__title {
-    font-size: var(--font-size-base);
-  }
-
-  .card[data-size="sm"] .card__footer {
-    padding: var(--space-3) var(--space-4);
-  }
+  .card__footer[data-align="end"] { justify-content: flex-end; }
+  .card__footer[data-align="between"] { justify-content: space-between; }
 
-  .card[data-size="lg"] .card__content {
-    padding: var(--space-6);
-    gap: var(--space-4);
-  }
+  .card[data-size="sm"] .card__title { font-size: var(--step-0); }
+  .card[data-size="lg"] .card__title { font-size: var(--step-2); }
 
-  .card[data-size="lg"] .card__title {
-    font-size: var(--font-size-xl);
-  }
-
-  .card[data-size="lg"] .card__footer {
-    padding: var(--space-5) var(--space-6);
+  @container card (min-width: 30rem) {
+    .card[data-layout="horizontal"] { flex-direction: row; gap: var(--space-m); }
+    .card[data-layout="horizontal"] .card__media { inline-size: 40%; max-inline-size: 16rem; }
+    .card[data-layout="horizontal"] .card__media + :is(.card__content, .card__body) { margin-block-start: 0; }
   }
 
 
   /* ========================================
-     CONTAINER QUERY RESPONSIVE
-     Cards adapt to their container, not viewport
+     DUOTONE (opt-in): the hue comes from --accent
      ======================================== */
 
-  /* Compact card in narrow containers */
-  @container card (max-width: 20rem) {
-    .card__content {
-      padding: var(--space-4);
-    }
-
-    .card__title {
-      font-size: var(--font-size-base);
-    }
-
-    .card__footer {
-      padding: var(--space-3) var(--space-4);
-      flex-direction: column;
-      align-items: stretch;
-    }
+  .card__media-wrap {
+    position: relative;
+    overflow: hidden;
   }
 
-  /* Horizontal layout in wider containers */
-  @container card (min-width: 30rem) {
-    .card[data-layout="horizontal"] {
-      flex-direction: row;
-    }
-
-    .card[data-layout="horizontal"] .card__media {
-      inline-size: 40%;
-      max-inline-size: 16rem;
-      block-size: auto;
-    }
+  .card[data-treatment="duotone"] .card__media { filter: grayscale(100%) contrast(1.1); }
 
-    .card[data-layout="horizontal"] .card__content {
-      justify-content: center;
-    }
+  .card[data-treatment="duotone"] .card__media-wrap::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      135deg,
+      var(--duotone-dark, oklch(from var(--accent) 0.3 c h)) 0%,
+      var(--duotone-light, oklch(from var(--accent) 0.8 calc(c * 0.5) h)) 100%
+    );
+    mix-blend-mode: multiply;
+    opacity: 0.85;
+    pointer-events: none;
   }
 
 
   /* ========================================
      SPECIAL CARD TYPES
-     Common card patterns
      ======================================== */
 
-  /* Profile card */
-  .card[data-type="profile"] {
-    text-align: center;
-  }
-
   .card[data-type="profile"] .card__media {
     inline-size: 6rem;
     block-size: 6rem;
     border-radius: var(--radius-full);
-    margin: var(--space-5) auto 0;
   }
 
-  /* Stat card */
-  .card[data-type="stat"] .card__content {
-    text-align: center;
-    gap: var(--space-2);
-  }
-
-  .card[data-type="stat"] .card__value {
-    font-size: var(--font-size-3xl);
-    font-weight: var(--weight-bold);
-    line-height: var(--leading-none);
-    color: var(--accent);
-  }
-
-  .card[data-type="stat"] .card__title {
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-normal);
-    color: var(--color-text-muted);
-  }
-
-  /* Feature card - emphasized */
-  .card[data-type="feature"] {
-    text-align: center;
-    padding: var(--space-6);
+  :is(.card[data-type="stat"] .card__value, .card[data-type="pricing"] .card__price) {
+    font-family: var(--font-heading);
+    font-size: var(--step-4);
+    font-weight: calc(var(--weight-display) + var(--_dark-weight));
+    line-height: 1;
+    font-variant-numeric: lining-nums tabular-nums;
   }
 
   .card[data-type="feature"] .card__icon {
-    inline-size: 3rem;
-    block-size: 3rem;
-    margin-inline: auto;
-    margin-block-end: var(--space-4);
-    color: var(--accent);
-  }
-
-  /* Testimonial card - quote with attribution */
-  .card[data-type="testimonial"] .card__content {
-    gap: var(--space-4);
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    margin-block-end: var(--space-s);
+    color: var(--accent-ink);
   }
 
   .card[data-type="testimonial"] .card__rating {
@@ -423,77 +245,45 @@
   }
 
   .card[data-type="testimonial"] .card__quote {
+    font-family: var(--font-heading);
+    font-size: var(--step-1);
     font-style: italic;
-    line-height: var(--leading-relaxed);
-    color: var(--color-text);
-  }
-
-  .card[data-type="testimonial"] .card__quote::before {
-    content: "\201C";
-    font-size: var(--font-size-3xl);
-    font-style: normal;
-    line-height: 0;
-    vertical-align: -0.35em;
-    color: var(--accent);
-    margin-inline-end: var(--space-1);
+    line-height: 1.4;
   }
 
   .card[data-type="testimonial"] .card__attribution {
     display: flex;
     align-items: center;
     gap: var(--space-3);
-    font-size: var(--font-size-sm);
+    font-size: var(--step--1);
   }
 
-  .card[data-type="testimonial"] .card__author {
-    font-weight: var(--weight-semibold);
-    font-style: normal;
-    color: var(--color-text);
-  }
-
-  .card[data-type="testimonial"] .card__role {
-    color: var(--color-text-muted);
-  }
+  .card[data-type="testimonial"] .card__author { font-weight: 600; font-style: normal; }
+  .card[data-type="testimonial"] .card__role { color: var(--color-text-muted); }
 
-  /* Pricing card - plan comparison */
-  .card[data-type="pricing"] {
-    text-align: center;
-    overflow: visible;
-    position: relative;
-  }
-
-  .card[data-type="pricing"] .card__price {
-    font-size: var(--font-size-4xl);
-    font-weight: var(--weight-bold);
-    line-height: var(--leading-none);
-    margin-block-end: var(--space-1);
-  }
+  .card[data-type="pricing"] { overflow: visible; }
 
   .card[data-type="pricing"] .card__price-period {
-    font-size: var(--font-size-sm);
+    font-family: var(--font-body);
+    font-size: var(--step--1);
     color: var(--color-text-muted);
-    font-weight: var(--weight-normal);
   }
 
-  /* Featured/popular pricing card */
-  .card[data-type="pricing"][data-featured] {
-    border: 2px solid var(--accent);
-    transform: scale(1.03);
-  }
+  .card[data-type="pricing"][data-featured] { --_card-border: var(--color-border-strong); border-width: var(--border-width-thick); }
 
   .card[data-type="pricing"][data-featured] > .badge {
     position: absolute;
     inset-block-start: 0;
-    inset-inline-start: 50%;
-    transform: translate(-50%, -50%);
+    inset-inline: 0;
+    margin-inline: auto;
+    inline-size: fit-content;
+    translate: 0 -50%;
   }
 
-  /* Pricing feature list */
   .card[data-type="pricing"] .card__features {
     list-style: none;
     padding: 0;
     margin: 0;
-    text-align: start;
   }
 
   .card[data-type="pricing"] .card__features li {
@@ -501,11 +291,8 @@
     align-items: center;
     gap: var(--space-2);
     padding-block: var(--space-2);
-    border-block-end: var(--border-width) solid var(--color-border-subtle);
-  }
-
-  .card[data-type="pricing"] .card__features li:last-child {
-    border-block-end: none;
+    margin: 0;
+    border-block-end: var(--border-width) solid var(--color-border);
   }
 
   .card[data-type="pricing"] .card__features .check {
@@ -516,135 +303,13 @@
 
   /* ========================================
      CARD GROUPS
-     Multiple cards together
      ======================================== */
 
   .card-group {
     display: grid;
-    gap: var(--space-5);
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(min(100%, var(--card-min-width, 18rem)), 1fr)
-    );
-  }
-
-  /* Equal height cards */
-  .card-group[data-equal-height] > .card {
-    block-size: 100%;
-  }
-
-  .card-group[data-equal-height] > .card .card__content {
-    flex: 1;
+    gap: var(--space-l) var(--space-m);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min-width, 18rem)), 1fr));
   }
 
-
-  /* ========================================
-     THEME-SPECIFIC CARD STYLES
-     Motion styles affect card appearance
-     ======================================== */
-
-  /* Still: Crisp, no-nonsense borders */
-  [data-motion="still"] .card {
-    border-width: 1px;
-    border-color: var(--color-border);
-    box-shadow: none;
-  }
-
-  /* Serene: Extra soft, pillowy cards with gentle shadows */
-  [data-motion="serene"] .card {
-    box-shadow: var(--shadow-sm);
-  }
-  [data-motion="serene"] .card[data-variant="elevated"] {
-    box-shadow: var(--shadow-md);
-  }
-  [data-motion="serene"] .card:hover {
-    box-shadow: var(--shadow-md);
-  }
-
-  /* Cascade: Prominent layered shadows, bubbly elevated feel */
-  [data-motion="cascade"] .card {
-    box-shadow:
-      0 4px 12px oklch(0 0 0 / 0.06),
-      0 12px 28px oklch(0 0 0 / 0.1);
-  }
-  [data-motion="cascade"] .card:hover {
-    transform: translateY(-4px);
-    box-shadow:
-      0 8px 20px oklch(0 0 0 / 0.08),
-      0 20px 40px oklch(0 0 0 / 0.14);
-  }
-  [data-motion="cascade"] .card[data-variant="elevated"] {
-    box-shadow:
-      0 8px 20px oklch(0 0 0 / 0.08),
-      0 24px 48px oklch(0 0 0 / 0.12);
-  }
-
-  /* Rapids: Hard offset shadows, energetic hover */
-  [data-motion="rapids"] .card {
-    box-shadow: var(--shadow-offset);
-    transition:
-      transform 150ms var(--ease-fluid),
-      box-shadow 150ms var(--ease-fluid);
-  }
-  [data-motion="rapids"] .card:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-offset-hover);
-  }
-  [data-motion="rapids"] .card:active {
-    transform: translate(1px, 1px);
-    box-shadow: 2px 2px 0 oklch(0 0 0 / 0.15);
-  }
-
-  /* Tsunami: 3D depth effect with dramatic shadows */
-  [data-motion="tsunami"] .card {
-    transform-style: preserve-3d;
-    transition: transform 0.4s var(--ease-fluid), box-shadow 0.4s var(--ease-fluid);
-    box-shadow:
-      0 15px 35px oklch(0 0 0 / 0.2),
-      0 5px 15px oklch(0 0 0 / 0.1);
-  }
-  [data-motion="tsunami"] .card:hover {
-    transform: translateY(-8px) scale(1.01);
-    box-shadow:
-      0 25px 50px oklch(0 0 0 / 0.25),
-      0 10px 20px oklch(0 0 0 / 0.15),
-      0 0 40px oklch(from var(--accent) l c h / 0.15);
-  }
-
-
-  /* ========================================
-     REDUCED MOTION
-     ======================================== */
-
-  @media (prefers-reduced-motion: reduce) {
-    .card {
-      transition: none;
-    }
-
-    .card[data-interactive]:active,
-    a.card:active {
-      transform: none;
-    }
-
-    [data-motion="cascade"] .card:hover,
-    [data-motion="rapids"] .card:hover,
-    [data-motion="rapids"] .card:active,
-    [data-motion="tsunami"] .card:hover {
-      transform: none;
-      transition: none;
-    }
-
-    [data-motion="rapids"] .card {
-      transition: none;
-    }
-
-    [data-motion="tsunami"] .card {
-      transition: none;
-    }
-
-    .card__media,
-    .card__media-wrap::after {
-      transition: none;
-    }
-  }
+  .card-group[data-equal-height] > .card { block-size: 100%; }
 }