/*
 * Heirloom: woven and embroidered folk craft. The page is linen; a slim woven braid runs along the top of every page,
 * a section's heading carries a cross-stitched star with two arms, cards end in an embroidered hem like the end of a
 * towel, questions are parted by seams of cross-stitches, steps stand in woven diamonds, and the footer is the
 * main colour's cloth hung from a woven sash with its fringe. This file is the frame (header, phone menu, footer,
 * announcement, breadcrumbs, the page not found, the theme's own blocks: the split hero, the article body, the divider)
 * and the needlework laid on the kit's parts. The kit's tokens and the plain look of its parts are in kit-theme.css.
 *
 * The needlework is drawn by masks: the motifs at the top of this file are charts of stitches as small pictures with no
 * colour of their own, and every mark takes its colour from the palette (the thread is the accent's readable shade). A
 * motif is generated from its chart by .tmp/themes-157/heirloom/motifs.mjs (kept out of kit-theme.css, which may load
 * no picture at all, even an inline one).
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. theme-colour-pairs.test.mjs
 * reads every rule here that sets both a background and a colour and fails for any other pair. The woven parts are
 * the accent's cloth with a pattern in the on-accent colour, a pair the contract keeps readable in every palette, so a
 * sash shows in a website's own colours too. A dark palette is just other values for the same tokens.
 *
 * Type comes from the layout: --font-heading, --font-body, --heirloom-heading-weight and --heirloom-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here. Italic only under
 * html.heirloom-italic (the font palette loads the heading face's italic); without it the same text stays upright.
 */

