/*
 * Workbench: the maker's workshop. Warm paper and plywood, a deep wood colour, brass, and the marks of the trade: a slab
 * face for headings, pencilled measures, a pegboard behind every other section, buttons stitched like a leather tab, and
 * the maker's round stamp on the opening picture and on the underside of the page, the footer.
 *
 * This file is the frame: header, phone menu, footer, announcement, breadcrumbs, the page not found, the three blocks the
 * theme draws itself (the split hero, the article body, the divider) and what only this stylesheet may draw (the wood
 * grain is a picture, and kit-theme.css may load none). Everything inside a kit block 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. 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. The wood colour (--primary) stays a wood colour in the dark palettes too, so the footer
 * and the wooden bands are wood on every page.
 *
 * Type comes from the layout: --font-heading, --font-body, --workbench-heading-weight and --workbench-body-strong (the
 * heaviest weights the font palette loads) and --workbench-scale (how wide the heading face is, base.php). 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) {
  --workbench-width: 74rem;
  --workbench-gutter: clamp(1rem, 4vw, 2rem);
  --workbench-bar: 4.5rem;
  --workbench-radius: 0.375rem;
  --workbench-button-radius: 0.25rem;
  --workbench-heading-weight: 400;
  --workbench-body-strong: 600;
  --workbench-scale: 1;
  --workbench-speed: 160ms;
  --workbench-line: var(--border, #d6c8b2);
  /* A pencil line: the text colour, faint. */
  --workbench-pencil: color-mix(in srgb, var(--text-primary, #2a2019) 32%, transparent);
  /* The grain of the wood colour: long dark fibres, drawn once and repeated. */
  --workbench-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='360'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0032 0.115' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.62 0 0 0 -0.23'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --workbench-grain-size: 720px 360px;
}

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

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

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

body {
  margin: 0;
  background: var(--background, #f3ece0);
  color: var(--text-primary, #2a2019);
  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, #7e5a1e);
  outline-offset: 3px;
}

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

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

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

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

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

/* One shape for every button the theme draws itself, a tab of wood or brass with a stitched line inside its edge, as on
   a leather strap. kit-theme.css gives the kit's buttons the same corner and stitch, 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. */
.workbench-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--workbench-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  font-weight: var(--workbench-body-strong);
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--workbench-speed) ease, border-color var(--workbench-speed) ease, transform var(--workbench-speed) ease;
}

/* The stitch: a dashed line a few pixels inside the edge, in the words' colour, faint. */
.workbench-button:is(.workbench-button--primary, .workbench-button--accent)::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed currentColor;
  border-radius: 2px;
  opacity: 0.42;
  pointer-events: none;
}

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

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

