/*
 * Neon: the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the theme's own blocks (the
 * opening of hero_fullwidth_image and hero_video, the split hero, the article body, the divider) and the way whole kit
 * sections are laid on the page (the wall behind a tinted band, the lit sign of a call to action). The look of the kit's
 * parts inside a section is in kit-theme.css.
 *
 * The idea: a neon sign on a wall at night. Headings are lettering bent from glass tubes, lit: the letters in the page's
 * text colour with a halo of the tube's colour around them. The tubes are two: the palette's accent (--neon-tube) and a
 * second one drawn from the hue of the palette's primary, the "glass" (--neon-tube2), so every palette is a two-colour
 * sign. Tinted bands, the openings and the footer are a brick wall (--neon-brick, lines of mortar in the text colour) lit
 * around the sign. Frames, lines and buttons are tubes with rounded ends; the one lit button is a pill of the accent with
 * its halo. In a light palette (daylight, blush, or a website's own light colours) the sign is switched off: the same
 * tubes in their colours, with a faint halo only (light-dark() on the page's color-scheme, which a dark palette and a
 * website's own dark colours set).
 *
 * 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. The halos, the second tube and the mortar are decoration and carry no text.
 * The one place the palette does not decide is words on a photograph: white, on the theme's own shade.
 *
 * Type comes from the layout: --font-heading, --font-body, --neon-heading-weight and --neon-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here. Every heading face is
 * set at the size where its letters are about as wide as Comfortaa's (--neon-scale, the table under "Faces").
 */

