/*
 * Ledger: a firm's annual report on ivory paper. The frame (header, phone menu, footer, announcement, breadcrumbs, the
 * page not found), the theme's own blocks (the split opening, the cover, the article body, the divider) and how the
 * Theme Kit's sections are set on the page, by the marks includes/stitch.php writes (data-block). The look of the kit's
 * parts is in kit-theme.css.
 *
 * Three marks carry the theme, each taken from an account book:
 * - the double rule an accountant draws under a total: under the header (the letterhead), under a row of key figures,
 *   under a price, at the top of the footer;
 * - the ledger's margin, two fine lines in the accent colour: down the side of the opening's words, the cover's panel,
 *   a timeline's date column, a quotation and the closing invitation;
 * - fine rules between rows (selling points, prices, questions, entries), and figures of one width in the serif, so
 *   numbers stand digit under digit.
 *
 * 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; and each pair the other way
 * round (primary words on an on-primary button). theme-colour-pairs.test.mjs reads every rule here that sets both a
 * background and a colour and fails for any other pair. A dark palette is just other values for the same tokens:
 * nothing here asks whether the page is dark. Lines in the accent colour are decoration and carry no words.
 *
 * Type comes from the layout: --font-heading, --font-body, --ledger-heading-weight (the heading face's heaviest loaded
 * weight), --ledger-heading-light (its lightest) and --ledger-body-strong (the body face's heaviest). Never write a
 * font-weight number other than 400 here. An italic is asked for only under html.ledger-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. A plain :root rule here would override them (Loom drew every website in its
   fallback colours that way until 4.x). */
