:root{--accent:#1f3a6b;--on-accent:#ffffff;--accent-text:#1f3a6b;--soft:#e5e8ec;--button:#1f3a6b;--on-button:#ffffff}
@media (prefers-color-scheme:dark){:root{--accent-text:#7a8aa6;--soft:#13181f;--button:#7a8aa6;--on-button:#111111}}
@font-face{font-family:"STIX Two Text";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/stix-two-text-600.woff2") format("woff2")}
/* The sites' stylesheet: one for the three themes (fields, market, studio), driven by custom
   properties; the site's colours come first, computed by the renderer (style.rs). Phone first,
   system fonts only, no script. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, "Bitstream Charter", "Noto Serif", Georgia, serif;
  --display: Didot, "Bodoni 72", "Bodoni MT", "Noto Serif Display", "Iowan Old Style", Georgia, serif;
  --paper: #fbf8f3;
  --surface: #ffffff;
  --ink: #24201b;
  --muted: #5d554c;
  --line: #e6ddd0;
  --foot: #2a2420;
  --foot-ink: #f4eee6;
  --heading: var(--serif);
  --heading-weight: 600;
  --heading-spacing: -0.01em;
  --radius: 18px;
  --radius-sm: 10px;
  --radius-button: 999px;
  --shadow: 0 1px 2px rgb(40 30 20 / 6%), 0 8px 24px rgb(40 30 20 / 8%);
  --gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  --section: clamp(3rem, 2rem + 4vw, 6rem);
}

.theme-codex {
  --paper: #fbfbfa;
  --surface: #ffffff;
  --ink: #15181d;
  --muted: #4a515c;
  --line: #dcdfe4;
  --foot: #15181d;
  --foot-ink: #e9ebee;
  --heading: "STIX Two Text", var(--serif);
  --heading-weight: 600;
  --heading-spacing: 0em;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-button: 6px;
  --shadow: none;
}

@media (prefers-color-scheme: dark) {
  .theme-codex {
    color-scheme: dark;
    --paper: #121417;
    --surface: #181b1f;
    --ink: #e9ebee;
    --muted: #a9b0ba;
    --line: #30353d;
    --foot: #0c0e10;
    --foot-ink: #e9ebee;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.theme-codex {
  font-variant-numeric: lining-nums;
}

main {
  flex: 1;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-spacing);
  line-height: 1.15;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.8rem);
}

h2 {
  font-size: clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem);
}

h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
}

.skip:focus {
  top: 1rem;
}

.wrap {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.narrow {
  width: min(100% - 2rem, 44rem);
}

/* A comfortable line length, aligned with the page's title. */
.measure {
  max-width: 44rem;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.prose li {
  margin-bottom: 0.3em;
}

.prose li::marker {
  color: var(--accent-text);
}

/* Header, menu and languages */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

/* On a phone: the name and the languages, the menu on a row of its own that scrolls sideways;
   wider: all three on one row. */
.header-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  min-height: 4rem;
}

.header-in .menu {
  order: 3;
  flex-basis: 100%;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.brand-logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.brand-name {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: var(--heading-spacing);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.langs ul,
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.langs ul {
  gap: 0.15rem;
}

.langs a {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.langs a[aria-current] {
  color: var(--ink);
  background: var(--soft);
}

.menu ul {
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.6rem;
  margin-inline: -0.5rem;
}

.menu ul::-webkit-scrollbar {
  display: none;
}

.menu a {
  display: inline-block;
  white-space: nowrap;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-button);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.menu a:hover {
  background: var(--soft);
}

.menu a[aria-current] {
  background: var(--soft);
  color: var(--accent-text);
  font-weight: 650;
}

@media (min-width: 56rem) {
  .header-in {
    display: grid;
    grid-template-columns: auto 1fr auto;
    min-height: 4.75rem;
  }

  .header-in .menu {
    order: 0;
    justify-self: end;
  }

  .menu ul {
    padding-bottom: 0;
    margin-inline: 0;
  }
}

.theme-codex .site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.theme-codex .menu a,
.theme-codex .langs a {
  font-weight: 600;
}

.theme-codex .menu a[aria-current] {
  font-weight: 600;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--button);
  color: var(--on-button);
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.button:hover {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
}

.theme-codex .button {
  font-weight: 600;
}

/* Blocks */

.block {
  padding-block: var(--section);
}

.block + .block {
  padding-top: 0;
}

.block.soft,
.block + .block.soft {
  padding-top: var(--section);
  background: var(--soft);
}

.block.soft + .block {
  padding-top: var(--section);
}

.block-title {
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.page-head {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}

.page-head h1 {
  margin: 0;
}

.page-head + .block:not(.soft) {
  padding-top: 0;
}

/* Hero */

.hero {
  padding-block: clamp(2rem, 1rem + 4vw, 5.5rem);
  background: var(--soft);
}

.hero-in {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.hero-title {
  font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.2rem);
}

.hero-lead {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  color: var(--muted);
  max-width: 36rem;
}

.hero-actions {
  margin: 1.75rem 0 0;
}

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (min-width: 56rem) {
  .hero.with-image .hero-in {
    grid-template-columns: 1.05fr 1fr;
  }
}

.theme-codex .hero {
  background: none;
  border-bottom: 1px solid var(--line);
}

.theme-codex .hero-title {
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem);
  line-height: 1.08;
}

/* Text and pictures */

.image-block figure {
  margin: 0;
}

.image-block img {
  width: 100%;
  max-height: 80vh;
  object-fit: cover;
  border-radius: var(--radius);
}

figcaption {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.gallery-grid,
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
}

.gallery-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.gallery-grid figure {
  margin: 0;
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Cards: features and products */

/* Cards in a row are as tall as the row's tallest, whatever their words (the extra room is their
   own bottom padding, the content stays at the top), with or without a picture. */
.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: stretch;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  box-shadow: var(--shadow);
}

.soft .card {
  border-color: transparent;
}

.feature h3::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 0.25rem;
  margin-bottom: 1rem;
  border-radius: 2px;
  background: var(--accent);
}

.product {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.product img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.product-body {
  padding: 1.25rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.product-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.product h3 {
  margin: 0;
}

.product h3 a {
  color: inherit;
  text-decoration: none;
}

.price {
  margin: 0;
  font-weight: 700;
  color: var(--accent-text);
  white-space: nowrap;
}

.product .prose {
  color: var(--muted);
}

.product.linked {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product.linked:hover {
  transform: translateY(-2px);
}

.product.linked:hover h3 a {
  text-decoration: underline;
}

/* The whole card follows its name's link; links inside its text stay their own. */
.stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.product.linked .prose a {
  position: relative;
  z-index: 1;
}

.theme-codex .card {
  border: 1px solid var(--line);
  box-shadow: none;
}

/* Quote */

.quote {
  margin: 0;
  text-align: center;
}

.quote blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--heading);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.35;
  font-style: italic;
  letter-spacing: var(--heading-spacing);
}

.quote blockquote::before {
  content: "\201C";
  content: "\201C" / "";
  display: block;
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 0.8;
  color: var(--accent);
  font-style: normal;
}

.quote figcaption {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}

/* Call to action */

.cta-in {
  text-align: center;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.25rem, 1rem + 3vw, 4rem);
  border-radius: var(--radius);
  background: var(--soft);
}

.cta-in .prose {
  max-width: 38rem;
  margin: 0 auto 1.75rem;
  color: var(--muted);
}

/* In a centred block a list is one box, centred as a whole, its words beside its bullets or
   numbers: centring every line would leave the bullets at the edge of a wide list. */
.cta-in .prose :is(ul, ol),
.notice .prose :is(ul, ol),
.quote blockquote :is(ul, ol) {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: start;
}

/* Contact */

.contact-in {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
}

@media (min-width: 56rem) {
  .contact-in.with-form {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
  }
}

.contact-list {
  margin: 1.5rem 0;
  display: grid;
  gap: 1rem;
}

.contact-list div {
  display: grid;
  gap: 0.1rem;
}

.contact-list dt {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-list dd {
  margin: 0;
}

.map-link {
  font-weight: 600;
}

.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  box-shadow: var(--shadow);
}

.contact-form > :last-child {
  margin-bottom: 0;
}

.field {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.1rem;
}

.field label {
  font-weight: 600;
  font-size: 0.95rem;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #8a847c;
  border-color: color-mix(in srgb, var(--ink) 45%, var(--paper));
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  min-height: 2.9rem;
}

.field textarea {
  resize: vertical;
  min-height: 9rem;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 1px;
  border-color: var(--accent-text);
}

/* Robots fill every field; people never see this one. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* A notice: a page not found, a message sent */

.notice {
  padding-block: clamp(3rem, 2rem + 6vw, 8rem);
  text-align: center;
}

.notice .prose {
  color: var(--muted);
  font-size: 1.15rem;
  margin-bottom: 2rem;
}

/* Footer */

.site-footer {
  background: var(--foot);
  color: var(--foot-ink);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  font-size: 0.97rem;
}

.site-footer a {
  color: inherit;
}

.footer-in {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 48rem) {
  .footer-in {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.footer-name {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.footer-tagline,
.site-footer .prose {
  opacity: 0.85;
}

.site-footer address {
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

@media print {
  .site-header,
  .contact-form,
  .skip {
    display: none;
  }

  .block,
  .hero {
    padding-block: 1rem;
    background: none;
  }
}
/* layout: features covers */
/* Features as covers: a grid of typographic series covers (fields.css draws a cover), each with its
   words under it, two to a row on a phone and three from 48 rem. */
.features.layout-covers .covers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem var(--gap);
}

.features.layout-covers .covers > li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features.layout-covers .cv {
  display: block;
  width: 100%;
  max-width: 17rem;
  color: inherit;
  text-decoration: none;
}

.features.layout-covers .cv-cap {
  display: block;
  width: 100%;
  max-width: 17rem;
  margin-top: 0.8rem;
  text-align: center;
}

.features.layout-covers .cv-cap > span:not(.sr) {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--muted);
}

@media (min-width: 48rem) {
  .features.layout-covers .covers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem var(--gap);
  }
}
/* layout: features people */
/* People, two by two from the width two cards fit, each beside a round badge: their photo, or
   their initials on the accent (its own readable ink, 4.5 to 1 at least). */
.features.layout-people .cards {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .features.layout-people .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.features.layout-people .cards > .person {
  grid-row: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.features.layout-people .cards > .person h3 {
  margin-top: 0.15rem;
  font-size: 1.3rem;
}

.features.layout-people .person h3::before {
  display: none;
}

.features.layout-people .person-badge {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--heading);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  object-fit: cover;
}

/* layout: products list */
.products.layout-list .cards {
  grid-template-columns: 1fr;
  max-width: 56rem;
}

@media (min-width: 40rem) {
  .products.layout-list .product {
    flex-direction: row;
    align-items: stretch;
  }

  .products.layout-list .product img {
    width: min(38%, 16rem);
    flex-shrink: 0;
    aspect-ratio: 1;
    height: auto;
  }
}

/* layout: products strip */
/* Products as a strip: covers in one unboxed row, each with its name and a line under it. On a
   phone the row scrolls sideways (keeping its place cover by cover); from a computer's width the
   covers share the row. The block's button stands at the head, beside the title. */
.products.layout-strip.block {
  padding-block: var(--section);
}

.products.layout-strip .strip-head {
  display: grid;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.5rem;
}

.products.layout-strip .strip-head .block-title {
  margin-bottom: 0;
}

.products.layout-strip .strip-lede {
  margin-top: 0.5rem;
  max-width: 38rem;
  color: var(--muted);
}

.products.layout-strip .strip-lede p {
  margin: 0;
}

.products.layout-strip .strip-button {
  margin: 1.25rem 0 0;
}

.products.layout-strip .strip-head .strip-button {
  margin: 0;
}

.products.layout-strip .strip {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.products.layout-strip .strip li {
  flex: 0 0 clamp(8.5rem, 38vw, 11.5rem);
  scroll-snap-align: start;
}

.products.layout-strip .strip a,
.products.layout-strip .strip li > div {
  display: block;
  color: inherit;
  text-decoration: none;
}

.products.layout-strip .strip img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.products.layout-strip.fit-whole .strip img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

.products.layout-strip .strip .cap {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.products.layout-strip .strip a:hover .cap {
  text-decoration: underline;
}

.products.layout-strip .strip .sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (min-width: 56rem) {
  .products.layout-strip .strip {
    overflow: visible;
  }

  .products.layout-strip .strip li {
    flex: 1 1 0;
  }

  .products.layout-strip .strip-head {
    grid-template-columns: 1fr auto;
  }
}

/* The sign-up form of a newsletter block (docs/site.md « The newsletter »), in a site's
   stylesheet only when one of its pages has one. Its email field and button are the contact
   form's; the box to tick (a touch target of 24 pixels, as the design check asks) sits beside
   the words it stands for. */
.newsletter-form {
  margin-top: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  box-shadow: var(--shadow);
}

.newsletter-form > :last-child {
  margin-bottom: 0;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
}

.consent input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--accent-text);
}

.consent input:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
}

@media print {
  .newsletter-form {
    display: none;
  }
}
/* The small fields of the blocks (docs/site.md « Anchors, buttons and icons »), for a site one of
   whose blocks uses one. */

/* A block with an anchor keeps its top clear of a header that sticks. */
.anchored {
  scroll-margin-top: 5rem;
}

/* A hero's picture on the start side (the left, in a language read from the left) from the width
   the picture is beside the text. */
@media (min-width: 56rem) {
  .hero.side-start.with-image .hero-in {
    grid-template-columns: 1fr 1.05fr;
  }

  .hero.side-start .hero-media {
    order: -1;
  }
}

/* The buttons after the first are outlined, in the colour of the text around them. */
main .hero .button.secondary,
main .cta .button.secondary {
  margin-block: 0.25rem;
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* An icon on a card, in the readable accent. */
.card-icon {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--accent-text);
}

.feature h3 a {
  color: inherit;
  text-decoration: none;
}

.feature.linked {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feature.linked:hover {
  transform: translateY(-2px);
}

.feature.linked:hover h3 a {
  text-decoration: underline;
}

/* A kicker: the short line over a block's title, in the readable accent. On a band the theme
   colours (the accent, the ink, a photo behind), it takes the colour of the words around it. */
.kicker {
  margin: 0 0 0.7rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--accent-text);
}

.hero.layout-cover.with-image .kicker,
.theme-market .hero .kicker,
.theme-market .cta-in .kicker,
.theme-studio .cta-in .kicker {
  color: inherit;
}

/* A tag after an item's name, « Coming » or « New »: a small outlined label. */
.tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  vertical-align: 0.2em;
  white-space: nowrap;
  color: var(--accent-text);
}

/* Pictures kept whole, each in its own proportions: a gallery's, a product's (a book's cover). */
.gallery.fit-whole .gallery-grid {
  align-items: start;
}

.gallery.fit-whole .gallery-grid img,
.products.fit-whole .product > img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* As rows, the picture whole beside the words: on a phone, a smaller one (about 160 to 190 pixels)
   centred over them, never the 16 rem of a computer; at the start of the row on a computer. */
.products.layout-list.fit-whole .product > img {
  width: clamp(9rem, 52vw, 12rem);
  align-self: center;
  margin: 1.4rem 1.4rem 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

@media (min-width: 40rem) {
  .products.layout-list.fit-whole .product > img {
    width: min(38%, 16rem);
    margin: 1.4rem 0 1.4rem 1.4rem;
    align-self: flex-start;
  }
}

/* A call to action beside a picture or a card (`image`, `aside`): the text at the start of its
   line, not centred, and no band behind it. On a phone the picture is first, then the words; from
   a computer's width two columns, the second the picture or the card, on the end side by
   default and the start with `side = "start"`. Only the theme's tokens. */
.block.cta-split,
.block + .block.cta-split {
  padding-block: var(--section);
}

.cta-split + .cta-split,
.cta-split + .products.layout-strip,
.products.layout-strip + .cta-split {
  border-top: 1px solid var(--line);
}

.cta-cols {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.cta-text {
  text-align: start;
}

.cta-text h2 {
  margin: 0 0 0.75rem;
}

.cta-text .prose {
  max-width: 36rem;
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.cta-text .prose p {
  margin: 0 0 0.75rem;
}

.cta-text .actions {
  margin: 0;
}

.cta-text .actions .button {
  margin: 0.25rem 0.25rem 0.25rem 0;
}

.cta-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.cta-split.fit-whole .cta-media img {
  width: clamp(9rem, 52vw, 13rem);
  aspect-ratio: auto;
  object-fit: contain;
  margin-inline: auto;
  box-shadow: var(--shadow);
}

/* The card: Markdown on the soft tone. A line of bold alone is its question, a line of italics
   alone a small label over or under it. */
.cta-aside {
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  background: var(--soft);
  font-size: 0.95rem;
}

.cta-aside .prose {
  margin: 0;
  color: var(--ink);
}

.cta-aside .prose p {
  margin: 0 0 0.75rem;
}

.cta-aside .prose p:last-child {
  margin-bottom: 0;
}

.cta-aside .prose p > em:only-child {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.cta-aside .prose p > strong:only-child {
  font-family: var(--heading);
  font-size: 1.15rem;
}

@media (min-width: 56rem) {
  .cta-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  }

  .cta-start .cta-cols {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  }

  /* A picture comes first in the markup (first on a phone); on the end side it goes after. */
  .cta-end .cta-media {
    order: 1;
  }

  .cta-split.fit-whole.cta-start .cta-cols {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  }

  .cta-split.fit-whole.cta-end .cta-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  }

  .cta-split.fit-whole .cta-media img {
    width: 100%;
    max-width: 18rem;
  }
}

/* A plain quote: no slab, a thin rule above and below (`tone = "plain"`); a quote with a moving
   figure (`figure`) is a row of two: the quote on one side, the figure on the other. On a phone the
   figure is over the quote; from a computer's width the sides are the block's `side`, or, when it
   has none, alternate along the quotes that follow one another (render.rs). */
.block.quote-block.plain,
.block + .block.quote-block.plain {
  padding-block: var(--section);
  border-block: 1px solid var(--line);
}

.block.quote-block.plain + .block.quote-block.plain {
  border-top: 0;
}

.block.quote-block.plain + .block {
  padding-top: var(--section);
}

.block.quote-block.plain + .block.quote-block.plain {
  padding-top: var(--section);
}

.qrow-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.qrow .qrow-fig {
  order: -1;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 26rem;
}

.qrow .quote {
  text-align: start;
}

.qrow .quote blockquote {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
}

.qrow-cap {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

.qrow-cap a {
  color: inherit;
  text-decoration: none;
}

.qrow-cap a:hover {
  text-decoration: underline;
}

@media (min-width: 56rem) {
  .qrow-end .qrow-cols {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
  }

  .qrow-start .qrow-cols {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
  }

  .qrow-end .qrow-fig {
    order: 0;
    max-width: none;
  }

  .qrow-start .qrow-fig {
    max-width: none;
  }
}

/* A cover: the one typographic frame of a book and of a library section that has no picture of
   its own, 2:3, in the surface and soft tones, the accent for its lines. Sizes follow the
   cover's own width (container units), so it is the same cover in a strip and in a grid. */
.cover {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 2 / 3;
  background: linear-gradient(175deg, var(--surface) 0%, var(--soft) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.15s ease;
}

.cover.cover-picture {
  background: none;
}

.cover.cover-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover .c-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 9cqw 9cqw 8cqw;
}

.cover .c-in::before {
  content: "";
  position: absolute;
  inset: 3.2cqw;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 2px;
  pointer-events: none;
}

.cover .c-brand {
  font-family: var(--heading);
  font-weight: 600;
  font-size: max(1rem, 8.6cqw);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--accent-text);
  line-height: 1.1;
}

.cover .c-series {
  font-family: var(--sans);
  font-size: max(0.56rem, 2.9cqw);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2.4cqw;
}

.cover .c-badge {
  align-self: center;
  margin-top: 3.4cqw;
  padding: 1.5cqw 3.4cqw;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: max(0.58rem, 3cqw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: transparent;
}

.cover .c-badge.next {
  background: var(--accent);
  color: var(--on-accent);
}

.cover .c-motif {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding-block: 3cqw;
}

.cover .c-motif svg {
  width: min(46cqw, 100%);
  height: auto;
  max-height: 100%;
  color: var(--accent);
}

.cover .c-title {
  font-family: var(--heading);
  font-weight: 600;
  font-size: max(0.98rem, 7.6cqw);
  line-height: 1.16;
  text-wrap: balance;
}

.cover .c-desc {
  margin: 2.4cqw 0 0;
  min-height: 2.8em;
  font-size: max(0.78rem, 3.7cqw);
  line-height: 1.4;
  color: var(--muted);
  text-wrap: balance;
}

.cover .c-rule {
  height: 1.1cqw;
  margin: 4.6cqw 0 3.6cqw;
  border-block: 1px solid var(--accent);
  opacity: 0.8;
}

.cover.is-section .c-rule {
  margin-bottom: 0;
}

.cover .c-author {
  align-self: center;
  padding: 1.4cqw 3cqw;
  border: 1px solid var(--accent);
  font-family: var(--sans);
  font-size: max(0.56rem, 3cqw);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
}

a:hover > .cover,
a.cv:hover .cover {
  transform: translateY(-2px);
}
/* Moving figures (docs/site.md « Figures »), for a site one of whose pages has one: a figure is a
   picture of the site that moves by itself, drawn in the page. It reads the look's colours by
   these names; a look that names them keeps its own, else they follow the theme's. */
:where(:root) {
  --brand: var(--accent-text);
  --brand-soft: var(--soft);
  --hi: var(--accent);
  --ink-2: var(--muted);
  --surface-2: var(--soft);
  --card: var(--surface);
  --bg: var(--paper);
  --reading: var(--serif);
  --math: var(--serif);
}

.figure-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.figure-list.single {
  grid-template-columns: minmax(0, 44rem);
  justify-content: center;
}

.figure {
  margin: 0;
}

.figure-art {
  display: block;
  color: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}

.figure-art > span,
.figure-link {
  display: block;
}

.figure-art svg,
.figure-art img {
  display: block;
  width: 100%;
  height: auto;
}

.figure-link {
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
}

.figure-link:hover .figure-art,
.figure-link:focus-visible .figure-art {
  box-shadow: 0 0 0 2px var(--accent-text);
}

.figure-title {
  margin: 1rem 0 0.25rem;
  font-size: 1.2rem;
}

.figure-title a {
  color: inherit;
  text-decoration: none;
}

.figure-title a:hover {
  text-decoration: underline;
}

.figure-caption > :last-child {
  margin-bottom: 0;
}

.hero-media .figure-art {
  height: 100%;
}

/* The still twin stands in for the moving one where the visitor asks for less motion, and on paper.
   A figure without a twin has its CSS animation stopped on its first frame. */
.figure-still {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .figure-art.has-still > .figure-moving {
    display: none;
  }

  .figure-art.has-still > .figure-still {
    display: block !important;
  }

  .figure-art svg * {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .figure-art.has-still > .figure-moving {
    display: none;
  }

  .figure-art.has-still > .figure-still {
    display: block !important;
  }
}
/* chrome: menu icons */
/* An icon before an entry's name. */
.menu-icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-inline-end: 0.45rem;
  vertical-align: -0.2em;
}

/* chrome: menu fold */
/* On a phone, the menu behind a Menu button that opens it under the bar: a disclosure, with no
   script, that the keyboard and screen readers know. On a computer, the menu in the bar as ever
   (where a browser cannot show a closed disclosure's content, the button stays). */
.header-in > .menu-fold {
  margin-inline-start: auto;
}

.menu-fold > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid currentcolor;
  border-radius: var(--radius-button);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.menu-fold > summary::-webkit-details-marker {
  display: none;
}

.menu-fold > summary:hover,
.menu-fold[open] > summary {
  background: rgb(127 127 127 / 14%);
}

.fold-icon {
  flex: none;
}

.menu-fold[open] .fold-open,
.menu-fold:not([open]) .fold-close {
  display: none;
}

@media (max-width: 55.99rem) {
  /* One row on a phone, as on a computer, whenever the controls fit: the name, then the Menu button,
     the languages and the visitor's button. The name takes what is left, and when it does not fit
     it shortens to two lines in its own box (never below 8.5 rem, a logo and a few words), so the
     Menu button is never pushed under it. Controls that do not fit beside that (three languages and
     the visitor's button on a narrow phone) go to a second row, under the name, rather than
     squeeze it to a few letters; either way the rows keep the padding a computer's row has. */
  .header-in {
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding-block: 0.5rem;
    min-height: 4.75rem;
  }

  .header-in > .brand {
    flex: 1 1 8.5rem;
    min-width: 0;
  }

  .header-in > .brand .brand-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .header-in > .menu-fold,
  .header-in > .header-tools,
  .header-in > .langs {
    flex: none;
  }

  /* The panel's colours are the page's whether open or not: what a check reads is what shows. */
  .menu-fold > .menu {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 1;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    padding: 0.5rem 1rem 1rem;
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -22px rgb(0 0 0 / 45%);
  }

  .menu-fold .menu ul {
    flex-direction: column;
    gap: 0.15rem;
    overflow: visible;
    padding-bottom: 0;
    margin-inline: 0;
  }

  .site-header .menu-fold .menu a {
    display: block;
    padding: 0.7rem 0.9rem;
    white-space: normal;
    color: var(--ink);
  }

  .site-header .menu-fold .menu a:hover,
  .site-header .menu-fold .menu a[aria-current] {
    color: var(--accent-text);
    background: var(--soft);
  }

  /* Over a cover picture the bar is white on it; the open menu is on the page's own colours. */
  .part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .site-header .menu-fold .menu a {
    color: var(--ink);
  }

  .part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .site-header .menu-fold .menu a:hover,
  .part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .site-header .menu-fold .menu a[aria-current] {
    color: var(--accent-text);
    background: var(--soft);
  }
}

@media (min-width: 56rem) {
  .header-in > .menu-fold {
    order: 0;
    justify-self: end;
    margin-inline-start: 0;
  }

  .part-header-centered .header-in > .menu-fold {
    grid-area: menu;
    justify-self: center;
  }

  @supports selector(::details-content) {
    .menu-fold > summary {
      display: none;
    }

    .menu-fold::details-content {
      content-visibility: visible;
    }
  }
}

/* chrome: menu groups */
/* The menu's groups (docs/site.md « Groups »): a name with a chevron that opens a panel of pages,
   a disclosure, so with no script. On a computer, the panel under its name, over the page, in the
   look of the library's header; on a phone, behind the Menu button the group opens in place under
   its name, and in a menu with no button the panel runs under the header. */
.menu-group {
  display: flex;
  align-items: center;
  list-style: none;
}

.menu-more > summary {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-button);
  color: inherit;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.menu-more > summary::-webkit-details-marker {
  display: none;
}

.menu-more > summary:hover,
.menu-more[open] > summary {
  background: var(--soft);
}

.menu-more > summary[aria-current] {
  background: var(--soft);
  color: var(--accent-text);
  font-weight: 650;
}

.menu-caret {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-inline-start: 0.3rem;
}

.menu-more[open] > summary .menu-caret {
  transform: rotate(180deg);
}

/* A group with a page of its own: its name is that page's link, the chevron a button beside it. */
.menu-split > .menu-go {
  padding-inline-end: 0.2rem;
}

.menu-split > .menu-more > summary {
  padding-inline: 0.2rem 0.55rem;
}

.menu-split > .menu-more > summary .menu-caret {
  margin-inline-start: 0;
}

.menu-split.menu-lit {
  background: var(--soft);
  border-radius: var(--radius-button);
}

/* The panel: the page's own surface, its pages one under another. */
.menu .menu-panel {
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0.4rem;
  overflow: visible;
  list-style: none;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 32px -16px rgb(0 0 0 / 28%);
}

.site-header .menu .menu-panel li a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.6rem;
  padding: 0.4rem 0.6rem;
  white-space: normal;
  color: var(--ink);
  border-radius: var(--radius-sm);
}

.site-header .menu .menu-panel li a:hover,
.site-header .menu .menu-panel li a[aria-current] {
  background: var(--soft);
}

.site-header .menu .menu-panel li a[aria-current] {
  color: var(--accent-text);
}

.menu-chip {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-sm);
  background: var(--soft);
  color: var(--accent-text);
}

.menu-panel a:hover .menu-chip,
.menu-panel a[aria-current] .menu-chip {
  background: var(--surface);
}

.menu-chip .menu-icon {
  margin: 0;
  vertical-align: baseline;
}

.menu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu-title {
  line-height: 1.3;
}

.menu-desc {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
}

/* Over a cover picture the bar is white on it; a panel is on the page's own colours. */
.part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .site-header .menu .menu-panel li a {
  color: var(--ink);
}

.part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .site-header .menu .menu-panel li a:hover,
.part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .site-header .menu .menu-panel li a[aria-current] {
  color: var(--accent-text);
  background: var(--soft);
}

.part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .menu-more > summary:hover,
.part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .menu-more[open] > summary,
.part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .menu-more > summary[aria-current],
.part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .menu-split.menu-lit {
  color: #ffffff;
  background: rgb(255 255 255 / 18%);
}

/* On a computer: the panel under its name; a group in the menu's end opens toward its start. */
@media (min-width: 56rem) {
  .menu-grouped > ul {
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: visible;
  }

  .menu-group {
    position: relative;
  }

  .menu-group .menu-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    inset-inline-start: 0;
    width: max-content;
    min-width: 15rem;
    max-width: min(24rem, calc(100vw - 2rem));
  }

  .menu-group.menu-end .menu-panel {
    inset-inline: auto 0;
  }

  .menu-split.menu-lit .menu-go:hover,
  .menu-split.menu-lit .menu-more > summary:hover {
    background: rgb(127 127 127 / 14%);
  }
}

/* On a phone. A menu with no button: the panel under the whole header, from edge to edge. */
@media (max-width: 55.99rem) {
  .menu-group .menu-panel {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    border-radius: 0 0 var(--radius) var(--radius);
  }

  /* Behind the Menu button: each group a row of the menu, opening in place under its name. */
  .menu-fold .menu-group {
    display: block;
  }

  .menu-fold .menu-more > summary {
    display: flex;
    padding: 0.7rem 0.9rem;
    color: var(--ink);
  }

  .menu-fold .menu-more > summary .menu-caret {
    margin-inline-start: auto;
  }

  /* A group with a page of its own: its link, the chevron over the link's end, the panel under. */
  .menu-fold .menu-split {
    position: relative;
    display: flex;
    flex-wrap: wrap;
  }

  .menu-fold .menu-split > .menu-go {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    min-height: 3rem;
    padding-inline-end: 3.4rem;
  }

  .menu-fold .menu-split > .menu-more {
    flex: 1 1 100%;
  }

  .menu-fold .menu-split > .menu-more > summary {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    height: 3rem;
    padding-block: 0;
    padding-inline: 0.9rem;
  }

  .menu-fold .menu-more > summary:hover,
  .menu-fold .menu-more[open] > summary,
  .menu-fold .menu-more > summary[aria-current] {
    color: var(--accent-text);
    background: var(--soft);
  }

  .menu-fold .menu .menu-panel {
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0.1rem 0 0.35rem;
    padding: 0.1rem 0 0.1rem 0.9rem;
    overflow: visible;
    background: transparent;
    border: 0;
    border-inline-start: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
}

/* chrome: menu groups-codex */
.theme-codex .menu-more > summary {
  font-weight: 600;
}

.theme-codex .menu-more > summary[aria-current] {
  font-weight: 600;
}

/* chrome: footer tree */
/* The organisation's apps under the footer, as each of its apps shows them: the family's name
   over a card for each, hung from one line like a family tree on a computer, two by two on a
   tablet, one under the other on a phone; then, centred, the footer's last line. */
.footer-tree {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--foot-ink) 20%, transparent);
}

.tree-head {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tree {
  --n: 4;
  --gap: 0.9rem;
  position: relative;
  list-style: none;
  margin: 0;
  padding: var(--gap) 0 0;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--gap);
}

.tree[data-n="2"] {
  --n: 2;
}

.tree[data-n="3"] {
  --n: 3;
}

.tree::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - (var(--n) - 1) * var(--gap)) / (2 * var(--n)));
  right: calc((100% - (var(--n) - 1) * var(--gap)) / (2 * var(--n)));
  border-top: 1px solid color-mix(in srgb, var(--foot-ink) 30%, transparent);
}

.tree li {
  position: relative;
}

.tree li::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--gap));
  left: 50%;
  height: var(--gap);
  border-left: 1px solid color-mix(in srgb, var(--foot-ink) 30%, transparent);
}

