/*
 * Arcade: the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the three blocks the theme
 * draws itself (the split hero, the article body, the divider) and the dithered edges of the kit's coloured bands.
 * Everything inside a kit block is in kit-theme.css.
 *
 * The idea: a website dressed as a well-loved 8-bit game. The header is a solid bar in the brand colour, like a game's
 * status line, and fades into the page through a dithered row of pixels; coloured bands and the footer fade in and out
 * the same way. Headings are in a pixel face (the font palettes' heading faces) and the page's main heading ends in a
 * blinking cursor. Boxes, keys and pictures have stepped pixel corners; a pixel arrow, like the pointer of a game's menu,
 * marks the page you are on. Running text stays in a plain, readable face.
 *
 * 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. Decorations that carry no text (a dithered edge, a pixel shadow) may use any token or a
 * mix of one with black or white.
 *
 * Type comes from the layout: --font-heading, --font-body, --arcade-heading-weight and --arcade-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here. Sizes of the heading
 * face are multiplied by --arcade-scale, set below for each face the font palettes use.
 */

/* ------------------------------------------------------------------ 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) {
  --arcade-width: 72rem;
  --arcade-gutter: clamp(1rem, 4vw, 2rem);
  --arcade-bar: 4.25rem;
  --arcade-heading-weight: 700;
  --arcade-body-strong: 600;
  --arcade-scale: 1;
  --arcade-speed: 120ms;
  --arcade-line: var(--border, #d8c49c);
  /* One pixel of the theme's art (outlines, stepped corners, arrows), and one dot of a dithered fade. */
  --arcade-px: 3px;
  --arcade-dot: 4px;
  /* A box's corners cut in two steps of one pixel. */
  --arcade-step: polygon(0 calc(2 * var(--arcade-px)), var(--arcade-px) calc(2 * var(--arcade-px)), var(--arcade-px) var(--arcade-px), calc(2 * var(--arcade-px)) var(--arcade-px), calc(2 * var(--arcade-px)) 0,
    calc(100% - 2 * var(--arcade-px)) 0, calc(100% - 2 * var(--arcade-px)) var(--arcade-px), calc(100% - var(--arcade-px)) var(--arcade-px), calc(100% - var(--arcade-px)) calc(2 * var(--arcade-px)), 100% calc(2 * var(--arcade-px)),
    100% calc(100% - 2 * var(--arcade-px)), calc(100% - var(--arcade-px)) calc(100% - 2 * var(--arcade-px)), calc(100% - var(--arcade-px)) calc(100% - var(--arcade-px)), calc(100% - 2 * var(--arcade-px)) calc(100% - var(--arcade-px)), calc(100% - 2 * var(--arcade-px)) 100%,
    calc(2 * var(--arcade-px)) 100%, calc(2 * var(--arcade-px)) calc(100% - var(--arcade-px)), var(--arcade-px) calc(100% - var(--arcade-px)), var(--arcade-px) calc(100% - 2 * var(--arcade-px)), 0 calc(100% - 2 * var(--arcade-px)));
  /* A box's corners cut in three larger steps, for big pictures. */
  --arcade-step-large: polygon(0 calc(3 * var(--arcade-dot)), var(--arcade-dot) calc(3 * var(--arcade-dot)), var(--arcade-dot) var(--arcade-dot), calc(3 * var(--arcade-dot)) var(--arcade-dot), calc(3 * var(--arcade-dot)) 0,
    calc(100% - 3 * var(--arcade-dot)) 0, calc(100% - 3 * var(--arcade-dot)) var(--arcade-dot), calc(100% - var(--arcade-dot)) var(--arcade-dot), calc(100% - var(--arcade-dot)) calc(3 * var(--arcade-dot)), 100% calc(3 * var(--arcade-dot)),
    100% calc(100% - 3 * var(--arcade-dot)), calc(100% - var(--arcade-dot)) calc(100% - 3 * var(--arcade-dot)), calc(100% - var(--arcade-dot)) calc(100% - var(--arcade-dot)), calc(100% - 3 * var(--arcade-dot)) calc(100% - var(--arcade-dot)), calc(100% - 3 * var(--arcade-dot)) 100%,
    calc(3 * var(--arcade-dot)) 100%, calc(3 * var(--arcade-dot)) calc(100% - var(--arcade-dot)), var(--arcade-dot) calc(100% - var(--arcade-dot)), var(--arcade-dot) calc(100% - 3 * var(--arcade-dot)), 0 calc(100% - 3 * var(--arcade-dot)));
  /* The pointer of a game's menu: a triangle of whole pixels, three wide and five tall. */
  --arcade-arrow: polygon(0 0, 33.34% 0, 33.34% 20%, 66.67% 20%, 66.67% 40%, 100% 40%, 100% 60%, 66.67% 60%, 66.67% 80%, 33.34% 80%, 33.34% 100%, 0 100%);
  /* The one pixel at each corner that joins an outline's two sides across a step. Drawn in currentColor by the layer
     that draws the outline. */
  --arcade-ring-corners:
    linear-gradient(currentColor, currentColor) left var(--arcade-px) top var(--arcade-px) / var(--arcade-px) var(--arcade-px) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--arcade-px) top var(--arcade-px) / var(--arcade-px) var(--arcade-px) no-repeat,
    linear-gradient(currentColor, currentColor) left var(--arcade-px) bottom var(--arcade-px) / var(--arcade-px) var(--arcade-px) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--arcade-px) bottom var(--arcade-px) / var(--arcade-px) var(--arcade-px) no-repeat;
  /* A dithered fade of currentColor: three rows of dots, three quarters, half and a quarter filled, as an old machine with
     few colours drew a gradient. "down" is solid at the top, "up" at the bottom. Each is six dots tall. */
  --arcade-fade-down:
    conic-gradient(from 90deg at var(--arcade-dot) var(--arcade-dot), transparent 25%, currentColor 0) 0 0 / calc(2 * var(--arcade-dot)) calc(2 * var(--arcade-dot)) repeat-x,
    conic-gradient(currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0) 0 calc(2 * var(--arcade-dot)) / calc(2 * var(--arcade-dot)) calc(2 * var(--arcade-dot)) repeat-x,
    conic-gradient(from 90deg at var(--arcade-dot) var(--arcade-dot), currentColor 25%, transparent 0) 0 calc(4 * var(--arcade-dot)) / calc(2 * var(--arcade-dot)) calc(2 * var(--arcade-dot)) repeat-x;
  --arcade-fade-up:
    conic-gradient(from 90deg at var(--arcade-dot) var(--arcade-dot), currentColor 25%, transparent 0) 0 0 / calc(2 * var(--arcade-dot)) calc(2 * var(--arcade-dot)) repeat-x,
    conic-gradient(currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0) 0 calc(2 * var(--arcade-dot)) / calc(2 * var(--arcade-dot)) calc(2 * var(--arcade-dot)) repeat-x,
    conic-gradient(from 90deg at var(--arcade-dot) var(--arcade-dot), transparent 25%, currentColor 0) 0 calc(4 * var(--arcade-dot)) / calc(2 * var(--arcade-dot)) calc(2 * var(--arcade-dot)) repeat-x;
  --arcade-fade-height: calc(6 * var(--arcade-dot));
}

