/*
 * Lumen: light-filled, modern and expensive, like the launch page of a premium product. The page is bright and calm;
 * headings are very large and set tight; photographs stand on soft pools of tinted light; panes of frosted glass and
 * white sheets are layered over it with real depth (a fine edge, a highlight along the top, and a long soft shadow).
 *
 * This file is the frame: the floating glass header and its phone menu, the footer panel, the announcement, the
 * breadcrumbs, the page not found, and the blocks the theme draws itself (the stage opening of hero_fullwidth_image and
 * hero_video, the split hero, the article body, the divider). Everything inside a kit block is in kit-theme.css.
 *
 * 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. Glass is the surface
 * colour let a little through; the words on it are the page's own, and the browser check (verify-theme-readability.mjs)
 * measures what is painted beneath them.
 *
 * Shadows and the highlight on a glass edge are the only colours of the theme's own: --lumen-ink is the page's text
 * colour on a light page and black on a dark one, --lumen-shine a white line that is bright on light glass and faint on
 * dark glass. Both follow the palette's color-scheme (a dark palette and a website's own dark colours set it), so
 * nothing here asks whether the page is dark.
 *
 * Type comes from the layout: --font-heading, --font-body, --lumen-heading-weight and --lumen-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. */
:where(:root) {
  --lumen-width: 74rem;
  --lumen-wide: 86rem;
  --lumen-gutter: clamp(1rem, 4vw, 2.5rem);
  /* How far the floating parts (the header, the panels, the footer) stand in from the window's edges. */
  --lumen-edge: clamp(0.5rem, 1.6vw, 1.25rem);
  --lumen-float: clamp(0.5rem, 1.2vw, 0.875rem);
  --lumen-bar: 3.5rem;
  --lumen-radius: 1.5rem;
  --lumen-radius-lg: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  --lumen-capsule-radius: 1.75rem;
  --lumen-button-radius: 999px;
  --lumen-heading-weight: 600;
  --lumen-body-strong: 600;
  --lumen-speed: 240ms;
  --lumen-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --lumen-line: var(--border, #e1e3ea);
  --lumen-hair: color-mix(in srgb, var(--text-primary, #16171b) 9%, transparent);
  --lumen-ink: #0b0d12;
  --lumen-shine: rgb(255 255 255 / 0.7);
  --lumen-glass: color-mix(in srgb, var(--surface, #ffffff) 80%, transparent);
  --lumen-glass-strong: color-mix(in srgb, var(--surface, #ffffff) 90%, transparent);
  --lumen-light: color-mix(in srgb, var(--accent, #3a5cf0) 22%, transparent);
  --lumen-shadow-1:
    0 1px 1px color-mix(in srgb, var(--lumen-ink) 4%, transparent),
    0 6px 14px -8px color-mix(in srgb, var(--lumen-ink) 14%, transparent),
    0 24px 48px -28px color-mix(in srgb, var(--lumen-ink) 24%, transparent);
  --lumen-shadow-2:
    0 2px 4px color-mix(in srgb, var(--lumen-ink) 5%, transparent),
    0 16px 30px -16px color-mix(in srgb, var(--lumen-ink) 20%, transparent),
    0 48px 80px -40px color-mix(in srgb, var(--lumen-ink) 34%, transparent);
  --lumen-shadow-stage:
    0 2px 6px color-mix(in srgb, var(--lumen-ink) 6%, transparent),
    0 30px 60px -30px color-mix(in srgb, var(--lumen-ink) 30%, transparent),
    0 80px 120px -60px color-mix(in srgb, var(--lumen-ink) 38%, transparent);
}

@supports (color: light-dark(#000, #fff)) {
  :where(:root) {
    --lumen-ink: light-dark(var(--text-primary, #16171b), #000000);
    --lumen-shine: light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.08));
  }
}

/* Large headings are set tight, each rule with its own amount (the fallback in var(--lumen-track-display, ...)). A fine
   serif (the Serene and Gallery font palettes) is set only a little tight: its hairlines touch sooner than a grotesque's
   strokes. The layout writes the heading face's name on <body>. */
:is(.lumen-face--noto-serif-display, .lumen-face--instrument-serif) {
  --lumen-track-display: -0.012em;
  --lumen-track-title: -0.006em;
}

:is(.lumen-face--noto-serif-display, .lumen-face--instrument-serif) .kit-root {
  --kit-heading-tracking: -0.01em;
}

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

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

html {
  scroll-padding-top: calc(var(--lumen-head, 4.5rem) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #fafafc);
  color: var(--text-primary, #16171b);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
}

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

::selection {
  background: color-mix(in srgb, var(--accent, #3a5cf0) 22%, transparent);
}

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

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

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

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

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

/* A pill. The main one is the brand colour, solid; the second is a pane of glass with a fine edge in the words' colour.
   kit-theme.css gives the kit's buttons the same shape, 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. */
.lumen-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--lumen-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: var(--lumen-body-strong);
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--lumen-speed) ease, border-color var(--lumen-speed) ease, box-shadow var(--lumen-speed) ease, transform var(--lumen-speed) var(--lumen-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. */
.lumen-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lumen-button:active {
  transform: translateY(1px);
}

.lumen-button--primary {
  background: var(--primary, #16171b);
  color: var(--on-primary, #ffffff);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-primary, #ffffff) 16%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--lumen-ink) 60%, transparent);
}

.lumen-button--primary:hover {
  background: var(--primary-alt, #2e3037);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-primary, #ffffff) 16%, transparent), 0 16px 30px -14px color-mix(in srgb, var(--lumen-ink) 70%, transparent);
}

.lumen-button--secondary {
  border-color: color-mix(in srgb, var(--text-primary, #16171b) 16%, transparent);
  background: var(--lumen-glass);
  color: var(--text-primary, #16171b);
  box-shadow: inset 0 1px 0 var(--lumen-shine), 0 6px 18px -12px color-mix(in srgb, var(--lumen-ink) 40%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

.lumen-button--secondary:hover {
  border-color: color-mix(in srgb, var(--text-primary, #16171b) 34%, transparent);
  background: var(--lumen-glass-strong);
}

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

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

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

.lumen-announcement {
  background: var(--primary, #16171b);
  color: var(--on-primary, #ffffff);
  font-size: 0.8125rem;
  letter-spacing: 0.005em;
}

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

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

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

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

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

.lumen-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;
}

.lumen-announcement .announcement-dismiss:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-primary, #ffffff) 45%, transparent);
}

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

/* ------------------------------------------------------------------ Header: the glass capsule */

/* The header element itself is a clear strip that stays at the top of the window; the capsule inside it floats a
   little below the top and in from the sides, and only the capsule (and the open menu) take clicks, so the page under
   the clear strip stays usable. */
.lumen-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--lumen-float) var(--lumen-edge) 0;
  color: var(--text-primary, #16171b);
  pointer-events: none;
}

.lumen-header__capsule,
.lumen-drawer {
  pointer-events: auto;
}

/* Frosted glass: the surface colour let a little through, blurred, with a fine edge, a highlight along its top and a
   soft shadow that deepens once the page has scrolled (theme.js writes is-scrolled). */
.lumen-header__capsule {
  position: relative;
  max-width: calc(var(--lumen-width) + 3rem);
  margin-inline: auto;
  border: 1px solid var(--lumen-hair);
  border-radius: var(--lumen-capsule-radius);
  background: var(--lumen-glass);
  color: var(--text-primary, #16171b);
  box-shadow: inset 0 1px 0 var(--lumen-shine), 0 1px 2px color-mix(in srgb, var(--lumen-ink) 5%, transparent), 0 12px 32px -20px color-mix(in srgb, var(--lumen-ink) 30%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  transition: box-shadow var(--lumen-speed) ease, background-color var(--lumen-speed) ease;
}

.lumen-header.is-scrolled .lumen-header__capsule {
  box-shadow: inset 0 1px 0 var(--lumen-shine), 0 2px 4px color-mix(in srgb, var(--lumen-ink) 6%, transparent), 0 22px 44px -22px color-mix(in srgb, var(--lumen-ink) 42%, transparent);
}

/* A browser without glass gets a pane that is nearly solid, so the words on it read the same. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lumen-header__capsule,
  .lumen-drawer {
    background: var(--lumen-glass-strong);
  }
}

.lumen-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  min-height: var(--lumen-bar);
  padding: 0.375rem 0.375rem 0.375rem clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
}

.lumen-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;
   the menu is a second row of the capsule. */
.lumen-header--centered .lumen-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  padding-left: 0.375rem;
}

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

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

.lumen-header__rail {
  padding: 0 0.75rem 0.5rem;
}

.lumen-header__rail .lumen-nav {
  justify-content: center;
  margin-inline: auto;
}

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

.lumen-header__phone {
  color: inherit;
  font-size: 0.875rem;
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

.lumen-header__phone:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

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

/* The website's name. 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. */
.lumen-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.lumen-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(26rem, 44vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.125rem;
  font-weight: var(--lumen-heading-weight);
  letter-spacing: var(--lumen-track-title, -0.02em);
  line-height: 1.3;
}

/* 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. */
.lumen-header .lumen-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) {
  .lumen-header .lumen-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.0625rem;
  }
}

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

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

.lumen-header .logo-mask {
  background-color: var(--text-primary, #16171b) !important;
}

/* ------------------------------------------------------------------ Topbar: a slim first row of the capsule */

.lumen-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 2rem;
  margin: 0 1.25rem;
  border-bottom: 1px solid var(--lumen-hair);
  color: var(--text-secondary, #5c5f69);
  font-size: 0.8125rem;
}

.lumen-topbar__contact {
  display: flex;
  gap: 1.5rem;
  min-width: 0;
}

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

.lumen-topbar a:hover {
  color: var(--text-primary, #16171b);
}

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

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

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

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

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

.lumen-header--simple .lumen-nav,
.lumen-header--topbar .lumen-nav {
  margin-inline: auto;
}

.lumen-nav__item {
  position: relative;
  min-width: 0;
}

/* 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. */
.lumen-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--lumen-button-radius);
  color: inherit;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--lumen-speed) ease;
}

.lumen-nav__item > a:hover,
.lumen-nav__item--parent:focus-within > a {
  background: color-mix(in srgb, var(--text-primary, #16171b) 6%, transparent);
}

.lumen-nav__item.is-current > a {
  background: color-mix(in srgb, var(--text-primary, #16171b) 8%, transparent);
  font-weight: var(--lumen-body-strong);
}

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

/* A page's own pages on a white sheet under its name. Not glass: a pane inside the capsule cannot blur the page behind the
   capsule (a browser blurs only what lies inside the nearest frosted parent), so the page's words would show through. */
.lumen-nav__children {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  z-index: 60;
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.45rem;
  border: 1px solid var(--lumen-hair);
  border-radius: 1.25rem;
  background: var(--surface, #ffffff);
  color: var(--text-primary, #16171b);
  box-shadow: inset 0 1px 0 var(--lumen-shine), var(--lumen-shadow-2);
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -0.25rem);
  transition: opacity var(--lumen-speed) ease, transform var(--lumen-speed) var(--lumen-ease), visibility 0s linear var(--lumen-speed);
}

/* The gap between the name and its pane still counts as the item, so the pane does not close on the way down. */
.lumen-nav__children::before {
  content: "";
  position: absolute;
  inset: -0.7rem 0 100%;
}

.lumen-nav__item--parent:is(:hover, :focus-within) > .lumen-nav__children {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.lumen-nav__children a {
  padding: 0.55rem 0.85rem;
  border-radius: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.lumen-nav__children a:hover {
  background: color-mix(in srgb, var(--text-primary, #16171b) 6%, transparent);
}

/* The menu button: a round pane with 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). */
.lumen-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--lumen-hair);
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-primary, #16171b) 5%, transparent);
  color: inherit;
  cursor: pointer;
  transition: background-color var(--lumen-speed) ease, border-color var(--lumen-speed) ease;
}

.lumen-menu-button:hover {
  border-color: color-mix(in srgb, var(--text-primary, #16171b) 30%, transparent);
  background: color-mix(in srgb, var(--text-primary, #16171b) 9%, transparent);
}

.lumen-menu-button__lines {
  display: grid;
  gap: 0.32rem;
  width: 1.05rem;
}

.lumen-menu-button__lines i {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--lumen-speed) var(--lumen-ease);
}

.lumen-menu-button[aria-expanded="true"] .lumen-menu-button__lines i:nth-child(1) {
  transform: translateY(0.25rem) rotate(45deg);
}

.lumen-menu-button[aria-expanded="true"] .lumen-menu-button__lines i:nth-child(2) {
  transform: translateY(-0.25rem) rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu: a second pane of glass */

/* Under the capsule with a little air between, as wide as the capsule. It scrolls inside itself when the pages are
   many, so the last one is always reachable. */
.lumen-drawer {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: var(--lumen-edge);
  left: var(--lumen-edge);
  max-width: calc(var(--lumen-width) + 3rem);
  margin-inline: auto;
  /* Under the whole header, whatever its height (a name on two lines, a top row): theme.js measures it (--lumen-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(--lumen-head, 4.5rem) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--lumen-hair);
  border-radius: 1.5rem;
  background: var(--lumen-glass-strong);
  color: var(--text-primary, #16171b);
  box-shadow: inset 0 1px 0 var(--lumen-shine), var(--lumen-shadow-2);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
}

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

.lumen-drawer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.75rem clamp(1.25rem, 4vw, 2rem) 1.5rem;
}

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

.lumen-drawer__item + .lumen-drawer__item {
  border-top: 1px solid var(--lumen-hair);
}

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

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

.lumen-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #5c5f69);
  text-decoration: none;
}

.lumen-drawer__footer {
  display: grid;
  gap: 1rem;
  padding-top: 0.25rem;
}

.lumen-drawer__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.lumen-drawer__contact {
  width: fit-content;
  max-width: 100%;
  color: var(--text-secondary, #5c5f69);
  text-decoration: none;
  overflow-wrap: anywhere;
}

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

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

  .lumen-header--centered .lumen-header__inner {
    display: flex;
    padding-left: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
  }
}

/* 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) .lumen-drawer {
    display: none;
  }
}

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

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

.lumen-breadcrumbs {
  max-width: calc(var(--lumen-width) + 2 * var(--lumen-gutter));
  margin-inline: auto;
  padding: clamp(1rem, 0.75rem + 1vw, 1.75rem) var(--lumen-gutter) 0;
}

.lumen-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #5c5f69);
  font-size: 0.8125rem;
  list-style: none;
}

/* A small chevron between the steps, drawn with two fine lines. */
.lumen-breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin: 0 0.75em 0.12em 0.5em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: 0.5;
  transform: rotate(45deg);
}

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

.lumen-breadcrumbs a:hover {
  color: var(--text-primary, #16171b);
}

.lumen-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #16171b);
}

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

/* The words centred on the light page, then the picture wide and rounded on a pool of soft light. Sizes are chosen for
   ordinary words at every width from 320 px (a word of fourteen letters fits the heading there); the shared script is
   only the net for a longer one (cms/THEME_DEVELOPMENT.md, rule 1). */
.lumen-stage {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: clamp(2.5rem, 1.25rem + 4.5vw, 6rem) var(--lumen-gutter) clamp(3rem, 2rem + 4vw, 6rem);
  text-align: center;
}

/* Under a breadcrumb the opening starts closer: the header and the breadcrumb already stand above it. */
.lumen-main > .lumen-breadcrumbs + .lumen-stage {
  padding-top: clamp(1.75rem, 1rem + 3vw, 4rem);
}

.lumen-stage__words {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  max-width: 62rem;
  margin-inline: auto;
}

/* Without a picture the words have the light to themselves: a soft pool of it behind them. */
.lumen-stage--bare .lumen-stage__words::before {
  content: "";
  position: absolute;
  inset: -20% -10% -30%;
  z-index: -1;
  background: radial-gradient(50% 55% at 50% 55%, var(--lumen-light), transparent 72%);
  pointer-events: none;
}

.lumen-stage__title {
  max-width: 100%;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.25rem, 1rem + 5.2vw, 5.5rem);
  font-weight: var(--lumen-heading-weight);
  letter-spacing: var(--lumen-track-display, -0.028em);
  line-height: 1.08;
  text-wrap: balance;
}

.lumen-stage__lead {
  max-width: 40rem;
  margin: 0;
  color: var(--text-secondary, #5c5f69);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.lumen-stage__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* On a phone the buttons stand one under the other at one width, like an app's. */
@media (max-width: 39.99rem) {
  .lumen-stage__actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 20rem);
  }
}

.lumen-stage__floor {
  position: relative;
  max-width: var(--lumen-wide);
  margin: clamp(2.5rem, 1.75rem + 3vw, 4.5rem) auto 0;
}

/* The light the picture stands in: a wide soft glow of the accent behind its upper edge, and a fainter one under it. */
.lumen-stage__floor::before {
  content: "";
  position: absolute;
  inset: -18% -6% 30%;
  z-index: -1;
  background:
    radial-gradient(50% 50% at 50% 40%, var(--lumen-light), transparent 75%),
    radial-gradient(40% 30% at 50% 100%, color-mix(in srgb, var(--surface, #ffffff) 70%, transparent), transparent 80%);
  pointer-events: none;
}

.lumen-stage__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--lumen-radius-lg);
  background: var(--surface-alt, #eef0f4);
  box-shadow: var(--lumen-shadow-stage);
}

/* A fine rim of light round the picture, the way a glass edge catches it. */
.lumen-stage__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 1px 0 rgb(255 255 255 / 0.3);
  pointer-events: none;
}

@media (min-width: 40rem) {
  .lumen-stage__frame {
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 64rem) {
  .lumen-stage__frame {
    aspect-ratio: 16 / 9;
    max-height: 82vh;
  }
}

.lumen-stage__image,
.lumen-stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------ The split hero */

.lumen-split {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: clamp(2rem, 1rem + 4vw, 5rem) var(--lumen-gutter) clamp(3rem, 2rem + 4vw, 6rem);
}

.lumen-main > .lumen-breadcrumbs + .lumen-split {
  padding-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}

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

@media (min-width: 56rem) {
  .lumen-split:not(.lumen-split--words) .lumen-split__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  }
}

.lumen-split__copy {
  display: grid;
  justify-items: start;
  gap: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  min-width: 0;
}

.lumen-split--words .lumen-split__copy {
  position: relative;
  justify-items: center;
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}

.lumen-split--words .lumen-split__copy::before {
  content: "";
  position: absolute;
  inset: -25% -15% -20%;
  z-index: -1;
  background: radial-gradient(50% 55% at 50% 50%, var(--lumen-light), transparent 72%);
  pointer-events: none;
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here keep a word of fourteen letters whole in the words' column: one column on a phone, half the page from 896 px. */
.lumen-split__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.125rem, 1.2rem + 4vw, 3.5rem);
  font-weight: var(--lumen-heading-weight);
  letter-spacing: var(--lumen-track-display, -0.03em);
  line-height: 1.08;
  text-wrap: balance;
}

@media (min-width: 56rem) {
  .lumen-split__title {
    font-size: clamp(2.5rem, 0.6rem + 4vw, 4.5rem);
  }

  .lumen-split--words .lumen-split__title {
    font-size: clamp(2.75rem, 1rem + 4.4vw, 5rem);
  }
}

.lumen-split__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #5c5f69);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.lumen-split__points {
  display: grid;
  gap: 0.7rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.lumen-split__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.lumen-split__points li > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Each point's icon on a small round pane of the accent's light. */
.lumen-split__mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -0.1rem;
  border: 1px solid color-mix(in srgb, var(--accent, #3a5cf0) 22%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #3a5cf0) 10%, transparent);
  color: var(--accent-ink, #2f4fd6);
}

.lumen-split__icon {
  width: 0.95rem;
  height: 0.95rem;
}

.lumen-split__actions,
.lumen-split__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.lumen-split__actions {
  margin-top: 0.5rem;
}

.lumen-split--words :is(.lumen-split__actions, .lumen-split__badges) {
  justify-content: center;
}

.lumen-split__rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.55rem;
  min-width: 0;
  color: var(--text-secondary, #5c5f69);
  font-size: 0.875rem;
}

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

.lumen-stars svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: color-mix(in srgb, var(--text-primary, #16171b) 18%, transparent);
}

.lumen-stars svg.is-full {
  fill: var(--accent-ink, #2f4fd6);
}

.lumen-split__trustpilot {
  color: var(--accent-ink, #2f4fd6);
  font-size: 0.875rem;
  font-weight: var(--lumen-body-strong);
  text-underline-offset: 0.25em;
}

/* The picture floats on a lit plate: a tinted pane round it, lit by the accent from its upper corner, the picture lifted
   off it by a long soft shadow. */
.lumen-split__media {
  --lumen-plate: clamp(0.75rem, 0.25rem + 2.2vw, 2rem);
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: var(--lumen-plate);
}

.lumen-split__light {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--lumen-radius-lg) + var(--lumen-plate));
  background:
    radial-gradient(75% 60% at 90% 0%, var(--lumen-light), transparent 72%),
    linear-gradient(170deg, var(--surface-alt, #eef0f4), color-mix(in srgb, var(--surface-alt, #eef0f4) 45%, var(--background, #fafafc)));
  box-shadow: inset 0 1px 0 var(--lumen-shine), inset 0 0 0 1px color-mix(in srgb, var(--text-primary, #16171b) 5%, transparent);
}

.lumen-split__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--lumen-radius-lg);
  background: var(--surface-alt, #eef0f4);
  box-shadow: var(--lumen-shadow-stage);
}

.lumen-split__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 1px 0 rgb(255 255 255 / 0.3);
  pointer-events: none;
}

@media (min-width: 56rem) {
  .lumen-split__frame {
    aspect-ratio: 4 / 5;
  }
}

.lumen-split__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The review badges on a chip of frosted glass, laid over the picture's lower corner. */
.lumen-split__media .lumen-split__badges {
  position: absolute;
  bottom: calc(var(--lumen-plate) + clamp(0.75rem, 2vw, 1.5rem));
  left: calc(var(--lumen-plate) * 0.35);
  max-width: calc(100% - var(--lumen-plate));
  padding: 0.65rem 1rem;
  border: 1px solid var(--lumen-hair);
  border-radius: 1rem;
  background: var(--lumen-glass-strong);
  color: var(--text-primary, #16171b);
  box-shadow: inset 0 1px 0 var(--lumen-shine), var(--lumen-shadow-2);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}

.lumen-split__media .lumen-split__rating {
  color: var(--text-primary, #16171b);
}

@media (max-width: 39.99rem) {
  .lumen-split__media .lumen-split__badges {
    gap: 0.2rem 0.75rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.85rem;
  }

  .lumen-split__media :is(.lumen-split__rating, .lumen-split__trustpilot) {
    font-size: 0.8125rem;
  }
}


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

.lumen-article {
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--lumen-gutter);
}

.lumen-main > .lumen-breadcrumbs + .lumen-article {
  padding-top: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
}

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

.lumen-article__header {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.lumen-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: var(--accent-ink, #2f4fd6);
  font-size: 0.875rem;
  font-weight: var(--lumen-body-strong);
}

.lumen-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.125rem, 1.3rem + 3vw, 3.75rem);
  font-weight: var(--lumen-heading-weight);
  letter-spacing: var(--lumen-track-display, -0.03em);
  line-height: 1.1;
  text-wrap: balance;
}

.lumen-prose {
  font-size: 1.125rem;
  line-height: 1.75;
}

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

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

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

.lumen-prose :where(h2, h3, h4) {
  margin: 1.9em 0 0.55em;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--lumen-heading-weight);
  letter-spacing: var(--lumen-track-title, -0.02em);
  line-height: 1.2;
  text-wrap: balance;
}

.lumen-prose h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
}

.lumen-prose h3 {
  font-size: 1.35rem;
}

.lumen-prose h4 {
  font-size: 1.125rem;
}

.lumen-prose a {
  color: var(--accent-ink, #2f4fd6);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

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

.lumen-prose blockquote {
  margin-inline: 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--lumen-hair);
  border-radius: var(--lumen-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #16171b);
  font-family: var(--font-heading, sans-serif);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 var(--lumen-shine), var(--lumen-shadow-1);
}

.lumen-prose img {
  display: block;
  border-radius: var(--lumen-radius);
  box-shadow: var(--lumen-shadow-1);
}

.lumen-prose figcaption {
  margin-top: 0.6rem;
  color: var(--text-secondary, #5c5f69);
  font-size: 0.875rem;
}

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

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

.lumen-prose pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface-alt, #eef0f4);
  font-size: 0.9375rem;
}

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

/* A fine line that fades out at both ends, with a small point of light at its middle. */
.lumen-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: calc(var(--lumen-width) + 2 * var(--lumen-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--lumen-gutter);
}

.lumen-divider__line {
  position: relative;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lumen-line) 18%, var(--lumen-line) 82%, transparent);
}

.lumen-divider--line .lumen-divider__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent, #3a5cf0);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #3a5cf0) 16%, transparent), 0 0 18px 4px color-mix(in srgb, var(--accent, #3a5cf0) 30%, transparent);
  transform: translate(-50%, -50%);
}

.lumen-divider--dashed .lumen-divider__line {
  background: repeating-linear-gradient(90deg, var(--lumen-line) 0 8px, transparent 8px 16px);
}

.lumen-divider--dotted span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-primary, #16171b) 25%, transparent);
}

.lumen-divider--dotted span:nth-child(2) {
  background: var(--accent, #3a5cf0);
}

/* ------------------------------------------------------------------ Footer: a lit panel at the foot of the page */

.lumen-footer {
  padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--lumen-edge) var(--lumen-edge);
}

/* The footer is the last white sheet laid on the page, with the theme's depth and a soft light from above its middle:
   after a tinted panel it still reads as the page's foot, not as one more section. */
.lumen-footer__panel {
  position: relative;
  isolation: isolate;
  max-width: 88rem;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--lumen-hair);
  border-radius: var(--lumen-radius-lg);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #16171b);
  box-shadow: inset 0 1px 0 var(--lumen-shine), var(--lumen-shadow-1);
}

.lumen-footer__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 70%;
  background: radial-gradient(45% 60% at 50% 0%, color-mix(in srgb, var(--accent, #3a5cf0) 9%, transparent), transparent 75%);
  pointer-events: none;
}

.lumen-footer__inner {
  max-width: calc(var(--lumen-width) + 2 * var(--lumen-gutter));
  margin-inline: auto;
  padding: clamp(2.5rem, 1.75rem + 3vw, 4.5rem) var(--lumen-gutter) 1.5rem;
}

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

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

.lumen-footer .lumen-brand__name {
  max-width: 100%;
  font-size: 1.25rem;
}

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

.lumen-footer .logo-mask {
  background-color: var(--text-primary, #16171b) !important;
}

/* The large footer's invitation: the theme's very large, calm heading, centred, with the one button under it. */
.lumen-footer__closing {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--lumen-hair);
  text-align: center;
}

.lumen-footer__invite {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  font-weight: var(--lumen-heading-weight);
  letter-spacing: var(--lumen-track-display, -0.03em);
  line-height: 1.08;
  text-wrap: balance;
}

/* Two to six columns, each at least a readable width; more rows where the screen is narrow. */
.lumen-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2rem 2.5rem;
}

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

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

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

.lumen-footer__copyright {
  font-size: 0.8125rem;
}

.lumen-footer__title {
  margin: 0 0 0.85rem;
  color: var(--text-primary, #16171b);
  font-size: 0.8125rem;
  font-weight: var(--lumen-body-strong);
  line-height: 1.4;
}

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

.lumen-footer__links a,
.lumen-footer__contact a,
.lumen-footer__legal a,
.lumen-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: var(--text-secondary, #5c5f69);
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--lumen-speed) ease;
}

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

.lumen-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--lumen-hair);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface, #ffffff) 60%, transparent);
  color: inherit;
  transition: border-color var(--lumen-speed) ease, background-color var(--lumen-speed) ease;
}

.lumen-footer__social a:hover {
  border-color: color-mix(in srgb, var(--text-primary, #16171b) 35%, transparent);
  background: var(--surface, #ffffff);
}

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

.lumen-footer__bottom {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--lumen-hair);
}

.lumen-footer--minimal .lumen-footer__bottom {
  margin-top: 1.25rem;
}

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

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

/* The footer's large name, when a website switches it on (config.footer_wordmark): the shared look, in a faint shade of
   the words' colour, so it reads as light printed into the panel. */
.lumen-footer .theme-footer-wordmark {
  margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  color: color-mix(in srgb, var(--text-primary, #16171b) 14%, transparent);
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--lumen-heading-weight);
  letter-spacing: var(--lumen-track-display, -0.045em);
}

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

.lumen-not-found {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: clamp(4rem, 9vw, 8rem) var(--lumen-gutter);
  text-align: center;
}

.lumen-not-found__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  max-width: 38rem;
  margin-inline: auto;
}

.lumen-not-found__inner::before {
  content: "";
  position: absolute;
  inset: -30% -25% 20%;
  z-index: -1;
  background: radial-gradient(45% 50% at 50% 40%, var(--lumen-light), transparent 72%);
  pointer-events: none;
}

/* The number on a pane of glass, the one piece of the page that floats. */
.lumen-not-found__number {
  margin: 0 0 0.5rem;
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--lumen-hair);
  border-radius: var(--lumen-button-radius);
  background: var(--lumen-glass);
  color: var(--accent-ink, #2f4fd6);
  font-size: 0.9375rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--lumen-body-strong);
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 var(--lumen-shine), var(--lumen-shadow-1);
}

.lumen-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
  font-weight: var(--lumen-heading-weight);
  letter-spacing: var(--lumen-track-display, -0.03em);
  line-height: 1.08;
  text-wrap: balance;
}

.lumen-not-found p {
  margin: 0;
  color: var(--text-secondary, #5c5f69);
}

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

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

.lumen-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.5rem;
  font-weight: var(--lumen-heading-weight);
  letter-spacing: var(--lumen-track-title, -0.02em);
  line-height: 1.25;
}

.lumen-form-success p {
  margin: 0;
  color: var(--text-secondary, #5c5f69);
}

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

/* The shared bar (resilience.css) as a pane of glass along the foot of a phone's window. */
body .theme-action-bar {
  border-top: 1px solid var(--lumen-hair);
  background: var(--lumen-glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}

/* ------------------------------------------------------------------ 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 capsule on a
   phone: every page stays reachable (verify-theme-browser.mjs --chrome --no-js). The header then scrolls with the page,
   or the list would stay over it. */
@media (scripting: none) {
  .lumen-header {
    position: relative;
  }

  .lumen-menu-button {
    display: none !important;
  }

  .lumen-drawer[hidden] {
    position: static;
    display: block;
    max-height: none;
    margin-top: 0.5rem;
  }
}

@media (scripting: none) and (min-width: 64rem) {
  .lumen-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;
  }
}