.footer-tree .tree-card {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  height: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--foot-ink) 24%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--foot-ink) 5%, transparent);
  color: var(--foot-ink);
  text-decoration: none;
}

.footer-tree a.tree-card:hover {
  border-color: var(--foot-ink);
}

.tree-card b {
  font-family: var(--heading);
  font-size: 1.05rem;
  line-height: 1.25;
}

.tree-card .host {
  font-size: 0.85rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tree-card small {
  font-size: 0.85rem;
  opacity: 0.85;
}

.footer-tree .here .tree-card {
  border-color: var(--foot-ink);
  box-shadow: inset 0 0 0 1px var(--foot-ink);
}

.tree-card .you {
  margin-top: 0.35rem;
  font-weight: 700;
  opacity: 1;
}

.footer-tree .coming .tree-card {
  border-style: dashed;
  background: none;
}

.soon {
  justify-self: start;
  margin-top: 0.4rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--foot-ink) 45%, transparent);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.footer-legal {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--foot-ink) 20%, transparent);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 63.99rem) {
  .tree {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0;
  }

  .tree::before,
  .tree li::before {
    display: none;
  }
}

@media (max-width: 37.49rem) {
  .tree {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* chrome: menu labels */
/* A menu whose entries all have an icon, in a header too narrow for their names beside the site's:
   from the width where the menu is in the bar, the icons alone, up to the width where the names
   fit (the site's own bound, left out when they never do). Each name stays in the page for screen
   readers, out of sight, and is the entry's tooltip (its `title`); behind the phone's button the
   names show as ever. */
@media (min-width: 56rem) and (max-width: 72rem) {
  .menu-icons a {
    position: relative;
  }

  .menu-icons .menu-icon {
    margin-inline-end: 0;
  }

  .menu-icons .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

:root[data-theme=dark]{--accent-text:#7a8aa6;--soft:#13181f;--button:#7a8aa6;--on-button:#111111}
:root[data-theme=dark] .theme-codex{color-scheme:dark;--paper:#121417;--surface:#181b1f;--ink:#e9ebee;--muted:#a9b0ba;--line:#30353d;--foot:#0c0e10;--foot-ink:#e9ebee;}
:root[data-theme=light]{--accent-text:#1f3a6b;--soft:#e5e8ec;--button:#1f3a6b;--on-button:#ffffff}
:root[data-theme=light] .theme-codex{color-scheme:light;--paper:#fbfbfa;--surface:#ffffff;--ink:#15181d;--muted:#4a515c;--line:#dcdfe4;--foot:#15181d;--foot-ink:#e9ebee;}
/* chrome: visitor theme */
/* The visitor's light, dark or system choice, for a site with the builder's script and a theme
   with dark colours: beside the languages, a button whose icon is the choice, opening the three.
   It shows only once the script runs (it marks the page's root with the choice, data-pref). */
.header-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.theme-menu {
  position: relative;
  display: none;
}

:root[data-pref] .theme-menu {
  display: block;
}

.theme-open {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.theme-open:hover,
.theme-open[aria-expanded="true"] {
  background: var(--soft);
  color: var(--ink);
}

.theme-icon {
  display: none;
}

:root[data-pref="light"] .th-light,
:root[data-pref="dark"] .th-dark,
:root[data-pref="system"] .th-system {
  display: block;
}

.theme-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.4rem);
  z-index: 6;
  min-width: 11rem;
  padding: 0.35rem;
  display: grid;
  gap: 0.1rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 30px -22px rgb(0 0 0 / 45%);
}

.theme-list[hidden] {
  display: none;
}

.theme-list button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.theme-list button:hover,
.theme-list button:focus-visible {
  background: var(--soft);
}

.theme-list button[aria-checked="true"] {
  color: var(--accent-text);
}

.theme-tick {
  margin-inline-start: auto;
  visibility: hidden;
}

.theme-list button[aria-checked="true"] .theme-tick {
  visibility: visible;
}

.part-header-overlay:has(main > .hero.layout-cover.with-image:first-child) .theme-open {
  color: inherit;
}

@media (min-width: 56rem) {
  .part-header-centered .header-tools {
    grid-area: langs;
    justify-self: end;
  }
}

/* chrome: visitor figures */
/* A moving figure's button, in its corner, for a site with the builder's script: it pauses the
   figure where it is and plays it again. It shows only once the script runs, and never to a
   visitor who asks for less motion (the figure rests as its still) or on paper. A figure out of
   sight is paused too, by the script, without changing the visitor's choice. */
.figure-frame {
  position: relative;
}

.hero-media > .figure-frame {
  height: 100%;
}

.figure-play {
  position: absolute;
  inset-inline-end: 0.6rem;
  bottom: 0.6rem;
  z-index: 1;
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 12px -6px rgb(0 0 0 / 30%);
}

:root[data-pref] .figure-play {
  display: grid;
}

.figure-play:hover {
  color: var(--accent-text);
  border-color: currentcolor;
}

.figure-play .play-play,
.figure-frame[data-playing="false"] .play-pause {
  display: none;
}

.figure-frame[data-playing="false"] .play-play {
  display: block;
}

.figure-frame.paused svg,
.figure-frame.paused svg * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-pref] .figure-play {
    display: none;
  }
}

@media print {
  :root[data-pref] .figure-play {
    display: none;
  }
}