/*
 * Encore: an elegant, dramatic theme for adult dance studios, theatre and acting schools, music academies, choirs and
 * vocal coaches, art schools and performers. It feels like a night at the theatre: large poster-like headings set
 * tight, small capital labels spaced wide, thin hairlines and double rules as in a printed programme, square corners,
 * a portrait picture under a soft spotlight, a ticker line that scrolls slowly past, numbered acts, links whose
 * underline draws in, and thin square buttons that fill on hover. Dark, rich palettes come first.
 *
 * This file draws Encore's own frame (header, phone menu, footer, breadcrumbs, the 404 page, the split hero, the
 * article body and the divider) and the section headings the Theme Kit draws. Every other block comes from the Theme
 * Kit, styled by kit-theme.css. Colours come from the palette (palettes/*.css): --background, --surface, --surface-alt,
 * --primary (the curtain colour of bands and the footer), --primary-alt, --accent, --accent-ink, --on-accent,
 * --on-primary, --text-primary, --text-secondary and --border. Faces and weights come from the layout:
 * --encore-heading-weight (large headings, the lightest weight), --encore-title-weight (small titles, the heaviest),
 * --encore-heading-tracking, --encore-heading-scale and --encore-body-strong. Plain CSS, no build step. Starts at 320px.
 */

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