/* Each heading face at the size where it holds the same words in the same room ("Apgyvendinimas" is 6.9 times the size in
   Tiny5): a narrow pixel face is set larger, a wide monospaced one smaller. A face a website chose for itself keeps 1.
   base.php writes the face's name on <body>. */
.arcade-face--handjet { --arcade-scale: 1.15; }
.arcade-face--jersey-10 { --arcade-scale: 1.2; }
.arcade-face--vt323 { --arcade-scale: 1.25; }
.arcade-face--jetbrains-mono,
.arcade-face--doto { --arcade-scale: 0.82; }

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

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

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

body {
  margin: 0;
  background: var(--background, #fbf4e4);
  color: var(--text-primary, #22183f);
  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;
}

::selection {
  background: var(--accent, #ff5577);
  color: var(--on-accent, #22183f);
}

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

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

.arcade-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent, #ff5577);
  color: var(--on-accent, #22183f);
  font-weight: var(--arcade-body-strong);
  text-decoration: none;
  clip-path: var(--arcade-step);
}

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

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

/* The pixel art the templates draw (chrome.php, arcade_sprite): whole squares, never smoothed. */
.arcade-sprite {
  display: block;
  flex: none;
  shape-rendering: crispEdges;
  fill: currentColor;
}

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

/* One key for every button the theme draws itself, the same as the kit's (kit-theme.css): the fill with its own readable
   ink, stepped corners, an outline in a darker shade of the fill (the layer ::before) and a shaded foot. It rises under
   the pointer and presses in when clicked. The line of this theme in resilience.css gives the cookie notice and the phone
   action bar the same corners and foot (theme-chrome.test.mjs). A label may take two lines; it never runs out of the
   key. Focus is a dashed line inside the key: the stepped corners would cut a line drawn outside. */
.arcade-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.65rem 1.4rem calc(0.65rem + var(--arcade-px));
  border: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(0.9375rem * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  clip-path: var(--arcade-step);
  transition: transform var(--arcade-speed) ease, background-color var(--arcade-speed) ease;
}

.arcade-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--arcade-ring-corners);
  box-shadow: inset 0 0 0 var(--arcade-px) currentColor;
  pointer-events: none;
}

/* 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. */
.arcade-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.arcade-button--primary,
.arcade-button--accent {
  background: var(--accent, #ff5577);
  color: var(--on-accent, #22183f);
  box-shadow: inset 0 calc(-3 * var(--arcade-px)) 0 0 color-mix(in srgb, #000 22%, transparent), inset 0 calc(2 * var(--arcade-px)) 0 0 color-mix(in srgb, #fff 22%, transparent);
}

.arcade-button--primary::before,
.arcade-button--accent::before {
  color: color-mix(in srgb, var(--accent, #ff5577) 50%, #000);
}

.arcade-button--secondary {
  background: transparent;
  color: var(--text-primary, #22183f);
}

.arcade-button--secondary::before {
  color: var(--text-primary, #22183f);
}

.arcade-button--secondary:hover {
  background: color-mix(in srgb, var(--text-primary, #22183f) 10%, transparent);
}

.arcade-button:hover {
  transform: translateY(-2px);
}

.arcade-button:is(.arcade-button--primary, .arcade-button--accent):active {
  transform: translateY(var(--arcade-px));
  box-shadow: inset 0 calc(3 * var(--arcade-px)) 0 0 color-mix(in srgb, #000 22%, transparent);
}

.arcade-button:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: calc(-2px - 2 * var(--arcade-px));
}

.arcade-button--small {
  min-height: 2.5rem;
  padding: 0.4rem 1rem calc(0.4rem + var(--arcade-px));
  font-size: calc(0.875rem * var(--arcade-scale));
}

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

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

.arcade-announcement {
  background: var(--accent, #ff5577);
  color: var(--on-accent, #22183f);
  font-size: 0.875rem;
}

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

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

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

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

.arcade-announcement a {
  font-weight: var(--arcade-body-strong);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

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

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

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

/* A solid bar in the brand colour that stays at the top, like a game's status line. Under it hangs a dithered row of the
   same colour (::after): over the page while it scrolls, and over the phone menu when it is open. The bar has one
   height for every kind; the centred kind adds a row for the menu. */
.arcade-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--primary, #2a1f4f);
  color: var(--on-primary, #fffaf0);
}

.arcade-header::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: var(--arcade-fade-height);
  background: var(--arcade-fade-down);
  color: var(--primary, #2a1f4f);
  pointer-events: none;
}

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

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

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

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

/* The centred kind's menu row: on the deeper shade of the brand colour, a pair the colour contract keeps readable. */
.arcade-header__rail {
  background: var(--primary-alt, #3d2f70);
  color: var(--on-primary, #fffaf0);
}

.arcade-header__rail .arcade-nav {
  justify-content: center;
  max-width: calc(var(--arcade-width) + 2 * var(--arcade-gutter));
  margin-inline: auto;
  padding: 0.2rem var(--arcade-gutter);
}

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

.arcade-header__phone {
  color: inherit;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1rem * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
  text-decoration: none;
  white-space: nowrap;
}

.arcade-header__phone:hover {
  text-decoration: underline dotted 2px;
  text-underline-offset: 0.3em;
}

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

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

.arcade-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.3125rem * var(--arcade-scale));
  font-weight: var(--arcade-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. */
.arcade-header .arcade-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) {
  .arcade-header .arcade-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: calc(1.125rem * var(--arcade-scale));
  }
}

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

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

.arcade-header .logo-mask {
  background-color: var(--on-primary, #fffaf0) !important;
}

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

/* A slim line above the bar, on the deeper shade of the brand colour. */
.arcade-topbar {
  background: var(--primary-alt, #3d2f70);
  color: var(--on-primary, #fffaf0);
  font-size: 0.8125rem;
}

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

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

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

.arcade-topbar a:hover {
  text-decoration: underline dotted 2px;
  text-underline-offset: 0.25em;
}

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

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

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

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

/* Page names in the heading face. Each has room at its start for the pointer of a game's menu: it shows before the page
   you are on, and before the one under the pointer, without moving anything. */
.arcade-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.15rem;
  min-width: 0;
}

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

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

.arcade-nav__item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem 0.5rem 1.2rem;
  color: inherit;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1rem * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-decoration: none;
}

.arcade-nav__item > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.4rem;
  width: calc(2 * var(--arcade-px));
  height: calc(10 * var(--arcade-px) / 3);
  margin-top: calc(-5 * var(--arcade-px) / 3);
  background: currentColor;
  clip-path: var(--arcade-arrow);
  opacity: 0;
}

.arcade-nav__item > a:hover::before,
.arcade-nav__item--parent:focus-within > a::before,
.arcade-nav__item.is-current > a::before {
  opacity: 1;
}

.arcade-nav__item.is-current > a::before {
  animation: arcade-blink 1.1s steps(1, end) infinite;
}

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

/* A parent's pages open in a small window of the game: the surface, stepped corners, an outline. */
.arcade-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  background: var(--surface, #fffaf0);
  color: var(--text-primary, #22183f);
  clip-path: var(--arcade-step);
  visibility: hidden;
  opacity: 0;
}

.arcade-nav__children::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--arcade-ring-corners);
  box-shadow: inset 0 0 0 var(--arcade-px) currentColor;
  pointer-events: none;
}

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

.arcade-nav__children a {
  position: relative;
  padding: 0.5rem 0.75rem 0.5rem 1.4rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

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

.arcade-nav__children a:hover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.6rem;
  width: calc(2 * var(--arcade-px));
  height: calc(10 * var(--arcade-px) / 3);
  margin-top: calc(-5 * var(--arcade-px) / 3);
  background: currentColor;
  clip-path: var(--arcade-arrow);
}

@keyframes arcade-blink {
  50% { opacity: 0; }
}

/* The menu button: a small key outlined in the bar's ink, three pixel bars inside 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). */
.arcade-menu-button {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  clip-path: var(--arcade-step);
}

.arcade-menu-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--arcade-ring-corners);
  box-shadow: inset 0 0 0 var(--arcade-px) currentColor;
  pointer-events: none;
}

.arcade-menu-button:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.arcade-menu-button:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: calc(-2px - 2 * var(--arcade-px));
}

.arcade-menu-button__lines {
  display: grid;
  gap: var(--arcade-px);
  width: calc(6 * var(--arcade-px));
}

.arcade-menu-button__lines i {
  display: block;
  height: var(--arcade-px);
  background: currentColor;
  transition: transform var(--arcade-speed) steps(2, end), opacity var(--arcade-speed) steps(2, end);
}

.arcade-menu-button[aria-expanded="true"] .arcade-menu-button__lines i:nth-child(1) {
  transform: translateY(calc(2 * var(--arcade-px))) rotate(45deg);
}

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

.arcade-menu-button[aria-expanded="true"] .arcade-menu-button__lines i:nth-child(3) {
  transform: translateY(calc(-2 * var(--arcade-px))) rotate(-45deg);
}

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

/* A panel under the bar with every page, like a game's pause menu: page names large in the heading face, the pointer
   before the one under the finger. It scrolls inside itself when the pages are many, so the last one is always
   reachable. The bar's dithered row hangs over its top. */
.arcade-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
     (--arcade-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(--arcade-head, var(--arcade-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface, #fffaf0);
  color: var(--text-primary, #22183f);
  box-shadow: 0 calc(2 * var(--arcade-px)) 0 0 color-mix(in srgb, var(--text-primary, #22183f) 22%, transparent);
}

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

.arcade-drawer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: calc(var(--arcade-fade-height) + 0.25rem) var(--arcade-gutter) 1.75rem;
}

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

.arcade-drawer__nav {
  display: grid;
}

.arcade-drawer__item {
  padding-bottom: var(--arcade-px);
  background: repeating-linear-gradient(90deg, var(--arcade-line) 0 var(--arcade-px), transparent 0 calc(2 * var(--arcade-px))) bottom / 100% var(--arcade-px) no-repeat;
}

/* 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. */
.arcade-drawer__link {
  position: relative;
  display: block;
  padding: 0.8rem 0 0.8rem 1.5rem;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.375rem * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
  line-height: 1.3;
  text-decoration: none;
}

.arcade-drawer__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.15rem;
  width: calc(3 * var(--arcade-px));
  height: calc(5 * var(--arcade-px));
  margin-top: calc(-2.5 * var(--arcade-px));
  background: var(--accent-ink, #b8193f);
  clip-path: var(--arcade-arrow);
  opacity: 0;
}

.arcade-drawer__link:is(:hover, :focus-visible)::before {
  opacity: 1;
}

.arcade-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.85rem 1.5rem;
}

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

.arcade-drawer__children a:hover {
  color: var(--text-primary, #22183f);
}

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

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

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

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

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

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

/* The way back, in small heading-face letters, with pixel arrows between. It stands under the bar's dithered row. */
.arcade-breadcrumbs {
  max-width: calc(var(--arcade-width) + 2 * var(--arcade-gutter));
  margin-inline: auto;
  padding: calc(var(--arcade-fade-height) + 0.5rem) var(--arcade-gutter) 0;
}

.arcade-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #584c6c);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(0.875rem * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
  list-style: none;
}

.arcade-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.arcade-breadcrumbs li + li::before {
  content: "";
  flex: none;
  width: calc(2 * var(--arcade-px));
  height: calc(10 * var(--arcade-px) / 3);
  background: currentColor;
  clip-path: var(--arcade-arrow);
  opacity: 0.7;
}

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

.arcade-breadcrumbs a:hover {
  text-decoration: underline dotted 2px;
  text-underline-offset: 0.3em;
}

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

/* ------------------------------------------------------------------ Coloured bands */

/* The kit's tinted, brand-coloured and accent bands, and its photographs, meet the page through a dithered row of the
   page's own colour at their top and their foot, so a band's edge looks drawn by a machine with few colours. The rows
   stand inside the band (the band's padding is deeper than they are), under its content. */
.kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::before,
.kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent, .kit-section--image)::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  height: var(--arcade-fade-height);
  color: var(--background, #fbf4e4);
  pointer-events: none;
}

.kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::before {
  top: 0;
  background: var(--arcade-fade-down);
}

.kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent, .kit-section--image)::after {
  bottom: 0;
  background: var(--arcade-fade-up);
}

/* A band that opens the page lies under the bar's own dithered row, so it draws none of its own there. A band that ends
   the page fades straight into the footer in the footer's colour, and the footer then needs no row of its own above it
   (two rows of dots with a strip of page between them read as a seam). */
.arcade-main > .kit-root:first-child > .kit-section::before {
  display: none;
}

.arcade-main > .kit-root:last-child > .kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent, .kit-section--image)::after {
  color: var(--primary, #2a1f4f);
}

.arcade-main:has(> .kit-root:last-child > .kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent, .kit-section--image)) + .arcade-footer {
  margin-top: 0;
}

.arcade-main:has(> .kit-root:last-child > .kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent, .kit-section--image)) + .arcade-footer::before {
  display: none;
}

/* A photograph behind words is seen through the fine lines of an old screen, and its heading casts a hard pixel shadow. */
.kit-section--image {
  background-image: repeating-linear-gradient(to bottom, transparent 0 2px, color-mix(in srgb, #000 18%, transparent) 2px 3px), linear-gradient(color-mix(in srgb, #000 var(--kit-section-shade), transparent), color-mix(in srgb, #000 var(--kit-section-shade), transparent)), var(--kit-section-image, none);
}

:is(.kit-section--image, .kit-slide--image) :is(.kit-heading--1, .kit-heading--2) {
  text-shadow: var(--arcade-px) var(--arcade-px) 0 color-mix(in srgb, #000 55%, transparent);
}

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

/* The title screen: the page's heading very large in the heading face, ending in the blinking cursor, on the tinted
   surface sown with a grid of pixel dots; the picture in a stepped frame over a block of the accent colour, with two
   small pixel sparks. The band fades into the page through the dithered row at its foot. */
.arcade-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 7vw, 6rem) var(--arcade-gutter) calc(clamp(3rem, 7vw, 6rem) + var(--arcade-fade-height));
  background-color: var(--surface-alt, #f2e3c4);
  background-image: conic-gradient(from 270deg at var(--arcade-px) var(--arcade-px), color-mix(in srgb, var(--text-primary, #22183f) 16%, transparent) 25%, transparent 0);
  background-position: 1.25rem 1.25rem;
  background-size: 2rem 2rem;
}

.arcade-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: var(--arcade-fade-height);
  background: var(--arcade-fade-up);
  color: var(--background, #fbf4e4);
  pointer-events: none;
}

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

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

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

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

.arcade-hero--words .arcade-hero__copy {
  justify-items: center;
  max-width: 48rem;
  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 ("Apgyvendinimas" in Tiny5 at 36 px is 248 px). */
.arcade-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem) * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
  letter-spacing: 0;
  line-height: 1.15;
  text-wrap: balance;
}

/* The cursor that waits after the page's heading (kit-theme.css explains it; this is the theme's own heading). */
.arcade-hero__title::after,
.arcade-article__header h1::after,
.arcade-not-found h1::after {
  content: "_" / "";
  margin-inline-start: 0.06em;
  color: var(--accent-ink, #b8193f);
  animation: arcade-blink 1.1s steps(1, end) infinite;
}

.arcade-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #584c6c);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
}

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

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

.arcade-hero__icon {
  margin-top: 0.2em;
  color: var(--accent-ink, #b8193f);
}

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

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

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

.arcade-stars {
  display: inline-flex;
  gap: 0.15rem;
}

.arcade-stars svg {
  width: 1rem;
  height: 1rem;
  fill: color-mix(in srgb, var(--text-primary, #22183f) 22%, transparent);
  shape-rendering: crispEdges;
}

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

.arcade-hero__trustpilot {
  color: var(--accent-ink, #b8193f);
  font-weight: var(--arcade-body-strong);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* The picture: cut with large steps, outlined, over a block of the accent colour set off down and to the right. */
.arcade-hero__media {
  position: relative;
  margin: 0 calc(4 * var(--arcade-dot)) calc(4 * var(--arcade-dot)) 0;
}

.arcade-hero__media::before {
  content: "";
  position: absolute;
  inset: calc(4 * var(--arcade-dot)) calc(-4 * var(--arcade-dot)) calc(-4 * var(--arcade-dot)) calc(4 * var(--arcade-dot));
  background: var(--accent, #ff5577);
  clip-path: var(--arcade-step-large);
}

.arcade-hero__frame {
  position: relative;
  display: block;
  clip-path: var(--arcade-step-large);
  background: var(--text-primary, #22183f);
  padding: var(--arcade-px);
}

.arcade-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  clip-path: var(--arcade-step-large);
}

.arcade-hero__spark {
  position: absolute;
  z-index: 1;
  width: calc(7 * var(--arcade-dot));
  height: calc(7 * var(--arcade-dot));
  color: var(--accent-ink, #b8193f);
}

.arcade-hero__spark--one {
  top: calc(-3.5 * var(--arcade-dot));
  left: calc(-3.5 * var(--arcade-dot));
}

.arcade-hero__spark--two {
  right: calc(-6 * var(--arcade-dot));
  bottom: calc(5 * var(--arcade-dot));
  width: calc(5 * var(--arcade-dot));
  height: calc(5 * var(--arcade-dot));
  color: var(--text-primary, #22183f);
}

.arcade-hero--words .arcade-hero__spark {
  display: none;
}

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

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

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

.arcade-article__header {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
}

.arcade-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0;
  color: var(--accent-ink, #b8193f);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(0.9375rem * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
}

.arcade-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2rem, 1.4rem + 2.4vw, 3.25rem) * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
  line-height: 1.15;
  text-wrap: balance;
}

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

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

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

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

.arcade-prose h2 {
  font-size: calc(1.75rem * var(--arcade-scale));
}

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

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

.arcade-prose a {
  color: var(--accent-ink, #b8193f);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.arcade-prose a:hover {
  text-decoration-style: solid;
}

.arcade-prose ul {
  list-style: square;
}

.arcade-prose li::marker {
  color: var(--accent-ink, #b8193f);
}

/* A quotation in a window of the game: the tinted surface, stepped corners, the text colour's pixel bar at its side. */
.arcade-prose blockquote {
  position: relative;
  margin-inline: 0;
  padding: 1.1rem 1.25rem 1.1rem calc(1.25rem + 2 * var(--arcade-px));
  background: var(--surface-alt, #f2e3c4);
  color: var(--text-primary, #22183f);
  clip-path: var(--arcade-step);
}

.arcade-prose blockquote::before {
  content: "";
  position: absolute;
  top: calc(2 * var(--arcade-px));
  bottom: calc(2 * var(--arcade-px));
  left: 0;
  width: calc(2 * var(--arcade-px));
  background: var(--accent, #ff5577);
}

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

.arcade-prose img {
  display: block;
  clip-path: var(--arcade-step-large);
}

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

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

.arcade-prose th {
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--arcade-heading-weight);
}

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

.arcade-prose hr {
  height: var(--arcade-px);
  margin: 2.25em 0;
  border: 0;
  background: repeating-linear-gradient(90deg, var(--arcade-line) 0 calc(2 * var(--arcade-px)), transparent 0 calc(3 * var(--arcade-px)));
}

/* Code reads like the screen of an old terminal: the brand colour with its own ink. */
.arcade-prose pre {
  overflow-x: auto;
  padding: 1.1rem 1.25rem;
  background: var(--primary, #2a1f4f);
  color: var(--on-primary, #fffaf0);
  clip-path: var(--arcade-step);
}

.arcade-prose :not(pre) > code {
  padding: 0.1em 0.35em;
  background: var(--surface-alt, #f2e3c4);
  color: var(--text-primary, #22183f);
  font-size: 0.92em;
}

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

/* line: a dotted row of pixels. dashed: a row of pixel dashes. dotted: three pixel squares, the brand colour between two
   of the accent. */
.arcade-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--arcade-px));
  max-width: calc(var(--arcade-width) + 2 * var(--arcade-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--arcade-gutter);
}

.arcade-divider__line {
  width: 100%;
  height: var(--arcade-px);
  background: repeating-linear-gradient(90deg, var(--arcade-line) 0 var(--arcade-px), transparent 0 calc(2 * var(--arcade-px)));
}

.arcade-divider--dashed .arcade-divider__line {
  height: calc(2 * var(--arcade-px));
  background: repeating-linear-gradient(90deg, var(--arcade-line) 0 calc(4 * var(--arcade-px)), transparent 0 calc(6 * var(--arcade-px)));
}

.arcade-divider--dotted span {
  width: calc(3 * var(--arcade-px));
  height: calc(3 * var(--arcade-px));
  background: var(--accent, #ff5577);
}

.arcade-divider--dotted span:nth-child(2) {
  background: var(--primary, #2a1f4f);
}

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

/* The footer is the bar again, in the brand colour with its own ink: a pair the colour contract keeps readable in every
   palette and with a website's own colours. It rises out of the page through a dithered row of its colour. */
.arcade-footer {
  position: relative;
  margin-top: var(--arcade-fade-height);
  background: var(--primary, #2a1f4f);
  color: var(--on-primary, #fffaf0);
}

.arcade-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--arcade-fade-height);
  background: var(--arcade-fade-up);
  color: var(--primary, #2a1f4f);
  pointer-events: none;
}

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

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

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

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

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

.arcade-footer .logo-mask {
  background-color: var(--on-primary, #fffaf0) !important;
}

.arcade-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);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--on-primary, #fffaf0) 45%, transparent) 0 var(--arcade-px), transparent 0 calc(2 * var(--arcade-px))) bottom / 100% var(--arcade-px) no-repeat;
}

.arcade-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem) * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
  line-height: 1.2;
  text-wrap: balance;
}

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

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

.arcade-footer__tagline,
.arcade-footer__contact p:not(.arcade-footer__title),
.arcade-footer__copyright {
  margin: 0;
  font-size: 0.9375rem;
}

/* A column's title: the heading face after a pixel arrow. */
.arcade-footer__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1rem * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
  line-height: 1.4;
}

.arcade-footer__title::before {
  content: "";
  flex: none;
  width: calc(2 * var(--arcade-px));
  height: calc(10 * var(--arcade-px) / 3);
  background: currentColor;
  clip-path: var(--arcade-arrow);
}

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

.arcade-footer__links a,
.arcade-footer__contact a,
.arcade-footer__legal a,
.arcade-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

.arcade-footer__links a:hover,
.arcade-footer__contact a:hover,
.arcade-footer__legal a:hover,
.arcade-footer__inline a:hover {
  text-decoration: underline dotted 2px;
  text-underline-offset: 0.3em;
}

/* Social links: small keys outlined in the footer's ink. */
.arcade-footer__social a {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: inherit;
  clip-path: var(--arcade-step);
}

.arcade-footer__social a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--arcade-ring-corners);
  box-shadow: inset 0 0 0 var(--arcade-px) currentColor;
  pointer-events: none;
}

.arcade-footer__social a:hover {
  background: color-mix(in srgb, currentColor 16%, transparent);
}

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

.arcade-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--on-primary, #fffaf0) 45%, transparent) 0 var(--arcade-px), transparent 0 calc(2 * var(--arcade-px))) top / 100% var(--arcade-px) no-repeat;
}

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

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

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

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

/* Game over, kindly: the number very large in the heading face, a row of hearts with the last one lost, the words, the
   way home and the website's main pages. */
.arcade-not-found {
  padding: clamp(4rem, 9vw, 7rem) var(--arcade-gutter);
  text-align: center;
}

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

.arcade-not-found__number {
  margin: 0;
  color: var(--accent-ink, #b8193f);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(5rem, 3rem + 10vw, 9rem) * var(--arcade-scale));
  font-weight: var(--arcade-heading-weight);
  line-height: 1;
  text-shadow: calc(2 * var(--arcade-px)) calc(2 * var(--arcade-px)) 0 color-mix(in srgb, var(--text-primary, #22183f) 18%, transparent);
}

.arcade-not-found__lives {
  display: flex;
  gap: calc(2 * var(--arcade-px));
  color: var(--accent-ink, #b8193f);
}

.arcade-not-found__lives .arcade-sprite {
  width: calc(7 * var(--arcade-px) * 1.5);
  height: calc(6 * var(--arcade-px) * 1.5);
}

.arcade-not-found__lives .arcade-sprite--lost {
  color: color-mix(in srgb, var(--text-primary, #22183f) 25%, transparent);
}

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

.arcade-not-found p {
  margin: 0;
  color: var(--text-secondary, #584c6c);
}

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

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

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

.arcade-form-success p {
  margin: 0;
  color: var(--text-secondary, #584c6c);
}

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

/* The shared bar (resilience.css) on the theme's surface, under a dotted row of pixels, with its keys. */
body .theme-action-bar {
  border-top: 0;
  background: var(--surface, #fffaf0) repeating-linear-gradient(90deg, var(--text-primary, #22183f) 0 var(--arcade-px), transparent 0 calc(2 * var(--arcade-px))) top / 100% var(--arcade-px) no-repeat;
}

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

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

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

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

  .arcade-button:hover,
  .arcade-button:active {
    transform: none;
  }
}