@cogenta/theme-entreprise 1.1.3 → 1.4.0

package/src/styles/widgets.css

@@ -0,0 +1,914 @@
+/* --------------------------------------------------------------------------
+   Widgets (contract D `theme@1.6`): the side column beside a case study, a
+   practice, an archive or search results, the bands before and after the
+   content, and the footer's widget row.
+
+   The host draws one markup for every theme (`cg-sidebar-layout`); this file
+   only sets it in this theme's register, the one a firm prints its reports
+   in: every widget opens on an ink rule with a label in small capitals,
+   titles of work in the display serif, figures in tabular numerals, lists
+   between hairlines, and one dark plane, the call to discuss a mandate, as
+   the ink band is on a page. No shadow, no rounded panel, no tint.
+   -------------------------------------------------------------------------- */
+
+/* --- the layout ------------------------------------------------------------ */
+
+.cg-sidebar-layout {
+  display: grid;
+  row-gap: var(--cg-s8);
+  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;
+  /* The display size a column narrower than the page can carry. */
+  --cg-size-display: clamp(var(--cg-text-3xl), calc(1rem + 3vw), var(--cg-text-5xl));
+}
+
+/* Inside the content column the layout holds the gutters and the width. */
+.cg-sidebar-layout__content
+:is(
+  .cg-container,
+  .cg-entry-header,
+  .cg-page__title,
+  .cg-search__form,
+  .cg-search__results,
+  .cg-search__empty,
+  .cg-search__error,
+  .cg-form,
+  .cg-form__confirmation,
+  .cg-comments
+) {
+  max-inline-size: none;
+  padding-inline: 0;
+}
+
+.cg-sidebar-layout__content .cg-figure[data-align="full"] .cg-figure__caption {
+  padding-inline: 0;
+}
+
+/* The thread or the results end the column; the widgets or the footer bring
+   the rest of the space. */
+.cg-sidebar-layout__content > :is(.cg-comments, .cg-search__results):last-child {
+  margin-block-end: calc(var(--cg-section) / 2);
+}
+
+.cg-sidebar-layout__aside {
+  align-self: start;
+  padding-block: 0 calc(var(--cg-section) / 2);
+}
+
+/* Stacked under the content, on the page's own gutters: each widget's ink
+   rule is the only separation, in as many columns as the width holds. */
+@media (max-width: 63.99rem) {
+  .cg-sidebar-layout__aside {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+    column-gap: calc(var(--cg-col-gap) * 2);
+  }
+}
+
+/* The comment thread under the text: its heading above it on a narrower
+   column, beside it in three columns once the text hangs its headings too. */
+@media (min-width: 64rem) {
+  .cg-sidebar-layout__content .cg-comments > h2 {
+    grid-column: 1 / -1;
+    grid-row: auto;
+  }
+
+  .cg-sidebar-layout__content .cg-comments > :not(h2) {
+    grid-column: 1 / span 9;
+  }
+}
+
+@media (min-width: 80rem) {
+  .cg-sidebar-layout__content .cg-comments > h2 {
+    grid-column: 1 / span 3;
+    grid-row: 2 / span 3;
+  }
+
+  .cg-sidebar-layout__content .cg-comments > :not(h2) {
+    grid-column: 4 / span 8;
+  }
+}
+
+@media (min-width: 64rem) {
+  .cg-sidebar-layout {
+    grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
+    column-gap: calc(var(--cg-col-gap) * 2.5);
+    row-gap: 0;
+  }
+
+  /* The column starts where a page's first block starts under the header. */
+  .cg-sidebar-layout__aside {
+    padding-block-start: calc(var(--cg-section) * 0.4);
+  }
+
+  .cg-sidebar-layout__content .cg-entry-header__title {
+    grid-column: 1 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-entry-header__excerpt {
+    grid-column: 1 / span 9;
+  }
+
+  /* A reading column too narrow to hang its headings beside the text sets
+     them above it. */
+  .cg-sidebar-layout__content .cg-text .cg-prose {
+    grid-column: 1 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-text .cg-prose > h2 {
+    float: none;
+    inline-size: auto;
+    margin-inline-start: 0;
+  }
+
+  .cg-sidebar-layout__content .cg-text .cg-prose > h2 + * {
+    margin-block-start: var(--cg-s4);
+  }
+
+  /* The index keeps a title and its summary side by side, the date under
+     them: one grid column is too narrow for a month and a year here. */
+  .cg-sidebar-layout__content .cg-index__title {
+    grid-column: 1 / span 6;
+  }
+
+  .cg-sidebar-layout__content .cg-index__summary {
+    grid-column: 7 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-index__date {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: start;
+  }
+}
+
+/* Wide enough again: the headings hang in three columns to the left of a
+   nine-column text, the page's own composition at the column's scale. */
+@media (min-width: 80rem) {
+  .cg-sidebar-layout__content .cg-text .cg-prose {
+    grid-column: 4 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-text .cg-prose > h2 {
+    float: inline-start;
+    inline-size: calc(var(--cg-col) * 3 + var(--cg-col-gap) * 2);
+    margin-inline-start: calc((var(--cg-col) + var(--cg-col-gap)) * -3);
+  }
+
+  .cg-sidebar-layout__content .cg-text .cg-prose > h2 + * {
+    margin-block-start: var(--cg-s16);
+  }
+
+  .cg-sidebar-layout__content .cg-text .cg-prose > h2:first-child + * {
+    margin-block-start: 0;
+  }
+}
+
+/* A band the host places outside the layout (the home page, a page opening
+   on its own hero): on the page's own width and gutters. */
+.cg-widget-area--placed {
+  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;
+}
+
+.cg-widget-area--placed[data-area="sidebar"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  column-gap: calc(var(--cg-col-gap) * 2);
+  border: 0;
+}
+
+/* --- a widget ---------------------------------------------------------------- */
+
+.cg-widget-area {
+  display: grid;
+  gap: var(--cg-s10);
+  align-content: start;
+}
+
+.cg-widget {
+  min-inline-size: 0;
+  color: var(--cg-ink);
+}
+
+.cg-widget__title {
+  margin: 0 0 var(--cg-s5);
+  padding-block-start: var(--cg-s4);
+  border-block-start: var(--cg-rule) solid var(--cg-ink);
+  color: var(--cg-ink);
+  font-family: var(--cg-font-text);
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-medium);
+  line-height: 1.3;
+  letter-spacing: var(--cg-tracking-label);
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.cg-widget__body {
+  font-family: var(--cg-font-text);
+  font-size: var(--cg-text-sm);
+  line-height: 1.55;
+}
+
+.cg-widget__body :is(ul, ol) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cg-widget__body p {
+  margin: 0;
+}
+
+.cg-widget a {
+  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.25em;
+}
+
+.cg-widget a:hover {
+  color: var(--cg-accent);
+  text-decoration-color: currentColor;
+}
+
+.cg-widget [aria-current="page"],
+.cg-widget [aria-current="page"] > a {
+  color: var(--cg-accent);
+}
+
+.cg-widget__empty {
+  color: var(--cg-ink-muted);
+}
+
+/* --- work, practices and comments: an index between hairlines ------------------ */
+
+.cg-widget__entry,
+.cg-widget__comment,
+:is(.cg-widget__terms, .cg-widget__archives, .cg-widget__links, .cg-widget__toc) > li {
+  padding-block: var(--cg-s2);
+  border-block: 0;
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-widget__entry:first-child,
+.cg-widget__comment:first-child,
+:is(.cg-widget__terms, .cg-widget__archives, .cg-widget__links, .cg-widget__toc) > li:first-child {
+  padding-block-start: 0;
+  border-block-start: 0;
+}
+
+.cg-widget__entry {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  column-gap: var(--cg-s4);
+  align-items: start;
+  padding-block: var(--cg-s3);
+}
+
+.cg-widget__entry:last-child,
+.cg-widget__comment:last-child,
+:is(.cg-widget__terms, .cg-widget__archives, .cg-widget__links, .cg-widget__toc) > li:last-child {
+  padding-block-end: 0;
+}
+
+.cg-widget__entry[data-image="image"] {
+  grid-template-columns: 4.5rem minmax(0, 1fr);
+}
+
+.cg-widget__entry-image {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+
+.cg-widget__entry-text {
+  display: grid;
+  gap: var(--cg-s2);
+  min-inline-size: 0;
+}
+
+/* The whole row is the link; the title keeps the underline for hover. */
+.cg-widget a.cg-widget__entry-title {
+  color: var(--cg-ink);
+  font-family: var(--cg-font-display);
+  font-size: calc((var(--cg-text-md) + var(--cg-text-lg)) / 2);
+  font-weight: var(--cg-weight-display);
+  line-height: 1.22;
+  letter-spacing: -0.006em;
+  text-decoration-color: transparent;
+  text-underline-offset: 0.18em;
+  text-wrap: pretty;
+}
+
+.cg-widget__entry-title {
+  font-family: var(--cg-font-display);
+  font-size: calc((var(--cg-text-md) + var(--cg-text-lg)) / 2);
+  line-height: 1.22;
+}
+
+.cg-widget a.cg-widget__entry-title::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.cg-widget__entry:hover a.cg-widget__entry-title {
+  color: var(--cg-accent);
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__entry-excerpt,
+.cg-widget__comment-excerpt {
+  color: var(--cg-ink-muted);
+}
+
+.cg-widget__entry-date,
+.cg-widget__comment-date {
+  color: var(--cg-ink-subtle);
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-medium);
+  font-family: var(--cg-font-label);
+  letter-spacing: var(--cg-tracking-label);
+  text-transform: uppercase;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.cg-widget__comment {
+  display: grid;
+  gap: var(--cg-s1);
+}
+
+.cg-widget__comment-author {
+  font-weight: var(--cg-weight-medium);
+}
+
+.cg-widget a.cg-widget__comment-entry {
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-md);
+}
+
+/* Sectors, archives: the label on the left, the figure on the right. */
+:is(.cg-widget__terms, .cg-widget__archives) > li {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--cg-s1) var(--cg-s4);
+  font-size: var(--cg-text-ui);
+}
+
+:is(.cg-widget__terms, .cg-widget__archives) a {
+  text-decoration-color: transparent;
+}
+
+.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);
+}
+
+.cg-widget__terms-item[aria-current="page"] .cg-widget__terms-label {
+  font-weight: var(--cg-weight-medium);
+}
+
+.cg-widget__terms-count,
+.cg-widget__archives-count,
+.cg-widget__cloud-count {
+  color: var(--cg-ink-subtle);
+  font-size: var(--cg-text-sm);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.cg-widget__links,
+.cg-widget__toc {
+  font-size: var(--cg-text-ui);
+}
+
+.cg-widget__links a,
+.cg-widget__toc a {
+  text-decoration-color: transparent;
+}
+
+.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);
+}
+
+.cg-widget__cloud-item[data-weight="1"] {
+  font-size: var(--cg-text-xs);
+}
+.cg-widget__cloud-item[data-weight="2"] {
+  font-size: var(--cg-text-sm);
+}
+.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);
+}
+
+/* --- search, a jump menu, a form: the theme's own fields --------------------- */
+
+.cg-widget__search,
+.cg-widget__jump {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+}
+
+.cg-widget__search-input,
+.cg-widget__jump select,
+.cg-widget__form :is(input:not([type="checkbox"]), select, textarea) {
+  flex: 1;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 44px;
+  padding: var(--cg-s2) var(--cg-s3);
+  border: var(--cg-rule) solid var(--cg-line-strong);
+  border-radius: var(--cg-radius);
+  background: var(--cg-surface);
+  color: var(--cg-ink);
+  font: inherit;
+  font-size: var(--cg-text-ui);
+}
+
+.cg-widget__search-input,
+.cg-widget__jump select {
+  border-inline-end: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.cg-widget__search-input::placeholder {
+  color: var(--cg-ink-subtle);
+}
+
+.cg-widget__search-button,
+.cg-widget__jump-button,
+.cg-widget__form-submit {
+  flex: none;
+  min-block-size: 44px;
+  padding: var(--cg-s2) var(--cg-s4);
+  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),
+    border-color var(--cg-duration) var(--cg-ease),
+    color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-widget__search-button,
+.cg-widget__jump-button {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.cg-widget__form-submit {
+  justify-self: start;
+  padding-inline: var(--cg-s6);
+}
+
+:is(.cg-widget__search-button, .cg-widget__jump-button, .cg-widget__form-submit):hover {
+  background: var(--cg-action-hover);
+  border-color: var(--cg-action-hover);
+  color: var(--cg-action-hover-fg);
+}
+
+.cg-widget__form {
+  display: grid;
+  gap: var(--cg-s4);
+}
+
+.cg-widget__form .cg-form__field {
+  margin: 0;
+}
+
+.cg-widget__form label {
+  display: block;
+  margin-block-end: var(--cg-s1);
+  color: var(--cg-ink);
+  font-size: var(--cg-text-sm);
+  font-weight: var(--cg-weight-medium);
+}
+
+.cg-widget__form-link {
+  font-size: var(--cg-text-ui);
+}
+
+/* --- words and pictures ---------------------------------------------------------- */
+
+.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%;
+  block-size: auto;
+}
+
+.cg-widget__gallery-image {
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+
+.cg-widget__caption {
+  margin-block-start: var(--cg-s2);
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-xs);
+  letter-spacing: 0.02em;
+}
+
+.cg-widget__frame {
+  display: block;
+  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__text > :not(:first-child) {
+  margin-block-start: 0.8em;
+}
+
+.cg-widget__quote-text {
+  margin: 0;
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-lg);
+  font-style: italic;
+  line-height: 1.3;
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+.cg-widget__quote-text p::before {
+  content: open-quote;
+}
+
+.cg-widget__quote-text p::after {
+  content: close-quote;
+}
+
+.cg-widget__quote-source {
+  display: flex;
+  flex-direction: column;
+  margin-block-start: var(--cg-s4);
+  font-size: var(--cg-text-sm);
+}
+
+.cg-widget__quote-name {
+  font-weight: var(--cg-weight-medium);
+}
+
+.cg-widget__quote-role {
+  color: var(--cg-ink-muted);
+}
+
+.cg-widget__about {
+  display: grid;
+  gap: var(--cg-s3);
+  justify-items: start;
+}
+
+.cg-widget__about-image {
+  margin-block-end: var(--cg-s2);
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+}
+
+.cg-widget__about-heading {
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-xl);
+  line-height: 1.15;
+  letter-spacing: var(--cg-tracking-heading);
+  text-wrap: balance;
+}
+
+.cg-widget__about-body {
+  color: var(--cg-ink-muted);
+}
+
+/* --- the one dark plane: the call to discuss a mandate ------------------------------ */
+
+.cg-widget--cta {
+  padding: var(--cg-s8) var(--cg-s6) var(--cg-s6);
+  background: var(--cg-band);
+  color: var(--cg-band-ink);
+}
+
+.cg-widget--cta .cg-widget__title {
+  padding-block-start: 0;
+  border-block-start: 0;
+  color: var(--cg-band-muted);
+}
+
+.cg-widget__cta {
+  display: grid;
+  gap: var(--cg-s3);
+  justify-items: start;
+}
+
+.cg-widget__cta-heading {
+  color: var(--cg-band-ink);
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-xl);
+  font-weight: var(--cg-weight-display);
+  line-height: 1.15;
+  letter-spacing: var(--cg-tracking-heading);
+  text-wrap: pretty;
+}
+
+.cg-widget__cta-body {
+  color: var(--cg-band-muted);
+}
+
+.cg-widget a.cg-widget__cta-action {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 44px;
+  margin-block-start: var(--cg-s3);
+  padding: var(--cg-s2) var(--cg-s5);
+  border: var(--cg-rule) solid var(--cg-band-ink);
+  border-radius: var(--cg-radius);
+  background: var(--cg-band-ink);
+  color: var(--cg-band);
+  font-size: var(--cg-text-ui);
+  font-weight: var(--cg-weight-medium);
+  text-decoration: none;
+  transition:
+    background-color var(--cg-duration) var(--cg-ease),
+    border-color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-widget a.cg-widget__cta-action:hover {
+  background: var(--cg-band-muted);
+  border-color: var(--cg-band-muted);
+  color: var(--cg-band);
+}
+
+.cg-widget--cta :focus-visible {
+  outline-color: var(--cg-band-ink);
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-theme="light"])) .cg-widget--cta {
+    border: var(--cg-rule) solid var(--cg-band-line);
+  }
+}
+
+:where(:root[data-theme="dark"]) .cg-widget--cta {
+  border: var(--cg-rule) solid var(--cg-band-line);
+}
+
+/* --- an office: address, lines, hours ------------------------------------------------- */
+
+.cg-widget__contact {
+  display: grid;
+  gap: var(--cg-s2);
+  font-size: var(--cg-text-sm);
+}
+
+.cg-widget__contact-line {
+  display: flex;
+  gap: var(--cg-s3);
+  align-items: start;
+}
+
+.cg-widget__icon {
+  flex: none;
+  margin-block-start: 0.2em;
+  color: var(--cg-ink-subtle);
+}
+
+.cg-widget__contact-line a {
+  text-decoration-color: transparent;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.cg-widget__hours {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--cg-s1) var(--cg-s4);
+  margin: var(--cg-s3) 0 0;
+  padding-block-start: var(--cg-s3);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.cg-widget__hours dt {
+  color: var(--cg-ink-muted);
+}
+
+.cg-widget__hours dd {
+  margin: 0;
+  justify-self: end;
+}
+
+.cg-widget__social {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cg-s1);
+  margin: 0 0 0 calc(var(--cg-s2) * -1);
+}
+
+.cg-widget__social-item a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  color: var(--cg-ink-muted);
+}
+
+/* --- a calendar: tabular figures on hairlines ---------------------------------------- */
+
+.cg-widget__calendar-table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-size: var(--cg-text-xs);
+  font-variant-numeric: lining-nums tabular-nums;
+  text-align: center;
+}
+
+.cg-widget__calendar-table caption {
+  padding-block-end: var(--cg-s3);
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-md);
+  text-align: start;
+}
+
+.cg-widget__calendar-table th {
+  padding-block: var(--cg-s2);
+  border-block: var(--cg-rule) solid var(--cg-line);
+  color: var(--cg-ink-muted);
+  font-weight: var(--cg-weight-medium);
+}
+
+.cg-widget__calendar-table td {
+  padding-block: var(--cg-s2);
+}
+
+.cg-widget__calendar-table td[data-posts] a {
+  color: var(--cg-accent);
+  font-weight: var(--cg-weight-semibold);
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__calendar-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-block-start: var(--cg-s3);
+  font-size: var(--cg-text-xs);
+}
+
+/* --- under the text: selected work as an exhibit of three ------------------------------ */
+
+.cg-widget-area:is([data-area="content-after"], [data-area="content-before"]) {
+  padding-block: calc(var(--cg-section) / 2);
+}
+
+.cg-sidebar-layout__content > .cg-widget-area[data-area="content-after"] {
+  padding-block-end: 0;
+}
+
+.cg-widget-area:is([data-area="content-after"], [data-area="content-before"]) .cg-widget__title {
+  margin-block-end: var(--cg-s8);
+  padding-block-start: var(--cg-s5);
+  border-block-start-color: var(--cg-line);
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-size-subheading);
+  font-weight: var(--cg-weight-display);
+  line-height: var(--cg-leading-heading);
+  letter-spacing: var(--cg-tracking-heading);
+  text-transform: none;
+}
+
+@media (min-width: 40rem) {
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+    .cg-widget__entries {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+    gap: var(--cg-s10) var(--cg-col-gap);
+  }
+
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"]) .cg-widget__entry,
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+    .cg-widget__entry[data-image="image"] {
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    row-gap: var(--cg-s4);
+    padding-block: 0;
+    border-block-start: 0;
+  }
+
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+    .cg-widget__entry-image {
+    aspect-ratio: 3 / 2;
+  }
+
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+    .cg-widget__entry-text {
+    padding-block-start: var(--cg-s4);
+    border-block-start: var(--cg-rule) solid var(--cg-line);
+  }
+
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+    a.cg-widget__entry-title {
+    font-size: var(--cg-text-lg);
+  }
+}
+
+/* --- the footer's widget row ------------------------------------------------------- */
+
+.cg-site-footer__widgets {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  gap: var(--cg-s10) var(--cg-col-gap);
+  padding-block: var(--cg-s10) var(--cg-s16);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-site-footer__widgets .cg-widget-area {
+  gap: var(--cg-s8);
+}
+
+.cg-site-footer__widgets .cg-widget,
+.cg-site-footer__widgets .cg-widget a {
+  color: var(--cg-ink-muted);
+}
+
+.cg-site-footer__widgets .cg-widget a:hover {
+  color: var(--cg-ink);
+}
+
+.cg-site-footer__widgets .cg-widget__title {
+  margin-block-end: var(--cg-s2);
+  padding-block-start: 0;
+  border-block-start: 0;
+  color: var(--cg-ink);
+  font-size: var(--cg-text-sm);
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.cg-site-footer__widgets .cg-widget__body {
+  font-size: var(--cg-text-sm);
+}
+
+.cg-site-footer__widgets :is(.cg-widget__links, .cg-widget__toc, .cg-widget__terms) > li {
+  padding-block: var(--cg-s1);
+  border-block-start: 0;
+}