@cogenta/theme-entreprise 1.1.3 → 1.4.0

package/src/styles/base.css

@@ -1,8 +1,6 @@
 /*
- * Document, accessibility floor, page frame, chrome (header/footer/nav) and
- * the one control the theme ships (an action link). Everything here reads
- * the design system from `tokens.css`; nothing here reads a `--cogenta-*`
- * token directly.
+ * Document, accessibility floor, the grid, the chrome and the one control
+ * the theme ships (an action link). Everything reads `tokens.css`.
  */
 
 /* --------------------------------------------------------------------------
@@ -15,207 +13,228 @@
   box-sizing: border-box;
 }
 
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  scroll-padding-block-start: calc(var(--cg-header-height) + var(--cg-s4));
+}
+
 body {
   margin: 0;
   background: var(--cg-canvas);
   color: var(--cg-ink);
-  font-family: var(--cogenta-font-sans);
+  font-family: var(--cg-font-text);
   font-size: var(--cg-text-md);
-  line-height: var(--cg-leading-normal);
+  font-weight: var(--cg-weight-regular);
+  line-height: var(--cg-leading-text);
   font-kerning: normal;
+  font-optical-sizing: auto;
   font-variant-ligatures: common-ligatures;
-  text-underline-offset: 0.15em;
-  text-decoration-thickness: from-font;
-  -webkit-text-size-adjust: 100%;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 
 ::selection {
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-soft-fg);
+  background: var(--cg-ink);
+  color: var(--cg-canvas);
 }
 
 img,
 video,
 iframe {
-  max-width: 100%;
-  height: auto;
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
 }
 
 img {
-  display: block;
   object-fit: cover;
 }
 
+:where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--cg-font-display);
+  font-weight: var(--cg-weight-display);
+  line-height: var(--cg-leading-heading);
+  letter-spacing: var(--cg-tracking-heading);
+  text-wrap: balance;
+  margin: 0;
+}
+
+:where(p, li, dd, figcaption, blockquote) {
+  text-wrap: pretty;
+}
+
 :where(a) {
   color: var(--cg-accent);
-  text-decoration-color: color-mix(in oklab, var(--cg-accent) 40%, transparent);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--cg-rule);
+  text-underline-offset: 0.2em;
   transition:
-    color var(--cg-duration-fast) var(--cg-ease),
-    text-decoration-color var(--cg-duration-fast) var(--cg-ease);
+    color var(--cg-duration) var(--cg-ease),
+    text-decoration-color var(--cg-duration) var(--cg-ease);
 }
 
 :where(a:hover) {
   color: var(--cg-accent-hover);
-  text-decoration-color: currentColor;
 }
 
 :where(hr) {
-  block-size: 1px;
+  block-size: var(--cg-rule);
   border: 0;
   margin-block: var(--cg-s10);
   background: var(--cg-line);
 }
 
+.cg-visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.cg-arrow {
+  display: inline-block;
+  inline-size: 1em;
+  block-size: 1em;
+  flex: none;
+  vertical-align: -0.12em;
+}
+
 /* --------------------------------------------------------------------------
-   Focus, targets, motion
+   Focus, targets, motion. Motion is a colour or an underline changing, in
+   under 150 ms; nothing moves in space, nothing fades in on scroll.
    -------------------------------------------------------------------------- */
 
-:where(a, button, summary, [tabindex]):focus-visible {
-  outline: 2px solid var(--cg-accent);
+:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
+  outline: var(--cg-rule-strong) solid var(--cg-accent);
   outline-offset: 3px;
-  border-radius: var(--cg-radius-xs);
 }
 
