@cogenta/theme-restaurant 0.3.3 → 0.5.4

package/src/styles/blocks.css

@@ -1,975 +1,1057 @@
 /*
- * The seventeen vocabulary blocks (`blocks@2.0`). Reads only `--cg-*` from
- * `tokens.css`; nothing here reads a `--cogenta-*` token directly.
+ * The vocabulary blocks other than lists (see `menu.css`). Everything reads
+ * `tokens.css`; every block sits in the `.cr-section` rhythm and on the
+ * `.cr-container` grid (`base.css`).
  */
 
 /* --------------------------------------------------------------------------
-   hero — full-bleed, centred, a flat scrim over any photograph
+   hero: the room across the window, the name under it.
    -------------------------------------------------------------------------- */
 
-.cg-hero {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: 34rem;
-  padding: var(--cg-s20) var(--cg-gutter);
-  overflow: hidden;
-  background: var(--cg-ink);
-  color: var(--cg-canvas);
-  text-align: center;
+.cr-hero[data-media="true"] {
+  padding-block-start: 0;
 }
 
-@media (min-width: 56rem) {
-  .cg-hero {
-    min-block-size: 44rem;
-  }
-}
-
-.cg-hero[data-has-media="false"] {
-  background: var(--cg-surface-sunken);
-  color: var(--cg-ink);
-}
-
-.cg-hero__media {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
+.cr-hero__media {
+  margin: 0 0 clamp(var(--cr-s8), 4vw, var(--cr-s16));
+  background: var(--cr-plate);
 }
 
-.cg-hero__image {
+.cr-hero__image {
   inline-size: 100%;
-  block-size: 100%;
+  aspect-ratio: 4 / 5;
   object-fit: cover;
 }
 
-/* A flat, uniform veil rather than a gradient fade: `.cg-hero`'s content is
-   centred over the whole image (not pinned to the bottom), so contrast
-   needs to hold anywhere in the frame, not just near the caption. */
-.cg-hero__scrim {
-  position: absolute;
-  inset: 0;
-  background: var(--cg-scrim);
+@media (min-width: 40rem) {
+  .cr-hero__image {
+    aspect-ratio: 3 / 2;
+  }
 }
 
-.cg-hero__body {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--cg-s5);
-  max-inline-size: 42rem;
+@media (min-width: 64rem) {
+  .cr-hero__image {
+    aspect-ratio: 21 / 9;
+    max-block-size: 72svh;
+  }
 }
 
-.cg-hero__eyebrow {
-  margin: 0;
-  color: inherit;
+.cr-hero__inner {
+  row-gap: var(--cr-s6);
+  align-items: end;
 }
 
-.cg-hero__eyebrow::before,
-.cg-hero__eyebrow::after {
-  display: inline-block;
-  inline-size: 1.5em;
-  border-block-end: 1px solid currentColor;
-  vertical-align: middle;
-  margin-inline: 0.5em;
-  opacity: 0.6;
-  content: "";
+.cr-hero[data-media="false"] .cr-hero__inner {
+  padding-block-start: calc(var(--cr-section) * 0.4);
 }
 
-.cg-hero__title {
-  margin: 0;
-  font-size: clamp(var(--cg-text-3xl), 6vw, var(--cg-text-4xl));
-  letter-spacing: var(--cg-tracking-wide);
+.cr-hero__eyebrow {
+  margin: 0 0 var(--cr-s3);
+  color: var(--cr-brass);
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-size-label);
+  font-weight: var(--cr-weight-semibold);
+  font-variant-caps: all-small-caps;
+  line-height: 1.2;
+  letter-spacing: var(--cr-tracking-caps);
 }
 
-.cg-hero__subtitle {
-  margin: 0;
-  font-size: var(--cg-text-lg);
-  opacity: 0.92;
+.cr-hero__title {
+  font-size: var(--cr-size-name);
+  font-weight: var(--cr-weight-light);
+  line-height: var(--cr-leading-display);
+  letter-spacing: var(--cr-tracking-display);
 }
 
-.cg-hero .cg-actions {
-  justify-content: center;
+.cr-hero__aside {
+  display: grid;
+  gap: var(--cr-s5);
+  justify-items: start;
 }
 
-/* The secondary action's global rule (`base.css`) hardcodes `--cg-ink` — the
- * right choice on the plain, light `data-has-media="false"` backdrop below,
- * but unreadable dark-on-dark once a photograph and its scrim are behind it.
- * Same fix as `.cg-close`'s own secondary override just below in this file,
- * scoped to the media case only so the no-media hero keeps its correct ink
- * text untouched. */
-.cg-hero[data-has-media="true"] .cg-action[data-emphasis="secondary"] {
-  border-color: color-mix(in oklab, var(--cg-canvas) 40%, transparent);
-  color: var(--cg-canvas);
+.cr-hero__subtitle {
+  margin: 0;
+  max-inline-size: 34ch;
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-lg);
+  line-height: var(--cr-leading-lead);
 }
 
-.cg-hero[data-has-media="true"] .cg-action[data-emphasis="secondary"]:hover {
-  border-color: var(--cg-canvas);
-  color: var(--cg-canvas);
+@media (min-width: 64rem) {
+  .cr-hero__heading {
+    grid-column: 1 / span 8;
+  }
+
+  .cr-hero__aside {
+    grid-column: 9 / span 4;
+    padding-block-end: calc(var(--cr-size-name) * 0.16);
+  }
 }
 
 /* --------------------------------------------------------------------------
-   prose ("Our story") — a short, centred, narrow column
+   prose: running text, and the centred welcome an editor asks for.
    -------------------------------------------------------------------------- */
 
-.cg-story {
-  text-align: center;
+.cr-prose__body {
+  max-inline-size: var(--cr-measure);
+  font-size: var(--cr-text-reading);
+  line-height: var(--cr-leading-text);
 }
 
-.cg-story__body {
-  max-inline-size: var(--cg-measure-narrow);
-  margin-inline: auto;
-  text-align: start;
+@media (min-width: 64rem) {
+  .cr-prose__body {
+    grid-column: 3 / span 7;
+  }
 }
 
-.cg-story__body p {
-  margin: 0 0 var(--cg-s5);
+.cr-prose__body > * {
+  margin: 0;
 }
 
-.cg-story__body :is(h2, h3, h4) {
-  margin-block: var(--cg-s8) var(--cg-s4);
+.cr-prose__body > * + * {
+  margin-block-start: 1.1em;
 }
 
-.cg-story__body blockquote {
-  margin: var(--cg-s6) 0;
-  padding-inline-start: var(--cg-s5);
-  border-inline-start: 2px solid var(--cg-accent);
-  font-style: italic;
+.cr-prose__body :where(h2) {
+  margin-block-start: var(--cr-s16);
+  font-size: var(--cr-text-3xl);
+  font-weight: var(--cr-weight-light);
+  line-height: var(--cr-leading-heading);
+  letter-spacing: var(--cr-tracking-display);
 }
 
-.cg-prose__figure {
-  margin: var(--cg-s6) 0;
+.cr-prose__body :where(h3) {
+  margin-block-start: var(--cr-s10);
+  font-size: var(--cr-text-xl);
+  font-weight: var(--cr-weight-semibold);
 }
 
-.cg-prose__figure figcaption {
-  margin-block-start: var(--cg-s2);
-  font-size: var(--cg-text-sm);
-  color: var(--cg-ink-muted);
+.cr-prose__body :where(h4, h5, h6) {
+  margin-block-start: var(--cr-s8);
+  font-size: var(--cr-text-lg);
+  font-weight: var(--cr-weight-semibold);
 }
 
-.cg-prose__rule {
-  block-size: 1px;
-  border: 0;
-  margin-block: var(--cg-s8);
-  background: var(--cg-line);
+.cr-prose__body > :first-child {
+  margin-block-start: 0;
 }
 
-/* --------------------------------------------------------------------------
-   collectionList — "The menu", grouped by category, priced with a leader
-   -------------------------------------------------------------------------- */
-
-.cg-menu__groups {
-  display: grid;
-  gap: var(--cg-s16);
-  grid-template-columns: 1fr;
+.cr-prose__body :where(h2, h3, h4, h5, h6) + * {
+  margin-block-start: 0.7em;
 }
 
-@media (min-width: 80rem) {
-  .cg-menu__groups {
-    grid-template-columns: 1fr 1fr;
-    column-gap: var(--cg-s20);
-  }
+.cr-prose__body a {
+  text-decoration-color: var(--cr-brass);
 }
 
-.cg-menu__group-title {
-  margin: 0 0 var(--cg-s6);
-  font-size: var(--cg-text-lg);
-  text-align: center;
-  letter-spacing: var(--cg-tracking-caps);
-  text-transform: uppercase;
-  font-family: var(--cogenta-font-sans);
-  font-weight: var(--cg-weight-medium);
-  color: var(--cg-accent);
+.cr-prose__body a:hover {
+  text-decoration-color: currentColor;
 }
 
-.cg-menu__group + .cg-menu__group {
-  padding-block-start: var(--cg-s10);
-  border-block-start: 1px solid var(--cg-line-soft);
+.cr-prose__body :where(ul, ol) {
+  padding-inline-start: 1.2em;
 }
 
-@media (min-width: 80rem) {
-  .cg-menu__group + .cg-menu__group {
-    border-block-start: 0;
-    padding-block-start: 0;
-  }
-}
-
-.cg-menu__dish {
-  display: flex;
-  gap: var(--cg-s4);
-  padding-block: var(--cg-s5);
-}
-
-.cg-menu__dish + .cg-menu__dish {
-  border-block-start: 1px dotted var(--cg-line);
+.cr-prose__body :where(li) + li {
+  margin-block-start: 0.4em;
 }
 
-.cg-menu__dish-photo {
-  flex: 0 0 auto;
+.cr-prose__body :where(li)::marker {
+  color: var(--cr-ink-subtle);
 }
 
-.cg-menu__dish-image {
-  inline-size: 5rem;
-  block-size: 5rem;
-  border-radius: var(--cg-radius-md);
-}
-
-.cg-menu__dish-body {
-  flex: 1 1 auto;
-  min-inline-size: 0;
-}
-
-.cg-menu__dish-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--cg-s2);
+.cr-prose__body :where(blockquote) {
+  margin-inline: 0;
+  padding-inline-start: var(--cr-s6);
+  border-inline-start: var(--cr-rule) solid var(--cr-line-ink);
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-text-xl);
+  font-style: italic;
+  line-height: var(--cr-leading-lead);
 }
 
-.cg-menu__dish-name {
+.cr-prose__body :where(blockquote p) {
   margin: 0;
-  /* Shrinkable and free to wrap: a real, human-entered dish name has no
-     length limit, and on a narrow screen it must break onto a second line
-     — or shrink to make room for its leader and price — rather than force
-     the whole row (and the page) wider than the viewport, which `nowrap`
-     plus a non-shrinking basis did below ~400px. */
-  flex: 1 1 auto;
-  min-inline-size: 0;
-  font-size: var(--cg-text-lg);
-  font-weight: var(--cg-weight-regular);
 }
 
-/*
- * The leader and its price move as one unit (`collection-list.ts` nests
- * both in a single `<span>`): on a name too long to share its line, the
- * dots must wrap down *with* the price they point to, never left dangling
- * at the end of the name's own line while the price they introduce sits
- * stranded below on a line of its own.
- */
-.cg-menu__dish-tail {
-  display: flex;
-  align-items: baseline;
-  gap: var(--cg-s2);
-  flex: 0 1 auto;
-  min-inline-size: 5rem;
+.cr-prose__body :where(strong) {
+  font-weight: var(--cr-weight-semibold);
 }
 
-.cg-menu__dish-leader {
-  flex: 1 1 auto;
-  block-size: 0;
-  border-block-end: 1px dotted var(--cg-line-strong);
-  margin-block-end: 0.35em;
-  min-inline-size: var(--cg-s5);
+.cg-prose__figure {
+  margin-block: var(--cr-s10);
+  margin-inline: 0;
 }
 
-.cg-menu__dish-price {
-  flex: 0 0 auto;
-  font-family: var(--cogenta-font-sans);
-  font-weight: var(--cg-weight-medium);
-  color: var(--cg-accent);
-  white-space: nowrap;
+.cg-prose__figure img {
+  inline-size: 100%;
+  background: var(--cr-plate);
 }
 
-.cg-menu__dish-description {
-  margin: var(--cg-s1) 0 0;
-  font-style: italic;
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-sm);
+.cg-prose__figure figcaption {
+  margin-block-start: var(--cr-s3);
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
 }
 
-.cg-menu__empty {
+.cg-prose__rule {
+  margin-block: var(--cr-s12);
+}
+
+/* The welcome: a prose block whose `align` variant is `center`. A few
+   sentences in the display serif, centred on the page, the only centred
+   text block of the theme. */
+[data-block="prose"][data-variant-align="center"] .cr-prose__body {
+  grid-column: 1 / -1;
+  justify-self: center;
+  max-inline-size: 34ch;
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-size-welcome);
+  font-weight: var(--cr-weight-regular);
+  line-height: 1.32;
   text-align: center;
-  color: var(--cg-ink-muted);
+  text-wrap: balance;
+}
+
+[data-block="prose"][data-variant-align="center"] .cr-prose__body > * + * {
+  margin-block-start: 0.8em;
 }
 
 /* --------------------------------------------------------------------------
-   gallery — grid / carousel / masonry, no JavaScript
+   mediaFigure
    -------------------------------------------------------------------------- */
 
-.cg-gallery__item {
-  border-radius: var(--cg-radius-md);
+.cr-figure__frame {
   overflow: hidden;
+  background: var(--cr-plate);
 }
 
-.cg-gallery__item img {
-  aspect-ratio: 4 / 3;
+.cr-figure__image {
   inline-size: 100%;
+  block-size: 100%;
   object-fit: cover;
-  transition: transform var(--cg-duration-slow) var(--cg-ease);
 }
 
-.cg-gallery__item:hover img {
-  transform: scale(1.03);
-}
-
-.cg-gallery[data-layout="grid"] .cg-gallery__items {
+.cr-figure__caption {
   display: grid;
-  gap: var(--cg-s4);
-  grid-template-columns: repeat(2, 1fr);
+  gap: var(--cr-s2);
+  margin-block-start: var(--cr-s4);
 }
 
-@media (min-width: 48rem) {
-  .cg-gallery[data-layout="grid"] .cg-gallery__items {
-    grid-template-columns: repeat(3, 1fr);
-  }
+.cr-figure__text {
+  max-inline-size: 60ch;
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
 }
 
-.cg-gallery[data-layout="carousel"] .cg-gallery__items {
-  display: flex;
-  gap: var(--cg-s4);
+.cr-figure__credit {
+  color: var(--cr-ink-subtle);
+  font-size: var(--cr-text-sm);
 }
 
-.cg-gallery[data-layout="carousel"] .cg-gallery__item {
-  flex: 0 0 auto;
-  inline-size: 16rem;
-  scroll-snap-align: start;
+.cr-figure[data-align="full"] > .cr-container {
+  max-inline-size: none;
+  padding-inline: 0;
 }
 
-/* True masonry, no JavaScript: a multi-column flow, each tile forbidden
-   from breaking across a column so the effect reads as a real masonry wall
-   rather than a grid with gaps. */
-.cg-gallery[data-layout="masonry"] .cg-gallery__items {
-  column-count: 2;
-  column-gap: var(--cg-s4);
+.cr-figure[data-align="full"] .cr-figure__caption {
+  padding-inline: var(--cr-gutter);
 }
 
-@media (min-width: 48rem) {
-  .cg-gallery[data-layout="masonry"] .cg-gallery__items {
-    column-count: 3;
+@media (min-width: 64rem) {
+  .cr-figure[data-align="center"] .cr-figure__frame,
+  .cr-figure[data-align="center"] .cr-figure__caption {
+    grid-column: 3 / span 8;
   }
-}
 
-.cg-gallery[data-layout="masonry"] .cg-gallery__item {
-  margin-block-end: var(--cg-s4);
-  break-inside: avoid;
-}
+  .cr-figure[data-layout="split"] .cr-figure__inner {
+    align-items: end;
+  }
+
+  .cr-figure[data-layout="split"] .cr-figure__frame {
+    grid-column: 1 / span 7;
+    grid-row: 1;
+  }
+
+  .cr-figure[data-layout="split"] .cr-figure__caption {
+    grid-column: 9 / span 4;
+    grid-row: 1;
+    margin: 0;
+  }
+
+  .cr-figure[data-align="end"] .cr-figure__frame {
+    grid-column: 6 / span 7;
+  }
 
-.cg-gallery[data-layout="masonry"] .cg-gallery__item img {
-  aspect-ratio: auto;
+  .cr-figure[data-align="end"] .cr-figure__caption {
+    grid-column: 1 / span 4;
+  }
+
+  .cr-figure[data-layout="split"] .cr-figure__text {
+    color: var(--cr-ink);
+    font-family: var(--cr-font-display);
+    font-size: var(--cr-size-lead);
+    font-style: italic;
+    line-height: var(--cr-leading-lead);
+  }
 }
 
 /* --------------------------------------------------------------------------
-   stats ("Since 1994 · 3 chefs · 120 seats")
+   featureGrid, as a ruled table and as ruled columns
    -------------------------------------------------------------------------- */
 
-.cg-figures__items {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0;
+.cr-table__rows {
   margin: 0;
   padding: 0;
+  list-style: none;
+  border-block-start: var(--cr-rule) solid var(--cr-line-ink);
 }
 
-.cg-figures__item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--cg-s2);
-  padding-inline: var(--cg-s8);
-  text-align: center;
+.cr-table__row {
+  display: grid;
+  gap: var(--cr-s2) var(--cr-col-gap);
+  padding-block: var(--cr-s5);
+  border-block-end: var(--cr-rule) solid var(--cr-line);
 }
 
-.cg-figures__item + .cg-figures__item {
-  border-inline-start: 1px solid var(--cg-line-soft);
+.cr-table__label {
+  font-size: var(--cr-size-dish-name);
+  font-weight: var(--cr-weight-semibold);
+  line-height: 1.25;
 }
 
-.cg-figures__value {
+.cr-table__text {
   margin: 0;
-  font-family: var(--cogenta-font-serif);
-  font-size: var(--cg-text-3xl);
-  font-weight: var(--cg-weight-light);
-  color: var(--cg-accent);
+  max-inline-size: 52ch;
+  color: var(--cr-ink-muted);
 }
 
-.cg-figures__unit {
-  margin-inline-start: 0.15em;
-  font-size: 0.6em;
+.cr-table__value-link {
+  color: inherit;
+  text-decoration-color: var(--cr-line-strong);
+}
+
+.cr-table__value-link:hover {
+  color: var(--cr-ink);
+  text-decoration-color: currentColor;
 }
 
-.cg-figures__label {
+@media (min-width: 40rem) {
+  .cr-table__row {
+    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2.4fr);
+    align-items: baseline;
+  }
+}
+
+@media (min-width: 64rem) {
+  .cr-table[data-titled="true"] .cr-head {
+    grid-column: 1 / span 4;
+    grid-row: 1;
+  }
+
+  .cr-table[data-titled="true"] .cr-table__rows {
+    grid-column: 5 / span 8;
+    grid-row: 1;
+  }
+
+  .cr-table[data-titled="false"] .cr-table__rows {
+    grid-column: 3 / span 8;
+  }
+
+  .cr-table .cr-head__title {
+    max-inline-size: 12ch;
+  }
+}
+
+.cr-columns__items {
+  display: grid;
+  gap: var(--cr-s10) var(--cr-col-gap);
   margin: 0;
-  font-size: var(--cg-text-xs);
-  letter-spacing: var(--cg-tracking-caps);
-  text-transform: uppercase;
-  color: var(--cg-ink-muted);
+  padding: 0;
+  list-style: none;
 }
 
-/* --------------------------------------------------------------------------
-   testimonial — a guestbook quotation
-   -------------------------------------------------------------------------- */
+@media (min-width: 40rem) {
+  .cr-columns__items {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
 
-.cg-testimonial {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
-  text-align: center;
+@media (min-width: 64rem) {
+  .cr-columns[data-count="3"] .cr-columns__items {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cr-columns[data-count="4"] .cr-columns__items {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 
-.cg-testimonial__quote {
-  margin: 0 0 var(--cg-s6);
-  font-family: var(--cogenta-font-serif);
-  font-size: var(--cg-text-xl);
-  font-style: italic;
-  line-height: var(--cg-leading-snug);
+.cr-columns__item {
+  padding-block-start: var(--cr-s5);
+  border-block-start: var(--cr-rule) solid var(--cr-line-ink);
 }
 
-.cg-testimonial__quote::before {
+.cr-columns__icon {
   display: block;
-  margin-block-end: var(--cg-s2);
-  font-size: var(--cg-text-3xl);
-  color: var(--cg-accent);
-  font-family: var(--cogenta-font-serif);
-  content: "\201C";
+  margin-block-end: var(--cr-s5);
+  color: var(--cr-ink);
 }
 
-.cg-testimonial__attribution {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--cg-s2);
+.cr-columns__name {
+  font-size: var(--cr-text-2xl);
+  font-weight: var(--cr-weight-regular);
 }
 
-.cg-testimonial__avatar {
-  inline-size: 3.5rem;
-  block-size: 3.5rem;
-  border-radius: 50%;
+.cr-columns__text {
+  margin: var(--cr-s3) 0 0;
+  max-inline-size: 42ch;
+  color: var(--cr-ink-muted);
 }
 
-.cg-testimonial__who {
-  display: flex;
-  flex-direction: column;
-  font-size: var(--cg-text-sm);
+/* --------------------------------------------------------------------------
+   cta: a line of the page between a rule and the space after it.
+   -------------------------------------------------------------------------- */
+
+.cr-cta__inner {
+  row-gap: var(--cr-s6);
+}
+
+/* The rule is a grid item across the columns, so it stops at the gutters
+   like the words under it instead of running to the edges of the window. */
+.cr-cta__inner::before {
+  content: "";
+  grid-column: 1 / -1;
+  block-size: var(--cr-rule);
+  margin-block-end: var(--cr-s4);
+  background: var(--cr-line-ink);
+}
+
+/* On a band the change of ground already marks the start. */
+[data-variant-background] > .cr-cta__inner::before {
+  content: none;
 }
 
-.cg-testimonial__name {
-  font-weight: var(--cg-weight-medium);
+.cr-cta__title {
+  max-inline-size: 18ch;
+  font-size: var(--cr-size-section);
+  font-weight: var(--cr-weight-light);
+  line-height: var(--cr-leading-heading);
+  letter-spacing: var(--cr-tracking-display);
 }
 
-.cg-testimonial__role {
-  color: var(--cg-ink-muted);
+.cr-cta__body {
+  display: grid;
+  gap: var(--cr-s5);
+  justify-items: start;
+}
+
+.cr-cta__text {
+  margin: 0;
+  max-inline-size: 40ch;
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-lg);
+  line-height: var(--cr-leading-lead);
+}
+
+@media (min-width: 64rem) {
+  .cr-cta__title {
+    grid-column: 1 / span 7;
+  }
+
+  .cr-cta__body {
+    grid-column: 9 / span 4;
+    padding-block-start: 0.6em;
+  }
 }
 
 /* --------------------------------------------------------------------------
-   accordion ("Hours & location")
+   gallery
    -------------------------------------------------------------------------- */
 
-.cg-hours {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
+.cr-gallery__items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.cg-hours__item + .cg-hours__item {
-  border-block-start: 1px solid var(--cg-line-soft);
+.cr-gallery__item {
+  background: var(--cr-plate);
 }
 
-.cg-hours__details {
-  padding-block: var(--cg-s2);
+.cr-gallery__image {
+  inline-size: 100%;
+  object-fit: cover;
 }
 
-.cg-hours__question {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--cg-s4);
-  padding-block: var(--cg-s4);
-  cursor: pointer;
-  list-style: none;
-  font-size: var(--cg-text-lg);
+.cr-gallery[data-layout="grid"] .cr-gallery__items {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--cr-col-gap);
 }
 
-.cg-hours__question::-webkit-details-marker {
-  display: none;
+.cr-gallery[data-layout="grid"][data-columns="1"] .cr-gallery__items {
+  grid-template-columns: minmax(0, 1fr);
 }
 
-.cg-hours__question-text {
-  font-family: var(--cogenta-font-serif);
+.cr-gallery[data-layout="grid"] .cr-gallery__image {
+  aspect-ratio: 4 / 5;
 }
 
-.cg-hours__mark {
-  position: relative;
-  flex: 0 0 auto;
-  inline-size: 0.9rem;
-  block-size: 0.9rem;
+@media (min-width: 64rem) {
+  .cr-gallery[data-layout="grid"][data-columns="3"] .cr-gallery__items {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cr-gallery[data-layout="grid"][data-columns="4"] .cr-gallery__items {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 
-.cg-hours__mark::before,
-.cg-hours__mark::after {
-  position: absolute;
-  inset: 0;
-  margin: auto;
-  inline-size: 100%;
-  block-size: 1px;
-  background: currentColor;
-  content: "";
+.cr-gallery[data-layout="masonry"] .cr-gallery__items {
+  columns: 2;
+  column-gap: var(--cr-col-gap);
 }
 
-.cg-hours__mark::after {
-  transform: rotate(90deg);
-  transition: transform var(--cg-duration) var(--cg-ease);
+.cr-gallery[data-layout="masonry"] .cr-gallery__item {
+  margin-block-end: var(--cr-col-gap);
+  break-inside: avoid;
 }
 
-.cg-hours__details[open] .cg-hours__mark::after {
-  transform: rotate(0deg);
+@media (min-width: 64rem) {
+  .cr-gallery[data-layout="masonry"] .cr-gallery__items {
+    columns: 3;
+  }
 }
 
-.cg-hours__answer {
-  padding-block-end: var(--cg-s5);
-  color: var(--cg-ink-muted);
+.cr-gallery__viewport {
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: thin;
+  padding-block-end: var(--cr-s4);
 }
 
-.cg-hours__answer table {
-  width: 100%;
-  border-collapse: collapse;
+.cr-gallery[data-layout="carousel"] .cr-gallery__items {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 72%;
+  gap: var(--cr-col-gap);
 }
 
-.cg-hours__answer td,
-.cg-hours__answer th {
-  padding: var(--cg-s2) var(--cg-s3);
-  border-block-end: 1px solid var(--cg-line-soft);
-  text-align: start;
+@media (min-width: 40rem) {
+  .cr-gallery[data-layout="carousel"] .cr-gallery__items {
+    grid-auto-columns: calc((100% - var(--cr-col-gap) * 2) / 3);
+  }
 }
 
-/* --------------------------------------------------------------------------
-   embed — the map placeholder card
-   -------------------------------------------------------------------------- */
+@media (min-width: 64rem) {
+  .cr-gallery[data-layout="carousel"] .cr-gallery__items {
+    grid-auto-columns: calc((100% - var(--cr-col-gap) * 3) / 4);
+  }
+}
 
-.cg-embed {
-  position: relative;
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
-  aspect-ratio: var(--cg-ratio, 16 / 9);
-  border-radius: var(--cg-radius-md);
-  overflow: hidden;
-  box-shadow: var(--cg-ring);
+.cr-gallery[data-layout="carousel"] .cr-gallery__item {
+  scroll-snap-align: start;
 }
 
-.cg-embed__frame {
-  position: absolute;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  border: 0;
+.cr-gallery[data-layout="carousel"] .cr-gallery__image {
+  aspect-ratio: 4 / 5;
 }
 
-.cg-embed__placeholder {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--cg-s3);
-  padding: var(--cg-s6);
-  background: var(--cg-surface-sunken);
-  text-align: center;
+/* --------------------------------------------------------------------------
+   quote: a line from the press.
+   -------------------------------------------------------------------------- */
+
+.cr-quote__inner {
+  margin-block: 0;
+  row-gap: var(--cr-s8);
 }
 
-.cg-embed__provider {
+.cr-quote__quote {
   margin: 0;
-  font-size: var(--cg-text-xs);
-  letter-spacing: var(--cg-tracking-caps);
-  text-transform: uppercase;
-  color: var(--cg-ink-subtle);
 }
 
-.cg-embed__notice {
+.cr-quote__text {
   margin: 0;
-  max-inline-size: 28rem;
-  color: var(--cg-ink-muted);
+  max-inline-size: 32ch;
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-size-quote);
+  font-weight: var(--cr-weight-light);
+  line-height: 1.22;
+  letter-spacing: var(--cr-tracking-heading);
+  quotes: "\201C" "\201D";
+  text-wrap: balance;
 }
 
-.cg-embed__link {
-  font-weight: var(--cg-weight-medium);
+.cr-quote__text::before {
+  content: open-quote;
 }
 
-/* --------------------------------------------------------------------------
-   cta ("Book now / Call us") — full-bleed closing band
-   -------------------------------------------------------------------------- */
+.cr-quote__text::after {
+  content: close-quote;
+}
 
-.cg-close {
+.cr-quote__attribution {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: var(--cg-s5);
-  padding: var(--cg-s20) var(--cg-gutter);
-  background: var(--cg-ink);
-  color: var(--cg-canvas);
-  text-align: center;
+  gap: var(--cr-s4);
 }
 
-.cg-close__title {
-  color: inherit;
-  font-size: var(--cg-text-2xl);
+.cr-quote__avatar {
+  inline-size: 3rem;
+  block-size: 3rem;
+  object-fit: cover;
 }
 
-.cg-close__text {
-  margin: 0;
-  max-inline-size: 36rem;
-  opacity: 0.9;
+.cr-quote__who {
+  display: grid;
+  gap: 0.15em;
+  padding-inline-start: var(--cr-s4);
+  border-inline-start: var(--cr-rule) solid var(--cr-line-ink);
 }
 
-.cg-close .cg-actions {
-  justify-content: center;
+.cr-quote__author {
+  font-size: var(--cr-text-md);
+  font-weight: var(--cr-weight-medium);
 }
 
-.cg-close .cg-action[data-emphasis="secondary"] {
-  border-color: color-mix(in oklab, var(--cg-canvas) 40%, transparent);
-  color: var(--cg-canvas);
+.cr-quote__role {
+  color: var(--cr-ink-muted);
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-text-lg);
+  font-style: italic;
 }
 
-.cg-close .cg-action[data-emphasis="secondary"]:hover {
-  border-color: var(--cg-canvas);
-  color: var(--cg-canvas);
+@media (min-width: 64rem) {
+  .cr-quote__quote,
+  .cr-quote__attribution {
+    grid-column: 2 / span 10;
+  }
+
+  /* The opening quotation mark hangs in the margin, so the words align. */
+  .cr-quote__text {
+    text-indent: -0.42em;
+  }
 }
 
 /* --------------------------------------------------------------------------
-   mediaFigure
+   testimonial: a guest's note.
    -------------------------------------------------------------------------- */
 
-.cg-plate {
+.cr-note__inner {
+  margin-block: 0;
+  row-gap: var(--cr-s5);
+}
+
+.cr-note__quote {
   margin: 0;
+  max-inline-size: 44ch;
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-size-lead);
+  font-style: italic;
+  line-height: var(--cr-leading-lead);
 }
 
-.cg-plate__frame {
-  overflow: hidden;
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring);
-  aspect-ratio: var(--cg-ratio, auto);
+.cr-note__quote p {
+  margin: 0;
 }
 
-.cg-plate__media {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
+.cr-note__quote p + p {
+  margin-block-start: 0.7em;
 }
 
-.cg-plate__caption {
-  margin-block-start: var(--cg-s3);
-  font-size: var(--cg-text-sm);
-  font-style: italic;
-  color: var(--cg-ink-muted);
-  text-align: center;
+.cr-note__attribution {
+  display: flex;
+  align-items: center;
+  gap: var(--cr-s4);
 }
 
-.cg-plate__credit {
-  display: block;
-  font-style: normal;
-  font-size: var(--cg-text-xs);
-  color: var(--cg-ink-subtle);
+.cr-note__avatar {
+  inline-size: 3.5rem;
+  block-size: 3.5rem;
+  object-fit: cover;
 }
 
-.cg-plate[data-align="wide"] {
-  max-inline-size: none;
+.cr-note__who {
+  display: grid;
+  gap: 0.1em;
 }
 
-.cg-plate[data-align="full"] {
-  max-inline-size: none;
-  margin-inline: calc(var(--cg-gutter) * -1);
+.cr-note__name {
+  font-weight: var(--cr-weight-medium);
+}
+
+.cr-note__role {
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
 }
 
-.cg-plate[data-align="full"] .cg-plate__frame {
-  border-radius: 0;
+@media (min-width: 64rem) {
+  .cr-note__quote,
+  .cr-note__attribution {
+    grid-column: 4 / span 7;
+  }
 }
 
 /* --------------------------------------------------------------------------
-   featureGrid — "How we cook"
+   faq and accordion
    -------------------------------------------------------------------------- */
 
-.cg-craft__items {
-  display: grid;
-  gap: var(--cg-s10);
-  grid-template-columns: 1fr;
-  text-align: center;
+.cr-answers__items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-block-start: var(--cr-rule) solid var(--cr-line-ink);
 }
 
-@media (min-width: 48rem) {
-  .cg-craft__items {
-    grid-template-columns: repeat(3, 1fr);
-  }
+.cr-answers__item {
+  border-block-end: var(--cr-rule) solid var(--cr-line);
 }
 
-.cg-craft__mark {
-  display: inline-flex;
+.cr-answers__summary {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  inline-size: 3rem;
-  block-size: 3rem;
-  margin-block-end: var(--cg-s4);
-  border: 1px solid var(--cg-line-strong);
-  border-radius: 50%;
-  color: var(--cg-accent);
+  justify-content: space-between;
+  gap: var(--cr-s6);
+  padding-block: var(--cr-s5);
+  cursor: pointer;
+  list-style: none;
 }
 
-.cg-craft__glyph {
-  inline-size: 1.4rem;
-  block-size: 1.4rem;
+.cr-answers__summary::-webkit-details-marker {
+  display: none;
 }
 
-.cg-craft__title {
-  margin: 0 0 var(--cg-s2);
-  font-size: var(--cg-text-lg);
-  font-weight: var(--cg-weight-regular);
+.cr-answers__question {
+  font-size: var(--cr-size-dish-name);
+  font-weight: var(--cr-weight-semibold);
+  line-height: 1.25;
 }
 
-.cg-craft__link {
-  color: inherit;
+.cr-answers__summary:hover .cr-answers__question {
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--cr-rule);
+  text-underline-offset: 0.2em;
 }
 
-.cg-craft__text {
-  margin: 0;
-  color: var(--cg-ink-muted);
+/* A plus of two hairlines; open, the vertical one is hidden. */
+.cr-answers__mark {
+  position: relative;
+  flex: none;
+  inline-size: 0.9rem;
+  block-size: 0.9rem;
 }
 
-/* --------------------------------------------------------------------------
-   quote — the menu-insert pull-quote
-   -------------------------------------------------------------------------- */
+.cr-answers__mark::before,
+.cr-answers__mark::after {
+  content: "";
+  position: absolute;
+  background: var(--cr-ink);
+}
 
-.cg-line {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
-  text-align: center;
+.cr-answers__mark::before {
+  inset: calc(50% - 0.5px) 0 auto;
+  block-size: 1px;
 }
 
-.cg-line__text {
-  margin: 0 0 var(--cg-s4);
-  font-family: var(--cogenta-font-serif);
-  font-size: var(--cg-text-xl);
-  font-style: italic;
+.cr-answers__mark::after {
+  inset: 0 auto 0 calc(50% - 0.5px);
+  inline-size: 1px;
 }
 
-.cg-line__attribution {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--cg-s2);
+.cr-answers__details[open] .cr-answers__mark::after {
+  display: none;
 }
 
-.cg-line__avatar {
-  inline-size: 3rem;
-  block-size: 3rem;
-  border-radius: 50%;
+.cr-answers__answer {
+  max-inline-size: 60ch;
+  padding-block-end: var(--cr-s6);
+  color: var(--cr-ink-muted);
 }
 
-.cg-line__who {
-  display: flex;
-  flex-direction: column;
-  font-size: var(--cg-text-sm);
+.cr-answers__answer > * {
+  margin: 0;
 }
 
-.cg-line__author {
-  font-weight: var(--cg-weight-medium);
+.cr-answers__answer > * + * {
+  margin-block-start: 0.8em;
 }
 
-.cg-line__role {
-  color: var(--cg-ink-muted);
+@media (min-width: 64rem) {
+  .cr-answers[data-titled="true"]:not([data-variant="notes"]) .cr-head {
+    grid-column: 1 / span 4;
+    grid-row: 1;
+  }
+
+  .cr-answers[data-titled="true"]:not([data-variant="notes"]) .cr-answers__items {
+    grid-column: 5 / span 8;
+    grid-row: 1;
+  }
+
+  .cr-answers[data-titled="false"] .cr-answers__items,
+  .cr-answers[data-variant="notes"] .cr-head,
+  .cr-answers[data-variant="notes"] .cr-answers__items {
+    grid-column: 3 / span 8;
+  }
+
+  .cr-answers .cr-head__title {
+    max-inline-size: 12ch;
+  }
+
+  .cr-answers[data-variant="notes"] .cr-head__title {
+    max-inline-size: 24ch;
+  }
 }
 
 /* --------------------------------------------------------------------------
-   faq
+   stats and statCounter
    -------------------------------------------------------------------------- */
 
-.cg-faq {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
+.cr-figures__items {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--cr-s10) var(--cr-col-gap);
+  margin: 0;
+  padding-block-start: var(--cr-s6);
+  border-block-start: var(--cr-rule) solid var(--cr-line-ink);
 }
 
-.cg-faq__item + .cg-faq__item {
-  border-block-start: 1px solid var(--cg-line-soft);
+.cr-figures[data-count="1"] .cr-figures__items {
+  grid-template-columns: minmax(0, 1fr);
 }
 
-.cg-faq__question {
-  display: flex;
-  align-items: baseline;
-  gap: var(--cg-s4);
-  padding-block: var(--cg-s4);
-  cursor: pointer;
-  list-style: none;
-  font-size: var(--cg-text-lg);
+@media (min-width: 64rem) {
+  .cr-figures[data-count="3"] .cr-figures__items {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cr-figures[data-count="4"] .cr-figures__items {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 
-.cg-faq__question::-webkit-details-marker {
-  display: none;
+.cr-figures__item {
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+  gap: var(--cr-s2);
 }
 
-.cg-faq__index {
-  flex: 0 0 auto;
-  font-family: var(--cogenta-font-serif);
-  font-style: italic;
-  color: var(--cg-accent);
+.cr-figures__value {
+  margin: 0;
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-size-figure);
+  font-weight: var(--cr-weight-light);
+  font-variant-numeric: lining-nums tabular-nums;
+  line-height: 1;
+  letter-spacing: var(--cr-tracking-display);
 }
 
-.cg-faq__question-text {
-  font-family: var(--cogenta-font-serif);
+.cr-figures__unit {
+  margin-inline-start: 0.08em;
+  font-size: 0.6em;
 }
 
-.cg-faq__answer {
-  padding-block-end: var(--cg-s5);
-  padding-inline-start: calc(var(--cg-s4) + 1.6em);
-  color: var(--cg-ink-muted);
+.cr-figures__label {
+  max-inline-size: 28ch;
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
 }
 
 /* --------------------------------------------------------------------------
-   logos — press mentions, held back until hovered
+   logos and logoStrip
    -------------------------------------------------------------------------- */
 
-.cg-press__items {
+.cr-marks__items,
+.cr-strip__items {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
   align-items: center;
-  gap: var(--cg-s10);
+  gap: var(--cr-s6) clamp(var(--cr-s8), 4vw, var(--cr-s16));
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.cg-press__logo {
-  max-block-size: 2.25rem;
-  inline-size: auto;
-  filter: grayscale(1);
-  opacity: 0.7;
-  transition:
-    opacity var(--cg-duration) var(--cg-ease),
-    filter var(--cg-duration) var(--cg-ease);
+.cr-marks__items {
+  padding-block: var(--cr-s8);
+  border-block: var(--cr-rule) solid var(--cr-line);
 }
 
-.cg-press__link:hover .cg-press__logo,
-.cg-press__link:focus-visible .cg-press__logo {
-  filter: none;
-  opacity: 1;
+.cr-marks__plate {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--cr-s2) var(--cr-s3);
+  background: transparent;
 }
 
-/* --------------------------------------------------------------------------
-   logoStrip — trust badges, dense single row
-   -------------------------------------------------------------------------- */
+.cr-marks__image {
+  block-size: 2.25rem;
+  inline-size: auto;
+  max-inline-size: 9rem;
+  object-fit: contain;
+  filter: none;
+}
 
-.cg-press-strip {
-  margin: 0;
-  text-align: center;
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-theme="light"])) .cr-marks__plate {
+    background: var(--cr-mark-plate);
+  }
 }
 
-.cg-press-strip__items {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: var(--cg-s8);
+:where(:root[data-theme="dark"]) .cr-marks__plate {
+  background: var(--cr-mark-plate);
 }
 
-.cg-press-strip__image {
-  max-block-size: 1.75rem;
-  inline-size: auto;
+.cr-strip__caption {
+  margin: 0 0 var(--cr-s5);
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
 }
 
-.cg-press-strip__caption {
-  margin-block-start: var(--cg-s4);
-  font-size: var(--cg-text-xs);
-  letter-spacing: var(--cg-tracking-caps);
-  text-transform: uppercase;
-  color: var(--cg-ink-subtle);
+@media (min-width: 64rem) {
+  .cr-strip[data-captioned="true"] .cr-strip__caption {
+    grid-column: 1 / span 3;
+    grid-row: 1;
+    align-self: center;
+    margin: 0;
+  }
+
+  .cr-strip[data-captioned="true"] .cr-strip__items {
+    grid-column: 4 / span 9;
+    grid-row: 1;
+  }
 }
 
 /* --------------------------------------------------------------------------
-   pricingTable — the set-menu comparison
+   pricingTable: set menus in ruled columns.
    -------------------------------------------------------------------------- */
 
-.cg-set-menu__tiers {
+.cr-set__tiers {
   display: grid;
-  gap: var(--cg-s6);
-  grid-template-columns: 1fr;
+  gap: var(--cr-s12) var(--cr-col-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-@media (min-width: 56rem) {
-  .cg-set-menu__tiers {
-    grid-template-columns: repeat(3, 1fr);
+@media (min-width: 48rem) {
+  .cr-set__tiers {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-.cg-set-menu__tier {
+@media (min-width: 64rem) {
+  .cr-set[data-count="3"] .cr-set__tiers {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cr-set[data-count="4"] .cr-set__tiers {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.cr-set__tier {
   display: flex;
   flex-direction: column;
-  padding: var(--cg-s8);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring);
-  text-align: center;
+  padding-block-start: var(--cr-s6);
+  border-block-start: var(--cr-rule) solid var(--cr-line-strong);
 }
 
-.cg-set-menu__tier[data-highlighted="true"] {
-  box-shadow: var(--cg-ring-accent);
+.cr-set__tier[data-highlighted="true"] {
+  border-block-start: var(--cr-rule-strong) solid var(--cr-line-ink);
 }
 
-.cg-set-menu__name {
-  margin: 0 0 var(--cg-s3);
-  font-size: var(--cg-text-lg);
+.cr-set__name {
+  color: var(--cr-brass);
+  font-size: var(--cr-size-label);
+  font-weight: var(--cr-weight-semibold);
+  font-variant-caps: all-small-caps;
+  line-height: 1.2;
+  letter-spacing: var(--cr-tracking-caps);
 }
 
-.cg-set-menu__price {
-  margin: 0 0 var(--cg-s5);
+.cr-set__price {
+  display: grid;
+  justify-items: start;
+  gap: var(--cr-s2);
+  margin: var(--cr-s4) 0 0;
 }
 
-.cg-set-menu__amount {
-  font-family: var(--cogenta-font-serif);
-  font-size: var(--cg-text-2xl);
-  color: var(--cg-accent);
+.cr-set__amount {
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-size-figure);
+  font-weight: var(--cr-weight-light);
+  font-variant-numeric: lining-nums tabular-nums;
+  line-height: 1;
 }
 
-.cg-set-menu__interval {
-  margin-inline-start: 0.25em;
-  color: var(--cg-ink-muted);
+.cr-set__interval {
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
 }
 
-.cg-set-menu__features {
-  flex: 1 1 auto;
-  margin: 0 0 var(--cg-s6);
+.cr-set__courses {
+  flex: 1;
+  margin: var(--cr-s6) 0 0;
   padding: 0;
   list-style: none;
-  color: var(--cg-ink-muted);
 }
 
-.cg-set-menu__feature {
-  padding-block: var(--cg-s2);
-  border-block-start: 1px solid var(--cg-line-soft);
+.cr-set__course {
+  padding-block: var(--cr-s3);
+  border-block-start: var(--cr-rule) solid var(--cr-line);
+  font-size: var(--cr-text-md);
 }
 
-.cg-set-menu__feature:first-child {
-  border-block-start: 0;
-}
-
-.cg-set-menu__action .cg-action {
-  inline-size: 100%;
+.cr-set__action {
+  margin-block-start: var(--cr-s6);
 }
 
 /* --------------------------------------------------------------------------
-   statCounter
+   embed
    -------------------------------------------------------------------------- */
 
-.cg-tallies__items {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--cg-s10);
-  margin: 0;
-  padding: 0;
+.cr-embed__frame {
+  background: var(--cr-plate);
 }
 
-.cg-tally {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--cg-s1);
-  text-align: center;
+.cr-embed__player {
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
 }
 
-.cg-tally__value {
-  margin: 0;
-  font-family: var(--cogenta-font-serif);
-  font-size: var(--cg-text-2xl);
-  color: var(--cg-accent);
+.cr-embed__notice {
+  display: grid;
+  gap: var(--cr-s2);
+  justify-items: start;
+  padding: var(--cr-s8);
+  border: var(--cr-rule) solid var(--cr-line-strong);
+  border-radius: var(--cr-radius);
 }
 
-.cg-tally__label {
+.cr-embed__label {
   margin: 0;
-  font-size: var(--cg-text-xs);
-  letter-spacing: var(--cg-tracking-caps);
-  text-transform: uppercase;
-  color: var(--cg-ink-muted);
+  color: var(--cr-brass);
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-size-label);
+  font-weight: var(--cr-weight-semibold);
+  font-variant-caps: all-small-caps;
+  line-height: 1.2;
+  letter-spacing: var(--cr-tracking-caps);
+}
+
+.cr-embed__reason {
+  margin: 0 0 var(--cr-s2);
+  max-inline-size: 52ch;
+  color: var(--cr-ink-muted);
+}
+
+@media (min-width: 64rem) {
+  .cr-embed__frame,
+  .cr-embed__notice {
+    grid-column: 3 / span 8;
+  }
 }