/*
 * Hearth: the craft bakery and the farm shop. The page is unbleached paper with a faint grain; every other section is a
 * strip of kraft laid across it with torn edges; dark sections and the footer are chalkboards with chalk dust; small
 * labels are rubber stamps; cards and the opening's words stand on labels with scooped corners and a printed rule inside
 * the edge; a short length of baker's twine marks the header, the opening, the divider and the footer.
 *
 * This file draws the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the blocks the
 * theme draws itself (the two openings, the article body, the divider) and the textures and compositions that need a
 * picture (grain, chalk, torn edges, stamp ink: data pictures in custom properties below). Everything inside a kit block
 * that is only a token or a shape is in kit-theme.css, which may hold no picture.
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. theme-colour-pairs.test.mjs
 * reads every rule here that sets both a background and a colour and fails for any other pair: a website with its own
 * dark colours would get unreadable text. A dark palette is just other values for the same tokens: nothing here asks
 * whether the page is dark.
 *
 * Type comes from the layout: --font-heading, --font-body, --hearth-heading-weight and --hearth-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here.
 */

/* ------------------------------------------------------------------ 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) {
  --hearth-width: 74rem;
  --hearth-gutter: clamp(1rem, 4vw, 2.25rem);
  --hearth-bar: 4.5rem;
  --hearth-radius: 0.375rem;
  --hearth-button-radius: 0.375rem;
  /* The scoop cut from each corner of a label (cards, the opening's words). */
  --hearth-cut: 0.75rem;
  --hearth-heading-weight: 700;
  --hearth-body-strong: 700;
  --hearth-speed: 180ms;
  --hearth-line: var(--border, #d4c09e);
  /* The two colours of baker's twine. */
  --hearth-twine: repeating-linear-gradient(-58deg, var(--accent, #b03f26) 0 4px, var(--on-accent, #fff7ec) 4px 7px);
  /* Paper: a fine grain and long faint fibres, laid over any colour. */
  --hearth-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .22' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='.075'/%3E%3Crect width='260' height='260' filter='url(%23f)' opacity='.05'/%3E%3C/svg%3E");
  /* Chalk dust for the boards. */
  --hearth-chalk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.6 1.38'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23c)' opacity='.2'/%3E%3C/svg%3E");
  /* Stamp ink: solid with the patches a rubber stamp leaves where it did not press (a mask). */
  --hearth-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.7 1.82'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23i)'/%3E%3C/svg%3E");
  /* A torn paper edge (a mask, 320 by 14): the paper below the line, and the same edge turned for the foot of a band. */
  --hearth-tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='14' viewBox='0 0 320 14'%3E%3Cpath d='M0 14 L0.0 6.5 L3.0 9.5 L7.5 8.2 L12.8 8.4 L19.6 7.9 L28.3 5.1 L36.3 2.6 L42.5 9.5 L46.4 6.8 L54.2 7.7 L63.6 9.4 L68.9 8.9 L73.0 5.4 L78.1 9.6 L86.2 1.7 L93.1 6.8 L97.5 1.9 L102.9 7.8 L109.5 4.6 L114.4 5.9 L119.8 7.0 L124.4 9.4 L133.5 7.6 L140.1 6.8 L149.6 6.1 L154.4 7.3 L159.7 6.0 L168.9 4.2 L172.4 6.1 L175.9 10.0 L183.4 4.4 L190.5 4.4 L199.7 9.3 L209.1 8.4 L212.1 1.2 L219.5 5.0 L225.9 8.0 L235.1 5.0 L244.3 4.3 L247.3 9.4 L256.8 3.6 L261.1 9.8 L268.9 5.2 L273.3 2.7 L281.2 8.1 L284.5 4.2 L288.4 8.0 L291.6 9.2 L301.6 9.7 L307.5 5.1 L316.0 6.1 L320.0 6.5 L320 14Z'/%3E%3C/svg%3E");
  --hearth-tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='14' viewBox='0 0 320 14'%3E%3Cpath d='M0 0 L0.0 7.5 L3.0 4.5 L7.5 5.8 L12.8 5.6 L19.6 6.1 L28.3 8.9 L36.3 11.4 L42.5 4.5 L46.4 7.2 L54.2 6.3 L63.6 4.6 L68.9 5.1 L73.0 8.6 L78.1 4.4 L86.2 12.3 L93.1 7.2 L97.5 12.1 L102.9 6.2 L109.5 9.4 L114.4 8.1 L119.8 7.0 L124.4 4.6 L133.5 6.4 L140.1 7.2 L149.6 7.9 L154.4 6.7 L159.7 8.0 L168.9 9.8 L172.4 7.9 L175.9 4.0 L183.4 9.6 L190.5 9.6 L199.7 4.7 L209.1 5.6 L212.1 12.8 L219.5 9.0 L225.9 6.0 L235.1 9.0 L244.3 9.7 L247.3 4.6 L256.8 10.4 L261.1 4.2 L268.9 8.8 L273.3 11.3 L281.2 5.9 L284.5 9.8 L288.4 6.0 L291.6 4.8 L301.6 4.3 L307.5 8.9 L316.0 7.9 L320.0 7.5 L320 0Z'/%3E%3C/svg%3E");
}

/* A label's four scooped corners, as a mask. Declared on each element that uses it, not on the root: a custom property
   that names another is worked out where it is declared, so a root value would ignore an element's own --hearth-cut. */
.hearth-label,
.hearth-hero__backing,
.hearth-hero__image,
.hearth-main [data-block]:not([data-block^="x_"]) .kit-split > .kit-picture {
  --hearth-scoops:
    radial-gradient(circle at 0 0, #0000 var(--hearth-cut), #000 calc(var(--hearth-cut) + 0.5px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--hearth-cut), #000 calc(var(--hearth-cut) + 0.5px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--hearth-cut), #000 calc(var(--hearth-cut) + 0.5px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--hearth-cut), #000 calc(var(--hearth-cut) + 0.5px)) 100% 100% / 51% 51% no-repeat;
}

/* Every heading face is brought to about the width of Vollkorn's, so the sizes below, chosen for ordinary words at 320 px,
   hold for each font palette (the face's width of "Apgyvendinimas" against Vollkorn 700). A website's own face keeps 1. */
:root[data-hearth-face="alfa-slab-one"] {
  --hearth-scale: 0.9;
}

:root[data-hearth-face="young-serif"] {
  --hearth-scale: 0.95;
}

:root[data-hearth-face="alegreya"] {
  --hearth-scale: 1.06;
}

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

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

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

body {
  margin: 0;
  background-color: var(--background, #f4ede1);
  background-image: var(--hearth-grain);
  color: var(--text-primary, #2a2019);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.09375rem;
  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, #9c3721);
  outline-offset: 3px;
}

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

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

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

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

/* A short length of baker's twine: the theme's one mark. Decorative, so screen readers skip it (aria-hidden). */
.hearth-twine {
  display: block;
  flex: none;
  width: 4.5rem;
  height: 4px;
  border-radius: 4px;
  background: var(--hearth-twine);
}

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

/* One shape for every button the theme draws itself: a small printed label, with a fine rule inside its edge.
   kit-theme.css gives the kit's buttons the same corner and rule, and the line of this theme in resilience.css
   (--chrome-button-radius) gives the corner 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. */
.hearth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--hearth-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: var(--hearth-body-strong);
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--hearth-speed) ease, border-color var(--hearth-speed) ease, box-shadow var(--hearth-speed) ease, transform var(--hearth-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. */
.hearth-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hearth-button:active {
  transform: translateY(1px);
}

.hearth-button--primary {
  border-color: var(--primary, #2c3530);
  background: var(--primary, #2c3530);
  color: var(--on-primary, #f3ecdf);
  box-shadow: inset 0 0 0 3px var(--primary, #2c3530), inset 0 0 0 4px color-mix(in srgb, var(--on-primary, #f3ecdf) 42%, transparent);
}

.hearth-button--primary:hover {
  border-color: var(--primary-alt, #39443d);
  background: var(--primary-alt, #39443d);
  box-shadow: inset 0 0 0 3px var(--primary-alt, #39443d), inset 0 0 0 4px color-mix(in srgb, var(--on-primary, #f3ecdf) 75%, transparent);
}

.hearth-button--accent {
  border-color: var(--accent, #b03f26);
  background: var(--accent, #b03f26);
  color: var(--on-accent, #fff7ec);
  box-shadow: inset 0 0 0 3px var(--accent, #b03f26), inset 0 0 0 4px color-mix(in srgb, var(--on-accent, #fff7ec) 45%, transparent);
}

/* The hover brightens the printed rule, not the fill: a lighter fill would bring the words' contrast under what the
   colour contract promises for this pair. */
.hearth-button--accent:hover {
  box-shadow: inset 0 0 0 3px var(--accent, #b03f26), inset 0 0 0 4px var(--on-accent, #fff7ec);
}

.hearth-button--secondary {
  border: 2px solid currentColor;
  background: transparent;
  color: var(--text-primary, #2a2019);
}

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

.hearth-button--small {
  min-height: 2.6rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.9375rem;
}

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

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

.hearth-announcement {
  background: var(--accent, #b03f26);
  color: var(--on-accent, #fff7ec);
  font-size: 0.9375rem;
}

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

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

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

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

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

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

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

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

/* The page's own paper, held at the top, with a length of baker's twine along its foot. The bar has one height for every
   kind; the centred kind adds a row for the menu. theme.js marks it once the page has moved (is-scrolled): it then lifts
   off the page with a soft shadow. */
.hearth-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--background, #f4ede1);
  background-image: var(--hearth-grain);
  color: var(--text-primary, #2a2019);
  transition: box-shadow var(--hearth-speed) ease;
}

.hearth-header::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--hearth-twine);
  pointer-events: none;
}

.hearth-header.is-scrolled {
  box-shadow: 0 14px 22px -18px color-mix(in srgb, var(--text-primary, #2a2019) 55%, transparent);
}

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

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

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

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

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

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

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

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

.hearth-header__phone:hover {
  color: var(--accent-ink, #9c3721);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.hearth-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. The name
   is not tracked tight: tight tracking joins "rn" into "m" in a name. */
.hearth-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.hearth-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.5rem;
  font-weight: var(--hearth-heading-weight);
  letter-spacing: 0;
  line-height: 1.25;
}

/* 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. */
.hearth-header .hearth-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) {
  .hearth-header .hearth-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.25rem;
  }
}

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

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

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

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

/* A slim chalkboard strip above the bar: the phone, the email and the social links, as a shop writes them over its door. */
.hearth-topbar {
  background-color: var(--primary, #2c3530);
  background-image: var(--hearth-chalk);
  color: var(--on-primary, #f3ecdf);
  font-size: 0.875rem;
}

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

.hearth-topbar__contact {
  display: flex;
  gap: 1.75rem;
  min-width: 0;
}

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

.hearth-topbar a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

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

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

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

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

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

.hearth-nav__item {
  position: relative;
}

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

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

.hearth-nav__item > a:hover,
.hearth-nav__item--parent:focus-within > a {
  color: var(--accent-ink, #9c3721);
}

/* The page being shown: a short stroke of stamp ink under its name. */
.hearth-nav__item.is-current > a {
  text-decoration: underline;
  text-decoration-color: var(--accent, #b03f26);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5em;
}

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

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

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

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

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

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

.hearth-menu-button:hover {
  color: var(--accent-ink, #9c3721);
}

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

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

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

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

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

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

/* A sheet of kraft under the bar with every page. It scrolls inside itself when the pages are many, so the last one is
   always reachable. */
.hearth-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
     (--hearth-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(--hearth-head, var(--hearth-bar)) - 3px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--surface-alt, #e6d4b4);
  background-image: var(--hearth-grain);
  color: var(--text-primary, #2a2019);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--text-primary, #2a2019) 50%, transparent);
}

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

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

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

/* Rows parted by a seam of stitches, like a flour sack's. */
.hearth-drawer__item {
  border-bottom: 2px dashed color-mix(in srgb, var(--text-primary, #2a2019) 22%, transparent);
}

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

.hearth-drawer__link:hover {
  color: var(--accent-ink, #9c3721);
}

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

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

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

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

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

  .hearth-header--centered .hearth-header__inner {
    display: flex;
    padding-top: 0.5rem;
  }
}

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

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

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

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

.hearth-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #5b4939);
  font-size: 0.9375rem;
  list-style: none;
}

.hearth-breadcrumbs li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: var(--accent-ink, #9c3721);
}

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

.hearth-breadcrumbs a:hover {
  color: var(--accent-ink, #9c3721);
  text-decoration: underline;
}

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

/* ------------------------------------------------------------------ Labels */

/* A label: a plate of paper with its corners scooped out and a printed rule inside its edge, the way a jar or a wheel of
   cheese is labelled. The opening's words stand on one; kit-theme.css makes the kit's cards the same. The rule is the
   element's own outline drawn inside it, so the scoops cut it where it meets them, as on a printed label. */
.hearth-label {
  --hearth-cut: 1.1rem;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.35rem, 3.4vw, 3rem);
  background-color: var(--surface, #fbf7ef);
  background-image: var(--hearth-grain);
  color: var(--text-primary, #2a2019);
  text-align: center;
  outline: 1px solid color-mix(in srgb, var(--text-primary, #2a2019) 32%, transparent);
  outline-offset: -0.6rem;
  -webkit-mask: var(--hearth-scoops);
  mask: var(--hearth-scoops);
}

/* ------------------------------------------------------------------ The full-width opening */

/* includes/hero.php. The photograph across the window with a torn foot; the words on a label. */
.hearth-opening {
  position: relative;
}

.hearth-opening__stage {
  position: relative;
  display: grid;
}

.hearth-opening__media {
  position: relative;
  overflow: hidden;
  background: var(--surface-alt, #e6d4b4);
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 13px) no-repeat, var(--hearth-tear-bottom) 0 100% / 320px 14px repeat-x;
  mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 13px) no-repeat, var(--hearth-tear-bottom) 0 100% / 320px 14px repeat-x;
}

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

.hearth-opening__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--hearth-width) + 2 * var(--hearth-gutter));
  margin-inline: auto;
  padding-inline: var(--hearth-gutter);
  /* The label's shadow: a mask cuts a box shadow, a filter follows the label's own shape. */
  filter: drop-shadow(0 18px 26px color-mix(in srgb, #000 28%, transparent));
}

.hearth-opening__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(1.9rem, 1.4rem + 2.6vw, 3.6rem) * var(--hearth-scale, 1));
  font-weight: var(--hearth-heading-weight);
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-wrap: balance;
}

.hearth-opening__lead {
  max-width: 32rem;
  margin: 0;
  color: var(--text-secondary, #5b4939);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.55;
}

.hearth-opening__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

/* A wide screen: the photograph across the window, as tall as the first screen less the room the label needs, and the
   label centred on its torn foot, its upper part on the photograph and its lower part on the paper, like a label on a
   jar. The middle of the photograph, where a product usually stands, stays clear. */
@media (min-width: 56rem) {
  .hearth-opening--picture .hearth-opening__media {
    height: clamp(22rem, calc(100svh - var(--hearth-head, var(--hearth-bar)) - 13rem), 46rem);
  }

  .hearth-opening--picture .hearth-opening__inner {
    margin-top: -14rem;
    padding-bottom: clamp(2.75rem, 4vw, 3.75rem);
  }

  .hearth-opening--picture .hearth-opening__label {
    max-width: 38rem;
    margin-inline: auto;
  }

  /* An opening under the breadcrumb takes what is left of the first screen: the screen less where the opening starts
     (theme.js measures it, --hearth-opening-top; the estimate is the header, the breadcrumb's line and its padding). */
  .hearth-breadcrumbs + .hearth-opening--picture .hearth-opening__media {
    height: clamp(17rem, calc(100svh - var(--hearth-opening-top, calc(var(--hearth-head, var(--hearth-bar)) + 3.5rem)) - 13rem), 40rem);
  }
}

/* A phone and a narrow window: the photograph first, the label overlapping its foot. */
@media (max-width: 55.99rem) {
  .hearth-opening--picture .hearth-opening__media {
    height: clamp(13rem, 46svh, 26rem);
  }

  .hearth-opening--picture .hearth-opening__inner {
    margin-top: -3.5rem;
    padding-bottom: clamp(2rem, 6vw, 3rem);
  }

  .hearth-breadcrumbs + .hearth-opening--picture .hearth-opening__media {
    height: clamp(10rem, 28svh, 17rem);
  }

  .hearth-opening--picture .hearth-opening__label {
    gap: 0.9rem;
    padding: 1.75rem 1.25rem;
  }

  .hearth-opening--picture .hearth-opening__inner {
    filter: drop-shadow(0 10px 14px color-mix(in srgb, #000 16%, transparent));
  }
}

/* The video plays on wide screens only; its picture stays on a phone. */
@media (max-width: 47.99rem) {
  .hearth-opening__video {
    display: none;
  }
}

/* Without a picture: the label alone on a kraft band. */
.hearth-opening--words {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
  background-color: var(--surface-alt, #e6d4b4);
  background-image: var(--hearth-grain);
}

.hearth-opening--words .hearth-opening__label {
  max-width: 40rem;
  margin-inline: auto;
}

.hearth-opening--words .hearth-opening__inner {
  filter: none;
}

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

.hearth-hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) var(--hearth-gutter) clamp(3rem, 7vw, 6rem);
}

.hearth-hero--words {
  background-color: var(--surface-alt, #e6d4b4);
  background-image: var(--hearth-grain);
  text-align: center;
}

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

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

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

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

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

.hearth-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #5b4939);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
}

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

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

.hearth-hero__icon {
  margin-top: 0.2em;
  color: var(--accent-ink, #9c3721);
}

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

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

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

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

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

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

.hearth-hero__trustpilot {
  color: var(--accent-ink, #9c3721);
  font-weight: var(--hearth-body-strong);
}

/* The picture mounted on a card of kraft that shows below it and to its left, both with a label's scooped corners. The
   room the card takes is inside the column (the figure's padding), so nothing reaches past a phone's edge. */
.hearth-hero__media {
  position: relative;
  margin: 0;
  padding: 0 0 1rem 1rem;
}

.hearth-hero__backing {
  --hearth-cut: 1rem;
  position: absolute;
  inset: 1rem 1rem 0 0;
  background-color: var(--surface-alt, #e6d4b4);
  background-image: var(--hearth-grain);
  -webkit-mask: var(--hearth-scoops);
  mask: var(--hearth-scoops);
}

.hearth-hero--words .hearth-hero__backing {
  background-color: var(--background, #f4ede1);
}

.hearth-hero__image {
  --hearth-cut: 1rem;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  -webkit-mask: var(--hearth-scoops);
  mask: var(--hearth-scoops);
}

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

/* ------------------------------------------------------------------ Bands */

/* Kraft bands (the kit's muted sections, every other section of a page): grained paper with both edges torn. The edges are
   drawn outside the band, 13 px over its neighbours, in the band's own colour; a band that follows paints its own over
   them. */
.hearth-main .kit-section--muted {
  background-image: var(--hearth-grain);
}

.hearth-main .kit-section--muted::before,
.hearth-main .kit-section--muted::after,
.hearth-hero--words::after,
.hearth-opening--words::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 14px;
  background-color: inherit;
  background-image: inherit;
  pointer-events: none;
}

.hearth-main .kit-section--muted::before {
  bottom: calc(100% - 1px);
  -webkit-mask: var(--hearth-tear-top) 0 0 / 320px 14px repeat-x;
  mask: var(--hearth-tear-top) 0 0 / 320px 14px repeat-x;
}

.hearth-main .kit-section--muted::after,
.hearth-hero--words::after,
.hearth-opening--words::after {
  top: calc(100% - 1px);
  -webkit-mask: var(--hearth-tear-bottom) 37px 0 / 320px 14px repeat-x;
  mask: var(--hearth-tear-bottom) 37px 0 / 320px 14px repeat-x;
}

.hearth-hero--words,
.hearth-opening--words {
  z-index: 1;
}

/* The opening of an inner page, right under the breadcrumb, starts a little lower when it is a kraft band, so its torn
   edge stands clear of the breadcrumb. */
.hearth-breadcrumbs + .kit-root > .kit-section--muted:first-child {
  margin-top: 1.25rem;
}

/* Chalkboards (the kit's dark sections): chalk dust on the board, a smudge where it was wiped, and a frame drawn in chalk
   inside its edge. */
.hearth-main .kit-section--inverse {
  background-image:
    radial-gradient(ellipse 60% 70% at 18% 30%, color-mix(in srgb, var(--on-primary, #f3ecdf) 7%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 60% at 85% 75%, color-mix(in srgb, var(--on-primary, #f3ecdf) 5%, transparent), transparent 70%),
    var(--hearth-chalk);
}

.hearth-main .kit-section--inverse::before {
  content: "";
  position: absolute;
  inset: clamp(0.5rem, 1.2vw, 0.9rem);
  border: 2px solid color-mix(in srgb, var(--on-primary, #f3ecdf) 30%, transparent);
  border-radius: 0.35rem;
  pointer-events: none;
}

/* An invitation without a picture (cta_section) is a chalkboard too, not a kraft band: the kit draws it on the tinted band,
   so the colour roles are turned here as the kit turns them for its dark sections, and the torn edges give way to the
   chalk frame. */
.hearth-main [data-block="cta_section"].kit-section--muted {
  --kit-section-bg: var(--primary, #2c3530);
  --kit-section-fg: var(--on-primary, #f3ecdf);
  --kit-text: var(--on-primary, #f3ecdf);
  --kit-muted: color-mix(in srgb, var(--on-primary, #f3ecdf) 82%, transparent);
  --kit-surface: color-mix(in srgb, var(--on-primary, #f3ecdf) 9%, transparent);
  --kit-surface-alt: color-mix(in srgb, var(--on-primary, #f3ecdf) 14%, transparent);
  --kit-primary: var(--on-primary, #f3ecdf);
  --kit-primary-hover: color-mix(in srgb, var(--on-primary, #f3ecdf) 88%, var(--primary, #2c3530));
  --kit-on-primary: var(--primary, #2c3530);
  --kit-accent: var(--on-primary, #f3ecdf);
  --kit-accent-text: var(--on-primary, #f3ecdf);
  --kit-on-accent: var(--primary, #2c3530);
  --kit-line: color-mix(in srgb, var(--on-primary, #f3ecdf) 26%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--on-primary, #f3ecdf) 52%, transparent);
  --kit-soft: color-mix(in srgb, var(--on-primary, #f3ecdf) 14%, transparent);
  --kit-focus: var(--on-primary, #f3ecdf);
  background-color: var(--primary, #2c3530);
  background-image:
    radial-gradient(ellipse 60% 70% at 18% 30%, color-mix(in srgb, var(--on-primary, #f3ecdf) 7%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 60% at 85% 75%, color-mix(in srgb, var(--on-primary, #f3ecdf) 5%, transparent), transparent 70%),
    var(--hearth-chalk);
  color: var(--on-primary, #f3ecdf);
}

.hearth-main [data-block="cta_section"].kit-section--muted::before {
  inset: clamp(0.5rem, 1.2vw, 0.9rem);
  height: auto;
  border: 2px solid color-mix(in srgb, var(--on-primary, #f3ecdf) 30%, transparent);
  border-radius: 0.35rem;
  background: none;
  -webkit-mask: none;
  mask: none;
}

.hearth-main [data-block="cta_section"].kit-section--muted::after {
  content: none;
}

/* A band of the accent colour is stamped: its ink has the same patches as a stamp's. */
.hearth-main .kit-section--accent {
  background-image: var(--hearth-chalk);
}

/* ------------------------------------------------------------------ Section headings */

/* A section's heading is tied with a short length of baker's twine under it, on the side the heading is set. Only a
   section's own heading (h2), not a card's. */
.hearth-main .kit-heading-group:has(> .kit-heading--2)::after {
  content: "";
  display: block;
  width: 4rem;
  height: 4px;
  margin-top: 0.85rem;
  border-radius: 4px;
  background: var(--hearth-twine);
}

.hearth-main .kit-heading-group.kit-text--center:has(> .kit-heading--2)::after {
  margin-inline: auto;
}

/* ------------------------------------------------------------------ Stamps */

/* Small labels above headings are rubber stamps (kit-theme.css draws the double rule and the slant); the ink has gaps
   where the stamp did not press. A mask, so it is here and not in kit-theme.css. */
.kit-eyebrow,
.kit-card__eyebrow {
  -webkit-mask: var(--hearth-ink) 0 0 / 160px 160px;
  mask: var(--hearth-ink) 0 0 / 160px 160px;
}

/* A step's icon in its round stamp (kit-theme.css) has the stamp's patchy ink too. */
.kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body > .kit-icon:first-child {
  -webkit-mask: var(--hearth-ink) 0 0 / 160px 160px;
  mask: var(--hearth-ink) 0 0 / 160px 160px;
}

/* A step with an icon: the kit makes its number a small plain label over the title; it is not stamped. */
.kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__eyebrow {
  -webkit-mask: none;
  mask: none;
}

/* ------------------------------------------------------------------ Kit blocks this theme composes */

/* data-block comes from includes/stitch.php. Only the stock blocks named here are composed differently; a module's
   section (x_...) keeps what its module asked for. */

/* A price list is the shop's chalkboard menu: each group on a board of the primary colour in a frame, the prices in
   chalk with dotted leaders. The kit's colour roles are turned for the board as they are for its dark sections. */
.hearth-main [data-block="price_list"] .kit-card--surface {
  --kit-section-bg: var(--primary, #2c3530);
  --kit-section-fg: var(--on-primary, #f3ecdf);
  --kit-text: var(--on-primary, #f3ecdf);
  --kit-muted: var(--on-primary, #f3ecdf);
  --kit-accent: var(--on-primary, #f3ecdf);
  --kit-accent-text: var(--on-primary, #f3ecdf);
  --kit-line: color-mix(in srgb, var(--on-primary, #f3ecdf) 26%, transparent);
  --kit-focus: var(--on-primary, #f3ecdf);
  border: 0;
  background-color: var(--primary, #2c3530);
  background-image:
    radial-gradient(ellipse 70% 60% at 25% 20%, color-mix(in srgb, var(--on-primary, #f3ecdf) 8%, transparent), transparent 70%),
    var(--hearth-chalk);
  color: var(--on-primary, #f3ecdf);
  box-shadow: inset 0 0 0 0.45rem color-mix(in srgb, var(--accent, #b03f26) 38%, var(--primary, #2c3530)), inset 0 0 0 calc(0.45rem + 1px) color-mix(in srgb, var(--on-primary, #f3ecdf) 22%, transparent);
  outline: 0;
  -webkit-mask: none;
  mask: none;
}

.hearth-main [data-block="price_list"] .kit-card--surface .kit-card__content {
  padding: clamp(1.6rem, 3vw, 2.25rem);
}

.hearth-main [data-block="price_list"] .kit-list--menu .kit-list-item__title {
  font-family: var(--font-heading, serif);
  font-size: 1.125rem;
  font-weight: var(--hearth-heading-weight);
}

.hearth-main [data-block="price_list"] .kit-list--menu .kit-list-item__meta {
  font-size: 1.0625rem;
}

.hearth-main [data-block="price_list"] .kit-list--menu .kit-list-item__line:has(.kit-list-item__meta)::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--on-primary, #f3ecdf) 70%, transparent) 1px, transparent 1.4px) left bottom / 7px 3px repeat-x;
  height: 3px;
}

/* A price table's plans are paper bread bags: the top cut with pinking shears, a fold just under it, the price large in
   the heading face. The plan that is recommended is a bag of kraft whose top is printed in the accent, with its stamp;
   the others are white paper. A mask cuts the teeth, so no line or shadow is drawn at the edge. */
.hearth-main [data-block="pricing_table"] :is(.kit-card--surface, .kit-card--outline) {
  --kit-text: var(--text-primary, #2a2019);
  --kit-muted: var(--text-secondary, #5b4939);
  --kit-accent-text: var(--accent-ink, #9c3721);
  border: 0;
  border-radius: 0 0 var(--kit-radius) var(--kit-radius);
  background-color: var(--surface, #fbf7ef);
  background-image: var(--hearth-grain);
  color: var(--text-primary, #2a2019);
  box-shadow: none;
  outline: 0;
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 50% 0 / 16px 8px repeat-x, linear-gradient(#000, #000) 0 7.5px / 100% 100% no-repeat;
  mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 50% 0 / 16px 8px repeat-x, linear-gradient(#000, #000) 0 7.5px / 100% 100% no-repeat;
}

.hearth-main [data-block="pricing_table"] .kit-card--surface {
  background-color: var(--surface-alt, #e6d4b4);
  background-image: linear-gradient(var(--accent, #b03f26) 0 1.6rem, transparent 1.6rem), var(--hearth-grain);
}

/* The fold under the top. */
.hearth-main [data-block="pricing_table"] :is(.kit-card--surface, .kit-card--outline)::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  right: 0;
  left: 0;
  height: 0.6rem;
  border-top: 1px solid color-mix(in srgb, var(--text-primary, #2a2019) 22%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--text-primary, #2a2019) 9%, transparent), transparent);
  pointer-events: none;
}

.hearth-main [data-block="pricing_table"] :is(.kit-card--surface, .kit-card--outline) > .kit-card__content {
  align-items: center;
  padding-top: 3rem;
  text-align: center;
}

.hearth-main [data-block="pricing_table"] :is(.kit-card--surface, .kit-card--outline) .kit-list {
  text-align: left;
}

.hearth-main [data-block="pricing_table"] .kit-stat__value {
  color: var(--text-primary, #2a2019);
}

/* A picture beside words (text_with_image, about_section) has a label's scooped corners. */
.hearth-main [data-block]:not([data-block^="x_"]) .kit-split > .kit-picture {
  --hearth-cut: 1rem;
  -webkit-mask: var(--hearth-scoops);
  mask: var(--hearth-scoops);
}

/* A gallery's pictures are prints: a narrow paper border and a soft shadow, as if laid on the counter. */
.hearth-main :is([data-block="image_gallery"], [data-block="portfolio_showcase"]) .kit-picture {
  padding: 0.4rem;
  border-radius: 0.2rem;
  background-color: var(--surface, #fbf7ef);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary, #2a2019) 14%, transparent), 0 12px 22px -16px color-mix(in srgb, var(--text-primary, #2a2019) 45%, transparent);
}

.hearth-main :is([data-block="image_gallery"], [data-block="portfolio_showcase"]) .kit-picture img {
  border-radius: 0.1rem;
}

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

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

.hearth-article__inner {
  max-width: 43rem;
  margin-inline: auto;
}

.hearth-article__header {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  margin-bottom: 2.25rem;
}

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

.hearth-article__byline time {
  color: var(--accent-ink, #9c3721);
  font-weight: var(--hearth-body-strong);
}

.hearth-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(2rem, 1.45rem + 2.2vw, 3rem) * var(--hearth-scale, 1));
  font-weight: var(--hearth-heading-weight);
  letter-spacing: -0.005em;
  line-height: 1.12;
  text-wrap: balance;
}

.hearth-article__header::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 4px;
  border-radius: 4px;
  background: var(--hearth-twine);
}

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

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

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

/* The story opens with a large first letter in the heading face, as a recipe book's chapters do. It floats, so nothing
   clips the marks of a letter such as Š. */
.hearth-article--post .hearth-prose > p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 0;
  color: var(--accent-ink, #9c3721);
  font-family: var(--font-heading, serif);
  font-size: 3.6em;
  font-weight: var(--hearth-heading-weight);
  line-height: 0.85;
}

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

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

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

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

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

.hearth-prose blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.4rem;
  border-left: 4px solid transparent;
  border-image: var(--hearth-twine) 1;
  color: var(--text-primary, #2a2019);
  font-family: var(--font-heading, serif);
  font-size: 1.2rem;
  line-height: 1.5;
}

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

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

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

.hearth-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--hearth-radius);
  background: var(--surface-alt, #e6d4b4);
}

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

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

.hearth-divider__line {
  flex: 1 1 0;
  border-top: 1px solid var(--hearth-line);
}

/* A seam of stitches, like a flour sack's. */
.hearth-divider--dashed .hearth-divider__line {
  border-top: 2px dashed color-mix(in srgb, var(--text-primary, #2a2019) 28%, transparent);
}

.hearth-divider--dotted span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent, #b03f26);
}

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

/* The footer is the shop's chalkboard: the primary colour with chalk dust, on-primary words, twine along its top. The
   same pair in every palette and with a website's own colours. */
.hearth-footer {
  position: relative;
  border-top: 4px solid transparent;
  border-image: var(--hearth-twine) 1;
  background-color: var(--primary, #2c3530);
  background-image:
    radial-gradient(ellipse 55% 60% at 15% 20%, color-mix(in srgb, var(--on-primary, #f3ecdf) 6%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 55% at 90% 85%, color-mix(in srgb, var(--on-primary, #f3ecdf) 5%, transparent), transparent 70%),
    var(--hearth-chalk);
  color: var(--on-primary, #f3ecdf);
}

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

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

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

.hearth-footer .hearth-brand__name {
  max-width: 100%;
  font-size: 1.65rem;
}

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

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

.hearth-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: 2px dashed color-mix(in srgb, var(--on-primary, #f3ecdf) 28%, transparent);
}

.hearth-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(1.75rem, 1.25rem + 2vw, 2.75rem) * var(--hearth-scale, 1));
  font-weight: var(--hearth-heading-weight);
  line-height: 1.15;
  text-wrap: balance;
}

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

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

.hearth-footer__tagline,
.hearth-footer__contact p:not(.hearth-footer__title),
.hearth-footer__copyright {
  margin: 0;
  color: var(--on-primary, #f3ecdf);
  font-size: 1rem;
}

.hearth-footer__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading, serif);
  font-size: 1.2rem;
  font-weight: var(--hearth-heading-weight);
  line-height: 1.3;
}

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

.hearth-footer__links a,
.hearth-footer__contact a,
.hearth-footer__legal a,
.hearth-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: var(--on-primary, #f3ecdf);
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--on-primary, #f3ecdf) 0%, transparent);
  text-underline-offset: 0.25em;
  overflow-wrap: break-word;
  transition: text-decoration-color var(--hearth-speed) ease;
}

.hearth-footer__links a:hover,
.hearth-footer__contact a:hover,
.hearth-footer__legal a:hover,
.hearth-footer__inline a:hover {
  text-decoration-color: var(--accent, #b03f26);
  text-decoration-thickness: 2px;
}

.hearth-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 2px solid color-mix(in srgb, var(--on-primary, #f3ecdf) 40%, transparent);
  border-radius: 50%;
  color: inherit;
}

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

/* The opening hours on a small board of their own inside the big one, framed in chalk, a clock at its head; the days and
   the hours in two columns so the hours line up. */
.hearth-footer__hours {
  align-self: start;
  padding: 1.1rem 1.25rem 1.2rem;
  border: 2px dashed color-mix(in srgb, var(--on-primary, #f3ecdf) 40%, transparent);
  border-radius: 0.5rem;
}

.hearth-footer__clock {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.7rem;
}

.hearth-footer__hours ul {
  display: grid;
  /* The days never narrower than their longest word (min-content, with break-word: "anywhere" would count a word as one
     letter wide), the hours as wide as they need; a long line of hours wraps at its spaces. */
  grid-template-columns: minmax(min-content, 1fr) auto;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.hearth-footer__hours li {
  display: contents;
}

.hearth-footer__hours span {
  overflow-wrap: break-word;
}

.hearth-footer__hours li > span:only-child {
  grid-column: 1 / -1;
}

.hearth-footer__hours li > span + span {
  font-weight: var(--hearth-body-strong);
  text-align: right;
}

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

.hearth-footer__bottom {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: 1.25rem;
  border-top: 2px dashed color-mix(in srgb, var(--on-primary, #f3ecdf) 28%, transparent);
}

.hearth-footer__copyright {
  font-size: 0.9375rem;
}

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

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

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

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

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

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

/* "404" stamped across the page like SOLD OUT on a shelf label: a rubber stamp with a double rule, slanted, its ink
   patchy. */
.hearth-not-found__number {
  margin: 0 0 1.75rem;
  padding: 0.05em 0.35em 0;
  border: 6px double currentColor;
  border-radius: 0.35rem;
  color: var(--accent-ink, #9c3721);
  font-family: var(--font-heading, serif);
  font-size: clamp(3.5rem, 2.5rem + 5vw, 6rem);
  font-weight: var(--hearth-heading-weight);
  line-height: 1.1;
  transform: rotate(-6deg);
  -webkit-mask: var(--hearth-ink) 0 0 / 160px 160px;
  mask: var(--hearth-ink) 0 0 / 160px 160px;
}

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

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

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

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

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

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

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

/* The shared bar (resilience.css) on the theme's paper, with its button. */
body .theme-action-bar {
  border-top: 3px solid transparent;
  border-image: var(--hearth-twine) 1;
  background-color: var(--background, #f4ede1);
}

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

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

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