@caltho/site-kit 0.2.10 → 0.2.11

package/dist/sections.css

@@ -1,21 +1,240 @@
 /*
- * The kit's sections (@caltho/site-kit/sections), styled to sit in any site: its width, spacing and
- * type, themed by the site's Look (--look-*) where it has one and its own fonts and colours otherwise.
- * Import once in the site's layout: import "@caltho/site-kit/sections.css".
+ * The kit's sections (@caltho/site-kit/sections), drawn from the site's Look (--look-*: its type
+ * scale, colours, buttons, width and spacing), so they look right on any site with no classes of its
+ * own; the fallbacks are for a site without a Look. And the frame KitBlocks draws around a section
+ * with a background. Import once in the site's layout: import "@caltho/site-kit/sections.css".
  */
 .kit-section {
-  padding-block: clamp(48px, 8vw, 96px);
+  padding-block: var(--look-section-pad, clamp(56px, 8vw, 96px));
 }
+/* The content's width, inside the theme's side gutter (--look-gutter), the same as the site's own sections. */
 .kit-wrap {
-  width: min(1200px, 100% - 40px);
+  width: min(var(--look-width, 1200px), 100% - 2 * var(--look-gutter, 20px));
   margin-inline: auto;
 }
-.kit-heading {
-  margin: 0 0 12px;
+
+/* Headings: large is a section's own (the Look's section heading), medium one under it, small the least. */
+.kit-h {
+  margin: 0;
+  color: inherit;
   font-family: var(--look-heading-font, inherit);
-  font-size: clamp(1.6rem, 3vw, 2.25rem);
-  line-height: 1.15;
+  text-wrap: balance;
+}
+.kit-h-large {
+  font-size: clamp(calc(var(--look-type-h2-size, 40px) * 0.7), calc(var(--look-type-h2-size, 40px) * 0.45 + 2vw), var(--look-type-h2-size, 40px));
+  font-weight: var(--look-type-h2-weight, 600);
+  letter-spacing: var(--look-type-h2-tracking, -0.02em);
+  line-height: var(--look-type-h2-leading, 1.15);
+}
+.kit-h-medium {
+  font-size: clamp(calc(var(--look-type-h3-size, 24px) * 0.85), calc(var(--look-type-h3-size, 24px) * 0.7 + 0.6vw), var(--look-type-h3-size, 24px));
+  font-weight: var(--look-type-h3-weight, 600);
+  letter-spacing: var(--look-type-h3-tracking, -0.01em);
+  line-height: var(--look-type-h3-leading, 1.25);
+}
+.kit-h-small {
+  font-size: var(--look-type-body-size, 17px);
+  font-weight: var(--look-type-h3-weight, 600);
+  letter-spacing: var(--look-type-h3-tracking, 0);
+  line-height: var(--look-type-h3-leading, 1.3);
+}
+:is(h1, h2, h3, h4, h5, h6).kit-h-large + * {
+  margin-top: 4px;
+}
+.kit-text,
+.kit-intro {
+  font-family: var(--look-body-font, inherit);
+  font-size: var(--look-type-body-size, inherit);
+  font-weight: var(--look-type-body-weight, inherit);
+  letter-spacing: var(--look-type-body-tracking, normal);
+  line-height: var(--look-type-body-leading, 1.6);
+}
+.kit-text > :first-child {
+  margin-top: 0;
+}
+.kit-text > :last-child {
+  margin-bottom: 0;
+}
+.kit-text a {
+  color: inherit;
+  text-decoration-color: var(--look-accent, currentColor);
+  text-underline-offset: 3px;
+}
+.kit-muted {
+  color: var(--look-muted, inherit);
+  font-size: var(--look-type-small-size, 0.875rem);
+  letter-spacing: var(--look-type-small-tracking, normal);
+  line-height: var(--look-type-small-leading, 1.5);
+}
+.kit-own-stats dd.kit-h,
+.kit-own-amount.kit-h {
+  font-size: var(--look-type-h3-size, 24px);
+}
+
+/* Buttons: the Look's (brand, corners, filled or outlined), flat. The quiet one an outline. */
+.kit-button {
+  display: inline-block;
+  padding: 0.7em 1.3em;
+  border: var(--look-button-border-width, 1px) solid var(--look-button-border-colour, var(--look-button-border, currentColor));
+  border-radius: var(--look-button-radius, 999px);
+  background: var(--look-button-bg, #111);
+  color: var(--look-button-fg, #fff);
+  font-family: var(--look-body-font, inherit);
+  font-size: var(--look-type-body-size, 1rem);
+  /* A site's own buttons' weight, where it says (--kit-button-weight), so the kit's match them. */
+  font-weight: var(--kit-button-weight, 500);
+  line-height: 1.2;
+  text-decoration: none;
+}
+.kit-button:hover {
+  opacity: 0.9;
+}
+.kit-button:focus-visible {
+  outline: 2px solid var(--look-accent, currentColor);
+  outline-offset: 3px;
+}
+.kit-button.kit-button-quiet {
+  border-color: currentColor;
+  background: transparent;
+  color: inherit;
+}
+
+/* A kit section's Layout, where the site's own CSS doesn't say. */
+.kit-section.place-width-narrow > .kit-wrap {
+  width: min(calc(var(--look-width, 1200px) * 0.66), 100% - 2 * var(--look-gutter, 20px));
+}
+.kit-section.place-width-wide > .kit-wrap {
+  width: min(calc(var(--look-width, 1200px) * 1.2), 100% - 2 * var(--look-gutter, 20px));
+}
+.kit-section.place-align-center > .kit-wrap {
+  text-align: center;
 }
+.kit-section.place-spacing-compact {
+  padding-block: calc(var(--look-section-pad, clamp(56px, 8vw, 96px)) * 0.6);
+}
+.kit-section.place-spacing-roomy {
+  padding-block: calc(var(--look-section-pad, clamp(56px, 8vw, 96px)) * 1.4);
+}
+@media (max-width: 719px) {
+  .kit-section.place-show-desktop {
+    display: none;
+  }
+}
+@media (min-width: 720px) {
+  .kit-section.place-show-phone {
+    display: none;
+  }
+}
+
+/* Lines across a section's full width (its Layout's Lines): the Look's line colour, or its text colour when strong. */
+.kit-lines {
+  --kit-lines-colour: var(--look-line, #ddd);
+}
+.kit-lines.kit-lines-strong {
+  --kit-lines-colour: var(--look-ink, #111);
+}
+.kit-lines-top,
+.kit-lines-both {
+  border-top: 1px solid var(--kit-lines-colour);
+}
+.kit-lines-bottom,
+.kit-lines-both {
+  border-bottom: 1px solid var(--kit-lines-colour);
+}
+
+/*
+ * The frame around a section with a background (KitBlocks): its colour from the Look (one of the
+ * page's, or one of the site's own by its place in the list), a photo behind under a shade, and its
+ * words in the darker of page and ink, or the lighter on a dark one (kit-frame-dark). The section in
+ * it is drawn over it without a background of its own.
+ */
+.kit-frame {
+  position: relative;
+  isolation: isolate;
+  background: var(--kit-frame-bg, transparent);
+  color: var(--look-dark, #111);
+}
+.kit-frame.kit-frame-dark {
+  color: var(--look-light, #fff);
+}
+.kit-frame > :not(.kit-frame-bg, template) {
+  background: transparent;
+  color: inherit;
+}
+.kit-bg-page { --kit-frame-bg: var(--look-page, #fff); }
+.kit-bg-soft { --kit-frame-bg: var(--look-soft, #f3f3f3); }
+.kit-bg-brand { --kit-frame-bg: var(--look-brand, #111); }
+.kit-bg-accent { --kit-frame-bg: var(--look-accent, #111); }
+.kit-bg-ink { --kit-frame-bg: var(--look-ink, #111); }
+.kit-bg-swatch-1 { --kit-frame-bg: var(--look-swatch-1); }
+.kit-bg-swatch-2 { --kit-frame-bg: var(--look-swatch-2); }
+.kit-bg-swatch-3 { --kit-frame-bg: var(--look-swatch-3); }
+.kit-bg-swatch-4 { --kit-frame-bg: var(--look-swatch-4); }
+.kit-bg-swatch-5 { --kit-frame-bg: var(--look-swatch-5); }
+.kit-bg-swatch-6 { --kit-frame-bg: var(--look-swatch-6); }
+.kit-bg-swatch-7 { --kit-frame-bg: var(--look-swatch-7); }
+.kit-bg-swatch-8 { --kit-frame-bg: var(--look-swatch-8); }
+.kit-bg-swatch-9 { --kit-frame-bg: var(--look-swatch-9); }
+.kit-bg-swatch-10 { --kit-frame-bg: var(--look-swatch-10); }
+.kit-bg-swatch-11 { --kit-frame-bg: var(--look-swatch-11); }
+.kit-bg-swatch-12 { --kit-frame-bg: var(--look-swatch-12); }
+.kit-frame-photo {
+  overflow: hidden;
+}
+.kit-frame-bg {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+.kit-frame-bg img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.kit-frame-bg::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.kit-overlay-dark .kit-frame-bg::after {
+  background: linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.62));
+}
+.kit-overlay-light .kit-frame-bg::after {
+  background: color-mix(in srgb, var(--look-page, #fff) 78%, transparent);
+}
+.kit-overlay-none.kit-frame-dark {
+  text-shadow: 0 1px 14px rgb(0 0 0 / 0.55);
+}
+/* Words and buttons readable on a dark frame, whatever the section's own classes give them. */
+.kit-frame-dark {
+  --kit-own-fg: var(--look-light, #fff);
+  --kit-own-button-bg: var(--look-light, #fff);
+  --kit-own-button-fg: var(--look-dark, #111);
+}
+.kit-frame-dark :is(.kit-h, .kit-text, .kit-muted) {
+  color: inherit;
+}
+.kit-frame-dark .kit-muted {
+  opacity: 0.8;
+}
+.kit-frame-dark .kit-button {
+  border-color: var(--look-button-border-colour, var(--look-light, #fff));
+  background: var(--look-light, #fff);
+  color: var(--look-dark, #111);
+}
+.kit-frame-dark .kit-button.kit-button-quiet {
+  border-color: currentColor;
+  background: transparent;
+  color: inherit;
+}
+/* On a brand frame light enough for dark words, the brand's buttons in its readable colour. */
+.kit-bg-brand:not(.kit-frame-dark) .kit-button:not(.kit-button-quiet) {
+  border-color: var(--look-button-border-colour, var(--look-on-brand, #111));
+  background: var(--look-on-brand, #111);
+  color: var(--look-brand, #fff);
+}
+
 .kit-intro {
   max-width: 65ch;
   margin-top: 12px;
@@ -194,13 +413,115 @@
 
 /*
  * A section of the business's own: its columns side by side from a tablet up (stacked on a phone),
- * its parts spaced evenly, in the site's type. Brand tone: the site's brand colour behind, its
- * readable colour over it.
+ * its parts spaced evenly, in the site's type.
+ *
+ * Its background (tone), from the site's Look: plain is the page's own; soft a quiet tint of the
+ * page's text colour; brand the brand colour, its readable colour over it; dark the site's ink, the
+ * page's colour over it. A photo behind is under a scrim, the words light over it.
+ *
+ * Its shape, on soft, brand or dark: a card (the default) is that background inset within the
+ * content's width, in the theme's corners, the section's own space around it; a band is the
+ * background across the page's full width.
  */
-.kit-own-brand {
-  background: var(--look-brand, #111);
-  color: var(--look-on-brand, #fff);
+.kit-own.kit-own-soft {
+  --kit-own-tone-bg: var(--look-soft, color-mix(in srgb, currentColor 5%, transparent));
+}
+.kit-own.kit-own-brand {
+  --kit-own-fg: var(--look-on-brand, #fff);
+  --kit-own-button-bg: var(--look-on-brand, #fff);
+  --kit-own-button-fg: var(--look-brand, #111);
+  --kit-own-tone-bg: var(--look-brand, #111);
+}
+.kit-own.kit-own-dark {
+  --kit-own-fg: var(--look-page, #fff);
+  --kit-own-button-bg: var(--look-page, #fff);
+  --kit-own-button-fg: var(--look-ink, #111);
+  --kit-own-tone-bg: var(--look-ink, #111);
+}
+.kit-own.kit-own-shape-band {
+  background: var(--kit-own-tone-bg);
+}
+.kit-own.kit-own-shape-card > * > .kit-own-panel {
+  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px);
+  border-radius: var(--look-radius, 8px);
+  background: var(--kit-own-tone-bg);
+}
+/* In a frame (a Layout background), the frame's colour is the section's: the tone gives way to it. */
+.kit-frame .kit-own.kit-own-shape-card > * > .kit-own-panel {
+  padding: 0;
+  background: transparent;
+}
+.kit-own.kit-own-behind {
+  --kit-own-fg: #fff;
+  --kit-own-button-bg: #fff;
+  --kit-own-button-fg: #111;
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  background: var(--look-ink, #111);
+}
+.kit-own-bg {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+.kit-own-bg img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+/* The scrim: dark enough that light words read over any photo, a little darker at the bottom. */
+.kit-own-bg::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.65));
+}
+
+/*
+ * On brand, dark or a photo: the words in the section's readable colour, and its buttons a light
+ * pill (the main one) or an outline (the quiet one), over whatever colours the site's own classes
+ * give them, which are for its page background.
+ */
+.kit-own.kit-own-inverse {
+  color: var(--kit-own-fg);
+}
+:is(.kit-own-inverse, .kit-frame-dark) .kit-own-column :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, dt, dd, span, strong, em, a) {
+  color: inherit;
+}
+.kit-own:is(.kit-own-inverse, .kit-frame-dark *) .kit-own-column .kit-own-action > a {
+  border-color: var(--kit-own-button-bg);
+  background: var(--kit-own-button-bg);
+  color: var(--kit-own-button-fg);
+}
+.kit-own:is(.kit-own-inverse, .kit-frame-dark *) .kit-own-column .kit-own-action-quiet > a {
+  border-color: currentColor;
+  background: transparent;
+  color: var(--kit-own-fg);
+}
+.kit-own-inverse .kit-own-column .kit-own-action > a:hover {
+  opacity: 0.9;
+}
+.kit-own-inverse .kit-own-column .kit-own-action > a:focus-visible {
+  outline: 2px solid var(--kit-own-fg);
+  outline-offset: 3px;
+}
+.kit-own-inverse .kit-own-list-checks li::before {
+  color: inherit;
+}
+.kit-own-inverse .kit-own-text a {
+  text-decoration: underline;
+}
+
+/* Space above and below: normal is the site's own; tight and roomy less and more. */
+.kit-own.kit-own-pad-tight {
+  padding-block: clamp(24px, 4vw, 40px);
+}
+.kit-own.kit-own-pad-roomy {
+  padding-block: clamp(72px, 12vw, 144px);
 }
+
 .kit-own-grid {
   display: grid;
   gap: clamp(24px, 4vw, 48px);
@@ -241,12 +562,6 @@
 .kit-own-column > * {
   margin: 0;
 }
-.kit-own-h-large {
-  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
-}
-.kit-own-h-small {
-  font-size: 1.15rem;
-}
 .kit-own-text {
   max-width: 65ch;
 }
@@ -272,22 +587,32 @@
 .kit-own-photo figcaption,
 .kit-own-quote figcaption {
   margin-top: 8px;
-  font-size: 0.9rem;
   opacity: 0.75;
 }
-.kit-button {
-  display: inline-block;
-  padding: 10px 18px;
-  border: 1px solid var(--look-button-border, currentColor);
-  border-radius: var(--look-button-radius, 8px);
-  background: var(--look-button-bg, #111);
-  color: var(--look-button-fg, #fff);
-  font-weight: 500;
-  text-decoration: none;
+/* Buttons one after another: side by side, wrapping on a phone. */
+.kit-own-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
 }
-.kit-button-quiet {
-  background: transparent;
-  color: inherit;
+.kit-own-align-center .kit-own-actions {
+  justify-content: center;
+}
+.kit-own-actions > .kit-own-action {
+  margin: 0;
+}
+/* A photo still to choose, in CalOS's preview only: a quiet box its shape. */
+.kit-own-photo-empty {
+  aspect-ratio: 4 / 3;
+  border-radius: var(--look-radius, 8px);
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+.kit-own-photo-empty.kit-own-shape-square {
+  aspect-ratio: 1 / 1;
+}
+.kit-own-photo-empty.kit-own-shape-portrait {
+  aspect-ratio: 4 / 5;
 }
 .kit-own-list {
   max-width: 65ch;
@@ -310,8 +635,9 @@
 }
 .kit-own-quote blockquote {
   margin: 0;
-  font-size: 1.15rem;
-  line-height: 1.5;
+  font-family: var(--look-heading-font, inherit);
+  font-size: var(--look-type-h3-size, 1.25rem);
+  line-height: 1.4;
 }
 .kit-own-stats {
   display: flex;
@@ -327,17 +653,11 @@
 }
 .kit-own-stats dd {
   margin: 0;
-  font-size: 1.6rem;
-  font-weight: 600;
-  line-height: 1.1;
 }
 .kit-own-stats dt {
-  font-size: 0.85rem;
   opacity: 0.75;
 }
 .kit-own-amount {
-  font-size: 2rem;
-  font-weight: 600;
 }
 .kit-own-per {
   opacity: 0.75;
@@ -356,3 +676,902 @@
 .kit-own-space-large {
   height: 56px;
 }
+
+/* Text only a screen reader reads: a tick's "Yes", a dash's "No". */
+.kit-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* A section's heading and intro, over its columns, aligned as the section is. */
+.kit-own-head {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: clamp(24px, 4vw, 40px);
+}
+.kit-own-head.kit-own-align-center {
+  align-items: center;
+}
+.kit-own-head > * {
+  margin: 0;
+}
+.kit-own-intro {
+  max-width: 65ch;
+}
+.kit-own-intro > :first-child {
+  margin-top: 0;
+}
+.kit-own-intro > :last-child {
+  margin-bottom: 0;
+}
+
+/*
+ * A column drawn as a card: the theme's quiet background on the page, a line around it on a quiet
+ * one, and a faint line in the words' colour on brand, dark, a photo or a frame; the theme's corners.
+ */
+.kit-own-card {
+  padding: clamp(20px, 3vw, 32px);
+  border: 1px solid transparent;
+  border-radius: var(--look-radius, 8px);
+  background: var(--look-soft, color-mix(in srgb, currentColor 5%, transparent));
+}
+.kit-own-soft .kit-own-card {
+  border-color: var(--look-line, color-mix(in srgb, currentColor 18%, transparent));
+  background: var(--look-page, transparent);
+}
+:is(.kit-own-inverse, .kit-frame) .kit-own-card {
+  border-color: color-mix(in srgb, currentColor 28%, transparent);
+  background: transparent;
+}
+
+/* An icon: the brand colour on the page, the words' colour on brand, dark or a photo. */
+.kit-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}
+.kit-own-icon {
+  color: var(--look-brand, currentColor);
+}
+:is(.kit-own-inverse, .kit-frame-dark) .kit-own-icon {
+  color: inherit;
+}
+.kit-own-icon-small {
+  width: 24px;
+  height: 24px;
+}
+.kit-own-icon-medium {
+  width: 32px;
+  height: 32px;
+}
+.kit-own-icon-large {
+  width: 48px;
+  height: 48px;
+}
+.kit-own-align-center .kit-own-icon {
+  align-self: center;
+}
+
+/*
+ * A table: a real table from 640px up, its rows' labels and cells lined up, a column picked out by
+ * a faint tint and a line over its heading; below that, each row a small card, its label its
+ * heading and each column's heading beside the row's cell. Ticks and dashes in the words' colour.
+ */
+.kit-own-table {
+  width: 100%;
+  text-align: start;
+}
+.kit-table-wide {
+  overflow-x: auto;
+}
+.kit-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.kit-table :is(th, td) {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--look-line, color-mix(in srgb, currentColor 18%, transparent));
+  text-align: center;
+  vertical-align: middle;
+}
+.kit-table :is(th[scope="row"], thead > tr > :first-child) {
+  padding-left: 0;
+  text-align: start;
+}
+.kit-table th {
+  font-weight: 600;
+}
+.kit-table th[scope="row"] {
+  font-weight: 500;
+}
+.kit-table thead th {
+  font-family: var(--look-heading-font, inherit);
+  vertical-align: bottom;
+}
+.kit-table .kit-table-highlight {
+  background: color-mix(in srgb, currentColor 5%, transparent);
+}
+.kit-table thead th.kit-table-highlight {
+  border-top: 3px solid var(--look-brand, currentColor);
+  border-top-left-radius: var(--look-radius, 8px);
+  border-top-right-radius: var(--look-radius, 8px);
+}
+:is(.kit-own-inverse, .kit-frame-dark) .kit-table thead th.kit-table-highlight {
+  border-top-color: currentColor;
+}
+:is(.kit-own-inverse, .kit-frame-dark) .kit-table :is(th, td) {
+  border-bottom-color: color-mix(in srgb, currentColor 25%, transparent);
+}
+.kit-table-yes,
+.kit-table-no {
+  display: inline-flex;
+}
+.kit-table-yes .kit-icon,
+.kit-table-no .kit-icon {
+  width: 20px;
+  height: 20px;
+}
+.kit-table-no {
+  opacity: 0.55;
+}
+.kit-table-cards {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.kit-table-card {
+  padding: 16px 18px;
+  border: 1px solid var(--look-line, color-mix(in srgb, currentColor 18%, transparent));
+  border-radius: var(--look-radius, 8px);
+}
+:is(.kit-own-inverse, .kit-frame-dark) .kit-table-card {
+  border-color: color-mix(in srgb, currentColor 28%, transparent);
+}
+.kit-table-card > :is(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 8px;
+}
+.kit-table-card dl {
+  margin: 0;
+}
+.kit-table-card dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 6px 0;
+}
+.kit-table-card dl > div + div {
+  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+}
+.kit-table-card dl > .kit-table-highlight {
+  font-weight: 600;
+}
+.kit-table-card dt::after {
+  content: ":";
+}
+.kit-table-card dd {
+  margin: 0;
+  text-align: end;
+}
+@media (max-width: 639px) {
+  .kit-table-wide {
+    display: none;
+  }
+}
+@media (min-width: 640px) {
+  .kit-table-cards {
+    display: none;
+  }
+}
+
+/* Logos in a row, wrapping, in grey until pointed at, so the business's colours lead. */
+.kit-own-logos {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.kit-own-align-center .kit-own-logos {
+  align-items: center;
+}
+.kit-own-logos-title {
+  margin: 0;
+}
+.kit-own-logos ul {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 24px clamp(28px, 5vw, 56px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.kit-own-align-center .kit-own-logos ul {
+  justify-content: center;
+}
+.kit-own-logos img {
+  display: block;
+  width: auto;
+  max-width: 160px;
+  height: auto;
+  max-height: 40px;
+  object-fit: contain;
+  filter: grayscale(1);
+  opacity: 0.7;
+}
+.kit-own-logos li:hover img {
+  filter: none;
+  opacity: 1;
+}
+:is(.kit-own-inverse, .kit-frame-dark) .kit-own-logos img {
+  filter: grayscale(1) brightness(0) invert(1);
+  opacity: 0.85;
+}
+
+/* A video: its player at 16:9, in the theme's corners; one still to choose, a quiet box in the preview. */
+.kit-own-video {
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  border-radius: var(--look-radius, 8px);
+}
+.kit-own-video iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+.kit-own-video-empty {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+/*
+ * The frame around every page (KitFrame, KitHeader, KitFooter): drawn from the Look, like the
+ * sections. The header follows the Look's Header (headerOf): .is-sticky, a style (kit-header-line,
+ * -plain, -brand, -floating) and, on a wide screen, a layout (kit-header-spread, -centered, -left).
+ * A site sets --kit-footer-bg, -fg, -muted and -line for a footer in colours of its own, not its darkest.
+ */
+.kit-skip {
+  position: absolute;
+  left: 1rem;
+  top: -10rem;
+  z-index: 100;
+  padding: 0.75rem 1rem;
+  background: var(--look-ink, #111);
+  color: var(--look-page, #fff);
+  border-radius: calc(var(--look-radius, 8px) / 2);
+  font-weight: 600;
+}
+.kit-skip:focus {
+  top: 1rem;
+}
+
+.kit-header {
+  --kit-h-ink: var(--look-ink, #111);
+  --kit-h-muted: var(--look-muted, #666);
+  --kit-h-line: var(--look-line, #ddd);
+  --kit-h-bg: var(--look-page, #fff);
+  --kit-h-hover: var(--look-soft, #f4f4f2);
+  --kit-h-pick: var(--look-brand, currentColor);
+  position: relative;
+  z-index: 20;
+  /* Solid, not see-through and blurred: a blur behind a sticky header is redrawn every frame, and
+     on a fast scroll the header fell behind the page and jumped back. */
+  background: var(--kit-h-bg);
+  border-bottom: 1px solid var(--kit-h-line);
+  color: var(--kit-h-ink);
+  font-family: var(--look-body-font, inherit);
+}
+.kit-header.is-sticky {
+  position: sticky;
+  top: 0;
+}
+.kit-header-plain {
+  border-bottom-color: transparent;
+}
+/* The brand colour, its words in the colour that reads on it. */
+.kit-header-brand {
+  --kit-h-bg: var(--look-brand, #111);
+  --kit-h-ink: var(--look-on-brand, #fff);
+  --kit-h-muted: color-mix(in srgb, var(--look-on-brand, #fff) 75%, transparent);
+  --kit-h-line: color-mix(in srgb, var(--look-on-brand, #fff) 30%, transparent);
+  --kit-h-hover: color-mix(in srgb, var(--look-on-brand, #fff) 14%, transparent);
+  --kit-h-pick: var(--look-on-brand, #fff);
+  background: var(--kit-h-bg);
+  border-bottom-color: transparent;
+}
+.kit-header-brand .kit-header-action {
+  --look-button-bg: var(--look-on-brand, #fff);
+  --look-button-fg: var(--look-brand, #111);
+  --look-button-border: var(--look-on-brand, #fff);
+}
+/* A bar over the page, inset from its edges, set apart by a shadow rather than a line. */
+.kit-header-floating {
+  background: transparent;
+  border-bottom: 0;
+  padding-top: 0.75rem;
+}
+.kit-header-floating .kit-header-row {
+  padding-inline: 1.25rem;
+  min-height: 4rem;
+  background: var(--kit-h-bg);
+  border: 1px solid var(--kit-h-line);
+  border-radius: max(calc(var(--look-radius, 8px) * 1.25), 0.75rem);
+  box-shadow: 0 8px 30px -12px color-mix(in srgb, var(--kit-h-ink) 30%, transparent);
+}
+.kit-header-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem 1.5rem;
+  min-height: 4.75rem;
+}
+.kit-brand {
+  margin-right: auto;
+  color: var(--kit-h-ink);
+  text-decoration: none;
+}
+.kit-brand-name {
+  font-family: var(--look-heading-font, inherit);
+  font-size: 1.35rem;
+  font-weight: var(--look-type-h2-weight, 600);
+  letter-spacing: var(--look-type-h2-tracking, -0.01em);
+  line-height: 1.1;
+}
+.kit-logo {
+  max-height: 2.75rem;
+  width: auto;
+}
+.kit-menu-wide ul {
+  display: flex;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.kit-menu-wide a {
+  display: block;
+  padding: 0.5rem 0.8rem;
+  border-radius: calc(var(--look-radius, 8px) / 2);
+  color: var(--kit-h-ink);
+  font-weight: 500;
+  text-decoration: none;
+}
+.kit-menu-wide a:hover {
+  background: var(--kit-h-hover);
+}
+/* A link the menu picks out (Emphasize in CalOS), and the page you're on. */
+.kit-header a.is-emphasis {
+  color: var(--kit-h-pick);
+  font-weight: 600;
+}
+.kit-menu-wide a[aria-current="page"] {
+  color: var(--kit-h-pick);
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.45em;
+}
+/* A menu link with links under it: the link, a button beside it, and the links in a panel under them. */
+.kit-menu-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.kit-menu-wide .kit-menu-group > a {
+  padding-right: 0.25rem;
+}
+.kit-menu-group-toggle {
+  display: grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 0;
+  border-radius: calc(var(--look-radius, 8px) / 2);
+  padding: 0;
+  background: none;
+  color: var(--kit-h-ink);
+  cursor: pointer;
+}
+.kit-menu-group-toggle:hover {
+  background: var(--kit-h-hover);
+}
+.kit-menu-group-toggle:focus-visible {
+  outline: 2px solid var(--look-accent, currentColor);
+  outline-offset: 2px;
+}
+.kit-menu-group-toggle .kit-icon {
+  width: 1rem;
+  height: 1rem;
+  transition: transform 0.15s ease;
+}
+.kit-menu-group.is-open .kit-menu-group-toggle .kit-icon {
+  transform: rotate(180deg);
+}
+.kit-menu-wide .kit-menu-group-list {
+  position: absolute;
+  top: calc(100% + 0.4rem);
+  left: 0;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 13rem;
+  padding: 0.4rem;
+  background: var(--look-page, #fff);
+  border: 1px solid var(--look-line, #ddd);
+  border-radius: calc(var(--look-radius, 8px) * 0.75);
+  box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.25);
+}
+.kit-menu-wide .kit-menu-group-list a {
+  color: var(--look-ink, #111);
+  white-space: nowrap;
+}
+.kit-menu-wide .kit-menu-group-list[hidden] {
+  display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-menu-group-toggle .kit-icon {
+    transition: none;
+  }
+}
+.kit-header-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  min-height: 2.75rem;
+  padding: 0.6rem 1.1rem;
+}
+.kit-header-action .kit-icon,
+.kit-menu-narrow .kit-icon {
+  width: 1.15rem;
+  height: 1.15rem;
+}
+.kit-menu-narrow {
+  display: none;
+  flex-shrink: 0;
+}
+.kit-menu-narrow summary {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.55rem 0.9rem;
+  border: 1px solid var(--kit-h-line);
+  border-radius: var(--look-button-radius, 6px);
+  color: var(--kit-h-ink);
+  font-weight: 600;
+  list-style: none;
+  cursor: pointer;
+}
+/* The phone's menu button as the header's Look says: its icon, the word, or both (its look a button style, kit-btn-n). */
+.kit-menu-icon .kit-menu-word {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.kit-menu-icon summary {
+  padding: 0.55rem;
+}
+.kit-menu-word summary .kit-icon {
+  display: none;
+}
+.kit-menu-narrow summary::-webkit-details-marker {
+  display: none;
+}
+.kit-menu-narrow[open] .when-closed,
+.kit-menu-narrow:not([open]) .when-open {
+  display: none;
+}
+.kit-menu-narrow nav {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 0.5rem var(--look-gutter, 20px) 1.5rem;
+  background: var(--look-page, #fff);
+  border-bottom: 1px solid var(--look-line, #ddd);
+  box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.25);
+}
+.kit-menu-narrow ul {
+  margin: 0 0 1.25rem;
+  padding: 0;
+  list-style: none;
+}
+.kit-menu-narrow li a {
+  display: block;
+  padding: 0.9rem 0;
+  border-bottom: 1px solid var(--look-line, #ddd);
+  color: var(--look-ink, #111);
+  font-size: 1.125rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+.kit-menu-narrow li a[aria-current="page"] {
+  color: var(--look-brand, currentColor);
+}
+/* Links under a link, in the phone's menu: indented under it, a little smaller. */
+.kit-menu-narrow .kit-menu-sub {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+.kit-menu-narrow .kit-menu-sub li a {
+  padding: 0.7rem 0;
+  font-size: 1rem;
+  color: var(--look-muted, #666);
+}
+.kit-menu-narrow .kit-button {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+@media (min-width: 961px) {
+  /* Centred: the name in the middle, the button at the right, the menu under them. */
+  .kit-header-centered .kit-header-row {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    padding-block: 0.9rem 0.6rem;
+    row-gap: 0.4rem;
+  }
+  .kit-header-centered .kit-brand {
+    grid-column: 2;
+    margin: 0;
+    justify-self: center;
+  }
+  .kit-header-centered .kit-header-action {
+    grid-column: 3;
+    justify-self: end;
+  }
+  .kit-header-centered .kit-menu-wide {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: center;
+  }
+  /* All on the left: the menu beside the name, the button alone at the right. */
+  .kit-header-left .kit-brand {
+    margin-right: 1.5rem;
+  }
+  .kit-header-left .kit-menu-wide {
+    margin-right: auto;
+  }
+}
+@media (max-width: 960px) {
+  .kit-menu-wide,
+  .kit-header-action:not(.is-call) {
+    display: none;
+  }
+  .kit-menu-narrow {
+    display: block;
+  }
+  /* On a phone, calling stays one tap away: the button keeps its icon, the number is read out. */
+  .kit-header-action.is-call {
+    justify-content: center;
+    width: 2.75rem;
+    padding: 0;
+  }
+  .kit-header-action.is-call > span {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .kit-brand-name {
+    font-size: 1.15rem;
+  }
+}
+
+.kit-footer {
+  --kit-f-bg: var(--kit-footer-bg, var(--look-dark, #111));
+  --kit-f-ink: var(--kit-footer-fg, var(--look-light, #fff));
+  --kit-f-muted: var(--kit-footer-muted, color-mix(in srgb, var(--kit-f-ink) 70%, var(--kit-f-bg)));
+  --kit-f-line: var(--kit-footer-line, color-mix(in srgb, var(--kit-f-ink) 22%, var(--kit-f-bg)));
+  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
+  background: var(--kit-f-bg);
+  color: var(--kit-f-ink);
+  font-family: var(--look-body-font, inherit);
+  font-size: 0.975rem;
+}
+.kit-footer-grid {
+  display: grid;
+  grid-template-columns: 1.5fr repeat(3, 1fr);
+  gap: 2.5rem;
+}
+.kit-footer-name {
+  margin: 0 0 0.5rem;
+  font-family: var(--look-heading-font, inherit);
+  font-size: 1.5rem;
+  font-weight: var(--look-type-h2-weight, 600);
+  letter-spacing: var(--look-type-h2-tracking, -0.01em);
+  line-height: 1.2;
+}
+.kit-footer-muted {
+  margin: 0 0 1.5rem;
+  color: var(--kit-f-muted);
+}
+.kit-footer-heading {
+  margin: 0 0 1rem;
+  color: var(--kit-f-muted);
+  font-family: var(--look-body-font, inherit);
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.kit-footer-contact {
+  display: grid;
+  gap: 0.9rem;
+  margin: 0 0 1.75rem;
+  padding: 0;
+  list-style: none;
+}
+.kit-footer-contact li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+.kit-footer-contact .kit-icon {
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-top: 0.2rem;
+  color: color-mix(in srgb, var(--look-brand, #888) 55%, var(--kit-f-ink));
+}
+.kit-footer a {
+  color: var(--kit-f-ink);
+}
+.kit-footer-links {
+  display: grid;
+  gap: 0.55rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.kit-footer-links a,
+.kit-footer-policies a {
+  text-decoration: none;
+}
+.kit-footer-links a:hover,
+.kit-footer-policies a:hover {
+  text-decoration: underline;
+}
+.kit-footer-hours {
+  margin: 0 0 0.75rem;
+}
+.kit-footer-hours div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.25rem 0;
+}
+.kit-footer-hours dt {
+  color: var(--kit-f-muted);
+}
+.kit-footer-hours dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+.kit-footer-base {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem 2rem;
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--kit-f-line);
+  color: var(--kit-f-muted);
+  font-size: 0.9rem;
+}
+.kit-footer-base p {
+  margin: 0;
+}
+.kit-footer-policies {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.kit-footer-policies a {
+  color: var(--kit-f-muted);
+}
+@media (max-width: 900px) {
+  .kit-footer-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .kit-footer-about {
+    grid-column: 1 / -1;
+  }
+}
+
+/* Items with titles: a number (01, 02…) beside each title and its line, rules between them. */
+.kit-own-items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.kit-own-items li {
+  display: flex;
+  gap: 1.5rem;
+  padding-block: 1.25rem;
+}
+.kit-own-items-lines {
+  border-bottom: 1px solid var(--look-line, #ddd);
+}
+.kit-own-items-lines li {
+  border-top: 1px solid var(--look-line, #ddd);
+}
+.kit-frame-dark .kit-own-items-lines,
+.kit-frame-dark .kit-own-items-lines li {
+  border-color: color-mix(in srgb, currentColor 25%, transparent);
+}
+.kit-own-items-n {
+  flex: none;
+  min-width: 1.5rem;
+  padding-top: 0.4em;
+  font-size: var(--look-type-small-size, 14px);
+  font-variant-numeric: tabular-nums;
+  opacity: 0.8;
+}
+.kit-own-items-title {
+  margin: 0;
+}
+.kit-own-items-text {
+  margin: 0.35rem 0 0;
+}
+
+/* A button in the accent colour (a part's or an action's style), its words in what reads on it, on any background. */
+.kit-button.kit-button-accent,
+.kit-frame-dark .kit-button.kit-button-accent {
+  border-color: var(--look-button-border-colour, var(--look-accent, #c9a54a));
+  background: var(--look-accent, #c9a54a);
+  color: var(--look-on-accent, #111);
+}
+
+/* A column's parts at its foot or middle, when a column beside it is taller (words at the foot of a tall photo). */
+.kit-own-column-bottom {
+  align-self: stretch;
+  justify-content: flex-end;
+}
+.kit-own-column-middle {
+  align-self: stretch;
+  justify-content: center;
+}
+
+/* A part in the Look's other font (a sans title under serif headings); two classes, so a site's own heading class doesn't win. */
+.kit-own .kit-font-text {
+  font-family: var(--look-body-font, inherit);
+}
+.kit-own .kit-font-heading {
+  font-family: var(--look-heading-font, inherit);
+}
+
+/* A heading at the Look's largest sizes (Display, Page heading): its size, weight, spacing and line height, smaller on a narrow screen. */
+.kit-own .kit-type-display {
+  --s: var(--look-type-display-size, 74px);
+  font-size: clamp(calc(var(--s) * 0.5), calc(var(--s) * 0.3 + 4.4vw), var(--s));
+  font-weight: var(--look-type-display-weight, 600);
+  letter-spacing: var(--look-type-display-tracking, -0.01em);
+  line-height: var(--look-type-display-leading, 1.05);
+}
+.kit-own .kit-type-h1 {
+  --s: var(--look-type-h1-size, 58px);
+  font-size: clamp(calc(var(--s) * 0.62), calc(var(--s) * 0.41 + 3vw), var(--s));
+  font-weight: var(--look-type-h1-weight, 600);
+  letter-spacing: var(--look-type-h1-tracking, -0.01em);
+  line-height: var(--look-type-h1-leading, 1.1);
+}
+
+/* A column against the far edge: its parts to the right (the start on a phone, where columns stack). */
+@media (min-width: 701px) {
+  .kit-own-column-end {
+    align-items: flex-end;
+    text-align: end;
+  }
+}
+
+/* The business's own button styles (Look › Buttons): style n's values are --look-btn-n-* (lookVars). Three classes so a site's own button classes (.btn-primary on a brand band) don't win. */
+.kit-btn-1.kit-btn-1.kit-btn-1 {
+  border: var(--look-btn-1-bw) solid var(--look-btn-1-bc);
+  border-radius: var(--look-btn-1-radius);
+  background: var(--look-btn-1-bg);
+  color: var(--look-btn-1-fg);
+  padding: var(--look-btn-1-pad);
+  font-size: var(--look-btn-1-size);
+  font-weight: var(--look-btn-1-weight);
+  text-transform: var(--look-btn-1-case);
+  letter-spacing: var(--look-btn-1-track);
+}
+.kit-btn-2.kit-btn-2.kit-btn-2 {
+  border: var(--look-btn-2-bw) solid var(--look-btn-2-bc);
+  border-radius: var(--look-btn-2-radius);
+  background: var(--look-btn-2-bg);
+  color: var(--look-btn-2-fg);
+  padding: var(--look-btn-2-pad);
+  font-size: var(--look-btn-2-size);
+  font-weight: var(--look-btn-2-weight);
+  text-transform: var(--look-btn-2-case);
+  letter-spacing: var(--look-btn-2-track);
+}
+.kit-btn-3.kit-btn-3.kit-btn-3 {
+  border: var(--look-btn-3-bw) solid var(--look-btn-3-bc);
+  border-radius: var(--look-btn-3-radius);
+  background: var(--look-btn-3-bg);
+  color: var(--look-btn-3-fg);
+  padding: var(--look-btn-3-pad);
+  font-size: var(--look-btn-3-size);
+  font-weight: var(--look-btn-3-weight);
+  text-transform: var(--look-btn-3-case);
+  letter-spacing: var(--look-btn-3-track);
+}
+.kit-btn-4.kit-btn-4.kit-btn-4 {
+  border: var(--look-btn-4-bw) solid var(--look-btn-4-bc);
+  border-radius: var(--look-btn-4-radius);
+  background: var(--look-btn-4-bg);
+  color: var(--look-btn-4-fg);
+  padding: var(--look-btn-4-pad);
+  font-size: var(--look-btn-4-size);
+  font-weight: var(--look-btn-4-weight);
+  text-transform: var(--look-btn-4-case);
+  letter-spacing: var(--look-btn-4-track);
+}
+.kit-btn-5.kit-btn-5.kit-btn-5 {
+  border: var(--look-btn-5-bw) solid var(--look-btn-5-bc);
+  border-radius: var(--look-btn-5-radius);
+  background: var(--look-btn-5-bg);
+  color: var(--look-btn-5-fg);
+  padding: var(--look-btn-5-pad);
+  font-size: var(--look-btn-5-size);
+  font-weight: var(--look-btn-5-weight);
+  text-transform: var(--look-btn-5-case);
+  letter-spacing: var(--look-btn-5-track);
+}
+.kit-btn-6.kit-btn-6.kit-btn-6 {
+  border: var(--look-btn-6-bw) solid var(--look-btn-6-bc);
+  border-radius: var(--look-btn-6-radius);
+  background: var(--look-btn-6-bg);
+  color: var(--look-btn-6-fg);
+  padding: var(--look-btn-6-pad);
+  font-size: var(--look-btn-6-size);
+  font-weight: var(--look-btn-6-weight);
+  text-transform: var(--look-btn-6-case);
+  letter-spacing: var(--look-btn-6-track);
+}
+.kit-btn-7.kit-btn-7.kit-btn-7 {
+  border: var(--look-btn-7-bw) solid var(--look-btn-7-bc);
+  border-radius: var(--look-btn-7-radius);
+  background: var(--look-btn-7-bg);
+  color: var(--look-btn-7-fg);
+  padding: var(--look-btn-7-pad);
+  font-size: var(--look-btn-7-size);
+  font-weight: var(--look-btn-7-weight);
+  text-transform: var(--look-btn-7-case);
+  letter-spacing: var(--look-btn-7-track);
+}
+.kit-btn-8.kit-btn-8.kit-btn-8 {
+  border: var(--look-btn-8-bw) solid var(--look-btn-8-bc);
+  border-radius: var(--look-btn-8-radius);
+  background: var(--look-btn-8-bg);
+  color: var(--look-btn-8-fg);
+  padding: var(--look-btn-8-pad);
+  font-size: var(--look-btn-8-size);
+  font-weight: var(--look-btn-8-weight);
+  text-transform: var(--look-btn-8-case);
+  letter-spacing: var(--look-btn-8-track);
+}
+/* Each a touch darker under the pointer, whatever its colours. */
+.kit-btn:hover {
+  filter: brightness(0.94);
+}