/*
 * The frame: header, phone menu, footer, announcement, breadcrumbs, the page not found, and the three blocks the theme
 * draws itself (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: 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.
 *
 * Type comes from the layout: --font-heading, --font-body, --nocturne-heading-weight and --nocturne-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) {
  --nocturne-width: 78rem;
  --nocturne-gutter: clamp(1rem, 4vw, 2rem);
  --nocturne-bar: 4.5rem;
  /* The whole header's height: the bar until theme.js has measured the header itself (a top line, a second row). */
  --nocturne-head: var(--nocturne-bar);
  --nocturne-radius: 0.5rem;
  --nocturne-button-radius: 0.375rem;
  --nocturne-heading-weight: 700;
  --nocturne-body-strong: 600;
  --nocturne-speed: 180ms;
  --nocturne-line: var(--border, #2c3038);
  /* Every condensed face at one width of capital (the table is under "Faces"). */
  --nocturne-scale: 1;
  /* Where the content's column begins, from the window's edge. */
  --nocturne-edge: max(var(--nocturne-gutter), (100% - var(--nocturne-width)) / 2);
  /* The room a section's ruler and number take above its heading. */
  --nocturne-rise: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

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

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

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

body {
  margin: 0;
  background: var(--background, #f7f6f3);
  color: var(--text-primary, #1c2228);
  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, #245a54);
  outline-offset: 3px;
}

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

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

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

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

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

/* One shape for every button the theme draws itself. 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. */
.nocturne-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  max-width: 100%;
  padding: 0.65rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--nocturne-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  font-weight: var(--nocturne-body-strong);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--nocturne-speed) ease, border-color var(--nocturne-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. */
.nocturne-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nocturne-button--primary {
  background: var(--primary, #25313b);
  color: var(--on-primary, #ffffff);
}

.nocturne-button--primary:hover {
  background: var(--primary-alt, #34424e);
}

.nocturne-button--accent {
  background: var(--accent, #2c6a63);
  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. */
.nocturne-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #ffffff) 55%, transparent);
}

.nocturne-button--secondary {
  border-color: var(--text-primary, #1c2228);
  background: transparent;
  color: var(--text-primary, #1c2228);
}

.nocturne-button--secondary:hover {
  background: color-mix(in srgb, var(--text-primary, #1c2228) 8%, transparent);
}

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

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

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

.nocturne-announcement {
  background: var(--primary, #25313b);
  color: var(--on-primary, #ffffff);
  font-size: 0.875rem;
}

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

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

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

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

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

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

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

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

/* A solid bar on the surface colour that stays at the top. The bar has one height for every kind; the centred kind adds
   a row for the menu. */
.nocturne-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--nocturne-line);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1c2228);
}

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

.nocturne-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. */
.nocturne-header--centered .nocturne-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

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

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

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

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

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

.nocturne-header__phone {
  color: inherit;
  font-size: 0.9375rem;
  font-weight: var(--nocturne-body-strong);
  text-decoration: none;
  white-space: nowrap;
}

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

.nocturne-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. */
.nocturne-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.nocturne-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, sans-serif);
  font-size: 1.25rem;
  font-weight: var(--nocturne-heading-weight);
  letter-spacing: -0.01em;
  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. */
.nocturne-header .nocturne-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) {
  .nocturne-header .nocturne-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.125rem;
  }
}

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

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

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

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

.nocturne-topbar {
  border-bottom: 1px solid var(--nocturne-line);
  background: var(--surface-alt, #eeece7);
  color: var(--text-secondary, #525a61);
  font-size: 0.8125rem;
}

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

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

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

.nocturne-topbar a:hover {
  text-decoration: underline;
}

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

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

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

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

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

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

.nocturne-nav__item {
  position: relative;
}

.nocturne-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--nocturne-button-radius);
  color: inherit;
  font-size: 0.9375rem;
  font-weight: var(--nocturne-body-strong);
  line-height: 1.3;
  text-decoration: none;
}

/* 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. */
.nocturne-nav__item {
  min-width: 0;
}

.nocturne-nav__item > a:hover,
.nocturne-nav__item--parent:focus-within > a {
  background: var(--surface-alt, #eeece7);
}

.nocturne-nav__item.is-current > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

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

.nocturne-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.4rem;
  border: 1px solid var(--nocturne-line);
  border-radius: var(--nocturne-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1c2228);
  box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--text-primary, #1c2228) 35%, transparent);
  visibility: hidden;
  opacity: 0;
}

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

.nocturne-nav__children a {
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--nocturne-radius) - 0.3rem);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

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

/* The menu button: three 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). */
.nocturne-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--nocturne-line);
  border-radius: var(--nocturne-button-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

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

.nocturne-menu-button__lines {
  display: grid;
  gap: 0.28rem;
  width: 1.15rem;
}

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

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

.nocturne-menu-button[aria-expanded="true"] .nocturne-menu-button__lines i:nth-child(2) {
  opacity: 0;
}

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

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

/* A panel under the bar with every page. It scrolls inside itself when the pages are many, so the last one is always
   reachable. */
.nocturne-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
     (--nocturne-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(--nocturne-head, var(--nocturne-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--nocturne-line);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1c2228);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--text-primary, #1c2228) 40%, transparent);
}

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

.nocturne-drawer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.5rem var(--nocturne-gutter) 1.5rem;
}

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

.nocturne-drawer__item {
  border-bottom: 1px solid var(--nocturne-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. */
.nocturne-drawer__link {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.25rem;
  font-weight: var(--nocturne-heading-weight);
  line-height: 1.3;
  text-decoration: none;
}

.nocturne-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.85rem 0.75rem;
}

.nocturne-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #525a61);
  text-decoration: none;
}

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

.nocturne-drawer__contact {
  width: fit-content;
  color: var(--text-secondary, #525a61);
  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) {
  .nocturne-nav,
  .nocturne-header__rail,
  .nocturne-header__phone,
  .nocturne-header__cta,
  .nocturne-header__slot {
    display: none;
  }

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

  .nocturne-header--centered .nocturne-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) .nocturne-drawer {
    display: none;
  }
}

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

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

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

.nocturne-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #525a61);
  font-size: 0.875rem;
  list-style: none;
}

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

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

.nocturne-breadcrumbs a:hover {
  text-decoration: underline;
}

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

/* ------------------------------------------------------------------ Split hero */

.nocturne-hero {
  padding: clamp(2.5rem, 6vw, 5rem) var(--nocturne-gutter);
}

.nocturne-hero--words {
  background: var(--surface-alt, #eeece7);
  text-align: center;
}

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

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

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

.nocturne-hero--words .nocturne-hero__copy {
  justify-items: center;
  max-width: 44rem;
  margin-inline: auto;
}

/* 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. */
.nocturne-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: var(--nocturne-heading-weight);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}

.nocturne-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #525a61);
  font-size: 1.125rem;
}

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

.nocturne-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.nocturne-hero__icon {
  margin-top: 0.2em;
  color: var(--accent-ink, #245a54);
}

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

.nocturne-hero--words :is(.nocturne-hero__actions, .nocturne-hero__badges) {
  justify-content: center;
}

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

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

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

.nocturne-stars svg.is-full {
  fill: var(--accent-ink, #245a54);
}

.nocturne-hero__trustpilot {
  color: var(--accent-ink, #245a54);
  font-weight: var(--nocturne-body-strong);
}

.nocturne-hero__media {
  margin: 0;
}

.nocturne-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--nocturne-radius);
  object-fit: cover;
}

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

.nocturne-article {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--nocturne-gutter);
}

.nocturne-article__inner {
  max-width: 44rem;
  margin-inline: auto;
}

.nocturne-article__header {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.nocturne-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: var(--text-secondary, #525a61);
  font-size: 0.875rem;
}

.nocturne-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: var(--nocturne-heading-weight);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

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

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

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

.nocturne-prose :where(h2, h3, h4) {
  margin: 1.8em 0 0.5em;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--nocturne-heading-weight);
  line-height: 1.25;
}

.nocturne-prose h2 {
  font-size: 1.6rem;
}

.nocturne-prose h3 {
  font-size: 1.3rem;
}

.nocturne-prose h4 {
  font-size: 1.1rem;
}

.nocturne-prose a {
  color: var(--accent-ink, #245a54);
  text-underline-offset: 0.2em;
}

.nocturne-prose blockquote {
  margin-inline: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--nocturne-line);
  color: var(--text-secondary, #525a61);
}

.nocturne-prose img {
  display: block;
  border-radius: var(--nocturne-radius);
}

.nocturne-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #525a61);
  font-size: 0.875rem;
}

.nocturne-prose :where(th, td) {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--nocturne-line);
  text-align: left;
}
/* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited value. */
.nocturne-prose table {
  font-variant-numeric: lining-nums tabular-nums;
}

.nocturne-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--nocturne-radius);
  background: var(--surface-alt, #eeece7);
}

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

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

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

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

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

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

/* The footer on the tinted surface with the page's own text colours: the same pair in every palette and with a website's
   own colours, so it reads everywhere without a rule of its own for dark palettes. */
.nocturne-footer {
  border-top: 1px solid var(--nocturne-line);
  background: var(--surface-alt, #eeece7);
  color: var(--text-primary, #1c2228);
}

.nocturne-footer__inner {
  max-width: calc(var(--nocturne-width) + 2 * var(--nocturne-gutter));
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--nocturne-gutter) 1.5rem;
}

.nocturne-footer--minimal .nocturne-footer__inner {
  padding-block: 1.5rem;
}

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

.nocturne-footer .nocturne-brand__name {
  max-width: 100%;
}

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

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

.nocturne-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--nocturne-line);
}