/* ------------------------------------------------------------------ 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) {
  --neon-width: 74rem;
  --neon-gutter: clamp(1rem, 4vw, 2rem);
  --neon-bar: 4.5rem;
  --neon-radius: 1rem;
  --neon-button-radius: 999px;
  --neon-heading-weight: 600;
  --neon-body-strong: 600;
  --neon-speed: 180ms;
  --neon-scale: 1;
  --neon-line: var(--border, #2d2a3c);
  /* The two tubes. Without relative colours (old browsers) the second tube is the primary's lighter shade. */
  --neon-tube: var(--accent, #ff3d94);
  --neon-tube2: var(--primary-alt, #174560);
  /* The halos: strong where the page is dark, faint where it is light (the sign by day). */
  --neon-halo: color-mix(in srgb, var(--neon-tube) 45%, transparent);
  --neon-halo-soft: color-mix(in srgb, var(--neon-tube) 22%, transparent);
  --neon-halo2: color-mix(in srgb, var(--neon-tube2) 45%, transparent);
  --neon-spill: color-mix(in srgb, var(--neon-tube) 10%, transparent);
  /* The wall: lines of mortar in the text colour, every brick a little shaded at its foot. */
  --neon-mortar: color-mix(in srgb, var(--text-primary, #f6f1fa) 7%, transparent);
  --neon-brick-h: 1.375rem;
  --neon-brick-w: 4.5rem;
}

@supports (color: oklch(from red l c h)) {
  :where(:root) {
    --neon-tube2: oklch(from var(--primary, #10364d) 0.8 max(c, 0.13) h);
  }
}

@supports (color: light-dark(red, blue)) {
  :where(:root) {
    --neon-halo: light-dark(color-mix(in srgb, var(--neon-tube) 20%, transparent), color-mix(in srgb, var(--neon-tube) 72%, transparent));
    --neon-halo-soft: light-dark(color-mix(in srgb, var(--neon-tube) 8%, transparent), color-mix(in srgb, var(--neon-tube) 34%, transparent));
    --neon-halo2: light-dark(color-mix(in srgb, var(--neon-tube2) 22%, transparent), color-mix(in srgb, var(--neon-tube2) 70%, transparent));
    --neon-spill: light-dark(color-mix(in srgb, var(--neon-tube) 6%, transparent), color-mix(in srgb, var(--neon-tube) 17%, transparent));
    --neon-mortar: light-dark(color-mix(in srgb, var(--text-primary, #1d1726) 9%, transparent), color-mix(in srgb, var(--text-primary, #f6f1fa) 6%, transparent));
  }
}

@supports (color: oklch(from red l c h)) and (color: light-dark(red, blue)) {
  :where(:root) {
    /* By day the second tube is a deeper shade, so it shows on a light wall. */
    --neon-tube2: light-dark(oklch(from var(--primary, #261a40) 0.56 max(c, 0.15) h), oklch(from var(--primary, #10364d) 0.8 max(c, 0.13) h));
  }
}

/* Lit lettering: the letters in the text colour, a tight halo of the tube's colour and a wide soft one. In em, so a small
   heading glows as much as a large one, for its size. */
:where(:root) {
  --neon-glow: 0 0 0.05em var(--neon-halo), 0 0 0.28em var(--neon-halo), 0 0 0.7em var(--neon-halo-soft);
  --neon-glow2: 0 0 0.05em var(--neon-halo2), 0 0 0.28em var(--neon-halo2), 0 0 0.7em var(--neon-halo-soft);
  /* A tube: the line itself, a tight halo and a wide one. */
  --neon-tube-glow: 0 0 0.25rem var(--neon-halo), 0 0 1.1rem var(--neon-halo-soft);
  --neon-tube2-glow: 0 0 0.25rem var(--neon-halo2), 0 0 1.1rem var(--neon-halo2);
}

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

/* Each heading face at the size where its letters are as wide as Comfortaa's, so the sizes below hold for every font
   palette (the layout names the face on <body>; a website's own face keeps 1). */
.neon-face--comfortaa { --neon-scale: 0.94; }
.neon-face--m-plus-rounded-1c { --neon-scale: 1; }
.neon-face--pacifico { --neon-scale: 0.9; }
.neon-face--playpen-sans { --neon-scale: 0.92; }
.neon-face--righteous { --neon-scale: 1; }
.neon-face--quicksand { --neon-scale: 1.02; }
.neon-face--ubuntu { --neon-scale: 1.02; }

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

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

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

body {
  margin: 0;
  background: var(--background, #0b0a12);
  color: var(--text-primary, #f6f1fa);
  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, #ff7ab5);
  outline-offset: 3px;
}

::selection {
  background: color-mix(in srgb, var(--neon-tube) 35%, transparent);
}

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

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

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

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

/* The wall: bricks of mortar lines, with the sign's light spilling over them from above the middle. A section that wears
   it keeps its own fill under it. */
.neon-wall {
  background-color: var(--background, #0b0a12);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 38%, var(--neon-spill), transparent 72%),
    linear-gradient(to bottom, var(--neon-mortar) 1px, transparent 1px),
    conic-gradient(from 0deg at 1px var(--neon-brick-h), transparent 75%, var(--neon-mortar) 0),
    conic-gradient(from 0deg at 1px var(--neon-brick-h), transparent 75%, var(--neon-mortar) 0);
  background-position: 0 0, 0 0, 0 0, calc(var(--neon-brick-w) / 2) var(--neon-brick-h);
  background-size:
    100% 100%,
    100% var(--neon-brick-h),
    var(--neon-brick-w) calc(var(--neon-brick-h) * 2),
    var(--neon-brick-w) calc(var(--neon-brick-h) * 2);
}

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

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

/* The lit button: a pill of the tube's colour with its halo. The hover is a wider halo and a ring in the words' colour,
   not a lighter fill: a lighter fill would bring the words' contrast under what the colour contract promises. */
.neon-button--primary,
.neon-button--accent {
  border-color: var(--accent, #ff3d94);
  background: var(--accent, #ff3d94);
  color: var(--on-accent, #16000b);
  box-shadow: var(--neon-tube-glow);
}

.neon-button--primary:hover,
.neon-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #16000b) 45%, transparent), 0 0 0.4rem var(--neon-halo), 0 0 1.75rem var(--neon-halo);
  transform: translateY(-1px);
}

/* The unlit one: a tube outline in the accent, the words in the page's colour; it lights up under the pointer. */
.neon-button--secondary {
  border-color: var(--neon-tube);
  background: transparent;
  color: var(--text-primary, #f6f1fa);
  box-shadow: 0 0 0.6rem var(--neon-halo-soft), inset 0 0 0.6rem var(--neon-halo-soft);
}

.neon-button--secondary:hover {
  box-shadow: var(--neon-tube-glow), inset 0 0 0.75rem var(--neon-halo-soft);
}

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

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

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

/* A strip of the primary glass with a tube under it. */
.neon-announcement {
  position: relative;
  background: var(--primary, #10364d);
  color: var(--on-primary, #ffffff);
  font-size: 0.875rem;
  box-shadow: inset 0 -2px 0 var(--neon-tube2);
}

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

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

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

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

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

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

.neon-announcement .announcement-dismiss:hover {
  box-shadow: inset 0 0 0 1px currentColor;
}

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

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

/* A bar on the wall's colour that stays at the top, with a lit tube along its foot, set in from the edges like a tube
   on its brackets. The bar has one height for every kind; the centred kind adds a row for the menu. */
.neon-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--background, #0b0a12);
  color: var(--text-primary, #f6f1fa);
}

.neon-header__bar {
  position: relative;
}

.neon-header__bar::after {
  content: "";
  position: absolute;
  right: var(--neon-gutter);
  bottom: 0;
  left: var(--neon-gutter);
  height: 2px;
  border-radius: 2px;
  background: var(--neon-tube);
  box-shadow: var(--neon-tube-glow);
  pointer-events: none;
}

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

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

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

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

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

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

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

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

.neon-header__phone:hover {
  text-shadow: 0 0 0.6em var(--neon-halo);
}

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

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

.neon-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.12em;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.3rem * var(--neon-scale));
  font-weight: var(--neon-heading-weight);
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-shadow: var(--neon-glow);
}

/* 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. */
.neon-header .neon-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. The halo is left out there: a clipped halo is a hard edge. */
@media (max-width: 39.99rem) {
  .neon-header .neon-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: calc(1.125rem * var(--neon-scale));
    text-shadow: none;
  }
}

.neon-brand:has(.neon-brand__logo, .brand-logo-original, .logo-mask) .neon-brand__name {
  font-size: calc(1.0625rem * var(--neon-scale));
}

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

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

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

.neon-topbar {
  border-bottom: 1px solid var(--neon-line);
  background: var(--surface, #14121d);
  color: var(--text-secondary, #b3abc2);
  font-size: 0.8125rem;
}

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

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

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

.neon-topbar a:hover {
  color: var(--text-primary, #f6f1fa);
  text-decoration: underline;
}

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

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

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

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

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

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

.neon-nav__item {
  position: relative;
}

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

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

/* Under the pointer a page's name switches on. */
.neon-nav__item > a:hover,
.neon-nav__item--parent:focus-within > a {
  text-shadow: var(--neon-glow);
}

/* The page being shown: a short lit tube under its name. */
.neon-nav__item.is-current > a::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.15rem;
  left: 0.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--neon-tube);
  box-shadow: var(--neon-tube-glow);
}

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

.neon-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.45rem;
  border: 1px solid var(--neon-line);
  border-radius: var(--neon-radius);
  background: var(--surface, #14121d);
  color: var(--text-primary, #f6f1fa);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon-tube) 30%, transparent), 0 18px 40px -18px color-mix(in srgb, #000 70%, transparent);
  visibility: hidden;
  opacity: 0;
}

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

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

.neon-nav__children a:hover {
  background: var(--surface-alt, #1b1826);
  color: var(--text-primary, #f6f1fa);
}

/* The menu button: three tubes 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). */
.neon-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--neon-line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--neon-speed) ease, box-shadow var(--neon-speed) ease;
}

.neon-menu-button:hover,
.neon-menu-button[aria-expanded="true"] {
  border-color: var(--neon-tube);
  box-shadow: var(--neon-tube-glow);
}

.neon-menu-button__lines {
  display: grid;
  gap: 0.25rem;
  width: 1.05rem;
}

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

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

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

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

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

/* A panel of the wall under the bar with every page as a line of lit lettering. It scrolls inside itself when the pages
   are many, so the last one is always reachable. */
.neon-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
     (--neon-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(--neon-head, var(--neon-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 2px solid var(--neon-tube2);
  background: var(--background, #0b0a12);
  color: var(--text-primary, #f6f1fa);
  box-shadow: 0 0 1rem var(--neon-halo2), 0 30px 50px -20px color-mix(in srgb, #000 70%, transparent);
}

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

.neon-drawer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.75rem var(--neon-gutter) 1.75rem;
}

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

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

/* A page name in the heading face, lit. data-fit-text (includes/chrome.php) lets the shared script set a long single
   word smaller instead of breaking it. */
.neon-drawer__link {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.375rem * var(--neon-scale));
  font-weight: var(--neon-heading-weight);
  line-height: 1.3;
  text-decoration: none;
  text-shadow: var(--neon-glow);
}

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

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

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

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

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

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

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

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

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

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

/* Between two steps a small lit dot, like a bulb. */
.neon-breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--neon-tube);
  box-shadow: 0 0 0.35rem var(--neon-halo);
  vertical-align: 0.15em;
}

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

.neon-breadcrumbs a:hover {
  color: var(--text-primary, #f6f1fa);
  text-decoration: underline;
}

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

/* ------------------------------------------------------------------ Lit headings */

/* Every heading in the page is lettering in tubes: the page's text colour with the tube's halo. The kit's headings get
   the same in kit-theme.css. */
.neon-lit {
  text-shadow: var(--neon-glow);
}

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

/* The first frame: a photograph across the window at night, darkened, and the words in the middle inside a sign, a
   rounded frame of tube lit in the accent with a second, finer tube inside it. Without a picture or a video the same
   sign hangs on the brick wall, lit around it. */
.neon-opening {
  position: relative;
}

.neon-opening__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(30rem, calc(100svh - var(--neon-head, var(--neon-bar))), 54rem);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--neon-gutter);
  overflow: hidden;
}

/* Under the breadcrumb (every page but the home page) the first screen is shorter by the header and the breadcrumb, so
   the opening takes what is left of it: its heading and its buttons end on the first screen, not under it. The
   breadcrumb is one line of 0.875rem with 1.25rem above it; the opening stands 1rem under it. The script then says
   where the opening really starts (--neon-opening-top: an announcement above the header, a breadcrumb on two lines). */
.neon-main > nav[aria-label]:first-child + .neon-opening {
  --neon-above: var(--neon-opening-top, calc(var(--neon-head, var(--neon-bar)) + 1.25rem + 0.875rem * 1.65 + 1rem));
  padding-top: 1rem;
}

.neon-main > nav[aria-label]:first-child + .neon-opening .neon-opening__stage {
  min-height: clamp(20rem, calc(100svh - var(--neon-above)), 46rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.neon-opening--picture .neon-opening__stage {
  background: #0b0b10;
  color: #ffffff;
}

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

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

/* The night over the picture: darker at the edges, so the sign is the brightest thing in the frame. --pgs-tint is the
   block's own word on the shade (BlockTint): 1 unless it asked for a lighter or a darker one. */
.neon-opening__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 80% at 50% 50%, color-mix(in srgb, #05040a min(92%, calc(46% * var(--pgs-tint, 1))), transparent), color-mix(in srgb, #05040a min(97%, calc(86% * var(--pgs-tint, 1))), transparent));
}

/* The sign. Over a photograph its words are white on its own dark glass; on the wall they are the page's text. */
.neon-sign {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  width: min(100%, 52rem);
  padding: clamp(1.75rem, 5vw, 3.25rem) clamp(1.25rem, 5vw, 3.5rem);
  border: 2.5px solid var(--neon-tube);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  box-shadow: var(--neon-tube-glow), inset 0 0 0.25rem var(--neon-halo), inset 0 0 1.5rem var(--neon-halo-soft);
}

/* The second, finer tube inside the first. */
.neon-sign::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border: 1.5px solid var(--neon-tube2);
  border-radius: calc(clamp(1.25rem, 3vw, 2rem) - 0.45rem);
  box-shadow: 0 0 0.6rem var(--neon-halo2);
  opacity: 0.85;
  pointer-events: none;
}

.neon-opening--picture .neon-sign {
  background: color-mix(in srgb, #05040a 38%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.neon-sign > * {
  position: relative;
}

/* The page's heading in lit tubes. 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 inside the sign without it. */
.neon-opening__title {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.1rem, 1.2rem + 4.2vw, 4.75rem) * var(--neon-scale));
  font-weight: var(--neon-heading-weight);
  letter-spacing: 0.01em;
  line-height: 1.14;
  text-shadow: var(--neon-glow);
  text-wrap: balance;
}

/* Over a photograph the halo is always lit, whatever the palette: it is night in the picture. */
.neon-opening--picture .neon-opening__title {
  text-shadow: 0 0 0.05em color-mix(in srgb, var(--neon-tube) 80%, transparent), 0 0 0.3em color-mix(in srgb, var(--neon-tube) 70%, transparent), 0 0 0.75em color-mix(in srgb, var(--neon-tube) 40%, transparent);
}

.neon-opening--picture .neon-sign {
  border-color: var(--neon-tube);
  box-shadow: 0 0 0.3rem color-mix(in srgb, var(--neon-tube) 80%, transparent), 0 0 1.4rem color-mix(in srgb, var(--neon-tube) 50%, transparent), inset 0 0 0.3rem color-mix(in srgb, var(--neon-tube) 60%, transparent), inset 0 0 1.5rem color-mix(in srgb, var(--neon-tube) 25%, transparent);
}

.neon-opening__lead {
  max-width: 38rem;
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

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

.neon-opening__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
}

/* Words on a photograph: the unlit button's words are white there. */
.neon-opening--picture .neon-button--secondary {
  color: #ffffff;
}

/* The sign switches on once as the page opens, with a flicker, for visitors who do not ask for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .neon-opening__title,
  .neon-hero__title,
  .neon-not-found__sign {
    animation: neon-switch-on 1.6s linear 0.15s 1 both;
  }
}

@keyframes neon-switch-on {
  0% { opacity: 0.25; text-shadow: none; }
  8% { opacity: 1; text-shadow: var(--neon-glow); }
  11% { opacity: 0.3; text-shadow: none; }
  20% { opacity: 1; text-shadow: var(--neon-glow); }
  23% { opacity: 0.55; text-shadow: none; }
  30%, 100% { opacity: 1; text-shadow: var(--neon-glow); }
}

/* ------------------------------------------------------------------ Split hero (hero_image_split) */

/* The words lit on the wall at the left, the photograph at the right in a frame of tube that stands a little off it. */
.neon-hero {
  padding: clamp(2.75rem, 6vw, 5.5rem) var(--neon-gutter);
}

.neon-hero--words {
  text-align: center;
}

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

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

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

.neon-hero--words .neon-hero__copy {
  justify-items: center;
  max-width: 46rem;
  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. */
.neon-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.1rem, 1.3rem + 3.2vw, 4rem) * var(--neon-scale));
  font-weight: var(--neon-heading-weight);
  letter-spacing: 0.01em;
  line-height: 1.14;
  text-shadow: var(--neon-glow);
  text-wrap: balance;
}

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

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

.neon-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.neon-hero__icon {
  margin-top: 0.2em;
  color: var(--accent-ink, #ff7ab5);
  filter: drop-shadow(0 0 0.2rem var(--neon-halo));
}

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

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

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

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

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

.neon-stars svg.is-full {
  fill: var(--accent-ink, #ff7ab5);
  filter: drop-shadow(0 0 0.15rem var(--neon-halo));
}

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

/* The photograph in its tube: the frame stands 0.6rem off the picture, lit in the second tube's colour. */
.neon-hero__media {
  position: relative;
  margin: 0.75rem;
}

.neon-hero__media::before {
  content: "";
  position: absolute;
  inset: -0.75rem;
  border: 2px solid var(--neon-tube2);
  border-radius: calc(var(--neon-radius) + 0.75rem);
  box-shadow: var(--neon-tube2-glow);
  pointer-events: none;
}

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

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

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

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

.neon-article__header {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--neon-line);
}

.neon-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  color: var(--accent-ink, #ff7ab5);
  font-size: 0.875rem;
  font-weight: var(--neon-body-strong);
}

.neon-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.95rem, 1.4rem + 2.2vw, 3rem) * var(--neon-scale));
  font-weight: var(--neon-heading-weight);
  letter-spacing: 0.01em;
  line-height: 1.16;
  text-shadow: var(--neon-glow);
  text-wrap: balance;
}

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

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

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

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

.neon-prose h2 {
  font-size: calc(1.65rem * var(--neon-scale));
  text-shadow: var(--neon-glow);
}

.neon-prose h3 {
  font-size: calc(1.3rem * var(--neon-scale));
}

.neon-prose h4 {
  font-size: calc(1.1rem * var(--neon-scale));
}

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

.neon-prose blockquote {
  margin-inline: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--neon-tube);
  box-shadow: -0.6rem 0 0.9rem -0.6rem var(--neon-halo);
  color: var(--text-secondary, #b3abc2);
}

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

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

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

.neon-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--neon-radius);
  background: var(--surface-alt, #1b1826);
  color: var(--text-primary, #f6f1fa);
}

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

/* line: one lit tube; dashed: a tube in short lengths; dotted: three bulbs. */
.neon-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: calc(var(--neon-width) + 2 * var(--neon-gutter));
  margin-inline: auto;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--neon-gutter);
}

.neon-divider__line {
  width: min(100%, 36rem);
  height: 2px;
  border-radius: 2px;
  background: var(--neon-tube);
  box-shadow: var(--neon-tube-glow);
}

.neon-divider--dashed .neon-divider__line {
  background: repeating-linear-gradient(90deg, var(--neon-tube) 0 1.75rem, transparent 1.75rem 2.5rem);
  box-shadow: none;
  filter: drop-shadow(0 0 0.25rem var(--neon-halo));
}

.neon-divider--dotted span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--neon-tube);
  box-shadow: var(--neon-tube-glow);
}

.neon-divider--dotted span:nth-child(2) {
  background: var(--neon-tube2);
  box-shadow: var(--neon-tube2-glow);
}

/* ------------------------------------------------------------------ Kit sections on the wall */

/* A tinted band is a stretch of the brick wall in the tinted colour; a call to action (cta_banner, a band of the
   primary glass) is a lit sign: a tube along its top and its foot, in the second tube's colour. */
.neon-main .kit-section--muted {
  background-image:
    linear-gradient(to bottom, var(--neon-mortar) 1px, transparent 1px),
    conic-gradient(from 0deg at 1px var(--neon-brick-h), transparent 75%, var(--neon-mortar) 0),
    conic-gradient(from 0deg at 1px var(--neon-brick-h), transparent 75%, var(--neon-mortar) 0);
  background-position: 0 0, 0 0, calc(var(--neon-brick-w) / 2) var(--neon-brick-h);
  background-size:
    100% var(--neon-brick-h),
    var(--neon-brick-w) calc(var(--neon-brick-h) * 2),
    var(--neon-brick-w) calc(var(--neon-brick-h) * 2);
}

.neon-main .kit-section--inverse {
  box-shadow: inset 0 2px 0 var(--neon-tube2), inset 0 -2px 0 var(--neon-tube2), 0 0 1.25rem var(--neon-halo2);
}

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

/* The footer is the wall at the foot of the page, with a lit tube across its top in the second tube's colour, and the
   name lit like the header's. It wears the page's own text colours on the wall's colour: the same pair in every palette
   and with a website's own colours. */
.neon-footer {
  position: relative;
  color: var(--text-primary, #f6f1fa);
}

.neon-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--neon-gutter);
  left: var(--neon-gutter);
  height: 2px;
  border-radius: 2px;
  background: var(--neon-tube2);
  box-shadow: var(--neon-tube2-glow);
}

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

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

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

.neon-footer .neon-brand__name {
  max-width: 100%;
  font-size: calc(1.5rem * var(--neon-scale));
}

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

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

.neon-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(--neon-line);
}

.neon-footer__invite {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem) * var(--neon-scale));
  font-weight: var(--neon-heading-weight);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-shadow: var(--neon-glow);
  text-wrap: balance;
}

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

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

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

.neon-footer__title {
  margin: 0 0 0.85rem;
  color: var(--accent-ink, #ff7ab5);
  font-size: 0.8125rem;
  font-weight: var(--neon-body-strong);
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

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

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

.neon-footer__links a:hover,
.neon-footer__contact a:hover,
.neon-footer__legal a:hover,
.neon-footer__inline a:hover {
  color: var(--text-primary, #f6f1fa);
  text-shadow: 0 0 0.6em var(--neon-halo);
}

.neon-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--neon-line);
  border-radius: 50%;
  color: inherit;
  transition: border-color var(--neon-speed) ease, box-shadow var(--neon-speed) ease;
}

.neon-footer__social a:hover {
  border-color: var(--neon-tube);
  box-shadow: var(--neon-tube-glow);
}

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

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

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

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

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

/* The footer's large name (config.footer_wordmark), in the shared look, lit like the sign it is. */
.neon-footer .theme-footer-wordmark {
  text-shadow: var(--neon-glow);
}

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

/* A sign with a tube gone: the 0 of 404 hangs dark and flickers now and then, for visitors who allow motion. */
.neon-not-found {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--neon-gutter);
  text-align: center;
}

.neon-not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  max-width: 38rem;
  margin-inline: auto;
}

.neon-not-found__sign {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(5rem, 3rem + 10vw, 9rem) * var(--neon-scale));
  font-weight: var(--neon-heading-weight);
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-shadow: var(--neon-glow);
}

.neon-not-found__dead {
  color: color-mix(in srgb, var(--text-primary, #f6f1fa) 28%, transparent);
  text-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  .neon-not-found__dead {
    animation: neon-dying 5s linear 2s infinite;
  }
}

@keyframes neon-dying {
  0%, 86%, 100% { color: color-mix(in srgb, var(--text-primary, #f6f1fa) 28%, transparent); text-shadow: none; }
  88% { color: var(--text-primary, #f6f1fa); text-shadow: var(--neon-glow2); }
  89% { color: color-mix(in srgb, var(--text-primary, #f6f1fa) 28%, transparent); text-shadow: none; }
  91% { color: var(--text-primary, #f6f1fa); text-shadow: var(--neon-glow2); }
  92% { color: color-mix(in srgb, var(--text-primary, #f6f1fa) 28%, transparent); text-shadow: none; }
}

.neon-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem) * var(--neon-scale));
  font-weight: var(--neon-heading-weight);
  line-height: 1.18;
  text-wrap: balance;
}

.neon-not-found p {
  margin: 0;
  color: var(--text-secondary, #b3abc2);
}

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

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

.neon-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.5rem * var(--neon-scale));
  font-weight: var(--neon-heading-weight);
  line-height: 1.25;
  text-shadow: var(--neon-glow);
}

.neon-form-success p {
  margin: 0;
  color: var(--text-secondary, #b3abc2);
}

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

/* The shared bar (resilience.css) on the wall's colour, with a tube along its top. */
body .theme-action-bar {
  border-top: 2px solid var(--neon-tube);
  background: var(--background, #0b0a12);
  box-shadow: 0 0 1rem var(--neon-halo-soft);
}

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

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

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