.workbench-button--primary {
  background: var(--primary, #3b2b1f);
  color: var(--on-primary, #f7efe2);
}

.workbench-button--primary:hover {
  background: var(--primary-alt, #50392a);
}

.workbench-button--accent {
  background: var(--accent, #c08f3e);
  color: var(--on-accent, #21170b);
}

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

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

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

.workbench-button--small {
  min-height: 2.625rem;
  padding: 0.5rem 1.05rem;
  font-size: 0.875rem;
}

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

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

.workbench-announcement {
  background: var(--primary, #3b2b1f);
  color: var(--on-primary, #f7efe2);
  font-size: 0.875rem;
}

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

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

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

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

.workbench-announcement a {
  font-weight: var(--workbench-body-strong);
  text-decoration-color: var(--accent, #c08f3e);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

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

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

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

/* A solid bar on the surface colour that stays at the top, standing on a batten: a heavy line of the wood colour along
   its foot. The bar has one height for every kind; the centred kind adds a row for the menu. */
.workbench-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--primary, #3b2b1f);
  background: var(--surface, #fbf7f0);
  color: var(--text-primary, #2a2019);
}

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

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

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

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

/* The centred kind's menu row, under a pencilled line. */
.workbench-header__rail {
  max-width: calc(var(--workbench-width) + 2 * var(--workbench-gutter));
  margin-inline: auto;
  padding: 0.3rem var(--workbench-gutter) 0.4rem;
  background-image: linear-gradient(to right, var(--workbench-pencil) 50%, transparent 50%);
  background-position: top center;
  background-repeat: repeat-x;
  background-size: 8px 1px;
}

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

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

.workbench-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: var(--workbench-body-strong);
  text-decoration: none;
  white-space: nowrap;
}

.workbench-header__phone-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--accent-ink, #7e5a1e);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workbench-header__phone:hover span {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.3em;
}

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

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

.workbench-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). The slab faces are wide, so the box is a little wider and the letters a
     little smaller than a plain sans would need. */
  max-width: min(30rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, serif);
  font-size: calc(1.3rem * var(--workbench-scale, 1));
  font-weight: var(--workbench-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. */
.workbench-header .workbench-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) {
  .workbench-header .workbench-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: calc(1.2rem * var(--workbench-scale, 1));
  }
}

.workbench-brand:has(.workbench-brand__logo, .brand-logo-original, .logo-mask) .workbench-brand__name {
  font-size: calc(1.125rem * var(--workbench-scale, 1));
}

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

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

/* The maker's mark: the name's first letter in a stamped double ring, set a little askew, in brass. */
.workbench-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  outline: 1px solid currentColor;
  outline-offset: -6px;
  color: var(--accent-ink, #7e5a1e);
  font-family: var(--font-heading, serif);
  font-size: calc(1.05rem * var(--workbench-scale, 1));
  font-weight: var(--workbench-heading-weight);
  line-height: 1;
  transform: rotate(-9deg);
}

.workbench-mark > span {
  display: block;
  padding-top: 0.05em;
}

@media (max-width: 39.99rem) {
  .workbench-header .workbench-mark {
    width: 2.125rem;
    height: 2.125rem;
    outline-offset: -5px;
    font-size: calc(0.9rem * var(--workbench-scale, 1));
  }
}

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

/* A slim strip of the wood colour over the bar. */
.workbench-topbar {
  background-color: var(--primary, #3b2b1f);
  background-image: var(--workbench-grain);
  background-size: var(--workbench-grain-size);
  color: var(--on-primary, #f7efe2);
  font-size: 0.8125rem;
}

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

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

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

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

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

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

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

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

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

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

.workbench-nav__item {
  position: relative;
}

.workbench-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: var(--workbench-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. */
.workbench-nav__item {
  min-width: 0;
}

/* Under the pointer a pencilled dash line; the page being shown gets a brass bar. */
.workbench-nav__item > a:hover > span,
.workbench-nav__item--parent:focus-within > a > span {
  text-decoration: underline;
  text-decoration-color: var(--workbench-pencil);
  text-decoration-style: dashed;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.45em;
}

.workbench-nav__item.is-current > a > span {
  text-decoration: underline;
  text-decoration-color: var(--accent, #c08f3e);
  text-decoration-style: solid;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

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

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

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

.workbench-nav__children a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--workbench-button-radius);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

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

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

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

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

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

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

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

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

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

/* A panel under the bar with every page, each hung on a peg. It scrolls inside itself when the pages are many, so the
   last one is always reachable. */
.workbench-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
     (--workbench-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). The 3 px are the batten under the bar. */
  max-height: calc(100dvh - var(--workbench-head, var(--workbench-bar)) - 3px);
  margin-top: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 3px solid var(--primary, #3b2b1f);
  background: var(--surface, #fbf7f0);
  color: var(--text-primary, #2a2019);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--text-primary, #2a2019) 45%, transparent);
}

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

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

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

.workbench-drawer__item {
  border-bottom: 1px dashed var(--workbench-pencil);
}

/* A page name in the heading face, after a peg hole. data-fit-text (includes/chrome.php) lets the shared script set a
   long single word smaller instead of breaking it. */
.workbench-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  font-family: var(--font-heading, serif);
  font-size: calc(1.4rem * var(--workbench-scale, 1));
  font-weight: var(--workbench-heading-weight);
  line-height: 1.3;
  text-decoration: none;
}

.workbench-drawer__link::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border: 2px solid var(--accent, #c08f3e);
  border-radius: 50%;
}

.workbench-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.85rem 1.45rem;
}

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

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

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

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

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

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

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

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

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

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

.workbench-breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--accent-ink, #7e5a1e);
}

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

.workbench-breadcrumbs a:hover {
  text-decoration: underline;
  text-decoration-style: dashed;
}

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

/* ------------------------------------------------------------------ The stamp */

/* The maker's round stamp (workbench_stamp): the name round the ring, the first letter in the middle, all in the colour
   the place gives it. The ring's letters are in the body face; the letter in the middle in the heading face. */
.workbench-stamp {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
}

.workbench-stamp svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.workbench-stamp__edge,
.workbench-stamp__inner,
.workbench-stamp__dashes {
  fill: none;
  stroke: currentColor;
}

.workbench-stamp__edge {
  stroke-width: 2.5;
}

.workbench-stamp__inner {
  stroke-width: 1.4;
}

.workbench-stamp__dashes {
  stroke-width: 1.4;
  stroke-dasharray: 2.6 4.2;
}

.workbench-stamp__ring {
  fill: currentColor;
  font-family: var(--font-body, sans-serif);
  font-weight: var(--workbench-body-strong);
}

.workbench-stamp__initial {
  fill: currentColor;
  font-family: var(--font-heading, serif);
  font-size: 30px;
  font-weight: var(--workbench-heading-weight);
}

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

/* The heading and its words on the paper at the left; at the right the picture as a print laid on a panel of wood that
   runs to the window's edge, a pencilled measure over it and the stamp pressed on its lower corner. The section clips
   what reaches past the window (the panel's end), so the page never scrolls sideways. */
.workbench-hero {
  --workbench-hero-pad: clamp(2.75rem, 6vw, 5.5rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--workbench-hero-pad) var(--workbench-gutter);
}

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

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

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

/* 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 (times the face's width, --workbench-scale). */
.workbench-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(2.3rem, 1.2rem + 3.9vw, 4.6rem) * var(--workbench-scale, 1));
  font-weight: var(--workbench-heading-weight);
  letter-spacing: -0.005em;
  line-height: 1.08;
  text-wrap: balance;
}

.workbench-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #5f5246);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
}

/* The selling points: a ruled list, a pencilled line under each, like the lines of a work order. */
.workbench-hero__points {
  display: grid;
  width: 100%;
  max-width: 34rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.workbench-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--workbench-pencil);
  line-height: 1.5;
}

.workbench-hero__points li:first-child {
  border-top: 1px dashed var(--workbench-pencil);
}

.workbench-hero__icon {
  margin-top: 0.15em;
  color: var(--accent-ink, #7e5a1e);
}

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

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

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

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

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

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

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

/* The picture's side. The panel of wood starts under the print's middle and runs to the window's right edge and down
   to the section's foot. */
.workbench-hero__media {
  position: relative;
  margin: 0;
  padding-top: 1.75rem;
}

.workbench-hero__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 22%;
  right: calc(-1 * max(var(--workbench-gutter), (100vw - var(--workbench-width)) / 2));
  bottom: calc(-1 * var(--workbench-hero-pad));
  left: 42%;
  background-color: var(--primary, #3b2b1f);
  background-image: var(--workbench-grain);
  background-size: var(--workbench-grain-size);
}

/* The print: the photograph with a pale border, laid a touch askew. */
.workbench-hero__print {
  display: block;
  padding: clamp(0.45rem, 0.9vw, 0.7rem);
  border-radius: 2px;
  background: var(--surface, #fbf7f0);
  box-shadow: 0 1px 0 var(--workbench-line), 0 26px 44px -24px rgba(0, 0, 0, 0.55);
  transform: rotate(-1deg);
}

.workbench-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 1px;
  object-fit: cover;
}

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

/* The pencilled measure across the top of the print: ticks at both ends, slashes through them, a fine line between. */
.workbench-hero__measure {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  left: 0.35rem;
  height: 0.75rem;
  background:
    linear-gradient(var(--workbench-pencil), var(--workbench-pencil)) left center / 1.5px 100% no-repeat,
    linear-gradient(var(--workbench-pencil), var(--workbench-pencil)) right center / 1.5px 100% no-repeat,
    linear-gradient(var(--workbench-pencil), var(--workbench-pencil)) center / 100% 1px no-repeat,
    linear-gradient(135deg, transparent calc(50% - 0.8px), var(--workbench-pencil) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) left center / 0.75rem 0.75rem no-repeat,
    linear-gradient(135deg, transparent calc(50% - 0.8px), var(--workbench-pencil) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) right center / 0.75rem 0.75rem no-repeat;
  transform: translateX(-0.375rem);
}

/* The stamp, pressed in brass on the print's lower left corner. */
.workbench-hero__stamp {
  position: absolute;
  bottom: -1.75rem;
  left: -1.5rem;
  width: clamp(5.5rem, 4rem + 4vw, 7.75rem);
  background: var(--accent, #c08f3e);
  color: var(--on-accent, #21170b);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6);
  transform: rotate(-12deg);
}

/* Where the print stands under the words, the wood is a bench across the whole window under its lower half. */
@media (max-width: 55.99rem) {
  .workbench-hero__media {
    margin-inline: 0.5rem;
  }

  .workbench-hero__media::before {
    top: 45%;
    left: calc(-0.5rem - var(--workbench-gutter));
    right: calc(-0.5rem - var(--workbench-gutter));
  }

  .workbench-hero__stamp {
    left: -0.75rem;
  }
}

/* Without a picture: the stamp and the words centred on the pegboard. */
.workbench-hero--words {
  background-color: var(--surface-alt, #e7dccb);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-primary, #2a2019) 12%, transparent) 0.16rem, transparent 0.19rem);
  background-position: 0.8rem 0.8rem;
  background-size: 1.6rem 1.6rem;
  text-align: center;
}

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

.workbench-hero__seal {
  width: clamp(5.5rem, 4.5rem + 3vw, 7rem);
  color: var(--accent-ink, #7e5a1e);
  transform: rotate(-10deg);
}

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

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

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

.workbench-article__header {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
}

/* The date and the author on a brass tag. */
.workbench-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: var(--workbench-button-radius);
  background: var(--accent, #c08f3e);
  color: var(--on-accent, #21170b);
  font-size: 0.8125rem;
  font-weight: var(--workbench-body-strong);
  letter-spacing: 0.04em;
}

.workbench-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(2rem, 1.4rem + 2.4vw, 3.25rem) * var(--workbench-scale, 1));
  font-weight: var(--workbench-heading-weight);
  line-height: 1.1;
  text-wrap: balance;
}

/* The pencilled measure under the title. */
.workbench-article__header::after,
.workbench-not-found__number::after {
  content: "";
  display: block;
  width: 6rem;
  height: 0.75rem;
  margin-top: 0.4rem;
  background:
    linear-gradient(var(--workbench-pencil), var(--workbench-pencil)) left center / 1.5px 100% no-repeat,
    linear-gradient(var(--workbench-pencil), var(--workbench-pencil)) right center / 1.5px 100% no-repeat,
    linear-gradient(var(--workbench-pencil), var(--workbench-pencil)) center / 100% 1px no-repeat;
}

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

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

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

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

.workbench-prose h2 {
  font-size: calc(1.75rem * var(--workbench-scale, 1));
}

.workbench-prose h3 {
  font-size: calc(1.375rem * var(--workbench-scale, 1));
}

.workbench-prose h4 {
  font-size: calc(1.15rem * var(--workbench-scale, 1));
}

.workbench-prose a {
  color: var(--accent-ink, #7e5a1e);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.workbench-prose blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid var(--accent, #c08f3e);
  color: var(--text-primary, #2a2019);
  font-size: 1.125rem;
}

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

.workbench-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #5f5246);
  font-size: 0.875rem;
}

.workbench-prose :where(ul) {
  padding-left: 1.25rem;
}

.workbench-prose li::marker {
  color: var(--accent-ink, #7e5a1e);
}

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

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

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

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

/* line: a pencilled measure across the column, ticks and slashes at its ends. */
.workbench-divider__line {
  width: 100%;
  height: 0.85rem;
  background:
    linear-gradient(var(--workbench-pencil), var(--workbench-pencil)) left center / 1.5px 100% no-repeat,
    linear-gradient(var(--workbench-pencil), var(--workbench-pencil)) right center / 1.5px 100% no-repeat,
    linear-gradient(var(--workbench-pencil), var(--workbench-pencil)) center / 100% 1px no-repeat,
    linear-gradient(135deg, transparent calc(50% - 0.8px), var(--workbench-pencil) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) left center / 0.85rem 0.85rem no-repeat,
    linear-gradient(135deg, transparent calc(50% - 0.8px), var(--workbench-pencil) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) right center / 0.85rem 0.85rem no-repeat;
}

/* dashed: the line a saw follows. */
.workbench-divider--dashed .workbench-divider__line {
  height: 2px;
  background: linear-gradient(to right, var(--workbench-pencil) 60%, transparent 60%) left center / 14px 2px repeat-x;
}

/* dotted: three peg holes. */
.workbench-divider--dotted span {
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--workbench-pencil);
  border-radius: 50%;
}

/* ------------------------------------------------------------------ Kit sections in the theme's look */

/* The wooden bands (a call to action on the inverse band): the wood colour with its grain. The kit sets the colour; the
   grain is a picture, so it is drawn here, not in kit-theme.css. */
.workbench-main .kit-section--inverse {
  background-image: var(--workbench-grain);
  background-size: var(--workbench-grain-size);
}

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

/* The underside of the piece: the wood colour with its grain, the page's text in the colour that reads on it in every
   palette and with a website's own colours. */
.workbench-footer {
  border-top: 4px solid var(--accent, #c08f3e);
  background-color: var(--primary, #3b2b1f);
  background-image: var(--workbench-grain);
  background-size: var(--workbench-grain-size);
  color: var(--on-primary, #f7efe2);
}

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

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

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

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

.workbench-footer .workbench-mark {
  color: inherit;
}

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

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

.workbench-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
  border-bottom: 1px dashed color-mix(in srgb, var(--on-primary, #f7efe2) 40%, transparent);
}

.workbench-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(--workbench-scale, 1));
  font-weight: var(--workbench-heading-weight);
  line-height: 1.15;
  text-wrap: balance;
}

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

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

.workbench-footer__tagline,
.workbench-footer__contact p:not(.workbench-footer__title),
.workbench-footer__copyright {
  margin: 0;
  font-size: 0.9375rem;
}

/* A column's title: small capitals spaced like a label stamped on a drawer. */
.workbench-footer__title {
  margin: 0 0 0.8rem;
  font-size: 0.75rem;
  font-weight: var(--workbench-body-strong);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

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

.workbench-footer__links a,
.workbench-footer__contact a,
.workbench-footer__legal a,
.workbench-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

.workbench-footer__links a:hover,
.workbench-footer__contact a:hover,
.workbench-footer__legal a:hover,
.workbench-footer__inline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent, #c08f3e);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.workbench-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid color-mix(in srgb, var(--on-primary, #f7efe2) 45%, transparent);
  border-radius: 50%;
  color: inherit;
}

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

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

/* The small print at the left, the maker's stamp pressed at the right. */
.workbench-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px dashed color-mix(in srgb, var(--on-primary, #f7efe2) 40%, transparent);
}

.workbench-footer__print {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.workbench-footer__stamp {
  flex: none;
  width: clamp(5rem, 4rem + 3vw, 6.5rem);
  color: var(--on-primary, #f7efe2);
  opacity: 0.88;
  transform: rotate(-10deg);
}

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

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

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

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

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

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

/* The number large in the slab face, measured with a pencil. */
.workbench-not-found__number {
  margin: 0;
  color: var(--accent-ink, #7e5a1e);
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(4.5rem, 3rem + 6vw, 8rem) * var(--workbench-scale, 1));
  font-weight: var(--workbench-heading-weight);
  line-height: 1;
}

.workbench-not-found__number::after {
  width: 100%;
  margin-top: 0.75rem;
}

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

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

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

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

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

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

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

/* The shared bar (resilience.css) on the theme's surface, standing on the batten. */
body .theme-action-bar {
  border-top: 3px solid var(--primary, #3b2b1f);
  background: var(--surface, #fbf7f0);
}

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

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

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