/*
 * Vitrine: the page as a gallery wall. The frame of the page (header, phone menu, footer, announcement, breadcrumbs,
 * the page not found), the theme's own blocks (the openings, the split hero, the article body, the divider) and how the
 * stock sections are hung on the wall (by the block type includes/stitch.php writes on each). Everything inside a kit
 * block is in kit-theme.css.
 *
 * The idea: white walls, plenty of hanging space, every photograph in a frame with a mat and a soft shadow, the words
 * beside a work set like a museum's wall label, and one accent kept for the red dot a gallery puts beside a sold work.
 * The opening picture hangs from two cords under the rail (the header's lower edge).
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. theme-colour-pairs.test.mjs
 * reads every rule here that sets both a background and a colour and fails for any other pair: a website with its own
 * dark colours would get unreadable text. A dark palette is just other values for the same tokens: nothing here asks
 * whether the page is dark. Shadows are black in every palette, as a shadow on a wall is.
 *
 * Type comes from the layout: --font-heading, --font-body, --vitrine-heading-weight and --vitrine-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here.
 */

/* ------------------------------------------------------------------ Tokens */

/* :where(:root) has no weight: the layout's inline values, the palette and a website's own colours always win over these
   defaults, wherever this file is linked. A plain :root rule here would override them (Loom drew every website in its
   fallback colours that way until 4.x). */