:root {
  --encore-ink: var(--text-primary, #f4eadf);
  --encore-gutter: clamp(1.25rem, 4vw, 3rem);
  --encore-width: 74rem;
  /* The frame (header, footer) spans the width the Theme Kit gives its widest sections, so it lines up with a hero. */
  --encore-width-wide: 90rem;
  --encore-header-height: 4.75rem;
  --encore-line: var(--border, color-mix(in srgb, var(--encore-ink) 16%, transparent));
  --encore-line-strong: color-mix(in srgb, var(--encore-ink) 34%, transparent);
  --encore-hairline: 1px solid var(--encore-line);
  --encore-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --encore-speed: 260ms;
  --encore-slow: 560ms;
  /* Small capital labels: buttons, the menu, eyebrows, footer titles, bylines. */
  --encore-label-size: 0.75rem;
  --encore-label-tracking: 0.22em;
  /* The four-pointed spark: a shape cut from the colour of the text around it. */
  --encore-spark: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

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

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

/* Whatever is scrolled into view (an anchor, a field reached with the keyboard) stops clear of the sticky header and of
   the bottom edge instead of sitting under or against them. */
html {
  scroll-padding-top: calc(var(--encore-header-height) + 1.5rem);
  scroll-padding-bottom: 1.5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #140b12);
  color: var(--text-primary, #f4eadf);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  /* Figures stand on the line (some body faces default to old-style ones), so prices and phone numbers read plainly. */
  font-variant-numeric: lining-nums;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--accent, #d4af6b);
  color: var(--on-accent, #170c12);
}

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

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

.encore-main > :where(h1, h2, h3) {
  font-family: var(--font-heading, serif);
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
}

.encore-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--accent, #d4af6b);
  background: var(--background, #140b12);
  color: var(--text-primary, #f4eadf);
  font-size: var(--encore-label-size);
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: var(--encore-label-tracking);
  text-decoration: none;
  text-transform: uppercase;
  transition: top 200ms var(--encore-ease);
}

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

.encore-ornament {
  display: inline-block;
  flex: none;
  width: 0.75em;
  height: 0.75em;
  background: currentColor;
  clip-path: var(--encore-spark);
}

/* The underline that draws in from the left on hover, under a link's text. */
.encore-nav--desktop .encore-nav__item > a > span,
.encore-topbar a,
.encore-footer__links a,
.encore-footer__contact a,
.encore-footer__legal a,
.encore-footer__inline a,
.encore-breadcrumbs a,
.encore-hero__trustpilot {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  text-decoration: none;
  transition: background-size var(--encore-slow) var(--encore-ease), color var(--encore-speed) ease;
}

.encore-nav--desktop .encore-nav__item > a:is(:hover, :focus-visible) > span,
.encore-nav__item--parent:is(:hover, :focus-within) > a > span,
.encore-topbar a:hover,
.encore-footer__links a:hover,
.encore-footer__contact a:hover,
.encore-footer__legal a:hover,
.encore-footer__inline a:hover,
.encore-breadcrumbs a:hover,
.encore-hero__trustpilot:hover {
  background-size: 100% 1px;
}

/* A section's heading (drawn by the Theme Kit, set large by kit-theme.css) closes with a double hairline, like a rule
   in a printed programme, centred when the heading is. The kit's accent follows the band, so the rule always shows. */
.kit-heading-group > .kit-heading--2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 5px;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
  border-block: 1px solid var(--kit-accent, var(--accent, #d4af6b));
}

.kit-heading-group.kit-text--center > .kit-heading--2::after {
  margin-inline: auto;
}

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

/* A square button with a thin border, its label in small spaced capitals. The main one is filled with the accent;
   on hover a fill in the text colour sweeps across it from the left. The open one fills the same way. */
.encore-button {
  --encore-fill: var(--text-primary, #f4eadf);
  --encore-fill-text: var(--background, #140b12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  max-width: 100%;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--accent, #d4af6b);
  border-radius: 0;
  background: linear-gradient(var(--encore-fill), var(--encore-fill)) no-repeat 0 0 / 0 100%, var(--accent, #d4af6b);
  color: var(--on-accent, #170c12);
  font-family: var(--font-body, sans-serif);
  font-size: 0.78rem;
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: 0.2em;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  transition: background-size var(--encore-slow) var(--encore-ease), color var(--encore-speed) ease, border-color var(--encore-speed) ease;
}

.encore-button:hover {
  border-color: var(--encore-fill);
  background-size: 100% 100%, auto;
  color: var(--encore-fill-text);
}

.encore-button--outline {
  border-color: var(--encore-line-strong);
  background: linear-gradient(var(--encore-fill), var(--encore-fill)) no-repeat 0 0 / 0 100%, transparent;
  color: var(--text-primary, #f4eadf);
}

/* On the curtain colour (the footer): open, in the curtain's text colour, filling with it on hover. */
.encore-button--light {
  --encore-fill: var(--on-primary, #f7ecdd);
  --encore-fill-text: var(--primary, #5e1a35);
  border-color: var(--on-primary, #f7ecdd);
  background: linear-gradient(var(--encore-fill), var(--encore-fill)) no-repeat 0 0 / 0 100%, transparent;
  color: var(--on-primary, #f7ecdd);
}

.encore-button--small {
  min-height: 2.75rem;
  padding: 0.55rem 1.25rem;
  font-size: 0.72rem;
}

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

/* ------------------------------------------------------------------ Announcement and contact line */

.encore-announcement {
  background: var(--primary, #5e1a35);
  color: var(--on-primary, #f7ecdd);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

/* On the curtain colour (the announcement and the footer) the focus ring takes the curtain's text colour. */
.encore-announcement :focus-visible,
.encore-footer :focus-visible {
  outline-color: var(--on-primary, #f7ecdd);
}

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

.encore-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  max-width: calc(var(--encore-width-wide) + 2 * var(--encore-gutter));
  margin-inline: auto;
  padding: 0.6rem var(--encore-gutter);
  text-align: center;
}

.encore-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
}

.encore-announcement .encore-ornament {
  width: 0.6rem;
  height: 0.6rem;
  opacity: 0.8;
}

.encore-announcement a {
  font-size: var(--encore-label-size);
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: var(--encore-label-tracking);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-transform: uppercase;
  text-underline-offset: 0.4em;
}

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

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

.encore-topbar {
  border-bottom: var(--encore-hairline);
  color: var(--text-secondary, #c1b0b6);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.encore-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  max-width: calc(var(--encore-width-wide) + 2 * var(--encore-gutter));
  margin-inline: auto;
  padding: 0.6rem var(--encore-gutter);
}

.encore-topbar__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
}

.encore-topbar a:hover {
  color: var(--text-primary, #f4eadf);
}

.encore-topbar__social,
.encore-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.encore-topbar__social a {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
}

.encore-topbar__social svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

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

/* simple and topbar: one slim bar over a hairline that stays at the top. centered: a masthead, the name large over a
   menu that runs between two rules, the lower one doubled. Once the page scrolls the bar turns a little translucent. */
.encore-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: var(--encore-hairline);
  transition: border-color var(--encore-speed) ease;
}

/* The bar's colour sits on a layer of its own, so the blur never becomes the frame the phone menu is placed in. */
.encore-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--background, #140b12);
  transition: background-color var(--encore-speed) ease;
}

.encore-header.is-scrolled {
  border-bottom-color: var(--encore-line-strong);
}

.encore-header.is-scrolled::before {
  background: color-mix(in srgb, var(--background, #140b12) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.encore-header__bar {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  min-height: var(--encore-header-height);
  max-width: calc(var(--encore-width-wide) + 2 * var(--encore-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--encore-gutter);
}

.encore-header--centered {
  border-bottom: 0;
}

.encore-header__bar--centered {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 6rem;
}

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

.encore-header__bar--centered .encore-header__brand {
  justify-self: center;
}

.encore-header__bar--centered .encore-brand__name {
  font-size: calc(var(--encore-heading-scale, 1) * clamp(1.75rem, 1.2rem + 1.4vw, 2.6rem));
}

/* The masthead's menu runs between a hairline and a double rule, like the head of a printed programme. */
.encore-header__rail {
  max-width: calc(var(--encore-width-wide) + 2 * var(--encore-gutter));
  margin-inline: auto;
  padding-inline: var(--encore-gutter);
}

.encore-header__rail .encore-nav--desktop {
  justify-content: center;
  padding-block: 0.35rem;
  border-top: var(--encore-hairline);
  border-bottom: 3px double var(--encore-line-strong);
}

.encore-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.1rem;
  min-width: 0;
}

.encore-header__phone {
  color: var(--text-secondary, #c1b0b6);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--encore-speed) ease;
}

.encore-header__phone:hover {
  color: var(--text-primary, #f4eadf);
}

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

/* The wordmark: the website's name in the display face, as it is written. */
.encore-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: var(--text-primary, #f4eadf);
}

.encore-brand__name {
  display: block;
  min-width: 0;
  max-width: min(22rem, 58vw);
  overflow: hidden;
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * 1.6rem);
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.encore-brand--light {
  color: var(--on-primary, #f7ecdd);
}

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

.encore-nav--desktop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.4rem;
  min-width: 0;
}

.encore-nav__item {
  position: relative;
}

/* Each link is in small spaced capitals; its underline draws in on hover. */
.encore-nav--desktop .encore-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.8rem;
  color: var(--text-primary, #f4eadf);
  font-size: var(--encore-label-size);
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
}

.encore-nav--desktop .encore-nav__item > a > span {
  padding-block: 0.2rem;
  background-image: linear-gradient(var(--accent, #d4af6b), var(--accent, #d4af6b));
}

.encore-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: square;
  transition: transform var(--encore-speed) var(--encore-ease);
}

.encore-nav__item--parent:is(:hover, :focus-within) .encore-nav__caret {
  transform: rotate(180deg);
}

/* A parent's pages hang under it. The padding on top belongs to the list, so the pointer never crosses a gap. */
.encore-nav__children {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  padding-top: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.4rem);
  transition: opacity var(--encore-speed) ease, transform var(--encore-speed) var(--encore-ease), visibility var(--encore-speed);
}

.encore-nav__item--parent:is(:hover, :focus-within) > .encore-nav__children {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.encore-nav__panel {
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0;
  border: var(--encore-hairline);
  border-top: 2px solid var(--accent, #d4af6b);
  background: var(--surface, #1d121b);
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.5);
}

.encore-nav__panel a {
  display: block;
  padding: 0.6rem 1.35rem;
  color: var(--text-primary, #f4eadf);
  font-size: 0.95rem;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color var(--encore-speed) ease, color var(--encore-speed) ease, padding var(--encore-speed) var(--encore-ease);
}

.encore-nav__panel a:is(:hover, :focus-visible) {
  padding-inline-start: 1.65rem;
  background: var(--surface-alt, #291825);
  color: var(--text-primary, #f4eadf);
}

/* The menu button: a thin square with two hairlines that cross when the menu is open. */
.encore-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--encore-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary, #f4eadf);
  cursor: pointer;
  transition: border-color var(--encore-speed) ease, color var(--encore-speed) ease;
}

@media (hover: hover) {
  .encore-menu-button:hover {
    border-color: var(--accent, #d4af6b);
  }
}

.encore-menu-button[aria-expanded="true"] {
  border-color: var(--accent, #d4af6b);
}

.encore-menu-button__lines {
  position: relative;
  display: block;
  width: 1.3rem;
  height: 0.45rem;
}

.encore-menu-button__lines i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--encore-speed) var(--encore-ease), top var(--encore-speed) var(--encore-ease);
}

.encore-menu-button__lines i:first-child {
  top: 0;
}

.encore-menu-button__lines i:last-child {
  top: 100%;
}

.encore-menu-button[aria-expanded="true"] .encore-menu-button__lines i:first-child {
  top: 50%;
  transform: rotate(45deg);
}

.encore-menu-button[aria-expanded="true"] .encore-menu-button__lines i:last-child {
  top: 50%;
  transform: rotate(-45deg);
}

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

/* A curtain that drops from under the header across the whole window. The pages are set large in the display face,
   each numbered like an act of the programme. */
.encore-drawer {
  position: fixed;
  top: var(--encore-drawer-top, var(--encore-header-height));
  right: 0;
  left: 0;
  z-index: 49;
  height: calc(100dvh - var(--encore-drawer-top, var(--encore-header-height)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: var(--encore-hairline);
  background:
    radial-gradient(ellipse 70% 40% at 50% 0, color-mix(in srgb, var(--accent, #d4af6b) 14%, transparent), transparent),
    var(--background, #140b12);
  clip-path: inset(0);
  transition: clip-path var(--encore-slow) var(--encore-ease), opacity var(--encore-speed) ease;
}

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

@starting-style {
  .encore-drawer:not([hidden]) {
    clip-path: inset(0 0 100% 0);
  }
}

.encore-drawer__inner {
  display: flex;
  flex-direction: column;
  max-width: 40rem;
  margin-inline: auto;
  padding: 1.25rem var(--encore-gutter) 2.5rem;
}

.encore-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0 1.25rem;
}

.encore-nav--drawer {
  display: block;
  counter-reset: encore-act;
}

.encore-drawer__item {
  counter-increment: encore-act;
  border-bottom: var(--encore-hairline);
}

.encore-drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  color: var(--text-primary, #f4eadf);
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * clamp(1.65rem, 7vw, 2.4rem));
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1.1;
  text-decoration: none;
  transition: color var(--encore-speed) ease, transform var(--encore-speed) var(--encore-ease);
}

.encore-drawer__link::before {
  content: counter(encore-act, decimal-leading-zero);
  flex: none;
  min-width: 1.75rem;
  color: var(--accent-ink, #ddbb7c);
  font-family: var(--font-body, sans-serif);
  font-size: 0.72rem;
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: 0.16em;
}

.encore-drawer__link:hover {
  color: var(--accent-ink, #ddbb7c);
  transform: translateX(4px);
}

.encore-drawer__children {
  display: grid;
  gap: 0.1rem;
  padding: 0 0 1rem 2.75rem;
}

.encore-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #c1b0b6);
  font-size: 1rem;
  text-decoration: none;
}

.encore-drawer__children a:hover {
  color: var(--text-primary, #f4eadf);
}

.encore-drawer__footer {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 3px double var(--encore-line-strong);
}

.encore-drawer__contact {
  color: var(--text-primary, #f4eadf);
  font-size: 1rem;
  text-decoration: none;
}

.encore-drawer__footer .encore-button {
  margin-top: 1rem;
}

html.encore-menu-open {
  overflow: hidden;
}

/* Below the desktop width the menu moves into the phone menu. */
@media (max-width: 1023.98px) {
  :root {
    --encore-header-height: 4.25rem;
  }

  .encore-nav--desktop,
  .encore-header__rail,
  .encore-header__cta,
  .encore-header__phone,
  .encore-header__slot {
    display: none;
  }

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

  .encore-header__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
  }

  .encore-header__bar--centered {
    grid-template-columns: 2.9rem minmax(0, 1fr) 2.9rem;
    min-height: 4.75rem;
  }

  .encore-header--centered {
    border-bottom: var(--encore-hairline);
  }

  .encore-header__bar--centered .encore-header__actions {
    gap: 0;
  }

  .encore-header__bar--centered .encore-brand__name {
    font-size: calc(var(--encore-heading-scale, 1) * 1.7rem);
  }
}

@media (min-width: 1024px) {
  .encore-drawer:not(#site-header.theme-nav-compact .encore-drawer) {
    display: none;
  }
}

@media (max-width: 1279.98px) {
  .encore-header__phone {
    display: none;
  }
}

/* A crowded desktop menu moves into the phone menu (the shared resilience script marks the header). */
#site-header.theme-nav-compact .encore-header__rail,
#site-header.theme-nav-compact .encore-header__cta,
#site-header.theme-nav-compact .encore-header__phone {
  display: none;
}

#site-header.theme-nav-compact .encore-header__bar:not(.encore-header__bar--centered) {
  grid-template-columns: minmax(0, 1fr) auto;
}

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

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

.encore-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #c1b0b6);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  list-style: none;
  text-transform: uppercase;
}

.encore-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.encore-breadcrumbs li + li::before {
  content: "";
  width: 1rem;
  height: 1px;
  background: var(--accent, #d4af6b);
}

.encore-breadcrumbs a:hover {
  color: var(--text-primary, #f4eadf);
}

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

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

/* The curtain: a band in the primary colour that opens with a double rule. Columns are headed in small capitals, links draw
   their underline in, and the website's name takes its bow along the bottom in large, open display letters. */
.encore-footer {
  position: relative;
  border-top: 3px double color-mix(in srgb, var(--on-primary, #f7ecdd) 40%, var(--primary, #5e1a35));
  background: var(--primary, #5e1a35);
  color: var(--on-primary, #f7ecdd);
  --encore-footer-line: color-mix(in srgb, var(--on-primary, #f7ecdd) 24%, transparent);
}

.encore-footer__inner {
  max-width: calc(var(--encore-width-wide) + 2 * var(--encore-gutter));
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--encore-gutter) 1.75rem;
}

.encore-footer--minimal .encore-footer__inner {
  padding-block: 2.25rem;
}

.encore-footer .encore-brand {
  color: inherit;
}

/* A recoloured logo takes the curtain's text colour. */
.encore-footer .logo-mask {
  background-color: var(--on-primary, #f7ecdd) !important;
}

.encore-footer__brand {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

.encore-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--encore-footer-line);
}

.encore-footer__closing h2 {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * clamp(2.4rem, 1.4rem + 3.6vw, 4.75rem));
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1;
  overflow-wrap: break-word;
}

.encore-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2.5rem 3rem;
}

.encore-footer__about {
  display: grid;
  align-content: start;
  gap: 1.1rem;
}

.encore-footer__about p {
  max-width: 24rem;
  margin: 0;
  color: color-mix(in srgb, var(--on-primary, #f7ecdd) 82%, transparent);
  font-size: 0.97rem;
}

.encore-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--encore-footer-line);
  color: var(--on-primary, #f7ecdd);
  transition: background-color var(--encore-speed) ease, color var(--encore-speed) ease, border-color var(--encore-speed) ease;
}

.encore-footer__social a:hover {
  border-color: var(--on-primary, #f7ecdd);
  background: var(--on-primary, #f7ecdd);
  color: var(--primary, #5e1a35);
}

.encore-footer__social svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

.encore-footer__title {
  margin: 0 0 1.1rem;
  color: color-mix(in srgb, var(--on-primary, #f7ecdd) 78%, transparent);
  font-size: 0.72rem;
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: var(--encore-label-tracking);
  line-height: 1.3;
  text-transform: uppercase;
}

.encore-footer__links {
  display: grid;
  gap: 0.55rem;
}

.encore-footer__links a,
.encore-footer__contact a {
  width: fit-content;
  color: inherit;
  font-size: 0.97rem;
}

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

.encore-footer__contact p:not(.encore-footer__title) {
  margin: 0 0 0.35rem;
  font-size: 0.97rem;
}

.encore-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--encore-footer-line);
}

.encore-footer__copyright {
  margin: 0;
  color: color-mix(in srgb, var(--on-primary, #f7ecdd) 82%, transparent);
  font-size: 0.85rem;
}

.encore-footer__legal,
.encore-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.encore-footer__legal a {
  color: inherit;
  font-size: 0.85rem;
}

.encore-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
}

.encore-footer__inline a {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.encore-footer--minimal .encore-footer__legal {
  margin-top: 1rem;
}

/* The curtain call: the name, very large in the display face, in open outlined letters along the bottom. Its size
   follows its length (the layout puts it in one of five classes), so it fills the width on one line. */
.encore-footer__wordmark {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--on-primary, #f7ecdd) 90%, transparent);
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * min(13rem, 19vw));
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}

@supports (-webkit-text-stroke: 1px black) {
  .encore-footer__wordmark {
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--on-primary, #f7ecdd) 80%, transparent);
  }
}

.encore-footer__wordmark--m { font-size: calc(var(--encore-heading-scale, 1) * min(11rem, 13.5vw)); }
.encore-footer__wordmark--l { font-size: calc(var(--encore-heading-scale, 1) * min(8.5rem, 9vw)); }
.encore-footer__wordmark--xl { font-size: calc(var(--encore-heading-scale, 1) * min(6rem, 6.2vw)); }
.encore-footer__wordmark--xxl { font-size: calc(var(--encore-heading-scale, 1) * min(4.4rem, 4.6vw)); }

/* ------------------------------------------------------------------ 404 */

.encore-not-found {
  position: relative;
  isolation: isolate;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(4.5rem, 11vw, 8rem) var(--encore-gutter);
  text-align: center;
}

/* A soft spotlight on an empty stage. */
.encore-not-found__spotlight {
  position: absolute;
  inset: 0 0 30%;
  z-index: -1;
  background: radial-gradient(ellipse 60% 60% at 50% 40%, color-mix(in srgb, var(--accent, #d4af6b) 22%, transparent), transparent 70%);
  pointer-events: none;
}

/* The number in large, open display letters. */
.encore-not-found__number {
  margin: 0;
  color: var(--accent-ink, #ddbb7c);
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * clamp(7rem, 24vw, 13rem));
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1;
}

@supports (-webkit-text-stroke: 1px black) {
  .encore-not-found__number {
    color: transparent;
    -webkit-text-stroke: 1px var(--accent-ink, #ddbb7c);
  }
}

/* A double hairline under a heading. */
.encore-rule {
  display: block;
  width: 4.5rem;
  height: 5px;
  margin: 1.75rem auto;
  border-block: 1px solid var(--accent, #d4af6b);
}

.encore-not-found h1 {
  margin: 0 0 1rem;
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * clamp(2.1rem, 4.6vw, 3.25rem));
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1.08;
}

.encore-not-found p:not(.encore-not-found__number) {
  margin: 0 auto 2.25rem;
  max-width: 32rem;
  color: var(--text-secondary, #c1b0b6);
}

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

.encore-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  max-width: calc(var(--encore-width) + 2 * var(--encore-gutter));
  min-height: clamp(3.5rem, 8vw, 6rem);
  margin-inline: auto;
  padding-inline: var(--encore-gutter);
  color: var(--accent, #d4af6b);
}

.encore-divider__rule {
  display: block;
  width: min(11rem, 30vw);
  height: 5px;
  border-block: 1px solid var(--accent, #d4af6b);
}

.encore-divider .encore-ornament {
  width: 0.85rem;
  height: 0.85rem;
}

.encore-divider--dotted {
  gap: 1.5rem;
}

/* A fine perforated line, like the tear-off edge of a ticket. */
.encore-divider__perforation {
  display: block;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--encore-line-strong) 0 6px, transparent 6px 12px);
}

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

/* A poster: the billing line and a large heading beside a picture in a tall portrait frame under a spotlight, then a
   ticker line along the bottom. Without a picture, words alone, centred under the spotlight. */
.encore-hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: clamp(3rem, 7vw, 6rem) var(--encore-gutter) clamp(3.5rem, 7vw, 6rem);
}

.encore-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: var(--encore-width-wide);
  margin-inline: auto;
}

.encore-hero--words .encore-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 60rem;
  text-align: center;
}

/* The spotlight over the words: a soft pool of the accent colour behind the heading. */
.encore-hero--words::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 46% 58% at 50% 42%, color-mix(in srgb, var(--accent, #d4af6b) 18%, transparent), transparent 72%);
  pointer-events: none;
}

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

.encore-hero--words .encore-hero__copy {
  justify-items: center;
}

/* The billing line: the website's name in small spaced capitals after a hairline (between two when centred). */
.encore-hero__billing {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  margin: 0;
  color: var(--accent-ink, #ddbb7c);
  font-size: var(--encore-label-size);
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: 0.3em;
  line-height: 1.4;
  text-transform: uppercase;
}

.encore-hero__billing::before,
.encore-hero--words .encore-hero__billing::after {
  content: "";
  flex: none;
  width: 2.75rem;
  height: 1px;
  background: currentColor;
}

.encore-hero__billing span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.encore-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * clamp(2.8rem, 1.3rem + 5.6vw, 7rem));
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 0.98;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

.encore-hero__accent {
  color: var(--accent-ink, #ddbb7c);
}

.encore-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #c1b0b6);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.7;
}

/* Selling points: one programme line of small capitals between two hairlines. */
.encore-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin: 0;
  padding: 0.95rem 0;
  border-block: var(--encore-hairline);
  list-style: none;
}

.encore-hero--words .encore-hero__points {
  justify-content: center;
}

.encore-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--encore-label-size);
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
}

.encore-hero__points .encore-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--accent-ink, #ddbb7c);
  stroke-width: 1.5;
}

.encore-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.encore-hero--words .encore-hero__actions {
  justify-content: center;
}

.encore-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  color: var(--text-secondary, #c1b0b6);
  font-size: 0.88rem;
}

.encore-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.encore-stars {
  display: inline-flex;
  gap: 0.15rem;
}

.encore-stars svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: var(--accent-ink, #ddbb7c);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.encore-stars svg.is-full {
  fill: var(--accent-ink, #ddbb7c);
}

.encore-hero__trustpilot {
  color: var(--text-primary, #f4eadf);
  font-size: var(--encore-label-size);
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background-size: 100% 1px;
}

.encore-hero__trustpilot:hover {
  color: var(--accent-ink, #ddbb7c);
}

.encore-hero__media {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100%, 30rem);
  margin: 0;
  min-width: 0;
}

/* The spotlight: a soft glow of the accent colour behind the frame, brightest a little above its middle. */
.encore-hero__spotlight {
  position: absolute;
  inset: -16% -34% -10%;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 44%, color-mix(in srgb, var(--accent, #d4af6b) 34%, transparent), color-mix(in srgb, var(--accent, #d4af6b) 10%, transparent) 55%, transparent 74%);
  pointer-events: none;
}

/* The frame: a hairline in the accent colour around the picture, with a narrow margin, and a second, light hairline
   set inside the picture itself. */
.encore-hero__frame {
  position: relative;
  display: block;
  padding: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--accent, #d4af6b) 70%, transparent);
}

.encore-hero__frame::after {
  content: "";
  position: absolute;
  inset: 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.62);
  pointer-events: none;
}

.encore-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  max-height: min(80vh, 46rem);
  background: var(--surface-alt, #291825);
  object-fit: cover;
}

/* The ticker: the selling points (or the name) in the display face, scrolling slowly past between two hairlines,
   every other one in open outlined letters. Shown only when the visitor allows motion, and still under the pointer. */
.encore-ticker {
  display: none;
}

.encore-ticker__track {
  display: flex;
  width: max-content;
}

.encore-ticker__run {
  display: flex;
  flex: none;
  align-items: center;
}

.encore-ticker__item {
  padding-inline: 1.75rem;
  color: var(--text-primary, #f4eadf);
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * clamp(1.5rem, 1rem + 1.6vw, 2.4rem));
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1.2;
  white-space: nowrap;
}

@supports (-webkit-text-stroke: 1px black) {
  .encore-ticker__item:nth-child(4n + 3) {
    color: transparent;
    -webkit-text-stroke: 1px var(--text-primary, #f4eadf);
  }
}

.encore-ticker .encore-ornament {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--accent, #d4af6b);
}

@media (prefers-reduced-motion: no-preference) {
  .encore-hero--ticker {
    padding-bottom: 0;
  }

  .encore-ticker {
    display: block;
    margin: clamp(3rem, 6vw, 5rem) calc(-1 * var(--encore-gutter)) 0;
    padding-block: 1.1rem;
    overflow: hidden;
    border-block: var(--encore-hairline);
  }

  .encore-ticker__track {
    animation: encore-ticker 70s linear infinite;
  }

  .encore-ticker:hover .encore-ticker__track {
    animation-play-state: paused;
  }
}

@keyframes encore-ticker {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 860px) {
  .encore-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .encore-hero--split .encore-hero__media {
    order: -1;
    width: min(82%, 22rem);
  }

  .encore-hero__image {
    aspect-ratio: 4 / 5;
  }

  .encore-hero__frame::after {
    inset: 1.15rem;
  }
}

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

.encore-article {
  padding: clamp(3.5rem, 7vw, 6rem) var(--encore-gutter);
}

.encore-article--post {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

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

.encore-article__header {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

/* The date and author in small spaced capitals, like the credits of a programme note. */
.encore-article__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  margin: 0 0 1.5rem;
  color: var(--accent-ink, #ddbb7c);
  font-size: var(--encore-label-size);
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: var(--encore-label-tracking);
  text-transform: uppercase;
}

.encore-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * clamp(2.5rem, 1.4rem + 3.8vw, 4.6rem));
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1.02;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.encore-article__header .encore-rule {
  margin: 2rem auto 0;
}

.encore-prose {
  color: var(--text-primary, #f4eadf);
  font-size: 1.0625rem;
  line-height: 1.85;
}

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

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

/* A post opens with a large initial in the display face. */
.encore-article--post .encore-prose > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.14em 0 0;
  color: var(--accent-ink, #ddbb7c);
  font-family: var(--font-heading, serif);
  font-size: 4.1em;
  font-weight: var(--encore-heading-weight, 500);
  line-height: 0.8;
}

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

.encore-prose :where(h2, h3, h4) {
  margin: 2em 0 0.6em;
  font-family: var(--font-heading, serif);
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1.12;
}

.encore-prose h2 {
  font-size: calc(var(--encore-heading-scale, 1) * clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem));
}

.encore-prose h3 {
  font-size: calc(var(--encore-heading-scale, 1) * clamp(1.45rem, 1.25rem + 0.7vw, 1.8rem));
  font-weight: var(--encore-title-weight, 600);
}

.encore-prose h4 {
  font-size: 1.25rem;
  font-weight: var(--encore-title-weight, 600);
}

.encore-prose a {
  color: var(--accent-ink, #ddbb7c);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-underline-offset var(--encore-speed) var(--encore-ease);
}

.encore-prose a:hover {
  text-underline-offset: 0.4em;
}

.encore-prose :where(strong, b) {
  font-weight: var(--encore-body-strong, 600);
}

.encore-prose :where(ul, ol) {
  padding-left: 1.25em;
}

.encore-prose li + li {
  margin-top: 0.4em;
}

.encore-prose li::marker {
  color: var(--accent-ink, #ddbb7c);
}

/* A quote is a pull quote in the display face between two hairlines. */
.encore-prose blockquote {
  margin-inline: 0;
  margin-block: 2.25em;
  padding: 1.6rem 0;
  border-block: var(--encore-hairline);
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * 1.55em);
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1.3;
  text-align: center;
}

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

.encore-prose img {
  display: block;
  max-width: 100%;
  height: auto;
}

.encore-prose figcaption {
  margin-top: 0.75rem;
  color: var(--text-secondary, #c1b0b6);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-align: center;
}

/* A rule is a short double hairline. */
.encore-prose hr {
  width: 4.5rem;
  height: 5px;
  margin: 3em auto;
  border: 0;
  border-block: 1px solid var(--accent, #d4af6b);
}

.encore-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.encore-prose :where(th, td) {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: var(--encore-hairline);
  text-align: left;
  vertical-align: top;
}

.encore-prose th {
  color: var(--text-secondary, #c1b0b6);
  font-size: 0.72rem;
  font-weight: var(--encore-body-strong, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.encore-prose :where(code, pre) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.encore-prose pre {
  overflow-x: auto;
  padding: 1.25rem;
  border: var(--encore-hairline);
  background: var(--surface, #1d121b);
}

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

.encore-form-success {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  padding: 2rem 0;
}

.encore-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: calc(var(--encore-heading-scale, 1) * 2.1rem);
  font-weight: var(--encore-heading-weight, 500);
  letter-spacing: var(--encore-heading-tracking, -0.025em);
  line-height: 1.08;
}

.encore-form-success p {
  margin: 0;
  color: var(--kit-muted, var(--text-secondary, #c1b0b6));
}

.encore-form-success .encore-rule {
  margin: 0 0 0.5rem;
}

/* ------------------------------------------------------------------ Without JavaScript, and calm motion */

@media (scripting: none) {
  .encore-menu-button {
    display: none !important;
  }

  .encore-drawer[hidden] {
    display: block;
    position: static;
    height: auto;
    max-height: none;
    border-top: var(--encore-hairline);
    background: var(--background, #140b12);
  }
}

/* Without JavaScript the phone menu is open under the bar, so the header scrolls away with the page. */
@media (scripting: none) and (max-width: 1023.98px) {
  .encore-header {
    position: relative;
  }
}

@media (scripting: none) and (min-width: 1024px) {
  .encore-drawer[hidden] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  .encore-ticker {
    display: none !important;
  }

  .encore-drawer__link:hover {
    transform: none;
  }
}