@cogenta/theme-canonical 1.1.2 → 1.3.3

package/src/styles/blocks.css

@@ -1,1013 +1,905 @@
 /*
- * The twelve vocabulary blocks.
+ * The vocabulary blocks (contract B), in the contract's order. The
+ * collection list lives in `listings.css`, with the term archive's index.
  *
- * One section per block, in the contract-B order. Nothing here declares a
- * colour, a size, a radius or a duration of its own: a block composes the
- * design system from `tokens.css` and nothing else, which is what keeps a skin
- * swap a whole-theme change rather than a per-block one.
+ * Every block is a twelve-column grid on the page width (`base.css`), and
+ * every one below only says which columns its parts take, at three widths:
+ * a phone (one column of content), from 40rem (halves), from 64rem (the full
+ * grid). Nothing here casts a shadow, rounds a photograph, moves on hover or
+ * fades in on scroll.
  */
 
 /* --- hero ----------------------------------------------------------------
-   The page's first impression, so it is the one block that gets a decorative
-   element of its own: a flat solid disc of the skin's accent behind the
-   media — a geometric accent rather than a wash. It is drawn on a
-   pseudo-element and sized to stay inside the block's own box — a
-   decoration that widens the page produces a horizontal scrollbar, which is
-   the classic way a hero breaks a phone.
+   The page's name, set large in the display face, over a wide photograph
+   when there is one. Words first and on the page's own ground: never text on
+   a picture.
    ------------------------------------------------------------------------- */
 
 .cg-hero {
-  position: relative;
-  /* A stacking context of its own, so `z-index: -1` on the disc puts it
-     behind the hero's content and not behind the page background. */
-  isolation: isolate;
-  display: grid;
-  gap: var(--cg-gap-loose);
-  align-items: center;
-  margin-block-start: var(--cg-s10);
-}
-
-.cg-hero::before {
-  content: "";
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: var(--cg-gutter);
-  inline-size: min(30rem, 70%);
-  aspect-ratio: 1;
-  z-index: -1;
-  border-radius: 50%;
-  background: var(--cg-accent-soft);
-  pointer-events: none;
-}
-
-@media (min-width: 60rem) {
-  .cg-hero {
-    /* Not 1fr 1fr: the copy carries the weight, and an even split makes both
-       halves look accidental. */
-    grid-template-columns: 1.05fr 0.95fr;
-    gap: var(--cg-s16);
-  }
+  padding-block-start: calc(var(--cg-section) * 0.6);
 }
 
-/* A badge, not a line of small text: it is the one label above the h1 and it
-   has to look deliberate. */
 .cg-hero__eyebrow {
-  display: inline-block;
-  margin: 0 0 var(--cg-s5);
-  padding: var(--cg-s1) var(--cg-s3);
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-soft-fg);
-  border-radius: var(--cg-radius-pill);
-  box-shadow: var(--cg-ring-accent);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
+  margin-block-end: var(--cg-s6);
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-sm);
+  font-weight: var(--cg-weight-medium);
 }
 
 .cg-hero__title {
-  margin: 0;
-  font-size: var(--cg-text-3xl);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
-  font-weight: var(--cg-weight-bold);
-  /* Display type wraps into a shape, not into a ragged column. */
-  text-wrap: balance;
-}
-
-/* Above 60rem the title is allowed one step larger than the page title — the
-   hero *is* the page title there, and the extra step is what separates a hero
-   from a heading with a picture next to it. */
-@media (min-width: 60rem) {
-  .cg-hero__title {
-    font-size: calc(var(--cg-text-3xl) * 1.15);
-  }
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-display);
+  font-weight: var(--cg-weight-regular);
+  line-height: var(--cg-leading-display);
+  letter-spacing: var(--cg-tracking-display);
 }
 
 .cg-hero__subtitle {
-  margin: var(--cg-s5) 0 0;
+  margin-block-start: var(--cg-s6);
   max-inline-size: var(--cg-measure-narrow);
-  font-size: var(--cg-text-lg);
-  line-height: var(--cg-leading-relaxed);
   color: var(--cg-ink-muted);
-  text-wrap: pretty;
+  font-size: var(--cg-text-lg);
+  line-height: var(--cg-leading-snug);
 }
 