.nocturne-footer__invite {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  font-weight: var(--nocturne-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
}

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

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

.nocturne-footer__tagline,
.nocturne-footer__contact p:not(.nocturne-footer__title),
.nocturne-footer__copyright {
  margin: 0;
  color: var(--text-secondary, #525a61);
  font-size: 0.9375rem;
}

.nocturne-footer__title {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: var(--nocturne-body-strong);
  line-height: 1.4;
}

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

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

.nocturne-footer__links a:hover,
.nocturne-footer__contact a:hover,
.nocturne-footer__legal a:hover,
.nocturne-footer__inline a:hover {
  color: var(--text-primary, #1c2228);
  text-decoration: underline;
}

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

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

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

.nocturne-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--nocturne-line);
}

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

.nocturne-footer__legal a {
  font-size: 0.875rem;
}

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

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

.nocturne-not-found {
  padding: clamp(4rem, 9vw, 7rem) var(--nocturne-gutter);
  text-align: center;
}

.nocturne-not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 36rem;
  margin-inline: auto;
}

.nocturne-not-found__number {
  margin: 0;
  color: var(--accent-ink, #245a54);
  font-size: 0.9375rem;
  font-weight: var(--nocturne-body-strong);
}

.nocturne-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: var(--nocturne-heading-weight);
  line-height: 1.15;
  text-wrap: balance;
}