:where(:root) {
  --vitrine-width: 76rem;
  --vitrine-gutter: clamp(1.25rem, 5vw, 3rem);
  --vitrine-bar: 4.75rem;
  --vitrine-radius: 0px;
  --vitrine-button-radius: 0px;
  --vitrine-heading-weight: 300;
  --vitrine-body-strong: 600;
  --vitrine-speed: 200ms;
  --vitrine-line: var(--border, #d9d6cf);
  /* The frame: a moulding in the main colour, a mat of the surface colour, the shadow on the wall. */
  --vitrine-frame: var(--primary, #1b1a19);
  --vitrine-frame-w: 0.3125rem;
  --vitrine-mat: clamp(0.75rem, 0.35rem + 1.6vw, 1.75rem);
  --vitrine-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 22px 38px -22px rgb(0 0 0 / 0.55);
  /* The cords an opening picture hangs from, and the space above it they hang in. */
  --vitrine-cord: color-mix(in srgb, var(--text-primary, #1b1a19) 32%, transparent);
  --vitrine-hang: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
}

@media (max-width: 39.99rem) {
  :where(:root) {
    --vitrine-frame-w: 0.25rem;
    --vitrine-bar: 4rem;
  }
}

/* ------------------------------------------------------------------ Base */

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

html {
  scroll-padding-top: calc(var(--vitrine-bar) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #f6f5f2);
  color: var(--text-primary, #1b1a19);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-ink, #a3241c);
  outline-offset: 3px;
}

.vitrine-main {
  display: block;
  min-height: 40vh;
}

.vitrine-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--primary, #1b1a19);
  color: var(--on-primary, #ffffff);
  font-weight: var(--vitrine-body-strong);
  text-decoration: none;
}

.vitrine-skip-link:focus {
  top: 1rem;
}

.vitrine-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* The red dot: what a gallery sticks beside the label of a sold work. The theme's one mark, small, in the accent. */
.vitrine-dot {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent, #b5281f);
}

/* ------------------------------------------------------------------ The frame */

/* A picture the theme hangs itself (the openings, the split hero, the article's pictures): the moulding, lit a little
   from above, the mat with the hairline of its bevel round the picture, and the shadow on the wall. kit-theme.css gives
   the kit's photographs the same frame. */
.vitrine-frame {
  position: relative;
  margin: 0;
  padding: var(--vitrine-mat);
  border: var(--vitrine-frame-w) solid var(--vitrine-frame);
  border-top-color: color-mix(in srgb, var(--vitrine-frame) 80%, #fff);
  border-left-color: color-mix(in srgb, var(--vitrine-frame) 90%, #fff);
  border-bottom-color: color-mix(in srgb, var(--vitrine-frame) 86%, #000);
  background: var(--surface, #ffffff);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.12), var(--vitrine-shadow);
}

.vitrine-frame__window {
  position: relative;
  overflow: hidden;
  background: var(--surface-alt, #ebe9e4);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary, #1b1a19) 16%, transparent);
}

.vitrine-frame__window > :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The cords. Two fine lines run up from the frame's top edge to the top of its section, where the header's lower edge
   (or the line under the breadcrumb) is the rail they hang from. The section clips them at its top, so they never cross
   anything above it. Where the frame stands under the words (a phone), the cords are short and end in two small hooks
   instead, so they never cross the heading. */
.vitrine-hang::before {
  content: "";
  position: absolute;
  right: 18%;
  bottom: calc(100% + var(--vitrine-frame-w));
  left: 18%;
  height: 200vh;
  border-inline: 1px solid var(--vitrine-cord);
  pointer-events: none;
}

.vitrine-hang--short::before {
  height: 1.75rem;
}

.vitrine-hang--short::after {
  content: "";
  position: absolute;
  right: calc(18% - 0.2rem);
  bottom: calc(100% + var(--vitrine-frame-w) + 1.55rem);
  left: calc(18% - 0.2rem);
  height: 0.4rem;
  background:
    radial-gradient(circle, var(--vitrine-frame) 0 0.18rem, transparent 0.2rem) left center / 0.4rem 0.4rem no-repeat,
    radial-gradient(circle, var(--vitrine-frame) 0 0.18rem, transparent 0.2rem) right center / 0.4rem 0.4rem no-repeat;
  pointer-events: none;
}

/* The split hero's frame stands under its words on a narrow screen: short cords on hooks there. */
@media (max-width: 55.99rem) {
  .vitrine-hero .vitrine-hang::before {
    height: 1.75rem;
  }

  .vitrine-hero .vitrine-hang::after {
    content: "";
    position: absolute;
    right: calc(18% - 0.2rem);
    bottom: calc(100% + var(--vitrine-frame-w) + 1.55rem);
    left: calc(18% - 0.2rem);
    height: 0.4rem;
    background:
      radial-gradient(circle, var(--vitrine-frame) 0 0.18rem, transparent 0.2rem) left center / 0.4rem 0.4rem no-repeat,
      radial-gradient(circle, var(--vitrine-frame) 0 0.18rem, transparent 0.2rem) right center / 0.4rem 0.4rem no-repeat;
    pointer-events: none;
  }
}

/* ------------------------------------------------------------------ Buttons */

/* One shape for every button the theme draws itself: square, the body face's strong weight in sentence case.
   kit-theme.css gives the kit's buttons the same corner, and the line of this theme in resilience.css
   (--chrome-button-radius) gives it to the cookie notice and the phone action bar: theme-chrome.test.mjs holds the
   three together. A label may take two lines; it never runs out of the button. */
.vitrine-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.75rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--vitrine-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  font-weight: var(--vitrine-body-strong);
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--vitrine-speed) ease, border-color var(--vitrine-speed) ease;
}

/* The label is a span that may shrink: a flex item's text otherwise keeps its longest word's width and runs out of the
   button and off a phone's screen. "anywhere" breaks only a word wider than the whole button, as the kit's buttons do. */
.vitrine-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vitrine-button--primary {
  background: var(--primary, #1b1a19);
  color: var(--on-primary, #ffffff);
}

.vitrine-button--primary:hover {
  background: var(--primary-alt, #3a3835);
}

.vitrine-button--accent {
  background: var(--accent, #b5281f);
  color: var(--on-accent, #ffffff);
}

/* The hover is a ring in the words' colour, not a lighter fill: a lighter fill would bring the words' contrast under
   what the colour contract promises for this pair. */
.vitrine-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #ffffff) 55%, transparent);
}

.vitrine-button--secondary {
  border-color: color-mix(in srgb, var(--text-primary, #1b1a19) 55%, transparent);
  background: transparent;
  color: var(--text-primary, #1b1a19);
}

.vitrine-button--secondary:hover {
  border-color: var(--text-primary, #1b1a19);
  background: color-mix(in srgb, var(--text-primary, #1b1a19) 6%, transparent);
}

.vitrine-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.875rem;
}

.vitrine-button--block {
  width: 100%;
}

/* ------------------------------------------------------------------ Announcement */

.vitrine-announcement {
  background: var(--primary, #1b1a19);
  color: var(--on-primary, #ffffff);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.vitrine-announcement[hidden] {
  display: none;
}

.vitrine-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  max-width: calc(var(--vitrine-width) + 2 * var(--vitrine-gutter));
  margin-inline: auto;
  padding: 0.55rem var(--vitrine-gutter);
  text-align: center;
}

.vitrine-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
}

.vitrine-announcement__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.vitrine-announcement a {
  font-weight: var(--vitrine-body-strong);
  text-underline-offset: 0.25em;
}

.vitrine-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.vitrine-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ------------------------------------------------------------------ Header */

/* The wall's own colour, with one fine line under it: the picture rail. It stays at the top. */
.vitrine-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--vitrine-line);
  background: var(--background, #f6f5f2);
  color: var(--text-primary, #1b1a19);
}

.vitrine-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  min-height: var(--vitrine-bar);
  max-width: calc(var(--vitrine-width) + 2 * var(--vitrine-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--vitrine-gutter);
}

.vitrine-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The centred kind: the name in the middle column, the actions in the right one, so a long name never runs under them. */
.vitrine-header--centered .vitrine-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

.vitrine-header--centered .vitrine-header__brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.vitrine-header--centered .vitrine-header__actions {
  grid-column: 3;
  justify-self: end;
}

.vitrine-header__rail {
  max-width: calc(var(--vitrine-width) + 2 * var(--vitrine-gutter));
  margin-inline: auto;
  padding: 0 var(--vitrine-gutter) 0.65rem;
}

.vitrine-header__rail .vitrine-nav {
  justify-content: center;
}

.vitrine-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.vitrine-header__phone {
  color: var(--text-secondary, #57544f);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.vitrine-header__phone:hover {
  color: var(--text-primary, #1b1a19);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.vitrine-header__slot {
  display: flex;
  align-items: center;
}

/* The website's name, in the heading face. Its line height and the small padding leave room for what letters carry
   above and below (the caron of Š, the tail of Ų, the descender of g): a tighter line in a box that clips cuts them
   (theme-clipped-marks.test.mjs, with "Šilėnų Žirgynas"). The shared rule (resilience.css) keeps a long name to two
   balanced lines and the shared script sets it smaller before a word would break; this rule only sets its look. */
.vitrine-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.vitrine-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines: a third line makes the bar taller than its controls
     (verify-theme-stress.mjs, header-rows). */
  max-width: min(27rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, serif);
  font-size: 1.5rem;
  font-weight: var(--vitrine-heading-weight);
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.vitrine-header--centered .vitrine-brand__name {
  font-size: 1.75rem;
}

/* On a wide screen the name is never clipped: a very long one takes a third line rather than losing its end. The
   shared two-line rule is a clamp, and a clamp needs a box that hides its overflow, which would cut the marks; so the
   name here is a plain block. */
.vitrine-header .vitrine-brand__name {
  display: block;
  overflow: visible;
}

/* On a phone the shared rule keeps the name to two lines (it wins there). The box clips a little past its edges, so a
   caron above the first line and a tail under the second stay whole, but not so far that the top of a third line
   shows under the second. */
@media (max-width: 39.99rem) {
  .vitrine-header .vitrine-brand__name,
  .vitrine-header--centered .vitrine-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.25rem;
  }
}

.vitrine-brand:has(.vitrine-brand__logo, .brand-logo-original, .logo-mask) .vitrine-brand__name {
  font-size: 1.1875rem;
}

.vitrine-header .vitrine-brand__logo,
.vitrine-header .brand-logo-original {
  max-height: 2.75rem;
  width: auto;
}

.vitrine-header .logo-mask {
  background-color: var(--text-primary, #1b1a19) !important;
}

/* ------------------------------------------------------------------ Topbar */

.vitrine-topbar {
  border-bottom: 1px solid var(--vitrine-line);
  background: var(--background, #f6f5f2);
  color: var(--text-secondary, #57544f);
  font-size: 0.8125rem;
}

.vitrine-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: calc(var(--vitrine-width) + 2 * var(--vitrine-gutter));
  min-height: 2.25rem;
  margin-inline: auto;
  padding: 0 var(--vitrine-gutter);
}

.vitrine-topbar__contact {
  display: flex;
  gap: 1.75rem;
  min-width: 0;
}

.vitrine-topbar a {
  color: inherit;
  text-decoration: none;
}

.vitrine-topbar a:hover {
  color: var(--text-primary, #1b1a19);
  text-decoration: underline;
}

.vitrine-topbar__social,
.vitrine-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.vitrine-topbar__social svg,
.vitrine-footer__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

@media (max-width: 63.99rem) {
  .vitrine-topbar {
    display: none;
  }
}

/* ------------------------------------------------------------------ Navigation */

.vitrine-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.35rem;
  min-width: 0;
}

.vitrine-header--simple .vitrine-nav,
.vitrine-header--topbar .vitrine-nav {
  margin-left: auto;
}

/* A label is allowed to wrap: resilience.js counts a wrapped label as a crowded menu and folds it into the menu button.
   Without scripts nothing folds, and a label kept on one line would run off the screen instead. */
.vitrine-nav__item {
  position: relative;
  min-width: 0;
}

.vitrine-nav__item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  color: var(--text-secondary, #57544f);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--vitrine-speed) ease;
}

.vitrine-nav__item > a:hover,
.vitrine-nav__item--parent:focus-within > a,
.vitrine-nav__item.is-current > a {
  color: var(--text-primary, #1b1a19);
}

/* The page being shown carries the red dot under its name. */
.vitrine-nav__item.is-current > a::after {
  content: "";
  position: absolute;
  bottom: -0.05rem;
  left: 50%;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent, #b5281f);
  transform: translateX(-50%);
}

.vitrine-nav__item--parent.is-current > a::after {
  left: calc(50% - 0.5rem);
}

.vitrine-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.vitrine-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: 1px solid var(--vitrine-line);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1b1a19);
  box-shadow: 0 18px 34px -18px rgb(0 0 0 / 0.4);
  visibility: hidden;
  opacity: 0;
}

.vitrine-nav__item--parent:is(:hover, :focus-within) > .vitrine-nav__children {
  visibility: visible;
  opacity: 1;
}

.vitrine-nav__children a {
  padding: 0.55rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.vitrine-nav__children a:hover {
  background: var(--surface-alt, #ebe9e4);
}

/* The menu button: two lines that turn into a cross. Hidden on a wide screen unless resilience.js folds the menu into
   it (theme-nav-compact on #site-header, whose shared rules show it). */
.vitrine-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--vitrine-line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.vitrine-menu-button:hover {
  border-color: currentColor;
}

.vitrine-menu-button__lines {
  display: grid;
  gap: 0.36rem;
  width: 1.15rem;
}

.vitrine-menu-button__lines i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--vitrine-speed) ease, opacity var(--vitrine-speed) ease;
}

.vitrine-menu-button__lines i:nth-child(2) {
  display: none;
}

.vitrine-menu-button[aria-expanded="true"] .vitrine-menu-button__lines i:nth-child(1) {
  transform: translateY(calc((0.36rem + 1.5px) / 2)) rotate(45deg);
}

.vitrine-menu-button[aria-expanded="true"] .vitrine-menu-button__lines i:nth-child(3) {
  transform: translateY(calc((0.36rem + 1.5px) / -2)) rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A panel under the bar with every page in the heading face. It scrolls inside itself when the pages are many, so the
   last one is always reachable. */
.vitrine-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  /* Under the whole header, whatever its height (a top line, a name on two lines): theme.js measures it
     (--vitrine-head). With the bar's own height here, the foot of a long menu lay under the window's edge and its last
     link could not be reached (verify-theme-stress.mjs, menu-unreachable). */
  max-height: calc(100dvh - var(--vitrine-head, var(--vitrine-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--vitrine-line);
  background: var(--background, #f6f5f2);
  color: var(--text-primary, #1b1a19);
  box-shadow: 0 28px 40px -28px rgb(0 0 0 / 0.45);
}

.vitrine-drawer[hidden] {
  display: none;
}

.vitrine-drawer__inner {
  display: grid;
  gap: 1.5rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.75rem var(--vitrine-gutter) 2rem;
}

.vitrine-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.vitrine-drawer__item {
  border-bottom: 1px solid var(--vitrine-line);
}

/* A page name in the heading face. data-fit-text (includes/chrome.php) lets the shared script set a long single word
   smaller instead of breaking it. */
.vitrine-drawer__link {
  display: block;
  padding: 0.8rem 0;
  font-family: var(--font-heading, serif);
  font-size: 1.625rem;
  font-weight: var(--vitrine-heading-weight);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-decoration: none;
}

.vitrine-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.9rem 0.1rem;
}

.vitrine-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #57544f);
  text-decoration: none;
}

.vitrine-drawer__footer {
  display: grid;
  gap: 0.6rem;
}

.vitrine-drawer__contact {
  width: fit-content;
  color: var(--text-secondary, #57544f);
  text-decoration: none;
}

/* Below the desktop width the menu, the phone, the button and the slot move into the phone menu. */
@media (max-width: 63.99rem) {
  .vitrine-nav,
  .vitrine-header__rail,
  .vitrine-header__phone,
  .vitrine-header__cta,
  .vitrine-header__slot {
    display: none;
  }

  .vitrine-menu-button {
    display: inline-flex;
  }

  .vitrine-header--centered .vitrine-header__inner {
    display: flex;
  }
}

/* A phone menu left open while the window grows to a desktop is put away, unless the bar is folded. */
@media (min-width: 64rem) {
  #site-header:not(.theme-nav-compact) .vitrine-drawer {
    display: none;
  }
}

@media (max-width: 79.99rem) {
  .vitrine-header--simple .vitrine-header__phone {
    display: none;
  }
}

/* ------------------------------------------------------------------ Breadcrumbs */

.vitrine-breadcrumbs {
  max-width: calc(var(--vitrine-width) + 2 * var(--vitrine-gutter));
  margin-inline: auto;
  padding: 1.25rem var(--vitrine-gutter) 0;
}

.vitrine-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #57544f);
  font-size: 0.8125rem;
  list-style: none;
}

.vitrine-breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.6rem;
  opacity: 0.55;
}

.vitrine-breadcrumbs a {
  text-decoration: none;
}

.vitrine-breadcrumbs a:hover {
  color: var(--text-primary, #1b1a19);
  text-decoration: underline;
}

.vitrine-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #1b1a19);
}

/* An opening under the breadcrumb hangs from a rail of its own: a line across the page at its top. */
.vitrine-breadcrumbs + :is(.vitrine-opening, .vitrine-hero:not(.vitrine-hero--words)) {
  margin-top: 1rem;
  border-top: 1px solid var(--vitrine-line);
}

/* ------------------------------------------------------------------ The opening (hero_fullwidth_image, hero_video) */

/* The page opens on one large work hung on the wall: the picture in its frame across the page, hanging from two cords
   under the rail, and its label beneath, the heading at the left and the lead line with the buttons at the right. The
   frame takes what the label leaves of the first screen. --vitrine-start is where the opening starts: theme.js measures
   it (under the header on the home page, under the header and the breadcrumb on any other); the estimate here stands in
   for the moment before. */
.vitrine-opening {
  --vitrine-start: calc(var(--vitrine-bar) + 1px);
  --vitrine-opening-h: clamp(13rem, calc(100svh - var(--vitrine-start) - 22.5rem), 46rem);
  position: relative;
  overflow: clip;
  padding: var(--vitrine-hang) var(--vitrine-gutter) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.vitrine-breadcrumbs + .vitrine-opening {
  --vitrine-start: calc(var(--vitrine-bar) + 4.5rem);
}

.vitrine-opening__inner {
  display: grid;
  gap: clamp(1.75rem, 1.25rem + 1.6vw, 3rem);
  max-width: var(--vitrine-width);
  margin-inline: auto;
}

.vitrine-opening__frame {
  position: relative;
}

.vitrine-opening__window {
  height: var(--vitrine-opening-h);
}

.vitrine-opening__window > :is(img, video) {
  position: absolute;
  inset: 0;
}

.vitrine-opening__label {
  display: grid;
  gap: 1.25rem clamp(2.5rem, 6vw, 6rem);
  min-width: 0;
}

@media (min-width: 56rem) {
  .vitrine-opening__label {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
  }

  .vitrine-opening__label--title-only {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here are chosen so that ordinary words fit at 320 px without it. */
.vitrine-opening__title,
.vitrine-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.9rem);
  font-weight: var(--vitrine-heading-weight);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.vitrine-opening__note {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  min-width: 0;
}

.vitrine-opening__lead,
.vitrine-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #57544f);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

.vitrine-opening__actions,
.vitrine-hero__actions,
.vitrine-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* On a narrow screen the label stands under the frame, and the frame takes what the stacked label leaves. */
@media (max-width: 55.99rem) {
  .vitrine-opening {
    --vitrine-opening-h: clamp(11rem, calc(100svh - var(--vitrine-start) - 26.5rem), 92vw);
  }
}

/* Without a picture the words open the page alone, larger, on the wall. */
.vitrine-opening--bare {
  padding-top: clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

.vitrine-opening--bare .vitrine-opening__label {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--vitrine-line);
}

/* ------------------------------------------------------------------ The split hero (hero_image_split) */

/* The wall text at the left and one work at the right, hung from the rail in an upright frame. On a narrow screen the
   words come first and the frame hangs under them from two short cords on hooks. */
.vitrine-hero {
  position: relative;
  overflow: clip;
  padding: var(--vitrine-hang) var(--vitrine-gutter) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.vitrine-hero__inner {
  display: grid;
  align-items: center;
  gap: clamp(2.75rem, 2rem + 3vw, 5rem);
  max-width: var(--vitrine-width);
  margin-inline: auto;
}

@media (min-width: 56rem) {
  .vitrine-hero:not(.vitrine-hero--words) .vitrine-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .vitrine-hero:not(.vitrine-hero--words) {
    padding-top: clamp(3.5rem, 2rem + 4vw, 6rem);
  }
}

.vitrine-hero__copy {
  display: grid;
  justify-items: start;
  gap: 1.4rem;
  min-width: 0;
}

.vitrine-hero--words {
  padding-top: clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

.vitrine-hero--words .vitrine-hero__copy {
  max-width: 50rem;
}

.vitrine-hero__points {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.vitrine-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.vitrine-hero__dot {
  margin-top: 0.6em;
}

.vitrine-hero__icon {
  margin-top: 0.22em;
  color: var(--accent-ink, #a3241c);
}

.vitrine-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary, #57544f);
  font-size: 0.9375rem;
}

.vitrine-stars {
  display: inline-flex;
  gap: 0.1rem;
}

.vitrine-stars svg {
  width: 1rem;
  height: 1rem;
  fill: color-mix(in srgb, var(--text-primary, #1b1a19) 20%, transparent);
}

.vitrine-stars svg.is-full {
  fill: var(--accent-ink, #a3241c);
}

.vitrine-hero__trustpilot {
  color: var(--accent-ink, #a3241c);
  font-weight: var(--vitrine-body-strong);
}

/* On a wide screen the upright frame is as tall as the first screen allows, so the whole work is in view. */
.vitrine-hero__media {
  width: 100%;
  max-width: min(34rem, calc((100svh - var(--vitrine-bar) - 13rem) * 0.8));
  min-width: min(100%, 18rem);
  justify-self: center;
}

.vitrine-hero__window {
  aspect-ratio: 4 / 5;
}

@media (max-width: 55.99rem) {
  .vitrine-hero__media {
    max-width: 30rem;
    margin-top: 1.25rem;
  }

  .vitrine-hero__window {
    aspect-ratio: 5 / 4;
  }
}

/* ------------------------------------------------------------------ Article body */

.vitrine-article {
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--vitrine-gutter);
}

.vitrine-article__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.vitrine-article__header {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--vitrine-line);
}

.vitrine-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  color: var(--text-secondary, #57544f);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.vitrine-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem);
  font-weight: var(--vitrine-heading-weight);
  letter-spacing: -0.018em;
  line-height: 1.1;
  text-wrap: balance;
}

.vitrine-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.vitrine-prose > :first-child {
  margin-top: 0;
}

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

.vitrine-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.35em;
}

.vitrine-prose :where(h2, h3, h4) {
  margin: 2em 0 0.6em;
  line-height: 1.25;
}

.vitrine-prose h2 {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
  font-weight: var(--vitrine-heading-weight);
  letter-spacing: -0.012em;
  line-height: 1.18;
}

.vitrine-prose :where(h3, h4) {
  font-family: var(--font-body, sans-serif);
  font-weight: var(--vitrine-body-strong);
}

.vitrine-prose h3 {
  font-size: 1.1875rem;
}

.vitrine-prose h4 {
  font-size: 1.0625rem;
}

.vitrine-prose a {
  color: var(--text-primary, #1b1a19);
  text-decoration-color: var(--accent-ink, #a3241c);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.vitrine-prose a:hover {
  color: var(--accent-ink, #a3241c);
}

/* A quotation in the heading face's italic, which every font palette loads. */
.vitrine-prose blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 1px solid var(--text-primary, #1b1a19);
  font-family: var(--font-heading, serif);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: var(--vitrine-heading-weight);
  line-height: 1.45;
  font-synthesis: none;
}

.vitrine-prose blockquote :where(p) {
  margin: 0;
}

/* A picture in an article hangs in the frame like every other. */
.vitrine-prose img {
  display: block;
  padding: var(--vitrine-mat);
  border: var(--vitrine-frame-w) solid var(--vitrine-frame);
  border-top-color: color-mix(in srgb, var(--vitrine-frame) 80%, #fff);
  border-bottom-color: color-mix(in srgb, var(--vitrine-frame) 86%, #000);
  background: var(--surface, #ffffff);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.12), var(--vitrine-shadow);
}

.vitrine-prose figure img {
  margin-bottom: 0.9rem;
}

/* A caption is a wall label: small, at the left, under the frame. */
.vitrine-prose figcaption {
  color: var(--text-secondary, #57544f);
  font-size: 0.875rem;
  line-height: 1.5;
}

.vitrine-prose :where(th, td) {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--vitrine-line);
  text-align: left;
}

/* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited value. */
.vitrine-prose table {
  font-variant-numeric: lining-nums tabular-nums;
}

.vitrine-prose pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--surface-alt, #ebe9e4);
}

.vitrine-prose hr {
  width: 3rem;
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--text-primary, #1b1a19);
}

/* ------------------------------------------------------------------ Divider block */

.vitrine-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: calc(var(--vitrine-width) + 2 * var(--vitrine-gutter));
  margin-inline: auto;
  padding: clamp(1.75rem, 3vw, 3rem) var(--vitrine-gutter);
}

.vitrine-divider__line {
  width: 100%;
  border-top: 1px solid var(--vitrine-line);
}

.vitrine-divider--dashed .vitrine-divider__line {
  border-top-style: dashed;
}

.vitrine-divider--dotted span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--vitrine-line);
}

.vitrine-divider--dotted span:nth-child(2) {
  background: var(--accent, #b5281f);
}

/* ------------------------------------------------------------------ Stock sections on the wall */

/* The kit draws most section headings centred. Vitrine hangs its stock sections like a catalogue: the heading and its
   lead line at the left, the works under them. Only the stock blocks named here are set so (a module's section keeps
   what its module asked for, cms/THEME_DEVELOPMENT.md, section 7); an invitation and the figures stay centred. */
:is([data-block="service_cards"], [data-block="feature_list"], [data-block="testimonials"], [data-block="image_gallery"],
  [data-block="portfolio_showcase"], [data-block="team_grid"], [data-block="process_steps"], [data-block="pricing_table"],
  [data-block="price_list"], [data-block="faq"], [data-block="child_pages"], [data-block="timeline"],
  [data-block="recent_posts"], [data-block="related_posts"], [data-block="blog_listing"], [data-block="before_after"],
  [data-block="location_cards"], [data-block="trust_badges"], [data-block="accreditations"], [data-block="service_area"],
  [data-block="video_embed"], [data-block="audio_player"], [data-block="embed"], [data-block="map_embed"]) > .kit-section__inner > .kit-stack > .kit-heading-group {
  align-self: stretch;
  text-align: start;
}

:is([data-block="service_cards"], [data-block="feature_list"], [data-block="testimonials"], [data-block="image_gallery"],
  [data-block="portfolio_showcase"], [data-block="team_grid"], [data-block="process_steps"], [data-block="pricing_table"],
  [data-block="price_list"], [data-block="faq"], [data-block="child_pages"], [data-block="timeline"],
  [data-block="recent_posts"], [data-block="related_posts"], [data-block="blog_listing"], [data-block="before_after"],
  [data-block="location_cards"], [data-block="trust_badges"], [data-block="accreditations"], [data-block="service_area"],
  [data-block="video_embed"], [data-block="audio_player"], [data-block="embed"], [data-block="map_embed"]) > .kit-section__inner > .kit-stack > .kit-heading-group .kit-eyebrow {
  justify-content: flex-start;
}

/* The lead line stands at the left under its heading, whatever the stack does with the rest. */
:is([data-block="service_cards"], [data-block="feature_list"], [data-block="testimonials"], [data-block="image_gallery"],
  [data-block="portfolio_showcase"], [data-block="team_grid"], [data-block="process_steps"], [data-block="pricing_table"],
  [data-block="price_list"], [data-block="faq"], [data-block="child_pages"], [data-block="timeline"],
  [data-block="recent_posts"], [data-block="related_posts"], [data-block="blog_listing"], [data-block="before_after"],
  [data-block="location_cards"], [data-block="trust_badges"], [data-block="accreditations"], [data-block="service_area"],
  [data-block="video_embed"], [data-block="audio_player"], [data-block="embed"], [data-block="map_embed"]) > .kit-section__inner > .kit-stack > .kit-text--lead {
  align-self: flex-start;
  max-width: 40rem;
  text-align: start;
}

/* A gallery is hung on one line with room between the frames. */
[data-block="image_gallery"] .kit-grid {
  --kit-gap: clamp(1.25rem, 0.75rem + 2vw, 3rem);
  align-items: center;
}

[data-block="image_gallery"] .kit-picture.kit-fit--cover {
  --vitrine-mat: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
}

/* A feature is an entry in the catalogue: a hairline over it, its name, a few lines. */
[data-block="feature_list"] .kit-features > .kit-stack {
  padding-top: 1.25rem;
  border-top: 1px solid var(--kit-line-strong);
}

/* Quotations hang on the wall without a plate: a hairline over each, the words in the heading face's italic, the
   name as a label under them. */
[data-block="testimonials"] .kit-card.kit-card--surface {
  border: 0;
  border-top: 1px solid var(--kit-line-strong);
  background: transparent;
  box-shadow: none;
}

[data-block="testimonials"] .kit-card.kit-card--surface > .kit-card__content {
  padding: 1.5rem 0 0;
}

/* A team is a row of miniatures: oval portraits with the names under them, no plates. */
[data-block="team_grid"] .kit-card.kit-card--surface {
  border: 0;
  background: transparent;
  box-shadow: none;
}

[data-block="team_grid"] .kit-card.kit-card--surface > .kit-card__content {
  padding-inline: 0;
}

/* A plan's list reads as text, not as a row of names. The recommended plan's plate has a dark edge. */
[data-block="pricing_table"] .kit-list .kit-list-item__title {
  font-weight: 400;
}

[data-block="pricing_table"] .kit-card.kit-card--surface {
  border-color: var(--kit-text);
}

/* A date on a timeline is written like the date on a wall label: the heading face's italic, in ordinary case. */
[data-block="timeline"] .kit-card__eyebrow {
  color: var(--kit-text);
  font-family: var(--font-heading, serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: var(--vitrine-heading-weight);
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  font-synthesis: none;
}

[data-block="timeline"] .kit-card__eyebrow::before {
  display: none;
}

/* The invitation with a picture, and the slideshow, hang on the wall too: inset from the window's edges in the
   moulding, with the shadow under them. The slideshow's slides sit in a mat. */
[data-block="cta_section"].kit-section--image,
[data-block="hero_slider"].kit-slideshow {
  width: calc(100% - 2 * var(--vitrine-gutter));
  max-width: var(--vitrine-width);
  margin: clamp(3rem, 2rem + 4vw, 6rem) auto;
  border: var(--vitrine-frame-w) solid var(--vitrine-frame);
  border-top-color: color-mix(in srgb, var(--vitrine-frame) 80%, #fff);
  border-bottom-color: color-mix(in srgb, var(--vitrine-frame) 86%, #000);
  box-shadow: var(--vitrine-shadow);
}

[data-block="hero_slider"].kit-slideshow {
  margin-top: var(--vitrine-hang);
  padding: var(--vitrine-mat);
  background: var(--surface, #ffffff);
}

/* The invitation band in the main colour: its heading in the heading face. */
[data-block="cta_banner"] .kit-heading--3 {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  font-weight: var(--vitrine-heading-weight);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ------------------------------------------------------------------ Footer */

/* The footer closes the page like the last page of a catalogue: the tinted wall, the name in the heading face, the
   pages and the address in small columns, the small print under a hairline. The same pair of colours in every palette
   and with a website's own colours, so it reads everywhere without a rule of its own for dark palettes. */
.vitrine-footer {
  border-top: 1px solid var(--vitrine-line);
  background: var(--surface-alt, #ebe9e4);
  color: var(--text-primary, #1b1a19);
}

.vitrine-footer__inner {
  max-width: calc(var(--vitrine-width) + 2 * var(--vitrine-gutter));
  margin-inline: auto;
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--vitrine-gutter) 1.75rem;
}

.vitrine-footer--minimal .vitrine-footer__inner {
  padding-block: 1.75rem;
}

.vitrine-footer__brand {
  display: inline-flex;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.vitrine-footer .vitrine-brand__name {
  max-width: 100%;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.2;
}

.vitrine-footer--minimal .vitrine-brand__name {
  font-size: 1.375rem;
}

.vitrine-footer .vitrine-brand__logo,
.vitrine-footer .brand-logo-original {
  max-height: 3rem;
  width: auto;
}

.vitrine-footer .logo-mask {
  background-color: var(--text-primary, #1b1a19) !important;
}

.vitrine-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--vitrine-line);
}

.vitrine-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  font-weight: var(--vitrine-heading-weight);
  letter-spacing: -0.018em;
  line-height: 1.1;
  text-wrap: balance;
}

/* Two to six columns, each at least a readable width; more rows where the screen is narrow. The name and its words take
   the first, wider column. */
.vitrine-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2.25rem 3rem;
}

@media (min-width: 64rem) {
  .vitrine-footer__grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(11rem, 1fr));
  }
}

.vitrine-footer__about {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.9rem;
}

.vitrine-footer__tagline,
.vitrine-footer__contact p:not(.vitrine-footer__title),
.vitrine-footer__copyright {
  max-width: 30rem;
  margin: 0;
  color: var(--text-secondary, #57544f);
  font-size: 0.9375rem;
}

/* A column's title is a small label: spaced capitals after the red dot. */
.vitrine-footer__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  font-weight: var(--vitrine-body-strong);
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.vitrine-footer__title::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent, #b5281f);
}

.vitrine-footer__links,
.vitrine-footer__contact {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  font-style: normal;
}

.vitrine-footer__links a,
.vitrine-footer__contact a,
.vitrine-footer__legal a,
.vitrine-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: var(--text-secondary, #57544f);
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

.vitrine-footer__links a:hover,
.vitrine-footer__contact a:hover,
.vitrine-footer__legal a:hover,
.vitrine-footer__inline a:hover {
  color: var(--text-primary, #1b1a19);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.vitrine-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--vitrine-line);
  color: inherit;
}

.vitrine-footer__social a:hover {
  border-color: currentColor;
}

.vitrine-footer__bottom,
.vitrine-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.vitrine-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--vitrine-line);
}

.vitrine-footer__bottom .vitrine-footer__copyright {
  font-size: 0.8125rem;
}

.vitrine-footer__legal,
.vitrine-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.vitrine-footer__legal a {
  font-size: 0.8125rem;
}

.vitrine-footer--minimal .vitrine-footer__legal {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------------ Page not found */

/* An empty frame on the wall, the way a museum marks a work that is away: the frame and its mat round a bare patch of
   wall, the number as its label. */
.vitrine-not-found {
  padding: clamp(3.5rem, 2.5rem + 5vw, 7rem) var(--vitrine-gutter);
}

.vitrine-not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

.vitrine-not-found__frame {
  width: min(15rem, 70vw);
  margin-bottom: 1.25rem;
}

.vitrine-not-found__frame .vitrine-frame__window {
  aspect-ratio: 4 / 5;
  background: var(--background, #f6f5f2);
}

.vitrine-not-found__number {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--text-secondary, #57544f);
  font-size: 0.8125rem;
  font-weight: var(--vitrine-body-strong);
  letter-spacing: 0.14em;
}

.vitrine-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem);
  font-weight: var(--vitrine-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}

.vitrine-not-found p {
  margin: 0;
  color: var(--text-secondary, #57544f);
}

.vitrine-not-found .pgs-not-found-links a {
  color: var(--text-secondary, #57544f);
  font-size: 0.9375rem;
  text-decoration-color: var(--vitrine-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.vitrine-not-found .pgs-not-found-links a:hover {
  color: var(--text-primary, #1b1a19);
  text-decoration-color: var(--accent-ink, #a3241c);
}

/* ------------------------------------------------------------------ Form thanks */

.vitrine-form-success {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 0;
}

.vitrine-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: 1.75rem;
  font-weight: var(--vitrine-heading-weight);
  line-height: 1.2;
}

.vitrine-form-success p {
  margin: 0;
  color: var(--text-secondary, #57544f);
}

/* ------------------------------------------------------------------ The phone action bar */

/* The shared bar (resilience.css) on the wall's colour, with the theme's button. */
body .theme-action-bar {
  border-top: 1px solid var(--vitrine-line);
  background: var(--background, #f6f5f2);
}

/* ------------------------------------------------------------------ Without scripts, and with less motion */

/* Without scripts the menu button does nothing, so it is hidden and the phone menu is a plain list under the bar on a
   phone: every page stays reachable (verify-theme-browser.mjs --chrome --no-js). */
@media (scripting: none) {
  .vitrine-menu-button {
    display: none !important;
  }

  .vitrine-drawer[hidden] {
    position: static;
    display: block;
    max-height: none;
    box-shadow: none;
  }
}

@media (scripting: none) and (min-width: 64rem) {
  .vitrine-drawer[hidden] {
    display: none;
  }
}

/* Nothing in this theme moves for a visitor who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}