/*
 * Marquee: retro signage. The frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the
 * theme's own blocks (the split hero, the full-width hero and the video hero, the article body, the divider) and the way
 * whole kit sections are laid on the page (bands, the lit sign of a call to action). The look of the kit's parts inside a
 * section is in kit-theme.css.
 *
 * The idea: a 1970s diner sign and a sign-painter's shop window. Three sign colours run as stripes (--marquee-s1, -s2,
 * -s3: the palette's primary-alt, accent and primary), display letters carry a painted shade in the accent colour,
 * pictures stand inside rings of the three stripes, the opening is a cream sign board ringed with light bulbs, and
 * buttons are enamel pills with a painted keyline.
 *
 * 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. The stripes, the shade and the bulbs are decoration and carry no text. A dark
 * palette is just other values for the same tokens: nothing here asks whether the page is dark.
 *
 * Type comes from the layout: --font-heading, --font-body, --marquee-heading-weight and --marquee-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here.
 */

/* ------------------------------------------------------------------ Tokens */

/* :where(:root) has no weight: the layout's inline values, the palette and a website's own colours always win over these
   defaults, wherever this file is linked. A plain :root rule here would override them (Loom drew every website in its
   fallback colours that way until 4.x). */
:where(:root) {
  --marquee-width: 74rem;
  --marquee-gutter: clamp(1rem, 4vw, 2.25rem);
  --marquee-bar: 4.75rem;
  /* The whole header's height: the bar and its stripes until theme.js has measured the header itself. */
  --marquee-head: calc(var(--marquee-bar) + 0.6rem);
  --marquee-radius: 1.25rem;
  --marquee-button-radius: 999px;
  --marquee-heading-weight: 800;
  --marquee-body-strong: 600;
  --marquee-speed: 180ms;
  --marquee-line: var(--border, #e2c99e);
  /* The three sign colours, in the order the stripes run. */
  --marquee-s1: var(--primary-alt, #b33a22);
  --marquee-s2: var(--accent, #f0a81c);
  --marquee-s3: var(--primary, #0e5b57);
  /* The painted shade behind display letters. */
  --marquee-shade: var(--accent, #f0a81c);
  /* One stripe's thickness; three make the trim under the header and over the footer. */
  --marquee-stripe: 0.3rem;
  /* Every heading face at about one width of letter (the table is under "Faces"). */
  --marquee-scale: 1;
  /* The bottle-cap seal a number or an icon stands in, and the starburst of a badge. */
  --marquee-seal: polygon(50% 0%,54.2% 1.4%,58% 4.5%,61.6% 6.5%,65.8% 6.5%,70.6% 5.8%,75% 6.7%,78% 10.1%,79.7% 14.6%,81.8% 18.2%,85.4% 20.3%,89.9% 22%,93.3% 25%,94.2% 29.4%,93.5% 34.2%,93.5% 38.4%,95.5% 42%,98.6% 45.8%,100% 50%,98.6% 54.2%,95.5% 58%,93.5% 61.6%,93.5% 65.8%,94.2% 70.6%,93.3% 75%,89.9% 78%,85.4% 79.7%,81.8% 81.8%,79.7% 85.4%,78% 89.9%,75% 93.3%,70.6% 94.2%,65.8% 93.5%,61.6% 93.5%,58% 95.5%,54.2% 98.6%,50% 100%,45.8% 98.6%,42% 95.5%,38.4% 93.5%,34.2% 93.5%,29.4% 94.2%,25% 93.3%,22% 89.9%,20.3% 85.4%,18.2% 81.8%,14.6% 79.7%,10.1% 78%,6.7% 75%,5.8% 70.6%,6.5% 65.8%,6.5% 61.6%,4.5% 58%,1.4% 54.2%,0% 50%,1.4% 45.8%,4.5% 42%,6.5% 38.4%,6.5% 34.2%,5.8% 29.4%,6.7% 25%,10.1% 22%,14.6% 20.3%,18.2% 18.2%,20.3% 14.6%,22% 10.1%,25% 6.7%,29.4% 5.8%,34.2% 6.5%,38.4% 6.5%,42% 4.5%,45.8% 1.4%);
}

/* ------------------------------------------------------------------ Faces */

/* The heading faces differ widely in width: Unbounded is broad, Big Shoulders is a tall condensed sign letter. Each is
   set at the size where its letters are about as wide as Rubik's, so a heading takes the same room in every font
   palette and the sizes below hold ordinary words at 320 px in all of them. A face a website brings of its own keeps 1.
   The layout writes the face's name on <body> (marquee-face--<name>). */
.marquee-face--unbounded { --marquee-scale: 0.82; }
.marquee-face--big-shoulders { --marquee-scale: 1.18; }
.marquee-face--alegreya { --marquee-scale: 1.12; }
.marquee-face--sofia-sans { --marquee-scale: 1.1; }
.marquee-face--literata { --marquee-scale: 0.96; }
.marquee-face--bricolage-grotesque { --marquee-scale: 1.02; }

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

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

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

body {
  margin: 0;
  background: var(--background, #f7ecd7);
  color: var(--text-primary, #2a1a10);
  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: 3px solid var(--accent-ink, #8a4705);
  outline-offset: 3px;
}

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

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

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

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

/* The painted shade: a sign-writer's drop shade behind display letters, in the accent colour. Decoration only: the
   letters themselves are a colour the contract keeps readable on their fill. */
.marquee-shaded {
  text-shadow: 0.055em 0.055em 0 var(--marquee-shade);
}

/* Three stripes in the sign colours. */
.marquee-stripes {
  display: block;
  height: calc(3 * var(--marquee-stripe));
  background: linear-gradient(var(--marquee-s1) 0 33.4%, var(--marquee-s2) 33.4% 66.7%, var(--marquee-s3) 66.7%);
}

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

/* An enamel pill with a painted keyline just inside its edge. kit-theme.css gives the kit's buttons the same shape, and
   the line of this theme in resilience.css (--chrome-button-radius) gives it to the cookie notice and the phone action
   bar: theme-chrome.test.mjs holds the three together. A label may take two lines; it never runs out of the button. On
   hover the button lifts off the page and its shade shows under it. */
.marquee-button {
  --marquee-keyline: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--marquee-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.9875rem;
  font-weight: var(--marquee-body-strong);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: transform var(--marquee-speed) ease, box-shadow var(--marquee-speed) ease, background-color var(--marquee-speed) ease;
}

/* The label is a span that may shrink: a flex item's text otherwise keeps its longest word's width and runs out of the
   button and off a phone's screen. "anywhere" breaks only a word wider than the whole button, as the kit's buttons do. */
.marquee-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.marquee-button--primary {
  background: var(--primary, #0e5b57);
  color: var(--on-primary, #fff8ea);
  box-shadow: inset 0 0 0 3px var(--primary, #0e5b57), inset 0 0 0 4.5px color-mix(in srgb, var(--on-primary, #fff8ea) 55%, transparent);
}

.marquee-button--accent {
  background: var(--accent, #f0a81c);
  color: var(--on-accent, #2a1606);
  box-shadow: inset 0 0 0 3px var(--accent, #f0a81c), inset 0 0 0 4.5px color-mix(in srgb, var(--on-accent, #2a1606) 45%, transparent);
}

.marquee-button--primary:hover,
.marquee-button--accent:hover {
  transform: translateY(-2px);
}

.marquee-button--primary:hover {
  box-shadow: inset 0 0 0 3px var(--primary, #0e5b57), inset 0 0 0 4.5px var(--on-primary, #fff8ea), 0 4px 0 var(--marquee-s2);
}

.marquee-button--accent:hover {
  box-shadow: inset 0 0 0 3px var(--accent, #f0a81c), inset 0 0 0 4.5px var(--on-accent, #2a1606), 0 4px 0 var(--marquee-s1);
}

.marquee-button--secondary {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.marquee-button--secondary:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.marquee-button--small {
  min-height: 2.6rem;
  padding: 0.45rem 1.15rem;
  font-size: 0.9rem;
}

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

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

.marquee-announcement {
  background: var(--primary-alt, #b33a22);
  color: var(--on-primary, #fff8ea);
  font-size: 0.875rem;
}

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

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

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

/* A small star either side of the message, as a sign-writer frames a notice. */
.marquee-announcement p::before {
  content: "\2605";
  flex: none;
  color: var(--marquee-s2);
  font-size: 0.8em;
}

.marquee-announcement:has(.marquee-announcement__icon) p::before {
  content: none;
}

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

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

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

.marquee-announcement .announcement-dismiss:hover {
  background: color-mix(in srgb, currentColor 16%, transparent);
}

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

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

/* A cream sign band that stays at the top, trimmed underneath with the three stripes. */
.marquee-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface, #fffaf0);
  color: var(--text-primary, #2a1a10);
}

.marquee-header > .marquee-stripes {
  position: relative;
  z-index: 1;
}

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

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

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

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

/* The second row of the centred kind: the menu on a line of bulbs. */
.marquee-header__rail {
  max-width: calc(var(--marquee-width) + 2 * var(--marquee-gutter));
  margin-inline: auto;
  padding: 0.15rem var(--marquee-gutter) 0.5rem;
}

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

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

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

.marquee-header__phone:hover {
  text-decoration: underline;
  text-decoration-color: var(--marquee-s2);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}

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

/* The website's name, in the display face with its painted shade. 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. */
.marquee-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.marquee-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines: a third line makes the bar taller than its controls
     (verify-theme-stress.mjs, header-rows). */
  max-width: min(27rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.375rem * var(--marquee-scale));
  font-weight: var(--marquee-heading-weight);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-shadow: 0.06em 0.06em 0 var(--marquee-shade);
}

.marquee-header--centered .marquee-brand__name {
  font-size: calc(1.6rem * var(--marquee-scale));
}

/* 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. */
.marquee-header .marquee-brand__name {
  display: block;
  overflow: visible;
}

/* On a phone the shared rule keeps the name to two lines (it wins there). The display faces are tall (Unbounded's
   capitals fill their line), so the lines are set looser here and the box clips only a little past its edges: a caron
   above the first line and a tail under the second stay whole, and the top of a third line never shows under the
   second (with the starter's tighter line and wider margin it did, in Unbounded). */
@media (max-width: 39.99rem) {
  .marquee-header .marquee-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.05em;
    padding-block: 0.14em 0;
    font-size: calc(1.2rem * var(--marquee-scale));
    line-height: 1.42;
  }
}

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

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

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

/* A drawn logo (an SVG file) saved without a width and a height has a shape but no size of its own, and beside the name
   in a row it then takes no room at all: the logo is simply not there (Folio found it first). Given a height, its width
   follows from its shape. A photograph of a logo keeps its own size under the limits above. */
.marquee-header .brand-logo-original[src*=".svg"] {
  height: 2.75rem !important;
}

.marquee-footer .brand-logo-original[src*=".svg"] {
  height: 3rem !important;
  object-position: left center;
}

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

.marquee-topbar {
  background: var(--primary, #0e5b57);
  color: var(--on-primary, #fff8ea);
  font-size: 0.8125rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

.marquee-nav__item > a:hover,
.marquee-nav__item--parent:focus-within > a {
  background: var(--surface-alt, #f0dfbe);
}

/* The page being shown wears a pill outlined in the sign's second colour. */
.marquee-nav__item.is-current > a {
  box-shadow: inset 0 0 0 2px var(--marquee-s2);
}

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

.marquee-nav__children {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: 2px solid var(--marquee-line);
  border-radius: var(--marquee-radius);
  background: var(--surface, #fffaf0);
  color: var(--text-primary, #2a1a10);
  box-shadow: 0 5px 0 var(--marquee-line);
  visibility: hidden;
  opacity: 0;
}

/* The gap between the item and its list is still the item, so the list stays open on the way down. */
.marquee-nav__children::before {
  content: "";
  position: absolute;
  inset: -0.5rem 0 auto;
  height: 0.5rem;
}

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

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

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

/* The menu button: a round enamel button whose three lines 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). */
.marquee-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.marquee-menu-button:hover {
  background: var(--surface-alt, #f0dfbe);
}

.marquee-menu-button__lines {
  display: grid;
  gap: 0.25rem;
  width: 1.1rem;
}

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

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

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

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

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

/* A panel under the stripes with every page in the display face, each on its own line of bulbs. It scrolls inside
   itself when the pages are many, so the last one is always reachable. */
.marquee-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
     (--marquee-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(--marquee-head, var(--marquee-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 4px solid var(--marquee-s3);
  background: var(--surface, #fffaf0);
  color: var(--text-primary, #2a1a10);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--text-primary, #2a1a10) 45%, transparent);
}

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

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

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

.marquee-drawer__item {
  border-bottom: 3px dotted var(--marquee-line);
}

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

.marquee-drawer__link:hover {
  text-shadow: 0.06em 0.06em 0 var(--marquee-shade);
}

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

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

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

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

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

  .marquee-header--centered .marquee-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) .marquee-drawer {
    display: none;
  }
}

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

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

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

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

.marquee-breadcrumbs li + li::before {
  content: "\2605";
  margin-right: 0.5rem;
  color: var(--accent-ink, #8a4705);
  font-size: 0.7em;
}

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

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

.marquee-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #2a1a10);
  font-weight: var(--marquee-body-strong);
}

/* ------------------------------------------------------------------ Display type */

/* The page's first heading, wherever a block of the theme's own draws it. It sits in main, so the shared script sets it
   smaller before a long word would break; the sizes here (times the face's scale) hold a word of fourteen letters at
   320 px without it. A line height of 1.12 leaves room for the caron of Š over the first line in every face. */
.marquee-display {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2rem, 1.15rem + 3.6vw, 4.25rem) * var(--marquee-scale));
  font-weight: var(--marquee-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
  text-shadow: 0.055em 0.055em 0 var(--marquee-shade);
}

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

/* The heading, the lead line, the selling points and the buttons beside a picture that stands inside three rings of the
   sign colours, all over a sunburst that rises from behind the picture. */
.marquee-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) var(--marquee-gutter) clamp(3.5rem, 8vw, 6.5rem);
}

.marquee-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  --marquee-burst: 76% 52%;
  background: repeating-conic-gradient(from 0deg at var(--marquee-burst), color-mix(in srgb, var(--marquee-s2) 15%, transparent) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(circle at var(--marquee-burst), #000 0, #000 16rem, transparent 44rem);
  mask-image: radial-gradient(circle at var(--marquee-burst), #000 0, #000 16rem, transparent 44rem);
}

/* On a narrow screen the picture stands under the words, and the sunburst rises from behind it there. */
@media (max-width: 55.99rem) {
  .marquee-hero::before {
    --marquee-burst: 50% 88%;
  }
}

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

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

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

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

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

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

/* Each selling point's icon stands in a small bottle-cap seal of the accent colour. */
.marquee-hero__icon {
  box-sizing: content-box;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.1em;
  padding: 0.35rem;
  background: var(--accent, #f0a81c);
  color: var(--on-accent, #2a1606);
  clip-path: var(--marquee-seal);
}

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

.marquee-hero__actions {
  margin-top: 0.4rem;
}

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

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

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

.marquee-stars svg.is-full {
  fill: var(--accent-ink, #8a4705);
}

.marquee-hero__trustpilot {
  color: var(--accent-ink, #8a4705);
  font-weight: var(--marquee-body-strong);
}

/* The rings: the page's colour, then the three sign colours, drawn as shadows (they take no room and never make the page
   scroll). The figure keeps their width free around the picture. */
.marquee-hero__media {
  --marquee-ring: clamp(0.3rem, 0.2rem + 0.4vw, 0.5rem);
  margin: calc(4 * var(--marquee-ring));
}

.marquee-ringed {
  --marquee-ring: clamp(0.3rem, 0.2rem + 0.4vw, 0.5rem);
  border-radius: calc(var(--marquee-radius) + 0.75rem);
  box-shadow:
    0 0 0 var(--marquee-ring) var(--marquee-ring-gap, var(--background, #f7ecd7)),
    0 0 0 calc(2 * var(--marquee-ring)) var(--marquee-s3),
    0 0 0 calc(3 * var(--marquee-ring)) var(--marquee-s2),
    0 0 0 calc(4 * var(--marquee-ring)) var(--marquee-s1);
}

.marquee-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Without a picture the words stand on a sign board in the middle of the sunburst. */
.marquee-hero--words::before {
  background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--marquee-s2) 20%, transparent) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(farthest-side circle at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(farthest-side circle at 50% 50%, #000 35%, transparent 100%);
}

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

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

/* ------------------------------------------------------------------ The sign board */

/* A cream board with rounded corners and a ring of light bulbs just inside its edge: the heading of a full-width opening,
   a call to action laid on a photograph and the page not found stand on it. The bulbs are a dotted line in the accent
   colour with a soft glow; they carry no text. */
.marquee-sign {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1.15rem;
  justify-items: start;
  min-width: 0;
  padding: clamp(1.9rem, 1.4rem + 2vw, 3rem) clamp(1.6rem, 1.2rem + 2vw, 3rem);
  border-radius: calc(var(--marquee-radius) + 0.75rem);
  background: var(--surface, #fffaf0);
  color: var(--text-primary, #2a1a10);
  box-shadow: 0 0.6rem 0 color-mix(in srgb, var(--text-primary, #2a1a10) 22%, transparent), 0 2rem 3rem -1.5rem color-mix(in srgb, #000 55%, transparent);
}

.marquee-sign::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  z-index: -1;
  border: 0.42rem dotted var(--marquee-s2);
  border-radius: calc(var(--marquee-radius) + 0.2rem);
  filter: drop-shadow(0 0 0.22rem color-mix(in srgb, var(--marquee-s2) 85%, transparent));
  pointer-events: none;
}

.marquee-sign__title {
  max-width: 18ch;
  font-size: calc(clamp(1.85rem, 1.15rem + 3vw, 3.75rem) * var(--marquee-scale));
}

.marquee-sign__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #5d4434);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
}

.marquee-sign__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.3rem;
}

/* The bulbs come on one after another when the page opens, and then glow. Nothing moves for a visitor who asks for less
   motion (the rule at the end of this file stops every animation). */
@media (prefers-reduced-motion: no-preference) {
  .marquee-sign::before {
    animation: marquee-glow 3.2s ease-in-out infinite alternate;
  }
}

@keyframes marquee-glow {
  from { filter: drop-shadow(0 0 0.12rem color-mix(in srgb, var(--marquee-s2) 60%, transparent)); }
  to { filter: drop-shadow(0 0 0.4rem var(--marquee-s2)); }
}

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

/* hero_fullwidth_image and hero_video (includes/hero.php): the picture across the window, and the sign board standing
   on it at the lower left. On a phone the picture is a band at the top and the board stands under it, overlapping it a
   little, so the words never sit on a busy part of a photograph. */
.marquee-opening {
  position: relative;
  isolation: isolate;
}

.marquee-opening__stage {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(32rem, calc(100svh - var(--marquee-head)), 52rem);
}

.marquee-opening__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  overflow: hidden;
  background: var(--surface-alt, #f0dfbe);
}

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

/* A light shade along the foot of the picture, where the board stands, so the board's edge reads on a pale photo.
   --pgs-tint is the block's own word on the shade (lighter, darker). */
.marquee-opening__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / min(0.7, calc(0.28 * var(--pgs-tint, 1)))) 100%);
}

.marquee-opening__inner {
  width: 100%;
  max-width: calc(var(--marquee-width) + 2 * var(--marquee-gutter));
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--marquee-gutter);
}

.marquee-opening .marquee-sign {
  max-width: 44rem;
}

/* 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 board and its buttons end on the first screen, not under it. The breadcrumb
   is one line of 0.875rem with 1.25rem above it; the opening stands 1.25rem under it. The script then says where the
   opening really starts (--marquee-opening-top: an announcement above the header, a breadcrumb on two lines). */
.marquee-main > nav[aria-label]:first-child + .marquee-opening {
  --marquee-above: var(--marquee-opening-top, calc(var(--marquee-head) + 1.25rem + 0.875rem * 1.65 + 1.25rem));
  padding-top: 1.25rem;
}

.marquee-main > nav[aria-label]:first-child + .marquee-opening .marquee-opening__stage {
  min-height: clamp(24rem, calc(100svh - var(--marquee-above)), 52rem);
}

/* Without a picture or a video the board stands in a sunburst on the page colour. */
.marquee-opening--bare .marquee-opening__stage {
  min-height: 0;
  place-items: center;
}

.marquee-opening--bare .marquee-opening__media {
  background: repeating-conic-gradient(from 0deg at 50% 60%, color-mix(in srgb, var(--marquee-s2) 22%, transparent) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(farthest-side circle at 50% 60%, #000 30%, transparent 100%);
  mask-image: radial-gradient(farthest-side circle at 50% 60%, #000 30%, transparent 100%);
}

.marquee-opening--bare .marquee-opening__inner {
  display: grid;
  justify-items: center;
}

.marquee-opening--bare .marquee-sign {
  justify-items: center;
  text-align: center;
}

.marquee-opening--bare .marquee-sign__actions {
  justify-content: center;
}

@media (max-width: 47.99rem) {
  .marquee-opening--picture .marquee-opening__stage,
  .marquee-main > nav[aria-label]:first-child + .marquee-opening--picture .marquee-opening__stage {
    display: block;
    min-height: 0;
  }

  .marquee-opening--picture .marquee-opening__media {
    position: relative;
    height: clamp(13rem, 46svh, 24rem);
  }

  /* Under the breadcrumb the picture is a shorter band, so the board and its buttons still end on the first screen. */
  .marquee-main > nav[aria-label]:first-child + .marquee-opening--picture .marquee-opening__media {
    height: clamp(9rem, 26svh, 15rem);
  }

  .marquee-opening--picture .marquee-opening__shade {
    display: none;
  }

  .marquee-opening--picture .marquee-opening__inner {
    margin-top: -3.25rem;
    padding: 0 var(--marquee-gutter) 2.5rem;
  }
}

/* ------------------------------------------------------------------ Kit sections on the page */

/* A section's first heading wears the painted shade (the kit's h1 and h2; a card's title does not). */
.marquee-main :is(.kit-heading--1, .kit-heading--2):not(.kit-heading--long) {
  text-shadow: 0.055em 0.055em 0 var(--marquee-shade);
}

/* Bands in the main colour and the accent: a sunburst rises from below the band, and the band is trimmed above and below
   with the two other sign colours. On a band the shade is the band's own colour deepened, so the letters stand out. */
.marquee-main .kit-section--inverse,
.marquee-main .kit-section--accent {
  background-image: repeating-conic-gradient(from 0deg at 50% 130%, color-mix(in srgb, var(--kit-section-fg) 7%, transparent) 0deg 5deg, transparent 5deg 10deg);
}

.marquee-main .kit-section--inverse {
  --marquee-shade: var(--marquee-s1);
}

.marquee-main .kit-section--accent {
  --marquee-shade: color-mix(in srgb, var(--accent, #f0a81c) 60%, var(--on-accent, #2a1606));
}

.marquee-main :is(.kit-section--inverse, .kit-section--accent)::before,
.marquee-main :is(.kit-section--inverse, .kit-section--accent)::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: calc(2 * var(--marquee-stripe));
  pointer-events: none;
}

.marquee-main .kit-section--inverse::before {
  top: 0;
  background: linear-gradient(var(--marquee-s1) 0 50%, var(--marquee-s2) 50%);
}

.marquee-main .kit-section--inverse::after {
  bottom: 0;
  background: linear-gradient(var(--marquee-s2) 0 50%, var(--marquee-s1) 50%);
}

.marquee-main .kit-section--accent::before {
  top: 0;
  background: linear-gradient(var(--marquee-s1) 0 50%, var(--marquee-s3) 50%);
}

.marquee-main .kit-section--accent::after {
  bottom: 0;
  background: linear-gradient(var(--marquee-s3) 0 50%, var(--marquee-s1) 50%);
}

/* A call to action laid on a photograph: its words stand inside a ring of bulbs on the darkened picture, like the lit
   sign over a door. */
.marquee-main [data-block="cta_section"].kit-section--image > .kit-section__inner {
  position: relative;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
}

.marquee-main [data-block="cta_section"].kit-section--image > .kit-section__inner::before {
  content: "";
  position: absolute;
  inset: 0 max(0px, var(--kit-gutter) - 1.25rem);
  border: 0.42rem dotted var(--marquee-s2);
  border-radius: calc(var(--marquee-radius) + 0.75rem);
  filter: drop-shadow(0 0 0.3rem var(--marquee-s2));
  pointer-events: none;
}

@media (max-width: 47.99rem) {
  .marquee-main [data-block="cta_section"].kit-section--image > .kit-section__inner::before {
    inset-inline: 0.5rem;
  }

  .marquee-main [data-block="cta_section"].kit-section--image > .kit-section__inner {
    padding-inline: calc(var(--kit-gutter) + 0.75rem);
  }
}

/* The picture beside the words of text_with_image and about_section stands in the same rings as the opening's, with the
   band's own colour between the picture and the first ring. */
.marquee-main :is([data-block="text_with_image"], [data-block="about_section"]) .kit-split > .kit-picture {
  --marquee-ring: clamp(0.25rem, 0.15rem + 0.35vw, 0.45rem);
  margin: calc(4 * var(--marquee-ring));
  border-radius: calc(var(--marquee-radius) + 0.5rem);
  box-shadow:
    0 0 0 var(--marquee-ring) var(--marquee-ring-gap, var(--background, #f7ecd7)),
    0 0 0 calc(2 * var(--marquee-ring)) var(--marquee-s3),
    0 0 0 calc(3 * var(--marquee-ring)) var(--marquee-s2),
    0 0 0 calc(4 * var(--marquee-ring)) var(--marquee-s1);
}

.marquee-main .kit-section--muted {
  --marquee-ring-gap: var(--surface-alt, #f0dfbe);
}

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

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

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

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

/* The date and the author on a pill, as a price tag is hung on a window. */
.marquee-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0.2rem 0.85rem;
  border: 2px solid var(--marquee-line);
  border-radius: var(--marquee-button-radius);
  color: var(--text-secondary, #5d4434);
  font-size: 0.875rem;
  font-weight: var(--marquee-body-strong);
}

.marquee-article__header h1 {
  font-size: calc(clamp(1.9rem, 1.3rem + 2.4vw, 3rem) * var(--marquee-scale));
}

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

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

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

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

.marquee-prose h2 {
  font-size: calc(1.6rem * var(--marquee-scale));
}

.marquee-prose h3 {
  font-size: calc(1.3rem * var(--marquee-scale));
}

.marquee-prose h4 {
  font-size: calc(1.1rem * var(--marquee-scale));
}

.marquee-prose a {
  color: var(--accent-ink, #8a4705);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* A quotation in the display face behind a large painted quotation mark. */
.marquee-prose blockquote {
  position: relative;
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 3.25rem;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.25rem * var(--marquee-scale));
  font-weight: var(--marquee-heading-weight);
  line-height: 1.4;
}

.marquee-prose blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.1em;
  left: 0;
  color: var(--accent-ink, #8a4705);
  font-size: 3.5rem;
  line-height: 1;
}

.marquee-prose blockquote p {
  margin: 0;
}

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

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

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

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

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

.marquee-prose hr {
  height: calc(3 * var(--marquee-stripe));
  margin: 2.5em auto;
  border: 0;
  background: linear-gradient(var(--marquee-s1) 0 33.4%, var(--marquee-s2) 33.4% 66.7%, var(--marquee-s3) 66.7%);
  border-radius: 999px;
  width: min(9rem, 50%);
}

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

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

/* A line is the three stripes, rounded at the ends; dashes are the stripes cut into lengths; dots are three bulbs. */
.marquee-divider__line {
  width: 100%;
  height: calc(3 * var(--marquee-stripe));
  border-radius: 999px;
  background: linear-gradient(var(--marquee-s1) 0 33.4%, var(--marquee-s2) 33.4% 66.7%, var(--marquee-s3) 66.7%);
}

.marquee-divider--dashed .marquee-divider__line {
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 2.25rem, transparent 2.25rem 3rem);
  mask-image: repeating-linear-gradient(90deg, #000 0 2.25rem, transparent 2.25rem 3rem);
}

.marquee-divider--dotted span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--marquee-s1);
}

.marquee-divider--dotted span:nth-child(2) {
  background: var(--marquee-s2);
}

.marquee-divider--dotted span:nth-child(3) {
  background: var(--marquee-s3);
}

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

/* The footer is a band of the main colour under the three stripes, its words in the colour the contract keeps readable
   on it, with a sunburst rising behind the name. */
.marquee-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--primary, #0e5b57);
  color: var(--on-primary, #fff8ea);
}

.marquee-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg at 0% 100%, color-mix(in srgb, var(--on-primary, #fff8ea) 6%, transparent) 0deg 4deg, transparent 4deg 8deg);
  pointer-events: none;
}

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

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

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

.marquee-footer .marquee-brand__name {
  max-width: 100%;
  font-size: calc(1.6rem * var(--marquee-scale));
  text-shadow: 0.06em 0.06em 0 var(--marquee-s1);
}

.marquee-footer--minimal .marquee-brand__name {
  font-size: calc(1.25rem * var(--marquee-scale));
}

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

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

/* The mega footer opens with an invitation on a sign of its own: the heading in the display face, the button beside it. */
.marquee-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: 3px dotted color-mix(in srgb, var(--on-primary, #fff8ea) 40%, transparent);
}

.marquee-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.7rem, 1.2rem + 2vw, 2.6rem) * var(--marquee-scale));
  font-weight: var(--marquee-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
  text-shadow: 0.055em 0.055em 0 var(--marquee-s1);
}

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

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

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

/* A column's title on a small pill of the accent colour, as a sign-writer letters a price tag. */
.marquee-footer__title {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0.85rem;
  padding: 0.1rem 0.75rem;
  border-radius: var(--marquee-button-radius);
  background: var(--accent, #f0a81c);
  color: var(--on-accent, #2a1606);
  font-size: 0.8125rem;
  font-weight: var(--marquee-body-strong);
  line-height: 1.5;
}

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

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

.marquee-footer__links a:hover,
.marquee-footer__contact a:hover,
.marquee-footer__legal a:hover,
.marquee-footer__inline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--marquee-s2);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}

.marquee-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: inherit;
}

.marquee-footer__social a:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

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

.marquee-footer__bottom {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: 1.25rem;
  border-top: 3px dotted color-mix(in srgb, var(--on-primary, #fff8ea) 40%, transparent);
}

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

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

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

/* The footer's large name (config.footer_wordmark) in the display face with the painted shade; the shared rule sizes it
   by the name's length and keeps its top clear. */
.marquee-footer .theme-footer-wordmark {
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--marquee-heading-weight);
  text-shadow: 0.04em 0.04em 0 var(--marquee-s1);
}

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

.marquee-not-found {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--marquee-gutter);
}

.marquee-not-found::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg at 50% 45%, color-mix(in srgb, var(--marquee-s2) 20%, transparent) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(farthest-side circle at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(farthest-side circle at 50% 45%, #000 30%, transparent 100%);
}

.marquee-not-found .marquee-sign {
  justify-items: center;
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}

.marquee-not-found__number {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(4rem, 3rem + 5vw, 7rem) * var(--marquee-scale));
  font-weight: var(--marquee-heading-weight);
  line-height: 1.05;
  text-shadow: 0.06em 0.06em 0 var(--marquee-s1);
}

.marquee-not-found h1 {
  font-size: calc(clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem) * var(--marquee-scale));
}

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

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

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

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

.marquee-form-success p {
  margin: 0;
}

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

/* The shared bar (resilience.css) on the theme's sign band, with the stripes along its top. */
body .theme-action-bar {
  border-top: calc(3 * var(--marquee-stripe)) solid var(--marquee-s2);
  background: var(--surface, #fffaf0);
}

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

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

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