-:where(.cg-action, .cg-faq__question, .cg-clients__link, .cg-nav-toggle-label) {
+:where(.cg-action, .cg-nav-toggle-label, .cg-theme-toggle, summary) {
   min-block-size: 44px;
-  min-inline-size: 44px;
-}
-
-/* A restrained entrance: blocks settle upward a few pixels as they enter
-   the viewport, scroll-driven so it plays once per block rather than firing
-   for all of them on load. Wrapped in a feature query because the starting
-   state is `opacity: 0` — a browser without `animation-timeline` must never
-   be left holding an invisible page. */
-@supports (animation-timeline: view()) {
-  @media (prefers-reduced-motion: no-preference) {
-    @keyframes cg-settle {
-      from {
-        opacity: 0;
-        transform: translateY(var(--cg-s3));
-      }
-
-      to {
-        opacity: 1;
-        transform: none;
-      }
-    }
-
-    .cg-block {
-      animation: cg-settle linear both;
-      animation-timeline: view();
-      animation-range: entry 0% cover 20%;
-    }
-  }
 }
 
+/* Every transition in this theme reads `--cg-duration`, so reduced motion is
+   one declaration rather than an `!important` sweep over every element. The
+   skin sheet already zeroes `--cogenta-motion-duration` under this query; this
+   holds even for a skin that does not. */
 @media (prefers-reduced-motion: reduce) {
-  /* The `motion.reduced` token says the skin's motion may be removed.
-     Nothing here conveys meaning through movement, so removing all of it,
-     including the smooth scroll of a carousel, is safe. */
-  *,
-  *::before,
-  *::after {
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 1ms !important;
-    scroll-behavior: auto !important;
+  :root {
+    --cg-duration: 0ms;
   }
 }
 
 .cg-skip-link {
   position: absolute;
   inset-inline-start: var(--cg-s3);
-  inset-block-start: calc(var(--cg-s3) * -8);
-  z-index: 10;
+  inset-block-start: calc(var(--cg-s16) * -1);
+  z-index: 20;
   padding: var(--cg-s2) var(--cg-s4);
-  background: var(--cg-ink);
-  color: var(--cg-canvas);
-  border-radius: var(--cg-radius-sm);
-  font-weight: var(--cg-weight-semibold);
+  background: var(--cg-action);
+  color: var(--cg-action-fg);
+  font-size: var(--cg-text-ui);
+  font-weight: var(--cg-weight-medium);
   text-decoration: none;
-  transition: inset-block-start var(--cg-duration) var(--cg-ease);
 }
 
 .cg-skip-link:focus-visible {
   inset-block-start: var(--cg-s3);
-  outline-color: var(--cg-canvas);
+  outline-color: var(--cg-accent);
 }
 
 /* --------------------------------------------------------------------------
-   Page frame
+   The grid. Every block is a full-width section around a twelve-column
+   container; the section rhythm is one variable, applied to all of them.
    -------------------------------------------------------------------------- */
 
 .cg-main {
   display: flow-root;
-  /* A hero's own decorative frame and any full-bleed band can end up a
-     fraction wider than the viewport on some zoom levels; `clip` — not
-     `hidden` — cuts that at the edge without turning `<main>` into a scroll
-     container, so a sticky header inside it keeps behaving normally. */
   overflow-x: clip;
+  padding-block-end: calc(var(--cg-section) / 2);
 }
 
-.cg-block {
-  max-inline-size: var(--cg-page);
+.cg-container {
+  display: grid;
+  grid-template-columns: repeat(var(--cg-columns), minmax(0, 1fr));
+  column-gap: var(--cg-col-gap);
+  align-items: start;
+  inline-size: 100%;
+  max-inline-size: calc(var(--cg-page) + var(--cg-gutter) * 2);
   margin-inline: auto;
-  margin-block: var(--cg-section-y);
   padding-inline: var(--cg-gutter);
+  container-type: inline-size;
 }
 
-/* Every block is a page-width, gutter-padded section by default — `:where()`
-   keeps this at zero specificity so a block that sets its own narrower
-   measure (`.cg-quote`, `.cg-faq`, `.cg-prose`…) still wins, while a block
-   that never set one (`.cg-hero`, `.cg-services`) no longer sits flush
-   against the viewport edge on a wide screen. `data-variant-width="full"`
-   below opts a block back out. */
-:where(.cg-main > [data-block]) {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  padding-inline: var(--cg-gutter);
+/* Below this width a twelve-column grid only produces slivers: every child
+   takes the full row, and the layouts below redistribute from there. */
+.cg-container > * {
+  grid-column: 1 / -1;
+  min-inline-size: 0;
+}
+
+.cg-section {
+  padding-block: calc(var(--cg-section) / 2);
 }
 
-/* --- per-block visual variant (blocks@2.0, RFC 0002) ----------------------
-   `withBlockVariant` (`@cogenta/theme-kit`) stamps one `data-variant-<axis>`
-   attribute per axis an author actually set — never all four, never one this
-   theme does not resolve. Two attribute selectors give every rule here the
-   same specificity, (0,2,0), which is what lets it override `.cg-block`
-   above regardless of source order, without `!important` anywhere.
+/* The first block under the header sits closer to it than to a sibling. */
+:is(.cg-main, .cg-sidebar-layout__content) > .cg-section:first-child {
+  padding-block-start: calc(var(--cg-section) * 0.4);
+}
 
-   `background: 'image'` has no theme mechanism to attach an actual image to
-   a block instance (RFC 0002 adds only the semantic token, not a media
-   field) — resolved to the same tinted surface as the closest honest
-   approximation this theme has, rather than silently doing nothing with a
-   stated author intent.
-   ------------------------------------------------------------------------- */
+/* --- section heads ----------------------------------------------------------
+   One head for every titled block: a hairline across the full grid, and the
+   title set in the display serif under it. `--aside` puts the head in the
+   left four columns beside its content instead of above it. */
 
-[data-block][data-variant-background="muted"],
-[data-block][data-variant-background="image"] {
-  padding-block: var(--cg-s10);
-  border-radius: var(--cg-radius-lg);
+.cg-head {
+  padding-block-start: var(--cg-s5);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+  margin-block-end: var(--cg-s12);
 }
 
-[data-block][data-variant-background="muted"] {
-  background: var(--cg-surface-sunken);
+.cg-head__title {
+  max-inline-size: 22ch;
+  font-size: var(--cg-size-heading);
+  line-height: var(--cg-leading-heading);
+  letter-spacing: var(--cg-tracking-heading);
 }
 
+@media (min-width: 64rem) {
+  .cg-head--aside {
+    grid-column: 1 / span 4;
+    margin-block-end: 0;
+  }
+
+  .cg-head--aside .cg-head__title {
+    max-inline-size: 12ch;
+  }
+
+  .cg-head--sticky {
+    position: sticky;
+    inset-block-start: calc(var(--cg-header-height) + var(--cg-s6));
+  }
+}
+
+/* --- per-block variants (blocks@2.0, RFC 0002) --------------------------- */
+
+[data-block][data-variant-background="muted"],
 [data-block][data-variant-background="image"] {
-  background: var(--cg-surface-tinted);
+  background: var(--cg-surface-sunken);
+  padding-block: calc(var(--cg-section) * 0.75);
 }
 
 [data-block][data-variant-spacing="compact"] {
-  margin-block: calc(var(--cg-section-y) / 2);
+  padding-block: calc(var(--cg-section) / 4);
 }
 
-/* No rule for "comfortable": it names this theme's existing default, so an
-   author who picks it explicitly gets exactly what an absent `variant`
-   already gave them — the whole point of "theme default" being a real,
-   selectable option and not only the absence of a choice. */
-
 [data-block][data-variant-spacing="spacious"] {
-  margin-block: calc(var(--cg-section-y) * 1.6);
-}
-
-[data-block][data-variant-align="start"] {
-  text-align: start;
+  padding-block: calc(var(--cg-section) * 0.8);
 }
 
 [data-block][data-variant-align="center"] {
@@ -226,71 +245,146 @@ img {
   text-align: end;
 }
 
-[data-block][data-variant-width="full"] {
+[data-block][data-variant-width="full"] > .cg-container {
   max-inline-size: none;
-  padding-inline: 0;
 }
 
+/* --- a page with no hero and no entry header ----------------------------- */
+
 .cg-page__title {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  margin-block: var(--cg-section-y) var(--cg-s6);
-  padding-inline: var(--cg-gutter);
-  font-size: var(--cg-text-3xl);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
+  max-inline-size: calc(var(--cg-page) + var(--cg-gutter) * 2);
+  margin: 0 auto;
+  padding: calc(var(--cg-section) * 0.4) var(--cg-gutter) 0;
+  font-size: var(--cg-size-display);
+  line-height: var(--cg-leading-display);
+  letter-spacing: var(--cg-tracking-display);
 }
 
 /* --------------------------------------------------------------------------
-   Chrome — header
+   Actions: a filled ink rectangle for the primary intent, an underlined link
+   with an arrow for the rest. Square corners, no lift, no shadow.
+   -------------------------------------------------------------------------- */
+
+.cg-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--cg-s3) var(--cg-s8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cg-action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cg-s3);
+  font-family: var(--cg-font-text);
+  font-size: var(--cg-text-ui);
+  font-weight: var(--cg-weight-medium);
+  line-height: 1.2;
+  letter-spacing: 0.005em;
+  white-space: nowrap;
+  text-decoration: none;
+  transition:
+    background-color var(--cg-duration) var(--cg-ease),
+    color var(--cg-duration) var(--cg-ease),
+    border-color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-action[data-emphasis="primary"] {
+  padding: var(--cg-s3) var(--cg-s6);
+  background: var(--cg-action);
+  color: var(--cg-action-fg);
+  border: var(--cg-rule) solid var(--cg-action);
+  border-radius: var(--cg-radius);
+}
+
+.cg-action[data-emphasis="primary"]:hover {
+  background: var(--cg-action-hover);
+  border-color: var(--cg-action-hover);
+  color: var(--cg-action-hover-fg);
+}
+
+/* A text link with an arrow after it. Not a flex container: in one, the
+   words and the arrow are two flex items and each gets its own underline.
+   As a block of inline content the words carry one continuous underline,
+   and the arrow, an atomic inline box, inherits none (CSS Text Decoration
+   §2: decorations are not propagated to inline-blocks). */
+.cg-action[data-emphasis="secondary"] {
+  display: inline-block;
+  padding-block: var(--cg-s3);
+  padding-inline: 0;
+  color: var(--cg-ink);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--cg-rule);
+  text-decoration-color: var(--cg-line-strong);
+  text-underline-offset: 0.35em;
+}
+
+.cg-action[data-emphasis="secondary"]::after {
+  content: "\2192" / "";
+  display: inline-block;
+  margin-inline-start: 0.45em;
+  font-family: var(--cg-font-text);
+}
+
+.cg-action[data-emphasis="secondary"]:hover {
+  color: var(--cg-accent);
+  text-decoration-color: currentColor;
+}
+
+/* --------------------------------------------------------------------------
+   Header
    -------------------------------------------------------------------------- */
 
 .cg-site-header {
   position: sticky;
   inset-block-start: 0;
-  z-index: 5;
-  padding: var(--cg-s4) var(--cg-gutter);
-  /* Flat and fully opaque, not a frosted-glass blur: a plane above the
-     page, marked off by a hairline rather than a haze. */
+  z-index: 10;
   background: var(--cg-canvas);
-  border-block-end: 1px solid var(--cg-line-soft);
+  border-block-end: var(--cg-rule) solid var(--cg-line);
 }
 
 .cg-site-header__inner {
+  position: relative;
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: var(--cg-gap);
-  max-inline-size: var(--cg-page);
+  gap: var(--cg-s6);
+  min-block-size: var(--cg-header-height);
+  max-inline-size: calc(var(--cg-page) + var(--cg-gutter) * 2);
   margin-inline: auto;
+  padding-inline: var(--cg-gutter);
 }
 
 .cg-site-header__home {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-end: auto;
   color: var(--cg-ink);
-  font-weight: var(--cg-weight-bold);
-  font-size: var(--cg-text-lg);
-  letter-spacing: var(--cg-tracking-tight);
   text-decoration: none;
-  margin-inline-end: auto;
 }
 
-/* The uploaded corporate logo. Height-constrained so the header bar keeps a
-   constant height whatever aspect ratio the company's mark has. */
+.cg-site-header__home:hover {
+  color: var(--cg-ink);
+}
+
+.cg-site-header__name {
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-lg);
+  font-weight: var(--cg-weight-medium);
+  letter-spacing: -0.01em;
+  line-height: 1;
+}
+
 .cg-site-header__logo {
   display: block;
-  block-size: 2rem;
+  block-size: var(--cg-s8);
   inline-size: auto;
   max-inline-size: 14rem;
   object-fit: contain;
 }
 
-/* The mobile-menu checkbox: visually hidden the accessible way (still in
-   the tab order, still Space-operable) rather than `display: none` (which
-   would remove it from the tab order entirely) or `left: -9999px` (which
-   some assistive technology and "find in page" treat as content, not
-   chrome). */
 .cg-nav-toggle-input {
   position: absolute;
   inline-size: 1px;
@@ -304,108 +398,91 @@ img {
   display: none;
   flex-direction: column;
   justify-content: center;
-  gap: 0.28rem;
-  inline-size: 2.5rem;
-  block-size: 2.5rem;
-  padding: 0.5rem;
-  margin-inline-start: auto;
-  border-radius: var(--cg-radius-sm);
+  gap: 0.4rem;
+  inline-size: 2.75rem;
+  padding: 0.7rem;
   cursor: pointer;
 }
 
 .cg-nav-toggle-input:focus-visible ~ .cg-nav-toggle-label {
-  outline: 2px solid var(--cg-accent);
+  outline: var(--cg-rule-strong) solid var(--cg-accent);
   outline-offset: 2px;
 }
 
 .cg-nav-toggle-bar {
   display: block;
   inline-size: 100%;
-  block-size: 2px;
+  block-size: 1.5px;
   background: var(--cg-ink);
-  transition: transform var(--cg-duration) var(--cg-ease);
 }
 
 .cg-site-header__nav {
   display: flex;
   align-items: center;
-  gap: var(--cg-s5);
+  gap: var(--cg-s8);
 }
 
 .cg-nav__items {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--cg-s5);
+  gap: var(--cg-s2) var(--cg-s8);
   margin: 0;
   padding: 0;
   list-style: none;
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-medium);
+  font-size: var(--cg-text-ui);
 }
 
 .cg-nav__items a,
 .cg-nav__items span {
-  color: var(--cg-ink-muted);
-  text-decoration: none;
+  color: var(--cg-ink);
+  text-decoration-line: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 0.45em;
 }
 
 .cg-nav__items a:hover {
   color: var(--cg-ink);
+  text-decoration-color: var(--cg-ink);
 }
 
-.cg-site-header__action {
-  flex: none;
+.cg-site-header__action.cg-action[data-emphasis="primary"] {
+  padding-block: var(--cg-s2);
+  min-block-size: 40px;
 }
 
-/* The manual light/dark/system control (`renderThemeToggle`, `@cogenta/
-   theme-kit`, L26). Sits beside the mobile menu button in `renderChrome`,
-   outside the `<nav>` it does not control — a visitor must be able to flip
-   appearance without opening the collapsed mobile panel first. Sized and
-   squared off like `.cg-nav-toggle-label` right next to it (`--cg-radius-sm`,
-   this theme's structured register — never the pill canonical uses),
-   plain-bordered like `.cg-action[data-emphasis="secondary"]`'s own resting
-   state rather than filled, so it never competes with a real call to action. */
 .cg-theme-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  inline-size: 2.5rem;
-  block-size: 2.5rem;
-  border: 1px solid var(--cg-line-soft);
-  border-radius: var(--cg-radius-sm);
+  flex: none;
+  inline-size: 2.75rem;
+  padding: 0;
+  border: 0;
   background: transparent;
-  color: var(--cg-ink);
+  color: var(--cg-ink-muted);
   cursor: pointer;
-  transition: background-color var(--cg-duration) var(--cg-ease);
+  transition: color var(--cg-duration) var(--cg-ease);
 }
 
 .cg-theme-toggle:hover {
-  background: var(--cg-surface-sunken);
-}
-
-.cg-theme-toggle:focus-visible {
-  outline: 2px solid var(--cg-accent);
-  outline-offset: 2px;
+  color: var(--cg-ink);
 }
 
 .cg-theme-toggle__icon {
-  inline-size: 1.1rem;
-  block-size: 1.1rem;
+  inline-size: 1.05rem;
+  block-size: 1.05rem;
 }
 
 .cg-theme-toggle__icon--moon {
   display: none;
 }
 
-/* Icon reflects the *current* effective appearance — sun while light, moon
-   while dark — from the same `[data-theme]`/`prefers-color-scheme` signals
-   `tokens.css` already keys the whole palette on. */
 @media (prefers-color-scheme: dark) {
   :where(:root:not([data-theme="light"])) .cg-theme-toggle__icon--sun {
     display: none;
   }
+
   :where(:root:not([data-theme="light"])) .cg-theme-toggle__icon--moon {
     display: block;
   }
@@ -419,52 +496,74 @@ img {
   display: block;
 }
 
-/* Below the breakpoint: the toggle button appears, and the nav becomes a
-   panel anchored under the header, shown only while the checkbox is
-   checked — the whole mechanism is this one selector, no JavaScript. */
-@media (max-width: 56rem) {
+/* Below the breakpoint the navigation becomes a panel under the bar, shown
+   while the checkbox is checked: the whole mechanism is one selector. */
+@media (max-width: 63.99rem) {
   .cg-site-header__inner {
-    position: relative;
+    gap: var(--cg-s2);
+  }
+
+  .cg-theme-toggle {
+    order: 1;
   }
 
   .cg-nav-toggle-label {
     display: flex;
+    order: 2;
+    margin-inline-end: calc(var(--cg-s3) * -1);
   }
 
+  /* The open panel covers the rest of the viewport, under the header's own
+     hairline, so the page never shows through beneath the menu (where its
+     own call to action would read as a second copy of the menu's). */
   .cg-site-header__nav {
     display: none;
     position: absolute;
     inset-inline: 0;
-    inset-block-start: 100%;
+    inset-block-start: calc(100% + var(--cg-rule));
+    block-size: calc(100dvh - var(--cg-header-height) - var(--cg-rule));
+    overflow-y: auto;
+    overscroll-behavior: contain;
     flex-direction: column;
     align-items: stretch;
-    gap: var(--cg-s5);
-    padding: var(--cg-s6) var(--cg-gutter);
+    gap: var(--cg-s8);
+    padding: var(--cg-s4) var(--cg-gutter) var(--cg-s10);
     background: var(--cg-canvas);
-    border-block-end: 1px solid var(--cg-line-soft);
-    box-shadow: var(--cogenta-shadow-md);
   }
 
   .cg-nav-toggle-input:checked ~ .cg-site-header__nav {
     display: flex;
   }
 
-  .cg-nav-toggle-input:checked ~ .cg-nav-toggle-label .cg-nav-toggle-bar:nth-child(1) {
-    transform: translateY(0.42rem) rotate(45deg);
+  /* While the menu is open the page behind it does not scroll. CSS only. */
+  :root:has(.cg-nav-toggle-input:checked) {
+    overflow: hidden;
   }
 
-  .cg-nav-toggle-input:checked ~ .cg-nav-toggle-label .cg-nav-toggle-bar:nth-child(2) {
-    opacity: 0;
+  .cg-nav-toggle-input:checked ~ .cg-nav-toggle-label .cg-nav-toggle-bar:nth-child(1) {
+    transform: translateY(0.3rem) rotate(45deg);
   }
 
-  .cg-nav-toggle-input:checked ~ .cg-nav-toggle-label .cg-nav-toggle-bar:nth-child(3) {
-    transform: translateY(-0.42rem) rotate(-45deg);
+  .cg-nav-toggle-input:checked ~ .cg-nav-toggle-label .cg-nav-toggle-bar:nth-child(2) {
+    transform: translateY(-0.3rem) rotate(-45deg);
   }
 
   .cg-site-header__nav .cg-nav__items {
     flex-direction: column;
-    align-items: flex-start;
-    gap: var(--cg-s4);
+    align-items: stretch;
+    gap: 0;
+    font-family: var(--cg-font-display);
+    font-size: var(--cg-text-xl);
+  }
+
+  .cg-site-header__nav .cg-nav__items li {
+    border-block-end: var(--cg-rule) solid var(--cg-line);
+  }
+
+  .cg-site-header__nav .cg-nav__items a,
+  .cg-site-header__nav .cg-nav__items span {
+    display: block;
+    padding-block: var(--cg-s3);
   }
 
   .cg-site-header__action {
@@ -473,248 +572,198 @@ img {
 }
 
 /* --------------------------------------------------------------------------
-   Chrome — footer, a real four-column layout
+   Footer: a colophon on the twelve-column grid.
    -------------------------------------------------------------------------- */
 
 .cg-site-footer {
-  padding: var(--cg-s16) var(--cg-gutter) var(--cg-s8);
-  background: var(--cg-surface-sunken);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+  background: var(--cg-canvas);
   color: var(--cg-ink-muted);
-  border-block-start: 1px solid var(--cg-line-soft);
   font-size: var(--cg-text-sm);
+  line-height: var(--cg-leading-text);
 }
 
-.cg-site-footer__grid {
-  display: grid;
-  gap: var(--cg-gap-loose);
-  grid-template-columns: 1fr;
-  max-inline-size: var(--cg-page);
+.cg-site-footer__inner {
+  max-inline-size: calc(var(--cg-page) + var(--cg-gutter) * 2);
   margin-inline: auto;
-  padding-block-end: var(--cg-s10);
-  border-block-end: 1px solid var(--cg-line-soft);
+  padding: var(--cg-s16) var(--cg-gutter) var(--cg-s8);
 }
 
-@media (min-width: 56rem) {
-  .cg-site-footer__grid {
-    grid-template-columns: 1.3fr 1fr 0.8fr 1fr;
-    align-items: start;
-  }
+.cg-site-footer__top {
+  display: grid;
+  grid-template-columns: repeat(var(--cg-columns), minmax(0, 1fr));
+  column-gap: var(--cg-col-gap);
+  row-gap: var(--cg-s10);
+  padding-block-end: var(--cg-s16);
 }
 
-.cg-site-footer__brand a {
-  color: var(--cg-ink);
-  font-weight: var(--cg-weight-bold);
-  font-size: var(--cg-text-lg);
-  letter-spacing: var(--cg-tracking-tight);
-  text-decoration: none;
+.cg-site-footer__top > * {
+  grid-column: 1 / -1;
 }
 
-.cg-site-footer__tagline {
-  margin: var(--cg-s3) 0 0;
-  max-inline-size: 24ch;
-  color: var(--cg-ink-muted);
-  line-height: var(--cg-leading-relaxed);
-}
+@media (min-width: 40rem) {
+  .cg-site-footer__brand {
+    grid-column: 1 / -1;
+  }
 
-.cg-site-footer__nav .cg-nav__items {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--cg-s3);
-}
+  .cg-site-footer__nav {
+    grid-column: 1 / span 4;
+  }
 
-.cg-site-footer__social {
-  display: flex;
-  gap: var(--cg-s3);
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  .cg-site-footer__note {
+    grid-column: 5 / -1;
+  }
+
+  .cg-site-footer__social-col {
+    grid-column: 1 / -1;
+  }
 }
 
-.cg-site-footer__social-item a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2.25rem;
-  block-size: 2.25rem;
-  border: 1px solid var(--cg-line);
-  border-radius: var(--cg-radius-sm);
-  color: var(--cg-ink-muted);
-  transition:
-    color var(--cg-duration) var(--cg-ease),
-    border-color var(--cg-duration) var(--cg-ease);
+@media (min-width: 64rem) {
+  .cg-site-footer__brand {
+    grid-column: 1 / span 3;
+  }
+
+  .cg-site-footer__nav {
+    grid-column: 4 / span 2;
+  }
+
+  .cg-site-footer__note {
+    grid-column: 6 / span 6;
+  }
+
+  .cg-site-footer__note[data-paragraphs="3"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cg-site-footer__note[data-paragraphs="4"] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .cg-site-footer__social-col {
+    grid-column: 12 / span 1;
+    justify-self: end;
+  }
 }
 
-.cg-site-footer__social-item a:hover {
-  color: var(--cg-accent);
-  border-color: var(--cg-accent);
+.cg-site-footer__name {
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-xl);
+  font-weight: var(--cg-weight-medium);
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+  color: var(--cg-ink);
+  text-decoration: none;
 }
 
-.cg-social__icon {
-  inline-size: 1.1rem;
-  block-size: 1.1rem;
+.cg-site-footer__name:hover {
+  color: var(--cg-ink);
 }
 
-.cg-site-footer__note {
-  margin: 0 0 var(--cg-s4);
+.cg-site-footer__tagline {
+  margin: var(--cg-s3) 0 0;
+  max-inline-size: 30ch;
   color: var(--cg-ink-muted);
-  line-height: var(--cg-leading-normal);
 }
 
-.cg-site-footer__meta,
-.cg-site-footer__branding {
-  display: flex;
+.cg-site-footer__nav .cg-nav__items {
   flex-direction: column;
   align-items: flex-start;
-  justify-content: flex-start;
+  gap: var(--cg-s2);
+  font-size: var(--cg-text-sm);
 }
 
-@media (min-width: 56rem) {
-  .cg-site-footer__meta {
-    align-items: flex-end;
-    text-align: end;
-  }
+.cg-site-footer__nav .cg-nav__items a {
+  color: var(--cg-ink);
 }
 
-.cg-site-footer__branding a {
-  display: flex;
-  align-items: center;
-  gap: 0.4em;
-  opacity: 0.75;
-  transition: opacity var(--cg-duration) var(--cg-ease);
+.cg-site-footer__note {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: var(--cg-s6) var(--cg-col-gap);
+  align-content: start;
 }
 
-.cg-site-footer__branding a:hover,
-.cg-site-footer__branding a:focus-visible {
-  opacity: 1;
+.cg-site-footer__note-text {
+  margin: 0;
+  color: var(--cg-ink-muted);
 }
 
-.cg-site-footer__brand-logo {
+.cg-site-footer__note-label {
   display: block;
-  /* Explicit pixels, not `em`: relative sizing cascaded from the footer's
-     own small font-size and made the credit mark unreadably tiny. */
-  block-size: 25px;
-  inline-size: auto;
-}
-
-.cg-site-footer__version {
-  font-variant-numeric: tabular-nums;
-  font-size: 0.9em;
-}
-
-.cg-site-footer__bottom {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  padding-block-start: var(--cg-s6);
-  font-size: var(--cg-text-xs);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
-  color: var(--cg-ink-subtle);
+  margin-block-end: var(--cg-s1);
+  color: var(--cg-ink);
+  font-weight: var(--cg-weight-medium);
 }
 
-/* --------------------------------------------------------------------------
-   Actions — the theme's only control
-   -------------------------------------------------------------------------- */
-
-.cg-actions {
+.cg-site-footer__social {
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--cg-s3);
-  margin: var(--cg-s8) 0 0;
+  gap: var(--cg-s1);
+  margin: 0 calc(var(--cg-s2) * -1) 0 0;
   padding: 0;
   list-style: none;
 }
 
-.cg-action {
+.cg-site-footer__social-item a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--cg-s2);
-  padding: var(--cg-s3) var(--cg-s6);
-  border: 0;
-  border-radius: var(--cg-radius-sm);
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-snug);
-  line-height: var(--cg-leading-snug);
-  text-decoration: none;
-  white-space: nowrap;
-  transition:
-    background-color var(--cg-duration) var(--cg-ease),
-    color var(--cg-duration) var(--cg-ease),
-    box-shadow var(--cg-duration) var(--cg-ease),
-    transform var(--cg-duration-fast) var(--cg-ease);
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  color: var(--cg-ink-muted);
+  transition: color var(--cg-duration) var(--cg-ease);
 }
 
-.cg-action[data-emphasis="primary"] {
-  background: var(--cg-accent);
-  color: var(--cg-accent-fg);
+.cg-site-footer__social-item a:hover {
+  color: var(--cg-ink);
 }
 
-.cg-action[data-emphasis="primary"]:hover {
-  background: var(--cg-accent-hover);
-  box-shadow: var(--cogenta-shadow-sm);
-  transform: translateY(-1px);
+.cg-social__icon {
+  inline-size: 1.15rem;
+  block-size: 1.15rem;
 }
 
-.cg-action[data-emphasis="secondary"] {
-  background: transparent;
-  color: var(--cg-ink);
-  box-shadow: var(--cg-ring-strong);
+.cg-site-footer__bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--cg-s4) var(--cg-s8);
+  padding-block-start: var(--cg-s6);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+  font-size: var(--cg-text-xs);
+  letter-spacing: 0.02em;
 }
 
-.cg-action[data-emphasis="secondary"]:hover {
-  color: var(--cg-accent);
-  box-shadow: var(--cg-ring-accent);
+.cg-site-footer__legal {
+  margin: 0;
+  font-variant-numeric: lining-nums tabular-nums;
 }
 
-.cg-action:active {
-  transform: translateY(0);
-  box-shadow: none;
+.cg-site-footer__branding a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  color: var(--cg-ink-subtle);
+  text-decoration: none;
 }
 
-/* --------------------------------------------------------------------------
-   Shared block furniture
-   -------------------------------------------------------------------------- */
-
-.cg-services__title,
-.cg-banner__title,
-.cg-faq__title,
-.cg-metrics__title,
-.cg-clients__title,
-.cg-list__title-heading {
-  margin: 0 0 var(--cg-s10);
-  font-size: var(--cg-text-xl);
-  line-height: var(--cg-leading-snug);
-  letter-spacing: var(--cg-tracking-tight);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
+.cg-site-footer__branding a:hover {
+  color: var(--cg-ink);
 }
 
-.cg-services__items,
-.cg-clients__items,
-.cg-gallery__items,
-.cg-list__items,
-.cg-faq__items {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.cg-site-footer__brand-logo {
+  display: block;
+  block-size: 18px;
+  inline-size: auto;
 }
 
-.cg-gallery__viewport,
-.cg-list__viewport {
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  overscroll-behavior-inline: contain;
-  scrollbar-width: thin;
-  scrollbar-color: var(--cg-line-strong) transparent;
-  padding-block: var(--cg-s2);
-  margin-block: calc(var(--cg-s2) * -1);
+.cg-site-footer__version {
+  font-variant-numeric: tabular-nums;
 }
 
 /* --------------------------------------------------------------------------
-   Search, forms, comments — public utility pages and post-content furniture,
-   styled with the same restrained, structured language as the seventeen blocks.
+   Search, forms, comments: the utility pages, in the same register.
    -------------------------------------------------------------------------- */
 
 .cg-search__form,
@@ -724,7 +773,7 @@ img {
 .cg-form,
 .cg-form__confirmation,
 .cg-comments {
-  max-inline-size: var(--cg-page);
+  max-inline-size: calc(var(--cg-page) + var(--cg-gutter) * 2);
   margin-inline: auto;
   padding-inline: var(--cg-gutter);
 }
@@ -734,31 +783,79 @@ img {
   flex-wrap: wrap;
   align-items: end;
   gap: var(--cg-s3);
-  margin-block-end: var(--cg-s8);
+  margin-block: var(--cg-s10);
 }
 
-.cg-search__form label {
+.cg-search__form label,
+.cg-form__field label,
+.cg-comment__form label {
   display: block;
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-semibold);
   margin-block-end: var(--cg-s2);
+  font-size: var(--cg-text-sm);
+  font-weight: var(--cg-weight-medium);
+  color: var(--cg-ink);
+}
+
+/* The label sits on its own line above the field, as in every other form. */
+.cg-search__form label {
+  flex-basis: 100%;
+  margin-block-end: calc(var(--cg-s1) * -1);
 }
 
 .cg-search__form input[type="search"] {
-  flex: 1 1 16rem;
+  flex: 1 1 18rem;
 }
 
 .cg-search__results {
-  margin: 0 auto;
-  padding-inline-start: var(--cg-gutter);
   display: grid;
-  gap: var(--cg-s4);
-  font-size: var(--cg-text-lg);
+  gap: 0;
+  margin-block: 0 var(--cg-section);
+  list-style: none;
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-xl);
+  line-height: 1.25;
+}
+
+.cg-search__results > * {
+  padding-block: var(--cg-s5);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+/* A result reads like a row of the sector index: the title in ink, the
+   summary in the text face under it. */
+a.cg-search__title {
+  color: var(--cg-ink);
+  text-decoration-color: transparent;
+  text-underline-offset: 0.18em;
+}
+
+a.cg-search__title:hover {
+  color: var(--cg-accent);
+  text-decoration-color: currentColor;
+}
+
+.cg-search__excerpt,
+.cg-search__meta,
+.cg-search__count {
+  font-family: var(--cg-font-text);
+}
+
+.cg-search__count {
+  color: var(--cg-ink-muted);
+}
+
+.cg-search__excerpt {
+  margin: var(--cg-s2) 0 0;
+  max-inline-size: 60ch;
+  font-size: var(--cg-text-md);
+  line-height: 1.55;
+  color: var(--cg-ink-muted);
 }
 
 .cg-search__empty,
 .cg-comments__empty,
-.cg-comments__closed {
+.cg-comments__closed,
+.cg-form__help {
   color: var(--cg-ink-muted);
 }
 
@@ -766,7 +863,7 @@ img {
 .cg-form__error,
 .cg-form__field-error {
   color: var(--cg-ink);
-  font-weight: var(--cg-weight-bold);
+  font-weight: var(--cg-weight-semibold);
 }
 
 .cg-search__form input,
@@ -776,9 +873,10 @@ img {
 .cg-comment__form input,
 .cg-comment__form textarea {
   inline-size: 100%;
+  min-block-size: 44px;
   padding: var(--cg-s3) var(--cg-s4);
-  border: 1px solid var(--cg-line);
-  border-radius: var(--cg-radius-sm);
+  border: var(--cg-rule) solid var(--cg-line-strong);
+  border-radius: var(--cg-radius);
   background: var(--cg-surface);
   color: var(--cg-ink);
   font: inherit;
@@ -787,19 +885,22 @@ img {
 .cg-form__field input[aria-invalid="true"],
 .cg-form__field select[aria-invalid="true"],
 .cg-form__field textarea[aria-invalid="true"] {
-  border-width: 2px;
-  border-color: var(--cg-line-strong);
+  border-width: var(--cg-rule-strong);
+  border-color: var(--cg-ink);
 }
 
 .cg-search__form button,
 .cg-form button[type="submit"],
 .cg-comment__form button[type="submit"] {
+  min-block-size: 44px;
   padding: var(--cg-s3) var(--cg-s6);
-  border: 0;
-  border-radius: var(--cg-radius-sm);
-  background: var(--cg-accent);
-  color: var(--cg-accent-fg);
-  font-weight: var(--cg-weight-semibold);
+  border: var(--cg-rule) solid var(--cg-action);
+  border-radius: var(--cg-radius);
+  background: var(--cg-action);
+  color: var(--cg-action-fg);
+  font: inherit;
+  font-size: var(--cg-text-ui);
+  font-weight: var(--cg-weight-medium);
   cursor: pointer;
   transition: background-color var(--cg-duration) var(--cg-ease);
 }
@@ -807,7 +908,9 @@ img {
 .cg-search__form button:hover,
 .cg-form button[type="submit"]:hover,
 .cg-comment__form button[type="submit"]:hover {
-  background: var(--cg-accent-hover);
+  background: var(--cg-action-hover);
+  border-color: var(--cg-action-hover);
+  color: var(--cg-action-hover-fg);
 }
 
 .cg-form__field,
@@ -816,18 +919,9 @@ img {
   margin-block-end: var(--cg-s5);
 }
 
-.cg-form__field label,
-.cg-comment__form label {
-  display: block;
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-semibold);
-  margin-block-end: var(--cg-s2);
-}
-
 .cg-form__help {
   margin: var(--cg-s2) 0 0;
   font-size: var(--cg-text-sm);
-  color: var(--cg-ink-muted);
 }
 
 .cg-form__choice {
@@ -835,7 +929,7 @@ img {
   align-items: center;
   gap: var(--cg-s2);
   margin-inline-end: var(--cg-s4);
-  font-weight: normal;
+  font-weight: var(--cg-weight-regular);
 }
 
 .cg-form__honeypot,
@@ -847,11 +941,44 @@ img {
   inset-inline-start: -9999px;
 }
 
+/* Comments follow the reading column of the page above them: the heading in
+   the left four columns, the thread and the form in the text column, under a
+   hairline drawn inside the grid rather than across the gutters. */
 .cg-comments {
-  margin-block-start: var(--cg-section-y);
-  padding-block-start: var(--cg-s8);
-  padding-block-end: var(--cg-section-y);
-  border-block-start: 1px solid var(--cg-line-soft);
+  display: grid;
+  grid-template-columns: repeat(var(--cg-columns), minmax(0, 1fr));
+  column-gap: var(--cg-col-gap);
+  align-items: start;
+  margin-block: calc(var(--cg-section) / 2) var(--cg-section);
+}
+
+.cg-comments::before {
+  content: "";
+  grid-column: 1 / -1;
+  block-size: var(--cg-rule);
+  margin-block-end: var(--cg-s6);
+  background: var(--cg-line);
+}
+
+.cg-comments > * {
+  grid-column: 1 / -1;
+  min-inline-size: 0;
+}
+
+.cg-comments > h2 {
+  margin-block-end: var(--cg-s6);
+  font-size: var(--cg-size-subheading);
+}
+
+@media (min-width: 64rem) {
+  .cg-comments > h2 {
+    grid-column: 1 / span 4;
+    grid-row: 2 / span 3;
+  }
+
+  .cg-comments > :not(h2) {
+    grid-column: 5 / span 7;
+  }
 }
 
 .cg-comments__list,
@@ -863,7 +990,7 @@ img {
 
 .cg-comment {
   padding-block: var(--cg-s5);
-  border-block-end: 1px solid var(--cg-line-soft);
+  border-block-end: var(--cg-rule) solid var(--cg-line-soft);
 }
 
 .cg-comment__replies {
@@ -872,7 +999,7 @@ img {
 
 .cg-comment__replies .cg-comment {
   padding-inline-start: var(--cg-s6);
-  border-inline-start: 2px solid var(--cg-line-soft);
+  border-inline-start: var(--cg-rule) solid var(--cg-line);
   border-block-end: 0;
 }
 
@@ -880,13 +1007,13 @@ img {
   display: flex;
   gap: var(--cg-s3);
   align-items: baseline;
+  margin-block-end: var(--cg-s2);
   font-size: var(--cg-text-sm);
   color: var(--cg-ink-muted);
-  margin-block-end: var(--cg-s2);
 }
 
 .cg-comment__author {
-  font-weight: var(--cg-weight-semibold);
+  font-weight: var(--cg-weight-medium);
   color: var(--cg-ink);
 }