@cogenta/theme-portfolio 1.1.3 → 1.3.4

package/src/styles/widgets.css

@@ -0,0 +1,948 @@
+/*
+ * Widgets (contract D `theme@1.6`): the column beside an index of work or
+ * search results, the bands before and after a project, the footer columns.
+ *
+ * The host draws one markup for every theme (`cg-sidebar-layout`); this file
+ * sets it on the studio's own twelve columns. The content keeps the first
+ * eight, the column takes the last three, the columns the header's
+ * navigation and the footer's profiles already stand on, so its edge is a
+ * line the page already has. Every group opens the way a block of this theme
+ * does: a hairline in ink and a small label under it. Work keeps its 3:2
+ * cover, a list is a set of ruled rows like the index, a call to action is
+ * words underlined with an arrow after them. No box, no tint, no shadow.
+ */
+
+/* --------------------------------------------------------------------------
+   The layout
+   -------------------------------------------------------------------------- */
+
+.cg-sidebar-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0;
+  inline-size: 100%;
+  max-inline-size: calc(var(--cg-page) + var(--cg-gutter) * 2);
+  margin-inline: auto;
+  padding-inline: var(--cg-gutter);
+  padding-block-end: 0;
+}
+
+.cg-sidebar-layout__content {
+  min-inline-size: 0;
+}
+
+/* Inside the content column the layout already holds the page's edges:
+   every block's container, and the parts of the pages the host renders,
+   start on its first pixel rather than a gutter further in. */
+.cg-sidebar-layout__content :is(.cg-container, .cg-comments, .cg-form, .cg-form__confirmation),
+.cg-sidebar-layout__content
+  > :is(
+    .cg-page__title,
+    .cg-search__form,
+    .cg-search__results,
+    .cg-search__empty,
+    .cg-search__error
+  ) {
+  max-inline-size: none;
+  padding-inline: 0;
+}
+
+/* A strip scrolls inside the column instead of reaching for the window's
+   edge, which the column no longer owns. */
+.cg-sidebar-layout__content :is(.cg-strip, .cg-pictures__viewport) {
+  margin-inline: 0;
+  padding-inline: 0;
+  scroll-padding-inline: 0;
+}
+
+/* A band inside the column stops at the column, so its words keep a margin
+   from the edge of their ground. */
+.cg-sidebar-layout__content
+  [data-block]:is([data-variant-background="muted"], [data-variant-background="image"])
+  > .cg-container {
+  padding-inline: var(--cg-s8);
+}
+
+/* Under the content on a phone, after the section's own step of space; the
+   page's own padding closes it. */
+.cg-sidebar-layout__aside {
+  align-self: start;
+  min-inline-size: 0;
+  padding-block: var(--cg-s4) 0;
+  border: 0;
+}
+
+@media (min-width: 64rem) {
+  .cg-sidebar-layout {
+    grid-template-columns: repeat(var(--cg-columns), minmax(0, 1fr));
+    column-gap: var(--cg-col-gap);
+  }
+
+  .cg-sidebar-layout__content {
+    grid-column: 1 / span 8;
+  }
+
+  /* The column's first label sits on the line of the page head's first line
+     (an archive's kicker, a title's cap height), its hairline just above;
+     the ninth column is left empty as a margin. */
+  .cg-sidebar-layout__aside {
+    grid-column: 10 / span 3;
+    padding-block-start: calc(var(--cg-section) * 0.45 - var(--cg-s4) - var(--cg-rule));
+  }
+
+  /* Eight columns are narrower than a page: a title, a statement and running
+     text take more of their twelve, so they keep the proportion they have on
+     a page without the column. */
+  .cg-sidebar-layout__content
+  :is(
+    .cg-page-head__title,
+    .cg-archive__title,
+    .cg-project-head__title,
+    .cg-statement__eyebrow,
+    .cg-statement__title
+  ) {
+    grid-column: 1 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-project-head__statement {
+    grid-column: 3 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-statement__aside {
+    grid-column: 5 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-facts__item {
+    grid-column: span 6;
+  }
+
+  .cg-sidebar-layout__content .cg-prose__label {
+    grid-column: 1 / span 4;
+  }
+
+  .cg-sidebar-layout__content :is(.cg-prose__body, .cg-prose[data-label="true"] .cg-prose__body) {
+    grid-column: 5 / -1;
+  }
+
+  /* Two columns of text beside a column of widgets would be three: the case
+     study reads in one. */
+  .cg-sidebar-layout__content .cg-project .cg-prose[data-length="long"] .cg-prose__body,
+  .cg-project .cg-sidebar-layout__content .cg-prose[data-length="long"] .cg-prose__body {
+    columns: auto;
+  }
+
+  .cg-sidebar-layout__content .cg-split .cg-head {
+    grid-column: 1 / span 4;
+  }
+
+  .cg-sidebar-layout__content
+    :is(.cg-split .cg-head ~ *, .cg-split[data-titled="false"] .cg-container > *) {
+    grid-column: 5 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-contact__copy {
+    grid-column: 1 / span 4;
+  }
+
+  .cg-sidebar-layout__content :is(.cg-contact__lead, .cg-contact .cg-actions) {
+    grid-column: 5 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-grid__item:is([data-place="1"], [data-place="5"]) {
+    grid-column: span 7;
+  }
+
+  .cg-sidebar-layout__content .cg-grid__item:is([data-place="2"], [data-place="4"]) {
+    grid-column: span 5;
+  }
+
+  .cg-sidebar-layout__content .cg-grid__item[data-place="2"] {
+    grid-column: 8 / span 5;
+  }
+
+  .cg-sidebar-layout__content .cg-grid__item[data-place="5"] {
+    grid-column: 6 / span 7;
+  }
+
+  .cg-sidebar-layout__content .cg-comments > * {
+    grid-column: 1 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-figure[data-align="full"] .cg-figure__frame {
+    margin-inline: 0;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   An area and its widgets
+   -------------------------------------------------------------------------- */
+
+.cg-widget-area {
+  display: grid;
+  gap: var(--cg-s12);
+  align-content: start;
+}
+
+/* Every group opens like a block of this theme: a hairline in ink across
+   its width and the label under it. A widget without a title keeps the rule. */
+.cg-widget {
+  min-inline-size: 0;
+  padding-block-start: var(--cg-s4);
+  border-block-start: var(--cg-rule) solid var(--cg-line-ink);
+  color: var(--cg-ink);
+  font-family: var(--cg-font);
+}
+
+.cg-widget__title {
+  margin: 0 0 var(--cg-s6);
+  color: var(--cg-ink);
+  font-family: var(--cg-font);
+  font-size: var(--cg-text-caption);
+  font-stretch: var(--cg-width-text);
+  font-weight: var(--cg-weight-medium);
+  line-height: var(--cg-leading-ui);
+  letter-spacing: var(--cg-tracking-caption);
+  text-transform: none;
+}
+
+.cg-widget__body {
+  font-size: var(--cg-text-md);
+  line-height: var(--cg-leading-ui);
+}
+
+.cg-widget__body :is(ul, ol) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cg-widget__empty {
+  margin: 0;
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-caption);
+}
+
+/* A band the host places outside the layout (the home page, a page opening
+   on its own statement, a project without a column): on the page's edges,
+   one section step from what comes before it. */
+.cg-widget-area--placed {
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: calc(var(--cg-page) + var(--cg-gutter) * 2);
+  margin-inline: auto;
+  padding: calc(var(--cg-section) / 2) var(--cg-gutter);
+}
+
+.cg-sidebar-layout__content .cg-widget-area--placed {
+  max-inline-size: none;
+  padding-inline: 0;
+}
+
+/* Above a band the label is a section's label: the same distance to what
+   it names as `.cg-head`. */
+.cg-widget-area--placed .cg-widget__title {
+  margin-block-end: var(--cg-s10);
+}
+
+/* Before the content, the page's own head keeps its step of space above it. */
+.cg-widget-area--placed[data-area="content-before"] {
+  padding-block-end: 0;
+}
+
+.cg-widget-area--placed[data-area="sidebar"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  gap: var(--cg-s12) var(--cg-col-gap);
+  border: 0;
+}
+
+.cg-widget-area--placed[data-area="sidebar"] .cg-widget__title {
+  margin-block-end: var(--cg-s6);
+}
+
+/* --------------------------------------------------------------------------
+   Lists: links, disciplines, clients, months, a table of contents. Ruled
+   rows, as in the index of work.
+   -------------------------------------------------------------------------- */
+
+:is(
+  .cg-widget__links-item,
+  .cg-widget__terms-item,
+  .cg-widget__archives-item,
+  .cg-widget__toc-item
+) {
+  padding-block: var(--cg-s2);
+  border-block-end: var(--cg-rule) solid var(--cg-line);
+}
+
+:is(.cg-widget__links, .cg-widget__terms, .cg-widget__archives, .cg-widget__toc) > :first-child {
+  padding-block-start: 0;
+}
+
+:is(.cg-widget__terms-item, .cg-widget__archives-item) {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--cg-s4);
+}
+
+:is(.cg-widget__links, .cg-widget__terms, .cg-widget__archives, .cg-widget__toc) a,
+.cg-widget__form-link,
+.cg-widget__social a,
+a.cg-widget__entry-title,
+a.cg-widget__comment-entry {
+  color: var(--cg-ink);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--cg-rule);
+  text-decoration-color: transparent;
+  text-underline-offset: 0.25em;
+}
+
+:is(.cg-widget__links, .cg-widget__terms, .cg-widget__archives, .cg-widget__toc) a:hover,
+.cg-widget__form-link:hover,
+.cg-widget__social a:hover,
+a.cg-widget__entry-title:hover,
+a.cg-widget__comment-entry:hover {
+  text-decoration-color: currentColor;
+}
+
+/* The page being read keeps its name in ink, underlined in the signal: one
+   of the few details the signal is kept for. */
+.cg-widget :is(a[aria-current="page"], [aria-current="page"] > a) {
+  font-weight: var(--cg-weight-semibold);
+  text-decoration-color: var(--cg-signal);
+  text-decoration-thickness: var(--cg-rule-strong);
+}
+
+.cg-widget__terms-item[data-depth="1"],
+.cg-widget__toc-item[data-depth="1"] {
+  padding-inline-start: var(--cg-s4);
+}
+
+.cg-widget__terms-item[data-depth="2"],
+.cg-widget__toc-item[data-depth="2"] {
+  padding-inline-start: var(--cg-s8);
+}
+
+:is(
+  .cg-widget__terms-count,
+  .cg-widget__archives-count,
+  .cg-widget__cloud-count,
+  .cg-widget__entry-date,
+  .cg-widget__comment-date
+) {
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-caption);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.cg-widget__link {
+  display: inline-block;
+}
+
+/* Tags as a run of words, their weight a step of the type scale. */
+.cg-widget__cloud {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--cg-s2) var(--cg-s5);
+}
+
+.cg-widget__cloud-item {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--cg-s1);
+  line-height: var(--cg-leading-heading);
+}
+
+.cg-widget__cloud-item a {
+  color: var(--cg-ink);
+  text-decoration-color: transparent;
+  text-underline-offset: 0.2em;
+}
+
+.cg-widget__cloud-item a:hover {
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__cloud-item[data-weight="1"] {
+  font-size: var(--cg-text-sm);
+}
+
+.cg-widget__cloud-item[data-weight="2"] {
+  font-size: var(--cg-text-caption);
+}
+
+.cg-widget__cloud-item[data-weight="3"] {
+  font-size: var(--cg-text-md);
+}
+
+.cg-widget__cloud-item[data-weight="4"] {
+  font-size: var(--cg-text-lg);
+}
+
+.cg-widget__cloud-item[data-weight="5"] {
+  font-size: var(--cg-text-xl);
+  font-stretch: var(--cg-width-display);
+}
+
+/* --------------------------------------------------------------------------
+   Work and comments: a cover at 3:2 over its title, the way the grid shows
+   a piece of work. An entry without a cover is a ruled row.
+   -------------------------------------------------------------------------- */
+
+:is(.cg-widget__entries, .cg-widget__comments) {
+  display: grid;
+  gap: var(--cg-s8);
+}
+
+.cg-widget__entry,
+.cg-widget__comment {
+  padding-block: 0;
+  border-block: 0;
+}
+
+.cg-widget__entry {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cg-s3);
+  align-items: start;
+}
+
+.cg-widget__entries:has(.cg-widget__entry[data-image="none"]) {
+  gap: 0;
+}
+
+.cg-widget__entry[data-image="none"] {
+  padding-block: var(--cg-s3);
+  border-block-end: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-widget__entry[data-image="none"]:first-child {
+  padding-block-start: 0;
+}
+
+.cg-widget__entry-image {
+  inline-size: 100%;
+  block-size: auto;
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+  background: var(--cg-surface-sunken);
+}
+
+.cg-widget__entry-text {
+  display: grid;
+  gap: var(--cg-s1);
+}
+
+.cg-widget__entry-title,
+.cg-widget__comment-entry {
+  font-weight: var(--cg-weight-medium);
+  line-height: var(--cg-leading-ui);
+}
+
+/* A reader points at the cover as often as at the words: both underline the
+   title. */
+.cg-widget__entry:hover a.cg-widget__entry-title {
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__entry-excerpt,
+.cg-widget__comment-excerpt {
+  margin: 0;
+  max-inline-size: var(--cg-measure-short);
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-caption);
+  line-height: var(--cg-leading-ui);
+}
+
+.cg-widget__comment {
+  display: grid;
+  gap: var(--cg-s1);
+}
+
+.cg-widget__comment-author {
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-caption);
+}
+
+/* Before and after the content, work is a row of covers across the grid;
+   on a phone, a strip that scrolls and snaps like the theme's own. */
+.cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+.cg-widget__entries:not(:has([data-image="none"])) {
+  grid-auto-flow: column;
+  grid-auto-columns: min(78vw, 30rem);
+  gap: var(--cg-col-gap);
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: x mandatory;
+  scroll-padding-inline: var(--cg-gutter);
+  margin-inline: calc(var(--cg-gutter) * -1);
+  padding: 0 var(--cg-gutter) var(--cg-s4);
+}
+
+.cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+  .cg-widget__entries:not(:has([data-image="none"]))
+  .cg-widget__entry {
+  scroll-snap-align: start;
+}
+
+@media (min-width: 48rem) {
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+    .cg-widget__entries:not(:has([data-image="none"])) {
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+    row-gap: var(--cg-s12);
+    overflow: visible;
+    margin-inline: 0;
+    padding: 0;
+  }
+
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+    .cg-widget__entry-text {
+    font-size: var(--cg-size-work);
+  }
+}
+
+.cg-sidebar-layout__content
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+  .cg-widget__entries:not(:has([data-image="none"])) {
+  margin-inline: 0;
+  padding-inline: 0;
+  scroll-padding-inline: 0;
+}
+
+/* --------------------------------------------------------------------------
+   Words and pictures
+   -------------------------------------------------------------------------- */
+
+.cg-widget__text :where(p, ul, ol, h2, h3, h4, blockquote) {
+  margin: 0;
+}
+
+.cg-widget__text
+  :where(p, ul, ol, h2, h3, h4, blockquote)
+  + :where(p, ul, ol, h2, h3, h4, blockquote) {
+  margin-block-start: 0.8em;
+}
+
+.cg-widget__text a {
+  color: var(--cg-ink);
+  text-decoration-color: var(--cg-line-strong);
+}
+
+.cg-widget__text a:hover {
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__figure,
+.cg-widget__embed,
+.cg-widget__quote {
+  margin: 0;
+}
+
+:is(.cg-widget__image, .cg-widget__about-image, .cg-widget__gallery-image) {
+  display: block;
+  inline-size: 100%;
+  background: var(--cg-surface-sunken);
+}
+
+.cg-widget__caption {
+  margin-block-start: var(--cg-s2);
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-caption);
+  line-height: var(--cg-leading-ui);
+}
+
+.cg-widget__frame {
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  border: 0;
+  background: var(--cg-surface-sunken);
+}
+
+.cg-widget__gallery {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--cg-s2);
+}
+
+.cg-widget__gallery[data-columns="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.cg-widget__gallery[data-columns="4"] {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.cg-widget__gallery-image {
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+
+/* A client's words, set like the quote block but at the column's size. */
+.cg-widget__quote-text {
+  margin: 0;
+  font-family: var(--cg-font);
+  quotes: "\201C" "\201D" "\2018" "\2019";
+  font-size: var(--cg-text-lg);
+  font-stretch: var(--cg-width-display);
+  font-weight: var(--cg-weight-regular);
+  line-height: var(--cg-leading-lead);
+  letter-spacing: -0.01em;
+}
+
+.cg-widget__quote-text p {
+  margin: 0;
+}
+
+.cg-widget__quote-text p::before {
+  content: open-quote;
+}
+
+.cg-widget__quote-text p::after {
+  content: close-quote;
+}
+
+.cg-widget__quote-source {
+  display: grid;
+  gap: 0;
+  margin-block-start: var(--cg-s4);
+  font-size: var(--cg-text-caption);
+  line-height: var(--cg-leading-ui);
+}
+
+.cg-widget__quote-name {
+  color: var(--cg-ink);
+  font-weight: var(--cg-weight-medium);
+}
+
+.cg-widget__quote-role {
+  color: var(--cg-ink-muted);
+  font-size: inherit;
+}
+
+.cg-widget__about,
+.cg-widget__cta {
+  display: grid;
+  gap: var(--cg-s3);
+  justify-items: start;
+}
+
+.cg-widget__about-image {
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+  margin-block-end: var(--cg-s2);
+}
+
+.cg-widget__about-heading,
+.cg-widget__cta-heading {
+  margin: 0;
+  font-family: var(--cg-font);
+  color: var(--cg-ink);
+  font-size: var(--cg-text-lg);
+  font-stretch: var(--cg-width-display);
+  font-weight: var(--cg-weight-medium);
+  line-height: var(--cg-leading-heading);
+  letter-spacing: var(--cg-tracking-heading);
+  text-wrap: balance;
+}
+
+.cg-widget__about-body,
+.cg-widget__cta-body {
+  margin: 0;
+  max-inline-size: var(--cg-measure-short);
+  color: var(--cg-ink-muted);
+  line-height: var(--cg-leading-text);
+}
+
+/* The call to action and the link under an introduction are the theme's
+   arrow link (`.cg-arrow-link`, `base.css`): words with one continuous
+   underline and an arrow after them, never a second filled rectangle beside
+   the work. The host floor's filled button is undone here. */
+.cg-widget__cta-action,
+.cg-widget__about-link {
+  display: inline-block;
+  margin-block-start: var(--cg-s2);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--cg-ink);
+  font-weight: var(--cg-weight-medium);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--cg-rule);
+  text-decoration-color: var(--cg-line-strong);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 0.3em;
+}
+
+.cg-widget__cta-action::after,
+.cg-widget__about-link::after {
+  content: "\2192" / "";
+  display: inline-block;
+  margin-inline-start: 0.4em;
+}
+
+.cg-widget__cta-action:hover,
+.cg-widget__about-link:hover {
+  color: var(--cg-ink);
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__contact {
+  display: grid;
+  gap: var(--cg-s2);
+}
+
+.cg-widget__body .cg-widget__contact-line {
+  display: flex;
+  gap: var(--cg-s3);
+  align-items: baseline;
+  margin: 0;
+}
+
+.cg-widget__contact-line a {
+  color: var(--cg-ink);
+  text-decoration-color: var(--cg-line-strong);
+  overflow-wrap: anywhere;
+}
+
+.cg-widget__contact-line a:hover {
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__icon {
+  flex: none;
+  align-self: start;
+  margin-block-start: 0.2em;
+  color: var(--cg-ink-muted);
+}
+
+/* Hours are ruled rows: the day small, the time in figures that line up.
+   The rule runs unbroken under both, so the space between them is padding. */
+.cg-widget__hours {
+  display: grid;
+  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
+  gap: 0;
+  margin: var(--cg-s3) 0 0;
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-widget__hours :is(dt, dd) {
+  margin: 0;
+  padding-block: var(--cg-s2);
+  border-block-end: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-widget__hours-label {
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-caption);
+}
+
+.cg-widget__hours-value {
+  padding-inline-start: var(--cg-s4);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+/* The profiles keep their names, as in the footer. */
+.cg-widget__social {
+  display: grid;
+  gap: var(--cg-s1);
+}
+
+.cg-widget__social a {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cg-s2);
+  min-block-size: 2rem;
+}
+
+.cg-widget__social .cg-visually-hidden {
+  position: static;
+  inline-size: auto;
+  block-size: auto;
+  margin: 0;
+  overflow: visible;
+  clip-path: none;
+  white-space: normal;
+}
+
+/* --------------------------------------------------------------------------
+   Search, a jump menu, a form: fields are a baseline, as on the search page
+   (`base.css` draws the field and the button).
+   -------------------------------------------------------------------------- */
+
+/* In a narrow column the button goes under the field rather than squeezing
+   it. */
+.cg-widget__search,
+.cg-widget__jump {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  gap: var(--cg-s3);
+}
+
+.cg-widget__search-input,
+.cg-widget__jump select {
+  flex: 1 1 9rem;
+  min-inline-size: 0;
+}
+
+.cg-widget__search-button,
+.cg-widget__jump-button {
+  flex: none;
+}
+
+.cg-widget .cg-form {
+  display: grid;
+  gap: var(--cg-s5);
+  inline-size: auto;
+  max-inline-size: none;
+  margin: 0;
+  padding-inline: 0;
+}
+
+.cg-widget .cg-form__field {
+  margin-block-end: 0;
+}
+
+.cg-widget__form-submit {
+  justify-self: start;
+}
+
+/* --------------------------------------------------------------------------
+   A month of work
+   -------------------------------------------------------------------------- */
+
+.cg-widget__calendar-table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-size: var(--cg-text-caption);
+  font-variant-numeric: lining-nums tabular-nums;
+  text-align: center;
+}
+
+.cg-widget__calendar-table caption {
+  padding-block-end: var(--cg-s3);
+  font-weight: var(--cg-weight-medium);
+  text-align: start;
+}
+
+.cg-widget__calendar-table th {
+  padding-block: var(--cg-s2);
+  border-block-end: var(--cg-rule) solid var(--cg-line);
+  color: var(--cg-ink-muted);
+  font-weight: var(--cg-weight-regular);
+}
+
+.cg-widget__calendar-table td {
+  padding-block: var(--cg-s2);
+  color: var(--cg-ink-muted);
+}
+
+.cg-widget__calendar-table td[data-posts] a {
+  color: var(--cg-ink);
+  font-weight: var(--cg-weight-semibold);
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__calendar-nav {
+  display: flex;
+  justify-content: space-between;
+  margin: var(--cg-s3) 0 0;
+  font-size: var(--cg-text-caption);
+}
+
+/* --------------------------------------------------------------------------
+   The footer's widget columns: a tier of their own at the top of the
+   colophon, under its hairline, on its twelve columns.
+   -------------------------------------------------------------------------- */
+
+.cg-colophon__widgets {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cg-s10) var(--cg-col-gap);
+  padding-block-end: var(--cg-s12);
+  border-block-end: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-colophon__widgets .cg-widget-area {
+  gap: var(--cg-s10);
+}
+
+/* The colophon's own hairline opens the tier: the first group of each
+   column does not draw a second one under it. */
+.cg-colophon__widgets .cg-widget:first-child {
+  padding-block-start: 0;
+  border-block-start: 0;
+}
+
+.cg-colophon__widgets .cg-widget__body {
+  font-size: var(--cg-text-caption);
+}
+
+@media (min-width: 40rem) {
+  .cg-colophon__widgets {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .cg-colophon__widgets[data-columns="1"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (min-width: 64rem) {
+  .cg-colophon__widgets {
+    grid-template-columns: repeat(var(--cg-columns), minmax(0, 1fr));
+  }
+
+  .cg-colophon__widgets > .cg-widget-area {
+    grid-column: span var(--cg-footer-widget-span, 3);
+  }
+
+  .cg-colophon__widgets[data-columns="1"] {
+    --cg-footer-widget-span: 12;
+  }
+
+  .cg-colophon__widgets[data-columns="2"] {
+    --cg-footer-widget-span: 6;
+  }
+
+  .cg-colophon__widgets[data-columns="3"] {
+    --cg-footer-widget-span: 4;
+  }
+
+  /* One column on its own is set like the theme's contact block: the label
+     on the first three columns, the words from the fourth. */
+  .cg-colophon__widgets[data-columns="1"] .cg-widget {
+    display: grid;
+    grid-template-columns: repeat(var(--cg-columns), minmax(0, 1fr));
+    column-gap: var(--cg-col-gap);
+  }
+
+  .cg-colophon__widgets[data-columns="1"] .cg-widget__title {
+    grid-column: 1 / span 3;
+    margin: 0;
+  }
+
+  .cg-colophon__widgets[data-columns="1"] .cg-widget__body {
+    grid-column: 4 / -1;
+  }
+}
+
+/* A call to action alone in the footer is the studio's invitation: the
+   heading at the size of the contact line, the rest in the colophon's size. */
+.cg-colophon__widgets[data-columns="1"] .cg-widget__cta-heading {
+  max-inline-size: 22ch;
+  font-size: var(--cg-size-contact);
+  line-height: var(--cg-leading-title);
+  letter-spacing: var(--cg-tracking-display);
+}
+
+.cg-colophon__widgets[data-columns="1"] .cg-widget__cta {
+  gap: var(--cg-s4);
+}
+
+.cg-colophon__widgets .cg-widget__cta-action {
+  font-size: var(--cg-text-md);
+}