.nocturne-not-found p {
  margin: 0;
  color: var(--text-secondary, #525a61);
}

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

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

.nocturne-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.5rem;
  font-weight: var(--nocturne-heading-weight);
  line-height: 1.25;
}

.nocturne-form-success p {
  margin: 0;
  color: var(--text-secondary, #525a61);
}

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

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

/* ================================================================== Nocturne
   Everything above is the frame every theme starts from. From here on it is dressed as Nocturne: a dark room with one
   lamp. Headings stand in condensed capitals, small labels are spaced wide, lines are fine, and the accent is kept for
   what is live. The page reads as a running order: each section with a heading opens under a timeline ruler that
   carries its number (includes/stitch.php writes data-n), and the opening lists those numbers as cues. */

/* ------------------------------------------------------------------ Faces */

/* Condensed faces differ in the width of their capitals. The layout names the heading face on <body>, and each face is
   set at the size where its capitals are about as wide as the others': a heading then fills the same room whichever
   font palette a website chooses. A face that is not listed (a website's own) is set at the plain size. */
.nocturne-face--sofia-sans-extra-condensed { --nocturne-scale: 1.12; }
.nocturne-face--fira-sans-extra-condensed { --nocturne-scale: 1.1; }
.nocturne-face--bebas-neue { --nocturne-scale: 1.02; }
.nocturne-face--saira-condensed { --nocturne-scale: 0.94; }
.nocturne-face--oswald { --nocturne-scale: 0.92; }
.nocturne-face--anton { --nocturne-scale: 0.88; }
.nocturne-face--roboto-condensed { --nocturne-scale: 0.86; }

::selection {
  background: var(--accent, #ff4d2e);
  color: var(--on-accent, #140a07);
}

/* ------------------------------------------------------------------ Display type */

/* The frame's own headings in the heading face, in capitals. The line height leaves room for the marks above capitals. */
.nocturne-hero__title,
.nocturne-opening__title,
.nocturne-article__header h1,
.nocturne-footer__invite,
.nocturne-not-found h1 {
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--nocturne-heading-weight);
  letter-spacing: 0.012em;
  line-height: 1.04;
  text-transform: uppercase;
  text-wrap: balance;
}

.nocturne-hero__title {
  font-size: calc(clamp(2.4rem, 1.4rem + 4.6vw, 5.25rem) * var(--nocturne-scale));
}

.nocturne-article__header h1 {
  font-size: calc(clamp(2.2rem, 1.5rem + 3.4vw, 4.25rem) * var(--nocturne-scale));
}

.nocturne-footer__invite {
  font-size: calc(clamp(2rem, 1.35rem + 3vw, 4rem) * var(--nocturne-scale));
}

.nocturne-not-found h1 {
  font-size: calc(clamp(2rem, 1.35rem + 3vw, 3.5rem) * var(--nocturne-scale));
}

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

/* Small capitals spaced wide, like the labels on a desk. The accent button (the header's and the footer's) carries a lamp
   before its words that breathes slowly, as an "on air" light does. */
.nocturne-button {
  gap: 0.625rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color var(--nocturne-speed) ease, border-color var(--nocturne-speed) ease, box-shadow var(--nocturne-speed) ease;
}

.nocturne-button--small {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.nocturne-button--secondary {
  border-color: color-mix(in srgb, var(--text-primary, #f3f1ea) 42%, transparent);
}

.nocturne-button--secondary:hover {
  border-color: var(--text-primary, #f3f1ea);
}

.nocturne-button__lamp {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  animation: nocturne-lamp 2.2s ease-in-out infinite;
}

@keyframes nocturne-lamp {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.28; }
}

/* On a photograph the theme's own shade decides, not the palette: a white button with dark words, and an outline of
   white. */
.nocturne-button--on-picture.nocturne-button--primary {
  background: #ffffff;
  color: #111214;
}

.nocturne-button--on-picture.nocturne-button--primary:hover {
  background: #e7e5df;
}

.nocturne-button--on-picture.nocturne-button--secondary {
  border-color: rgb(255 255 255 / 0.62);
  background: rgb(0 0 0 / 0.22);
  color: #ffffff;
}

.nocturne-button--on-picture.nocturne-button--secondary:hover {
  border-color: #ffffff;
  background: rgb(255 255 255 / 0.14);
}

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

/* The bar is the page colour, a little clear, with what passes under it blurred: the room stays dark from top to bottom.
   A fine line of the accent runs along its foot as the page is read, like a playhead (where the browser can tie an
   animation to the scroll; nowhere else, and never for a visitor who asks for less motion). */
.nocturne-header {
  background: color-mix(in srgb, var(--background, #0c0d10) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

.nocturne-header.is-open {
  background: var(--background, #0c0d10);
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nocturne-header::after {
      content: "";
      position: absolute;
      inset: auto 0 -1px;
      height: 2px;
      background: var(--accent, #ff4d2e);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: nocturne-playhead linear both;
      animation-timeline: scroll(root block);
      pointer-events: none;
    }
  }
}

@keyframes nocturne-playhead {
  to { transform: scaleX(1); }
}

/* The name: short names (up to fourteen characters, includes/chrome.php) stand in the heading face in capitals, as a
   title card does; a longer one keeps the frame's plain size so that eighty characters still fit two lines. */
.nocturne-brand__name--short {
  font-size: calc(1.625rem * var(--nocturne-scale));
  letter-spacing: 0.04em;
  line-height: 1.12;
  text-transform: uppercase;
}

/* A long name is set in the body face, smaller: eighty characters must stay on two lines, or the bar grows taller than its
   controls (verify-theme-stress.mjs, header-rows). */
.nocturne-brand__name:not(.nocturne-brand__name--short) {
  font-family: var(--font-body, sans-serif);
  font-size: 1.0625rem;
  font-weight: var(--nocturne-body-strong);
  letter-spacing: 0;
  line-height: 1.3;
}

.nocturne-topbar {
  background: transparent;
  letter-spacing: 0.04em;
}

/* The menu: small capitals. The page being shown is marked by a short line of the accent under its name. */
.nocturne-nav__item > a {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nocturne-nav__item > a:hover,
.nocturne-nav__item--parent:focus-within > a {
  background: color-mix(in srgb, var(--text-primary, #f3f1ea) 9%, transparent);
}

.nocturne-nav__item.is-current > a {
  text-decoration-color: var(--accent, #ff4d2e);
}

.nocturne-nav__children {
  background: var(--surface, #15171c);
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.6);
}

.nocturne-nav__children a {
  font-size: 0.875rem;
}

.nocturne-drawer__link {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.5rem * var(--nocturne-scale));
  font-weight: var(--nocturne-heading-weight);
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ The header over a photograph */

/* When the page opens with the full hero on a picture, the bar lies clear on it with white words until the page moves
   (theme.js sets is-scrolled) or the phone menu opens (is-open); the opening is pulled up under it (its own rules).
   Without scripts the bar is the plain one (the end of this file). */
.nocturne-header:not(.is-scrolled, .is-open):has(~ .nocturne-main > .nocturne-opening--picture:first-child) {
  border-bottom-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #ffffff;
}

.nocturne-header:not(.is-scrolled, .is-open):has(~ .nocturne-main > .nocturne-opening--picture:first-child) .nocturne-topbar {
  border-bottom-color: rgb(255 255 255 / 0.2);
  color: rgb(255 255 255 / 0.86);
}

.nocturne-header:not(.is-scrolled, .is-open):has(~ .nocturne-main > .nocturne-opening--picture:first-child) :is(.nocturne-nav__item > a:hover, .nocturne-nav__item--parent:focus-within > a, .nocturne-menu-button:hover) {
  background: rgb(255 255 255 / 0.14);
}

.nocturne-header:not(.is-scrolled, .is-open):has(~ .nocturne-main > .nocturne-opening--picture:first-child) .logo-mask {
  background-color: #ffffff !important;
}

/* A logo in its own colours gets a small plate of the page colour on the photograph: a dark logo would vanish there. */
.nocturne-header:not(.is-scrolled, .is-open):has(~ .nocturne-main > .nocturne-opening--picture:first-child) .brand-logo-original {
  padding: 0.3rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--background, #0c0d10);
}

/* The header's height by its kind on a wide screen, where the centred kind has its row of menu and the top-bar kind its
   slim line: what the opening is pulled up by until the script has measured the header itself. */
@media (min-width: 64rem) {
  .nocturne-body--centered {
    --nocturne-head: calc(var(--nocturne-bar) + 2.75rem + 1px);
  }

  .nocturne-body--topbar {
    --nocturne-head: calc(var(--nocturne-bar) + 2.25rem + 2px);
  }
}

/* ------------------------------------------------------------------ The opening (full hero) */

.nocturne-opening {
  position: relative;
}

/* The picture, the shade and the words. Words here are white on the theme's own shade, the one place the palette does
   not decide. */
.nocturne-opening__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: clamp(31rem, 92svh, 62rem);
  overflow: hidden;
  background: #0a0b0d;
  color: #ffffff;
}

/* First on the page: under the header, which lies clear on it. */
.nocturne-main > .nocturne-opening--picture:first-child .nocturne-opening__stage {
  margin-top: calc(-1 * var(--nocturne-head));
  padding-top: var(--nocturne-head);
}

.nocturne-opening__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}

.nocturne-opening__image,
.nocturne-opening__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark under the header's words, light across the middle so the picture stays a picture, and deep at the foot where the
   heading stands. --pgs-tint is the block's own word on the shade (lighter, darker). */
.nocturne-opening__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / min(0.85, calc(0.42 * var(--pgs-tint, 1)))) 0%, rgb(0 0 0 / 0) 68%),
    linear-gradient(180deg,
      rgb(0 0 0 / min(0.9, calc(0.55 * var(--pgs-tint, 1)))) 0%,
      rgb(0 0 0 / min(0.9, calc(0.16 * var(--pgs-tint, 1)))) 26%,
      rgb(0 0 0 / min(0.9, calc(0.26 * var(--pgs-tint, 1)))) 50%,
      rgb(0 0 0 / min(0.94, calc(0.74 * var(--pgs-tint, 1)))) 82%,
      rgb(0 0 0 / min(0.96, calc(0.9 * var(--pgs-tint, 1)))) 100%);
}

.nocturne-opening__inner {
  display: grid;
  align-content: end;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  width: 100%;
  max-width: calc(var(--nocturne-width) + 2 * var(--nocturne-gutter));
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--nocturne-gutter) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.nocturne-opening__title {
  max-width: 16ch;
  margin: 0;
  font-size: calc(clamp(2.75rem, 1.1rem + 8vw, 8.5rem) * var(--nocturne-scale));
  line-height: 1.02;
  /* The first line's marks (Š, Ž) stay clear of whatever stands above. */
  padding-block-start: 0.08em;
}

.nocturne-opening__foot {
  display: grid;
  gap: 1.5rem;
  max-width: 44rem;
}

.nocturne-opening__lead {
  margin: 0;
  color: rgb(255 255 255 / 0.9);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.55;
}

.nocturne-opening__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 64rem) {
  /* The lead line keeps at least half the row: with several long buttons beside it the buttons wrap, not the words. */
  .nocturne-opening__foot {
    grid-template-columns: minmax(min(26rem, 50%), 1fr) minmax(0, max-content);
    align-items: end;
    gap: 3rem;
    max-width: none;
  }

  .nocturne-opening__actions {
    justify-content: flex-end;
  }

  .nocturne-opening__lead {
    max-width: 40rem;
  }
}

/* Without a picture the opening stands on the page colour, lit by the accent from one corner; its words and buttons are
   the palette's again. */
.nocturne-opening--bare .nocturne-opening__stage {
  min-height: clamp(24rem, 64svh, 44rem);
  background:
    radial-gradient(60rem 34rem at 88% -10%, color-mix(in srgb, var(--accent, #ff4d2e) 30%, transparent), transparent 70%),
    var(--background, #0c0d10);
  color: var(--text-primary, #f3f1ea);
}

.nocturne-opening--bare .nocturne-opening__lead {
  color: var(--text-secondary, #a9a8a3);
}

/* ------------------------------------------------------------------ The cue list under an opening */

/* The page's numbered sections along the foot of the opening, on a timeline ruler: a wide screen only (a phone has the
   menu). Each cell holds a section's number and its heading, kept to one line. */
.nocturne-cues {
  display: none;
}

@media (min-width: 64rem) {
  .nocturne-cues {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--nocturne-cues, 4), minmax(0, 1fr));
    width: 100%;
    max-width: calc(var(--nocturne-width) + 2 * var(--nocturne-gutter));
    margin-inline: auto;
    padding-inline: var(--nocturne-gutter);
  }

  .nocturne-cues__item {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
    padding: 1.4rem 1.25rem 1.5rem 0;
    /* The ruler: a fine line with a tick every half rem and a taller mark where the cell begins. */
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 1px 0.875rem no-repeat,
      repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 46%, transparent) 0 1px, transparent 1px 0.5rem) 0 0 / 100% 0.3125rem no-repeat,
      linear-gradient(color-mix(in srgb, currentColor 46%, transparent), color-mix(in srgb, currentColor 46%, transparent)) 0 0 / 100% 1px no-repeat;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: var(--nocturne-body-strong);
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-decoration: none;
    text-transform: uppercase;
  }

  .nocturne-cues__item b {
    flex: none;
    color: var(--accent, #ff4d2e);
    font-weight: inherit;
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* On a photograph the accent may be too dark to read: the number is white there, on a spot of the accent. */
  .nocturne-opening--picture .nocturne-cues__item b {
    color: #ffffff;
  }

  .nocturne-cues__item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Room for marks above capitals inside the clipping box. */
    padding-block: 0.25em;
    margin-block: -0.25em;
  }

  .nocturne-cues__item:hover span {
    text-decoration: underline;
    text-decoration-color: var(--accent, #ff4d2e);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
  }
}

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

.nocturne-hero {
  background:
    radial-gradient(52rem 30rem at 100% 0%, color-mix(in srgb, var(--accent, #ff4d2e) 16%, transparent), transparent 70%),
    var(--background, #0c0d10);
}

.nocturne-hero--words {
  background:
    radial-gradient(60rem 34rem at 88% -10%, color-mix(in srgb, var(--accent, #ff4d2e) 28%, transparent), transparent 70%),
    var(--background, #0c0d10);
}

.nocturne-hero__image {
  border: 1px solid var(--nocturne-line);
  border-radius: var(--nocturne-radius);
}

.nocturne-hero__points li {
  font-size: 0.9375rem;
}

.nocturne-hero__icon {
  color: var(--accent-ink, #ff7a5c);
}

/* ------------------------------------------------------------------ Sections on the timeline */

/* A section with a heading opens under a ruler: a fine line across the content's width with a tick every half rem, and at
   its left end a taller mark and the section's number, two digits in the accent's readable shade. The lines take the
   section's own text colour, so they read on a tinted band, a dark plate or a photograph alike. A section with a video
   behind it keeps the kit's own layer there and gets no ruler. */
.nocturne-main {
  counter-reset: nocturne-cue;
}

.nocturne-main .kit-section[data-n]:not(.kit-section--video) {
  position: relative;
  counter-increment: nocturne-cue;
  padding-block-start: calc(var(--kit-pad-normal, 5rem) + var(--nocturne-rise));
}

.nocturne-main .kit-section[data-n]:not(.kit-section--video)::before {
  content: "";
  position: absolute;
  inset-block-start: var(--kit-pad-normal, 5rem);
  inset-inline: var(--nocturne-edge);
  block-size: 0.875rem;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 34%, transparent) 0 1px, transparent 1px 0.5rem) 0 0 / 100% 0.3125rem no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 34%, transparent), color-mix(in srgb, currentColor 34%, transparent)) 0 0 / 100% 1px no-repeat;
  pointer-events: none;
}

.nocturne-main .kit-section[data-n]:not(.kit-section--video)::after {
  content: counter(nocturne-cue, decimal-leading-zero);
  position: absolute;
  inset-block-start: calc(var(--kit-pad-normal, 5rem) + 0.5rem);
  inset-inline-start: calc(var(--nocturne-edge) + 0.75rem);
  color: var(--accent-ink, #ff7a5c);
  font-size: 0.75rem;
  font-weight: var(--nocturne-body-strong);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.16em;
  line-height: 1;
  pointer-events: none;
}

/* On a dark plate, the accent's band or a photograph the number takes the section's own colour: the accent's shade is
   chosen for the page colour, not for those. */
.nocturne-main .kit-section[data-n]:is(.kit-section--inverse, .kit-section--accent, .kit-section--image)::after {
  color: inherit;
}

/* The theme's stock sections are set from the left, heading and lead line together, the way a title card is. A module's
   own section keeps the kit's alignment (its type starts with x_: the kit promises a module that a text it centres stays
   centred), and an invitation (cta_section, cta_banner) stays centred, as an end title is. */
.nocturne-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="cta_banner"]).kit-section--align-center,
.nocturne-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="cta_banner"]) :is(.kit-heading-group.kit-text--center, .kit-text-block.kit-text--lead.kit-text--center) {
  text-align: start;
}

.nocturne-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="cta_banner"]) .kit-text-block.kit-text--lead.kit-text--center {
  margin-inline: 0;
}

.nocturne-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="cta_banner"]) .kit-heading-group {
  max-width: 54rem;
}

/* An invitation's heading is centred with the rest of it. */
.nocturne-main :is([data-block="cta_section"], [data-block="cta_banner"]) .kit-heading {
  text-wrap: balance;
}

/* On a wide screen a narrow section (questions, an enquiry form, a player without a cover) is not a thin column in the
   middle of the room: its heading stands at the left, under the ruler's number, and its content at the right. The
   heading's lead line goes under the heading; a caption stays under the content. */
@media (min-width: 64rem) {
  .nocturne-main [data-n]:is([data-block="faq"], [data-block="contact_form"], [data-block="audio_player"]) > .kit-section__inner.kit-width--narrow {
    --kit-w: var(--kit-width-normal);
  }

  .nocturne-main [data-n]:is([data-block="faq"], [data-block="contact_form"], [data-block="audio_player"]) > .kit-width--narrow > .kit-stack {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }

  .nocturne-main [data-n]:is([data-block="faq"], [data-block="contact_form"], [data-block="audio_player"]) > .kit-width--narrow > .kit-stack > * {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-block: 0;
  }

  .nocturne-main [data-n]:is([data-block="faq"], [data-block="contact_form"], [data-block="audio_player"]) > .kit-width--narrow > .kit-stack > :first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .nocturne-main [data-n]:is([data-block="faq"], [data-block="contact_form"], [data-block="audio_player"]) > .kit-width--narrow > .kit-stack > .kit-text--lead {
    grid-column: 1;
    grid-row: 2;
  }

  .nocturne-main [data-n]:is([data-block="faq"], [data-block="contact_form"], [data-block="audio_player"]) > .kit-width--narrow > .kit-stack > .kit-text--muted {
    grid-column: 2;
    grid-row: 4;
  }
}

/* A video is this theme's main picture: it takes the full content width, not the narrow column. */
.nocturne-main [data-block="video_embed"] > .kit-section__inner.kit-width--narrow {
  --kit-w: var(--kit-width-normal);
}

/* The invitation near the end of a page (cta_section without a picture): a wide plate lit by the accent, its heading as
   large as an opening's. Every colour role the kit reads is set, so its buttons and lines follow. */
.nocturne-main [data-block="cta_section"]:not(.kit-section--image) {
  background:
    radial-gradient(56rem 30rem at 12% 120%, color-mix(in srgb, var(--accent, #ff4d2e) 34%, transparent), transparent 70%),
    radial-gradient(40rem 24rem at 96% -20%, color-mix(in srgb, var(--accent, #ff4d2e) 18%, transparent), transparent 70%),
    var(--surface, #15171c);
  border-block: 1px solid var(--nocturne-line);
}

.nocturne-main [data-block="cta_section"]:not(.kit-section--image) .kit-heading--2 {
  font-size: calc(clamp(2.4rem, 1.4rem + 4.6vw, 5.25rem) * var(--nocturne-scale));
  line-height: 1.04;
}

/* ------------------------------------------------------------------ Pictures and players in a section */

/* A video's poster and a frame from another website sit in a fine frame, like a monitor in a dark room. */
.nocturne-main .kit-video,
.nocturne-main .kit-frame {
  border-radius: var(--nocturne-radius);
}

.nocturne-main .kit-video {
  overflow: hidden;
  border: 1px solid var(--nocturne-line);
  box-shadow: 0 40px 80px -48px color-mix(in srgb, var(--accent, #ff4d2e) 55%, transparent);
}

/* The poster a video shows before it is played (PageMedia writes it and its plain look): here a dark screen lit by the
   accent from one corner, in every palette, with a larger play button in the accent. */
.nocturne-main .pagestic-video {
  background:
    radial-gradient(70% 95% at 82% 12%, color-mix(in srgb, var(--accent, #ff4d2e) 30%, transparent), transparent 72%),
    linear-gradient(160deg, #17181c 0%, #060607 70%);
}

.nocturne-main .pagestic-video__play svg {
  width: 96px;
  height: 68px;
}

.nocturne-main .pagestic-video__play rect {
  fill: var(--accent, #ff4d2e);
}

.nocturne-main .pagestic-video__play path {
  fill: var(--on-accent, #140a07);
}

/* ------------------------------------------------------------------ Article body and prose */

.nocturne-prose :where(h2, h3, h4) {
  font-family: var(--font-heading, sans-serif);
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.nocturne-prose h2 {
  font-size: calc(clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem) * var(--nocturne-scale));
  line-height: 1.1;
}

.nocturne-prose h3 {
  font-size: calc(clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem) * var(--nocturne-scale));
  line-height: 1.14;
}

.nocturne-prose a {
  text-decoration-color: var(--accent, #ff4d2e);
}

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

/* The footer is the end title: the pages and the contact details under small spaced labels, the small print, and last
   the name very large in the heading face, across the whole width. */
.nocturne-footer {
  background: var(--background, #0c0d10);
}

.nocturne-footer__title {
  color: var(--text-secondary, #a9a8a3);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nocturne-footer__closing {
  border-bottom: 1px solid var(--nocturne-line);
}

.nocturne-footer__wordmark {
  display: block;
  margin: clamp(2rem, 5vw, 4rem) 0 0;
  padding-block-start: 0.12em;
  border-top: 1px solid var(--nocturne-line);
  color: var(--text-primary, #f3f1ea);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(3.25rem, 17vw, 17rem) * var(--nocturne-scale));
  font-weight: var(--nocturne-heading-weight);
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A longer name is set smaller, by the size class the shared helper writes from its length, so it stays on one line. */
.nocturne-footer__wordmark--m { font-size: calc(clamp(2rem, 11vw, 11rem) * var(--nocturne-scale)); }
.nocturne-footer__wordmark--l { font-size: calc(clamp(1.5rem, 7.6vw, 7.75rem) * var(--nocturne-scale)); }
.nocturne-footer__wordmark--xl { font-size: calc(clamp(1.0625rem, 5.4vw, 5.5rem) * var(--nocturne-scale)); }
.nocturne-footer__wordmark--xxl { font-size: calc(clamp(0.75rem, 3.9vw, 4rem) * var(--nocturne-scale)); }

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

.nocturne-not-found__number {
  color: var(--accent-ink, #ff7a5c);
  font-family: var(--font-heading, sans-serif);
  letter-spacing: 0.04em;
}


/* ------------------------------------------------------------------ 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) {
  .nocturne-menu-button {
    display: none !important;
  }

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

/* The bar over a photograph could never learn that the page moved, nor be measured: without scripts it is the plain bar
   everywhere and the opening starts under it. */
@media (scripting: none) {
  .nocturne-header:not(.is-scrolled, .is-open):has(~ .nocturne-main > .nocturne-opening--picture:first-child) {
    border-bottom-color: var(--nocturne-line);
    background: var(--background, #0c0d10);
    color: var(--text-primary, #f3f1ea);
  }

  .nocturne-header:not(.is-scrolled, .is-open):has(~ .nocturne-main > .nocturne-opening--picture:first-child) .nocturne-topbar {
    border-bottom-color: var(--nocturne-line);
    color: var(--text-secondary, #a9a8a3);
  }

  .nocturne-header:not(.is-scrolled, .is-open):has(~ .nocturne-main > .nocturne-opening--picture:first-child) :is(.nocturne-nav__item > a:hover, .nocturne-nav__item--parent:focus-within > a, .nocturne-menu-button:hover) {
    background: color-mix(in srgb, var(--text-primary, #f3f1ea) 9%, transparent);
  }

  .nocturne-header:not(.is-scrolled, .is-open):has(~ .nocturne-main > .nocturne-opening--picture:first-child) .logo-mask {
    background-color: var(--text-primary, #f3f1ea) !important;
  }

  .nocturne-header:not(.is-scrolled, .is-open):has(~ .nocturne-main > .nocturne-opening--picture:first-child) .brand-logo-original {
    padding: 0;
    background: none;
  }

  .nocturne-main > .nocturne-opening--picture:first-child .nocturne-opening__stage {
    margin-top: 0;
    padding-top: 0;
  }
}

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