/*
 * Bespoke: fine tailoring. The page is cut from cloth: a cream shirting for the page, a lighter linen woven in herringbone
 * for the quieter bands, and the suiting itself (the primary colour with a fine pinstripe) for the header's top strip, the
 * label that carries an opening's words, the bands that ask for something and the footer. Lines of stitches in the camel
 * thread run just inside the edges of buttons, cards, labels and the header; the website's monogram sits in a stitched
 * roundel; small labels are woven tags; the plans of a price table hang as swing tags on an eyelet. Headings are a
 * confident classic serif; the menu, the buttons and every small label are spaced capitals.
 *
 * This file draws the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the blocks the
 * theme draws itself (the three openings, the article body, the divider) and the compositions that depend on a block's
 * kind (data-block, written by includes/stitch.php). Everything inside a kit block that does not depend on its kind is in
 * kit-theme.css.
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. The suiting's quieter words are
 * on-primary mixed a fifth of the way into primary. theme-colour-pairs.test.mjs reads every rule here that sets both a
 * background and a colour and fails for any other pair. A dark palette is just other values for the same tokens: nothing
 * here asks whether the page is dark. The stitches, the weave and the pinstripe are decoration, never text.
 *
 * Type comes from the layout: --font-heading, --font-body, --bespoke-heading-weight and --bespoke-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here. Every font palette
 * loads its heading face's own italic ("italic": true in theme.json); the few places that ask for it (the monogram, a
 * quotation, the page not found's number) also say font-synthesis: none, so a website's own font without an italic is
 * drawn upright, never slanted by the browser.
 */

