/*
 * Folio's frame: a website bound like a book. The rail (the spine) down the left edge with the numbered contents list,
 * the bar that stands in for it on a narrow or short window, the running head of an inner page, the three openings, the
 * article body, the divider, the back cover (the footer) and the page not found. Everything inside a kit block is in
 * kit-theme.css.
 *
 * Two layouts, chosen by the window:
 *   Rail   at least 80rem wide and 38rem tall: the rail stands beside the page (body is moved over by its width) and the
 *          page's first screen has no bar across its top.
 *   Bar    anything else: a bar across the top with the name, the one button and the menu button; the same rail is the
 *          panel that button opens, sliding in from the left under the bar.
 * The two queries below are written out wherever a rule belongs to one of them; they are exact opposites.
 *
 * 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. The cloth (the rail and the
 * footer) is the primary colour with on-primary words; its quieter words are on-primary mixed a fifth of the way into
 * the cloth, which keeps them above 3 to 1 for any pair the contract accepts. The accent on the cloth is only ever a
 * mark (the ribbon) or a fill with on-accent words (the button). A dark palette is just other values for the same tokens.
 *
 * Type comes from the layout: --font-heading, --font-body, --folio-heading-weight and --folio-body-strong (the heaviest
 * weights the font palette loads). Never write a font-weight number other than 400 here. An italic is asked for only
 * under html.folio-italic, which the layout writes when the font palette loads the heading face's own italic.
 */