/* ------------------------------------------------------------------ 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) {
  --heirloom-width: 72rem;
  --heirloom-gutter: clamp(1rem, 4vw, 2rem);
  --heirloom-bar: 4.5rem;
  /* The braid along the top of the page: 2px of the main colour, five woven rows of 2px, 2px of the main colour. */
  --heirloom-braid-height: 0.875rem;
  --heirloom-radius: 0.5rem;
  --heirloom-button-radius: 0.375rem;
  --heirloom-heading-weight: 600;
  --heirloom-body-strong: 500;
  --heirloom-speed: 180ms;
  --heirloom-line: var(--border, #d4c6aa);
  /* The embroidery thread: the accent's readable shade, so a stitch shows on every ground the contract names. */
  --heirloom-thread: var(--accent-ink, #962b25);
  /* Linen: fine threads across and down, barely there. */
  --heirloom-weave:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text-primary, #2a211b) 3.2%, transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-primary, #2a211b) 2.6%, transparent) 0 1px, transparent 1px 4px);
  /* motifs:start (generated by .tmp/themes-157/heirloom/motifs.mjs; inject-motifs.mjs writes them here) */
  /* stitch: 1 x 1 */
  --heirloom-stitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.8 1.8l6.4 6.4m0-6.4l-6.4 6.4' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* seam: 2 x 1 */
  --heirloom-seam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1.8 1.8l6.4 6.4m0-6.4l-6.4 6.4' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* hem: 4 x 5 */
  --heirloom-hem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Cpath d='M21.8 1.8l6.4 6.4m0-6.4l-6.4 6.4M11.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M31.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M1.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M11.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M31.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 41.8l6.4 6.4m0-6.4l-6.4 6.4' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* star: 9 x 9 */
  --heirloom-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath d='M31.8 1.8l6.4 6.4m0-6.4l-6.4 6.4M51.8 1.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M31.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M51.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M61.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M11.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M31.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M51.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M61.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M71.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M1.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M11.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M61.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M71.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M81.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M41.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M1.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M11.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M61.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M71.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M81.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M11.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M31.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M51.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M61.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M71.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 71.8l6.4 6.4m0-6.4l-6.4 6.4M31.8 71.8l6.4 6.4m0-6.4l-6.4 6.4M51.8 71.8l6.4 6.4m0-6.4l-6.4 6.4M61.8 71.8l6.4 6.4m0-6.4l-6.4 6.4M31.8 81.8l6.4 6.4m0-6.4l-6.4 6.4M51.8 81.8l6.4 6.4m0-6.4l-6.4 6.4' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* diamond: 5 x 5 */
  --heirloom-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M21.8 1.8l6.4 6.4m0-6.4l-6.4 6.4M11.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M31.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M1.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M41.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M11.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M31.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 41.8l6.4 6.4m0-6.4l-6.4 6.4' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* ornament: 35 x 9 */
  --heirloom-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 90'%3E%3Cpath d='M161.8 1.8l6.4 6.4m0-6.4l-6.4 6.4M181.8 1.8l6.4 6.4m0-6.4l-6.4 6.4M151.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M161.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M181.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M191.8 11.8l6.4 6.4m0-6.4l-6.4 6.4M141.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M151.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M161.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M181.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M191.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M201.8 21.8l6.4 6.4m0-6.4l-6.4 6.4M11.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M51.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M91.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M131.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M141.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M151.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M191.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M201.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M211.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M251.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M291.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M331.8 31.8l6.4 6.4m0-6.4l-6.4 6.4M1.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M21.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M31.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M41.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M61.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M71.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M81.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M101.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M111.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M171.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M231.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M241.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M261.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M271.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M281.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M301.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M311.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M321.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M341.8 41.8l6.4 6.4m0-6.4l-6.4 6.4M11.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M51.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M91.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M131.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M141.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M151.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M191.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M201.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M211.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M251.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M291.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M331.8 51.8l6.4 6.4m0-6.4l-6.4 6.4M141.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M151.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M161.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M181.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M191.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M201.8 61.8l6.4 6.4m0-6.4l-6.4 6.4M151.8 71.8l6.4 6.4m0-6.4l-6.4 6.4M161.8 71.8l6.4 6.4m0-6.4l-6.4 6.4M181.8 71.8l6.4 6.4m0-6.4l-6.4 6.4M191.8 71.8l6.4 6.4m0-6.4l-6.4 6.4M161.8 81.8l6.4 6.4m0-6.4l-6.4 6.4M181.8 81.8l6.4 6.4m0-6.4l-6.4 6.4' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* sash: 12 x 9 */
  --heirloom-sash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cpath d='M0 0h10v10h-10zM20 0h10v10h-10zM40 0h10v10h-10zM60 0h10v10h-10zM80 0h10v10h-10zM100 0h10v10h-10zM30 20h10v10h-10zM20 30h10v10h-10zM40 30h10v10h-10zM90 30h10v10h-10zM10 40h10v10h-10zM30 40h10v10h-10zM50 40h10v10h-10zM80 40h10v10h-10zM90 40h10v10h-10zM100 40h10v10h-10zM20 50h10v10h-10zM40 50h10v10h-10zM90 50h10v10h-10zM30 60h10v10h-10zM0 80h10v10h-10zM20 80h10v10h-10zM40 80h10v10h-10zM60 80h10v10h-10zM80 80h10v10h-10zM100 80h10v10h-10z'/%3E%3C/svg%3E");
  /* braid: 6 x 5 */
  --heirloom-braid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cpath d='M20 0h10v10h-10zM10 10h10v10h-10zM30 10h10v10h-10zM0 20h10v10h-10zM40 20h10v10h-10zM10 30h10v10h-10zM30 30h10v10h-10zM20 40h10v10h-10z'/%3E%3C/svg%3E");
  /* sash-v: 9 x 12 */
  --heirloom-sash-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 120'%3E%3Cpath d='M0 0h10v10h-10zM80 0h10v10h-10zM40 10h10v10h-10zM0 20h10v10h-10zM30 20h10v10h-10zM50 20h10v10h-10zM80 20h10v10h-10zM20 30h10v10h-10zM40 30h10v10h-10zM60 30h10v10h-10zM0 40h10v10h-10zM30 40h10v10h-10zM50 40h10v10h-10zM80 40h10v10h-10zM40 50h10v10h-10zM0 60h10v10h-10zM80 60h10v10h-10zM0 80h10v10h-10zM40 80h10v10h-10zM80 80h10v10h-10zM30 90h10v10h-10zM40 90h10v10h-10zM50 90h10v10h-10zM0 100h10v10h-10zM40 100h10v10h-10zM80 100h10v10h-10z'/%3E%3C/svg%3E");
  /* motifs:end */
}

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

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

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

body {
  margin: 0;
  background-color: var(--background, #efe7d6);
  background-image: var(--heirloom-weave);
  color: var(--text-primary, #2a211b);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

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

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

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

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

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

/* ------------------------------------------------------------------ Woven parts */

/* The braid: a slim woven sash across the top of every page, inside the header so it stays when the page moves. The
   accent's cloth with its pattern in the on-accent colour, edged with the main colour. */
.heirloom-braid {
  position: relative;
  height: var(--heirloom-braid-height);
  background: var(--accent, #a3302a);
  box-shadow: inset 0 2px var(--primary, #26365a), inset 0 -2px var(--primary, #26365a);
}

.heirloom-braid::before {
  content: "";
  position: absolute;
  inset: 2px 0;
  background: var(--on-accent, #fbf3e4);
  -webkit-mask: var(--heirloom-braid) left center / auto 100% repeat-x;
  mask: var(--heirloom-braid) left center / auto 100% repeat-x;
}

/* The sash: the same cloth, wider, with diamonds and crosses between rows of checks. */
.heirloom-sash {
  position: relative;
  height: calc(27px + 7px);
  background: var(--accent, #a3302a);
  box-shadow: inset 0 3px var(--primary, #26365a), inset 0 -3px var(--primary, #26365a);
}

.heirloom-sash::before {
  content: "";
  position: absolute;
  inset: 3.5px 0;
  background: var(--on-accent, #fbf3e4);
  -webkit-mask: var(--heirloom-sash) left center / auto 100% repeat-x;
  mask: var(--heirloom-sash) left center / auto 100% repeat-x;
}

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

/* One shape for every button the theme draws itself: a firm tab of cloth with a darker selvedge along its foot.
   kit-theme.css gives the kit's buttons the same corner and foot, 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. */
.heirloom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.4rem 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--heirloom-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: var(--heirloom-body-strong);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--heirloom-speed) ease, border-color var(--heirloom-speed) ease, box-shadow var(--heirloom-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. */
.heirloom-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.heirloom-button--primary {
  background: var(--primary, #26365a);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, #000 24%, transparent);
  color: var(--on-primary, #f6efe1);
}

.heirloom-button--primary:hover {
  background: var(--primary-alt, #31446d);
}

.heirloom-button--accent {
  background: var(--accent, #a3302a);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, #000 22%, transparent);
  color: var(--on-accent, #fbf3e4);
}

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

.heirloom-button--secondary {
  border: 1.5px solid var(--text-primary, #2a211b);
  background: transparent;
  color: var(--text-primary, #2a211b);
}

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

.heirloom-button--small {
  min-height: 2.625rem;
  padding: 0.5rem 1.05rem 0.6rem;
  font-size: 0.9375rem;
}

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

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

.heirloom-announcement {
  background: var(--primary, #26365a);
  color: var(--on-primary, #f6efe1);
  font-size: 0.9375rem;
}

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

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

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

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

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

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

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

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

/* The braid, then a bar of bleached linen that stays at the top. The bar has one height for every kind; the centred kind
   adds a row for the menu. */
.heirloom-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--heirloom-line);
  background-color: var(--surface, #f8f3e8);
  background-image: var(--heirloom-weave);
  color: var(--text-primary, #2a211b);
}

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

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

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

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

/* The centred kind's menu row, on a seam of cross-stitches. */
.heirloom-header__rail {
  position: relative;
  max-width: calc(var(--heirloom-width) + 2 * var(--heirloom-gutter));
  margin-inline: auto;
  padding: 0.35rem var(--heirloom-gutter) 0.45rem;
}

.heirloom-header__rail::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--heirloom-gutter);
  left: var(--heirloom-gutter);
  height: 5px;
  background: var(--heirloom-line);
  -webkit-mask: var(--heirloom-seam) left center / auto 100% round;
  mask: var(--heirloom-seam) left center / auto 100% round;
}

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

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

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

.heirloom-header__phone:hover {
  text-decoration: underline;
  text-decoration-color: var(--heirloom-thread);
  text-underline-offset: 0.25em;
}

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

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

/* Without a logo the name has an embroidered star beside it, in the thread's colour. */
.heirloom-brand:not(:has(.heirloom-brand__logo, .brand-logo-original, .logo-mask))::before {
  content: "";
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  background: var(--heirloom-thread);
  -webkit-mask: var(--heirloom-star) center / contain no-repeat;
  mask: var(--heirloom-star) center / contain no-repeat;
}

.heirloom-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines: a third line makes the bar taller than its controls
     (verify-theme-stress.mjs, header-rows). */
  max-width: min(27rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, serif);
  font-size: 1.375rem;
  font-weight: var(--heirloom-heading-weight);
  letter-spacing: -0.005em;
  /* 1.3, not tighter: on a phone the box below clips 0.12em past its edge, and with a tighter line the top of a third
     line showed under the second. */
  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. */
.heirloom-header .heirloom-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) {
  .heirloom-header .heirloom-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.1875rem;
  }

  .heirloom-brand:not(:has(.heirloom-brand__logo, .brand-logo-original, .logo-mask))::before {
    width: 1.375rem;
    height: 1.375rem;
  }
}

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

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

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

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

.heirloom-topbar {
  border-bottom: 1px solid var(--heirloom-line);
  background: var(--surface-alt, #e5dac3);
  color: var(--text-secondary, #5c4f43);
  font-size: 0.875rem;
}

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

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

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

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

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

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

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

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

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

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

.heirloom-nav__item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem 0.7rem;
  color: inherit;
  font-size: 1.0625rem;
  font-weight: var(--heirloom-body-strong);
  line-height: 1.3;
  text-decoration: none;
}

/* Under the page you are on, and under a link you point at, a row of cross-stitches in the thread's colour. */
.heirloom-nav__item > a::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  bottom: 0.2rem;
  left: 0.7rem;
  height: 5px;
  background: var(--heirloom-thread);
  opacity: 0;
  -webkit-mask: var(--heirloom-stitch) left center / auto 100% round;
  mask: var(--heirloom-stitch) left center / auto 100% round;
  transition: opacity var(--heirloom-speed) ease;
}

.heirloom-nav__item > a:hover::after,
.heirloom-nav__item--parent:focus-within > a::after {
  opacity: 0.55;
}

.heirloom-nav__item.is-current > a::after {
  opacity: 1;
}

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

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

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

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

.heirloom-nav__children a:hover {
  background: var(--surface-alt, #e5dac3);
  color: var(--text-primary, #2a211b);
}

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

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

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

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

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

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

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

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

/* A panel of linen under the bar with every page, parted by seams of cross-stitches. It scrolls inside itself when the
   pages are many, so the last one is always reachable. */
.heirloom-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  /* Under the whole header, whatever its height (the braid, a top line, a name on two lines): theme.js measures it
     (--heirloom-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(--heirloom-head, calc(var(--heirloom-bar) + var(--heirloom-braid-height))));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--heirloom-line);
  background-color: var(--surface, #f8f3e8);
  background-image: var(--heirloom-weave);
  color: var(--text-primary, #2a211b);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--text-primary, #2a211b) 40%, transparent);
}

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

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

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

.heirloom-drawer__item {
  position: relative;
}

.heirloom-drawer__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: var(--heirloom-line);
  -webkit-mask: var(--heirloom-seam) left center / auto 100% round;
  mask: var(--heirloom-seam) left center / auto 100% round;
}

/* 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. */
.heirloom-drawer__link {
  display: block;
  padding: 0.85rem 0 0.95rem;
  font-family: var(--font-heading, serif);
  font-size: 1.375rem;
  font-weight: var(--heirloom-heading-weight);
  line-height: 1.3;
  text-decoration: none;
}

.heirloom-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.95rem 0.85rem;
}

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

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

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

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

  .heirloom-header--centered .heirloom-header__inner {
    display: flex;
  }
}

/* A phone menu left open while the window grows to a desktop is put away, unless the bar is folded. */
@media (min-width: 64rem) {
  #site-header:not(.theme-nav-compact) .heirloom-drawer {
    display: none;
  }
}

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

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

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

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

/* Between the steps of the way, a small stitched diamond. */
.heirloom-breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 0.5625rem;
  height: 0.5625rem;
  margin-right: 0.6rem;
  background: var(--heirloom-thread);
  vertical-align: 0.05em;
  -webkit-mask: var(--heirloom-diamond) center / contain no-repeat;
  mask: var(--heirloom-diamond) center / contain no-repeat;
}

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

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

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

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

/* The words at the left under an embroidered star; the picture at the right on a fold of darker linen, with a woven sash
   hanging over its right edge and ending in a fringe below it. */
.heirloom-hero {
  overflow-x: clip;
  padding: clamp(2.5rem, 6vw, 5rem) var(--heirloom-gutter) clamp(3.5rem, 7vw, 6rem);
}

.heirloom-hero--words {
  background-color: var(--surface-alt, #e5dac3);
  background-image: var(--heirloom-weave);
  color: var(--text-primary, #2a211b);
  text-align: center;
}

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

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

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

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

/* The star over the heading. */
.heirloom-hero__mark {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.15rem;
  background: var(--heirloom-thread);
  -webkit-mask: var(--heirloom-star) center / contain no-repeat;
  mask: var(--heirloom-star) center / contain no-repeat;
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here are chosen so that ordinary words fit at 320 px without it ("Apgyvendinimas" at 2.125rem). */
.heirloom-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.125rem, 1.45rem + 2.9vw, 3.75rem);
  font-weight: var(--heirloom-heading-weight);
  letter-spacing: -0.012em;
  line-height: 1.1;
  text-wrap: balance;
}

.heirloom-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #5c4f43);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  line-height: 1.55;
}

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

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

.heirloom-hero__icon {
  margin-top: 0.2em;
  color: var(--accent-ink, #962b25);
}

.heirloom-hero__actions,
.heirloom-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.25rem;
}

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

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

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

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

.heirloom-stars svg.is-full {
  fill: var(--accent-ink, #962b25);
}

.heirloom-hero__trustpilot {
  color: var(--accent-ink, #962b25);
  font-weight: var(--heirloom-body-strong);
}

.heirloom-hero__media {
  position: relative;
  isolation: isolate;
  margin: 0;
  /* Room for the sash's fringe under the picture. */
  margin-bottom: 1.5rem;
}

/* The fold of darker linen behind the picture, a little lower and to the right, with an embroidered hem along its foot.
   It never reaches past the page's gutter, so nothing scrolls sideways. */
.heirloom-hero__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5rem calc(-0.7 * var(--heirloom-gutter)) -1.5rem 1.5rem;
  border-radius: var(--heirloom-radius);
  background-color: var(--surface-alt, #e5dac3);
  background-image: var(--heirloom-weave);
}

.heirloom-hero__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0.5rem;
  bottom: -1rem;
  left: 2.5rem;
  height: 0.75rem;
  background: var(--heirloom-thread);
  opacity: 0.8;
  -webkit-mask: var(--heirloom-hem) left center / auto 100% round;
  mask: var(--heirloom-hem) left center / auto 100% round;
}

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

@media (min-width: 56rem) {
  .heirloom-hero__image {
    aspect-ratio: 5 / 6;
    max-height: 40rem;
  }
}

/* The sash over the picture's right edge: from above the picture's top to below its foot, where its threads hang. */
.heirloom-hero__ribbon {
  position: absolute;
  top: -1.25rem;
  right: clamp(1.25rem, 4vw, 2.25rem);
  bottom: -0.75rem;
  width: calc(27px + 7px);
  background: var(--accent, #a3302a);
  box-shadow: inset 3px 0 var(--primary, #26365a), inset -3px 0 var(--primary, #26365a), 0 8px 18px -10px rgb(0 0 0 / 0.45);
}

.heirloom-hero__ribbon::before {
  content: "";
  position: absolute;
  inset: 0 3.5px;
  background: var(--on-accent, #fbf3e4);
  -webkit-mask: var(--heirloom-sash-v) center top / 100% auto repeat-y;
  mask: var(--heirloom-sash-v) center top / 100% auto repeat-y;
}

/* The fringe: the sash's threads, a little uneven. */
.heirloom-hero__ribbon::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 2px;
  left: 2px;
  height: 1.35rem;
  background:
    repeating-linear-gradient(90deg, var(--accent, #a3302a) 0 2px, transparent 2px 4.5px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 2.25px, var(--accent, #a3302a) 2.25px 4.25px, transparent 4.25px 4.5px) 0 0 / 100% 72% no-repeat;
}

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

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

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

.heirloom-article__header {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
  text-align: center;
}

.heirloom-article__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  color: var(--text-secondary, #5c4f43);
  font-size: 0.9375rem;
}

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

/* Under a post's title, the stitched ornament. */
.heirloom-article__header::after {
  content: "";
  width: 7.65625rem;
  height: 1.96875rem;
  margin-top: 0.35rem;
  background: var(--heirloom-thread);
  -webkit-mask: var(--heirloom-ornament) center / contain no-repeat;
  mask: var(--heirloom-ornament) center / contain no-repeat;
}

.heirloom-prose {
  font-size: 1.1875rem;
  line-height: 1.7;
}

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

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

/* A post opens with a raised first letter in the heading face, the thread's colour. Raised, not dropped: a dropped
   letter needs three lines beside it, and a post's first paragraph is often one. */
.heirloom-article--post .heirloom-prose > p:first-child::first-letter {
  color: var(--accent-ink, #962b25);
  font-family: var(--font-heading, serif);
  font-size: 2.3em;
  font-weight: var(--heirloom-heading-weight);
  line-height: 1;
}

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

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

.heirloom-prose h2 {
  font-size: 1.75rem;
}

.heirloom-prose h3 {
  font-size: 1.4rem;
}

.heirloom-prose h4 {
  font-size: 1.175rem;
}

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

.heirloom-prose ul li::marker {
  color: var(--accent-ink, #962b25);
}

/* A quotation has a seam of cross-stitches down its side. */
.heirloom-prose blockquote {
  position: relative;
  margin-inline: 0;
  padding-left: 1.6rem;
  color: var(--text-primary, #2a211b);
  font-family: var(--font-heading, serif);
  font-size: 1.25em;
  line-height: 1.5;
}

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

.heirloom-prose blockquote::before {
  content: "";
  position: absolute;
  top: 0.3em;
  bottom: 0.3em;
  left: 0;
  width: 5px;
  background: var(--heirloom-thread);
  -webkit-mask: var(--heirloom-stitch) center top / 100% auto round;
  mask: var(--heirloom-stitch) center top / 100% auto round;
}

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

.heirloom-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #5c4f43);
  font-size: 0.9375rem;
}

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

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

.heirloom-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--heirloom-radius);
  background: var(--surface-alt, #e5dac3);
  color: var(--text-primary, #2a211b);
}

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

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

.heirloom-divider__line {
  flex: 1 1 0;
  max-width: 22rem;
  height: 5px;
  background: var(--heirloom-thread);
  opacity: 0.7;
  -webkit-mask: var(--heirloom-seam) left center / auto 100% round;
  mask: var(--heirloom-seam) left center / auto 100% round;
}

.heirloom-divider--dashed .heirloom-divider__line {
  max-width: none;
}

.heirloom-divider__star,
.heirloom-divider--dotted span {
  flex: none;
  background: var(--heirloom-thread);
  -webkit-mask: var(--heirloom-star) center / contain no-repeat;
  mask: var(--heirloom-star) center / contain no-repeat;
}

.heirloom-divider__star {
  width: 1.75rem;
  height: 1.75rem;
}

.heirloom-divider--dotted span {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: var(--heirloom-diamond);
  mask-image: var(--heirloom-diamond);
}

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

/* The footer is the main colour's cloth, hung from the woven sash; the sash's threads hang over its top as a fringe. Its
   words are the on-primary colour, a pair the contract keeps readable in every palette and a website's own colours. */
.heirloom-footer {
  position: relative;
  background: var(--primary, #26365a);
  color: var(--on-primary, #f6efe1);
  --heirloom-footer-quiet: color-mix(in srgb, var(--on-primary, #f6efe1) 80%, transparent);
  --heirloom-footer-line: color-mix(in srgb, var(--on-primary, #f6efe1) 24%, transparent);
}

.heirloom-footer__sash::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 1.1rem;
  background:
    repeating-linear-gradient(90deg, var(--accent, #a3302a) 0 2px, transparent 2px 5px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 2.5px, var(--accent, #a3302a) 2.5px 4.5px, transparent 4.5px 5px) 0 0 / 100% 70% no-repeat;
  pointer-events: none;
}

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

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

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

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

/* The star beside the name is the cloth's own thread here. */
.heirloom-footer .heirloom-brand:not(:has(.heirloom-brand__logo, .brand-logo-original, .logo-mask))::before {
  background: currentColor;
}

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

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

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

.heirloom-footer__invite {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
  font-weight: var(--heirloom-heading-weight);
  letter-spacing: -0.01em;
  line-height: 1.18;
  text-wrap: balance;
}

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

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

.heirloom-footer__tagline,
.heirloom-footer__contact p:not(.heirloom-footer__title),
.heirloom-footer__copyright {
  margin: 0;
  color: var(--heirloom-footer-quiet);
  font-size: 1rem;
}

/* A column's title: the heading face, in its italic where the font palette loads one, after a small stitched diamond. */
.heirloom-footer__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-heading, serif);
  font-size: 1.125rem;
  font-weight: var(--heirloom-heading-weight);
  line-height: 1.35;
}

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

.heirloom-footer__title::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  background: currentColor;
  -webkit-mask: var(--heirloom-diamond) center / contain no-repeat;
  mask: var(--heirloom-diamond) center / contain no-repeat;
}

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

.heirloom-footer__links a,
.heirloom-footer__contact a,
.heirloom-footer__legal a,
.heirloom-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: var(--heirloom-footer-quiet);
  font-size: 1rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

.heirloom-footer__links a:hover,
.heirloom-footer__contact a:hover,
.heirloom-footer__legal a:hover,
.heirloom-footer__inline a:hover {
  color: var(--on-primary, #f6efe1);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

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

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

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

.heirloom-footer__bottom {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
}

/* A seam of cross-stitches over the small print. */
.heirloom-footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--heirloom-footer-line);
  -webkit-mask: var(--heirloom-seam) left center / auto 100% round;
  mask: var(--heirloom-seam) left center / auto 100% round;
}

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

.heirloom-footer__legal a {
  font-size: 0.9375rem;
}

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

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

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

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

/* A large stitched star, as if the page were still on the hoop. */
.heirloom-not-found__star {
  display: block;
  width: 5.625rem;
  height: 5.625rem;
  margin-bottom: 0.5rem;
  background: var(--heirloom-thread);
  -webkit-mask: var(--heirloom-star) center / contain no-repeat;
  mask: var(--heirloom-star) center / contain no-repeat;
}

.heirloom-not-found__number {
  margin: 0;
  color: var(--accent-ink, #962b25);
  font-family: var(--font-heading, serif);
  font-size: 1.25rem;
  font-weight: var(--heirloom-heading-weight);
  letter-spacing: 0.08em;
}

.heirloom-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.45rem + 2.2vw, 3rem);
  font-weight: var(--heirloom-heading-weight);
  line-height: 1.14;
  text-wrap: balance;
}

.heirloom-not-found p {
  margin: 0;
  color: var(--text-secondary, #5c4f43);
}

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

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

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

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

/* ------------------------------------------------------------------ Needlework on the kit's parts */

/* These rules lay the theme's stitches on the Theme Kit's parts; the parts' own look is in kit-theme.css. They are here
   because each draws a motif, and kit-theme.css may load no picture. Each starts with .kit-root (every kit block is
   wrapped in one): kit.css is linked after this file, and one more class lets these win over its rules. Each mark takes the kit's colours, so on a dark or
   coloured band it turns to that band's words colour by itself. */

/* A section's heading carries the stitched ornament: a star between two arms. Over the heading, on its side. A label
   above the heading (an eyebrow) then needs no diamond of its own. */
.kit-root .kit-heading-group:has(> .kit-heading--2)::before {
  content: "";
  display: block;
  width: 7.65625rem;
  height: 1.96875rem;
  margin: 0 0 0.85rem;
  background: var(--kit-accent-text, var(--heirloom-thread));
  -webkit-mask: var(--heirloom-ornament) left center / contain no-repeat;
  mask: var(--heirloom-ornament) left center / contain no-repeat;
}

.kit-root .kit-heading-group.kit-text--center:has(> .kit-heading--2)::before {
  margin-inline: auto;
}

.kit-root .kit-heading-group.kit-text--right:has(> .kit-heading--2)::before {
  margin-inline: auto 0;
}

/* A small label: a stitched diamond before its words. */
.kit-root .kit-eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.6875rem;
  height: 0.6875rem;
  margin-inline-end: 0.5rem;
  background: currentColor;
  vertical-align: -0.02em;
  -webkit-mask: var(--heirloom-diamond) center / contain no-repeat;
  mask: var(--heirloom-diamond) center / contain no-repeat;
}

.kit-root .kit-heading-group:has(> .kit-heading--2) > .kit-eyebrow::before {
  content: none;
}

/* A heading that already has an icon over it (an invitation's icon, an enquiry form's icon in its own row) keeps that
   one mark: one lead mark per heading. As specific as the ornament's rule above, and after it, so it wins. */
.kit-root :is(.kit-icon, .kit-row:has(> .kit-icon:only-child)) + .kit-heading-group:has(> .kit-heading--2)::before {
  content: none;
}

/* A card ends in an embroidered hem, like the end of a towel: a band of stitched diamonds across its foot. The card
   keeps room for it under its words. */
.kit-root .kit-card:is(.kit-card--surface, .kit-card--outline) > .kit-card__content {
  padding-bottom: calc(var(--kit-card-pad) + 1.6rem);
}

.kit-root .kit-card:is(.kit-card--surface, .kit-card--outline)::after {
  content: "";
  position: absolute;
  right: var(--kit-card-pad);
  bottom: 0.95rem;
  left: var(--kit-card-pad);
  height: 0.75rem;
  background: var(--kit-accent-text, var(--heirloom-thread));
  opacity: 0.75;
  pointer-events: none;
  -webkit-mask: var(--heirloom-hem) left center / auto 100% round;
  mask: var(--heirloom-hem) left center / auto 100% round;
}

/* Questions are parted by seams of cross-stitches instead of lines: one over each question, one under the last. */
.kit-root .kit-accordion {
  position: relative;
  border-top: 0;
}

.kit-root .kit-accordion__item {
  border-bottom: 0;
}

.kit-root .kit-accordion__title {
  position: relative;
}

.kit-root .kit-accordion__title::before,
.kit-root .kit-accordion::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--kit-line-strong);
  -webkit-mask: var(--heirloom-seam) left center / auto 100% round;
  mask: var(--heirloom-seam) left center / auto 100% round;
  pointer-events: none;
}

.kit-root .kit-accordion__title::before {
  top: -2px;
}

.kit-root .kit-accordion::after {
  bottom: -3px;
}

/* A seam of cross-stitches along the top and the foot of a tinted band, inside its edges, as a hem is sewn. */
.kit-root .kit-section--muted::before,
.kit-root .kit-section--muted::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 5px;
  background: color-mix(in srgb, var(--kit-accent-text) 45%, transparent);
  -webkit-mask: var(--heirloom-seam) left center / auto 100% round;
  mask: var(--heirloom-seam) left center / auto 100% round;
  pointer-events: none;
}

.kit-root .kit-section--muted::before {
  top: 0.55rem;
}

.kit-root .kit-section--muted::after {
  bottom: 0.55rem;
}

/* A band of the main colour, and of the accent, is woven: the braid runs along its top and its foot. */
.kit-root .kit-section:is(.kit-section--inverse, .kit-section--accent)::before,
.kit-root .kit-section:is(.kit-section--inverse, .kit-section--accent)::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 10px;
  background: currentColor;
  opacity: 0.5;
  -webkit-mask: var(--heirloom-braid) left center / auto 100% repeat-x;
  mask: var(--heirloom-braid) left center / auto 100% repeat-x;
  pointer-events: none;
}

.kit-root .kit-section:is(.kit-section--inverse, .kit-section--accent)::before {
  top: 0.5rem;
}

.kit-root .kit-section:is(.kit-section--inverse, .kit-section--accent)::after {
  bottom: 0.5rem;
}

/* A band laid over a photograph ends on the woven sash. A video band keeps its own shade (kit.css draws it as ::before). */
.kit-root .kit-section--image::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: calc(27px + 7px);
  background:
    linear-gradient(var(--primary, #26365a), var(--primary, #26365a)) top / 100% 3px no-repeat,
    linear-gradient(var(--primary, #26365a), var(--primary, #26365a)) bottom / 100% 3px no-repeat,
    var(--accent, #a3302a);
  pointer-events: none;
}

.kit-root .kit-section--image {
  padding-bottom: calc(var(--kit-pad-spacious) + 1rem);
}

.kit-root .kit-section--image.kit-section--pad-normal {
  padding-bottom: calc(var(--kit-pad-normal) + 1.5rem);
}

/* The sash's pattern on that band: a second layer over the cloth, in the on-accent colour. */
.kit-root .kit-section--image > .kit-section__inner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3.5px;
  left: 0;
  z-index: 2;
  height: 27px;
  background: var(--on-accent, #fbf3e4);
  -webkit-mask: var(--heirloom-sash) left center / auto 100% repeat-x;
  mask: var(--heirloom-sash) left center / auto 100% repeat-x;
  pointer-events: none;
}

/* A team member's portrait sits in an embroidery hoop: a ring of linen inside a ring of wood. */
.kit-root .kit-avatar--large {
  box-shadow: 0 0 0 3px var(--kit-surface), 0 0 0 7px color-mix(in srgb, var(--text-secondary, #5c4f43) 58%, var(--surface, #f8f3e8)), 0 0 0 8px color-mix(in srgb, var(--text-primary, #2a211b) 30%, transparent);
  margin: 0.5rem;
}

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

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

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

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

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