/* ------------------------------------------------------------------ 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. */
:where(:root) {
  --bespoke-width: 74rem;
  --bespoke-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --bespoke-bar: 4.75rem;
  --bespoke-radius: 0px;
  --bespoke-button-radius: 0px;
  --bespoke-heading-weight: 700;
  --bespoke-body-strong: 600;
  --bespoke-speed: 180ms;
  --bespoke-line: var(--border, #d8ccb8);
  /* Spaced capitals: the menu, buttons, small labels. */
  --bespoke-caps: 0.14em;
  /* The thread on the page's cloth: the accent's readable shade, a little soft. */
  --bespoke-thread: color-mix(in srgb, var(--accent-ink, #82572b) 70%, transparent);
  /* The thread on the suiting: the accent drawn towards the suiting's own words, so it shows on any primary colour. */
  --bespoke-thread-on-cloth: color-mix(in srgb, var(--accent, #b8895a) 62%, var(--on-primary, #f7f1e6));
  /* A line of stitches, drawn as a background one pixel tall. */
  --bespoke-stitch: repeating-linear-gradient(90deg, var(--bespoke-thread) 0 6px, transparent 6px 10px);
  --bespoke-stitch-on-cloth: repeating-linear-gradient(90deg, var(--bespoke-thread-on-cloth) 0 6px, transparent 6px 10px);
  /* The suiting's pinstripe: its own words' colour, barely there, a stripe every eleven pixels. */
  --bespoke-pinstripe: repeating-linear-gradient(90deg, color-mix(in srgb, var(--on-primary, #f7f1e6) 8%, transparent) 0 1px, transparent 1px 11px);
  /* The weave of the lighter cloth (herringbone, woven labels): the text colour, barely there. */
  --bespoke-weave: color-mix(in srgb, var(--text-primary, #1d222c) 5.5%, transparent);
}

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

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

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

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

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

a {
  color: inherit;
}

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

::selection {
  background: color-mix(in srgb, var(--accent, #b8895a) 35%, transparent);
}

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

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

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

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

/* ------------------------------------------------------------------ The cloth */

/* Herringbone: columns of fine diagonal threads, every other column leaning the other way, on whatever the element's own
   fill is. Two layers under the content, each shown through every other column by a mask (no picture, no address). */
.bespoke-hero--words,
.bespoke-hero--cloth .bespoke-hero__stage {
  position: relative;
  isolation: isolate;
}

.bespoke-hero--words::before,
.bespoke-hero--words::after,
.bespoke-hero--cloth .bespoke-hero__stage::before,
.bespoke-hero--cloth .bespoke-hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(45deg, var(--bespoke-weave) 0 1px, transparent 1px 6px);
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 50%);
  mask-image: linear-gradient(90deg, #000 50%, transparent 50%);
  -webkit-mask-size: 24px 100%;
  mask-size: 24px 100%;
  pointer-events: none;
}

.bespoke-hero--words::after,
.bespoke-hero--cloth .bespoke-hero__stage::after {
  background-image: repeating-linear-gradient(-45deg, var(--bespoke-weave) 0 1px, transparent 1px 6px);
  -webkit-mask-position: 12px 0;
  mask-position: 12px 0;
}

/* ------------------------------------------------------------------ The monogram */

/* The website's initials in the heading face's italic, in a roundel of the suiting with a ring of stitches inside its
   edge, like a badge embroidered on a lining. Its size follows the font size of the element around it. */
.bespoke-monogram {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--primary, #1c2a45);
  color: var(--on-primary, #f7f1e6);
  font-family: var(--font-heading, serif);
  font-size: 1.0625rem;
  font-style: italic;
  font-synthesis: none;
  font-weight: var(--bespoke-heading-weight);
  letter-spacing: 0.01em;
  line-height: 1;
}

.bespoke-monogram::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed var(--bespoke-thread-on-cloth);
  border-radius: 50%;
}

.bespoke-monogram > span {
  position: relative;
  padding-inline: 0.05em 0.12em;
}

.bespoke-monogram[data-letters="3"] {
  font-size: 0.8125rem;
}

.bespoke-monogram[data-letters="4"] {
  font-size: 0.6875rem;
}

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

/* One shape for every button the theme draws itself: square, the label in small spaced capitals, and a line of stitches
   just inside the edge. kit-theme.css gives the kit's buttons the same look, and the line of this theme in
   resilience.css (--chrome-button-radius, --chrome-button-case) 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. */
.bespoke-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--bespoke-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.78125rem;
  font-weight: var(--bespoke-body-strong);
  letter-spacing: var(--bespoke-caps);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: break-word;
  transition: background-color var(--bespoke-speed) ease, border-color var(--bespoke-speed) ease, color var(--bespoke-speed) ease;
}

.bespoke-button::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed currentColor;
  opacity: 0.42;
  pointer-events: none;
  transition: opacity var(--bespoke-speed) ease;
}

.bespoke-button:hover::after {
  opacity: 0.85;
}

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

.bespoke-button--primary {
  background: var(--primary, #1c2a45);
  color: var(--on-primary, #f7f1e6);
}

.bespoke-button--primary:hover {
  background: var(--primary-alt, #283b5e);
}

.bespoke-button--accent {
  background: var(--accent, #b8895a);
  color: var(--on-accent, #17202f);
}

/* The hover is a deeper stitch and 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. */
.bespoke-button--accent:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent, #17202f) 55%, transparent);
}

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

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

/* On the suiting (the opening's label): a frame in the suiting's own words. */
.bespoke-button--light {
  border-color: color-mix(in srgb, var(--on-primary, #f7f1e6) 62%, transparent);
  background: transparent;
  color: var(--on-primary, #f7f1e6);
}

.bespoke-button--light:hover {
  border-color: var(--on-primary, #f7f1e6);
  background: color-mix(in srgb, var(--on-primary, #f7f1e6) 10%, transparent);
}

.bespoke-button--small {
  min-height: 2.625rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.71875rem;
}

.bespoke-button--small::after {
  inset: 3px;
}

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

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

/* A slim strip of the suiting. */
.bespoke-announcement {
  background-color: var(--primary, #1c2a45);
  background-image: var(--bespoke-pinstripe);
  color: var(--on-primary, #f7f1e6);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

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

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

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

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

.bespoke-announcement a {
  font-weight: var(--bespoke-body-strong);
  text-decoration-color: var(--bespoke-thread-on-cloth);
  text-underline-offset: 0.25em;
}

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

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

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

/* A bar of the page's cloth that stays at the top, with a line of stitches running along its lower edge. The bar has one
   height for every kind; the centred kind adds a row for the menu. */
.bespoke-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--background, #f4efe6);
  color: var(--text-primary, #1d222c);
}

.bespoke-header__bar {
  position: relative;
  border-bottom: 1px solid var(--bespoke-line);
  background: var(--background, #f4efe6);
}

.bespoke-header__bar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: var(--bespoke-stitch);
  pointer-events: none;
}

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

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

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

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

/* The menu's row under the centred name, between a fine rule and the stitches. */
.bespoke-header__rail {
  max-width: calc(var(--bespoke-width) + 2 * var(--bespoke-gutter));
  margin-inline: auto;
  padding: 0 var(--bespoke-gutter) 0.65rem;
}

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

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

.bespoke-header__phone {
  color: inherit;
  font-size: 0.875rem;
  font-weight: var(--bespoke-body-strong);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

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

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

/* The monogram and the website's name. The name's 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. */
.bespoke-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.bespoke-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines in the widest heading face (Libre Baskerville): a third
     line makes the bar taller than its controls (verify-theme-stress.mjs, header-rows). */
  max-width: min(30rem, 40vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, serif);
  font-size: 1.25rem;
  font-weight: var(--bespoke-heading-weight);
  letter-spacing: 0;
  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. */
.bespoke-header .bespoke-brand__name {
  display: block;
  overflow: visible;
}

.bespoke-header--centered .bespoke-brand__name {
  font-size: 1.4375rem;
}

/* Where the menu has gone into the menu button, the name may take the room the menu left. */
@media (max-width: 63.99rem) {
  .bespoke-header .bespoke-brand__name {
    max-width: min(34rem, calc(100vw - 10rem));
  }
}

@media (min-width: 64rem) {
  #site-header.theme-nav-compact .bespoke-brand__name {
    max-width: min(34rem, calc(100vw - 22rem));
  }
}

/* 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: the heading faces here have tall ascenders, so the room is all above (the padding) and
   only a sliver below (the clip margin). */
@media (max-width: 39.99rem) {
  .bespoke-header .bespoke-brand__name {
    max-width: 100%;
    padding-block: 0.14em 0;
    overflow: clip;
    overflow-clip-margin: 0.1em;
    font-size: 1.125rem;
  }

  .bespoke-header--centered .bespoke-brand__name {
    font-size: 1.125rem;
  }

  .bespoke-header .bespoke-monogram {
    width: 2.375rem;
    height: 2.375rem;
    font-size: 0.9375rem;
  }

  .bespoke-header .bespoke-monogram[data-letters="3"] {
    font-size: 0.75rem;
  }

  .bespoke-header .bespoke-monogram[data-letters="4"] {
    font-size: 0.625rem;
  }

  .bespoke-brand {
    gap: 0.6rem;
  }
}

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

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

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

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

/* A slim strip of the suiting above the bar. */
.bespoke-topbar {
  background-color: var(--primary, #1c2a45);
  background-image: var(--bespoke-pinstripe);
  color: var(--on-primary, #f7f1e6);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

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

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

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

.bespoke-topbar a:hover {
  text-decoration: underline;
  text-decoration-color: var(--bespoke-thread-on-cloth);
  text-underline-offset: 0.25em;
}

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

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

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

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

/* The menu in small spaced capitals. The page being shown, and the one under the pointer, get a short line of stitches
   under their name. */
.bespoke-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.25rem;
  min-width: 0;
}

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

.bespoke-nav__item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.7rem;
  color: inherit;
  font-size: 0.75rem;
  font-weight: var(--bespoke-body-strong);
  letter-spacing: var(--bespoke-caps);
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
}

.bespoke-nav__item > a::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  bottom: 0.3rem;
  left: 0.7rem;
  height: 1px;
  background: var(--bespoke-stitch);
  opacity: 0;
  transition: opacity var(--bespoke-speed) ease;
}

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

.bespoke-nav__item.is-current > a {
  color: var(--accent-ink, #82572b);
}

.bespoke-nav__caret {
  width: 0.55rem;
  height: 0.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.bespoke-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem;
  border: 1px solid var(--bespoke-line);
  background: var(--surface, #fbf8f2);
  color: var(--text-primary, #1d222c);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--text-primary, #1d222c) 45%, transparent);
  visibility: hidden;
  opacity: 0;
}

.bespoke-nav__children::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--bespoke-thread);
  pointer-events: none;
}

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

.bespoke-nav__children a {
  position: relative;
  padding: 0.55rem 0.8rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

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

/* The menu button: two lines, like a folded tape measure, that close 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). */
.bespoke-menu-button {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text-primary, #1d222c) 55%, transparent);
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.bespoke-menu-button::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed var(--bespoke-thread);
  pointer-events: none;
}

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

.bespoke-menu-button__lines {
  display: grid;
  gap: 0.36rem;
  width: 1.125rem;
}

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

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

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

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

/* A panel of the page's cloth under the bar, every page in the heading face on a line of stitches. It scrolls inside
   itself when the pages are many, so the last one is always reachable. */
.bespoke-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  /* Under the whole header, whatever its height (a top line, a name on two lines): theme.js measures it
     (--bespoke-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(--bespoke-head, var(--bespoke-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--bespoke-line);
  background: var(--background, #f4efe6);
  color: var(--text-primary, #1d222c);
  box-shadow: 0 28px 44px -28px color-mix(in srgb, var(--text-primary, #1d222c) 45%, transparent);
}

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

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

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

.bespoke-drawer__item {
  position: relative;
  padding-bottom: 1px;
}

.bespoke-drawer__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--bespoke-stitch);
}

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

.bespoke-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.9rem 0.85rem;
}

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

.bespoke-drawer__footer {
  display: grid;
  gap: 0.65rem;
}

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

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

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

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

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

@media (max-width: 39.99rem) {
  :where(:root) {
    --bespoke-bar: 4.25rem;
  }
}

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

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

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

.bespoke-breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 1px;
  margin-right: 0.6rem;
  vertical-align: 0.3em;
  background: var(--bespoke-stitch);
}

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

.bespoke-breadcrumbs a:hover {
  color: var(--text-primary, #1d222c);
}

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

/* ------------------------------------------------------------------ The split opening */

.bespoke-hero--split {
  padding: clamp(2.75rem, 1.5rem + 5vw, 6rem) var(--bespoke-gutter);
}

.bespoke-hero--words {
  background: var(--surface-alt, #ebe3d4);
  text-align: center;
}

.bespoke-hero__inner {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  max-width: var(--bespoke-width);
  margin-inline: auto;
}

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

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

.bespoke-hero--words .bespoke-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 a word of fourteen letters fits at 320 px without it. A short seam of stitches under it. */
.bespoke-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  font-weight: var(--bespoke-heading-weight);
  letter-spacing: -0.005em;
  line-height: 1.12;
  text-wrap: balance;
}

.bespoke-hero__title::after {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  margin-top: clamp(1rem, 0.8rem + 0.6vw, 1.4rem);
  background: var(--bespoke-stitch);
}

.bespoke-hero--words .bespoke-hero__title::after {
  margin-inline: auto;
}

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

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

.bespoke-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.bespoke-hero__icon {
  margin-top: 0.2em;
  color: var(--accent-ink, #82572b);
}

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

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

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

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

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

.bespoke-stars svg.is-full {
  fill: var(--accent-ink, #82572b);
}

.bespoke-hero__trustpilot {
  color: var(--accent-ink, #82572b);
  font-weight: var(--bespoke-body-strong);
}

/* The picture, mounted like a swatch: square, with a line of stitches round it a little way out. */
.bespoke-hero--split .bespoke-hero__media {
  position: relative;
  margin: clamp(0.7rem, 1.5vw, 1rem);
}

.bespoke-hero--split .bespoke-hero__media::after {
  content: "";
  position: absolute;
  inset: calc(-1 * clamp(0.7rem, 1.5vw, 1rem));
  border: 1px dashed var(--bespoke-thread);
  pointer-events: none;
}

.bespoke-hero--split .bespoke-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 55.99rem) {
  .bespoke-hero--split .bespoke-hero__image {
    aspect-ratio: 4 / 3;
  }
}

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

/* The photograph across the window and the words on a label of the suiting sewn onto it (includes/hero.php). */
.bespoke-hero--full {
  position: relative;
}

.bespoke-hero__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(30rem, calc(100svh - var(--bespoke-head, var(--bespoke-bar))), 58rem);
  background: var(--primary, #1c2a45);
}

.bespoke-hero--full .bespoke-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  overflow: hidden;
  background: var(--primary, #1c2a45);
}

.bespoke-hero--full .bespoke-hero__image,
.bespoke-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A light shade from the foot, so the picture sits back a little behind the label. --pgs-tint is the block's own word on
   the shade (lighter, darker); the words never stand on the picture itself. */
.bespoke-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(10deg,
    rgb(8 10 16 / min(0.85, calc(0.42 * var(--pgs-tint, 1)))) 0%,
    rgb(8 10 16 / min(0.6, calc(0.12 * var(--pgs-tint, 1)))) 45%,
    rgb(8 10 16 / 0) 75%);
}

.bespoke-hero--full .bespoke-hero__inner {
  display: block;
  align-self: end;
  width: 100%;
  max-width: calc(var(--bespoke-width) + 2 * var(--bespoke-gutter));
  margin-inline: auto;
  padding: clamp(5rem, 14vh, 9rem) var(--bespoke-gutter) clamp(2rem, 1rem + 3vw, 4rem);
}

/* The label: the suiting with its pinstripe, a line of stitches just inside its edge, a little lifted off the picture. */
.bespoke-hero__label {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 1.15rem;
  width: min(38rem, 100%);
  padding: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
  background-color: var(--primary, #1c2a45);
  background-image: var(--bespoke-pinstripe);
  color: var(--on-primary, #f7f1e6);
  box-shadow: 0 34px 60px -34px rgb(0 0 0 / 0.55);
}

.bespoke-hero__label::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed var(--bespoke-thread-on-cloth);
  pointer-events: none;
}

.bespoke-hero--full .bespoke-hero__title {
  position: relative;
  color: var(--on-primary, #f7f1e6);
  font-size: clamp(2rem, 1.35rem + 2.5vw, 3.5rem);
  line-height: 1.12;
}

.bespoke-hero--full .bespoke-hero__title::after {
  width: 3.5rem;
  background: var(--bespoke-stitch-on-cloth);
}

.bespoke-hero--full .bespoke-hero__lead {
  position: relative;
  color: color-mix(in srgb, var(--on-primary, #f7f1e6) 84%, var(--primary, #1c2a45));
}

.bespoke-hero--full .bespoke-hero__actions {
  position: relative;
  margin-top: 0.35rem;
}

/* Without a picture: the label stands on a band of herringbone, in the middle. */
.bespoke-hero--cloth .bespoke-hero__stage {
  min-height: 0;
  background: var(--surface-alt, #ebe3d4);
}

.bespoke-hero--cloth .bespoke-hero__inner {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.bespoke-hero--cloth .bespoke-hero__label {
  margin-inline: auto;
}

/* Under the breadcrumb (every page but the home page) the first screen is shorter by the header and the breadcrumb, so
   the opening takes what is left of it: its buttons end on the first screen, not under it. The script says where the
   opening really starts (--bespoke-opening-top); until then, the header, one breadcrumb line and the space around it. */
.bespoke-main > nav[aria-label]:first-child + .bespoke-hero--full {
  --bespoke-above: var(--bespoke-opening-top, calc(var(--bespoke-head, var(--bespoke-bar)) + 3.5rem));
  margin-top: 1.25rem;
}

@media (min-width: 48rem) {
  .bespoke-main > nav[aria-label]:first-child + .bespoke-hero--full:not(.bespoke-hero--cloth) .bespoke-hero__stage {
    min-height: clamp(24rem, calc(100svh - var(--bespoke-above)), 58rem);
  }
}

/* On a phone the photograph comes first, and the label below it, sewn over its lower edge. */
@media (max-width: 47.99rem) {
  .bespoke-hero__stage {
    display: block;
    min-height: 0;
    background: transparent;
  }

  .bespoke-hero--full:not(.bespoke-hero--cloth) .bespoke-hero__media {
    position: relative;
    height: clamp(15rem, 46svh, 26rem);
  }

  .bespoke-main > nav[aria-label]:first-child + .bespoke-hero--full .bespoke-hero__media {
    height: clamp(9rem, calc(100svh - var(--bespoke-above) - 25rem), 22rem);
  }

  .bespoke-hero--full:not(.bespoke-hero--cloth) .bespoke-hero__inner {
    margin-top: -3rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  .bespoke-hero__label {
    width: 100%;
    padding: 1.5rem 1.4rem 1.6rem;
  }

  .bespoke-hero--full .bespoke-hero__title {
    font-size: clamp(1.95rem, 1.4rem + 2.6vw, 2.5rem);
  }

  .bespoke-hero--full .bespoke-hero__actions > .bespoke-button {
    flex: 1 1 auto;
  }
}

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

.bespoke-article {
  padding: clamp(2.75rem, 6vw, 5rem) var(--bespoke-gutter);
}

.bespoke-article__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.bespoke-article__header {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
}

/* The date and the author on a woven label. */
.bespoke-article__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0.35rem 0.85rem 0.3rem;
  outline: 1px dashed var(--bespoke-thread);
  outline-offset: -3px;
  background-color: var(--surface-alt, #ebe3d4);
  background-image: repeating-linear-gradient(0deg, var(--bespoke-weave) 0 1px, transparent 1px 3px);
  color: var(--text-secondary, #585653);
  font-size: 0.6875rem;
  font-weight: var(--bespoke-body-strong);
  letter-spacing: var(--bespoke-caps);
  text-transform: uppercase;
}

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

.bespoke-article__header h1::after {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  margin: 1.1rem auto 0;
  background: var(--bespoke-stitch);
}

.bespoke-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
}

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

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

/* A blog post opens with a large initial in the heading face. Its own line height leaves the caron of Š and the dot of Ė
   room above it. */
.bespoke-article--post .bespoke-prose > p:first-child::first-letter {
  float: left;
  margin: 0.1em 0.12em 0 0;
  color: var(--accent-ink, #82572b);
  font-family: var(--font-heading, serif);
  font-size: 3.25em;
  font-weight: var(--bespoke-heading-weight);
  line-height: 0.85;
}

/* A heading after a short first paragraph starts under the large initial, never beside it. */
.bespoke-prose > :is(h2, h3, h4, figure, blockquote, table, pre, hr) {
  clear: both;
}

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

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

.bespoke-prose h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}

.bespoke-prose h3 {
  font-size: 1.3125rem;
}

.bespoke-prose h4 {
  font-size: 1.125rem;
}

.bespoke-prose a {
  color: var(--accent-ink, #82572b);
  text-underline-offset: 0.2em;
}

.bespoke-prose ul {
  padding-left: 1.25rem;
}

.bespoke-prose ul > li::marker {
  color: var(--accent-ink, #82572b);
}

/* A quotation in the heading face's italic, between two seams. */
.bespoke-prose blockquote {
  margin-inline: 0;
  padding: 1.1rem 0;
  background-image: var(--bespoke-stitch), var(--bespoke-stitch);
  background-position: 0 0, 0 100%;
  background-repeat: repeat-x;
  background-size: 100% 1px;
  color: var(--text-primary, #1d222c);
  font-family: var(--font-heading, serif);
  font-size: 1.25rem;
  font-style: italic;
  font-synthesis: none;
  line-height: 1.5;
}

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

.bespoke-prose img {
  display: block;
}

.bespoke-prose figcaption {
  margin-top: 0.6rem;
  color: var(--text-secondary, #585653);
  font-size: 0.875rem;
}

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

.bespoke-prose th {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.bespoke-prose pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--surface-alt, #ebe3d4);
}

.bespoke-prose hr {
  height: 1px;
  margin: 2.5rem 0;
  border: 0;
  background: var(--bespoke-stitch);
}

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

/* A fine line or a line of stitches with a four-holed button sewn on at its middle; three dots; or space. */
.bespoke-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: calc(var(--bespoke-width) + 2 * var(--bespoke-gutter));
  margin-inline: auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--bespoke-gutter);
}

.bespoke-divider__line {
  flex: 1 1 0;
  height: 1px;
  background: var(--bespoke-line);
}

.bespoke-divider--dashed .bespoke-divider__line {
  background: var(--bespoke-stitch);
}

/* The button: a disc of the thread's colour with four holes of the page's colour. */
.bespoke-divider__button {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 34%, var(--background, #f4efe6) 0 0.09rem, transparent 0.1rem),
    radial-gradient(circle at 66% 34%, var(--background, #f4efe6) 0 0.09rem, transparent 0.1rem),
    radial-gradient(circle at 34% 66%, var(--background, #f4efe6) 0 0.09rem, transparent 0.1rem),
    radial-gradient(circle at 66% 66%, var(--background, #f4efe6) 0 0.09rem, transparent 0.1rem),
    var(--accent-ink, #82572b);
  box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--background, #f4efe6) 30%, transparent);
}

.bespoke-divider--dotted {
  gap: 0.75rem;
}

.bespoke-divider--dotted span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent-ink, #82572b);
}

/* ------------------------------------------------------------------ Compositions by kind (data-block) */

/* Pictures beside words (text_with_image, about_section, the picture of a split section) are mounted like the opening's:
   a line of stitches round them a little way out. */
.bespoke-main [data-block] .kit-split > .kit-picture {
  outline: 1px dashed var(--kit-accent-text, var(--accent-ink, #82572b));
  outline-offset: clamp(0.55rem, 1.2vw, 0.85rem);
}

.bespoke-main [data-block] .kit-split > .kit-picture img {
  border-radius: 0;
}

/* The plans of a price table hang as swing tags: a card of paper with a brass eyelet near its head and the string rising
   from it. The eyelet is drawn into the card's own fill, so its hole shows the band behind. The recommended plan is cut
   from the suiting, and every colour inside it turns to the suiting's own (the same pairs as a dark band). */
.bespoke-main [data-block="pricing_table"] .kit-grid {
  padding-top: 1.5rem;
}

.bespoke-main [data-block="pricing_table"] .kit-grid > .kit-card {
  --bespoke-tag: var(--kit-surface);
  overflow: visible;
  border-color: var(--kit-line);
  background:
    radial-gradient(circle at 50% 1.35rem, transparent 0 0.4rem, var(--accent, #b8895a) 0.42rem 0.6rem, transparent 0.62rem),
    radial-gradient(circle at 50% 1.35rem, transparent 0 0.4rem, var(--bespoke-tag) 0.42rem);
  box-shadow: 0 22px 40px -30px color-mix(in srgb, var(--kit-text) 55%, transparent);
}

/* The string, in the page's text colour: it hangs over the band, not over the tag. */
.bespoke-main [data-block="pricing_table"] .kit-grid > .kit-card::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 50%;
  width: 1px;
  height: 2.45rem;
  background: color-mix(in srgb, var(--text-primary, #1d222c) 42%, transparent);
  pointer-events: none;
}

/* A tag's name, mark and price stand on its middle line, under the eyelet; its list keeps to the left. */
.bespoke-main [data-block="pricing_table"] .kit-card__content {
  align-items: center;
  text-align: center;
}

.bespoke-main [data-block="pricing_table"] .kit-card__body {
  align-self: stretch;
}

.bespoke-main [data-block="pricing_table"] .kit-card__body > .kit-icon {
  display: block;
  margin-inline: auto;
}

.bespoke-main [data-block="pricing_table"] .kit-stat {
  justify-items: center;
}

.bespoke-main [data-block="pricing_table"] .kit-list {
  text-align: start;
}

.bespoke-main [data-block="pricing_table"] .kit-card__body > .kit-button {
  width: 100%;
}

.bespoke-main [data-block="pricing_table"] .kit-grid > .kit-card > .kit-card__content {
  padding-top: calc(var(--kit-card-pad) + 1.75rem);
}

.bespoke-main [data-block="pricing_table"] .kit-grid > .kit-card--surface {
  --bespoke-tag: var(--primary, #1c2a45);
  --kit-text: var(--on-primary, #f7f1e6);
  --kit-muted: color-mix(in srgb, var(--on-primary, #f7f1e6) 82%, var(--primary, #1c2a45));
  --kit-surface: color-mix(in srgb, var(--on-primary, #f7f1e6) 9%, var(--primary, #1c2a45));
  --kit-surface-alt: color-mix(in srgb, var(--on-primary, #f7f1e6) 14%, var(--primary, #1c2a45));
  --kit-primary: var(--on-primary, #f7f1e6);
  --kit-primary-hover: color-mix(in srgb, var(--on-primary, #f7f1e6) 88%, var(--primary, #1c2a45));
  --kit-on-primary: var(--primary, #1c2a45);
  --kit-accent-text: var(--on-primary, #f7f1e6);
  --kit-line: color-mix(in srgb, var(--on-primary, #f7f1e6) 24%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--on-primary, #f7f1e6) 50%, transparent);
  --kit-focus: var(--on-primary, #f7f1e6);
  border-color: transparent;
  color: var(--on-primary, #f7f1e6);
}

/* The suiting's pinstripe under the recommended plan. */
.bespoke-main [data-block="pricing_table"] .kit-grid > .kit-card--surface > .kit-card__content {
  background-image: var(--bespoke-pinstripe);
}

.bespoke-main [data-block="pricing_table"] .kit-grid > .kit-card--surface .kit-icon {
  color: var(--on-primary, #f7f1e6);
}

/* A quotation inside a project's card is the size of the card's own words. */
.bespoke-main [data-block="portfolio_showcase"] .kit-quote__text {
  font-size: 1.0625rem;
}

.bespoke-main [data-block="portfolio_showcase"] .kit-quote::before {
  height: 1.4rem;
  font-size: 2.75rem;
}

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

/* The footer is cut from the suiting: the primary colour with a fine pinstripe, under a seam of stitches. Its quieter
   words are its own words mixed a fifth of the way into the cloth: the same pair in every palette and with a website's
   own colours. */
.bespoke-footer {
  position: relative;
  background-color: var(--primary, #1c2a45);
  background-image: var(--bespoke-pinstripe);
  color: var(--on-primary, #f7f1e6);
  --bespoke-footer-soft: color-mix(in srgb, var(--on-primary, #f7f1e6) 80%, var(--primary, #1c2a45));
  --bespoke-footer-line: color-mix(in srgb, var(--on-primary, #f7f1e6) 20%, transparent);
}

.bespoke-footer::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--bespoke-stitch-on-cloth);
  pointer-events: none;
}

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

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

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

.bespoke-footer .bespoke-brand__name {
  max-width: 100%;
  font-size: 1.375rem;
}

/* In the footer the monogram is the suiting's own: a frame of its words with the camel stitches inside. */
.bespoke-footer .bespoke-monogram {
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid color-mix(in srgb, var(--on-primary, #f7f1e6) 55%, transparent);
  background: transparent;
  color: var(--on-primary, #f7f1e6);
  font-size: 1.25rem;
}

.bespoke-footer .bespoke-monogram[data-letters="3"] {
  font-size: 1rem;
}

.bespoke-footer .bespoke-monogram[data-letters="4"] {
  font-size: 0.8125rem;
}

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

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

.bespoke-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  background-image: var(--bespoke-stitch-on-cloth);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 100% 1px;
}

.bespoke-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.625rem);
  font-weight: var(--bespoke-heading-weight);
  line-height: 1.18;
  text-wrap: balance;
}

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

@media (min-width: 64rem) {
  .bespoke-footer__grid {
    grid-template-columns: minmax(16rem, 1.5fr) repeat(auto-fit, minmax(11rem, 1fr));
  }
}

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

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

.bespoke-footer__tagline {
  max-width: 24rem;
  font-family: var(--font-heading, serif);
  font-size: 1rem;
  font-style: italic;
  font-synthesis: none;
}

/* A column's title in small spaced capitals, over a short seam. */
.bespoke-footer__title {
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  background-image: var(--bespoke-stitch-on-cloth);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 2.5rem 1px;
  font-size: 0.6875rem;
  font-weight: var(--bespoke-body-strong);
  letter-spacing: var(--bespoke-caps);
  line-height: 1.5;
  text-transform: uppercase;
}

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

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

.bespoke-footer__links a:hover,
.bespoke-footer__contact a:hover,
.bespoke-footer__legal a:hover,
.bespoke-footer__inline a:hover {
  color: var(--on-primary, #f7f1e6);
  text-decoration: underline;
  text-decoration-color: var(--bespoke-thread-on-cloth);
  text-underline-offset: 0.25em;
}

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

.bespoke-footer__social a:hover {
  border-color: var(--bespoke-thread-on-cloth);
}

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

.bespoke-footer__bottom {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--bespoke-footer-line);
}

.bespoke-footer__copyright {
  font-size: 0.8125rem;
}

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

.bespoke-footer__legal a {
  font-size: 0.8125rem;
}

.bespoke-footer--minimal .bespoke-footer__legal {
  margin-top: 0.85rem;
}

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

/* The number on a swing tag, hanging from its string. */
.bespoke-not-found {
  padding: clamp(4rem, 9vw, 7.5rem) var(--bespoke-gutter);
  text-align: center;
}

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

.bespoke-not-found__number {
  position: relative;
  display: grid;
  place-items: center;
  width: 7.5rem;
  min-height: 9.5rem;
  margin: 2.5rem 0 1rem;
  padding: 2.4rem 0.75rem 1.25rem;
  border: 1px solid var(--bespoke-line);
  background:
    radial-gradient(circle at 50% 1.35rem, transparent 0 0.4rem, var(--accent, #b8895a) 0.42rem 0.6rem, transparent 0.62rem),
    radial-gradient(circle at 50% 1.35rem, transparent 0 0.4rem, var(--surface, #fbf8f2) 0.42rem);
  color: var(--accent-ink, #82572b);
  font-family: var(--font-heading, serif);
  font-size: 2.5rem;
  font-style: italic;
  font-synthesis: none;
  font-weight: var(--bespoke-heading-weight);
  line-height: 1.1;
  transform: rotate(-4deg);
}

.bespoke-not-found__number::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  left: 50%;
  width: 1px;
  height: 3.45rem;
  background: color-mix(in srgb, var(--text-primary, #1d222c) 45%, transparent);
}

.bespoke-not-found__number::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--bespoke-thread);
  pointer-events: none;
}

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

.bespoke-not-found p {
  margin: 0;
  color: var(--text-secondary, #585653);
}

.bespoke-not-found__inner > .bespoke-button {
  margin-top: 0.5rem;
}

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

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

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

.bespoke-form-success p {
  margin: 0;
  color: var(--text-secondary, #585653);
}

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

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

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

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

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