-.cg-hero__media img {
-  inline-size: 100%;
-  border-radius: var(--cg-radius-xl);
-  box-shadow: var(--cg-elevation-3), var(--cg-ring);
+.cg-hero .cg-actions {
+  margin-block-start: var(--cg-s10);
 }
 
-/* --- prose --------------------------------------------------------------- */
+.cg-hero__media {
+  margin-block-start: var(--cg-s12);
+}
 
-.cg-prose {
-  max-inline-size: var(--cg-measure);
-  margin-inline: auto;
-  /* Body copy is the one place in the theme that reads for minutes rather than
-     seconds, so it gets the loosest leading of the scale. */
-  line-height: var(--cg-leading-relaxed);
+.cg-hero__image,
+.cg-hero__media video {
+  inline-size: 100%;
+  aspect-ratio: 3 / 2;
 }
 
-/* A block's first and last child must not push the block's own rhythm around:
-   without these, a prose block that opens on a heading sits a full step lower
-   than one that opens on a paragraph. */
-.cg-prose > :first-child {
-  margin-block-start: 0;
+@media (min-width: 64rem) {
+  .cg-hero__body {
+    grid-column: 1 / span 10;
+  }
+
+  .cg-hero__media {
+    margin-block-start: var(--cg-s16);
+  }
+
+  .cg-hero__image,
+  .cg-hero__media video {
+    aspect-ratio: 2 / 1;
+  }
 }
 
-.cg-prose > :last-child {
-  margin-block-end: 0;
+/* --- prose ----------------------------------------------------------------
+   Running text on the first columns, at a reading measure, from the same
+   left edge as every title on the page.
+   ------------------------------------------------------------------------- */
+
+.cg-prose > * {
+  max-inline-size: var(--cg-measure);
 }
 
-.cg-prose h2,
-.cg-prose h3,
-.cg-prose h4 {
-  letter-spacing: var(--cg-tracking-snug);
-  line-height: var(--cg-leading-snug);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
+.cg-prose > * + * {
+  margin-block-start: var(--cg-s5);
 }
 
-/* Asymmetric on purpose: the space above a heading belongs to the section it
-   opens, so it is much larger than the space below it. */
-.cg-prose h2 {
-  margin-block: var(--cg-s12) var(--cg-s4);
-  font-size: var(--cg-text-xl);
-  letter-spacing: var(--cg-tracking-tight);
+.cg-prose > h2 {
+  margin-block-start: var(--cg-s12);
+  font-size: var(--cg-text-heading);
 }
 
-.cg-prose h3 {
-  margin-block: var(--cg-s10) var(--cg-s3);
+.cg-prose > h3 {
+  margin-block-start: var(--cg-s10);
   font-size: var(--cg-text-lg);
 }
 
-.cg-prose h4 {
-  margin-block: var(--cg-s8) var(--cg-s2);
+.cg-prose > h4 {
+  margin-block-start: var(--cg-s8);
   font-size: var(--cg-text-md);
 }
 
-.cg-prose p {
-  margin-block: var(--cg-s5);
-  /* Stops the one-word last line, which is the most visible defect in a
-     justified-looking column and costs nothing to avoid. */
-  text-wrap: pretty;
+.cg-prose > :is(h2, h3, h4) + * {
+  margin-block-start: var(--cg-s3);
 }
 
-.cg-prose ul,
-.cg-prose ol {
-  margin-block: var(--cg-s5);
-  padding-inline-start: var(--cg-s6);
+.cg-prose > :first-child {
+  margin-block-start: 0;
 }
 
-.cg-prose li {
-  margin-block: var(--cg-s2);
-  padding-inline-start: var(--cg-s1);
+.cg-prose :is(ul, ol) {
+  padding-inline-start: 1.25em;
+}
+
+.cg-prose li + li,
+.cg-prose li > :is(ul, ol) {
+  margin-block-start: var(--cg-s2);
 }
 
-/* The marker is the only decoration a list gets, so it is the one that carries
-   the accent. */
 .cg-prose li::marker {
-  color: var(--cg-accent);
+  color: var(--cg-ink-muted);
 }
 
 .cg-prose strong {
   font-weight: var(--cg-weight-semibold);
-  color: var(--cg-ink);
 }
 
-/* A quoted passage inside an article, not the `quote` block: a panel with a
-   rule, sized down from the pull quote so the two never compete. */
 .cg-prose blockquote {
-  margin-block: var(--cg-s8);
-  margin-inline: 0;
-  padding: var(--cg-s5) var(--cg-s6);
-  border-inline-start: 3px solid var(--cg-accent);
-  border-start-end-radius: var(--cg-radius-md);
-  border-end-end-radius: var(--cg-radius-md);
-  background: var(--cg-surface-sunken);
-  color: var(--cg-ink-muted);
-  font-family: var(--cogenta-font-serif);
-  font-size: var(--cg-text-lg);
-  line-height: var(--cg-leading-normal);
-}
-
-.cg-prose blockquote > :first-child {
-  margin-block-start: 0;
+  padding-inline-start: var(--cg-s6);
+  border-inline-start: var(--cg-rule-strong) solid var(--cg-ink);
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-xl);
+  line-height: var(--cg-leading-snug);
 }
 
-.cg-prose blockquote > :last-child {
-  margin-block-end: 0;
+.cg-prose blockquote > * + * {
+  margin-block-start: var(--cg-s3);
 }
 
 .cg-prose code {
-  font-family: var(--cogenta-font-mono);
-  /* `em`, not a scale step: inline code has to match the size of the text it
-     sits in, and monospace faces read larger at the same nominal size. */
+  padding: 0.1em 0.3em;
+  border-radius: var(--cg-radius-control);
+  background: var(--cg-band);
+  font-family: var(--cg-font-mono);
+  /* `em`: inline code matches the text it sits in. */
   font-size: 0.875em;
-  background: var(--cg-surface-sunken);
-  border-radius: var(--cg-radius-sm);
-  box-shadow: var(--cg-ring);
-  padding: 0.15em 0.4em;
 }
 
-.cg-prose__figure {
-  margin-block: var(--cg-s8);
-  margin-inline: 0;
+.cg-prose > .cg-prose__figure {
+  max-inline-size: min(100%, 48rem);
+  margin-block: var(--cg-s10);
 }
 
 .cg-prose__figure img {
   inline-size: 100%;
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-elevation-2);
 }
 
 .cg-prose__figure figcaption {
   margin-block-start: var(--cg-s3);
-  color: var(--cg-ink-subtle);
+  max-inline-size: var(--cg-measure);
+  color: var(--cg-ink-muted);
   font-size: var(--cg-text-sm);
-  line-height: var(--cg-leading-normal);
-}
-
-/* --- mediaFigure --------------------------------------------------------- */
-
-.cg-figure {
-  margin-inline: auto;
 }
 
-.cg-figure[data-align="start"],
-.cg-figure[data-align="end"] {
-  max-inline-size: calc(var(--cg-measure) / 2);
+.cg-prose > .cg-prose__rule {
+  margin-block: var(--cg-s12);
 }
 
-.cg-figure[data-align="start"] {
-  float: inline-start;
-  margin-inline-end: var(--cg-s6);
+.cg-prose > .cg-prose__figure + *,
+.cg-prose > .cg-prose__rule + * {
+  margin-block-start: 0;
 }
 
-.cg-figure[data-align="end"] {
-  float: inline-end;
-  margin-inline-start: var(--cg-s6);
-}
+/* --- mediaFigure ----------------------------------------------------------
+   `align` is the editor's intent, mirrored in right-to-left locales. On the
+   full grid: `center` takes the reading columns, `wide` the page, `full` the
+   window; `start` and `end` set the picture on seven columns and the caption
+   beside it, never floated into the text of the next block.
+   ------------------------------------------------------------------------- */
 
-.cg-figure[data-align="full"] {
-  max-inline-size: none;
-  padding-inline: 0;
+.cg-figure {
+  row-gap: var(--cg-s3);
 }
 
 .cg-figure__media {
   inline-size: 100%;
   aspect-ratio: var(--cg-ratio, auto);
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-elevation-2), var(--cg-ring);
 }
 
-/* Full bleed keeps its corners square: a rounded corner against the viewport
-   edge reads as a mistake, not as a radius. */
-.cg-figure[data-align="full"] .cg-figure__media {
-  border-radius: 0;
-}
-
-/* An indented caption with a rule, so it reads as annotation rather than as a
-   stray paragraph that happens to follow a picture. */
 .cg-figure__caption {
-  margin-block-start: var(--cg-s4);
-  padding-inline-start: var(--cg-s4);
-  border-inline-start: 2px solid var(--cg-line-strong);
-  color: var(--cg-ink-subtle);
+  max-inline-size: var(--cg-measure);
+  color: var(--cg-ink-muted);
   font-size: var(--cg-text-sm);
-  line-height: var(--cg-leading-normal);
-  text-wrap: pretty;
 }
 
-.cg-figure[data-align="full"] .cg-figure__caption {
-  max-inline-size: var(--cg-measure);
-  margin-inline: auto;
-  padding-inline: var(--cg-gutter);
-  border-inline-start: 0;
+.cg-figure__credit {
+  display: block;
 }
 
-.cg-figure__credit {
-  color: var(--cg-ink-subtle);
+.cg-figure[data-align="full"] {
+  padding-inline: 0;
 }
 
-.cg-figure__credit::before {
-  content: " — ";
+.cg-figure[data-align="full"] .cg-figure__caption {
+  padding-inline: var(--cg-inset);
+  max-inline-size: none;
 }
 
-/* --- featureGrid --------------------------------------------------------- */
+@media (min-width: 64rem) {
+  .cg-figure[data-align="center"] > * {
+    grid-column: 1 / span 8;
+  }
 
-.cg-features__items {
-  display: grid;
-  gap: var(--cg-gap);
-  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-}
+  .cg-figure[data-align="wide"] .cg-figure__caption {
+    grid-column: 1 / span 8;
+  }
 
-.cg-feature {
-  position: relative;
-  padding: var(--cg-s6);
-  background: var(--cg-surface-raised);
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-ring);
-  transition:
-    box-shadow var(--cg-duration) var(--cg-ease),
-    transform var(--cg-duration) var(--cg-ease);
-}
+  .cg-figure[data-align="start"] .cg-figure__media,
+  .cg-figure[data-align="end"] .cg-figure__media {
+    grid-row: 1;
+  }
 
-.cg-feature:hover {
-  box-shadow: var(--cg-elevation-2), var(--cg-ring-accent);
-  transform: translateY(-2px);
-}
+  .cg-figure[data-align="start"] .cg-figure__media {
+    grid-column: 1 / span 7;
+  }
 
-/* The whole card becomes the link's hit area, without a second link for a
-   screen reader to announce: the overlay is drawn from the one anchor the
-   markup already has, whose accessible name is the feature's title. */
-.cg-feature__link::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
+  .cg-figure[data-align="start"] .cg-figure__caption {
+    grid-column: 9 / -1;
+    grid-row: 1;
+    align-self: end;
+  }
+
+  .cg-figure[data-align="end"] .cg-figure__media {
+    grid-column: 6 / -1;
+  }
+
+  .cg-figure[data-align="end"] .cg-figure__caption {
+    grid-column: 1 / span 4;
+    grid-row: 1;
+    align-self: end;
+  }
 }
 
-.cg-feature__link {
-  color: inherit;
-  text-decoration: none;
+/* --- featureGrid ----------------------------------------------------------
+   Columns under hairlines, not cards: a feature is a title and a sentence,
+   and a frame around each one only repeats itself.
+   ------------------------------------------------------------------------- */
+
+.cg-features__items {
+  display: grid;
+  grid-template-columns: subgrid;
+  row-gap: var(--cg-s10);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.cg-feature:hover .cg-feature__link {
-  color: var(--cg-accent);
+.cg-feature {
+  grid-column: span 12;
+  padding-block-start: var(--cg-s5);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
 }
 
-/* The vocabulary's `icon` names a symbol — a tinted, ringed square that holds
-   the space an icon would, whether or not `renderIcon` (`@cogenta/theme-kit`,
-   L25) recognises the name: an unrecognised one still gets the chip, empty,
-   exactly the pre-L25 look; a recognised one gets a real glyph, centred and
-   coloured to the same accent as the ring around it. */
+/* A symbol the editor named: a plain glyph in ink, never a tinted tile. */
 .cg-feature__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--cg-s10);
-  block-size: var(--cg-s10);
+  display: block;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
   margin-block-end: var(--cg-s5);
-  background: var(--cg-accent-soft);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring-accent);
-  color: var(--cg-accent);
+  color: var(--cg-ink);
+}
+
+/* A symbol this theme has no glyph for keeps its `data-icon` for the builder
+   and takes no room: never an empty square above a title. */
+.cg-feature__icon:empty {
+  display: none;
 }
 
 .cg-feature__icon svg {
-  inline-size: var(--cg-s6);
-  block-size: var(--cg-s6);
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .cg-feature__title {
-  margin: 0 0 var(--cg-s2);
-  font-size: var(--cg-text-md);
-  font-weight: var(--cg-weight-semibold);
-  line-height: var(--cg-leading-snug);
-  letter-spacing: var(--cg-tracking-snug);
-  text-wrap: balance;
+  font-size: var(--cg-text-lg);
+}
+
+.cg-feature__link {
+  color: var(--cg-ink);
+  text-decoration-color: var(--cg-underline);
+}
+
+.cg-feature__link:hover {
+  color: var(--cg-accent);
 }
 
 .cg-feature__text {
-  margin: 0;
+  margin-block-start: var(--cg-s3);
+  max-inline-size: var(--cg-measure);
   color: var(--cg-ink-muted);
-  line-height: var(--cg-leading-relaxed);
-  text-wrap: pretty;
 }
 
-/* --- cta ----------------------------------------------------------------- */
-
-.cg-cta {
-  position: relative;
-  overflow: hidden;
-  padding: var(--cg-s16) var(--cg-s8);
-  background: var(--cg-surface-tinted);
-  border-radius: var(--cg-radius-xl);
-  box-shadow: var(--cg-ring-accent);
-  text-align: center;
+@media (min-width: 40rem) {
+  .cg-feature {
+    grid-column: span 6;
+  }
 }
 
-/* A flat accent bar across the top of the panel — structure instead of a
-   sheen. `overflow: hidden` on the panel keeps it inside the radius, so it
-   never leaks past a rounded corner. */
-.cg-cta::before {
-  content: "";
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline: 0;
-  block-size: var(--cg-s2);
-  background: var(--cg-accent-soft);
-  pointer-events: none;
+@media (min-width: 64rem) {
+  .cg-feature {
+    grid-column: span 4;
+  }
+
+  /* Two or four features take halves, so no row ends on an empty column. */
+  .cg-feature:first-child:nth-last-child(2),
+  .cg-feature:first-child:nth-last-child(2) ~ .cg-feature,
+  .cg-feature:first-child:nth-last-child(4),
+  .cg-feature:first-child:nth-last-child(4) ~ .cg-feature {
+    grid-column: span 6;
+  }
 }
 
-/* The panel's own children have to sit above that sheen. */
-.cg-cta > * {
-  position: relative;
+/* --- cta -----------------------------------------------------------------
+   The one block that asks for something, on a band a step off the page: the
+   ask and its reason on the first columns, the actions at the end.
+   ------------------------------------------------------------------------- */
+
+.cg-cta {
+  background: var(--cg-band);
 }
 
 .cg-cta__title {
-  margin: 0;
-  /* One step above a section heading: this block asks for something, and the
-     ask has to outrank the headings around it. */
   font-size: var(--cg-text-2xl);
-  line-height: var(--cg-leading-snug);
-  letter-spacing: var(--cg-tracking-tight);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
+  font-family: var(--cg-font-text);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-heading);
+  line-height: var(--cg-leading-heading);
 }
 
 .cg-cta__text {
-  margin: var(--cg-s4) auto 0;
+  margin-block-start: var(--cg-s5);
   max-inline-size: var(--cg-measure-narrow);
   color: var(--cg-ink-muted);
   font-size: var(--cg-text-lg);
-  line-height: var(--cg-leading-relaxed);
-  text-wrap: pretty;
+  line-height: var(--cg-leading-snug);
 }
 
-.cg-cta .cg-actions {
-  justify-content: center;
+@media (min-width: 64rem) {
+  .cg-cta__title,
+  .cg-cta__text {
+    grid-column: 1 / span 7;
+  }
+
+  .cg-cta .cg-actions {
+    grid-column: 9 / -1;
+    grid-row: 1 / span 2;
+    align-self: end;
+    margin-block-start: 0;
+  }
 }
 
-/* --- gallery ------------------------------------------------------------- */
+/* --- gallery --------------------------------------------------------------
+   Rows of one height, the pictures cropped to fill them: a row of three on a
+   desktop, two on a phone, and a last row that shares its width rather than
+   leaving an empty place.
+   ------------------------------------------------------------------------- */
 
 .cg-gallery__items {
-  display: grid;
-  gap: var(--cg-gap-tight);
-  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cg-column-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-/* The frame, shared by all three layouts: it is what clips the hover zoom
-   below, so the picture can grow without the tile growing with it. */
 .cg-gallery__item {
-  overflow: hidden;
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-ring);
+  flex: 1 1 calc((100% - var(--cg-column-gap)) / 2);
 }
 
-.cg-gallery__item img {
+.cg-gallery__image {
   inline-size: 100%;
-  block-size: 100%;
-  transition: transform var(--cg-duration-slow) var(--cg-ease);
+  block-size: clamp(9rem, 22vw, 20rem);
 }
 
-.cg-gallery__item:hover img {
-  transform: scale(1.04);
-}
+@media (min-width: 64rem) {
+  .cg-gallery__item {
+    flex-basis: calc((100% - 2 * var(--cg-column-gap)) / 3);
+  }
 
-/* A grid of pictures needs one shape, or the rows read as an accident. Masonry
-   is the one layout that opts out, since its whole point is not to. */
-.cg-gallery:not([data-layout="masonry"]) .cg-gallery__item img {
-  aspect-ratio: 4 / 3;
+  .cg-gallery__item:first-child:nth-last-child(4),
+  .cg-gallery__item:first-child:nth-last-child(4) ~ .cg-gallery__item {
+    flex-basis: calc((100% - var(--cg-column-gap)) / 2);
+  }
 }
 
 .cg-gallery[data-layout="masonry"] .cg-gallery__items {
   display: block;
-  columns: 3 14rem;
-  column-gap: var(--cg-gap-tight);
+  columns: 2;
+  column-gap: var(--cg-column-gap);
 }
 
 .cg-gallery[data-layout="masonry"] .cg-gallery__item {
   break-inside: avoid;
-  margin-block-end: var(--cg-gap-tight);
+  margin-block-end: var(--cg-column-gap);
+}
+
+.cg-gallery[data-layout="masonry"] .cg-gallery__image {
+  block-size: auto;
+}
+
+@media (min-width: 64rem) {
+  .cg-gallery[data-layout="masonry"] .cg-gallery__items {
+    columns: 3;
+  }
+}
+
+/* A row the reader scrolls: focusable and labelled (`gallery.ts`), so it is
+   operable from the keyboard at zero bytes of script. */
+.cg-gallery__viewport,
+.cg-collection__viewport {
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: thin;
+  scrollbar-color: var(--cg-line-strong) transparent;
+  padding-block-end: var(--cg-s4);
 }
 
 .cg-gallery[data-layout="carousel"] .cg-gallery__items {
   display: grid;
   grid-auto-flow: column;
-  grid-auto-columns: minmax(16rem, 40%);
+  grid-auto-columns: min(80%, 30rem);
+  flex-wrap: nowrap;
 }
 
 .cg-gallery[data-layout="carousel"] .cg-gallery__item {
   scroll-snap-align: start;
 }
 
-.cg-collection img {
-  inline-size: 100%;
-  border-radius: var(--cg-radius-md);
+.cg-gallery[data-layout="carousel"] .cg-gallery__image {
+  block-size: auto;
+  aspect-ratio: 3 / 2;
 }
 
-/* --- quote --------------------------------------------------------------- */
+/* --- quote ----------------------------------------------------------------
+   A pull quote in the display face, its opening mark hung into the margin on
+   a wide screen so the words keep the left edge.
+   ------------------------------------------------------------------------- */
 
-.cg-quote {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
-  text-align: center;
+.cg-quote__text {
+  quotes: "\201C" "\201D";
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-title);
+  font-weight: var(--cg-weight-regular);
+  line-height: var(--cg-leading-heading);
+  letter-spacing: var(--cg-tracking-display);
 }
 
-/* The quotation mark, drawn rather than typed. The `/ ""` gives it an empty
-   alternative text, so a screen reader that supports it announces nothing —
-   the mark is decoration, and the `<blockquote>` already says what it means.
-   A browser without alt-text support reads one quote character, which is
-   harmless; hiding it with `aria-hidden` is impossible on a pseudo-element. */
-.cg-quote::before {
-  content: "\201C" / "";
-  display: block;
-  margin-block-end: calc(var(--cg-s4) * -1);
-  color: var(--cg-accent-soft);
-  font-family: var(--cogenta-font-serif);
-  font-size: calc(var(--cg-text-3xl) * 2);
-  line-height: 1;
+.cg-quote__text p {
+  text-wrap: balance;
 }
 
-.cg-quote__text {
-  margin: 0;
-  font-family: var(--cogenta-font-serif);
-  /* A pull quote, so it outranks body copy by two steps and sits one below the
-     hero. Balanced wrap matters more here than anywhere: a centred quote with
-     a two-word last line looks broken. */
-  font-size: var(--cg-text-2xl);
-  line-height: var(--cg-leading-snug);
-  letter-spacing: var(--cg-tracking-snug);
-  text-wrap: balance;
+.cg-quote__text p::before {
+  content: open-quote;
+}
+
+.cg-quote__text p::after {
+  content: close-quote;
 }
 
 .cg-quote__attribution {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  justify-content: center;
-  gap: var(--cg-s3);
   margin-block-start: var(--cg-s8);
-  color: var(--cg-ink-subtle);
   font-size: var(--cg-text-sm);
 }
 
 .cg-quote__avatar {
+  grid-column: 1;
+  grid-row: 1 / span 2;
   inline-size: var(--cg-s12);
   block-size: var(--cg-s12);
-  border-radius: var(--cg-radius-pill);
-  box-shadow: var(--cg-ring);
+  margin-inline-end: var(--cg-s4);
+  border-radius: 50%;
 }
 
 .cg-quote__author {
-  font-weight: var(--cg-weight-semibold);
+  grid-column: 2;
   color: var(--cg-ink);
+  font-weight: var(--cg-weight-semibold);
 }
 
-/* A hairline between name and role, instead of a comma the markup does not
-   have and the theme has no business inventing. */
-.cg-quote__role::before {
-  content: "";
-  display: inline-block;
-  inline-size: var(--cg-s3);
-  border-block-start: 1px solid var(--cg-line-strong);
-  vertical-align: middle;
-  margin-inline-end: var(--cg-s3);
+.cg-quote__role {
+  grid-column: 2;
+  color: var(--cg-ink-muted);
 }
 
-/* --- faq ----------------------------------------------------------------- */
+@media (min-width: 64rem) {
+  .cg-quote__text {
+    grid-column: 1 / span 10;
+  }
 
-.cg-faq {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
+  .cg-quote__text p {
+    text-indent: -0.42em;
+  }
 }
 
-.cg-faq__items {
-  background: var(--cg-surface-raised);
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-ring);
-  /* Clips the first and last rows to the container's radius, so the list reads
-     as one panel rather than as rows that happen to be stacked. */
-  overflow: hidden;
+/* --- faq ------------------------------------------------------------------
+   The title on the first four columns, the questions on the rest, each
+   answer opened in place by the browser (`<details>`).
+   ------------------------------------------------------------------------- */
+
+.cg-faq__items,
+.cg-accordion__items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-block-start: var(--cg-rule) solid var(--cg-ink);
 }
 
-.cg-faq__item + .cg-faq__item {
-  border-block-start: 1px solid var(--cg-line-soft);
+.cg-faq__item,
+.cg-accordion__item {
+  border-block-end: var(--cg-rule) solid var(--cg-line);
 }
 
-.cg-faq__question {
+.cg-faq__question,
+.cg-accordion__question {
   display: flex;
-  align-items: center;
-  gap: var(--cg-s4);
-  padding: var(--cg-s5) var(--cg-s6);
+  align-items: baseline;
+  gap: var(--cg-s6);
+  padding-block: var(--cg-s5);
+  color: var(--cg-ink);
+  font-size: var(--cg-text-lg);
   font-weight: var(--cg-weight-semibold);
-  cursor: pointer;
-  /* The marker is replaced below; both properties are needed, and the vendor
-     one still is on WebKit. */
+  line-height: var(--cg-leading-snug);
   list-style: none;
-  transition: background-color var(--cg-duration) var(--cg-ease);
+  cursor: pointer;
+  transition: color var(--cg-duration) var(--cg-ease);
 }
 
-.cg-faq__question::-webkit-details-marker {
+.cg-faq__question::-webkit-details-marker,
+.cg-accordion__question::-webkit-details-marker {
   display: none;
 }
 
-.cg-faq__question:hover {
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-soft-fg);
-}
-
-/* A chevron drawn from two borders — no icon set, no glyph that depends on a
-   font shipping it. It is a pseudo-element on a `<summary>` whose expanded
-   state the browser already announces, so it stays purely visual. */
-.cg-faq__question::after {
-  content: "";
-  flex: none;
+/* A plus that turns into a minus: a character, never a drawn shape. */
+.cg-faq__question::after,
+.cg-accordion__question::after {
+  content: "+" / "";
   margin-inline-start: auto;
-  inline-size: 0.5em;
-  block-size: 0.5em;
-  border-inline-end: 2px solid currentColor;
-  border-block-end: 2px solid currentColor;
-  transform: translateY(-0.15em) rotate(45deg);
-  transition: transform var(--cg-duration) var(--cg-ease);
+  color: var(--cg-ink-muted);
+  font-weight: var(--cg-weight-regular);
 }
 
-.cg-faq__details[open] .cg-faq__question::after {
-  transform: translateY(0.1em) rotate(-135deg);
+.cg-faq__details[open] > .cg-faq__question::after,
+.cg-accordion__details[open] > .cg-accordion__question::after {
+  content: "\2212" / "";
 }
 
-.cg-faq__details[open] .cg-faq__question {
+.cg-faq__question:hover,
+.cg-accordion__question:hover {
   color: var(--cg-accent);
 }
 
-.cg-faq__answer {
-  padding: 0 var(--cg-s6) var(--cg-s6);
-  color: var(--cg-ink-muted);
-  line-height: var(--cg-leading-relaxed);
+.cg-faq__answer,
+.cg-accordion__answer {
+  max-inline-size: var(--cg-measure);
+  padding-block-end: var(--cg-s6);
 }
 
-.cg-faq__answer > :first-child {
-  margin-block-start: 0;
+.cg-faq__answer > * + *,
+.cg-accordion__answer > * + * {
+  margin-block-start: var(--cg-s4);
+}
+
+/* Under a title, the title's own rule already opens the list: the first row
+   takes a hairline instead of a second rule in ink. */
+.cg-faq__title + .cg-faq__items,
+.cg-accordion__title + .cg-accordion__items {
+  border-block-start-color: var(--cg-line);
 }
 
-.cg-faq__answer > :last-child {
-  margin-block-end: 0;
+.cg-faq__title {
+  margin-block-end: var(--cg-s8);
 }
 
-/* --- stats --------------------------------------------------------------- */
+@media (min-width: 64rem) {
+  .cg-faq__title {
+    grid-column: 1 / span 4;
+    align-self: start;
+    margin-block-end: 0;
+  }
+
+  /* Side by side, the list carries its own rule, level with the title's. */
+  .cg-faq__items,
+  .cg-faq__title + .cg-faq__items {
+    grid-column: 5 / -1;
+    border-block-start-color: var(--cg-ink);
+  }
+
+  .cg-faq__items:first-child {
+    grid-column: 1 / span 8;
+  }
+}
+
+/* --- stats ----------------------------------------------------------------
+   Figures in a row under hairlines. The markup reads label then figure; the
+   paint puts the figure first (`column-reverse` reorders the paint, never
+   the `<dl>`), which keeps WCAG 1.3.2.
+   ------------------------------------------------------------------------- */
 
-.cg-stats__items {
+.cg-stats__items,
+.cg-stat-counters__items {
   display: grid;
-  gap: var(--cg-gap);
-  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  grid-template-columns: subgrid;
+  row-gap: var(--cg-s10);
   margin: 0;
 }
 
-/* Reading order is label then figure; the stylesheet shows the figure first.
-   The markup is what a screen reader follows, so the two must not be
-   conflated — `column-reverse` reorders the paint, never the `<dl>`. */
 .cg-stat {
+  grid-column: span 6;
   display: flex;
   flex-direction: column-reverse;
+  justify-content: flex-end;
   gap: var(--cg-s2);
-  padding: var(--cg-s6);
-  background: var(--cg-surface-sunken);
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-ring);
+  padding-block-start: var(--cg-s4);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
 }
 
 .cg-stat__value {
-  display: flex;
-  align-items: baseline;
-  gap: var(--cg-s1);
-  margin: 0;
-  color: var(--cg-accent);
-  font-size: var(--cg-text-3xl);
-  font-weight: var(--cg-weight-bold);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
-  /* Figures that change between pages must not change width with the digits. */
-  font-variant-numeric: tabular-nums;
+  color: var(--cg-ink);
+  font-size: var(--cg-text-figure);
+  font-weight: var(--cg-weight-medium);
+  line-height: var(--cg-leading-display);
+  letter-spacing: var(--cg-tracking-heading);
+  font-variant-numeric: tabular-nums lining-nums;
 }
 
 .cg-stat__unit {
-  font-size: var(--cg-text-lg);
-  font-weight: var(--cg-weight-medium);
+  margin-inline-start: 0.08em;
   color: var(--cg-ink-muted);
-  letter-spacing: var(--cg-tracking-normal);
+  font-size: 0.6em;
 }
 
-/* Small caps under a large figure: the label is a caption for the number, and
-   at body size it competes with it. */
 .cg-stat__label {
+  max-inline-size: 28ch;
   color: var(--cg-ink-muted);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
-}
-
-/* --- logos --------------------------------------------------------------- */
-
-/* A grid, not a wrapping row: a flex row leaves the last line ragged, and a
-   row of logos that does not line up reads as an oversight rather than as a
-   list of names. */
-.cg-logos__items {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-  gap: var(--cg-gap);
-  align-items: center;
+  font-size: var(--cg-text-sm);
 }
 
-.cg-logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--cg-s4);
+/* Two to a row on a phone; an odd last figure takes the whole row rather
+   than leaving half of it empty. */
+@media (max-width: 63.99rem) {
+  .cg-stat:last-child:nth-child(odd),
+  .cg-stat-counter:last-child:nth-child(odd) {
+    grid-column: span 12;
+  }
 }
 
-.cg-logo__image {
-  /* One optical height for every logo, whatever its own proportions: `contain`
-     keeps a wide wordmark and a square mark at the same weight on the page. */
-  block-size: var(--cg-s10);
-  inline-size: auto;
-  max-inline-size: 100%;
-  object-fit: contain;
-  /* Held back so the logos read as a supporting row rather than as eight
-     competing brands, and brought fully forward on hover. Opacity, not
-     `grayscale`: a filtered logo is a logo whose owner did not approve it. */
-  opacity: 0.72;
-  transition: opacity var(--cg-duration) var(--cg-ease);
-}
+@media (min-width: 64rem) {
+  .cg-stat {
+    grid-column: span 3;
+  }
 
-.cg-logo__link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 100%;
-  border-radius: var(--cg-radius-md);
-}
+  .cg-stat:first-child:nth-last-child(3),
+  .cg-stat:first-child:nth-last-child(3) ~ .cg-stat {
+    grid-column: span 4;
+  }
 
-.cg-logo:hover .cg-logo__image,
-.cg-logo__link:focus-visible .cg-logo__image {
-  opacity: 1;
+  .cg-stat:first-child:nth-last-child(2),
+  .cg-stat:first-child:nth-last-child(2) ~ .cg-stat {
+    grid-column: span 6;
+  }
 }
 
-/* --- collectionList ------------------------------------------------------ */
+/* --- logos ----------------------------------------------------------------
+   Wordmarks on a six-column row, in greyscale so no one mark outshouts the
+   others, and turned light on the dark ground.
+   ------------------------------------------------------------------------- */
 
-.cg-collection__items {
+.cg-logos__items {
   display: grid;
-  gap: var(--cg-gap);
-}
-
-.cg-collection[data-layout="grid"] .cg-collection__items {
-  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-}
-
-.cg-collection[data-layout="carousel"] .cg-collection__items {
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(18rem, 45%);
-}
-
-.cg-collection[data-layout="carousel"] .cg-entry {
-  scroll-snap-align: start;
-}
-
-.cg-entry {
-  position: relative;
-  padding: var(--cg-s6);
-  background: var(--cg-surface-raised);
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-ring);
-  transition:
-    box-shadow var(--cg-duration) var(--cg-ease),
-    transform var(--cg-duration) var(--cg-ease);
-}
-
-.cg-entry:hover {
-  box-shadow: var(--cg-elevation-2), var(--cg-ring-accent);
-  transform: translateY(-2px);
-}
-
-/* Same overlay as `featureGrid`: the card is the hit area, drawn from the one
-   link the markup has, so nothing extra is announced. */
-.cg-entry__link {
-  color: inherit;
-  text-decoration: none;
-}
-
-.cg-entry__link::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
+  grid-template-columns: subgrid;
+  row-gap: var(--cg-s8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.cg-entry:hover .cg-entry__link {
-  color: var(--cg-accent);
+.cg-logo {
+  grid-column: span 6;
+  display: flex;
+  align-items: center;
+  min-block-size: 3.5rem;
 }
 
-/* Date first in the paint, title under it: a list of entries is scanned by
-   recency, and the markup still reads title then date. */
-.cg-entry__body {
+.cg-logo__link {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  min-block-size: 2.75rem;
+  max-inline-size: 100%;
 }
 
-.cg-entry__title {
-  order: 2;
-  margin: 0;
-  font-size: var(--cg-text-lg);
-  font-weight: var(--cg-weight-semibold);
-  line-height: var(--cg-leading-snug);
-  letter-spacing: var(--cg-tracking-snug);
-  text-wrap: balance;
+.cg-logo__image,
+.cg-logo-strip__image {
+  inline-size: auto;
+  max-inline-size: 100%;
+  object-fit: contain;
+  filter: grayscale(1) invert(var(--cg-mark-invert));
 }
 
-.cg-entry__date {
-  order: 1;
-  margin-block-end: var(--cg-s2);
-  color: var(--cg-ink-subtle);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
+.cg-logo__image {
+  block-size: 3rem;
 }
 
-.cg-entry__excerpt {
-  order: 3;
-  margin: var(--cg-s3) 0 0;
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-sm);
-  line-height: var(--cg-leading-relaxed);
-  /* Three lines, so cards in a row keep their heights close whatever the
-     editor wrote. Nothing is lost: the entry's own page carries the full text. */
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-  overflow: hidden;
+@media (min-width: 40rem) {
+  .cg-logo {
+    grid-column: span 4;
+  }
 }
 
-.cg-collection__empty {
-  padding: var(--cg-s8);
-  background: var(--cg-surface-sunken);
-  border-radius: var(--cg-radius-lg);
-  color: var(--cg-ink-subtle);
-  text-align: center;
-}
+@media (min-width: 64rem) {
+  .cg-logo {
+    grid-column: span 2;
+  }
 
-/* --- embed --------------------------------------------------------------- */
+  /* Three or four marks share the row instead of stopping short of its end. */
+  .cg-logo:first-child:nth-last-child(3),
+  .cg-logo:first-child:nth-last-child(3) ~ .cg-logo {
+    grid-column: span 4;
+  }
 
-.cg-embed {
-  aspect-ratio: var(--cg-ratio, 16 / 9);
-  max-inline-size: var(--cg-measure);
-  margin-inline: auto;
+  .cg-logo:first-child:nth-last-child(4),
+  .cg-logo:first-child:nth-last-child(4) ~ .cg-logo {
+    grid-column: span 3;
+  }
 }
 
+/* --- embed ----------------------------------------------------------------
+   A frame on the reading columns. Before consent, nothing is requested from
+   the provider: the placeholder says what would load and links to it.
+   ------------------------------------------------------------------------- */
+
 .cg-embed__frame {
   inline-size: 100%;
-  block-size: 100%;
+  aspect-ratio: var(--cg-ratio, 16 / 9);
   border: 0;
-  border-radius: var(--cg-radius-md);
+  background: var(--cg-band);
 }
 
-/* The consent placeholder is a real card, not a grey box: it says what would be
-   loaded and offers a way out to the source. It requests nothing third-party. */
+/* Not a frame-sized grey box, which reads as a video that failed: a short
+   note on a band, with the way out to the source. */
 .cg-embed__placeholder {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--cg-s5);
-  block-size: 100%;
-  padding: var(--cg-s8);
-  background: var(--cg-surface-sunken);
-  color: var(--cg-ink-muted);
-  /* Dashed, and kept dashed: it is the one place in the theme where the border
-     says "nothing has loaded here yet" rather than "this is a panel". */
-  border: 1px dashed var(--cg-line-strong);
-  border-radius: var(--cg-radius-lg);
-  text-align: center;
+  align-items: flex-start;
+  gap: var(--cg-s1);
+  padding: var(--cg-s6) var(--cg-s6) var(--cg-s4);
+  border-block-start: var(--cg-rule) solid var(--cg-ink);
+  background: var(--cg-band);
 }
 
 .cg-embed__notice {
-  margin: 0;
-  max-inline-size: var(--cg-measure-narrow);
-  line-height: var(--cg-leading-relaxed);
-  text-wrap: pretty;
-}
-
-/* The way out is an action, not a sentence with a link in it: this card exists
-   because the visitor has to choose, and a choice needs something to press. */
-.cg-embed__link {
-  display: inline-flex;
-  align-items: center;
-  min-block-size: 44px;
-  padding: var(--cg-s3) var(--cg-s6);
-  background: var(--cg-surface-raised);
-  color: var(--cg-accent);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring-accent);
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-semibold);
-  text-decoration: none;
-  transition:
-    background-color var(--cg-duration) var(--cg-ease),
-    color var(--cg-duration) var(--cg-ease);
+  max-inline-size: var(--cg-measure);
 }
 
-.cg-embed__link:hover {
-  background: var(--cg-accent);
-  color: var(--cg-accent-fg);
+@media (min-width: 64rem) {
+  .cg-embed > * {
+    grid-column: 1 / span 8;
+  }
 }
 
-/* --- testimonial (blocks@2.0) --------------------------------------------
-   Same silhouette as `quote`, left as a distinct rule block for the day the
-   two diverge visually — a testimonial wall reads differently from a single
-   pull quote once a theme has more than one on a page.
+/* --- testimonial ----------------------------------------------------------
+   A reader's words in the text face, set against a rule in ink: quieter than
+   a pull quote, and never a card.
    ------------------------------------------------------------------------- */
 
-.cg-testimonial {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
-  text-align: center;
+.cg-testimonial__quote,
+.cg-testimonial__attribution {
+  padding-inline-start: var(--cg-s6);
+  border-inline-start: var(--cg-rule-strong) solid var(--cg-ink);
 }
 
 .cg-testimonial__quote {
-  margin: 0;
-  font-family: var(--cogenta-font-serif);
+  quotes: "\201C" "\201D";
   font-size: var(--cg-text-xl);
   line-height: var(--cg-leading-snug);
-  text-wrap: balance;
+  letter-spacing: var(--cg-tracking-heading);
 }
 
-.cg-testimonial__quote > :first-child {
-  margin-block-start: 0;
+.cg-testimonial__quote > * + * {
+  margin-block-start: var(--cg-s4);
+}
+
+.cg-testimonial__quote > p:first-child::before {
+  content: open-quote;
 }
 
-.cg-testimonial__quote > :last-child {
-  margin-block-end: 0;
+.cg-testimonial__quote > p:last-child::after {
+  content: close-quote;
 }
 
 .cg-testimonial__attribution {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: var(--cg-s3);
-  margin-block-start: var(--cg-s6);
-  color: var(--cg-ink-subtle);
+  gap: var(--cg-s4);
+  padding-block-start: var(--cg-s6);
   font-size: var(--cg-text-sm);
 }
 
 .cg-testimonial__avatar {
   inline-size: var(--cg-s12);
   block-size: var(--cg-s12);
-  border-radius: var(--cg-radius-pill);
-  box-shadow: var(--cg-ring);
+  border-radius: 50%;
 }
 
 .cg-testimonial__names {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  line-height: var(--cg-leading-snug);
 }
 
 .cg-testimonial__name {
-  font-weight: var(--cg-weight-semibold);
   color: var(--cg-ink);
+  font-weight: var(--cg-weight-semibold);
+}
+
+.cg-testimonial__role {
+  color: var(--cg-ink-muted);
+}
+
+@media (min-width: 64rem) {
+  .cg-testimonial > * {
+    grid-column: 1 / span 8;
+  }
 }
 
-/* --- pricingTable (blocks@2.0) -------------------------------------------
-   Cards in a row, the highlighted tier lifted and ringed in the accent —
-   the one place in this theme a card earns a border of its own, because a
-   pricing table's whole point is telling the tiers apart at a glance.
+/* --- pricingTable ---------------------------------------------------------
+   Plans side by side under hairlines, each four rows (name, price, features,
+   action) that line up across plans. The recommended plan is marked by a
+   heavier rule in ink and a word, never by a tinted card.
    ------------------------------------------------------------------------- */
 
 .cg-pricing__tiers {
   display: grid;
-  gap: var(--cg-gap);
-  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-  align-items: start;
+  grid-template-columns: subgrid;
+  row-gap: var(--cg-s12);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .cg-pricing__tier {
-  display: flex;
-  flex-direction: column;
-  padding: var(--cg-s8) var(--cg-s6);
-  background: var(--cg-surface-raised);
-  border-radius: var(--cg-radius-xl);
-  box-shadow: var(--cg-ring);
+  grid-column: span 12;
+  grid-row: span 4;
+  display: grid;
+  grid-template-rows: subgrid;
+  row-gap: 0;
+  padding-block-start: var(--cg-s5);
+  border-block-start: var(--cg-rule) solid var(--cg-line-strong);
 }
 
 .cg-pricing__tier[data-highlighted="true"] {
-  background: var(--cg-surface-tinted);
-  box-shadow: var(--cg-elevation-2), var(--cg-ring-accent);
-  transform: translateY(calc(var(--cg-s3) * -1));
+  padding-block-start: calc(var(--cg-s5) - var(--cg-rule-strong) + var(--cg-rule));
+  border-block-start: var(--cg-rule-strong) solid var(--cg-ink);
+}
+
+.cg-pricing__head {
+  grid-row: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--cg-s1) var(--cg-s4);
 }
 
 .cg-pricing__name {
-  margin: 0;
-  font-size: var(--cg-text-md);
+  font-size: var(--cg-text-lg);
+}
+
+.cg-pricing__flag {
+  color: var(--cg-ink);
+  font-size: var(--cg-text-sm);
   font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-snug);
 }
 
 .cg-pricing__price {
+  grid-row: 2;
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
-  gap: var(--cg-s1);
-  margin: var(--cg-s4) 0 var(--cg-s6);
+  gap: var(--cg-s2);
+  margin-block-start: var(--cg-s5);
 }
 
 .cg-pricing__amount {
-  font-size: var(--cg-text-2xl);
-  font-weight: var(--cg-weight-bold);
-  letter-spacing: var(--cg-tracking-tight);
-  font-variant-numeric: tabular-nums;
+  font-size: var(--cg-text-figure);
+  font-weight: var(--cg-weight-medium);
+  line-height: var(--cg-leading-display);
+  letter-spacing: var(--cg-tracking-heading);
+  font-variant-numeric: tabular-nums lining-nums;
 }
 
 .cg-pricing__interval {
@@ -1016,205 +908,180 @@
 }
 
 .cg-pricing__features {
-  flex: 1;
-  margin: 0 0 var(--cg-s6);
+  grid-row: 3;
+  margin-block-start: var(--cg-s6);
   padding: 0;
   list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--cg-s2);
-  color: var(--cg-ink-muted);
-  line-height: var(--cg-leading-relaxed);
 }
 
 .cg-pricing__features li {
-  padding-inline-start: var(--cg-s6);
-  position: relative;
-}
-
-/* A drawn checkmark — no icon set, exactly the `faq` chevron's own approach. */
-.cg-pricing__features li::before {
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0.4em;
-  inline-size: 0.6em;
-  block-size: 0.35em;
-  border-inline-start: 2px solid var(--cg-accent);
-  border-block-end: 2px solid var(--cg-accent);
-  transform: rotate(-45deg);
+  padding-block: var(--cg-s2);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
 }
 
 .cg-pricing__action {
-  margin-block-start: auto;
+  grid-row: 4;
+  align-self: end;
+  margin-block-start: var(--cg-s8);
 }
 
+/* A block-level box, so no line box adds a pixel under the button and the
+   filled and outlined controls end up exactly the same height. */
 .cg-pricing__action .cg-action {
+  display: flex;
   inline-size: 100%;
-  justify-content: center;
-}
-
-/* --- accordion (blocks@2.0) ----------------------------------------------
-   Identical mechanics to `faq`'s panel, kept as its own rule block so the
-   two can diverge visually without either one's CSS becoming a conditional.
-   ------------------------------------------------------------------------- */
-
-.cg-accordion {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
-}
-
-.cg-accordion__items {
-  background: var(--cg-surface-raised);
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-ring);
-  overflow: hidden;
-}
-
-.cg-accordion__item + .cg-accordion__item {
-  border-block-start: 1px solid var(--cg-line-soft);
 }
 
-.cg-accordion__question {
+/* A plan's secondary action is an outlined control of the same size as the
+   filled one, so the three plans end on one line of buttons. No arrow: it
+   is a control, not a link in running text. */
+.cg-pricing__action .cg-action[data-emphasis="secondary"] {
   display: flex;
   align-items: center;
-  gap: var(--cg-s4);
-  padding: var(--cg-s5) var(--cg-s6);
-  font-weight: var(--cg-weight-semibold);
-  cursor: pointer;
-  list-style: none;
-  transition: background-color var(--cg-duration) var(--cg-ease);
-}
-
-.cg-accordion__question::-webkit-details-marker {
-  display: none;
+  justify-content: center;
+  min-block-size: 2.75rem;
+  padding: var(--cg-s2) var(--cg-s6);
+  border: var(--cg-rule) solid var(--cg-ink);
+  border-radius: var(--cg-radius-control);
+  color: var(--cg-ink);
+  line-height: var(--cg-leading-heading);
+  text-decoration-line: none;
+  white-space: normal;
+  transition:
+    background-color var(--cg-duration) var(--cg-ease),
+    color var(--cg-duration) var(--cg-ease);
 }
 
-.cg-accordion__question:hover {
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-soft-fg);
+.cg-pricing__action .cg-action[data-emphasis="secondary"]::after {
+  content: none;
 }
 
-.cg-accordion__question::after {
-  content: "";
-  flex: none;
-  margin-inline-start: auto;
-  inline-size: 0.6em;
-  block-size: 0.6em;
-  border-radius: var(--cg-radius-pill);
-  border: 2px solid currentColor;
-  position: relative;
+.cg-pricing__action .cg-action[data-emphasis="secondary"]:hover {
+  background: var(--cg-band);
+  color: var(--cg-ink);
 }
 
-/* A plus that becomes a minus, rather than the `faq` chevron — visually
-   distinct from its sibling block, on the same zero-JavaScript mechanics. */
-.cg-accordion__question::before {
-  content: "";
-  position: absolute;
-  inset-inline-end: calc(var(--cg-s6) + 0.2em);
-  inline-size: 0.32em;
-  block-size: 0;
-  border-block-start: 2px solid currentColor;
+@media (min-width: 48rem) {
+  .cg-pricing__tier {
+    grid-column: span 6;
+  }
 }
 
-.cg-accordion__details[open] .cg-accordion__question::before {
-  content: none;
-}
+@media (min-width: 64rem) {
+  .cg-pricing__tier {
+    grid-column: span 4;
+  }
 
-.cg-accordion__details[open] .cg-accordion__question {
-  color: var(--cg-accent);
-}
+  .cg-pricing__tier:first-child:nth-last-child(4),
+  .cg-pricing__tier:first-child:nth-last-child(4) ~ .cg-pricing__tier {
+    grid-column: span 3;
+  }
 
-.cg-accordion__answer {
-  padding: 0 var(--cg-s6) var(--cg-s6);
-  color: var(--cg-ink-muted);
-  line-height: var(--cg-leading-relaxed);
+  .cg-pricing__tier:first-child:nth-last-child(2),
+  .cg-pricing__tier:first-child:nth-last-child(2) ~ .cg-pricing__tier {
+    grid-column: span 6;
+  }
 }
 
-.cg-accordion__answer > :first-child {
-  margin-block-start: 0;
-}
+/* --- accordion ------------------------------------------------------------
+   The same mechanics and rows as `faq`, set on the reading columns under its
+   title rather than beside it.
+   ------------------------------------------------------------------------- */
 
-.cg-accordion__answer > :last-child {
-  margin-block-end: 0;
+@media (min-width: 64rem) {
+  .cg-accordion > * {
+    grid-column: 1 / span 8;
+  }
 }
 
-/* --- statCounter (blocks@2.0) ---------------------------------------------
-   Same `<dl>` mechanics as `stats`, without a background card: a counter row
-   reads as a single strip of figures rather than as `stats`'s set of panels.
+/* --- statCounter ----------------------------------------------------------
+   A few large figures in the display face, each with the line that says what
+   it counts.
    ------------------------------------------------------------------------- */
 
-.cg-stat-counters__items {
-  display: grid;
-  gap: var(--cg-gap);
-  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-  margin: 0;
-  text-align: center;
-}
-
 .cg-stat-counter {
+  grid-column: span 6;
   display: flex;
   flex-direction: column-reverse;
-  gap: var(--cg-s2);
+  justify-content: flex-end;
+  gap: var(--cg-s3);
 }
 
 .cg-stat-counter__value {
-  margin: 0;
-  color: var(--cg-accent);
-  font-size: calc(var(--cg-text-3xl) * 1.15);
-  font-weight: var(--cg-weight-bold);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
-  font-variant-numeric: tabular-nums;
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-display);
+  font-weight: var(--cg-weight-regular);
+  line-height: var(--cg-leading-display);
+  letter-spacing: var(--cg-tracking-display);
+  font-variant-numeric: tabular-nums lining-nums;
 }
 
 .cg-stat-counter__label {
+  max-inline-size: 28ch;
   color: var(--cg-ink-muted);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
 }
 
-/* --- logoStrip (blocks@2.0) ------------------------------------------------
-   The lighter-weight sibling of `logos`: one row, no card, no link — the
-   "as seen in" strip rather than the fuller partner grid.
+@media (min-width: 64rem) {
+  .cg-stat-counter {
+    grid-column: span 4;
+  }
+
+  .cg-stat-counter:first-child:nth-last-child(4),
+  .cg-stat-counter:first-child:nth-last-child(4) ~ .cg-stat-counter {
+    grid-column: span 3;
+  }
+
+  .cg-stat-counter:first-child:nth-last-child(2),
+  .cg-stat-counter:first-child:nth-last-child(2) ~ .cg-stat-counter {
+    grid-column: span 6;
+  }
+}
+
+/* --- logoStrip ------------------------------------------------------------
+   One line between hairlines: what the marks are, then the marks.
    ------------------------------------------------------------------------- */
 
 .cg-logo-strip {
-  margin-block: 0;
-  text-align: center;
+  row-gap: var(--cg-s4);
+}
+
+.cg-logo-strip__caption {
+  grid-row: 1;
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-sm);
+  font-weight: var(--cg-weight-medium);
 }
 
 .cg-logo-strip__items {
+  grid-row: 2;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  gap: var(--cg-gap-loose);
+  gap: var(--cg-s5) var(--cg-s10);
   margin: 0;
-  padding: 0;
+  padding-block: var(--cg-s6);
+  padding-inline: 0;
+  border-block: var(--cg-rule) solid var(--cg-line);
   list-style: none;
 }
 
-.cg-logo-strip__item {
-  display: flex;
-  align-items: center;
-}
-
 .cg-logo-strip__image {
-  block-size: var(--cg-s8);
-  inline-size: auto;
-  max-inline-size: 100%;
-  object-fit: contain;
-  opacity: 0.6;
+  block-size: 2.5rem;
 }
 
-.cg-logo-strip__caption {
-  margin-block-start: var(--cg-s4);
-  color: var(--cg-ink-subtle);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
+@media (min-width: 64rem) {
+  .cg-logo-strip__caption {
+    grid-column: 1 / span 3;
+    grid-row: 1;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    border-block: var(--cg-rule) solid var(--cg-line);
+  }
+
+  .cg-logo-strip__items {
+    grid-column: 4 / -1;
+    grid-row: 1;
+    justify-content: space-between;
+  }
 }