/*
 * Deco: Art Deco glamour, like the lobby of a grand hotel in 1928. The header and the footer are bands of the palette's
 * deep main colour ruled in metal; headings stand in spaced capitals; compositions are symmetric; a small rising sun
 * with its rays sits over each section's heading; the opening is a photograph inside a fine gold frame whose corners
 * cross, under a sunburst; pictures beside words have corners cut in steps and a gilt line round them; buttons are
 * plaques with a gold line inside their edge. Square corners.
 *
 * This file draws the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the blocks the
 * theme draws itself (the opening, the split hero, the article body, the divider) and the way whole kit sections sit on
 * the page (it knows each block's type from includes/stitch.php). The inside of 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. The gold of the lines and
 * ornaments is the accent, used for decoration only, never for words on a fill the contract does not name. On a
 * photograph the theme's own shade decides, not the palette (ivory words on a dark shade).
 *
 * Type comes from the layout: --font-heading, --font-body, --deco-heading-weight and --deco-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) {
  --deco-width: 72rem;
  --deco-gutter: clamp(1rem, 4vw, 2rem);
  --deco-bar: 4.75rem;
  /* The whole header's height: the bar and its double rule until theme.js has measured the header itself. */
  --deco-head: calc(var(--deco-bar) + 5px);
  --deco-radius: 0;
  --deco-button-radius: 0;
  --deco-heading-weight: 400;
  --deco-body-strong: 600;
  --deco-speed: 220ms;
  --deco-line: var(--border, #d9cdb2);
  /* Every heading face at about one width of capital (the table is under "Faces"). */
  --deco-scale: 1;
  /* The gold of the lines, and its metal: a light and a deep shade of the accent, as a gilt edge catches the light. */
  --deco-gold: var(--accent, #c6a15b);
  --deco-gold-light: color-mix(in srgb, var(--accent, #c6a15b) 55%, #fff);
  --deco-gold-deep: color-mix(in srgb, var(--accent, #c6a15b) 70%, #000);
  --deco-metal: linear-gradient(90deg, var(--deco-gold-deep), var(--deco-gold-light) 20%, var(--deco-gold) 40%, var(--deco-gold-light) 60%, var(--deco-gold) 78%, var(--deco-gold-deep));
  /* The spacing of capitals in headings, and of the small capitals of labels and buttons. */
  --deco-track: 0.08em;
  --deco-track-small: 0.18em;
}

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

/* Heading faces differ widely in the width of their capitals. The layout names the heading face on <body>, and each is set
   at the size where its capitals are about as wide as the others': a heading fills the same room whichever font palette
   a website chooses. A face that is not listed (a website's own) is set at the plain size. */
.deco-face--poiret-one { --deco-scale: 0.94; }
.deco-face--sofia-sans-extra-condensed { --deco-scale: 1.3; }
.deco-face--noto-serif-display { --deco-scale: 0.98; }
.deco-face--bona-nova { --deco-scale: 0.96; }
.deco-face--limelight { --deco-scale: 0.82; }
.deco-face--aboreto { --deco-scale: 0.8; }
.deco-face--commissioner { --deco-scale: 0.94; }

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

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

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

body {
  margin: 0;
  background: var(--background, #f6f1e6);
  color: var(--text-primary, #15211d);
  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, #76541a);
  outline-offset: 3px;
}

::selection {
  background: var(--accent, #c6a15b);
  color: var(--on-accent, #1d1505);
}

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

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

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

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

/* ------------------------------------------------------------------ Ornaments */

/* The rising sun: a half disc with its rays over a horizon line that fades at both ends, all in gold. Drawn from
   gradients and a mask, so it needs no picture. --deco-sun-x moves the sun along its line (a heading set at the left
   has its sun at the left); --deco-sun-r is the reach of the rays. The kit's section headings wear the same sun
   (below, "Sections"). */
.deco-ornament {
  display: block;
  flex: none;
  pointer-events: none;
}

.deco-ornament--sun,
.deco-main .kit-heading-group:is(:has(> .kit-heading--1), :has(> .kit-heading--2))::before {
  --deco-sun-x: 50%;
  --deco-sun-r: 1.15rem;
  --deco-sun-line: linear-gradient(90deg, transparent, currentColor 24%, currentColor 76%, transparent);
  width: min(11rem, 100%);
  height: calc(var(--deco-sun-r) + 1px);
  margin-inline: auto;
  color: var(--deco-gold);
  background:
    var(--deco-sun-line) 0 100% / 100% 1px no-repeat,
    radial-gradient(circle at var(--deco-sun-x) 100%, currentColor 0 0.34rem, transparent 0.36rem),
    repeating-conic-gradient(from -92.5deg at var(--deco-sun-x) 100%, currentColor 0 5deg, transparent 5deg 15deg);
  -webkit-mask:
    radial-gradient(circle at var(--deco-sun-x) 100%, #000 0 0.36rem, transparent 0.37rem 0.52rem, #000 0.53rem var(--deco-sun-r), transparent calc(var(--deco-sun-r) + 0.5px)),
    linear-gradient(#000, #000) 0 100% / 100% 1px no-repeat;
  mask:
    radial-gradient(circle at var(--deco-sun-x) 100%, #000 0 0.36rem, transparent 0.37rem 0.52rem, #000 0.53rem var(--deco-sun-r), transparent calc(var(--deco-sun-r) + 0.5px)),
    linear-gradient(#000, #000) 0 100% / 100% 1px no-repeat;
}

/* The diamond between two fine lines. */
.deco-ornament--diamond {
  position: relative;
  width: min(8rem, 100%);
  height: 0.75rem;
  margin-inline: auto;
  color: var(--deco-gold);
  background:
    linear-gradient(90deg, transparent, currentColor) 0 50% / calc(50% - 0.8rem) 1px no-repeat,
    linear-gradient(90deg, currentColor, transparent) 100% 50% / calc(50% - 0.8rem) 1px no-repeat;
}

.deco-ornament--diamond::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.42rem;
  height: 0.42rem;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

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

/* The frame's own headings: the heading face in spaced capitals. The line height leaves room for the marks above
   capitals (Š, Ž) and the tails under them (Ą, Ų). */
.deco-opening__title,
.deco-hero__title,
.deco-article__header h1,
.deco-footer__invite,
.deco-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-weight: var(--deco-heading-weight);
  letter-spacing: var(--deco-track);
  line-height: 1.12;
  text-transform: uppercase;
  text-wrap: balance;
}

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

/* One shape for every button the theme draws itself: a square plaque in small spaced capitals. The main one is the
   palette's main colour with a fine gold line drawn just inside its edge; the gold one has a line of its ink; the
   other is a double outline in gold. kit-theme.css gives the kit's buttons the same, and the line of this theme in
   resilience.css (--chrome-button-radius, --chrome-button-case) gives the corner and the capitals 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. */
.deco-button {
  --deco-fill: transparent;
  --deco-inner: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.8rem 1.65rem;
  border: 1px solid transparent;
  border-radius: var(--deco-button-radius);
  box-shadow: inset 0 0 0 3px var(--deco-fill), inset 0 0 0 4px var(--deco-inner);
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-weight: var(--deco-body-strong);
  letter-spacing: var(--deco-track-small);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: break-word;
  transition: background-color var(--deco-speed) ease, border-color var(--deco-speed) ease, color var(--deco-speed) ease, box-shadow var(--deco-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. */
.deco-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.deco-button--primary {
  --deco-fill: var(--primary, #0f3a30);
  --deco-inner: var(--deco-gold);
  border-color: var(--primary, #0f3a30);
  background: var(--primary);
  color: var(--on-primary);
}

.deco-button--primary:hover {
  --deco-fill: var(--primary-alt, #174a3e);
  --deco-inner: var(--deco-gold-light);
  border-color: var(--primary-alt, #174a3e);
  background: var(--primary-alt);
}

.deco-button--accent {
  --deco-fill: var(--accent, #c6a15b);
  --deco-inner: color-mix(in srgb, var(--on-accent, #1d1505) 45%, transparent);
  border-color: var(--accent, #c6a15b);
  background: var(--accent);
  color: var(--on-accent);
}

/* The hover is the inner line 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. */
.deco-button--accent:hover {
  --deco-inner: var(--on-accent, #1d1505);
}

.deco-button--secondary {
  border: 3px double var(--deco-gold);
  background: transparent;
  color: var(--accent-ink, #76541a);
}

.deco-button--secondary:hover {
  border-color: var(--accent, #c6a15b);
  background: var(--accent);
  color: var(--on-accent);
}

.deco-button--small {
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.6875rem;
}

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

/* On a photograph the theme's own shade decides, not the palette: the main button is gold with its own ink, the other a
   double outline of pale gold with ivory words. */
.deco-button--on-picture.deco-button--primary {
  --deco-fill: var(--accent, #c6a15b);
  --deco-inner: color-mix(in srgb, var(--on-accent, #1d1505) 45%, transparent);
  border-color: var(--accent, #c6a15b);
  background: var(--accent);
  color: var(--on-accent);
}

.deco-button--on-picture.deco-button--primary:hover {
  --deco-inner: var(--on-accent, #1d1505);
}

.deco-button--on-picture.deco-button--secondary {
  border-color: rgb(236 214 168 / 0.85);
  background: rgb(10 9 7 / 0.28);
  color: #fbf6ea;
}

.deco-button--on-picture.deco-button--secondary:hover {
  border-color: #fbf6ea;
  background: rgb(251 246 234 / 0.14);
  color: #ffffff;
}

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

.deco-announcement {
  background: var(--accent, #c6a15b);
  color: var(--on-accent, #1d1505);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

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

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

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

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

.deco-announcement a {
  font-weight: var(--deco-body-strong);
  text-transform: uppercase;
  text-underline-offset: 0.3em;
}

.deco-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

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

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

/* A band of the main colour that stays at the top, ruled at its foot with a double line of metal (two gilt lines four
   pixels apart). The bar has one height for every kind; the centred kind adds a row for the menu. */
.deco-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-bottom: 5px;
  background:
    var(--deco-metal) 0 calc(100% - 4px) / 100% 1px no-repeat,
    var(--deco-metal) 0 100% / 100% 1px no-repeat;
  background-color: var(--primary, #0f3a30);
  color: var(--on-primary, #f5ebd4);
}

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

.deco-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The centred kind: the name in the middle column between two short gold rules, the actions in the right one, so a long
   name never runs under them. */
.deco-header--centered .deco-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

.deco-header--centered .deco-header__brand {
  grid-column: 2;
  justify-self: center;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 64rem) {
  .deco-header--centered .deco-header__brand::before,
  .deco-header--centered .deco-header__brand::after {
    content: "";
    flex: none;
    width: 2.5rem;
    height: 5px;
    background:
      linear-gradient(var(--deco-gold), var(--deco-gold)) 0 0 / 100% 1px no-repeat,
      linear-gradient(var(--deco-gold), var(--deco-gold)) 0 100% / 100% 1px no-repeat;
  }

  .deco-header--centered .deco-header__brand::before {
    -webkit-mask: linear-gradient(90deg, transparent, #000);
    mask: linear-gradient(90deg, transparent, #000);
  }

  .deco-header--centered .deco-header__brand::after {
    -webkit-mask: linear-gradient(90deg, #000, transparent);
    mask: linear-gradient(90deg, #000, transparent);
  }
}

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

/* The menu's row under the centred name, behind a hairline. */
.deco-header__rail {
  max-width: calc(var(--deco-width) + 2 * var(--deco-gutter));
  margin-inline: auto;
  padding: 0 var(--deco-gutter) 0.35rem;
}

.deco-header__rail .deco-nav {
  justify-content: center;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--on-primary, #f5ebd4) 16%, transparent);
}

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

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

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

.deco-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. */
.deco-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.deco-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-body, sans-serif);
  font-size: 1rem;
  font-weight: var(--deco-body-strong);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* A short name (up to eighteen characters, includes/chrome.php) stands in the heading face in spaced capitals, as a
   hotel's name over its door. */
.deco-brand__name--short {
  font-family: var(--font-heading, serif);
  font-size: calc(1.5rem * var(--deco-scale));
  font-weight: var(--deco-heading-weight);
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
}

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

  .deco-header .deco-brand__name--short {
    font-size: calc(1.2rem * var(--deco-scale));
    letter-spacing: 0.1em;
  }
}

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

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

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

.deco-header .logo-mask {
  background-color: var(--on-primary, #f5ebd4) !important;
}

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

.deco-topbar {
  border-bottom: 1px solid color-mix(in srgb, var(--on-primary, #f5ebd4) 14%, transparent);
  background: var(--primary-alt, #174a3e);
  color: var(--on-primary, #f5ebd4);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

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

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

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

.deco-topbar a:hover {
  text-decoration: underline;
  text-decoration-color: var(--deco-gold);
}

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

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

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

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

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

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

.deco-nav__item {
  position: relative;
}

/* The pages in small spaced capitals. A fine gold line grows from the middle under the one the pointer is on, and stays
   under the page being shown. */
.deco-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(var(--deco-gold), var(--deco-gold)) 50% calc(100% - 0.2rem) / 0 1px no-repeat;
  color: inherit;
  font-size: 0.75rem;
  font-weight: var(--deco-body-strong);
  letter-spacing: var(--deco-track-small);
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-size var(--deco-speed) ease;
}

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

.deco-nav__item > a:hover,
.deco-nav__item--parent:focus-within > a,
.deco-nav__item.is-current > a {
  background-size: calc(100% - 1.6rem) 1px;
}

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

/* A page's own pages on a sheet of the surface, under a gold rule. */
.deco-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: 1px solid var(--deco-line);
  border-top: 2px solid var(--deco-gold);
  background: var(--surface, #fffcf5);
  color: var(--text-primary, #15211d);
  box-shadow: 0 18px 40px -20px color-mix(in srgb, #000 45%, transparent);
  visibility: hidden;
  opacity: 0;
}

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

.deco-nav__children a {
  padding: 0.55rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.deco-nav__children a:hover {
  background: var(--surface-alt, #ece3cf);
  color: var(--text-primary, #15211d);
}

/* The menu button: three lines that turn into a cross, in a fine square. Hidden on a wide screen unless resilience.js
   folds the menu into it (theme-nav-compact on #site-header, whose shared rules show it). */
.deco-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--on-primary, #f5ebd4) 42%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.deco-menu-button:hover {
  border-color: var(--deco-gold);
}

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

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

.deco-menu-button__lines i:nth-child(2) {
  width: 70%;
  justify-self: center;
}

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

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

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

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

/* A panel of the main colour under the bar with every page, centred. It scrolls inside itself when the pages are many,
   so the last one is always reachable. */
.deco-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
     (--deco-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(--deco-head, var(--deco-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--deco-gold);
  background: var(--primary, #0f3a30);
  color: var(--on-primary, #f5ebd4);
  box-shadow: 0 30px 50px -30px color-mix(in srgb, #000 60%, transparent);
}

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

.deco-drawer__inner {
  display: grid;
  gap: 1.5rem;
  max-width: 34rem;
  margin-inline: auto;
  padding: 0.75rem var(--deco-gutter) 2rem;
  text-align: center;
}

.deco-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.deco-drawer__item {
  border-bottom: 1px solid color-mix(in srgb, var(--on-primary, #f5ebd4) 16%, transparent);
}

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

.deco-drawer__link:hover {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--deco-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

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

.deco-drawer__children a {
  padding: 0.3rem 0;
  font-size: 0.9375rem;
  text-decoration: none;
}

.deco-drawer__footer {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

.deco-drawer__contact {
  width: fit-content;
  color: inherit;
  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) {
  .deco-nav,
  .deco-header__rail,
  .deco-header__phone,
  .deco-header__cta,
  .deco-header__slot {
    display: none;
  }

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

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

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

/* The header's height by its kind on a wide screen, where the centred kind has its row of menu and the top-bar kind its
   slim line: what the opening is measured from until the script has measured the header itself. */
@media (min-width: 64rem) {
  .deco-body--centered {
    --deco-head: calc(var(--deco-bar) + 5px + 3rem);
  }

  .deco-body--topbar {
    --deco-head: calc(var(--deco-bar) + 5px + 2.25rem + 1px);
  }
}

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

/* Small spaced capitals in the middle of the page, parted by gold diamonds. */
.deco-breadcrumbs {
  max-width: calc(var(--deco-width) + 2 * var(--deco-gutter));
  margin-inline: auto;
  padding: 1.5rem var(--deco-gutter) 0;
}

.deco-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #4b5550);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  line-height: 1.65;
  list-style: none;
  text-transform: uppercase;
}

.deco-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.deco-breadcrumbs li + li::before {
  content: "";
  flex: none;
  width: 0.3rem;
  height: 0.3rem;
  background: var(--deco-gold);
  transform: rotate(45deg);
}

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

.deco-breadcrumbs a:hover {
  text-decoration: underline;
  text-decoration-color: var(--deco-gold);
  text-underline-offset: 0.3em;
}

.deco-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #15211d);
}

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

.deco-opening {
  position: relative;
}

/* The picture, its shade, the sunburst, the gilt frame and the words, in that order from the back. Words here are ivory
   on the theme's own shade, the one place the palette does not decide. The first screen less the header: the buttons
   end on it. */
.deco-opening__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(30rem, calc(100svh - var(--deco-head)), 60rem);
  padding: clamp(4.5rem, 9vw, 7rem) clamp(2rem, 7vw, 6rem);
  overflow: hidden;
  background: #0d0c0a;
  color: #fbf6ea;
  text-align: center;
}

/* 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 heading and its buttons end on the first screen, not under it. The
   breadcrumb is one line of 0.6875rem with 1.5rem above it; the opening stands 1.25rem under it (the shared short top
   of a first section, 3rem of empty page above a picture, is not for an opening). The script then says where the opening
   really starts (--deco-opening-top: an announcement above the header, a breadcrumb on two lines). */
.deco-main > .deco-breadcrumbs:first-child + .deco-opening {
  --deco-above: var(--deco-opening-top, calc(var(--deco-head) + 1.5rem + 0.6875rem * 1.65 + 1.25rem));
  padding-top: 1.25rem;
}

.deco-main > .deco-breadcrumbs:first-child + .deco-opening .deco-opening__stage {
  min-height: clamp(22rem, calc(100svh - var(--deco-above)), 60rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.deco-opening__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

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

/* An even shade, deeper towards the edges, so the words read in the middle of any picture. --pgs-tint is the block's own
   word on the shade (lighter, darker). */
.deco-opening__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%, rgb(9 8 6 / 0) 0%, rgb(9 8 6 / min(0.6, calc(0.38 * var(--pgs-tint, 1)))) 100%),
    linear-gradient(rgb(9 8 6 / min(0.9, calc(0.5 * var(--pgs-tint, 1)))), rgb(9 8 6 / min(0.92, calc(0.56 * var(--pgs-tint, 1)))));
}

/* The sunburst: fine rays rising from the foot of the stage, fading as they go. */
.deco-opening__rays,
.deco-hero__rays,
.deco-footer__rays,
.deco-not-found__rays {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: max(150%, 80rem);
  aspect-ratio: 2 / 1;
  background: repeating-conic-gradient(from -90.6deg at 50% 100%, var(--deco-ray, rgb(240 216 166 / 0.12)) 0 1.2deg, transparent 1.2deg 6deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 3%, #000 10%, rgb(0 0 0 / 0.35) 40%, transparent 66%);
  mask: radial-gradient(circle at 50% 100%, transparent 0 3%, #000 10%, rgb(0 0 0 / 0.35) 40%, transparent 66%);
  transform: translateX(-50%);
  pointer-events: none;
}

/* The gilt frame: two fine lines set in from the stage's edges. The outer one runs past each corner, so the lines cross
   there as on a poster of the period; the inner one is a plain square a few pixels inside it. */
.deco-opening__frame {
  --deco-cross: clamp(0.5rem, 1.1vw, 0.9rem);
  --deco-inset: clamp(0.75rem, 2.2vw, 1.75rem);
  position: absolute;
  inset: calc(var(--deco-inset) - var(--deco-cross));
  z-index: 0;
  color: var(--deco-frame, rgb(232 206 154 / 0.72));
  background:
    linear-gradient(currentColor, currentColor) 0 var(--deco-cross) / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 calc(100% - var(--deco-cross)) / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) var(--deco-cross) 0 / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - var(--deco-cross)) 0 / 1px 100% no-repeat;
  pointer-events: none;
}

.deco-opening__frame::before {
  content: "";
  position: absolute;
  inset: calc(var(--deco-cross) + 6px);
  border: 1px solid currentColor;
  opacity: 0.5;
}

.deco-opening__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  width: 100%;
  max-width: 58rem;
}

.deco-opening__sun {
  --deco-sun-r: 1.6rem;
  width: min(14rem, 100%);
  color: var(--deco-frame, rgb(232 206 154 / 0.9));
}

.deco-opening__title {
  max-width: 22ch;
  font-size: calc(clamp(2.25rem, 1rem + 5vw, 5.25rem) * var(--deco-scale));
  line-height: 1.1;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.3);
}

.deco-opening__lead {
  max-width: 38rem;
  margin: 0;
  color: rgb(251 246 234 / 0.9);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.6;
}

.deco-opening__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin-top: 0.5rem;
}

/* Without a picture the opening stands on the palette's main colour, its rays and frame in gold, its words and buttons
   the palette's again. */
.deco-opening--bare .deco-opening__stage {
  --deco-ray: color-mix(in srgb, var(--accent, #c6a15b) 20%, transparent);
  --deco-frame: var(--deco-gold);
  min-height: clamp(26rem, min(76svh, calc(100svh - var(--deco-head))), 48rem);
  background: var(--primary, #0f3a30);
  color: var(--on-primary, #f5ebd4);
}

.deco-main > .deco-breadcrumbs:first-child + .deco-opening--bare .deco-opening__stage {
  min-height: clamp(20rem, min(64svh, calc(100svh - var(--deco-above))), 42rem);
}

.deco-opening--bare .deco-opening__title {
  text-shadow: none;
}

.deco-opening--bare .deco-opening__lead {
  color: var(--on-primary, #f5ebd4);
}

.deco-opening--bare .deco-button--secondary {
  color: var(--on-primary, #f5ebd4);
}

.deco-opening--bare .deco-button--secondary:hover {
  color: var(--on-accent, #1d1505);
}

@media (max-width: 39.99rem) {
  .deco-opening__stage {
    padding-inline: 1.75rem;
  }

  .deco-opening__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 20rem;
  }
}

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

.deco-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) var(--deco-gutter);
}

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

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

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

.deco-hero__sun {
  --deco-sun-x: 1.6rem;
  --deco-sun-line: linear-gradient(90deg, currentColor, currentColor 40%, transparent);
  margin-inline: 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. */
.deco-hero__title {
  font-size: calc(clamp(2rem, 1.2rem + 3vw, 3.75rem) * var(--deco-scale));
}

.deco-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #4b5550);
  font-size: 1.125rem;
}

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

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

.deco-hero__icon {
  margin-top: 0.2em;
  color: var(--accent-ink, #76541a);
}

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

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

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

.deco-stars svg {
  width: 1rem;
  height: 1rem;
  fill: color-mix(in srgb, currentColor 22%, transparent);
}

.deco-stars svg.is-full {
  fill: var(--deco-gold);
}

.deco-hero__trustpilot {
  color: var(--accent-ink, #76541a);
  font-weight: var(--deco-body-strong);
}

/* The picture in its gilt frame: its corners cut in two steps, and a fine gold line round it a little way off whose
   ends cross at the corners. The figure holds the line; the picture inside is cut. */
.deco-hero__media,
.deco-main [data-block="text_with_image"] .kit-split > .kit-picture,
.deco-main [data-block="about_section"] .kit-split > .kit-picture {
  --deco-step: clamp(0.6rem, 1.2vw, 0.9rem);
  --deco-cross: 0.6rem;
  position: relative;
  margin: 0;
  padding: clamp(0.75rem, 1.6vw, 1.15rem);
  overflow: visible;
  background:
    linear-gradient(var(--deco-gold), var(--deco-gold)) 0 var(--deco-cross) / 100% 1px no-repeat,
    linear-gradient(var(--deco-gold), var(--deco-gold)) 0 calc(100% - var(--deco-cross)) / 100% 1px no-repeat,
    linear-gradient(var(--deco-gold), var(--deco-gold)) var(--deco-cross) 0 / 1px 100% no-repeat,
    linear-gradient(var(--deco-gold), var(--deco-gold)) calc(100% - var(--deco-cross)) 0 / 1px 100% no-repeat;
}

.deco-hero__image,
.deco-main [data-block="text_with_image"] .kit-split > .kit-picture img,
.deco-main [data-block="about_section"] .kit-split > .kit-picture img,
.deco-main [data-block="image_gallery"] .kit-picture img {
  display: block;
  width: 100%;
  clip-path: polygon(
    0 calc(2 * var(--deco-step)), var(--deco-step) calc(2 * var(--deco-step)), var(--deco-step) var(--deco-step), calc(2 * var(--deco-step)) var(--deco-step), calc(2 * var(--deco-step)) 0,
    calc(100% - 2 * var(--deco-step)) 0, calc(100% - 2 * var(--deco-step)) var(--deco-step), calc(100% - var(--deco-step)) var(--deco-step), calc(100% - var(--deco-step)) calc(2 * var(--deco-step)), 100% calc(2 * var(--deco-step)),
    100% calc(100% - 2 * var(--deco-step)), calc(100% - var(--deco-step)) calc(100% - 2 * var(--deco-step)), calc(100% - var(--deco-step)) calc(100% - var(--deco-step)), calc(100% - 2 * var(--deco-step)) calc(100% - var(--deco-step)), calc(100% - 2 * var(--deco-step)) 100%,
    calc(2 * var(--deco-step)) 100%, calc(2 * var(--deco-step)) calc(100% - var(--deco-step)), var(--deco-step) calc(100% - var(--deco-step)), var(--deco-step) calc(100% - 2 * var(--deco-step)), 0 calc(100% - 2 * var(--deco-step))
  );
}

/* A gallery's pictures have the same steps, smaller, and nothing behind their cut corners. */
.deco-main [data-block="image_gallery"] .kit-picture {
  --deco-step: 0.45rem;
  background: transparent;
}

.deco-hero__image {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

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

/* Without a picture: a symmetric block of words on the main colour under a sunburst. */
.deco-hero--words {
  --deco-ray: color-mix(in srgb, var(--accent, #c6a15b) 18%, transparent);
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background: var(--primary, #0f3a30);
  color: var(--on-primary, #f5ebd4);
  text-align: center;
}

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

.deco-hero--words .deco-hero__sun {
  --deco-sun-x: 50%;
  --deco-sun-line: linear-gradient(90deg, transparent, currentColor 24%, currentColor 76%, transparent);
  margin-inline: auto;
}

.deco-hero--words :is(.deco-hero__lead, .deco-hero__rating, .deco-hero__icon, .deco-hero__trustpilot) {
  color: var(--on-primary, #f5ebd4);
}

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

.deco-hero--words .deco-button--secondary {
  color: var(--on-primary, #f5ebd4);
}

.deco-hero--words .deco-button--secondary:hover {
  color: var(--on-accent, #1d1505);
}

/* ------------------------------------------------------------------ Sections */

/* The page is made of the kit's sections. Deco gives them: the rising sun over every section heading (above, under
   "Ornaments"), the tinted band ruled at top and foot with a fine double line of metal, and the deep band of the main
   colour under a faint sunburst rising from its foot. */
.deco-main .kit-heading-group:is(:has(> .kit-heading--1), :has(> .kit-heading--2))::before {
  content: "";
  display: block;
  margin-bottom: 1.1rem;
}

.deco-main .kit-heading-group.kit-text--left:is(:has(> .kit-heading--1), :has(> .kit-heading--2))::before {
  --deco-sun-x: 1.2rem;
  --deco-sun-line: linear-gradient(90deg, currentColor, currentColor 40%, transparent);
  margin-inline: 0;
}

/* On the accent's band the gold would vanish: the sun takes the band's own ink. */
.deco-main .kit-section--accent .kit-heading-group::before {
  color: var(--kit-section-fg, currentColor);
}

.deco-main .kit-section--muted {
  background-image:
    var(--deco-metal), var(--deco-metal),
    var(--deco-metal), var(--deco-metal);
  background-position: 0 0, 0 4px, 0 calc(100% - 4px), 0 100%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
}

.deco-main .kit-section--inverse {
  --deco-ray: color-mix(in srgb, var(--accent, #c6a15b) 14%, transparent);
  background-image:
    var(--deco-metal), var(--deco-metal),
    var(--deco-metal), var(--deco-metal),
    repeating-conic-gradient(from -91deg at 50% 130%, var(--deco-ray) 0 1.5deg, transparent 1.5deg 7deg);
  background-position: 0 0, 0 4px, 0 calc(100% - 4px), 0 100%, 50% 100%;
  background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px, 100% 100%;
  background-repeat: no-repeat;
}

/* A section that opens a page under the breadcrumb, or a page title, keeps its rules clear of them. */
.deco-main > .deco-breadcrumbs:first-child + .kit-root > .kit-section--muted:first-child {
  margin-top: 1.5rem;
}

/* The invitation near the end of a page (cta_section without a picture): a deep plate of the main colour under a
   sunburst, its heading as large as a page's, everything centred. Every colour role the kit reads is set, so its
   buttons and lines follow. */
.deco-main [data-block="cta_section"]:not(.kit-section--image, .kit-section--inverse, .kit-section--accent) {
  --kit-section-bg: var(--primary, #0f3a30);
  --kit-section-fg: var(--on-primary, #f5ebd4);
  --kit-text: var(--kit-section-fg);
  --kit-muted: color-mix(in srgb, var(--kit-section-fg) 82%, transparent);
  --kit-surface: color-mix(in srgb, var(--kit-section-fg) 9%, transparent);
  --kit-surface-alt: color-mix(in srgb, var(--kit-section-fg) 14%, transparent);
  --kit-primary: var(--accent, #c6a15b);
  --kit-primary-hover: var(--accent, #c6a15b);
  --kit-on-primary: var(--on-accent, #1d1505);
  --kit-accent: var(--kit-section-fg);
  --kit-accent-text: var(--kit-section-fg);
  --kit-on-accent: var(--kit-section-bg);
  --kit-line: color-mix(in srgb, var(--kit-section-fg) 26%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--kit-section-fg) 52%, transparent);
  --kit-focus: var(--kit-section-fg);
  --deco-ray: color-mix(in srgb, var(--accent, #c6a15b) 16%, transparent);
  background-color: var(--primary);
  color: var(--on-primary);
  background-image:
    var(--deco-metal), var(--deco-metal),
    var(--deco-metal), var(--deco-metal),
    repeating-conic-gradient(from -91deg at 50% 100%, var(--deco-ray) 0 1.5deg, transparent 1.5deg 7deg);
  background-position: 0 0, 0 4px, 0 calc(100% - 4px), 0 100%, 50% 100%;
  background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px, 100% 100%;
  background-repeat: no-repeat;
}

.deco-main [data-block="cta_section"]:not(.kit-section--image) .kit-heading--2 {
  font-size: calc(clamp(1.9rem, 1.2rem + 3vw, 3.5rem) * var(--deco-scale));
}

/* A narrow kind of section (questions, an enquiry form) on a wide screen: the heading at the left under its sun, the
   content at the right, so a page of them is not a thin column down the middle. */
@media (min-width: 64rem) {
  .deco-main :is([data-block="faq"], [data-block="contact_form"]) > .kit-section__inner.kit-width--narrow {
    --kit-w: var(--kit-width-normal);
  }

  .deco-main :is([data-block="faq"], [data-block="contact_form"]) > .kit-width--narrow > .kit-stack {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .deco-main :is([data-block="faq"], [data-block="contact_form"]) > .kit-width--narrow > .kit-stack > * {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-block: 0;
  }

  .deco-main :is([data-block="faq"], [data-block="contact_form"]) > .kit-width--narrow > .kit-stack > :first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .deco-main :is([data-block="faq"], [data-block="contact_form"]) > .kit-width--narrow > .kit-stack > .kit-text--lead {
    grid-column: 1;
    grid-row: 2;
  }

  .deco-main :is([data-block="faq"], [data-block="contact_form"]) > .kit-width--narrow > .kit-stack > .kit-text--muted {
    grid-column: 2;
    grid-row: 4;
  }

  .deco-main :is([data-block="faq"], [data-block="contact_form"]) .kit-width--narrow .kit-heading-group.kit-text--center,
  .deco-main :is([data-block="faq"], [data-block="contact_form"]) .kit-width--narrow > .kit-stack > :is(.kit-text--lead, .kit-stack) .kit-text--center,
  .deco-main :is([data-block="faq"], [data-block="contact_form"]) .kit-width--narrow > .kit-stack > .kit-text--lead.kit-text--center {
    text-align: start;
  }

  .deco-main :is([data-block="faq"], [data-block="contact_form"]) .kit-width--narrow .kit-heading-group.kit-text--center::before {
    --deco-sun-x: 1.2rem;
    --deco-sun-line: linear-gradient(90deg, currentColor, currentColor 40%, transparent);
    margin-inline: 0;
  }

  .deco-main [data-block="contact_form"] .kit-width--narrow > .kit-stack > .kit-stack > .kit-row.kit-justify--center {
    justify-content: flex-start;
  }

  .deco-main :is([data-block="faq"], [data-block="contact_form"]) .kit-width--narrow > .kit-stack > .kit-text--lead.kit-text--center {
    margin-inline: 0;
  }
}

/* Statistics stand in a row parted by fine gold rules, each figure in the heading face. */
@media (min-width: 40rem) {
  .deco-main [data-block="stats_counter"] .kit-grid > .kit-stack + .kit-stack {
    border-inline-start: 1px solid color-mix(in srgb, var(--accent, #c6a15b) 55%, transparent);
  }
}

/* The poster a video shows before it is played (PageMedia writes it and its plain look): here the main colour under a
   sunburst of gold, with the play button a gold plaque. */
.deco-main .pagestic-video {
  background:
    repeating-conic-gradient(from -90.6deg at 50% 100%, color-mix(in srgb, var(--accent, #c6a15b) 16%, transparent) 0 1.2deg, transparent 1.2deg 6deg),
    linear-gradient(color-mix(in srgb, var(--primary, #0f3a30) 70%, #000), var(--primary, #0f3a30));
}

.deco-main .pagestic-video__play rect {
  rx: 0;
  fill: var(--accent, #c6a15b);
}

.deco-main .pagestic-video__play path {
  fill: var(--on-accent, #1d1505);
}

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

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

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

/* The post's header, centred: the date in small spaced capitals, the title in the heading face's capitals, a diamond. */
.deco-article__header {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

.deco-article__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  color: var(--text-secondary, #4b5550);
  font-size: 0.75rem;
  letter-spacing: var(--deco-track-small);
  text-transform: uppercase;
}

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

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

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

/* The first paragraph opens with a large initial in the heading face, in the accent's readable shade. */
.deco-prose > p:first-child::first-letter,
.deco-article--post .deco-prose > p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.14em 0 0;
  color: var(--accent-ink, #76541a);
  font-family: var(--font-heading, serif);
  font-size: calc(3.6em * var(--deco-scale));
  font-weight: var(--deco-heading-weight);
  line-height: 0.82;
  text-transform: uppercase;
}

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

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

.deco-prose h2 {
  font-size: calc(clamp(1.45rem, 1.25rem + 0.9vw, 1.9rem) * var(--deco-scale));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.deco-prose h4 {
  font-size: 1.1rem;
}

.deco-prose a {
  color: var(--accent-ink, #76541a);
  text-decoration-color: var(--deco-gold);
  text-underline-offset: 0.2em;
}

/* A quotation stands centred between two fine gold lines. */
.deco-prose blockquote {
  margin-inline: 0;
  padding: 1.5rem clamp(0.5rem, 4vw, 2.5rem);
  border-block: 1px solid var(--deco-gold);
  font-family: var(--font-heading, serif);
  font-size: calc(1.3rem * var(--deco-scale));
  line-height: 1.5;
  text-align: center;
}

.deco-prose img {
  display: block;
}

.deco-prose figcaption {
  margin-top: 0.6rem;
  color: var(--text-secondary, #4b5550);
  font-size: 0.875rem;
  text-align: center;
}

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

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

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

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

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

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

.deco-divider__line {
  flex: 1 1 0;
  max-width: 22rem;
  border-top: 1px solid currentColor;
}

.deco-divider__line:first-child {
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%);
  mask: linear-gradient(90deg, transparent, #000 60%);
}

.deco-divider__line:last-child {
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent);
  mask: linear-gradient(90deg, #000 40%, transparent);
}

.deco-divider--dashed .deco-divider__line {
  border-top-style: dashed;
}

.deco-divider__diamond,
.deco-divider--dotted span {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  background: currentColor;
  transform: rotate(45deg);
}

.deco-divider--dotted span {
  width: 0.35rem;
  height: 0.35rem;
}

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

/* The footer is a band of the main colour, ruled at its top with the header's double line of metal. Everything stands
   in the middle: the name under a rising sun, its tagline, the social links, then the pages and the contact details,
   then the small print. Words are the main colour's own ink, the pair the colour contract keeps readable. */
.deco-footer {
  padding-top: 5px;
  background:
    var(--deco-metal) 0 0 / 100% 1px no-repeat,
    var(--deco-metal) 0 4px / 100% 1px no-repeat;
  background-color: var(--primary, #0f3a30);
  color: var(--on-primary, #f5ebd4);
  text-align: center;
}

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

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

.deco-footer__brand {
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.deco-footer .deco-brand {
  flex-wrap: wrap;
  justify-content: center;
}

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

.deco-footer__about .deco-brand__name--short {
  font-size: calc(clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem) * var(--deco-scale));
  letter-spacing: 0.16em;
}

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

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

/* The mega footer opens with an invitation over a sunburst. */
.deco-footer__closing {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--on-primary, #f5ebd4) 16%, transparent);
}

.deco-footer__rays {
  --deco-ray: color-mix(in srgb, var(--accent, #c6a15b) 18%, transparent);
  width: max(120%, 60rem);
}

.deco-footer__invite {
  max-width: 24ch;
  font-size: calc(clamp(1.75rem, 1.2rem + 2.4vw, 3.1rem) * var(--deco-scale));
}

.deco-footer__about {
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.deco-footer__sun {
  --deco-sun-r: 1.3rem;
  width: min(13rem, 100%);
}

.deco-footer__tagline {
  max-width: 34rem;
  margin: 0;
  font-size: 0.9375rem;
}

.deco-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--on-primary, #f5ebd4) 34%, transparent);
  color: inherit;
  transform: rotate(45deg);
  transition: border-color var(--deco-speed) ease;
}

.deco-footer__social a svg {
  transform: rotate(-45deg);
}

.deco-footer__social a:hover {
  border-color: var(--deco-gold);
}

.deco-footer__social {
  justify-content: center;
  gap: 1rem;
  padding: 0.35rem;
}

/* The columns stand in a row in the middle, parted by fine rules; on a phone they stand one under another. */
.deco-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 0;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.deco-footer__column {
  flex: 0 1 18rem;
  min-width: 0;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

@media (min-width: 40rem) {
  .deco-footer__column + .deco-footer__column {
    border-inline-start: 1px solid color-mix(in srgb, var(--on-primary, #f5ebd4) 16%, transparent);
  }
}

@media (max-width: 39.99rem) {
  .deco-footer__column {
    flex-basis: 100%;
  }
}

.deco-footer__title {
  margin: 0 0 0.9rem;
  font-size: 0.6875rem;
  font-weight: var(--deco-body-strong);
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

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

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

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

.deco-footer__links a:hover,
.deco-footer__contact a:hover,
.deco-footer__legal a:hover,
.deco-footer__inline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--deco-gold);
  text-underline-offset: 0.3em;
}

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

.deco-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--on-primary, #f5ebd4) 16%, transparent);
}

.deco-footer__copyright {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.deco-footer__legal,
.deco-footer__inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
}

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

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

@media (min-width: 64rem) {
  .deco-footer--minimal .deco-footer__line {
    justify-content: space-between;
  }
}

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

.deco-not-found {
  --deco-ray: color-mix(in srgb, var(--accent, #c6a15b) 16%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 7rem) var(--deco-gutter);
  text-align: center;
}

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

.deco-not-found__number {
  margin: 0;
  color: var(--accent-ink, #76541a);
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(4.5rem, 3rem + 7vw, 8rem) * var(--deco-scale));
  font-weight: var(--deco-heading-weight);
  letter-spacing: 0.12em;
  line-height: 1;
}

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

.deco-not-found p {
  margin: 0;
  color: var(--text-secondary, #4b5550);
}

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

.deco-form-success {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 1.5rem 0;
  text-align: center;
}

.deco-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: calc(1.6rem * var(--deco-scale));
  font-weight: var(--deco-heading-weight);
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

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

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

/* The shared bar (resilience.css) on the theme's main colour band, with its button. */
body .theme-action-bar {
  border-top: 1px solid var(--deco-gold);
  background: var(--surface, #fffcf5);
}

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

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

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