/* ------------------------------------------------------------------ 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. */
:where(:root) {
  --folio-rail: 16rem;
  --folio-shift: 0px;
  --folio-bar: 4rem;
  --folio-width: 76rem;
  --folio-gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --folio-radius: 0.25rem;
  --folio-button-radius: 0.25rem;
  --folio-heading-weight: 500;
  --folio-body-strong: 600;
  --folio-speed: 180ms;
  --folio-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --folio-line: var(--border, #d9d1c0);
}

@media (min-width: 96rem) and (min-height: 38rem) {
  :where(:root) {
    --folio-rail: 18rem;
  }
}

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

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

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

body {
  margin: 0;
  background: var(--background, #f6f2ea);
  color: var(--text-primary, #1d1c19);
  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: color-mix(in srgb, var(--accent, #c9a04f) 34%, transparent);
}

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

/* On the cloth and on the accent the ring is the colour of the words there: the accent's readable shade is made for
   paper, and on a dark cloth it would not be seen. */
.folio-header :focus-visible {
  outline-color: var(--folio-rail-ink);
}

.folio-footer :focus-visible {
  outline-color: var(--folio-foot-ink);
}

.folio-announcement :focus-visible {
  outline-color: var(--on-accent, #1d1608);
}

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

.folio-skip-link {
  position: absolute;
  top: -5rem;
  left: calc(var(--folio-shift) + 1rem);
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--folio-button-radius);
  background: var(--primary, #1f2b27);
  color: var(--on-primary, #f8f4ea);
  font-weight: var(--folio-body-strong);
  text-decoration: none;
}

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

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

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

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

.folio-button--primary {
  background: var(--primary, #1f2b27);
  color: var(--on-primary, #f8f4ea);
}

.folio-button--primary:hover {
  background: var(--primary-alt, #2c3b35);
}

.folio-button--accent {
  background: var(--accent, #c9a04f);
  color: var(--on-accent, #1d1608);
}

/* The header's and footer's one button ends in a short arrow that steps forward on hover. Drawn as a shape in the
   label's colour, so it needs no picture. The hover of the fill is a ring in the words' colour, not a lighter fill: a
   lighter fill would bring the words' contrast under what the colour contract promises for this pair. */
.folio-button--accent::after {
  content: "";
  flex: none;
  width: 1.05rem;
  height: 0.62rem;
  background: currentColor;
  clip-path: polygon(0 41%, 80% 41%, 62% 10%, 71% 0, 100% 50%, 71% 100%, 62% 90%, 80% 59%, 0 59%);
  transition: transform var(--folio-speed) var(--folio-ease);
}

.folio-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #1d1608) 50%, transparent);
}

.folio-button--accent:hover::after {
  transform: translateX(0.25rem);
}

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

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

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

.folio-button--block {
  justify-content: space-between;
  width: 100%;
  text-align: left;
}

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

/* A slim line in the accent colour across the top of the page (beside the rail, not over it). */
.folio-announcement {
  background: var(--accent, #c9a04f);
  color: var(--on-accent, #1d1608);
  font-size: 0.875rem;
}

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

.folio-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  padding: 0.5rem var(--folio-gutter);
  text-align: center;
}

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

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

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

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

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

/* ------------------------------------------------------------------ The contact line (header_topbar) */

.folio-topbar {
  border-bottom: 1px solid var(--folio-line);
  background: var(--surface-alt, #ece6d8);
  color: var(--text-secondary, #5b564c);
  font-size: 0.8125rem;
}

.folio-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 2.25rem;
  padding: 0 var(--folio-gutter);
}

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

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

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

.folio-topbar__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.folio-topbar__social svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

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

/* ------------------------------------------------------------------ The header: its two cloths */

/* The cloth (header_simple, header_topbar): the palette's primary with its own words. The paper (header_centered): the
   page's surface with the page's words. Everything in the bar and the rail reads these five values. */
.folio-header {
  --folio-rail-fill: var(--primary, #1f2b27);
  --folio-rail-ink: var(--on-primary, #f8f4ea);
  --folio-rail-soft: color-mix(in srgb, var(--on-primary, #f8f4ea) 80%, var(--primary, #1f2b27));
  --folio-rail-line: color-mix(in srgb, var(--on-primary, #f8f4ea) 18%, transparent);
  --folio-rail-hover: color-mix(in srgb, var(--on-primary, #f8f4ea) 10%, transparent);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--folio-rail-fill);
  color: var(--folio-rail-ink);
}

.folio-header--paper {
  --folio-rail-fill: var(--surface, #fffdf8);
  --folio-rail-ink: var(--text-primary, #1d1c19);
  --folio-rail-soft: var(--text-secondary, #5b564c);
  --folio-rail-line: var(--folio-line);
  --folio-rail-hover: color-mix(in srgb, var(--text-primary, #1d1c19) 7%, transparent);
}

/* ------------------------------------------------------------------ The bar */

.folio-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--folio-bar);
  padding: 0.5rem var(--folio-gutter);
  background: var(--folio-rail-fill);
}

.folio-header--paper .folio-bar {
  border-bottom: 1px solid var(--folio-rail-line);
}

.folio-bar__brand {
  display: inline-flex;
  min-width: 0;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}

.folio-bar__actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.75rem;
  /* Never narrower than what it must hold: the menu button keeps its place however long the name beside it is. */
  min-width: min-content;
}

/* The bar's button gives way before anything runs off the screen: its label may wrap, and where it then takes more
   than one line or squeezes the name, theme.js takes it out of the bar (folio-bar-tight). It is still in the menu, and
   on a phone in the action bar. */
.folio-bar .folio-header__cta {
  flex: 0 1 auto;
  min-width: 0;
}

.folio-header.folio-bar-tight .folio-bar .folio-header__cta {
  display: none;
}

.folio-bar__slot,
.folio-rail__slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* On a phone the bar holds the name and the menu button; the button is in the panel and in the action bar. */
@media (max-width: 39.99rem) {
  .folio-bar .folio-header__cta {
    display: none;
  }
}

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

.folio-brand__name {
  min-width: 0;
  padding-block: 0.1em;
  font-family: var(--font-heading, serif);
  font-size: 1.3rem;
  font-weight: var(--folio-heading-weight);
  letter-spacing: 0;
  line-height: 1.25;
}

/* In the bar a name of eighty characters takes two lines, never three (verify-theme-stress.mjs, header-rows): on a wide
   bar it is a plain block with room for them; on a phone the shared rule clamps it to two (resilience.css), and the box
   clips a little past its edges so a caron above the first line and a tail under the second stay whole. */
.folio-bar .folio-brand__name {
  display: block;
  max-width: min(34rem, 56vw);
  overflow: visible;
}

/* A very long name is set a step smaller, and once the button has left the bar the name has the bar to itself. */
.folio-bar .folio-brand--longer .folio-brand__name {
  font-size: 1.125rem;
}

.folio-header.folio-bar-tight .folio-bar .folio-brand__name {
  max-width: 100%;
}

@media (max-width: 39.99rem) {
  .folio-bar .folio-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.15rem;
  }

  .folio-bar .folio-brand--longer .folio-brand__name {
    font-size: 1.0625rem;
  }
}

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

/* A logo. The shared render_logo states max-height: 3rem inline, so a size here needs !important to hold. */
.folio-bar .folio-brand__logo,
.folio-bar .brand-logo-original {
  max-height: 2.5rem !important;
  width: auto;
}

.folio-header .logo-mask {
  background-color: var(--folio-rail-ink) !important;
}

/* A drawn logo (an SVG file) saved without a width and a height has a shape but no size of its own, and beside the name
   in a row it then takes no room at all: the logo is simply not there. Given a height, its width follows from its
   shape. A photograph of a logo keeps its own size under the limits above. */
.folio-bar .brand-logo-original[src*=".svg"] {
  height: 2.5rem !important;
}

.folio-rail .brand-logo-original[src*=".svg"] {
  height: 3.75rem !important;
  object-position: left center;
}

.folio-footer .brand-logo-original[src*=".svg"] {
  height: 3.25rem !important;
  object-position: left center;
}

/* The menu button: two lines that cross while the rail is open. */
.folio-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--folio-rail-line);
  border-radius: var(--folio-button-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--folio-speed) ease, background-color var(--folio-speed) ease;
}

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

.folio-menu-button__lines {
  display: grid;
  gap: 0.4rem;
  width: 1.2rem;
}

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

.folio-menu-button[aria-expanded="true"] .folio-menu-button__lines i:nth-child(1) {
  transform: translateY(calc(0.2rem + 0.75px)) rotate(45deg);
}

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

/* ------------------------------------------------------------------ The rail */

/* What is true in both layouts: a column with the contents list in its middle and the contact details and the button
   at its foot. As a panel (Bar, below) it slides in under the bar; as the rail (Rail, further below) it stands still. */
.folio-rail {
  display: flex;
  flex-direction: column;
  background: var(--folio-rail-fill);
  color: var(--folio-rail-ink);
}

.folio-rail__head {
  flex: none;
  padding: 2.1rem 1.5rem 1.6rem;
  border-bottom: 1px solid var(--folio-rail-line);
}

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

/* In the rail the logo stands over the name, and the name is the largest thing on the spine: up to three balanced
   lines, never clipped (it is a plain block, so nothing cuts the marks of its letters). */
.folio-rail .folio-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.folio-rail .folio-brand__name {
  display: block;
  max-width: 100%;
  overflow: visible;
  font-size: 1.7rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-wrap: balance;
}

.folio-rail .folio-brand--long .folio-brand__name {
  font-size: 1.4rem;
  line-height: 1.24;
}

.folio-rail .folio-brand--longer .folio-brand__name {
  font-size: 1.15rem;
  line-height: 1.3;
}

.folio-rail .folio-brand:has(.folio-brand__logo, .brand-logo-original, .logo-mask) .folio-brand__name {
  font-size: 1.25rem;
}

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

.folio-rail .folio-brand__logo,
.folio-rail .brand-logo-original {
  max-width: 100%;
  max-height: 3.75rem !important;
  width: auto;
}

.folio-rail__tagline {
  margin: 0.7rem 0 0;
  color: var(--folio-rail-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* The contents list. Each entry: its number in small figures, then the page's name in the heading face. The entry being
   read is in the full ink with a line under its name; the others are a shade quieter until the pointer finds them. */
.folio-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.05rem;
  min-height: 0;
  padding: 1.1rem 1.5rem 1.4rem;
}

.folio-nav__item {
  flex: none;
  min-width: 0;
}

.folio-nav__row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.folio-nav__link {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  gap: 0.9rem;
  min-width: 0;
  padding: 0.5rem 0;
  color: var(--folio-rail-soft);
  text-decoration: none;
  transition: color var(--folio-speed) ease;
}

/* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited value. */
.folio-nav__number {
  flex: none;
  width: 1.4rem;
  font-size: 0.6875rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--folio-body-strong);
  letter-spacing: 0.08em;
  line-height: 1;
}

.folio-nav__label {
  display: block;
  min-width: 0;
  font-family: var(--font-heading, serif);
  font-size: 1.125rem;
  font-weight: var(--folio-heading-weight);
  line-height: 1.3;
  transition: transform var(--folio-speed) var(--folio-ease);
}

.folio-nav__link:hover,
.folio-nav__item.is-current > .folio-nav__row > .folio-nav__link {
  color: var(--folio-rail-ink);
}

.folio-nav__link:hover .folio-nav__label {
  transform: translateX(0.2rem);
}

.folio-nav__item.is-current > .folio-nav__row .folio-nav__label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
}

/* The small button beside an entry that has pages of its own: a plus that loses its upright while the list is open. */
.folio-nav__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: -0.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--folio-rail-soft);
  cursor: pointer;
  transition: background-color var(--folio-speed) ease, color var(--folio-speed) ease;
}

.folio-nav__toggle:hover {
  background: var(--folio-rail-hover);
  color: var(--folio-rail-ink);
}

.folio-nav__toggle svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.folio-nav__toggle-upright {
  transform-origin: center;
  transition: transform var(--folio-speed) var(--folio-ease);
}

.folio-nav__toggle[aria-expanded="true"] .folio-nav__toggle-upright {
  transform: scaleY(0);
}

.folio-nav__children {
  display: grid;
  gap: 0.05rem;
  padding: 0 0 0.7rem 2.3rem;
}

.folio-nav__children[hidden] {
  display: none;
}

.folio-nav__children a {
  padding: 0.32rem 0;
  color: var(--folio-rail-soft);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--folio-speed) ease;
}

.folio-nav__children a:hover,
.folio-nav__children a.is-current {
  color: var(--folio-rail-ink);
}

.folio-nav__children a.is-current {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* The foot of the rail: a module's widgets (the header_actions slot), the phone and the email, the social links, then the
   one button across the rail's width. */
.folio-rail__foot {
  display: grid;
  flex: none;
  gap: 1.1rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--folio-rail-line);
}

/* The rail's button: the label at the left, the arrow at the right, with a little less room at its sides than a
   button on the page, so "Discuss your project" keeps one line in the rail. */
.folio-rail__foot .folio-button {
  gap: 0.6rem;
  padding-inline: 1rem;
  font-size: 0.9rem;
}

.folio-rail__foot:empty {
  display: none;
}

.folio-rail__contact {
  display: grid;
  justify-items: start;
  gap: 0.15rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.folio-header__phone {
  color: var(--folio-rail-ink);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--folio-body-strong);
  text-decoration: none;
}

.folio-rail__email {
  max-width: 100%;
  color: var(--folio-rail-soft);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.folio-header__phone:hover,
.folio-rail__email:hover {
  color: var(--folio-rail-ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.folio-rail__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.folio-rail__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--folio-rail-line);
  border-radius: 50%;
  color: var(--folio-rail-soft);
  transition: border-color var(--folio-speed) ease, color var(--folio-speed) ease;
}

.folio-rail__social a:hover {
  border-color: currentColor;
  color: var(--folio-rail-ink);
}

.folio-rail__social svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

/* The ribbon: a bookmark in the accent colour down the spine's edge. theme.js sets --folio-read (0 to 1) as the page
   is read; without scripts it hangs at its shortest. Only the rail shows it. */
.folio-ribbon {
  display: none;
}

/* ------------------------------------------------------------------ Bar: the rail as the menu's panel */

@media (max-width: 79.99rem), (max-height: 37.99rem) {
  /* Under the whole header, wherever it stands on the screen: theme.js measures its lower edge (--folio-head: the bar
     below an announcement, a name on two lines). 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). */
  .folio-rail {
    position: fixed;
    top: var(--folio-head, var(--folio-bar));
    bottom: 0;
    left: 0;
    z-index: 1;
    width: min(23rem, 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 24px 0 48px -32px rgb(0 0 0 / 0.45);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 0.34s var(--folio-ease), visibility 0s linear 0.34s;
  }

  .folio-header--paper .folio-rail {
    border-right: 1px solid var(--folio-rail-line);
  }

  /* On a phone the panel is the whole width: a sliver of dimmed page at its side would only look like a mistake. */
  @media (max-width: 29.99rem) {
    .folio-rail {
      width: 100%;
    }
  }

  html.folio-menu-open .folio-rail {
    transform: none;
    visibility: visible;
    transition: transform 0.34s var(--folio-ease), visibility 0s;
  }

  /* The page behind an open menu is dimmed; a click on the dimmed part closes the menu (theme.js). */
  .folio-header::before {
    content: "";
    position: fixed;
    inset: var(--folio-head, var(--folio-bar)) 0 0 0;
    background: rgb(12 12 12 / 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  html.folio-menu-open .folio-header::before {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
  }

  html.folio-menu-open {
    overflow: hidden;
  }

  /* The bar above already carries the name. */
  .folio-rail__head {
    display: none;
  }

  .folio-nav {
    flex: none;
    padding-top: 0.9rem;
  }

  /* A thumb's height for every entry. */
  .folio-nav__link {
    padding-block: 0.7rem;
  }

  .folio-nav__label {
    font-size: 1.25rem;
  }

  .folio-nav__children a {
    padding-block: 0.5rem;
    font-size: 1rem;
  }

  .folio-rail__foot {
    margin-top: auto;
  }
}

/* ------------------------------------------------------------------ Rail: the spine beside the page */

@media (min-width: 80rem) and (min-height: 38rem) {
  :where(:root) {
    --folio-shift: var(--folio-rail);
  }

  html {
    scroll-padding-top: 1.5rem;
  }

  body {
    padding-left: var(--folio-rail);
  }

  .folio-header {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--folio-rail);
    /* While one page gives way to the next the spine keeps its place (the shared motion cross-fades pages). */
    view-transition-name: folio-rail;
  }

  .folio-header--cloth {
    box-shadow: inset -1px 0 0 var(--folio-rail-line);
  }

  .folio-header--paper {
    border-right: 1px solid var(--folio-rail-line);
  }

  .folio-bar {
    display: none;
  }

  .folio-rail {
    height: 100%;
  }

  /* A contents list longer than the window scrolls inside the rail, between the name and the foot, which keep their
     places. Its edges fade, so a list that goes on is seen to go on. The padding keeps a list that fits clear of the
     fade. */
  .folio-nav {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.9rem, #000 calc(100% - 1.3rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 0.9rem, #000 calc(100% - 1.3rem), transparent 100%);
  }

  /* The contact line (header_topbar) holds the phone, the email and the social links, so the rail's foot leaves them out. */
  .folio-rail__contact--menu,
  .folio-rail__social--menu {
    display: none;
  }

  .folio-ribbon {
    position: absolute;
    top: 0;
    right: -2px;
    display: block;
    width: 5px;
    height: max(3.25rem, calc(var(--folio-read, 0) * 100%));
    background: var(--accent, #c9a04f);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 5px), 0 100%);
    pointer-events: none;
  }

  /* The paper rail (header_centered): everything on the rail's middle line, the number over the name. */
  .folio-header--centered .folio-rail__head {
    text-align: center;
  }

  .folio-header--centered .folio-rail .folio-brand {
    align-items: center;
  }

  .folio-header--centered .folio-nav__row {
    position: relative;
    justify-content: center;
  }

  .folio-header--centered .folio-nav__link {
    flex: 0 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding-inline: 1.9rem;
    text-align: center;
  }

  .folio-header--centered .folio-nav__number {
    width: auto;
  }

  .folio-header--centered .folio-nav__link:hover .folio-nav__label {
    transform: none;
  }

  .folio-header--centered .folio-nav__toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin: -1.25rem -0.7rem 0 0;
  }

  .folio-header--centered .folio-nav__children {
    justify-items: center;
    padding-left: 0;
    text-align: center;
  }

  .folio-header--centered .folio-rail__contact {
    justify-items: center;
    text-align: center;
  }

  .folio-header--centered .folio-rail__social {
    justify-content: center;
  }

  /* The small cookie button stands at the lower left of the window, where the rail's button is: move it onto the page. */
  .pagestic-cookie-manage {
    left: calc(var(--folio-rail) + 1rem) !important;
  }
}

/* The list's own slim scrollbar, in the rail's colours: the system's grey bar would stand out on the cloth. Browsers
   without these parts take the standard pair (the same split as the shared stylesheet's). */
.folio-nav::-webkit-scrollbar {
  width: 5px;
}

.folio-nav::-webkit-scrollbar-track {
  background: transparent;
}

.folio-nav::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--folio-rail-line);
}

@supports not selector(::-webkit-scrollbar) {
  .folio-nav { scrollbar-width: thin; scrollbar-color: var(--folio-rail-line) transparent; }
}

/* A short window: the rail gives up its tagline and its email before the contents list loses room. */
@media (min-width: 80rem) and (min-height: 38rem) and (max-height: 46rem) {
  .folio-rail__head {
    padding-block: 1.5rem 1.2rem;
  }

  .folio-rail__tagline,
  .folio-rail__email {
    display: none;
  }

  .folio-rail__foot {
    gap: 0.85rem;
    padding-block: 1rem 1.25rem;
  }
}

/* ------------------------------------------------------------------ The running head (breadcrumbs) */

.folio-breadcrumbs {
  padding-inline: var(--folio-gutter);
}

.folio-breadcrumbs__inner {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  max-width: var(--folio-width);
  margin-inline: auto;
  padding: 1.15rem 0 0.95rem;
  border-bottom: 1px solid var(--folio-line);
}

/* The chapter number: the figures of the page's entry in the rail, in the heading face and the accent's readable shade. */
.folio-breadcrumbs__chapter {
  flex: none;
  color: var(--accent-ink, #7a5413);
  font-family: var(--font-heading, serif);
  font-size: 1.35rem;
  font-synthesis: none;
  font-variant-numeric: lining-nums;
  font-weight: var(--folio-heading-weight);
  line-height: 1;
}

html.folio-italic .folio-breadcrumbs__chapter {
  font-style: italic;
}

.folio-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #5b564c);
  font-size: 0.8125rem;
  line-height: 1.5;
  list-style: none;
}

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

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

.folio-breadcrumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

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

/* The picture takes what is left of the first screen: the screen less where the opening starts on the page.
   --folio-opening-top is that place; theme.js measures it (an announcement, the bar, the running head above it), and
   the values here stand in until it has (cms/THEME_DEVELOPMENT.md, rule 19; opening-first-screen.test.mjs). */
.folio-opening {
  --folio-opening-top: var(--folio-bar);
  /* An opening further down a page is three quarters of a screen. */
  --folio-opening-height: 74svh;
}

.folio-main > .folio-opening:first-child,
.folio-main > nav[aria-label]:first-child + .folio-opening {
  --folio-opening-height: calc(100svh - var(--folio-opening-top));
}

.folio-main > nav[aria-label]:first-child + .folio-opening {
  --folio-opening-top: calc(var(--folio-bar) + 3.4rem);
  /* The shared short top of a first section is not for a picture that fills the window. */
  padding-top: 0;
}

.folio-opening__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(27rem, var(--folio-opening-height));
}

.folio-opening__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 12rem;
  overflow: hidden;
  background: var(--surface-alt, #ece6d8);
}

.folio-opening__image,
.folio-opening__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* The paper under the words: the page's own colour, lapping over the picture's foot, short of its right edge. */
.folio-opening__plate {
  position: relative;
  display: grid;
  flex: none;
  justify-items: start;
  gap: 1rem;
  margin: -2.25rem 2.25rem 0 0;
  padding: 1.6rem var(--folio-gutter) 2rem;
  border-top-right-radius: var(--folio-radius);
  background: var(--background, #f6f2ea);
  color: var(--text-primary, #1d1c19);
}

/* 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. */
.folio-opening__title {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.1rem, 1.25rem + 3.6vw, 4.25rem);
  font-weight: var(--folio-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}

/* The lead line, in the heading face; in its own italic where the font palette has one. */
.folio-opening__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #5b564c);
  font-family: var(--font-heading, serif);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-synthesis: none;
  font-weight: var(--folio-heading-weight);
  line-height: 1.45;
}

html.folio-italic .folio-opening__lead {
  font-style: italic;
}

.folio-opening__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 0.9rem;
  margin-top: 0.4rem;
}

/* From a tablet up the picture fills the whole stage and the paper is a corner cut into its lower left. */
@media (min-width: 48rem) {
  .folio-opening--picture .folio-opening__stage {
    justify-content: flex-end;
    min-height: max(30rem, var(--folio-opening-height));
  }

  .folio-opening--picture .folio-opening__media {
    position: absolute;
    inset: 0;
  }

  .folio-opening--picture .folio-opening__plate {
    align-self: flex-start;
    gap: 1.15rem;
    width: min(46rem, 66%);
    margin: 8rem 0 0;
    padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3.6vw, 3.25rem) clamp(1.75rem, 3vw, 2.75rem) var(--folio-gutter);
  }
}

/* Beside the rail nothing stands above a home page's opening, and only the running head above an inner page's. */
@media (min-width: 80rem) and (min-height: 38rem) {
  .folio-opening {
    --folio-opening-top: 0px;
  }

  .folio-main > nav[aria-label]:first-child + .folio-opening {
    --folio-opening-top: 3.4rem;
  }
}

/* A picture with no words: only the picture, a little lower. */
.folio-opening.folio-opening--wordless {
  --folio-opening-height: 62svh;
}

/* No picture: the words open the page on the tinted paper. */
.folio-opening--bare {
  background: var(--surface-alt, #ece6d8);
}

.folio-opening--bare .folio-opening__stage {
  justify-content: center;
  min-height: 0;
}

.folio-opening--bare .folio-opening__plate {
  width: 100%;
  max-width: calc(var(--folio-width) + 2 * var(--folio-gutter));
  margin: 0 auto;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  border-radius: 0;
  background: none;
}

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

/* Words at the left, the picture at the right running to the window's edge, both as tall as most of the first screen.
   The hero measures itself (container-type), so the words start on the same line as every section below, however wide
   the window. */
.folio-hero {
  container-type: inline-size;
}

.folio-hero__inner {
  display: grid;
}

.folio-hero__copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.25rem;
  min-width: 0;
  padding: clamp(2.75rem, 7vw, 5.5rem) var(--folio-gutter);
}

@media (min-width: 60rem) {
  .folio-hero:not(.folio-hero--words) .folio-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(30rem, 82svh, 48rem);
  }

  .folio-hero:not(.folio-hero--words) .folio-hero__copy {
    padding-inline-start: max(var(--folio-gutter), calc((100cqw - var(--folio-width)) / 2));
    padding-inline-end: clamp(1.75rem, 4vw, 4rem);
  }
}

.folio-hero--words {
  background: var(--surface-alt, #ece6d8);
}

.folio-hero--words .folio-hero__copy {
  width: 100%;
  max-width: calc(var(--folio-width) + 2 * var(--folio-gutter));
  margin-inline: auto;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.folio-hero__title {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.75rem);
  font-weight: var(--folio-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}

.folio-hero--words .folio-hero__title {
  max-width: 20ch;
}

.folio-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #5b564c);
  font-size: 1.125rem;
}

.folio-hero__points {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.folio-hero__icon {
  margin-top: 0.25em;
  color: var(--accent-ink, #7a5413);
}

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

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

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

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

.folio-stars svg.is-full {
  fill: var(--accent-ink, #7a5413);
}

.folio-hero__trustpilot {
  color: var(--accent-ink, #7a5413);
  font-weight: var(--folio-body-strong);
}

.folio-hero__media {
  position: relative;
  min-height: min(22rem, 64vw);
  margin: 0;
  background: var(--surface-alt, #ece6d8);
}

.folio-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ------------------------------------------------------------------ Sections */

/* The rail gives the page a left line, and the stock blocks keep to it: a section's heading, its lead line and the
   note or button under it start at the left, where the kit would centre them over a grid. Only the blocks the theme
   knows (includes/bind.php writes data-block), never a module's section (x_...), which keeps what its module asked
   for, and never a section that is centred as a whole (a call to action over a picture, the figures, the review
   badges): those stay the page's set pieces. What stands above a heading (an enquiry form's icon) moves with it. */
.folio-main [data-block]:not([data-block^="x_"]):not(.kit-section--align-center) .kit-stack.kit-align--start > :is(.kit-heading-group, .kit-text-block).kit-text--center {
  margin-inline: 0;
  text-align: start;
}

.folio-main [data-block]:not([data-block^="x_"]):not(.kit-section--align-center) .kit-stack.kit-align--start > .kit-row.kit-justify--center {
  justify-content: flex-start;
}

/* One left line for the whole page. A stock block that the kit sets in a narrow column in the middle of the page (a
   list of places, a video, one address, one pair of before and after pictures) keeps its narrow measure and starts on
   the page's left line, where its heading already stands, instead of a line of its own a hand's width in. The wide
   margin is then at the right, as on a book's page. */
.folio-main [data-block]:not([data-block^="x_"]):not(.kit-section--align-center) > .kit-section__inner.kit-width--narrow {
  max-width: calc(var(--kit-width-normal) + 2 * var(--kit-gutter));
}

.folio-main [data-block]:not([data-block^="x_"]):not(.kit-section--align-center) > .kit-section__inner.kit-width--narrow > * {
  max-width: var(--kit-width-narrow);
}

.folio-main [data-block]:not([data-block^="x_"]):not(.kit-section--align-center) .kit-stack.kit-align--start > .kit-container {
  margin-inline: 0;
}

/* Questions, a timeline and the enquiry form: on a wide page the heading stands in a column of its own at the left and
   stays in sight while the list or the form beside it scrolls past, instead of a narrow column in the middle of the
   page. */
@media (min-width: 64rem) {
  .folio-main :is([data-block="faq"], [data-block="timeline"], [data-block="contact_form"]) > .kit-section__inner {
    --kit-w: var(--kit-width-normal);
  }

  /* The two columns take the page's whole width (the rule above keeps a narrow block to its narrow measure). */
  .folio-main [data-block]:is([data-block="faq"], [data-block="timeline"], [data-block="contact_form"]):not(.kit-section--align-center) > .kit-section__inner.kit-width--narrow > .kit-stack {
    max-width: none;
  }

  .folio-main :is([data-block="faq"], [data-block="timeline"], [data-block="contact_form"]) > .kit-section__inner > .kit-stack {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: var(--kit-gap-medium);
  }

  .folio-main :is([data-block="faq"], [data-block="timeline"], [data-block="contact_form"]) > .kit-section__inner > .kit-stack > * {
    grid-column: 1;
  }

  .folio-main :is([data-block="faq"], [data-block="timeline"], [data-block="contact_form"]) > .kit-section__inner > .kit-stack > :first-child {
    position: sticky;
    top: calc(var(--folio-bar) + 1.5rem);
  }

  .folio-main :is([data-block="faq"], [data-block="timeline"], [data-block="contact_form"]) > .kit-section__inner > .kit-stack > :is(.kit-accordion, .kit-grid, .kit-form) {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
}

@media (min-width: 80rem) and (min-height: 38rem) {
  .folio-main :is([data-block="faq"], [data-block="timeline"], [data-block="contact_form"]) > .kit-section__inner > .kit-stack > :first-child {
    top: 2.5rem;
  }
}

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

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

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

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

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

.folio-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.45rem + 2.2vw, 3rem);
  font-weight: var(--folio-heading-weight);
  letter-spacing: -0.012em;
  line-height: 1.14;
  text-wrap: balance;
}

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

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

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

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

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

.folio-prose h2 {
  font-size: 1.7rem;
}

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

.folio-prose h4 {
  font-size: 1.15rem;
}

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

/* A quotation in the heading face under a short accent rule. */
.folio-prose blockquote {
  margin-inline: 0;
  padding: 0.9rem 0 0;
  border-top: 2px solid var(--accent, #c9a04f);
  color: var(--text-primary, #1d1c19);
  font-family: var(--font-heading, serif);
  font-size: 1.3rem;
  font-synthesis: none;
  font-weight: var(--folio-heading-weight);
  line-height: 1.45;
}

html.folio-italic .folio-prose blockquote {
  font-style: italic;
}

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

.folio-prose figcaption {
  margin-top: 0.55rem;
  color: var(--text-secondary, #5b564c);
  font-size: 0.875rem;
}

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

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

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

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

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

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

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

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

/* ------------------------------------------------------------------ The back cover (footer) */

/* The cloth again: the primary colour with its own words, the quieter words a fifth of the way into the cloth. The
   same pair in every palette and with a website's own colours. Beside a cloth rail the two join into one frame around
   the page's foot; the rail's hairline is the seam. */
.folio-footer {
  --folio-foot-ink: var(--on-primary, #f8f4ea);
  --folio-foot-soft: color-mix(in srgb, var(--on-primary, #f8f4ea) 80%, var(--primary, #1f2b27));
  --folio-foot-line: color-mix(in srgb, var(--on-primary, #f8f4ea) 18%, transparent);
  background: var(--primary, #1f2b27);
  color: var(--on-primary, #f8f4ea);
}

/* The quiet line (footer_minimal) is on the page's tinted paper. */
.folio-footer--minimal {
  --folio-foot-ink: var(--text-primary, #1d1c19);
  --folio-foot-soft: var(--text-secondary, #5b564c);
  --folio-foot-line: var(--folio-line);
  border-top: 1px solid var(--folio-line);
  background: var(--surface-alt, #ece6d8);
  color: var(--text-primary, #1d1c19);
}

.folio-footer__inner {
  max-width: calc(var(--folio-width) + 2 * var(--folio-gutter));
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.75rem) var(--folio-gutter) 1.6rem;
}

.folio-footer--minimal .folio-footer__inner {
  padding-block: 1.6rem;
}

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

.folio-footer .folio-brand__name {
  max-width: 100%;
  font-size: 1.7rem;
  line-height: 1.2;
}

.folio-footer--minimal .folio-brand__name {
  font-size: 1.2rem;
}

.folio-footer .folio-brand__logo,
.folio-footer .brand-logo-original {
  max-height: 3.25rem !important;
  width: auto;
}

.folio-footer .logo-mask {
  background-color: var(--folio-foot-ink) !important;
}

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

.folio-footer__invite {
  max-width: 20ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  font-weight: var(--folio-heading-weight);
  letter-spacing: -0.012em;
  line-height: 1.12;
  text-wrap: balance;
}

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

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

.folio-footer__tagline,
.folio-footer__contact p:not(.folio-footer__title),
.folio-footer__copyright {
  margin: 0;
  color: var(--folio-foot-soft);
  font-size: 0.9375rem;
}

/* A column's title: a small label in the heading face, in its italic where the font palette has one. */
.folio-footer__title {
  margin: 0 0 0.8rem;
  color: var(--folio-foot-ink);
  font-family: var(--font-heading, serif);
  font-size: 1.0625rem;
  font-synthesis: none;
  font-weight: var(--folio-heading-weight);
  line-height: 1.35;
}

html.folio-italic .folio-footer__title {
  font-style: italic;
}

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

.folio-footer__links a,
.folio-footer__contact a,
.folio-footer__legal a,
.folio-footer__inline a {
  max-width: 100%;
  color: var(--folio-foot-soft);
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: color var(--folio-speed) ease;
}

.folio-footer__links a:hover,
.folio-footer__contact a:hover,
.folio-footer__legal a:hover,
.folio-footer__inline a:hover {
  color: var(--folio-foot-ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.folio-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.folio-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--folio-foot-line);
  border-radius: 50%;
  color: var(--folio-foot-soft);
  transition: border-color var(--folio-speed) ease, color var(--folio-speed) ease;
}

.folio-footer__social a:hover {
  border-color: currentColor;
  color: var(--folio-foot-ink);
}

.folio-footer__social svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

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

.folio-footer__bottom {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--folio-foot-line);
}

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

.folio-footer__legal a,
.folio-footer__copyright {
  font-size: 0.875rem;
}

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

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

.folio-not-found {
  padding: clamp(3.5rem, 9vw, 7rem) var(--folio-gutter);
}

.folio-not-found__inner {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: var(--folio-width);
  margin-inline: auto;
}

.folio-not-found__number {
  margin: 0;
  color: var(--accent-ink, #7a5413);
  font-family: var(--font-heading, serif);
  font-size: clamp(4rem, 2.5rem + 8vw, 8.5rem);
  font-synthesis: none;
  font-variant-numeric: lining-nums;
  font-weight: var(--folio-heading-weight);
  line-height: 1.15;
}

html.folio-italic .folio-not-found__number {
  font-style: italic;
}

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

.folio-not-found p {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #5b564c);
}

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

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

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

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

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

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

/* ------------------------------------------------------------------ Rows of cards beside the rail */

/* The shared rule (resilience.css, .kit-balanced) starts rows of four or more at a window of 1200 px, where a card is
   about 265 px wide. Beside the rail the page is narrower than the window by the rail's width, and the same row would
   give cards of about 215 px, where an ordinary word ("Apgyvendinimas") no longer fits. So while the rail is the
   narrower one (a window under 96rem, a page of 1024 to 1279 px) such a grid keeps its tablet columns, exactly as the
   shared rule does between 1024 and 1200 px; from 96rem the page is 1248 px or more and a card in a row of four is
   at least 255 px. The selectors repeat the shared ones under .folio-main, which gives them the weight to win
   wherever this file is linked (folio-rail.test.mjs). */
@media (min-width: 80rem) and (max-width: 95.99rem) and (min-height: 38rem) {
  .folio-main .kit-balanced:is(.kit-bal--5, .kit-bal--6, .kit-bal--4:not(.kit-bal-phone--2)) > * { grid-column-start: auto; }
  .folio-main .kit-balanced:is(.kit-bal--5, .kit-bal--6, .kit-bal--4:not(.kit-bal-phone--2)).kit-bal-mid--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folio-main .kit-balanced:is(.kit-bal--5, .kit-bal--6, .kit-bal--4:not(.kit-bal-phone--2)).kit-bal-mid--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .folio-main .kit-balanced:is(.kit-bal--5, .kit-bal--6, .kit-bal--4:not(.kit-bal-phone--2)).kit-bal-mid--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .folio-main .kit-balanced:is(.kit-bal--5, .kit-bal--6, .kit-bal--4:not(.kit-bal-phone--2)).kit-bal-mid-last--2-1 > :nth-last-child(1) { grid-column-start: 2; }
  .folio-main .kit-balanced:is(.kit-bal--5, .kit-bal--6, .kit-bal--4:not(.kit-bal-phone--2)).kit-bal-mid-last--3-1 > :nth-last-child(1) { grid-column-start: 3; }
  .folio-main .kit-balanced:is(.kit-bal--5, .kit-bal--6, .kit-bal--4:not(.kit-bal-phone--2)).kit-bal-mid-last--3-2 > :nth-last-child(2) { grid-column-start: 2; }
}

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

/* Without scripts the menu button does nothing, so it is hidden and the rail is a plain list under the bar: every page
   stays reachable (verify-theme-browser.mjs --chrome --no-js). The lists of pages under an entry all stand open, and
   their buttons, which could not open them, are gone. */
@media (scripting: none) {
  .folio-menu-button,
  .folio-nav__toggle {
    display: none !important;
  }

  .folio-nav__children[hidden] {
    display: grid;
  }
}

@media (scripting: none) and (max-width: 79.99rem), (scripting: none) and (max-height: 37.99rem) {
  .folio-header {
    position: static;
  }

  .folio-rail {
    position: static;
    width: auto;
    overflow: visible;
    box-shadow: none;
    transform: none;
    visibility: visible;
  }
}

/* On paper the rail is not a column beside every sheet: the name and the pages head the first sheet, and the page
   takes the sheet's whole width. */
@media print {
  body {
    padding-left: 0 !important;
  }

  .folio-header {
    position: static !important;
    width: auto !important;
  }

  .folio-bar,
  .folio-ribbon,
  .folio-rail__foot {
    display: none !important;
  }

  .folio-rail {
    position: static !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* 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;
  }
}