:where(:root) {
  --ledger-width: 74rem;
  --ledger-gutter: clamp(1rem, 4.5vw, 2.5rem);
  --ledger-bar: 4.5rem;
  --ledger-radius: 0.25rem;
  --ledger-button-radius: 0.1875rem;
  --ledger-heading-weight: 600;
  --ledger-heading-light: 400;
  --ledger-body-strong: 600;
  --ledger-speed: 180ms;
  --ledger-line: var(--border, #d8cfba);
  --ledger-ink: var(--text-primary, #172030);
  --ledger-margin: var(--accent, #a3352b);
  /* Where the content's left edge stands in a window of any width: the frame and the cover's panel line up with it. */
  --ledger-edge: max(var(--ledger-gutter), calc((100vw - var(--ledger-width)) / 2));
}

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

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

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

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

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

a {
  color: inherit;
}

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

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

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

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

.ledger-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. */
.ledger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--ledger-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  font-weight: var(--ledger-body-strong);
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--ledger-speed) ease, border-color var(--ledger-speed) ease, color var(--ledger-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. */
.ledger-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ledger-button--primary {
  border-color: var(--primary, #1c2b45);
  background: var(--primary, #1c2b45);
  color: var(--on-primary, #fbf8f0);
}

.ledger-button--primary:hover {
  border-color: var(--primary-alt, #283b5c);
  background: var(--primary-alt, #283b5c);
}

.ledger-button--accent {
  border-color: var(--accent, #a3352b);
  background: var(--accent, #a3352b);
  color: var(--on-accent, #ffffff);
}

/* The hover is a ring in the words' colour, not a lighter fill: a lighter fill would bring the words' contrast under
   what the colour contract promises for this pair. */
.ledger-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #ffffff) 55%, transparent);
}

.ledger-button--secondary {
  border-color: var(--text-primary, #172030);
  background: transparent;
  color: var(--text-primary, #172030);
}

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

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

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

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

.ledger-announcement {
  background: var(--primary, #1c2b45);
  color: var(--on-primary, #fbf8f0);
  font-size: 0.875rem;
}

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

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

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

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

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

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

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

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

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

/* The letterhead: the bar on the page's own paper, closed by a double rule of ink across the whole window. It stays at
   the top. The bar has one height for every kind; the centred kind sets the name larger and the menu on a row under it. */
.ledger-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px double var(--ledger-ink);
  background: var(--background, #f7f3e8);
  color: var(--text-primary, #172030);
}

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

.ledger-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. */
.ledger-header--centered .ledger-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  min-height: calc(var(--ledger-bar) + 0.75rem);
}

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

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

/* Its menu on a row of its own, under a fine rule that stops at the content's edges. */
.ledger-header__rail {
  max-width: calc(var(--ledger-width) + 2 * var(--ledger-gutter));
  margin-inline: auto;
  padding: 0 var(--ledger-gutter);
}

.ledger-header__rail .ledger-nav {
  justify-content: center;
  padding-block: 0.3rem;
  border-top: 1px solid var(--ledger-line);
}

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

.ledger-header__phone {
  color: inherit;
  font-size: 0.9375rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--ledger-body-strong);
  text-decoration: none;
  white-space: nowrap;
}

.ledger-header__phone:hover {
  text-decoration: underline;
  text-decoration-color: var(--ledger-margin);
  text-underline-offset: 0.3em;
}

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

.ledger-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, 44vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, serif);
  font-size: 1.375rem;
  font-weight: var(--ledger-heading-weight);
  letter-spacing: -0.008em;
  line-height: 1.25;
}

.ledger-header--centered .ledger-brand__name {
  font-size: 1.625rem;
}

/* A name of more than thirty characters (includes/chrome.php) a step smaller: eighty characters keep to two lines. */
.ledger-header .ledger-brand--long .ledger-brand__name {
  font-size: 1.125rem;
  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. */
.ledger-header .ledger-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) {
  .ledger-header .ledger-brand__name,
  .ledger-header--centered .ledger-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.1875rem;
  }
}

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

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

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

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

/* A slim line of ink above the letterhead with the telephone, the email and the social links (wide screens only). */
.ledger-topbar {
  background: var(--primary, #1c2b45);
  color: var(--on-primary, #fbf8f0);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

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

.ledger-topbar__contact {
  display: flex;
  gap: 1.75rem;
  min-width: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

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

.ledger-topbar a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

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

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

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

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

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

.ledger-header--simple .ledger-nav,
.ledger-header--topbar .ledger-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. */
.ledger-nav__item {
  position: relative;
  min-width: 0;
}

.ledger-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  color: inherit;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
}

.ledger-nav__item > a > span {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  transition: text-decoration-color var(--ledger-speed) ease;
}

.ledger-nav__item > a:hover > span,
.ledger-nav__item--parent:focus-within > a > span {
  text-decoration-color: currentColor;
}

/* The page being read: underlined twice in the accent's shade, the way a ledger marks a line that is settled. */
.ledger-nav__item.is-current > a > span {
  text-decoration-color: var(--accent-ink, #9a3128);
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-thickness: 3px;
}

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

.ledger-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.35rem 0;
  border: 1px solid var(--ledger-line);
  border-top: 3px double var(--ledger-ink);
  border-radius: 0 0 var(--ledger-radius) var(--ledger-radius);
  background: var(--surface, #fdfbf5);
  color: var(--text-primary, #172030);
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--text-primary, #172030) 45%, transparent);
  visibility: hidden;
  opacity: 0;
}

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

.ledger-nav__children a {
  padding: 0.55rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.ledger-nav__children a + a {
  border-top: 1px solid var(--ledger-line);
}

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

/* The menu button: three lines that turn into a cross. Hidden on a wide screen unless resilience.js folds the menu into
   it (theme-nav-compact on #site-header, whose shared rules show it). */
.ledger-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--ledger-ink);
  border-radius: var(--ledger-button-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ledger-menu-button:hover {
  background: color-mix(in srgb, var(--text-primary, #172030) 7%, transparent);
}

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

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

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

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

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

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

/* A sheet under the letterhead with every page, as the lines of an index. It scrolls inside itself when the pages are
   many, so the last one is always reachable. */
.ledger-drawer {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  /* Under the whole header, whatever its height (a top line, a name on two lines): theme.js measures it
     (--ledger-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(--ledger-head, var(--ledger-bar)) - 3px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--ledger-line);
  background: var(--background, #f7f3e8);
  color: var(--text-primary, #172030);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--text-primary, #172030) 40%, transparent);
}

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

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

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

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

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

.ledger-drawer__link:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-ink, #9a3128);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.ledger-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.85rem 1rem;
  border-inline-start: 3px double var(--ledger-margin);
  margin-bottom: 0.85rem;
}

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

.ledger-drawer__children a:hover {
  color: var(--text-primary, #172030);
}

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

.ledger-drawer__contact {
  width: fit-content;
  color: var(--text-secondary, #4c5361);
  font-variant-numeric: lining-nums tabular-nums;
  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) {
  .ledger-nav,
  .ledger-header__rail,
  .ledger-header__phone,
  .ledger-header__cta,
  .ledger-header__slot {
    display: none;
  }

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

  .ledger-header--centered .ledger-header__inner {
    display: flex;
    min-height: var(--ledger-bar);
  }
}

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

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

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

/* The way back, in small spaced capitals, like the running head of a report. */
.ledger-breadcrumbs {
  max-width: calc(var(--ledger-width) + 2 * var(--ledger-gutter));
  margin-inline: auto;
  padding: 1.25rem var(--ledger-gutter) 0;
}

.ledger-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #4c5361);
  font-size: 0.75rem;
  font-weight: var(--ledger-body-strong);
  letter-spacing: 0.1em;
  line-height: 1.6;
  list-style: none;
  text-transform: uppercase;
}

.ledger-breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.6rem;
  color: var(--ledger-line);
}

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

.ledger-breadcrumbs a:hover {
  color: var(--text-primary, #172030);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

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

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

/* The cover page of a report: the heading large in the serif's lighter weight, on the ledger's margin (two fine lines
   in the accent colour down the side of the words), the selling points as ruled lines of an account, and the picture
   beside them as tall as the words. Without a picture the words stand alone, a little narrower. */
.ledger-hero {
  padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) var(--ledger-gutter) clamp(3rem, 2rem + 4vw, 6rem);
}

.ledger-hero__inner {
  display: grid;
  gap: clamp(2.25rem, 4vw, 4.5rem);
  max-width: var(--ledger-width);
  margin-inline: auto;
}

@media (min-width: 60rem) {
  .ledger-hero:not(.ledger-hero--words) .ledger-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch;
  }
}

.ledger-hero__copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.5rem;
  min-width: 0;
  padding-inline-start: clamp(1.1rem, 0.6rem + 2vw, 2.5rem);
  border-inline-start: 3px double var(--ledger-margin);
}

.ledger-hero--words .ledger-hero__copy {
  max-width: 54rem;
}

/* 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. */
.ledger-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.2rem, 1.25rem + 3.6vw, 4.375rem);
  font-weight: var(--ledger-heading-light);
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

.ledger-hero__lead {
  max-width: 38rem;
  margin: 0;
  color: var(--text-secondary, #4c5361);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

.ledger-hero__points {
  display: grid;
  width: 100%;
  max-width: 38rem;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ledger-ink);
  list-style: none;
  text-align: left;
}

.ledger-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ledger-line);
  font-size: 0.96875rem;
  line-height: 1.5;
}

.ledger-hero__icon {
  margin-top: 0.15em;
  color: var(--accent-ink, #9a3128);
}

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

.ledger-hero__badges {
  gap: 0.75rem 1.75rem;
}

/* The rating as a key figure: the score in the serif, the stars and the source beside it. */
.ledger-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-secondary, #4c5361);
  font-size: 0.875rem;
}

.ledger-hero__score {
  color: var(--text-primary, #172030);
  font-family: var(--font-heading, serif);
  font-size: 2rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--ledger-heading-light);
  line-height: 1.1;
}

.ledger-hero__rating-words {
  display: grid;
  gap: 0.1rem;
  line-height: 1.35;
}

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

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

.ledger-stars svg.is-full {
  fill: var(--accent-ink, #9a3128);
}

.ledger-hero__trustpilot {
  padding-inline-start: 1.75rem;
  border-inline-start: 1px solid var(--ledger-line);
  color: var(--accent-ink, #9a3128);
  font-size: 0.9375rem;
  font-weight: var(--ledger-body-strong);
  text-underline-offset: 0.25em;
}

.ledger-hero__media {
  position: relative;
  min-height: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ledger-radius);
  background: var(--surface-alt, #ede6d4);
}

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

/* Beside the words the picture is as tall as they are, and never shorter than a good portrait. */
@media (min-width: 60rem) {
  .ledger-hero__media {
    min-height: 26rem;
    aspect-ratio: auto;
  }
}

/* ------------------------------------------------------------------ The cover (full-width opening) */

/* A report's cover: a panel of ink beside a photograph that runs to the window's edge, parted from it by the ledger's
   margin (two fine lines of the accent colour). The heading, the lead line and the buttons stand on the panel, so they
   read on any picture. On a phone the photograph is a band across the top and the panel follows under it. Without a
   picture the panel takes the whole width. */
.ledger-cover {
  position: relative;
}

.ledger-cover__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--primary, #1c2b45);
  color: var(--on-primary, #fbf8f0);
}

.ledger-cover__media {
  position: relative;
  min-height: clamp(11rem, 36svh, 22rem);
  margin: 0;
  overflow: hidden;
  background: var(--surface-alt, #ede6d4);
}

.ledger-cover__image,
.ledger-cover__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ledger-cover__panel {
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 1.35rem;
  min-width: 0;
  padding: clamp(1.75rem, 5vw, 3rem) var(--ledger-gutter) clamp(2rem, 5vw, 3.25rem);
  border-top: 3px double var(--ledger-margin);
}

.ledger-cover--plain .ledger-cover__panel {
  border-top: 0;
}

.ledger-cover__title {
  margin: 0;
  max-width: 18ch;
  color: inherit;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.15rem, 1.25rem + 3.2vw, 4.125rem);
  font-weight: var(--ledger-heading-light);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

.ledger-cover--plain .ledger-cover__title {
  max-width: 24ch;
}

.ledger-cover__lead {
  max-width: 34rem;
  margin: 0;
  color: inherit;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

.ledger-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* On the panel the main button is the panel's own words colour with the panel's colour for its label (the same pair
   the other way round), and the other button is framed in the words colour. */
.ledger-cover .ledger-button--primary {
  border-color: var(--on-primary, #fbf8f0);
  background: var(--on-primary, #fbf8f0);
  color: var(--primary, #1c2b45);
}

.ledger-cover .ledger-button--primary:hover {
  border-color: var(--on-primary, #fbf8f0);
  background: color-mix(in srgb, var(--on-primary, #fbf8f0) 86%, var(--primary, #1c2b45));
}

.ledger-cover .ledger-button--secondary {
  border-color: var(--on-primary, #fbf8f0);
  background: transparent;
  color: var(--on-primary, #fbf8f0);
}

.ledger-cover .ledger-button--secondary:hover {
  background: color-mix(in srgb, var(--on-primary, #fbf8f0) 12%, transparent);
}

.ledger-cover :focus-visible {
  outline-color: var(--on-primary, #fbf8f0);
}

@media (min-width: 60rem) {
  .ledger-cover__stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: clamp(30rem, 80svh, 52rem);
  }

  .ledger-cover--plain .ledger-cover__stage {
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(22rem, 50svh, 34rem);
  }

  .ledger-cover__panel {
    grid-column: 1;
    grid-row: 1;
    align-content: center;
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem) var(--ledger-edge);
    border-top: 0;
    border-inline-end: 3px double var(--ledger-margin);
  }

  .ledger-cover--plain .ledger-cover__panel {
    padding-inline-end: var(--ledger-edge);
    border-inline-end: 0;
  }

  .ledger-cover__media {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
  }
}

/* Under the breadcrumb (every page but the home page) the first screen is shorter by the header and the breadcrumb, so
   the cover takes what is left of it: its heading and its buttons end on the first screen, not under it. The script
   says where the cover really starts (--ledger-opening-top); until then, the header, one breadcrumb line and the space
   around it. On a phone the photograph's band is shorter there. */
.ledger-main > nav[aria-label]:first-child + .ledger-cover {
  --ledger-above: var(--ledger-opening-top, calc(var(--ledger-head, var(--ledger-bar)) + 1.25rem + 0.75rem * 1.6 + 1.5rem));
  margin-top: 1.25rem;
}

.ledger-main > nav[aria-label]:first-child + .ledger-cover .ledger-cover__media {
  min-height: clamp(8.5rem, 24svh, 15rem);
}

@media (min-width: 60rem) {
  .ledger-main > nav[aria-label]:first-child + .ledger-cover .ledger-cover__stage {
    min-height: clamp(22rem, calc(100svh - var(--ledger-above)), 52rem);
  }

  .ledger-main > nav[aria-label]:first-child + .ledger-cover .ledger-cover__media {
    min-height: 0;
  }
}

/* ------------------------------------------------------------------ Sections on the page */

/* In the stock blocks everything stands at the left, the way a report is read: a centred heading over ruled rows looks
   set by another hand. A module's section is left as its module asked (its type starts with x_): the kit promises a
   module that a text it centres stays centred. */
.ledger-main [data-block]:not([data-block^="x_"]).kit-section--align-center,
.ledger-main [data-block]:not([data-block^="x_"]) :is(.kit-heading-group.kit-text--center, .kit-text-block.kit-text--center) {
  text-align: start;
}

.ledger-main [data-block]:not([data-block^="x_"]) .kit-align--center {
  align-items: flex-start;
  text-align: start;
}

.ledger-main [data-block]:not([data-block^="x_"]) .kit-justify--center {
  justify-content: flex-start;
}

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

.ledger-main [id] {
  scroll-margin-top: calc(var(--ledger-head, var(--ledger-bar)) + 1.25rem);
}

/* A section's heading stands at the left over a fine rule of ink that runs the width of the content, as a report heads
   a page; the rule is the heading group's own edge, so it can never cross the words. With a lead line, the rule runs
   under the lead instead, and on a wide screen the lead stands beside the heading, level with its last line. */
.ledger-main [data-block]:not([data-block^="x_"]) > .kit-section__inner > .kit-stack > .kit-heading-group {
  align-self: stretch;
  padding-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  border-bottom: 1px solid var(--kit-text);
}

.ledger-main [data-block]:not([data-block^="x_"]) > .kit-section__inner > .kit-stack > .kit-heading-group:has(+ .kit-text--lead) {
  padding-bottom: 0;
  border-bottom: 0;
}

.ledger-main [data-block]:not([data-block^="x_"]) > .kit-section__inner > .kit-stack > .kit-heading-group + .kit-text--lead {
  align-self: stretch;
  max-width: none;
  padding-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  border-bottom: 1px solid var(--kit-text);
  color: var(--kit-muted);
}

@media (min-width: 64rem) {
  .ledger-main [data-block]:not([data-block^="x_"]) > .kit-section__inner > .kit-stack:has(> .kit-heading-group + .kit-text--lead) {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 0;
    align-items: end;
  }

  .ledger-main [data-block]:not([data-block^="x_"]) > .kit-section__inner > .kit-stack:has(> .kit-heading-group + .kit-text--lead) > * {
    grid-column: 1 / -1;
  }

  .ledger-main [data-block]:not([data-block^="x_"]) > .kit-section__inner > .kit-stack > .kit-heading-group:has(+ .kit-text--lead) {
    grid-column: 1;
    grid-row: 1;
    padding-inline-end: clamp(2rem, 4vw, 4rem);
    padding-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    border-bottom: 1px solid var(--kit-text);
  }

  .ledger-main [data-block]:not([data-block^="x_"]) > .kit-section__inner > .kit-stack > .kit-heading-group + .kit-text--lead {
    grid-column: 2;
    grid-row: 1;
    /* Level with the heading's last line, over the shared rule. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 1rem;
  }

  /* A narrow section (questions, a timeline) keeps its heading and lead one above the other. */
  .ledger-main [data-block]:not([data-block^="x_"]) > .kit-section__inner.kit-width--narrow > .kit-stack:has(> .kit-heading-group + .kit-text--lead) {
    display: flex;
  }

  .ledger-main [data-block]:not([data-block^="x_"]) > .kit-section__inner.kit-width--narrow > .kit-stack > .kit-heading-group:has(+ .kit-text--lead) {
    padding-inline-end: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* A heading beside a picture or a form, and each heading of two columns of words, stands over the same fine rule. */
.ledger-main :is([data-block="text_with_image"], [data-block="about_section"], [data-block="contact_form_split"], [data-block="two_column_text"]) .kit-split > .kit-stack > .kit-heading-group:first-child {
  align-self: stretch;
  padding-bottom: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem);
  border-bottom: 1px solid var(--kit-text);
}

/* ------------------------------------------------------------------ Key figures */

/* The figures of a report's highlights: a row of totals between a rule of ink above and a double rule below, each figure
   in its own column parted by a hairline (a shadow, so the cell at the start of a row draws none: the row clips it). */
.ledger-main [data-block="stats_counter"] .kit-grid {
  gap: 0;
  overflow: hidden;
  border-top: 1px solid var(--kit-text);
  border-bottom: 3px double var(--kit-text);
}

.ledger-main [data-block="stats_counter"] .kit-grid > * {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1rem, 0.75rem + 1vw, 1.75rem);
  box-shadow: -1px 0 0 var(--kit-line), 0 -1px 0 var(--kit-line);
}

.ledger-main [data-block="stats_counter"] .kit-grid > * > .kit-icon {
  color: var(--kit-accent-text);
}

.ledger-main [data-block="stats_counter"] .kit-stat {
  justify-items: start;
  text-align: start;
}

/* On a phone, where the kit sets two figures to a row when their labels are short, the size stops where "1500 m²"
   still fits a half. */
@media (max-width: 39.99rem) {
  .ledger-main [data-block="stats_counter"] .kit-stat__value {
    font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2rem);
  }
}

/* ------------------------------------------------------------------ Sheets (cards) */

/* A sheet's icon leads it, above its title (the kit draws it first in the sheet's body, under the title). The steps
   keep the kit's own order: there the number leads (kit.css). A small label over the title stays first. */
.ledger-main [data-block]:not([data-block^="x_"], [data-block="process_steps"]) .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body {
  display: contents;
}

.ledger-main [data-block]:not([data-block^="x_"], [data-block="process_steps"]) .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body > .kit-icon:first-child {
  order: -1;
  margin-bottom: 0.35rem;
}

.ledger-main [data-block]:not([data-block^="x_"], [data-block="process_steps"]) .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__eyebrow {
  order: -2;
}

.ledger-main [data-block]:not([data-block^="x_"], [data-block="process_steps"]) .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body > * + * {
  margin-block-start: 0.2rem;
}

/* A sheet that leads somewhere (a service, a page, a place, a post) carries a rule of ink along its top edge, like the
   head of a column; a plain sheet keeps its hairline. */
.ledger-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"], [data-block="recent_posts"], [data-block="related_posts"], [data-block="blog_listing"]) .kit-card--surface {
  border-top: 2px solid var(--kit-text);
  border-radius: 0 0 var(--kit-radius) var(--kit-radius);
}

.ledger-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-card__title {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
}

/* A row of features is a ruled list of entries, not boxes: a hairline over each. */
.ledger-main [data-block="feature_list"] .kit-grid.kit-features > .kit-stack {
  padding-top: 1.1rem;
  border-top: 1px solid var(--kit-line-strong);
}

/* ------------------------------------------------------------------ Plans */

/* Each plan is a column of a statement: the name, the price over a double rule like a total, then what it includes as
   ruled lines. The recommended plan (the kit draws it as a filled sheet) carries a heavy rule of ink along its top. */
.ledger-main [data-block="pricing_table"] .kit-card--outline {
  border-color: var(--kit-line);
  background: transparent;
}

.ledger-main [data-block="pricing_table"] .kit-card--surface {
  border-top: 4px solid var(--kit-text);
  border-radius: 0 0 var(--kit-radius) var(--kit-radius);
}

.ledger-main [data-block="pricing_table"] .kit-card .kit-stat {
  padding-bottom: 0.7rem;
  border-bottom: 3px double var(--kit-text);
}

.ledger-main [data-block="pricing_table"] .kit-card .kit-stat__value {
  font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem);
}

.ledger-main [data-block="pricing_table"] .kit-list--check {
  gap: 0;
}

.ledger-main [data-block="pricing_table"] .kit-list--check > .kit-list-item {
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--kit-line);
}

/* ------------------------------------------------------------------ Entries in time */

/* A timeline is a page of a ledger: its dates in a margin column at the left in the serif's figures, the ledger's
   margin (two fine lines in the accent colour) running down beside them, the entries at the right, a hairline between
   one entry and the next. On a phone the date stands over its entry. */
.ledger-main [data-block="timeline"] .kit-grid {
  gap: 0;
  border-top: 1px solid var(--kit-text);
}

.ledger-main [data-block="timeline"] .kit-grid > .kit-card {
  border: 0;
  border-bottom: 1px solid var(--kit-line);
  border-radius: 0;
  background: transparent;
}

.ledger-main [data-block="timeline"] .kit-card__content {
  position: relative;
  padding: 1.25rem 0 1.35rem;
}

.ledger-main [data-block="timeline"] .kit-card__eyebrow {
  color: var(--kit-accent-text);
  font-family: var(--font-heading, serif);
  font-size: 1.0625rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--ledger-heading-weight);
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

@media (min-width: 40rem) {
  .ledger-main [data-block="timeline"] .kit-card__content {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    column-gap: 2.5rem;
    align-content: start;
  }

  .ledger-main [data-block="timeline"] .kit-card__content > * {
    grid-column: 2;
  }

  .ledger-main [data-block="timeline"] .kit-card__content > .kit-card__eyebrow {
    grid-column: 1;
    grid-row: 1 / span 4;
    margin: 0;
    text-align: end;
  }

  .ledger-main [data-block="timeline"] .kit-card__content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(9rem + 1.25rem - 1.5px);
    width: 3px;
    border-inline: 1px solid var(--kit-accent);
    pointer-events: none;
  }
}

/* ------------------------------------------------------------------ Questions */

.ledger-main [data-block="faq"] .kit-accordion {
  border-bottom: 3px double var(--kit-text);
}

/* Under a heading's rule a list of questions or entries needs no rule of its own on top: one line, not two. */
.ledger-main :is([data-block="faq"], [data-block="timeline"]) .kit-stack > :is(.kit-heading-group, .kit-text--lead) + :is(.kit-accordion, .kit-grid) {
  border-top-color: transparent;
}

/* ------------------------------------------------------------------ Words with a picture */

.ledger-main [data-block] .kit-split > .kit-picture {
  border-radius: var(--kit-media-radius);
}

/* Two columns of words read like the two columns of a report's page: a hairline between them on a wide screen. */
@media (min-width: 48rem) {
  .ledger-main [data-block="two_column_text"] .kit-split--1-1 > * + * {
    padding-inline-start: var(--kit-gap-large);
    border-inline-start: 1px solid var(--kit-line);
  }

  .ledger-main [data-block="two_column_text"] .kit-split--1-1 {
    column-gap: var(--kit-gap-large);
  }
}

/* ------------------------------------------------------------------ Quotes */

.ledger-main [data-block="testimonials"] .kit-card {
  background: var(--kit-surface);
}

.ledger-main [data-block="testimonials"] .kit-quote__author {
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ Invitations */

/* The closing invitation on paper: at the left of its band, on the ledger's margin, with the heading a step larger. A
   band with a photograph keeps the kit's dark shade and stands at the left too. */
.ledger-main [data-block="cta_section"] > .kit-section__inner > .kit-stack {
  padding-inline-start: clamp(1.1rem, 0.6rem + 2vw, 2.5rem);
  border-inline-start: 3px double var(--kit-accent);
}

.ledger-main [data-block="cta_section"]:not(.kit-section--image) > .kit-section__inner > .kit-stack {
  border-inline-start-color: var(--ledger-margin);
}

.ledger-main [data-block="cta_section"] .kit-heading--2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.125rem);
  font-weight: var(--ledger-heading-light);
}

/* The slim invitation band: ink, closed by a double rule of its own words' colour along its foot. */
.ledger-main [data-block="cta_banner"].kit-section--inverse {
  border-bottom: 3px double color-mix(in srgb, var(--on-primary, #fbf8f0) 45%, transparent);
}

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

/* A post or a long page reads like a printed brief: a column of the serif at the light weight, its headings in the
   heading weight, a pull of the accent's margin beside a quotation, tables ruled like a statement. */
.ledger-article {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--ledger-gutter);
}

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

.ledger-article__header {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 3px double var(--ledger-ink);
}

.ledger-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0;
  color: var(--text-secondary, #4c5361);
  font-size: 0.75rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--ledger-body-strong);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ledger-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: var(--ledger-heading-light);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}

.ledger-prose {
  font-family: var(--font-heading, serif);
  font-size: 1.1875rem;
  font-weight: var(--ledger-heading-light);
  line-height: 1.7;
}

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

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

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

.ledger-prose :where(strong, b) {
  font-weight: var(--ledger-heading-weight);
}

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

.ledger-prose h2 {
  font-size: 1.65rem;
}

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

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

.ledger-prose a {
  color: var(--text-primary, #172030);
  text-decoration-color: var(--accent-ink, #9a3128);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.ledger-prose a:hover {
  color: var(--accent-ink, #9a3128);
}

.ledger-prose blockquote {
  margin-inline: 0;
  padding-left: 1.25rem;
  border-left: 3px double var(--ledger-margin);
  color: var(--text-primary, #172030);
  font-size: 1.3rem;
  line-height: 1.55;
}

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

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

.ledger-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #4c5361);
  font-family: var(--font-body, sans-serif);
  font-size: 0.875rem;
}

.ledger-prose table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--ledger-ink);
  border-bottom: 3px double var(--ledger-ink);
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  /* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited
     value. */
  font-variant-numeric: lining-nums tabular-nums;
}

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

.ledger-prose th {
  font-weight: var(--ledger-body-strong);
}

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

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

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

.ledger-divider__line {
  width: 100%;
  border-top: 3px double var(--ledger-line);
}

.ledger-divider--dashed .ledger-divider__line {
  border-top: 1px dashed var(--ledger-ink);
}

.ledger-divider--dotted span {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--ledger-margin);
}

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

/* The foot of the page on the deeper paper, opened by the double rule of a closed account. Its columns are parted by
   hairlines on a wide screen, like the columns of a ledger. The tinted paper with the page's own text colours is the
   same pair in every palette and with a website's own colours, so it reads everywhere. */
.ledger-footer {
  border-top: 3px double var(--ledger-ink);
  background: var(--surface-alt, #ede6d4);
  color: var(--text-primary, #172030);
}

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

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

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

.ledger-footer .ledger-brand__name {
  max-width: 100%;
  font-size: 1.5rem;
}

.ledger-footer--minimal .ledger-brand__name {
  font-size: 1.25rem;
}

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

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

/* The mega footer opens with the invitation: a large line in the serif and the header's button. */
.ledger-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, 4vw, 3.25rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--ledger-ink);
}

.ledger-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  font-weight: var(--ledger-heading-light);
  letter-spacing: -0.016em;
  line-height: 1.15;
  text-wrap: balance;
}

/* Two to six columns, each at least a readable width; more rows where the screen is narrow. A hairline stands before
   every column (a shadow: the column at the start of a row has its own clipped by the grid). */
.ledger-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2.25rem 0;
}

.ledger-footer__grid > * {
  padding-inline: 0 clamp(1.25rem, 2.5vw, 2.5rem);
}

@media (min-width: 40rem) {
  .ledger-footer__grid > * {
    padding-inline: clamp(1.25rem, 2.5vw, 2.5rem);
    box-shadow: -1px 0 0 var(--ledger-line);
  }

  .ledger-footer__grid {
    margin-inline: calc(-1 * clamp(1.25rem, 2.5vw, 2.5rem));
    overflow: hidden;
  }
}

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

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

/* A column's title: small spaced capitals, as a ledger heads its columns. */
.ledger-footer__title {
  margin: 0 0 0.85rem;
  font-size: 0.75rem;
  font-weight: var(--ledger-body-strong);
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
}

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

.ledger-footer__contact {
  font-variant-numeric: lining-nums tabular-nums;
}

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

.ledger-footer__links a:hover,
.ledger-footer__contact a:hover,
.ledger-footer__legal a:hover,
.ledger-footer__inline a:hover {
  color: var(--text-primary, #172030);
  text-decoration: underline;
  text-decoration-color: var(--accent-ink, #9a3128);
  text-underline-offset: 0.25em;
}

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

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

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

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

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

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

.ledger-footer__copyright {
  font-size: 0.875rem;
  font-variant-numeric: lining-nums tabular-nums;
}

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

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

/* The page not found is a figure that does not add up: the number large in the serif over a double rule. */
.ledger-not-found {
  padding: clamp(4rem, 9vw, 7rem) var(--ledger-gutter);
}

.ledger-not-found__inner {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline-start: clamp(1.1rem, 0.6rem + 2vw, 2.5rem);
  border-inline-start: 3px double var(--ledger-margin);
}

.ledger-not-found .ledger-not-found__number {
  margin: 0;
  padding-bottom: 0.35rem;
  border-bottom: 3px double var(--ledger-ink);
  color: var(--text-primary, #172030);
  font-family: var(--font-heading, serif);
  font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--ledger-heading-light);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

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

.ledger-not-found p {
  margin: 0;
  color: var(--text-secondary, #4c5361);
}

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

.ledger-form-success {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 0 1.5rem 1.25rem;
  border-left: 3px double var(--ledger-margin);
}

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

.ledger-form-success p {
  margin: 0;
  color: var(--text-secondary, #4c5361);
}

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

/* The shared bar (resilience.css) on the page's paper, under a double rule, with the theme's button. */
body .theme-action-bar {
  border-top: 3px double var(--ledger-ink);
  background: var(--background, #f7f3e8);
}

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

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

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

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