/* ==========================================================================
   Escorts Near Me : components
   Order: base > canvas > hero > grid > card > single > taxonomy > bits
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body.enm,
body {
  background: var(--enm-canvas);
  color: var(--enm-ink);
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-base);
  line-height: var(--enm-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.enm h1, .enm h2, .enm h3,
.enm-display {
  font-family: var(--enm-font-display);
  font-weight: 500;
  line-height: var(--enm-lh-tight);
  letter-spacing: -0.005em;
  color: var(--enm-ink-strong);
}

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

.enm a:focus-visible,
.enm button:focus-visible,
.enm [tabindex]:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: 3px;
  border-radius: var(--enm-r-xs);
}

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

/* Small caps eyebrow. Used above section headings and on card meta. */
.enm-eyebrow {
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-gold-deep);
  margin: 0 0 var(--enm-s-3);
}

.enm-lede {
  font-size: var(--enm-fs-md);
  line-height: var(--enm-lh-body);
  color: var(--enm-ink-muted);
  max-width: var(--enm-wrap-text);
}

/* --------------------------------------------------------------------------
   2. Canvas : the page shell every template sits inside
   -------------------------------------------------------------------------- */

.enm-canvas {
  background: var(--enm-canvas);

  /* Not a vh unit. iOS retracks the viewport as Safari's toolbar collapses,
     so a vh based min-height changes the page height mid scroll and the whole
     document visibly shudders as you move up and down. */
  min-height: 24rem;
}

.enm-canvas--warm { background: var(--enm-canvas-warm); }

.enm-wrap {
  width: 100%;
  max-width: var(--enm-wrap);
  margin-inline: auto;
  padding-inline: var(--enm-gutter);
}

.enm-wrap--wide { max-width: var(--enm-wrap-wide); }
.enm-wrap--text { max-width: var(--enm-wrap-text); }

/* A hairline rule that stops short of the gutters, used between bands. */
.enm-rule {
  height: 1px;
  background: var(--enm-line);
  border: 0;
  margin-block: var(--enm-s-7);
}

.enm-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--enm-s-5);
  margin-bottom: var(--enm-s-6);
  flex-wrap: wrap;
}

.enm-section-head h2 {
  font-size: var(--enm-fs-2xl);
  margin: 0;
}

.enm-section-head p {
  margin: var(--enm-s-2) 0 0;
  color: var(--enm-ink-soft);
  font-size: var(--enm-fs-sm);
}

.enm-section-head__link {
  font-size: var(--enm-fs-sm);
  font-weight: 600;
  letter-spacing: var(--enm-track-wide);
  color: var(--enm-gold-deep);
  border-bottom: 1px solid var(--enm-gold-veil);
  padding-bottom: 2px;
  transition: border-color var(--enm-dur) var(--enm-ease);
  white-space: nowrap;
}
.enm-section-head__link:hover { border-bottom-color: var(--enm-gold); }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.enm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--enm-s-2);
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-sm);
  font-weight: 600;
  letter-spacing: var(--enm-track-wide);
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border-radius: var(--enm-r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--enm-dur) var(--enm-ease),
              color var(--enm-dur) var(--enm-ease),
              border-color var(--enm-dur) var(--enm-ease),
              transform var(--enm-dur-fast) var(--enm-ease),
              box-shadow var(--enm-dur) var(--enm-ease);
}

.enm-btn:active { transform: translateY(1px); }

.enm-btn--primary {
  background: var(--enm-ink-strong);
  color: var(--enm-ink-invert);
}
.enm-btn--primary:hover {
  background: var(--enm-gold-deep);
  box-shadow: var(--enm-e-2);
}

.enm-btn--gold {
  background: var(--enm-gold);
  color: #fff;
}
.enm-btn--gold:hover { background: var(--enm-gold-deep); box-shadow: var(--enm-e-2); }

.enm-btn--ghost {
  background: transparent;
  color: var(--enm-ink);
  border-color: var(--enm-line-strong);
}
.enm-btn--ghost:hover {
  border-color: var(--enm-ink);
  background: var(--enm-surface-sunk);
}

.enm-btn--block { width: 100%; }
.enm-btn--sm { padding: 0.625rem 1.125rem; font-size: var(--enm-fs-xs); }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.enm-hero {
  position: relative;
  overflow: hidden;
  background: var(--enm-canvas);
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
  text-align: center;
  isolation: isolate;
}

/* Two soft washes behind the headline. Low contrast on purpose, but strong
   enough that the frosted panels lower down have something real to blur.
   Frosted glass over flat white just looks like flat white. */
.enm-hero::before {
  content: "";
  position: absolute;
  inset: -35% 50% auto;
  width: 130%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 38% 42%,
      rgba(176, 137, 79, 0.20) 0%,
      rgba(176, 137, 79, 0.07) 38%,
      transparent 64%),
    radial-gradient(circle at 68% 58%,
      rgba(148, 132, 168, 0.14) 0%,
      rgba(148, 132, 168, 0.05) 40%,
      transparent 66%);
  z-index: -2;
  pointer-events: none;
}

/* A warm band low in the hero, sitting directly behind the trust panels. */
.enm-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -10% 0;
  height: 46%;
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%,
      rgba(176, 137, 79, 0.13) 0%,
      rgba(176, 137, 79, 0.04) 45%,
      transparent 72%);
  z-index: -2;
  pointer-events: none;
}

.enm-hero__inner {
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: var(--enm-gutter);
}

.enm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--enm-s-2);
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-gold-deep);
  background: var(--enm-gold-tint);
  border: 1px solid var(--enm-gold-veil);
  border-radius: var(--enm-r-pill);
  padding: 0.5rem 1rem;
  margin-bottom: var(--enm-s-5);
}

.enm-hero__title {
  font-family: var(--enm-font-display);
  font-size: clamp(2.25rem, 6.2vw, var(--enm-fs-4xl));
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--enm-ink-strong);
  margin: 0 0 var(--enm-s-5);
  text-wrap: balance;
}

.enm-hero__title em {
  font-style: italic;
  color: var(--enm-gold-deep);
}

.enm-hero__lede {
  font-size: clamp(1rem, 2.2vw, var(--enm-fs-md));
  line-height: 1.7;
  color: var(--enm-ink-muted);
  max-width: 44rem;
  margin: 0 auto var(--enm-s-6);
  text-wrap: pretty;
}

.enm-hero__actions {
  display: flex;
  gap: var(--enm-s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--enm-s-7);
}

/* Trust row : four frosted panels, two up on phones and four across from
   tablet. Each panel is its own pane of glass rather than one wide bar, so
   nothing is ever left orphaned on a second line. */
.enm-hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 44rem;
  margin-inline: auto;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 680px) {
  .enm-hero__trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
  }
}

.enm-hero__trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  margin: 0;
  padding: 0.875rem 0.625rem 0.8125rem;
  text-align: center;

  border-radius: var(--enm-r);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);

  /* The frost. The hero paints two soft washes behind this, which is what
     the blur actually has to work with on an otherwise white page. */
  backdrop-filter: blur(16px) saturate(165%);
  -webkit-backdrop-filter: blur(16px) saturate(165%);

  box-shadow:
    0 1px 2px rgba(23, 20, 15, 0.04),
    0 10px 28px rgba(23, 20, 15, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);

  font-size: var(--enm-fs-2xs);
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-soft);
  line-height: 1.3;
  transition: transform var(--enm-dur) var(--enm-ease-out),
              box-shadow var(--enm-dur) var(--enm-ease);
}

@media (hover: hover) {
  .enm-hero__trust-item:hover {
    transform: translateY(-2px);
    box-shadow:
      0 2px 4px rgba(23, 20, 15, 0.05),
      0 16px 36px rgba(23, 20, 15, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

.enm-hero__trust-num {
  font-family: var(--enm-font-display);
  font-size: clamp(1.375rem, 4.2vw, 1.875rem);
  font-weight: 600;
  color: var(--enm-ink-strong);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Compact hero used on taxonomy and archive pages. */
.enm-pagehead {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--enm-s-6);
  border-bottom: 1px solid var(--enm-line);
  background: var(--enm-canvas);
}

.enm-pagehead__title {
  font-family: var(--enm-font-display);
  font-size: clamp(1.875rem, 4.6vw, var(--enm-fs-3xl));
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 var(--enm-s-4);
  color: var(--enm-ink-strong);
  text-wrap: balance;
}

.enm-pagehead__meta {
  display: flex;
  align-items: center;
  gap: var(--enm-s-3);
  flex-wrap: wrap;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
}

.enm-pagehead__count {
  font-weight: 600;
  color: var(--enm-ink);
}

/* Breadcrumb */
.enm-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--enm-s-2);
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-faint);
  margin-bottom: var(--enm-s-4);
  letter-spacing: var(--enm-track-wide);
}
.enm-crumbs a { color: var(--enm-ink-soft); }
.enm-crumbs a:hover { color: var(--enm-gold-deep); }
.enm-crumbs__sep { opacity: 0.5; }

/* --------------------------------------------------------------------------
   5. Grid : two up on phones, five up on desktop
   -------------------------------------------------------------------------- */

.enm-grid {
  display: grid;
  grid-template-columns: repeat(var(--enm-grid-cols), minmax(0, 1fr));
  gap: var(--enm-grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Escape hatches for bands that want a different density. */
.enm-grid--3 { --enm-grid-cols: 3; }
.enm-grid--4 { --enm-grid-cols: 4; }
@media (max-width: 599px) {
  .enm-grid--3, .enm-grid--4 { --enm-grid-cols: 2; }
}

.enm-grid > li { margin: 0; }

/* --------------------------------------------------------------------------
   6. Profile card
   Portrait frame, scrim, badges over the image. Name and meta sit below the
   frame so they stay legible at five-up widths and remain selectable text.
   -------------------------------------------------------------------------- */

.enm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--enm-surface);
  border-radius: var(--enm-r-lg);
  transition: transform var(--enm-dur) var(--enm-ease-out);
  height: 100%;
}

@media (hover: hover) {
  .enm-card:hover { transform: translateY(-4px); }
}

/* The whole card is one link target. The anchor is stretched over the frame
   and the title, which keeps the markup a single <a> for screen readers. */
.enm-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--enm-r-lg);
}

.enm-card__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--enm-r);
  aspect-ratio: var(--enm-card-ratio);
  background: var(--enm-surface-sunk);
  box-shadow: var(--enm-e-1);
  transition: box-shadow var(--enm-dur) var(--enm-ease);
}

@media (hover: hover) {
  .enm-card:hover .enm-card__frame { box-shadow: var(--enm-e-3); }
}

.enm-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform var(--enm-dur-slow) var(--enm-ease-out);
}

@media (hover: hover) {
  .enm-card:hover .enm-card__img { transform: scale(1.045); }
}

/* Placeholder when a profile has no portrait yet. */
.enm-card__img--none {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(160deg, var(--enm-surface-veil) 0%, var(--enm-surface-sunk) 100%);
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-2xl);
  color: var(--enm-ink-faint);
}

/* Scrim only appears at the foot of the frame, so faces stay untouched. */
.enm-card__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top,
              rgba(13, 11, 8, 0.62) 0%,
              rgba(13, 11, 8, 0.28) 42%,
              transparent 100%);
  opacity: 0;
  transition: opacity var(--enm-dur) var(--enm-ease);
  pointer-events: none;
}

.enm-card--has-overlay .enm-card__scrim { opacity: 1; }

/* Badges */
.enm-card__badges {
  position: absolute;
  top: var(--enm-s-2);
  left: var(--enm-s-2);
  right: var(--enm-s-2);
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  z-index: 2;
  pointer-events: none;
}

.enm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.3125rem 0.5rem;
  border-radius: var(--enm-r-xs);
  background: rgba(255, 255, 255, 0.94);
  color: var(--enm-ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(13, 11, 8, 0.16);
}

.enm-badge--verified { color: var(--enm-verified); }
.enm-badge--new     { color: var(--enm-new); }
.enm-badge--live    { color: var(--enm-live); }

.enm-badge--live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: enm-pulse 2.4s var(--enm-ease) infinite;
}

@keyframes enm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(194, 65, 58, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(194, 65, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 65, 58, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .enm-badge--live::before { animation: none; }
}

/* Overlay strip inside the frame, used for the price on featured cards. */
.enm-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--enm-s-3);
  z-index: 2;
  color: #fff;
  font-size: var(--enm-fs-xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-wide);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--enm-s-2);
  pointer-events: none;
}

/* Body under the frame */
.enm-card__body {
  padding: var(--enm-s-3) 0.125rem var(--enm-s-2);
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1;
}

.enm-card__name {
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-md);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--enm-ink-strong);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
}

.enm-card__name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enm-card__tick {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--enm-verified);
}

.enm-card__meta {
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-soft);
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  min-width: 0;
}

.enm-card__meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--enm-line-strong);
  flex: 0 0 auto;
}

.enm-card__loc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enm-card__rate {
  margin-top: auto;
  padding-top: var(--enm-s-2);
  font-size: var(--enm-fs-xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-wide);
  color: var(--enm-gold-deep);
}

.enm-card__rate span {
  font-weight: 400;
  color: var(--enm-ink-faint);
  letter-spacing: 0;
}

/* Featured variant: gold hairline and a slightly deeper rest shadow. */
.enm-card--featured .enm-card__frame {
  box-shadow: var(--enm-e-2), 0 0 0 1px var(--enm-gold-veil);
}

/* --------------------------------------------------------------------------
   7. Filter bar and term chips
   -------------------------------------------------------------------------- */

.enm-filters {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--enm-line);
  padding-block: var(--enm-s-3);
}

.enm-filters__row {
  display: flex;
  align-items: center;
  gap: var(--enm-s-3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 2px;
}
.enm-filters__row::-webkit-scrollbar { display: none; }

.enm-filters__label {
  flex: 0 0 auto;
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-faint);
}

.enm-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--enm-fs-xs);
  font-weight: 500;
  line-height: 1;
  padding: 0.5rem 0.875rem;
  border-radius: var(--enm-r-pill);
  border: 1px solid var(--enm-line-strong);
  background: var(--enm-surface);
  color: var(--enm-ink-muted);
  white-space: nowrap;
  transition: border-color var(--enm-dur) var(--enm-ease),
              color var(--enm-dur) var(--enm-ease),
              background var(--enm-dur) var(--enm-ease);
}

.enm-chip:hover {
  border-color: var(--enm-gold);
  color: var(--enm-ink);
}

.enm-chip__count {
  font-size: var(--enm-fs-2xs);
  color: var(--enm-ink-faint);
  font-variant-numeric: tabular-nums;
}

.enm-chip[aria-current="page"],
.enm-chip--active {
  background: var(--enm-ink-strong);
  border-color: var(--enm-ink-strong);
  color: #fff;
}
.enm-chip--active .enm-chip__count,
.enm-chip[aria-current="page"] .enm-chip__count { color: rgba(255,255,255,0.6); }

.enm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   8. Single profile
   -------------------------------------------------------------------------- */

.enm-profile {
  display: grid;
  gap: var(--enm-s-6);
  grid-template-columns: 1fr;
  padding-block: calc(var(--enm-band) * 0.5) var(--enm-band);
  align-items: start;
}

@media (min-width: 900px) {
  .enm-profile {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--enm-s-7);
  }
  .enm-profile__media { position: sticky; top: var(--enm-s-5); }
}

@media (min-width: 1200px) {
  .enm-profile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.enm-profile__media { position: relative; }

.enm-profile__figure {
  position: relative;
  border-radius: var(--enm-r-lg);
  overflow: hidden;
  aspect-ratio: var(--enm-card-ratio);
  background: var(--enm-surface-sunk);
  box-shadow: var(--enm-e-3);
}

.enm-profile__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enm-profile__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--enm-s-2);
  margin-top: var(--enm-s-2);
}

.enm-profile__thumb {
  aspect-ratio: 1;
  border-radius: var(--enm-r-sm);
  overflow: hidden;
  background: var(--enm-surface-sunk);
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--enm-dur) var(--enm-ease);
}
.enm-profile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.enm-profile__thumb[aria-current="true"] { border-color: var(--enm-gold); }

.enm-profile__head { margin-bottom: var(--enm-s-5); }

.enm-profile__name {
  font-family: var(--enm-font-display);
  font-size: clamp(2rem, 5vw, var(--enm-fs-3xl));
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 var(--enm-s-3);
  color: var(--enm-ink-strong);
  display: flex;
  align-items: center;
  gap: var(--enm-s-3);
  flex-wrap: wrap;
}

.enm-profile__tick {
  width: 22px;
  height: 22px;
  color: var(--enm-verified);
  flex: 0 0 auto;
}

.enm-profile__sub {
  display: flex;
  align-items: center;
  gap: var(--enm-s-2);
  flex-wrap: wrap;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
}

.enm-profile__sub a { color: var(--enm-ink-muted); border-bottom: 1px solid var(--enm-line-strong); }
.enm-profile__sub a:hover { color: var(--enm-gold-deep); border-bottom-color: var(--enm-gold); }

/* Panels, stats and rates -------------------------------------------------- */

.enm-panel {
  background: var(--enm-surface);
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r-lg);
  padding: var(--enm-s-5);
  margin-bottom: var(--enm-s-5);
}

.enm-panel--sunk { background: var(--enm-canvas-warm); }

.enm-panel__title {
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-gold-deep);
  margin: 0 0 var(--enm-s-4);
}

.enm-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--enm-s-4) var(--enm-s-5);
  margin: 0;
}

@media (min-width: 480px) {
  .enm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.enm-stat dt {
  font-size: var(--enm-fs-2xs);
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-faint);
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.enm-stat dd {
  margin: 0;
  font-size: var(--enm-fs-base);
  font-weight: 500;
  color: var(--enm-ink);
  line-height: 1.35;
}

.enm-rates { display: flex; flex-direction: column; margin: 0; }

.enm-rate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--enm-s-4);
  padding-block: var(--enm-s-3);
  border-bottom: 1px solid var(--enm-line);
}
.enm-rate-row:first-child { padding-top: 0; }
.enm-rate-row:last-child { border-bottom: 0; padding-bottom: 0; }

.enm-rate-row__label { font-size: var(--enm-fs-sm); color: var(--enm-ink-muted); }

.enm-rate-row__value {
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-lg);
  font-weight: 600;
  color: var(--enm-ink-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Prose ------------------------------------------------------------------- */

.enm-prose {
  font-size: var(--enm-fs-base);
  line-height: var(--enm-lh-body);
  color: var(--enm-ink-muted);
}
.enm-prose > * + * { margin-top: var(--enm-s-4); }
.enm-prose p { margin: 0; }
.enm-prose h2, .enm-prose h3 {
  font-family: var(--enm-font-display);
  color: var(--enm-ink-strong);
  margin-top: var(--enm-s-6);
}
.enm-prose h2 { font-size: var(--enm-fs-xl); }
.enm-prose h3 { font-size: var(--enm-fs-lg); }
.enm-prose a { color: var(--enm-gold-deep); border-bottom: 1px solid var(--enm-gold-veil); }
.enm-prose a:hover { border-bottom-color: var(--enm-gold); }
.enm-prose ul, .enm-prose ol { padding-left: 1.25rem; }
.enm-prose li + li { margin-top: var(--enm-s-2); }

/* The sticky call bar was removed: on iOS it sat directly under Safari's own
   toolbar and the two fought for the same strip of screen. The contact panel
   under the portrait already puts the number above the fold on a phone. */

/* --------------------------------------------------------------------------
   9. Notices, empty states, pagination, directory index
   -------------------------------------------------------------------------- */

.enm-note {
  border-left: 2px solid var(--enm-gold);
  background: var(--enm-canvas-warm);
  padding: var(--enm-s-4) var(--enm-s-5);
  border-radius: 0 var(--enm-r-sm) var(--enm-r-sm) 0;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-muted);
  line-height: 1.6;
}

.enm-empty {
  text-align: center;
  padding-block: var(--enm-s-9);
  color: var(--enm-ink-soft);
}
.enm-empty h2 {
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-xl);
  color: var(--enm-ink-strong);
  margin: 0 0 var(--enm-s-3);
}

.enm-pagination {
  display: flex;
  justify-content: center;
  gap: var(--enm-s-2);
  margin-top: var(--enm-s-8);
  flex-wrap: wrap;
}

.enm-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.75rem;
  border-radius: var(--enm-r-sm);
  border: 1px solid var(--enm-line);
  font-size: var(--enm-fs-sm);
  font-weight: 500;
  color: var(--enm-ink-muted);
  transition: border-color var(--enm-dur) var(--enm-ease),
              color var(--enm-dur) var(--enm-ease);
}
.enm-pagination .page-numbers:hover { border-color: var(--enm-gold); color: var(--enm-ink); }
.enm-pagination .page-numbers.current {
  background: var(--enm-ink-strong);
  border-color: var(--enm-ink-strong);
  color: #fff;
}
.enm-pagination .page-numbers.dots { border-color: transparent; }

.enm-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--enm-s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.enm-index__group h3 {
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-lg);
  margin: 0 0 var(--enm-s-3);
  padding-bottom: var(--enm-s-2);
  border-bottom: 1px solid var(--enm-line);
  color: var(--enm-ink-strong);
}

.enm-index__list { list-style: none; margin: 0; padding: 0; }
.enm-index__list li + li { margin-top: 0.5rem; }

.enm-index__list a {
  display: flex;
  justify-content: space-between;
  gap: var(--enm-s-3);
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-muted);
  transition: color var(--enm-dur) var(--enm-ease);
}
.enm-index__list a:hover { color: var(--enm-gold-deep); }
.enm-index__list a span {
  color: var(--enm-ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: var(--enm-fs-xs);
}

.enm-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Astra container reset

   Astra sets .ast-container to display:flex so its sidebar layouts work. That
   turns our full bleed bands into flex items, and a flex item with no width
   shrink wraps to its content instead of filling the row, which stranded the
   whole page in a 1280px column against the left edge. Our templates handle
   their own widths through .enm-wrap, so the flex context is dropped here.
   -------------------------------------------------------------------------- */

.enm-full .site-content > .ast-container {
  display: block;
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.enm-full #primary,
.enm-full #main,
.enm-full .ast-article-post,
.enm-full .ast-article-single,
.enm-full .site-main,
.enm-full .enm-canvas {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
}

/* The boxed container skin paints its own card background and shadow around
   the article. Our bands supply their own, so strip it back to the canvas. */
.enm-full .ast-separate-container,
.enm-full .ast-separate-container .ast-article-single,
.enm-full .ast-separate-container .ast-article-post,
.enm-full .ast-plain-container {
  background: var(--enm-canvas);
  box-shadow: none;
  border: 0;
  padding: 0;
}

.enm-full .entry-content { margin-top: 0; }
.enm-full .entry-content > :first-child { margin-top: 0; }

/* Astra adds bottom padding under the content wrapper on some layouts. */
.enm-full .site-content { padding-bottom: 0; }


/* ==========================================================================
   10. Vertical rhythm
   One band token drives every gap on the site. Templates nest .enm-wrap
   INSIDE .enm-section, which keeps sections as true siblings so the collapse
   rules below actually match. Nesting them the other way around is what
   caused doubled padding between bands.
   ========================================================================== */

:root { --enm-band: 3rem; }

@media (min-width: 600px)  { :root { --enm-band: 4rem; } }
@media (min-width: 1200px) { :root { --enm-band: 5rem; } }

.enm-section        { padding-block: var(--enm-band); }
.enm-section--tight { padding-block: calc(var(--enm-band) * 0.6); }
.enm-section--loose { padding-block: calc(var(--enm-band) * 1.4); }

/* Anything that already ends in generous space hands off flush to the band
   that follows it. */
.enm-section + .enm-section,
.enm-hero + .enm-section,
.enm-canvas + .enm-canvas > .enm-section:first-child {
  padding-top: 0;
}

/* A page head or a sticky filter rail sits tight to its grid on purpose. */
.enm-pagehead + .enm-section,
.enm-filters + .enm-section {
  padding-top: calc(var(--enm-band) * 0.5);
}

/* A tinted band owns its own padding, since the colour change is the divider
   and it needs breathing room on both edges. */
.enm-canvas--warm > .enm-section:first-child { padding-top: var(--enm-band); }

/* A rule used as a divider brings a top margin that doubles up with the
   padding above it. */
.enm-rule { margin-block: 0 var(--enm-band); }

/* A rule opening a section is itself the divider, so it needs less air under
   it than a free standing one. */
.enm-section > .enm-rule:first-child {
  margin-top: 0;
  margin-bottom: calc(var(--enm-band) * 0.55);
}

/* --------------------------------------------------------------------------
   11. Specificity corrections
   `.enm a { color: inherit }` scores (0,1,1) and was beating the button
   colours at (0,1,0), which left dark text sitting on the dark pill.
   -------------------------------------------------------------------------- */

.enm .enm-btn--primary, .enm a.enm-btn--primary { color: var(--enm-ink-invert); }
.enm .enm-btn--gold,    .enm a.enm-btn--gold    { color: #fff; }
.enm .enm-btn--ghost,   .enm a.enm-btn--ghost   { color: var(--enm-ink); }

/* ==========================================================================
   12. Near me finder
   ========================================================================== */

.enm-finder {
  max-width: 46rem;
  margin: 0 auto var(--enm-s-6);
  text-align: left;
}

.enm-finder__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--enm-r-lg);

  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(165%);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  box-shadow:
    0 1px 2px rgba(23, 20, 15, 0.04),
    0 12px 32px rgba(23, 20, 15, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

@media (min-width: 720px) {
  .enm-finder__row {
    grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* Locate button */
.enm-finder__locate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1rem;
  border-radius: var(--enm-r);
  border: 1px solid var(--enm-line-strong);
  background: var(--enm-surface);
  color: var(--enm-ink);
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-sm);
  font-weight: 600;
  letter-spacing: var(--enm-track-wide);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--enm-dur) var(--enm-ease),
              background var(--enm-dur) var(--enm-ease);
}

.enm-finder__locate svg { width: 17px; height: 17px; color: var(--enm-gold-deep); }
.enm-finder__locate:hover { border-color: var(--enm-gold); background: var(--enm-gold-tint); }
.enm-finder__locate[disabled] { opacity: 0.6; cursor: progress; }

.enm-finder.is-locating .enm-finder__locate svg {
  animation: enm-spin 1.1s linear infinite;
}

@keyframes enm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .enm-finder.is-locating .enm-finder__locate svg { animation: none; }
}

/* Selects */
.enm-finder__field { position: relative; min-width: 0; }

.enm-finder select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.8125rem 2.25rem 0.8125rem 0.875rem;
  border-radius: var(--enm-r);
  border: 1px solid var(--enm-line-strong);
  background: var(--enm-surface);
  color: var(--enm-ink);
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-sm);
  line-height: 1.2;
  cursor: pointer;
  text-overflow: ellipsis;
}

.enm-finder select:hover { border-color: var(--enm-gold); }
.enm-finder select:focus-visible { outline: 2px solid var(--enm-gold); outline-offset: 2px; }

.enm-finder__field::after {
  content: "";
  position: absolute;
  right: 0.875rem;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-right: 1.6px solid var(--enm-ink-soft);
  border-bottom: 1.6px solid var(--enm-ink-soft);
  transform: rotate(45deg);
  pointer-events: none;
}

.enm-finder__go { padding-inline: 1.5rem; white-space: nowrap; }

/* Clear sits outside the glass panel so it reads as an undo, not a filter. */
.enm-finder__clear {
  grid-column: 1 / -1;
  justify-self: start;
  background: none;
  border: 0;
  padding: 0.25rem 0.5rem;
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-wide);
  color: var(--enm-ink-soft);
  cursor: pointer;
}
.enm-finder__clear:hover { color: var(--enm-live); }

.enm-finder__status {
  margin: 0.75rem 0 0;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
  text-align: center;
  min-height: 1.25rem;
}
.enm-finder__status.is-ok    { color: var(--enm-verified); font-weight: 500; }
.enm-finder__status.is-empty { color: var(--enm-ink-muted); }
.enm-finder__status.is-error { color: var(--enm-live); }

/* Distance badge on the card portrait */
.enm-card__distance {
  position: absolute;
  top: var(--enm-s-2);
  right: var(--enm-s-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.5rem;
  border-radius: var(--enm-r-xs);
  font-size: var(--enm-fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  background: rgba(13, 11, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(13, 11, 8, 0.2);
  pointer-events: none;
}

.enm-card__distance[hidden] { display: none; }

/* The badge rail must leave room for the distance chip. */
.enm-card__badges { padding-right: 3.5rem; }

/* The finder now closes the hero rather than opening it, so it takes the
   trailing margin and the trust panels take the gap above it. */
.enm-finder--hero { margin: var(--enm-s-5) auto 0; }
.enm-hero__trust  { margin-bottom: 0; }

/* Two column rate table, used when a listing publishes incall and outcall
   prices side by side. */
.enm-rate-row--two,
.enm-rate-row--head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem;
  align-items: baseline;
  gap: var(--enm-s-3);
}

.enm-rate-row--two .enm-rate-row__value { text-align: right; }

.enm-rate-row--head {
  padding-block: 0 var(--enm-s-2);
  border-bottom: 1px solid var(--enm-line-strong);
}

.enm-rate-row__col {
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-faint);
  text-align: right;
}

@media (max-width: 420px) {
  .enm-rate-row--two,
  .enm-rate-row--head { grid-template-columns: minmax(0, 1fr) 4.25rem 4.25rem; gap: var(--enm-s-2); }
  .enm-rate-row--two .enm-rate-row__value { font-size: var(--enm-fs-md); }
}

/* Static chips: the detailed service list is descriptive, not navigation, so
   these are spans rather than links and never take a hover state. */
.enm-chip--static {
  cursor: default;
  background: var(--enm-surface-sunk);
  border-color: transparent;
  color: var(--enm-ink-muted);
  font-weight: 400;
}
.enm-chip--static:hover { border-color: transparent; color: var(--enm-ink-muted); }

.enm-chips--plain { gap: 0.375rem; }

/* Nationality and area share the card meta line, so both need to be able to
   truncate rather than one pushing the other out of the card. */
.enm-card__nat,
.enm-card__loc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.enm-card__nat { flex: 0 1 auto; }

/* ==========================================================================
   13. Reading measure
   One token controls how wide running text gets, so the lede on a page head
   and an editorial block further down always agree. Templates use the class
   rather than an inline max-width, which is what let the two drift apart.
   ========================================================================== */

.enm-prose--measure { max-width: var(--enm-wrap-text); }
.enm-lede           { max-width: var(--enm-wrap-text); }

/* Centred hero copy sets its own narrower measure and should not inherit
   the wider reading column. */
.enm-hero__lede { max-width: 44rem; }

/* ==========================================================================
   14. Panel headings
   The small caps panel headings were set at the very bottom of the scale,
   which is fine as decoration and poor as a label you are meant to read.
   Only the headings change here; the rest of the panel keeps its sizes.
   ========================================================================== */

.enm-panel__title {
  font-size: var(--enm-fs-sm);
  letter-spacing: 0.1em;
  color: var(--enm-gold-deep);
}

/* ==========================================================================
   15. Card headline
   Name and price share one row so both can carry real size at five columns.
   The price used to sit over the portrait, where there was no room to grow it
   without covering the photograph.
   ========================================================================== */

.enm-card__headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.enm-card__name {
  font-size: var(--enm-fs-lg);
  font-weight: 600;
  line-height: 1.15;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

.enm-card__tick { width: 15px; height: 15px; }

.enm-card__price {
  flex: 0 0 auto;
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-lg);
  font-weight: 600;
  line-height: 1.15;
  color: var(--enm-gold-deep);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.enm-card__price-unit {
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-2xs);
  font-weight: 500;
  color: var(--enm-ink-faint);
  letter-spacing: 0.02em;
}

.enm-card__body { gap: 0.25rem; padding-top: var(--enm-s-3); }

/* Nationality and area sit on one quiet line under the headline. */
.enm-card__meta {
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-soft);
  gap: 0.3125rem;
  flex-wrap: nowrap;
}

.enm-card__nat { flex: 0 1 auto; }
.enm-card__loc { flex: 0 1 auto; }

/* At two up on a phone there is more width per card, so the name can breathe. */
@media (max-width: 599px) {
  .enm-card__name,
  .enm-card__price { font-size: var(--enm-fs-md); }
}

/* ==========================================================================
   16. Contact panel under the portrait
   Sitting in the media column means it rides the sticky rail on desktop, so
   the number stays in view while the detail column scrolls past it.
   ========================================================================== */

.enm-panel--contact {
  margin-top: var(--enm-s-4);
  margin-bottom: 0;
}

.enm-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 420px) and (max-width: 899px) {
  .enm-panel__actions { flex-direction: row; }
  .enm-panel__actions .enm-btn { flex: 1; }
}

.enm-panel__foot {
  margin: var(--enm-s-4) 0 0;
  font-size: var(--enm-fs-xs);
  line-height: 1.55;
  color: var(--enm-ink-soft);
}

/* The portrait fills the column at its natural 2:3 ratio. Capping its height
   made it shrink its width to keep that ratio, which left the photograph
   narrower than the contact panel sitting under it. */
.enm-profile__figure { width: 100%; }
.enm-profile__figure img { object-position: center 20%; }

/* The sticky rail carries the portrait and the contact panel, so it can be
   taller than the viewport. Sticking to the top of a tall stack would hide
   the bottom of it, so the rail only sticks once it fits. */
@media (min-width: 900px) {
  .enm-profile__media { align-self: start; }
}

/* Duo cards sit inside the detail column, which is far narrower than the page.
   Sizing by container rather than by viewport keeps them sensible in both. */
.enm-grid--duo {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.75rem;
}

.enm-grid--duo .enm-card__name,
.enm-grid--duo .enm-card__price { font-size: var(--enm-fs-base); }
.enm-grid--duo .enm-card__meta  { font-size: var(--enm-fs-2xs); }
.enm-grid--duo .enm-card__body  { padding-top: var(--enm-s-2); }
.enm-grid--duo .enm-card__badges { display: none; }

/* ==========================================================================
   17. Profile detail corrections
   ========================================================================== */

/* Stat values are information, not emphasis. */
.enm-stat dd { font-weight: 400; }

/* On a narrow screen the two column stat grid leaves a hole under any short
   value that sits beside a long one. A label and value on one line never
   does, and it reads faster on a phone. */
@media (max-width: 599px) {
  .enm-stats {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .enm-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--enm-s-4);
    padding-block: 0.625rem;
    border-bottom: 1px solid var(--enm-line);
  }

  .enm-stat:last-child { border-bottom: 0; padding-bottom: 0; }
  .enm-stat:first-child { padding-top: 0; }

  .enm-stat dt { margin-bottom: 0; flex: 0 0 auto; }
  .enm-stat dd { text-align: right; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Sticky portrait rail

   A full width 2:3 portrait plus the contact panel is taller than most
   viewports, and a sticky element taller than the viewport never actually
   sticks. Capping the frame height on desktop keeps the rail short enough to
   pin while leaving the photograph the same width as the panel beneath it.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .enm-profile__figure {
    aspect-ratio: auto;
    height: min(58vh, 660px);
  }

  .enm-profile__media {
    position: sticky;
    top: var(--enm-s-4);
    align-self: start;
  }
}

/* No transform promotion here on purpose. Forcing a layer on a sticky element
   makes Safari judder rather than settle, which is the opposite of the intent. */

/* With the paragraph gone the hero is title, actions, figures and the finder.
   The title carries the weight, so it gets a little more room beneath it. */
.enm-hero__title { margin-bottom: var(--enm-s-6); }

/* On a phone the value sits opposite its label rather than under it, so it
   does not need to carry body size to be read. The label keeps its size. */
@media (max-width: 599px) {
  .enm-stat dd { font-size: var(--enm-fs-sm); line-height: 1.45; }
}

/* ==========================================================================
   18. Breadcrumb row with profile stepping
   ========================================================================== */

.enm-crumbrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-4);
  padding-top: var(--enm-s-5);
}

.enm-crumbrow .enm-crumbs { margin-bottom: 0; min-width: 0; }

.enm-pagernav {
  display: flex;
  gap: 0.375rem;
  flex: 0 0 auto;
}

.enm-pagernav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--enm-r-sm);
  border: 1px solid var(--enm-line);
  background: var(--enm-surface);
  color: var(--enm-ink-muted);
  transition: border-color var(--enm-dur) var(--enm-ease),
              color var(--enm-dur) var(--enm-ease),
              background var(--enm-dur) var(--enm-ease);
}

.enm-pagernav__btn svg { width: 15px; height: 15px; }

.enm-pagernav__btn:hover {
  border-color: var(--enm-gold);
  color: var(--enm-ink-strong);
  background: var(--enm-gold-tint);
}

.enm-pagernav__btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 480px) {
  .enm-crumbrow { gap: var(--enm-s-3); }
  .enm-crumbs { font-size: var(--enm-fs-2xs); }
}

/* ==========================================================================
   19. Finder control alignment
   A native select vertically centres its own text when it is given a height
   and no vertical padding. Padding plus a tight line-height, which is what
   was here, pushes the text off its baseline and clips it on iOS.
   ========================================================================== */

.enm-finder select {
  height: 3rem;
  padding-block: 0;
  padding-inline: 0.875rem 2.25rem;
  line-height: normal;
  text-align: left;
}

/* The locate button matches the field height so the row sits on one line. */
.enm-finder__locate {
  height: 3rem;
  padding-block: 0;
}

.enm-finder__go {
  height: 3rem;
  padding-block: 0;
}

/* Safari renders the arrow inside a select unless appearance is cleared on
   the element itself as well as the shorthand. */
.enm-finder select::-ms-expand { display: none; }

/* ==========================================================================
   20. Faceted filter bar
   ========================================================================== */

.enm-filterbar { margin-bottom: var(--enm-s-5); }

.enm-filterbar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.enm-facet { position: relative; }

.enm-facet__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 2.75rem;
  padding-inline: 1rem;
  border-radius: var(--enm-r-pill);
  border: 1px solid var(--enm-line-strong);
  background: var(--enm-surface);
  color: var(--enm-ink);
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--enm-dur) var(--enm-ease),
              background var(--enm-dur) var(--enm-ease);
}

.enm-facet__toggle:hover { border-color: var(--enm-gold); }
.enm-facet.is-active .enm-facet__toggle {
  border-color: var(--enm-ink-strong);
  background: var(--enm-ink-strong);
  color: #fff;
}

.enm-facet__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.25rem;
  border-radius: var(--enm-r-pill);
  background: var(--enm-gold);
  color: #fff;
  font-size: var(--enm-fs-2xs);
  font-weight: 700;
  line-height: 1;
}

.enm-facet__chev { width: 14px; height: 14px; opacity: 0.6; }
.enm-facet__toggle[aria-expanded="true"] .enm-facet__chev { transform: rotate(180deg); }

.enm-facet__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 60;
  width: max(260px, 100%);
  max-height: 340px;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  background: var(--enm-surface);
  border: 1px solid var(--enm-line-strong);
  border-radius: var(--enm-r);
  box-shadow: var(--enm-e-3);
  padding: 0.5rem;
}

.enm-facet__panel[hidden] { display: none; }

.enm-facet__search { position: sticky; top: 0; background: var(--enm-surface); padding-bottom: 0.375rem; }

.enm-facet__search input {
  width: 100%;
  height: 2.25rem;
  padding-inline: 0.625rem;
  border-radius: var(--enm-r-sm);
  border: 1px solid var(--enm-line);
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-sm);
}

.enm-facet__list { list-style: none; margin: 0; padding: 0; }
.enm-facet__list li[hidden] { display: none; }

.enm-facet__opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: var(--enm-r-sm);
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-muted);
  cursor: pointer;
}

.enm-facet__opt:hover { background: var(--enm-surface-sunk); }
.enm-facet__opt input { accent-color: var(--enm-gold-deep); width: 15px; height: 15px; flex: 0 0 auto; }
.enm-facet__opt-name { flex: 1; min-width: 0; }
.enm-facet__opt-count { color: var(--enm-ink-faint); font-size: var(--enm-fs-2xs); font-variant-numeric: tabular-nums; }

.enm-filterbar__radius {
  appearance: none;
  -webkit-appearance: none;
  height: 2.75rem;
  padding-inline: 1rem 2rem;
  border-radius: var(--enm-r-pill);
  border: 1px solid var(--enm-line-strong);
  background: var(--enm-surface);
  color: var(--enm-ink);
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-sm);
  line-height: normal;
  cursor: pointer;
}

/* Selected values as removable pills */
.enm-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin-top: 0.75rem;
}
.enm-pills[hidden] { display: none; }

.enm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding-inline: 0.75rem;
  border-radius: var(--enm-r-pill);
  border: 1px solid var(--enm-gold-veil);
  background: var(--enm-gold-tint);
  color: var(--enm-gold-deep);
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--enm-dur) var(--enm-ease);
}

.enm-pill svg { width: 11px; height: 11px; opacity: 0.7; }
.enm-pill:hover { background: var(--enm-gold); color: #fff; border-color: var(--enm-gold); }

.enm-pill--clear {
  background: transparent;
  border-color: transparent;
  color: var(--enm-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.enm-pill--clear:hover { background: transparent; color: var(--enm-live); }

.enm-filterbar__status {
  margin: 0.75rem 0 0;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
  min-height: 1.25rem;
}
.enm-filterbar__status.is-ok    { color: var(--enm-verified); font-weight: 500; }
.enm-filterbar__status.is-empty { color: var(--enm-live); }
.enm-filterbar__status.is-error { color: var(--enm-live); }

@media (max-width: 599px) {
  .enm-filterbar__row > * { flex: 1 1 calc(50% - 0.25rem); }
  .enm-facet__toggle, .enm-filterbar__radius, .enm-finder__locate { width: 100%; justify-content: center; }
  .enm-facet__panel { width: min(85vw, 320px); }
}

/* ==========================================================================
   21. Wordmark
   ========================================================================== */

.enm-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1;
}

.enm-logo__mark {
  font-family: var(--enm-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;

  /* A brushed champagne rather than one flat gold, which is what gives the
     lettering its depth at small sizes. */
  background: linear-gradient(155deg,
              #e3c98f 0%,
              var(--enm-gold-bright) 18%,
              var(--enm-gold) 44%,
              var(--enm-gold-deep) 68%,
              var(--enm-gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.enm-logo__rule {
  width: 1px;
  height: 1.55rem;
  background: var(--enm-line-strong);
  flex: 0 0 auto;
}

.enm-logo__place {
  font-family: var(--enm-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--enm-ink-soft);
  padding-right: 0.32em;
}

/* Astra sizes the title for plain text, which crops the lockup. */
.site-title { line-height: 1 !important; }
.site-title a { display: inline-block; }

@media (max-width: 480px) {
  .enm-logo { gap: 0.5rem; }
  .enm-logo__mark { font-size: 1.375rem; }
  .enm-logo__rule { height: 1.2rem; }
  .enm-logo__place { font-size: 0.6875rem; letter-spacing: 0.24em; }
}

/* ==========================================================================
   22. Filter bar corrections
   ========================================================================== */

/* The count badge sets display, which beats the hidden attribute, so an empty
   facet was showing a nought instead of nothing. */
.enm-facet__count[hidden] { display: none; }

/* iOS zooms the page whenever a focused field is under 16px. Sixteen exactly
   is the threshold, so every control the user can tap into gets it. */
.enm-facet__search input,
.enm-filterbar__radius,
.enm-finder select {
  font-size: 16px;
}

/* Safari paints its own blue slab on tapped controls. These have their own
   pressed and focus states, so the default is cleared. */
.enm-facet__toggle,
.enm-finder__locate,
.enm-filterbar__radius,
.enm-pill,
.enm-btn {
  -webkit-tap-highlight-color: transparent;
}

.enm-facet__toggle:focus,
.enm-filterbar__radius:focus,
.enm-finder__locate:focus { outline: none; }

.enm-facet__toggle:focus-visible,
.enm-filterbar__radius:focus-visible,
.enm-finder__locate:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   The whole bar reads as one panel rather than six loose buttons.
   -------------------------------------------------------------------------- */

.enm-filterbar__row {
  gap: 0.4375rem;
  padding: 0.5rem;
  border-radius: var(--enm-r-lg);
  background: var(--enm-surface);
  border: 1px solid var(--enm-line);
  box-shadow:
    0 1px 2px rgba(23, 20, 15, 0.04),
    0 10px 28px rgba(23, 20, 15, 0.055);
}

.enm-facet__toggle,
.enm-filterbar__radius,
.enm-filterbar .enm-finder__locate {
  height: 2.5rem;
  padding-inline: 0.875rem;
  font-size: var(--enm-fs-sm);
  border-radius: var(--enm-r);
}

.enm-filterbar__radius { padding-inline: 0.875rem 1.875rem; }
.enm-filterbar .enm-finder__locate { gap: 0.375rem; }
.enm-filterbar .enm-finder__locate svg { width: 15px; height: 15px; }

.enm-facet__count {
  min-width: 1.125rem;
  height: 1.125rem;
  font-size: 0.6875rem;
}

@media (max-width: 599px) {
  .enm-filterbar__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
  }
  .enm-filterbar__row > * { flex: none; }
  .enm-facet__toggle { width: 100%; justify-content: center; }
}

/* The compact sizing above reset the select back under the 16px threshold,
   which is what makes iOS zoom the page on tap. Every control in the bar sits
   at 16px so they match each other and none of them trigger it. */
.enm-filterbar .enm-facet__toggle,
.enm-filterbar .enm-filterbar__radius,
.enm-filterbar .enm-finder__locate,
.enm-facet__search input,
.enm-facet__opt {
  font-size: 16px;
}

.enm-facet__opt-count { font-size: 13px; }
.enm-facet__count { font-size: 11px; }

/* ==========================================================================
   23. Header menu
   ========================================================================== */

.main-header-menu > li > a,
.ast-nav-menu > li > a {
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-xs) !important;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--enm-ink-muted);
  position: relative;
  transition: color var(--enm-dur) var(--enm-ease);
}

.main-header-menu > li > a:hover { color: var(--enm-ink-strong); }

/* A hairline that draws in from the left rather than a block underline. */
.main-header-menu > li > a::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1.35rem;
  height: 1px;
  background: var(--enm-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--enm-dur) var(--enm-ease-out);
}

.main-header-menu > li > a:hover::after,
.main-header-menu > li.current-menu-item > a::after { transform: scaleX(1); }

/* The number is the point of the site, so it reads as a control. */
.main-header-menu > li.enm-menu-cta > a {
  color: #fff;
  background: var(--enm-ink-strong);
  border-radius: var(--enm-r-pill);
  padding-inline: 1.125rem !important;
  margin-left: 0.5rem;
  letter-spacing: 0.06em;
  transition: background var(--enm-dur) var(--enm-ease);
}

.main-header-menu > li.enm-menu-cta > a:hover { background: var(--enm-gold-deep); color: #fff; }
.main-header-menu > li.enm-menu-cta > a::after { display: none; }

.ast-primary-header-bar { border-bottom: 1px solid var(--enm-line) !important; }

@media (max-width: 921px) {
  .main-header-menu > li.enm-menu-cta > a { margin-left: 0; display: inline-flex; }
  .main-header-menu > li > a::after { display: none; }
}

/* ==========================================================================
   24. Footer
   A dark band against the white site. It is the only heavy surface on the
   page, which is what makes it read as a close rather than another section.
   ========================================================================== */

.enm-footer {
  background: #0d0b08;
  color: rgba(255, 255, 255, 0.62);
  padding-block: var(--enm-s-8) var(--enm-s-5);
  margin-top: var(--enm-s-8);
  border-top: 1px solid rgba(176, 137, 79, 0.35);
  font-size: var(--enm-fs-sm);
}

.enm-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--enm-s-6);
  padding-bottom: var(--enm-s-7);
}

@media (min-width: 700px)  { .enm-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .enm-footer__top { grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--enm-s-6); } }

/* Brand column */
.enm-footer__brand .enm-logo__mark { font-size: 1.5rem; }
.enm-footer__brand .enm-logo__rule { background: rgba(255, 255, 255, 0.22); }
.enm-footer__brand .enm-logo__place { color: rgba(255, 255, 255, 0.55); }

.enm-footer__blurb {
  margin: var(--enm-s-4) 0 var(--enm-s-5);

  /* The grid column already sets a sensible measure. A 34ch cap on top of it
     left the paragraph as a narrow ribbon with most of its column empty. */
  max-width: none;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--enm-fs-sm);
}

.enm-footer__phone {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(176, 137, 79, 0.4);
  border-radius: var(--enm-r);
  transition: border-color var(--enm-dur) var(--enm-ease),
              background var(--enm-dur) var(--enm-ease);
}

.enm-footer__phone:hover { border-color: var(--enm-gold); background: rgba(176, 137, 79, 0.1); }

.enm-footer__phone-label {
  font-size: var(--enm-fs-2xs);
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-gold);
}

.enm-footer__phone-num {
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-lg);
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}

/* Link columns */
.enm-footer__heading {
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-gold);
  margin: 0 0 var(--enm-s-4);
}

.enm-footer__col ul { list-style: none; margin: 0; padding: 0; }
.enm-footer__col li + li { margin-top: 0.5rem; }

.enm-footer__col a {
  font-size: var(--enm-fs-xs);
  color: rgba(255, 255, 255, 0.58);
  transition: color var(--enm-dur) var(--enm-ease);
}

.enm-footer__col a:hover { color: #fff; }

.enm-footer__more {
  color: var(--enm-gold) !important;
  font-weight: 600;
  display: inline-block;
  margin-top: 0.375rem;
}

/* Bottom strip */
.enm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-4);
  padding-top: var(--enm-s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.enm-footer__legal {
  margin: 0;
  max-width: 62ch;
  font-size: var(--enm-fs-2xs);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.38);
}

.enm-footer__meta {
  display: flex;
  align-items: center;
  gap: var(--enm-s-4);
  font-size: var(--enm-fs-2xs);
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
}

.enm-footer__meta ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--enm-s-4); }
.enm-footer__meta a { color: rgba(255, 255, 255, 0.5); }
.enm-footer__meta a:hover { color: #fff; }

.enm-footer__age {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--enm-fs-2xs);
}

/* Astra prints its own footer rows; ours replaces them. */
.site-below-footer-wrap,
.site-primary-footer-wrap { display: none !important; }

/* An out of area note is information, not an error or a success. */
.enm-filterbar__status.is-note {
  color: var(--enm-ink-muted);
  background: var(--enm-canvas-warm);
  border-left: 2px solid var(--enm-gold);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--enm-r-sm) var(--enm-r-sm) 0;
  line-height: 1.6;
}

/* ==========================================================================
   25. Facet panel placement
   Anchoring the panel to its own button pushes it off screen for any facet in
   the right hand column. On a phone it spans the bar instead; on desktop the
   later facets open leftwards so they stay inside the viewport.
   ========================================================================== */

.enm-filterbar__row { position: relative; }

@media (max-width: 599px) {
  .enm-facet { position: static; }

  .enm-facet__panel {
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    max-height: min(48vh, 360px);
    overscroll-behavior: contain;
  }
}

@media (min-width: 600px) {
  /* The last two open to the left so they cannot run past the edge. */
  .enm-facet:nth-last-of-type(-n+2) .enm-facet__panel { left: auto; right: 0; }
}

/* The search field is a convenience on desktop and clutter on a phone, where
   the list is short enough to scroll and the keyboard would cover it. */
@media (max-width: 599px) {
  .enm-facet__search { display: none; }
}

/* ==========================================================================
   26. Distance badge placement
   Moved to the foot of the frame. The top of a portrait is where the face is,
   and with the status badges gone there is nothing else competing down there.
   ========================================================================== */

.enm-card__distance {
  top: auto;
  right: auto;
  bottom: var(--enm-s-2);
  left: var(--enm-s-2);
}

/* The badge rail no longer exists, so it does not need to reserve space. */
.enm-card__badges { padding-right: 0; }

/* ==========================================================================
   27. Card meta at two up
   Nationality and area together run to about thirty characters, which does
   not fit a 170px card on one line. Truncating both left "Eastern Eur... /
   Baker S...", so on narrow cards they take a line each instead.
   ========================================================================== */

@media (max-width: 599px) {
  .enm-card__meta {
    flex-wrap: wrap;
    row-gap: 0;
    line-height: 1.35;
  }

  .enm-card__meta-sep { display: none; }

  .enm-card__nat,
  .enm-card__loc {
    flex: 1 0 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .enm-card__nat { color: var(--enm-ink-muted); }
  .enm-card__loc { color: var(--enm-ink-soft); }
}

/* ==========================================================================
   28. Interactive state colours

   Astra styles `button:hover` and `button:focus` with white text. That scores
   (0,1,1) against a plain class at (0,1,0), so every light button on the site
   turned white on white the moment it was tapped. iOS makes it worse by
   keeping the focus state after the tap ends.

   Two rules here: text colour is pinned across every state, and hover skins
   only apply where a real pointer exists so a tap cannot leave one stuck.
   ========================================================================== */

.enm-finder__locate,
.enm-finder__locate:hover,
.enm-finder__locate:focus,
.enm-finder__locate:active,
.enm-finder__locate:focus-visible,
.enm-facet__toggle,
.enm-facet__toggle:hover,
.enm-facet__toggle:focus,
.enm-facet__toggle:active,
.enm-facet__toggle:focus-visible,
.enm-filterbar__radius,
.enm-filterbar__radius:hover,
.enm-filterbar__radius:focus,
.enm-filterbar__radius:active,
.enm-pagernav__btn,
.enm-pagernav__btn:hover,
.enm-pagernav__btn:focus,
.enm-pagernav__btn:active {
  color: var(--enm-ink);
  -webkit-text-fill-color: var(--enm-ink);
}

/* An active facet is a dark pill, so it keeps its white label in every state. */
.enm-facet.is-active .enm-facet__toggle,
.enm-facet.is-active .enm-facet__toggle:hover,
.enm-facet.is-active .enm-facet__toggle:focus,
.enm-facet.is-active .enm-facet__toggle:active {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: var(--enm-ink-strong);
}

/* Dark buttons keep white text in every state. */
.enm .enm-btn--primary,
.enm .enm-btn--primary:hover,
.enm .enm-btn--primary:focus,
.enm .enm-btn--primary:active,
.enm .enm-btn--gold,
.enm .enm-btn--gold:hover,
.enm .enm-btn--gold:focus,
.enm .enm-btn--gold:active {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Light buttons keep dark text in every state. */
.enm .enm-btn--ghost,
.enm .enm-btn--ghost:hover,
.enm .enm-btn--ghost:focus,
.enm .enm-btn--ghost:active,
.enm-chip,
.enm-chip:focus,
.enm-chip:active {
  color: var(--enm-ink);
  -webkit-text-fill-color: var(--enm-ink);
}

.enm-chip--active,
.enm-chip[aria-current="page"] {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.enm-pill,
.enm-pill:focus,
.enm-pill:active {
  color: var(--enm-gold-deep);
  -webkit-text-fill-color: var(--enm-gold-deep);
}

/* Hover skins are for pointers only. On a touch screen they latch after a tap
   and the control looks permanently pressed. */
@media (hover: none) {
  .enm-finder__locate:hover { background: var(--enm-surface); border-color: var(--enm-line-strong); }
  .enm-facet__toggle:hover  { border-color: var(--enm-line-strong); }
  .enm-chip:hover           { border-color: var(--enm-line-strong); }
  .enm-pill:hover           { background: var(--enm-gold-tint); border-color: var(--enm-gold-veil); }
  .enm-pagernav__btn:hover  { border-color: var(--enm-line); background: var(--enm-surface); }
  .enm-facet__opt:hover     { background: transparent; }
}

/* --------------------------------------------------------------------------
   Backgrounds need pinning as well as text colour. Something upstream paints
   a system blue onto a focused button, which the earlier rule left in place
   and simply put black text on top of.
   -------------------------------------------------------------------------- */

.enm-filterbar .enm-facet__toggle,
.enm-filterbar .enm-facet__toggle:hover,
.enm-filterbar .enm-facet__toggle:focus,
.enm-filterbar .enm-facet__toggle:active,
.enm-filterbar .enm-facet__toggle:focus-visible,
.enm-filterbar .enm-finder__locate,
.enm-filterbar .enm-finder__locate:focus,
.enm-filterbar .enm-finder__locate:active,
.enm-filterbar .enm-filterbar__radius,
.enm-filterbar .enm-filterbar__radius:focus,
.enm-filterbar .enm-filterbar__radius:active {
  background-color: var(--enm-surface);
  background-image: none;
}

.enm-filterbar .enm-facet.is-active .enm-facet__toggle,
.enm-filterbar .enm-facet.is-active .enm-facet__toggle:hover,
.enm-filterbar .enm-facet.is-active .enm-facet__toggle:focus,
.enm-filterbar .enm-facet.is-active .enm-facet__toggle:active {
  background-color: var(--enm-ink-strong);
  background-image: none;
}

@media (hover: hover) {
  .enm-filterbar .enm-facet__toggle:hover { border-color: var(--enm-gold); }
  .enm-filterbar .enm-finder__locate:hover {
    background-color: var(--enm-gold-tint);
    border-color: var(--enm-gold);
  }
}

/* ==========================================================================
   29. Mobile menu trigger
   ========================================================================== */

.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-outline,
.menu-toggle.ast-mobile-menu-trigger-minimal {
  width: 2.75rem !important;
  height: 2.75rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--enm-line-strong) !important;
  border-radius: var(--enm-r) !important;
  background: var(--enm-surface) !important;
  color: var(--enm-ink) !important;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--enm-dur) var(--enm-ease),
              background var(--enm-dur) var(--enm-ease);
}

.ast-mobile-menu-trigger-minimal:focus,
.ast-mobile-menu-trigger-minimal:active,
.menu-toggle:focus,
.menu-toggle:active {
  background: var(--enm-surface) !important;
  color: var(--enm-ink) !important;
  outline: none;
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: 2px;
}

/* Astra ships an icon font glyph. Replace it with three ruled lines, which
   sit better beside a serif wordmark than a heavy generic burger. */
.menu-toggle .ast-mobile-svg,
.menu-toggle svg { display: none !important; }

.menu-toggle::before {
  content: "";
  width: 1.125rem;
  height: 0.625rem;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  position: relative;
}

.menu-toggle::after {
  content: "";
  position: absolute;
  width: 1.125rem;
  height: 1.5px;
  background: currentColor;
}

/* Open state turns the rules gold so the trigger reads as engaged. */
.ast-mobile-header-content .menu-toggle[aria-expanded="true"],
.menu-toggle[aria-expanded="true"] {
  border-color: var(--enm-gold) !important;
  color: var(--enm-gold-deep) !important;
}

/* The panel itself */
.ast-mobile-header-content .main-header-menu > li > a,
.ast-mobile-popup-content .main-header-menu > li > a {
  font-size: var(--enm-fs-sm) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding-block: 1rem !important;
  border-bottom: 1px solid var(--enm-line);
}

.ast-mobile-header-content .main-header-menu > li.enm-menu-cta > a,
.ast-mobile-popup-content .main-header-menu > li.enm-menu-cta > a {
  background: var(--enm-ink-strong);
  color: #fff !important;
  border-radius: var(--enm-r-pill);
  margin-top: 1rem;
  text-align: center;
  justify-content: center;
  border-bottom: 0;
}

/* ==========================================================================
   30. Scroll performance

   backdrop-filter is cheap once and expensive many times. Safari has to
   resample everything behind each blurred element on every scroll frame, so a
   list of blurred chips plus a sticky blurred bar makes the page judder on a
   phone. The blur is kept only where it is static and there are a handful of
   them: the hero panels. Everything that repeats or sticks gets a solid fill,
   which looks near identical and costs nothing.
   ========================================================================== */

.enm-card__distance {
  background: rgba(13, 11, 8, 0.82);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.enm-filters {
  background: var(--enm-canvas);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--enm-line);
}

/* Reserve the row so a sticky rail cannot shift the grid as it engages. */
.enm-filters__row { min-height: 2.75rem; }

/* ==========================================================================
   31. Mobile menu items

   Astra inherits a line-height of about 41px onto 13px menu text, which with
   17px of padding either side made every item 75px tall. The gap was never
   spacing between the items; it was inside them.

   Scoped to the mobile breakpoint. The desktop navigation sits inside the same
   .main-header-bar-navigation container, so an unscoped padding-inline of zero
   ran every top level item together into one word.
   ========================================================================== */

@media (max-width: 921px) {
  .main-header-bar-navigation .main-header-menu > li > a,
  .ast-mobile-popup-drawer .main-header-menu > li > a,
  #ast-mobile-popup .main-header-menu > li > a {
    line-height: 1.4 !important;
    padding-block: 0.875rem !important;
    padding-inline: 0 !important;
    min-height: 0 !important;
    font-size: var(--enm-fs-sm) !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--enm-ink) !important;
    border-bottom: 1px solid var(--enm-line);
    display: block;
  }

  .main-header-bar-navigation .main-header-menu > li:last-child > a,
  .ast-mobile-popup-drawer .main-header-menu > li:last-child > a {
    border-bottom: 0;
  }

  .main-header-bar-navigation .main-header-menu > li > a:active,
  .main-header-bar-navigation .main-header-menu > li > a:focus {
    background: transparent !important;
    color: var(--enm-gold-deep) !important;
  }

  /* The panel itself sits inside the page gutter rather than edge to edge. */
  .main-header-bar-navigation.toggle-on {
    padding-inline: var(--enm-gutter);
    padding-block: 0.5rem 1.25rem;
  }

  .main-header-bar-navigation .main-header-menu { border: 0 !important; }
  .main-header-bar-navigation .main-header-menu > li { border: 0 !important; }
}

/* Desktop keeps its horizontal rhythm. */
@media (min-width: 922px) {
  .main-header-menu > li > a,
  .main-header-bar-navigation .main-header-menu > li > a {
    padding-inline: 1rem !important;
    padding-block: 0.5rem !important;
    border-bottom: 0;
    display: inline-flex;
    align-items: center;
  }

  .main-header-menu > li + li { margin-left: 0.25rem; }
}

/* ==========================================================================
   32. Engaged control states
   Set by the filter script rather than by :hover, so a touch screen cannot
   leave a control looking pressed when it is not.
   ========================================================================== */

.enm-filterbar .enm-finder__locate.is-on,
.enm-filterbar .enm-finder__locate.is-on:hover,
.enm-filterbar .enm-finder__locate.is-on:focus {
  background-color: var(--enm-gold-tint);
  border-color: var(--enm-gold);
  color: var(--enm-gold-deep);
  -webkit-text-fill-color: var(--enm-gold-deep);
  font-weight: 600;
}

.enm-filterbar .enm-finder__locate.is-on svg { color: var(--enm-gold-deep); }

.enm-filterbar .enm-filterbar__radius.is-on {
  border-color: var(--enm-gold);
  background-color: var(--enm-gold-tint);
  color: var(--enm-gold-deep);
  -webkit-text-fill-color: var(--enm-gold-deep);
  font-weight: 600;
}

/* A pressed control should acknowledge the tap, then let go. */
.enm-facet__toggle:active,
.enm-finder__locate:active,
.enm-pagernav__btn:active,
.enm-pill:active {
  transform: scale(0.97);
  transition: transform 90ms var(--enm-ease);
}

/* ==========================================================================
   33. Hero finder
   Same visual language as the archive filter bar so the two read as one
   control in two places, rather than two different widgets.
   ========================================================================== */

.enm-finder--hero .enm-finder__row {
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
  padding: 0.5rem;
  border-radius: var(--enm-r-lg);
}

.enm-finder--hero .enm-finder__locate,
.enm-finder--hero select,
.enm-finder--hero .enm-finder__go {
  height: 2.75rem;
  border-radius: var(--enm-r);
  font-size: 16px;
}

.enm-finder--hero .enm-finder__go { grid-column: 1 / -1; }
.enm-finder--hero .enm-finder__clear { grid-column: 1 / -1; justify-self: center; }

@media (min-width: 720px) {
  .enm-finder--hero .enm-finder__row {
    grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto;
  }
  .enm-finder--hero .enm-finder__go { grid-column: auto; }
  .enm-finder--hero .enm-finder__clear { grid-column: 1 / -1; justify-self: start; }
}

/* The status line only ever reported on the home page strip, which is not
   what the visitor is asking about. The archive answers that question. */
.enm-finder--hero .enm-finder__status { display: none; }

/* ==========================================================================
   34. Footer heading visibility

   `.enm h1, .enm h2, .enm h3` sets the near black ink colour and scores
   (0,1,1). The footer heading class scores (0,1,0), so every column title was
   being painted near black onto a near black band and disappeared entirely.
   Two classes puts it back in front.
   ========================================================================== */

.enm .enm-footer__heading,
.enm-footer .enm-footer__heading {
  color: var(--enm-gold);
  -webkit-text-fill-color: var(--enm-gold);
  font-size: 14px;
  letter-spacing: 0.16em;
}

/* Anything else the footer prints as a heading follows the same rule. */
.enm .enm-footer h2,
.enm .enm-footer h3 {
  color: var(--enm-gold);
  -webkit-text-fill-color: var(--enm-gold);
}

/* ==========================================================================
   35. Wordmark divider
   A hairline that fades out at both ends rather than stopping dead, so it
   reads as a piece of the lockup instead of a border.
   ========================================================================== */

.enm-logo__rule {
  width: 1px;
  height: 1.75rem;
  border: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(176, 137, 79, 0.15) 18%,
    var(--enm-gold) 50%,
    rgba(176, 137, 79, 0.15) 82%,
    transparent 100%
  );
  opacity: 0.9;
}

/* A whisper of the same gold either side, which is what stops the rule
   looking like a stray 1px border between two unrelated words. */
.enm-logo {
  position: relative;
  gap: 0.875rem;
}

.enm-logo__place { position: relative; }

.enm-logo__place::before {
  content: "";
  position: absolute;
  left: -0.4375rem;
  top: 50%;
  width: 0.25rem;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right, var(--enm-gold-veil), transparent);
}

.enm-footer__brand .enm-logo__rule {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 18%,
    rgba(212, 175, 116, 0.85) 50%,
    rgba(255, 255, 255, 0.1) 82%,
    transparent 100%
  );
}

/* ==========================================================================
   36. Back to top
   Themed to match the site, and held back until the visitor is actually near
   the foot of the page. Astra reveals it after a fixed scroll distance, which
   on a ninety card archive means it floats over the grid almost the whole way
   down and covers a card.
   ========================================================================== */

#ast-scroll-top {
  width: 2.75rem !important;
  height: 2.75rem !important;
  right: var(--enm-gutter) !important;
  bottom: var(--enm-gutter) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;

  /* Chevron only. No disc, no border, no shadow. The tap target stays a
     comfortable size, it just is not drawn. */
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--enm-gold) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px);
  transition: opacity var(--enm-dur) var(--enm-ease),
              transform var(--enm-dur) var(--enm-ease-out),
              visibility var(--enm-dur) var(--enm-ease),
              color var(--enm-dur) var(--enm-ease);
}

body.enm-at-foot #ast-scroll-top {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus {
  background: none !important;
  background-color: transparent !important;
  color: var(--enm-gold-deep) !important;
  transform: translateY(-2px);
  outline: 0;
}

#ast-scroll-top:active { transform: scale(0.93); }

#ast-scroll-top .ast-icon { display: grid; place-items: center; line-height: 0; }

/* Without a disc behind it the mark needs a little more presence, and a soft
   shadow so it stays legible over a photograph as well as over the footer. */
#ast-scroll-top .ast-arrow-svg {
  width: 20px !important;
  height: auto !important;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px rgba(13, 11, 8, 0.35));
}

@media (prefers-reduced-motion: reduce) {
  #ast-scroll-top { transition: opacity 0ms, visibility 0ms; transform: none; }
}

/* ==========================================================================
   37. Wordmark, larger with a blended rule
   A hairline that starts under the initials and dissolves to nothing past the
   city. It reads as a flourish rather than a border because it never meets an
   edge at either end.
   ========================================================================== */

.enm-logo {
  position: relative;
  gap: 1rem;
  padding-bottom: 0.5rem;
}

.enm-logo__mark {
  font-size: 2.125rem;
  letter-spacing: 0.015em;
}

.enm-logo__place {
  font-size: 0.875rem;
  letter-spacing: 0.34em;
}

.enm-logo__rule { height: 2rem; }

/* The blended rule. Gold at the start, gone by the end. */
.enm-logo::after {
  content: "";
  position: absolute;
  left: 0;
  right: -8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(176, 137, 79, 0.85) 0%,
    rgba(176, 137, 79, 0.55) 22%,
    rgba(176, 137, 79, 0.22) 55%,
    rgba(176, 137, 79, 0) 100%
  );
  pointer-events: none;
}

/* A second, softer pass sitting just under it gives the line depth without
   ever reading as two lines. */
.enm-logo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 6%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(176, 137, 79, 0.22) 0%,
    rgba(176, 137, 79, 0.06) 40%,
    transparent 100%
  );
  filter: blur(1.5px);
  pointer-events: none;
}

/* On the dark footer the same rule needs a lighter mix to stay visible. */
.enm-footer__brand .enm-logo__mark { font-size: 1.875rem; }

.enm-footer__brand .enm-logo::after {
  background: linear-gradient(
    to right,
    rgba(212, 175, 116, 0.9) 0%,
    rgba(212, 175, 116, 0.45) 25%,
    rgba(212, 175, 116, 0.15) 60%,
    transparent 100%
  );
}

.enm-footer__brand .enm-logo::before {
  background: linear-gradient(
    to right,
    rgba(212, 175, 116, 0.3) 0%,
    rgba(212, 175, 116, 0.08) 40%,
    transparent 100%
  );
}

@media (max-width: 480px) {
  .enm-logo { gap: 0.625rem; padding-bottom: 0.375rem; }
  .enm-logo__mark { font-size: 1.625rem; }
  .enm-logo__rule { height: 1.5rem; }
  .enm-logo__place { font-size: 0.75rem; letter-spacing: 0.26em; }
}

/* Give the brand column enough room that the paragraph reads as a paragraph
   rather than a stack of short lines. */
@media (min-width: 1000px) {
  .enm-footer__top { grid-template-columns: 1.6fr repeat(4, 1fr); }
}

/* ==========================================================================
   38. Footer columns on a phone
   Three stacked lists of nine links each makes for a very long scroll at the
   foot of the page. Two up halves it. The brand block keeps the full width,
   since the paragraph and the number both need the room.
   ========================================================================== */

@media (max-width: 699px) {
  .enm-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--enm-s-6) var(--enm-s-5);
    padding-bottom: var(--enm-s-6);
  }

  .enm-footer__brand { grid-column: 1 / -1; }

  .enm-footer__col a {
    display: inline-block;
    line-height: 1.45;
  }

  .enm-footer__col li + li { margin-top: 0.625rem; }

  /* The bottom strip stacks rather than trying to sit on one line. */
  .enm-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--enm-s-4);
  }

  .enm-footer__meta { flex-wrap: wrap; white-space: normal; }
}

/* ==========================================================================
   39. Footer meta separators
   A dot between each item, drawn rather than inherited from a list marker so
   it sits on the optical centre of the line instead of the baseline.
   ========================================================================== */

.enm-footer__meta {
  display: flex;
  align-items: center;
  gap: 0;
}

.enm-footer__meta > * { display: inline-flex; align-items: center; }

.enm-footer__meta > * + * { margin-left: 1.125rem; position: relative; }

.enm-footer__meta > * + *::before {
  content: "";
  position: absolute;
  left: -0.625rem;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}

/* The age mark opens the row, so it never takes a separator. */
.enm-footer__meta .enm-footer__age { margin-left: 0; }
.enm-footer__meta .enm-footer__age::before { display: none; }

/* Anything the footer prints as a list item keeps its marker off. */
.enm-footer li { list-style: none; }

/* The separator rule above sets inline-flex on every child of the meta row,
   which overrode the age badge's own grid centring and pushed "18+" to the
   flex start. It gets its centring back explicitly. */
.enm-footer__meta .enm-footer__age,
.enm-footer .enm-footer__age {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  line-height: 1;
  font-size: 11px;
  letter-spacing: 0.01em;
  text-align: center;
  flex: 0 0 auto;
}

/* Panel headings only. Set in the display serif by the heading rule, so they
   carry a little more size well without the panel contents changing. */
.enm .enm-panel__title,
.enm-panel .enm-panel__title {
  font-size: 17px;
  letter-spacing: 0.11em;
}

/* ==========================================================================
   40. Search field
   ========================================================================== */

.enm-filterbar__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  margin-bottom: 0.5rem;
  padding-inline: 1rem;
  border-radius: var(--enm-r-lg);
  background: var(--enm-surface);
  border: 1px solid var(--enm-line);
  box-shadow:
    0 1px 2px rgba(23, 20, 15, 0.04),
    0 10px 28px rgba(23, 20, 15, 0.055);
  transition: border-color var(--enm-dur) var(--enm-ease);
}

.enm-filterbar__search:focus-within { border-color: var(--enm-gold); }

.enm-filterbar__search > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--enm-ink-faint);
}

.enm-filterbar__search:focus-within > svg { color: var(--enm-gold-deep); }

.enm-filterbar__search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: none;
  font-family: var(--enm-font-body);
  font-size: 16px;
  color: var(--enm-ink);
  padding: 0;
}

.enm-filterbar__search input::placeholder { color: var(--enm-ink-faint); }

/* Safari draws its own clear affordance on a search input. */
.enm-filterbar__search input::-webkit-search-decoration,
.enm-filterbar__search input::-webkit-search-cancel-button,
.enm-filterbar__search input::-webkit-search-results-button { -webkit-appearance: none; display: none; }

.enm-filterbar__search-clear {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--enm-surface-sunk);
  color: var(--enm-ink-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.enm-filterbar__search-clear[hidden] { display: none; }
.enm-filterbar__search-clear svg { width: 11px; height: 11px; }
.enm-filterbar__search-clear:hover { background: var(--enm-live-tint); color: var(--enm-live); }

/* ==========================================================================
   41. Duo grid at two up
   The panel is far narrower than the page, so an auto-fill minimum that works
   on desktop collapsed to a single very tall card on a phone.
   ========================================================================== */

@media (max-width: 599px) {
  .enm-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .enm-grid--duo .enm-card__name,
  .enm-grid--duo .enm-card__price { font-size: var(--enm-fs-sm); }
  .enm-grid--duo .enm-card__meta { font-size: 11px; }
}

/* ==========================================================================
   42. Collapsing panel
   A native details element. Closed on load, and the contents stay in the
   markup so search engines still read the list.
   ========================================================================== */

.enm-panel--collapse { padding: 0; overflow: hidden; }

.enm-panel__summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: var(--enm-s-5);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--enm-dur) var(--enm-ease);
}

.enm-panel__summary::-webkit-details-marker { display: none; }
.enm-panel__summary::marker { content: ""; }

.enm-panel__summary .enm-panel__title { margin: 0; }

.enm-panel__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding-inline: 0.375rem;
  border-radius: var(--enm-r-pill);
  background: var(--enm-gold-tint);
  color: var(--enm-gold-deep);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.enm-panel__chev {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--enm-ink-soft);
  flex: 0 0 auto;
  transition: transform var(--enm-dur) var(--enm-ease);
}

.enm-panel--collapse[open] .enm-panel__chev { transform: rotate(180deg); }
.enm-panel--collapse[open] .enm-panel__summary { border-bottom: 1px solid var(--enm-line); }

@media (hover: hover) {
  .enm-panel__summary:hover { background: var(--enm-canvas-warm); }
  .enm-panel__summary:hover .enm-panel__chev { color: var(--enm-gold-deep); }
}

.enm-panel__summary:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: -2px;
}

.enm-panel__body { padding: var(--enm-s-5); }
.enm-panel__body .enm-panel__foot { margin-bottom: 0; }

/* Astra gives every button generous padding, which inflated a box that was
   given a width and a height but no padding reset, so a 50% radius drew an
   ellipse rather than a circle. */
.enm-filterbar__search .enm-filterbar__search-clear {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0 !important;
  margin: 0;
  border: 0;
  flex: 0 0 1.75rem;
  aspect-ratio: 1;
  line-height: 0;
}

.enm-filterbar__search .enm-filterbar__search-clear svg {
  width: 12px;
  height: 12px;
  display: block;
}

.enm-filterbar__search .enm-filterbar__search-clear:focus,
.enm-filterbar__search .enm-filterbar__search-clear:active {
  background: var(--enm-surface-sunk);
  color: var(--enm-ink-muted);
  outline: none;
}

.enm-filterbar__search .enm-filterbar__search-clear:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   43. Control states, consolidated

   Three states a control can be in, each visually distinct:
     open      the panel is showing        gold outline, champagne fill
     active    it holds selections         dark pill, white label
     engaged   location is in use          gold outline, champagne fill

   Placed last on purpose. The pinning rules earlier in this file deliberately
   hold the resting colours against Astra, and they match on specificity, so
   these have to come after them to win.
   ========================================================================== */

.enm-filterbar .enm-facet__toggle[aria-expanded="true"],
.enm-filterbar .enm-facet__toggle[aria-expanded="true"]:focus,
.enm-filterbar .enm-facet__toggle[aria-expanded="true"]:hover {
  background-color: var(--enm-gold-tint);
  border-color: var(--enm-gold);
  color: var(--enm-gold-deep);
  -webkit-text-fill-color: var(--enm-gold-deep);
}

.enm-filterbar .enm-facet__toggle[aria-expanded="true"] .enm-facet__chev {
  color: var(--enm-gold-deep);
  opacity: 1;
}

/* Selections win over merely being open: a dark pill reads as "this is doing
   something" where the champagne fill only reads as "this is open". */
.enm-filterbar .enm-facet.is-active .enm-facet__toggle,
.enm-filterbar .enm-facet.is-active .enm-facet__toggle[aria-expanded="true"],
.enm-filterbar .enm-facet.is-active .enm-facet__toggle:hover,
.enm-filterbar .enm-facet.is-active .enm-facet__toggle:focus {
  background-color: var(--enm-ink-strong);
  border-color: var(--enm-ink-strong);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.enm-filterbar .enm-facet.is-active .enm-facet__chev { color: rgba(255, 255, 255, 0.75); }

/* A checked row inside a panel should be obvious at a glance. */
.enm-facet__opt:has(input:checked) {
  background: var(--enm-gold-tint);
  color: var(--enm-ink-strong);
  font-weight: 600;
}

/* Every control acknowledges the press itself, then releases. */
.enm-facet__toggle:active,
.enm-finder__locate:active,
.enm-filterbar__radius:active,
.enm-pill:active,
.enm-pagernav__btn:active,
.enm-btn:active,
.enm-chip:active,
.menu-toggle:active,
.enm-panel__summary:active {
  transform: scale(0.975);
  transition: transform 90ms var(--enm-ease);
}

/* And the open panel gets a gold edge so it reads as attached to its button. */
.enm-facet__panel { border-color: var(--enm-gold-veil); }

/* ==========================================================================
   44. Hero finder without the distance control
   Three controls rather than four. The area select takes the freed width,
   which stops "Choose an area" truncating mid word.
   ========================================================================== */

.enm-finder--hero .enm-finder__row { grid-template-columns: 1fr 1fr; }

.enm-finder--hero .enm-finder__field { grid-column: auto; min-width: 0; }

@media (min-width: 720px) {
  .enm-finder--hero .enm-finder__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .enm-finder--hero .enm-finder__go { grid-column: auto; }
}

/* ==========================================================================
   45. Hero vertical spacing
   The order changed, so the old margins no longer sat between the right
   things: the buttons ended up flush against the stat panels. One rhythm,
   set on the elements that now follow each other.
   ========================================================================== */

.enm-hero__title { margin-bottom: var(--enm-s-5); }

.enm-finder--hero {
  margin-top: 0;
  margin-bottom: var(--enm-s-6);
}

.enm-hero__trust { margin-bottom: 0; }

.enm-hero__actions,
.enm-hero .enm-hero__actions {
  margin-top: var(--enm-s-6);
  margin-bottom: 0;
}

@media (max-width: 599px) {
  .enm-finder--hero { margin-bottom: var(--enm-s-5); }
  .enm-hero__actions,
  .enm-hero .enm-hero__actions { margin-top: var(--enm-s-5); margin-bottom: 0; }
}

/* ==========================================================================
   46. Area preview blocks on the locations hub
   ========================================================================== */

.enm-areablock {
  padding-block: var(--enm-band);
  border-bottom: 1px solid var(--enm-line);
}

.enm-areablock:first-of-type { padding-top: 0; }

.enm-areablock .enm-section-head { margin-bottom: var(--enm-s-5); }

.enm-areablock__title {
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-xl);
  font-weight: 500;
  margin: 0 0 var(--enm-s-2);
  line-height: 1.15;
}

.enm-areablock__title a { color: var(--enm-ink-strong); }
.enm-areablock__title a:hover { color: var(--enm-gold-deep); }

.enm-areablock .enm-section-head p {
  margin: 0;
  max-width: 60ch;
  color: var(--enm-ink-soft);
  font-size: var(--enm-fs-sm);
  line-height: 1.6;
}

@media (max-width: 599px) {
  .enm-areablock { padding-block: var(--enm-s-6); }
  .enm-areablock__title { font-size: var(--enm-fs-lg); }
  .enm-areablock .enm-section-head { flex-direction: column; align-items: flex-start; gap: var(--enm-s-3); }
}

/* ==========================================================================
   47. Pagination spacing
   It sat 68px below the grid but only 31px above whatever followed, so it read
   as floating loose rather than belonging to the list it pages through. Even
   space, and closer to the grid than to the next block.
   ========================================================================== */

.enm-pagination {
  margin-top: var(--enm-s-6);
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .enm-pagination { margin-top: var(--enm-s-7); }
}

/* ==========================================================================
   48. Area tiles and the tail
   Twelve prominent tiles with counts, then every remaining area as a chip.
   All forty five links are still on the page; they just take a fraction of
   the height the A to Z index needed.
   ========================================================================== */

.enm-areatiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px)  { .enm-areatiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .enm-areatiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; } }
@media (min-width: 1200px) { .enm-areatiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.enm-areatile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--enm-r);
  background: var(--enm-surface);
  border: 1px solid var(--enm-line);
  transition: border-color var(--enm-dur) var(--enm-ease),
              transform var(--enm-dur) var(--enm-ease-out),
              box-shadow var(--enm-dur) var(--enm-ease);
}

.enm-areatile__name {
  font-size: var(--enm-fs-sm);
  font-weight: 500;
  color: var(--enm-ink);
  line-height: 1.3;
  min-width: 0;
}

.enm-areatile__count {
  flex: 0 0 auto;
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  color: var(--enm-gold-deep);
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .enm-areatile:hover {
    border-color: var(--enm-gold);
    transform: translateY(-2px);
    box-shadow: var(--enm-e-2);
  }
}

.enm-areatile:active { transform: scale(0.98); }

/* The tail */
.enm-arearest__label {
  margin: var(--enm-s-6) 0 var(--enm-s-3);
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-faint);
}

.enm-arearest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.enm-arearest a {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--enm-r-pill);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.7);
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-muted);
  transition: border-color var(--enm-dur) var(--enm-ease),
              color var(--enm-dur) var(--enm-ease);
}

@media (hover: hover) {
  .enm-arearest a:hover { border-color: var(--enm-gold); color: var(--enm-ink-strong); }
}

/* Collapsible tail for the remaining areas. Closed on load; the links stay in
   the markup either way, so nothing is hidden from a crawler. */
.enm-arearest-wrap { margin-top: var(--enm-s-5); }

.enm-arearest__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.enm-arearest__summary::-webkit-details-marker { display: none; }
.enm-arearest__summary::marker { content: ""; }

.enm-arearest-wrap .enm-arearest__label { margin: 0; }

.enm-arearest__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding-inline: 0.375rem;
  border-radius: var(--enm-r-pill);
  background: var(--enm-gold-tint);
  color: var(--enm-gold-deep);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.enm-arearest__chev {
  width: 15px;
  height: 15px;
  color: var(--enm-ink-soft);
  transition: transform var(--enm-dur) var(--enm-ease);
}

.enm-arearest-wrap[open] .enm-arearest__chev { transform: rotate(180deg); }
.enm-arearest-wrap .enm-arearest { padding-top: 0.5rem; }

.enm-arearest__summary:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: 2px;
  border-radius: var(--enm-r-sm);
}

@media (hover: hover) {
  .enm-arearest__summary:hover .enm-arearest__label,
  .enm-arearest__summary:hover .enm-arearest__chev { color: var(--enm-gold-deep); }
}

/* ==========================================================================
   49. Area tiles with a face
   One column on a phone. A thumbnail, a name and a count will not fit on one
   line at two up on a 393px screen, and truncating "High Str Kensington" to
   "High Str Kens..." is worse than a taller list.
   ========================================================================== */

.enm-areatiles { grid-template-columns: 1fr; }

@media (min-width: 560px)  { .enm-areatiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .enm-areatiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .enm-areatiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.enm-areatile {
  gap: 0.75rem;
  min-height: 0;
  padding: 0.5rem 0.875rem 0.5rem 0.5rem;
}

.enm-areatile__thumb {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--enm-r-sm);
  overflow: hidden;
  background: var(--enm-surface-sunk);
  display: block;
}

.enm-areatile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* One line, always. */
.enm-areatile__name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--enm-fs-base);
}

.enm-areatile__count { font-size: var(--enm-fs-sm); }

/* ==========================================================================
   50. The remaining areas
   A titled block with the busier of them showing, and a disclosure for the
   rest.
   ========================================================================== */

.enm-arearest-block {
  margin-top: var(--enm-s-6);
  padding-top: var(--enm-s-6);
  border-top: 1px solid var(--enm-line);
}

.enm-arearest-block__title {
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-lg);
  font-weight: 500;
  color: var(--enm-ink-strong);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}

.enm-arearest-block__sub {
  margin: 0 0 var(--enm-s-4);
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
  line-height: 1.55;
}

.enm-arearest { gap: 0.4375rem; }

.enm-arearest a {
  padding: 0.5rem 0.875rem;
  border-color: var(--enm-line);
  background: var(--enm-surface);
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-muted);
}

@media (hover: hover) {
  .enm-arearest a:hover {
    border-color: var(--enm-gold);
    background: var(--enm-gold-tint);
    color: var(--enm-gold-deep);
  }
}

.enm-arearest-wrap { margin-top: var(--enm-s-4); }

.enm-arearest__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed var(--enm-line-strong);
  border-radius: var(--enm-r-pill);
  transition: border-color var(--enm-dur) var(--enm-ease),
              background var(--enm-dur) var(--enm-ease);
}

.enm-arearest-wrap .enm-arearest__label {
  font-size: var(--enm-fs-sm);
  font-weight: 600;
  letter-spacing: var(--enm-track-wide);
  text-transform: none;
  color: var(--enm-ink-muted);
}

@media (hover: hover) {
  .enm-arearest__summary:hover {
    border-color: var(--enm-gold);
    background: var(--enm-gold-tint);
    border-style: solid;
  }
}

.enm-arearest-wrap[open] .enm-arearest__summary {
  border-style: solid;
  border-color: var(--enm-gold);
  background: var(--enm-gold-tint);
}

.enm-arearest-wrap[open] .enm-arearest__label { color: var(--enm-gold-deep); }
.enm-arearest-wrap > .enm-arearest { padding-top: var(--enm-s-4); }

/* The footer wordmark links home, like the one in the header. */
.enm-footer__brandlink {
  display: inline-block;
  text-decoration: none;
}

.enm-footer__brandlink:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: 4px;
  border-radius: var(--enm-r-xs);
}

@media (hover: hover) {
  .enm-footer__brandlink:hover .enm-logo__place { color: rgba(255, 255, 255, 0.8); }
  .enm-footer__brandlink:hover .enm-logo__mark { filter: brightness(1.12); }
}

/* ==========================================================================
   52. Booking page
   ========================================================================== */

.enm-bookcta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-5);
  padding: var(--enm-s-6);
  border-radius: var(--enm-r-xl);
  background: #0d0b08;
  border: 1px solid rgba(176, 137, 79, 0.4);
  box-shadow: 0 18px 44px rgba(13, 11, 8, 0.16);
}

.enm-bookcta__label {
  margin: 0 0 0.375rem;
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-gold);
}

.enm-bookcta__num {
  display: inline-block;
  font-family: var(--enm-font-display);
  font-size: clamp(1.875rem, 6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: #fff;
}

.enm-bookcta__num:hover { color: var(--enm-gold); }

.enm-bookcta__hours {
  margin: 0.5rem 0 0;
  font-size: var(--enm-fs-sm);
  color: rgba(255, 255, 255, 0.55);
}

.enm-bookcta__btn { flex: 0 0 auto; }

@media (max-width: 599px) {
  .enm-bookcta { padding: var(--enm-s-5); }
  .enm-bookcta__btn { width: 100%; }
}

/* Steps */
.enm-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--enm-s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: enm-step;
}

@media (min-width: 800px) { .enm-steps { grid-template-columns: repeat(3, 1fr); gap: var(--enm-s-6); } }

.enm-step {
  padding: var(--enm-s-5);
  border-radius: var(--enm-r-lg);
  background: var(--enm-surface);
  border: 1px solid var(--enm-line);
}

.enm-step__num {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--enm-s-4);
  border-radius: 50%;
  background: var(--enm-gold-tint);
  border: 1px solid var(--enm-gold-veil);
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-md);
  font-weight: 600;
  color: var(--enm-gold-deep);
  line-height: 1;
}

.enm-step__title {
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-lg);
  font-weight: 500;
  color: var(--enm-ink-strong);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.enm-step__body {
  margin: 0;
  font-size: var(--enm-fs-sm);
  line-height: 1.65;
  color: var(--enm-ink-muted);
}

/* Two column block */
.enm-bookgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--enm-s-6);
  align-items: start;
}

@media (min-width: 900px) { .enm-bookgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--enm-s-7); } }

.enm-checklist { list-style: none; margin: 0; padding: 0; }

.enm-checklist li {
  position: relative;
  padding: 0.625rem 0 0.625rem 1.75rem;
  border-bottom: 1px solid var(--enm-line);
  font-size: var(--enm-fs-base);
  color: var(--enm-ink-muted);
  line-height: 1.5;
}

.enm-checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.enm-checklist li:first-child { padding-top: 0; }

.enm-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--enm-gold);
}

.enm-checklist li:first-child::before { top: 0.65em; }

/* FAQ */
.enm-faq {
  border-top: 1px solid var(--enm-line);
  max-width: var(--enm-wrap-text);
}

.enm-faq__item { border-bottom: 1px solid var(--enm-line); }

.enm-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-4);
  padding: var(--enm-s-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-lg);
  font-weight: 500;
  color: var(--enm-ink-strong);
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}

.enm-faq__q::-webkit-details-marker { display: none; }
.enm-faq__q::marker { content: ""; }

.enm-faq__q svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--enm-ink-soft);
  transition: transform var(--enm-dur) var(--enm-ease);
}

.enm-faq__item[open] .enm-faq__q svg { transform: rotate(180deg); }
.enm-faq__item[open] .enm-faq__q { color: var(--enm-gold-deep); }

.enm-faq__a { padding: 0 0 var(--enm-s-5); }

.enm-faq__a p {
  margin: 0;
  font-size: var(--enm-fs-base);
  line-height: var(--enm-lh-body);
  color: var(--enm-ink-muted);
  max-width: 62ch;
}

@media (hover: hover) {
  .enm-faq__q:hover { color: var(--enm-gold-deep); }
  .enm-faq__q:hover svg { color: var(--enm-gold-deep); }
}

/* ==========================================================================
   53. Header submenus
   ========================================================================== */

.main-header-menu .sub-menu {
  min-width: 15rem;
  padding: 0.5rem !important;
  border-radius: var(--enm-r) !important;
  border: 1px solid var(--enm-line) !important;
  background: var(--enm-surface) !important;
  box-shadow: var(--enm-e-3) !important;
}

.main-header-menu .sub-menu > li > a {
  display: flex !important;
  align-items: center;
  padding: 0.5625rem 0.75rem !important;
  border-radius: var(--enm-r-sm);
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-sm) !important;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--enm-ink-muted) !important;
  line-height: 1.4 !important;
  border-bottom: 0 !important;
  transition: background var(--enm-dur) var(--enm-ease),
              color var(--enm-dur) var(--enm-ease);
}

.main-header-menu .sub-menu > li > a::after { display: none; }

@media (hover: hover) {
  .main-header-menu .sub-menu > li > a:hover {
    background: var(--enm-gold-tint);
    color: var(--enm-gold-deep) !important;
  }
}

/* A small caret on the parent so it reads as having more behind it. */
@media (min-width: 922px) {
  .main-header-menu > li.menu-item-has-children > a::before {
    content: "";
    position: absolute;
    right: 0.25rem;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
  }

  .main-header-menu > li.menu-item-has-children > a { padding-right: 1.5rem !important; }
}

/* On a phone the submenu is an indented list rather than a floating panel. */
@media (max-width: 921px) {
  .main-header-bar-navigation .sub-menu {
    box-shadow: none !important;
    border: 0 !important;
    border-left: 1px solid var(--enm-line) !important;
    border-radius: 0 !important;
    margin: 0 0 0.5rem 0.25rem !important;
    padding: 0 0 0 0.75rem !important;
    background: transparent !important;
  }

  .main-header-bar-navigation .sub-menu > li > a {
    padding: 0.5rem 0 !important;
    font-size: var(--enm-fs-sm) !important;
  }
}

/* ==========================================================================
   54. Prose spacing

   `.enm-prose p { margin: 0 }` scores (0,1,1) and was beating the flow rule
   `.enm-prose > * + * { margin-top }` at (0,1,0), so no paragraph in any prose
   block had space above it. Every editorial section, profile description and
   archive outro on the site was running its paragraphs together.
   ========================================================================== */

.enm-prose > * + *,
.enm-prose p + p,
.enm-prose p + ul,
.enm-prose p + ol,
.enm-prose ul + p,
.enm-prose ol + p {
  margin-top: var(--enm-s-4);
}

.enm-prose > h2 + *,
.enm-prose > h3 + * { margin-top: var(--enm-s-3); }

/* A paragraph holding nothing but a button wants a clear break above it. */
.enm-prose p:has(> .enm-btn) { margin-top: var(--enm-s-5); }
.enm-prose .enm-btn { margin-top: 0.25rem; }

/* --------------------------------------------------------------------------
   The ghost button outline was too faint against white to read as an edge.
   -------------------------------------------------------------------------- */

.enm-btn--ghost,
.enm .enm-btn--ghost {
  border-color: rgba(23, 20, 15, 0.28);
}

@media (hover: hover) {
  .enm-btn--ghost:hover,
  .enm .enm-btn--ghost:hover {
    border-color: var(--enm-ink-strong);
    background: var(--enm-surface-sunk);
  }
}

/* ==========================================================================
   55. Mobile menu, corrected

   Two faults, both mine. The Book now pill had its dark background applied but
   its white label overridden by the generic mobile link colour further up this
   file, so it was near black on near black. And the submenu expanders were
   left as Astra ships them: a slate blue chevron in a grey box.
   ========================================================================== */

@media (max-width: 921px) {

  /* The call to action keeps its white label. */
  .main-header-bar-navigation .main-header-menu > li.enm-menu-cta > a,
  .main-header-bar-navigation .main-header-menu > li.enm-menu-cta > a:hover,
  .main-header-bar-navigation .main-header-menu > li.enm-menu-cta > a:focus,
  .main-header-bar-navigation .main-header-menu > li.enm-menu-cta > a:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    background: var(--enm-ink-strong) !important;
    border-bottom: 0 !important;
    border-radius: var(--enm-r-pill);
    margin-top: 1.25rem;
    padding: 0.9375rem 1.25rem !important;
    text-align: center;
    justify-content: center;
  }

  /* Submenu expander: no box, a gold chevron, and a real tap target. */
  .main-header-bar-navigation .ast-menu-toggle {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--enm-gold-deep) !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    -webkit-tap-highlight-color: transparent;
  }

  .main-header-bar-navigation .ast-menu-toggle svg,
  .main-header-bar-navigation .ast-menu-toggle .ast-icon {
    fill: currentColor !important;
    color: currentColor !important;
    width: 15px;
    height: 15px;
    transition: transform var(--enm-dur) var(--enm-ease);
  }

  .main-header-bar-navigation .ast-menu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Astra tints the row on tap. The link has its own state already. */
  .main-header-bar-navigation .menu-item:hover > .ast-menu-toggle,
  .main-header-bar-navigation .menu-item:focus-within,
  .main-header-bar-navigation .menu-item:hover,
  .main-header-bar-navigation .menu-item > a:hover,
  .main-header-bar-navigation .menu-item > a:focus {
    background: transparent !important;
  }

  /* The parent row and its expander share one line. */
  .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
    position: absolute;
    right: 0;
    top: 0;
  }

  .main-header-bar-navigation .menu-item-has-children { position: relative; }

  .main-header-bar-navigation .menu-item-has-children > a {
    padding-right: 3rem !important;
  }
}

/* ==========================================================================
   56. Navigation, consolidated

   Astra emits three separate arrow affordances per parent item: a span inside
   the link, a sibling button, and whatever the theme adds. I had added a
   fourth as a pseudo element, so desktop showed two carets side by side. One
   arrow, styled, and the rest switched off.
   ========================================================================== */

/* Only ever one arrow, and it is Astra's span so the toggle keeps working. */
.main-header-menu > li.menu-item-has-children > a::before { display: none !important; }
.main-header-menu .sub-menu .ast-icon { display: none !important; }
.main-header-menu .sub-menu .dropdown-menu-toggle { display: none !important; }

.main-header-menu .dropdown-menu-toggle {
  display: inline-flex !important;
  align-items: center;
  padding: 0 !important;
  margin-left: 0.4375rem;
  border: 0 !important;
  color: currentColor;
  opacity: 0.5;
  transition: opacity var(--enm-dur) var(--enm-ease),
              transform var(--enm-dur) var(--enm-ease);
}

.main-header-menu .dropdown-menu-toggle .ast-arrow-svg {
  width: 9px !important;
  height: auto !important;
  fill: currentColor;
}

.main-header-menu > li:hover > a .dropdown-menu-toggle { opacity: 1; }

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 922px) {

  .main-header-menu > li > a {
    display: inline-flex !important;
    align-items: center;
    padding-block: 0.5rem !important;
  }

  /* The call to action is a pill, not a full height column. */
  .main-header-menu > li.enm-menu-cta {
    display: flex;
    align-items: center;
    margin-left: 0.75rem;
  }

  .main-header-menu > li.enm-menu-cta > a,
  .main-header-menu > li.enm-menu-cta > a:hover,
  .main-header-menu > li.enm-menu-cta > a:focus {
    height: 2.5rem;
    padding: 0 1.375rem !important;
    border-radius: var(--enm-r-pill);
    background: var(--enm-ink-strong);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    letter-spacing: 0.09em;
    line-height: 1 !important;
  }

  .main-header-menu > li.enm-menu-cta > a:hover { background: var(--enm-gold-deep); }
  .main-header-menu > li.enm-menu-cta > a::after { display: none !important; }

  /* Submenu panel */
  .main-header-menu .sub-menu {
    min-width: 16rem;
    padding: 0.4375rem !important;
    margin-top: 0.25rem;
    border: 1px solid var(--enm-line) !important;
    border-radius: var(--enm-r-lg) !important;
    background: var(--enm-surface) !important;
    box-shadow:
      0 4px 10px rgba(23, 20, 15, 0.05),
      0 24px 48px rgba(23, 20, 15, 0.12) !important;
  }

  /* A hairline of gold across the top edge of the panel. */
  .main-header-menu .sub-menu::before {
    content: "";
    position: absolute;
    inset: 0 0.875rem auto;
    height: 1px;
    background: linear-gradient(to right,
      transparent, var(--enm-gold-veil) 25%, var(--enm-gold-veil) 75%, transparent);
  }

  .main-header-menu .sub-menu > li > a {
    padding: 0.5625rem 0.8125rem !important;
    border-radius: var(--enm-r-sm);
    font-size: var(--enm-fs-sm) !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--enm-ink-muted) !important;
    line-height: 1.4 !important;
  }

  .main-header-menu .sub-menu > li > a:hover {
    background: var(--enm-gold-tint);
    color: var(--enm-gold-deep) !important;
    padding-left: 1rem !important;
  }
}

/* Astra sizes header links to the full row height, which turned a pill into a
   tall oval. The link is pulled back to its own height and centred in the row. */
@media (min-width: 922px) {
  .main-header-menu > li.enm-menu-cta {
    align-self: center;
    align-items: center;
  }

  .main-header-menu > li.enm-menu-cta > a,
  .ast-nav-menu > li.enm-menu-cta > a.menu-link {
    height: 2.5rem !important;
    min-height: 0 !important;
    max-height: 2.5rem !important;
    line-height: 2.5rem !important;
    align-self: center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Astra's own link hover paints the menu its accent blue. The navigation has
   its own palette, so it is pinned across every state. */
.main-header-menu > li > a,
.main-header-menu > li > a:link,
.main-header-menu > li > a:visited {
  color: var(--enm-ink-muted) !important;
  -webkit-text-fill-color: var(--enm-ink-muted);
}

.main-header-menu > li > a:hover,
.main-header-menu > li > a:focus,
.main-header-menu > li:hover > a,
.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current-menu-ancestor > a {
  color: var(--enm-ink-strong) !important;
  -webkit-text-fill-color: var(--enm-ink-strong);
}

.main-header-menu > li.enm-menu-cta > a,
.main-header-menu > li.enm-menu-cta > a:link,
.main-header-menu > li.enm-menu-cta > a:visited,
.main-header-menu > li.enm-menu-cta > a:hover,
.main-header-menu > li.enm-menu-cta:hover > a {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.main-header-menu .sub-menu > li > a,
.main-header-menu .sub-menu > li > a:link,
.main-header-menu .sub-menu > li > a:visited {
  color: var(--enm-ink-muted) !important;
  -webkit-text-fill-color: var(--enm-ink-muted);
}

.main-header-menu .sub-menu > li > a:hover,
.main-header-menu .sub-menu > li:hover > a {
  color: var(--enm-gold-deep) !important;
  -webkit-text-fill-color: var(--enm-gold-deep);
}

/* The last item in each dropdown leads to the full index. Set apart with a
   rule above it so it reads as a destination rather than another term. */
.main-header-menu .sub-menu > li.enm-viewall {
  margin-top: 0.3125rem;
  padding-top: 0.3125rem;
  border-top: 1px solid var(--enm-line);
}

.main-header-menu .sub-menu > li.enm-viewall > a,
.main-header-menu .sub-menu > li.enm-viewall > a:link {
  color: var(--enm-gold-deep) !important;
  -webkit-text-fill-color: var(--enm-gold-deep);
  font-weight: 600;
}

/* ==========================================================================
   57. Hero background image

   Mobile takes a portrait crop; desktop waits for its own picture and simply
   does nothing until --enm-hero-desktop is set. The image runs up behind the
   header, so the header goes transparent and its marks turn light while the
   photograph is behind them.
   ========================================================================== */

@media (max-width: 921px) {

  .enm-hero-image .ast-primary-header-bar,
  .enm-hero-image .main-header-bar,
  .enm-hero-image #masthead {
    background: transparent !important;
    border-bottom: 0 !important;
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    z-index: 30;
  }

  /* The wordmark and the trigger sit on the photograph. */
  .enm-hero-image .enm-logo__mark {
    background: linear-gradient(155deg, #f0dcb4 0%, #e3c98f 30%, #d4b478 62%, #f0dcb4 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .enm-hero-image .enm-logo__place { color: rgba(255, 255, 255, 0.82); }
  .enm-hero-image .enm-logo__rule { background: rgba(255, 255, 255, 0.4); }
  .enm-hero-image .enm-logo::after,
  .enm-hero-image .enm-logo::before { opacity: 0.55; }

  .enm-hero-image .menu-toggle {
    background: rgba(13, 11, 8, 0.32) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* The hero itself. The scrim starts dark at the top so the header reads,
     then resolves to the page canvas before the search panel begins. */
  .enm-hero-image .enm-hero {
    position: relative;
    padding-top: 8.5rem;
    background-image:
      linear-gradient(
        to bottom,
        rgba(13, 11, 8, 0.62) 0%,
        rgba(13, 11, 8, 0.34) 22%,
        rgba(13, 11, 8, 0.12) 38%,
        rgba(250, 249, 246, 0.78) 56%,
        var(--enm-canvas) 70%
      ),
      var(--enm-hero-mobile, none);
    background-size: 100% 100%, cover;
    background-position: center top, center 12%;
    background-repeat: no-repeat, no-repeat;
  }

  /* The washes behind the frosted panels would muddy the photograph. */
  .enm-hero-image .enm-hero::before,
  .enm-hero-image .enm-hero::after { display: none; }

  .enm-hero-image .enm-hero__eyebrow {
    background: rgba(13, 11, 8, 0.35);
    border-color: rgba(255, 255, 255, 0.3);
    color: #f0dcb4;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .enm-hero-image .enm-hero__title {
    color: #fff;
    text-shadow: 0 2px 18px rgba(13, 11, 8, 0.45);
  }

  .enm-hero-image .enm-hero__title em { color: #f0dcb4; }
}

/* Desktop only paints once a picture has been supplied. */
@media (min-width: 922px) {

  .enm-hero-image .ast-primary-header-bar,
  .enm-hero-image .main-header-bar,
  .enm-hero-image #masthead {
    background: transparent !important;
    border-bottom: 0 !important;
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    z-index: 30;
  }

  .enm-hero-image .enm-hero {
    position: relative;
    padding-top: 11rem;

    /* The desktop picture is bright at the top, so the scrim there is light
       rather than dark: the navigation keeps its dark type and still reads.
       A dark scrim would mean recolouring the whole header per image. */
    background-image:
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.55) 7%,
        rgba(255, 255, 255, 0.12) 16%,
        rgba(250, 249, 246, 0.10) 44%,
        rgba(250, 249, 246, 0.82) 64%,
        var(--enm-canvas) 80%
      ),
      var(--enm-hero-desktop, none);
    background-size: 100% 100%, cover;
    background-position: center top, center 18%;
    background-repeat: no-repeat, no-repeat;
  }

  .enm-hero-image .enm-hero::before,
  .enm-hero-image .enm-hero::after { display: none; }

  /* The wordmark keeps its gold; everything else stays dark on the light
     top edge of the photograph. */
  .enm-hero-image .main-header-menu > li > a {
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.75);
  }

  .enm-hero-image .enm-hero__title {
    text-shadow: 0 2px 22px rgba(255, 255, 255, 0.55);
  }
}

/* ==========================================================================
   58. Header while the mobile menu is open

   The header is absolutely positioned on the home page so the hero image can
   run up behind it. An expanded menu then has nothing to push, so it rendered
   on top of the wordmark. While the menu is open the header returns to normal
   flow on a solid background and its marks go back to their usual colours.
   ========================================================================== */

@media (max-width: 921px) {

  body.enm-menu-open.enm-hero-image .ast-primary-header-bar,
  body.enm-menu-open.enm-hero-image .main-header-bar,
  body.enm-menu-open.enm-hero-image #masthead,
  .enm-hero-image #masthead:has(.main-header-bar-navigation.toggle-on) {
    position: relative !important;
    background: var(--enm-canvas) !important;
    border-bottom: 1px solid var(--enm-line) !important;
  }

  /* Back to the light-background palette. */
  body.enm-menu-open.enm-hero-image .enm-logo__mark {
    background: linear-gradient(155deg,
      #e3c98f 0%, var(--enm-gold-bright) 18%, var(--enm-gold) 44%,
      var(--enm-gold-deep) 68%, var(--enm-gold-bright) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  body.enm-menu-open.enm-hero-image .enm-logo__place { color: var(--enm-ink-soft); }
  body.enm-menu-open.enm-hero-image .enm-logo__rule { background: var(--enm-line-strong); }

  body.enm-menu-open.enm-hero-image .menu-toggle {
    background: var(--enm-surface) !important;
    border-color: var(--enm-gold) !important;
    color: var(--enm-gold-deep) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* The hero no longer needs to reserve room for a floating header. */
  body.enm-menu-open.enm-hero-image .enm-hero { padding-top: var(--enm-s-6); }
}

/* On a phone the expander button is the tap target, so Astra's inline arrow
   span beside the label is a second indicator for the same thing. */
@media (max-width: 921px) {
  .main-header-bar-navigation .dropdown-menu-toggle { display: none !important; }

  /* Centre the expander on its row rather than pinning it to the top. */
  .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
    top: 50%;
    transform: translateY(-50%);
    height: 2.5rem !important;
  }

  .main-header-bar-navigation .menu-item-has-children > a { padding-right: 3.25rem !important; }
}

/* ==========================================================================
   59. Mobile menu: tap targets and state colour

   The expander button is absolutely positioned over the right of the row. It
   comes after the link in the DOM, but without a stacking order the link was
   still catching the tap, so pressing the chevron navigated instead of opening
   the submenu. It now sits above the link and takes the full row height.
   ========================================================================== */

@media (max-width: 921px) {

  .main-header-bar-navigation .menu-item-has-children { position: relative; }

  .main-header-bar-navigation .menu-item-has-children > a {
    position: relative;
    z-index: 1;
    padding-right: 4rem !important;
  }

  /* Pinned to the parent row only. Stretching it to the bottom of the list
     item meant that once the submenu opened, the button covered the whole
     open list and its centred chevron floated over one of the child links. */
  .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
    position: absolute !important;
    right: 0;
    top: 0;
    bottom: auto;
    height: 49px !important;
    width: 3.75rem !important;
    transform: none;
    z-index: 3;
    display: grid !important;
    place-items: center;
    cursor: pointer;
  }

  /* --- State colour -----------------------------------------------------
     Astra tints an expanded row its own slate blue. The site has a palette,
     so the open row takes a champagne wash and a gold edge instead. */

  .main-header-bar-navigation .menu-item > a:hover,
  .main-header-bar-navigation .menu-item > a:focus,
  .main-header-bar-navigation .menu-item:hover > a,
  .main-header-bar-navigation .menu-item.ast-submenu-expanded > a,
  .main-header-bar-navigation .menu-item:focus-within > a {
    background: transparent !important;
  }

  /* Tint the parent row only. Tinting the whole list item put the submenu
     on a coloured panel and left the child links looking like loose pills. */
  .main-header-bar-navigation .menu-item.ast-submenu-expanded > a,
  .main-header-bar-navigation .menu-item:has(> .ast-menu-toggle[aria-expanded="true"]) > a {
    background: var(--enm-gold-tint) !important;
    border-radius: var(--enm-r-sm) var(--enm-r-sm) 0 0;
    color: var(--enm-gold-deep) !important;
    -webkit-text-fill-color: var(--enm-gold-deep);
    border-bottom-color: transparent !important;
    padding-left: 0.625rem !important;
  }

  .main-header-bar-navigation .menu-item.ast-submenu-expanded,
  .main-header-bar-navigation .menu-item:has(> .ast-menu-toggle[aria-expanded="true"]) {
    background: transparent !important;
  }

  /* Child links stay on the page background, never on a panel of their own. */
  .main-header-bar-navigation .sub-menu,
  .main-header-bar-navigation .sub-menu > li,
  .main-header-bar-navigation .sub-menu > li > a {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Nothing in the nested list needs its own arrow. */
  .main-header-bar-navigation .sub-menu .ast-icon,
  .main-header-bar-navigation .sub-menu .ast-menu-toggle,
  .main-header-bar-navigation .sub-menu .dropdown-menu-toggle { display: none !important; }

  /* The pressed state on the row, so a tap acknowledges itself. */
  .main-header-bar-navigation .menu-item > a:active {
    background: var(--enm-gold-tint) !important;
    border-radius: var(--enm-r-sm);
  }

  .main-header-bar-navigation .ast-menu-toggle:active {
    background: var(--enm-gold-tint) !important;
    border-radius: var(--enm-r-sm);
  }

  /* The nested list keeps a gold rule rather than a grey one. */
  .main-header-bar-navigation .sub-menu {
    border-left-color: var(--enm-gold-veil) !important;
  }

  .main-header-bar-navigation .sub-menu > li > a:active {
    background: var(--enm-gold-tint) !important;
    border-radius: var(--enm-r-sm);
  }
}

/* ==========================================================================
   60. Filter to results seam

   The bar and the grid it drives are one unit, a control and its output, so
   the distance between them should read tighter than the seam between two
   unrelated bands. Two things were stacking: the bar carries a bottom margin
   for when something follows it inside the same band, and the band itself
   carries its own bottom padding. Last in the band, both applied.
   ========================================================================== */

.enm-wrap > .enm-filterbar:last-child { margin-bottom: 0; }

.enm-section:has(> .enm-wrap > .enm-filterbar:last-child) {
  padding-bottom: 1.25rem;
}

/* ==========================================================================
   61. Page head count

   The tally used to sit on its own line below the lede, spending a full band
   of height to carry two words. It rides the breadcrumb row instead, where
   there is already empty space to the right, and is set as a marker rather
   than a sentence so it reads as metadata and not as copy.
   ========================================================================== */

.enm-pagehead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-3);
  flex-wrap: wrap;
  margin-bottom: var(--enm-s-4);
}

.enm-pagehead__top .enm-crumbs { margin-bottom: 0; }

.enm-pagehead__meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.3125rem 0.6875rem;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r-pill);
  background: var(--enm-surface);
  font-size: 0.75rem;
  line-height: 1;
  color: var(--enm-ink-soft);
  white-space: nowrap;
}

.enm-pagehead__count {
  font-weight: 600;
  color: var(--enm-ink);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Whatever ends the page head, its own bottom margin used to stack on the
   head's bottom padding. It was hidden while the count sat last and carried no
   margin; moving the count onto the crumb row exposed it under the lede. The
   head's padding alone sets the distance to the rule. */
.enm-pagehead .enm-wrap > :last-child { margin-bottom: 0; }

/* On a phone a four step trail fills the row on its own and pushes the count
   onto a line of its own. Only the tail of the path earns that space: the last
   link and the current page. The full trail stays in the markup for assistive
   tech, and the BreadcrumbList in the JSON-LD is what search reads, so nothing
   is lost by hiding the head of it here.

   The pattern is always link, separator, link, separator, current, so keeping
   the final three children always leaves a link, a separator and the current
   page rather than a stray slash. */
@media (max-width: 600px) {
  .enm-crumbs > *:not(:nth-last-child(-n+3)) { display: none; }

  .enm-pagehead__meta {
    padding: 0.25rem 0.5625rem;
    font-size: 0.6875rem;
    gap: 0.3125rem;
  }

  .enm-pagehead__top { gap: var(--enm-s-2); }
}

/* ==========================================================================
   62. Trailing margins at band edges

   Every band pads its own bottom edge. A block that happens to end one was
   adding its own trailing margin on top of that padding, so the seam came out
   at roughly twice the intended distance. It showed up three times separately
   in this build, under the filter bar, under the page head lede and under the
   closing note on six templates, which makes it a rule rather than a patch.

   Scoped to .enm-section and .enm-pagehead because those are the boxes that
   carry the padding. A .enm-wrap used anywhere without it keeps its spacing.
   ========================================================================== */

.enm-section > .enm-wrap > :last-child,
.enm-pagehead > .enm-wrap > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   63. Casting page

   Two ways in, side by side, with the email leading because applications
   arrive with photographs attached and a phone call cannot carry those.
   ========================================================================== */

.enm-castcta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--enm-s-4);
}

@media (min-width: 720px) {
  .enm-castcta { grid-template-columns: 1fr 1fr; }
}

.enm-castcta__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--enm-s-5);
  border: 1px solid var(--enm-line-strong);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
  transition: background-color 200ms var(--enm-ease),
              border-color 200ms var(--enm-ease),
              box-shadow 200ms var(--enm-ease),
              transform 120ms var(--enm-ease);
}

.enm-castcta a.enm-castcta__item:hover,
.enm-castcta a.enm-castcta__item:focus {
  background-color: var(--enm-gold-tint);
  border-color: var(--enm-gold);
  box-shadow: 0 4px 18px rgba(176, 137, 79, 0.22);
}

.enm-castcta a.enm-castcta__item:active {
  background-color: var(--enm-gold-veil);
  border-color: var(--enm-gold-deep);
  transform: scale(0.99);
}

.enm-castcta .enm-castcta__label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--enm-gold-deep);
}

.enm-castcta .enm-castcta__value {
  font-family: var(--enm-font-display);
  font-size: clamp(1.125rem, 3.4vw, 1.5rem);
  line-height: 1.15;
  color: var(--enm-ink-strong);
  word-break: break-word;
}

.enm-castcta .enm-castcta__note {
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
}

/* What the agency puts up. Four across on a wide screen, two on a phone, so
   the cards keep a comfortable reading width at both ends. */
.enm-offergrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--enm-s-4);
}

@media (min-width: 560px) { .enm-offergrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .enm-offergrid { grid-template-columns: repeat(4, 1fr); } }

.enm-offer {
  padding: var(--enm-s-5);
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
}

.enm-offer__title {
  margin: 0 0 var(--enm-s-2);
  font-family: var(--enm-font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--enm-ink-strong);
}

.enm-offer__body {
  margin: 0;
  font-size: var(--enm-fs-sm);
  line-height: 1.6;
  color: var(--enm-ink-muted);
}

/* ==========================================================================
   64. Canvas width inside Astra's container

   Astra lays .ast-container out as a flex row. Each .enm-canvas is a flex item,
   so a template built from several of them had them dealt out as columns side
   by side: the casting page put its five bands in five vertical strips about
   240px wide, and booking did the same with four. Templates whose canvas holds
   a wide grid hid it, which is why it went unnoticed.

   Turning the container back into a block is enough. Scoped with :has so it
   only applies where our own canvases are the children, leaving Astra's own
   layouts alone.
   ========================================================================== */

.ast-container:has(> .enm-canvas) {
  display: block;
}

.ast-container > .enm-canvas {
  width: 100%;
}

/* ==========================================================================
   65. Band seams across a colour change

   Consecutive canvases collapse the second one's top padding so a seam is
   padded once rather than twice. That is right only while both bands share a
   ground: the join is invisible and one gap reads as one gap.

   Where the colour changes the join is a drawn edge, and both sides need their
   own inset or the content sits flush against it. The booking and casting
   pages alternate white and warm the whole way down, so every seam on them was
   a change, and every one had the top half of its padding removed. There was
   already a --warm exception here but it scored lower than the collapse rule
   and never applied.

   Both selectors below carry an extra class so they outscore the collapse
   outright rather than relying on source order.
   ========================================================================== */

.enm-canvas + .enm-canvas.enm-canvas--warm > .enm-section:first-child,
.enm-canvas--warm + .enm-canvas:not(.enm-canvas--warm) > .enm-section:first-child {
  padding-top: var(--enm-band);
}

/* ==========================================================================
   66. Button borders on hover

   Astra's inline CSS repaints border-color on every <button> at :hover and
   :focus, and main.min.css does the same at :active, all to the theme accent
   (#045cb4). Variants that restate their own border on hover outscored it and
   were never affected, which is why only the solid buttons showed a blue ring:
   they keep the transparent border from the base rule, and nothing was
   defending it.

   Every variant now pins its own border in every state. Ghost comes second so
   it still wins the tie against the base.
   ========================================================================== */

.enm-btn,
.enm-btn:hover,
.enm-btn:focus,
.enm-btn:active {
  border-color: transparent;
}

.enm-btn--ghost,
.enm-btn--ghost:focus,
.enm-btn--ghost:active {
  border-color: var(--enm-line-strong);
}

.enm-btn--ghost:hover {
  border-color: var(--enm-ink);
}

/* ==========================================================================
   67. FAQ width

   The list was capped at a text measure, which suits a column of prose but not
   a set of rows: the questions and their dividers stopped 330px short of the
   heading above them and the note below, leaving the band looking ragged down
   its right edge.

   The rows now run the full width of the band and the measure moves to the
   answer paragraph, which is the only part actually read as prose.
   ========================================================================== */

.enm-faq { max-width: none; }

.enm-faq__a p { max-width: var(--enm-wrap-text); }

/* ==========================================================================
   68. Prose width

   The measure cap held this prose to 784px while the section head, the FAQ
   rows and the closing note beside it all ran to 1115px, so the last block of
   every one of those pages trailed off short of its neighbours.

   The cap comes off and the prose aligns with the band. Line length goes up in
   exchange, so if the running text starts to read long the fix is to bring
   --enm-wrap-text back here rather than to reinstate the modifier.
   ========================================================================== */

.enm-prose--measure { max-width: none; }

/* Astra's inline rule sets background-color and color on button:focus as well
   as border-color, and focus survives a click. So a tapped button kept the
   accent fill until you clicked elsewhere. Each variant pins its own fill and
   text in every state, with the pressed look matching hover rather than
   inventing a third appearance. */

.enm-btn--primary,
.enm-btn--primary:focus {
  background: var(--enm-ink-strong);
  color: var(--enm-ink-invert);
}

.enm-btn--primary:hover,
.enm-btn--primary:active {
  background: var(--enm-gold-deep);
  color: var(--enm-ink-invert);
}

.enm-btn--gold,
.enm-btn--gold:focus {
  background: var(--enm-gold);
  color: #fff;
}

.enm-btn--gold:hover,
.enm-btn--gold:active {
  background: var(--enm-gold-deep);
  color: #fff;
}

.enm-btn--ghost,
.enm-btn--ghost:focus {
  background: transparent;
  color: var(--enm-ink);
}

.enm-btn--ghost:hover,
.enm-btn--ghost:active {
  background: var(--enm-surface-sunk);
  color: var(--enm-ink);
}

/* ==========================================================================
   69. Booking hand off card

   A profile hands off here with ?for=<slug>; arriving without one shows the
   same card with the picker as its subject instead of a name.

   Laid out on named areas so the phone gets a compact two column head, portrait
   beside the details, with the call, the picker and the note running full width
   beneath. Desktop keeps the portrait alongside the whole stack.
   ========================================================================== */

.enm-forcard {
  position: relative;
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-template-areas:
    "thumb head"
    "call  call"
    "pick  pick"
    "note  note";
  gap: 0.625rem 0.875rem;
  align-items: start;
  padding: 0.9375rem;
  border: 1px solid var(--enm-gold-veil);
  border-radius: var(--enm-r-lg);
  background:
    linear-gradient(180deg, var(--enm-gold-tint) 0%, var(--enm-surface) 42%),
    var(--enm-surface);
  box-shadow: 0 10px 34px rgba(23, 20, 15, 0.09);
}

@media (min-width: 640px) {
  .enm-forcard {
    grid-template-columns: 8.5rem 1fr;
    grid-template-areas:
      "thumb head"
      "thumb call"
      "thumb pick"
      "thumb note";
    align-content: center;
    gap: 0.625rem 1.5rem;
    padding: var(--enm-s-6);
  }
}

.enm-forcard__thumb {
  grid-area: thumb;
  display: block;
  overflow: hidden;
  border-radius: var(--enm-r-sm);
  background: var(--enm-surface-sunk);
  aspect-ratio: 3 / 4;
  align-self: center;
  box-shadow: 0 4px 16px rgba(23, 20, 15, 0.14);
}

@media (min-width: 640px) { .enm-forcard__thumb { border-radius: var(--enm-r); } }

.enm-forcard__thumb--blank {
  display: grid;
  place-items: center;
  border: 1px dashed var(--enm-line-strong);
  background: var(--enm-surface);
  box-shadow: none;
  color: var(--enm-ink-faint);
}

.enm-forcard__thumb--blank svg { width: 42%; height: auto; }

.enm-forcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.enm-forcard__initial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--enm-font-display);
  font-size: 2rem;
  color: var(--enm-ink-faint);
}

.enm-forcard__head { grid-area: head; min-width: 0; align-self: center; }




.enm-forcard__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--enm-gold-deep);
}

.enm-forcard__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4375rem;
  margin: 0;
  font-family: var(--enm-font-display);
  font-size: clamp(1.375rem, 4.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--enm-ink-strong);
}

.enm-forcard__tick {
  width: 0.9em;
  height: 0.9em;
  flex: 0 0 auto;
  color: var(--enm-verified, #2f8f5b);
}

.enm-forcard__meta {
  margin: 0.25rem 0 0;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
}

.enm-forcard__rate {
  margin: 0.3125rem 0 0;
  font-family: var(--enm-font-display);
  font-size: 1.375rem;
  color: var(--enm-gold-deep);
}

.enm-forcard__rate span {
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-soft);
}

.enm-forcard .enm-forcard__call {
  grid-area: call;
  justify-self: start;
  margin-top: 0.25rem;
}

@media (max-width: 639px) {
  .enm-forcard .enm-forcard__call { justify-self: stretch; }
}

.enm-forcard__hours {
  grid-area: note;
  margin: 0;
  font-size: var(--enm-fs-xs);
  line-height: 1.55;
  color: var(--enm-ink-soft);
}

.enm-forcard__tools {
  position: absolute;
  top: var(--enm-s-4);
  right: var(--enm-s-4);
  display: flex;
  gap: 0.375rem;
}

.enm-forcard .enm-forcard__tool {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--enm-line);
  border-radius: 50%;
  background: var(--enm-surface);
  color: var(--enm-ink-soft);
  transition: background-color 180ms var(--enm-ease),
              border-color 180ms var(--enm-ease),
              color 180ms var(--enm-ease);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.enm-forcard .enm-forcard__tool:hover,
.enm-forcard .enm-forcard__tool:focus {
  background: var(--enm-gold-tint);
  border-color: var(--enm-gold);
  color: var(--enm-gold-deep);
  outline: 0;
}

.enm-forcard .enm-forcard__tool:active { transform: scale(0.92); }

.enm-forcard__tool svg { width: 15px; height: 15px; }

/* The desktop menu sits at 12.75px, which is small for a primary navigation on
   a wide screen. A single pixel is enough without disturbing the header
   layout. Scoped above Astra's breakpoint so the mobile panel is untouched. */
@media (min-width: 921px) {
  .main-header-bar .main-navigation .menu-link,
  .ast-desktop .main-navigation .menu-link,
  .main-header-menu > li > a,
  .ast-nav-menu > li > a {
    font-size: 13.75px !important;
  }
}

/* ==========================================================================
   70. Chip rail chevrons

   The rail scrolls, which a touch screen makes obvious and a mouse does not:
   on desktop there is no visible affordance that anything sits past the right
   edge. Two chevrons appear only when there is somewhere to go, and only on
   pointer widths, since a phone already swipes.
   ========================================================================== */

.enm-filters__scroller { position: relative; }

.enm-filters__nav { display: none; }

@media (min-width: 921px) {
  .enm-filters__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    padding: 0;
    border: 1px solid var(--enm-line-strong);
    border-radius: 50%;
    background: var(--enm-surface);
    color: var(--enm-ink-muted);
    box-shadow: 0 2px 10px rgba(23, 20, 15, 0.12);
    cursor: pointer;
    transition: background-color 160ms var(--enm-ease),
                border-color 160ms var(--enm-ease),
                color 160ms var(--enm-ease);
  }

  /* [hidden] has to outscore the display above, so it carries the attribute. */
  .enm-filters__nav[hidden] { display: none; }

  .enm-filters__nav--prev { left: -0.75rem; }
  .enm-filters__nav--next { right: -0.75rem; }

  .enm-filters__nav:hover,
  .enm-filters__nav:focus {
    background: var(--enm-gold-tint);
    border-color: var(--enm-gold);
    color: var(--enm-gold-deep);
    outline: 0;
  }

  .enm-filters__nav:active { transform: scale(0.92); margin-top: -1rem; }

  .enm-filters__nav svg { width: 15px; height: 15px; }
}

/* ==========================================================================
   71. Roster picker

   A select cannot carry a portrait, and picking a companion by name alone is
   the wrong way round on a site where the photograph is the point. This is a
   details element so it opens and the links work with no script at all; the
   search field is the only part that needs one.
   ========================================================================== */

.enm-picker {
  grid-area: pick;

  /* Sized to the label rather than stretched across the card. The panel below
     sets its own width, so a short toggle does not make a cramped list. */
  justify-self: start;
  position: relative;
  max-width: 100%;
}

.enm-picker__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--enm-line-strong);
  border-radius: var(--enm-r-pill);
  background: var(--enm-surface);
  color: var(--enm-ink);
  font-size: 0.875rem;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.enm-picker__toggle::-webkit-details-marker { display: none; }

.enm-picker__toggle:hover,
.enm-picker__toggle:focus {
  border-color: var(--enm-gold);
  background: var(--enm-gold-tint);
  outline: 0;
}

.enm-picker__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.enm-picker__current { flex: 1 1 auto; }

.enm-picker__chev {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--enm-gold-deep);
  transition: transform 180ms var(--enm-ease);
}

.enm-picker[open] .enm-picker__chev { transform: rotate(180deg); }

.enm-picker__panel {
  position: absolute;
  z-index: 30;
  left: 0;
  right: auto;
  min-width: 16rem;
  width: max-content;
  max-width: min(22rem, calc(100vw - 3rem));
  margin-top: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
  box-shadow: 0 16px 40px rgba(23, 20, 15, 0.16);
}

.enm-picker__search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.375rem;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r-sm);
  background: var(--enm-surface-sunk);

  /* 16px keeps iOS from zooming the page when the field takes focus. */
  font-size: 16px;
  color: var(--enm-ink);
}

.enm-picker__search:focus { outline: 0; border-color: var(--enm-gold); }

.enm-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.enm-picker .enm-picker__opt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--enm-r-sm);
  color: var(--enm-ink);
  font-size: 0.9375rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.enm-picker .enm-picker__opt:hover,
.enm-picker .enm-picker__opt:focus {
  background: var(--enm-gold-tint);
  color: var(--enm-ink);
  outline: 0;
}

.enm-picker .enm-picker__opt.is-current {
  background: var(--enm-gold-veil);
  font-weight: 600;
}

.enm-picker__thumb {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--enm-surface-sunk);
}

.enm-picker__thumb--none {
  display: grid;
  place-items: center;
  font-family: var(--enm-font-display);
  color: var(--enm-ink-faint);
}

.enm-picker__empty {
  margin: 0;
  padding: 0.625rem 0.5rem;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
}

/* ==========================================================================
   72. Guides

   The hub is a card grid; a guide itself is a reading column. Long form prose
   wants a measure, unlike the short trailing blocks elsewhere on the site, so
   here everything in the article shares one width and centres on it. That way
   the column reads as deliberate rather than as text that stopped short.
   ========================================================================== */

.enm-guides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--enm-s-5);
}

@media (min-width: 600px)  { .enm-guides { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .enm-guides { grid-template-columns: repeat(3, 1fr); } }

.enm-guide {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
  transition: border-color 200ms var(--enm-ease),
              box-shadow 200ms var(--enm-ease),
              transform 200ms var(--enm-ease);
}

.enm-guide:hover,
.enm-guide:focus-within {
  border-color: var(--enm-gold);
  box-shadow: 0 10px 30px rgba(23, 20, 15, 0.11);
  transform: translateY(-2px);
}

/* One stretched link so the whole card is the target, with the title still
   real text underneath. */
.enm-guide__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.enm-guide__frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--enm-surface-sunk);
}

.enm-guide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.enm-guide__body {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding: var(--enm-s-5);
}

.enm-guide__title {
  margin: 0;
  font-family: var(--enm-font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--enm-ink-strong);
}

.enm-guide__standfirst {
  margin: 0;
  font-size: var(--enm-fs-sm);
  line-height: 1.6;
  color: var(--enm-ink-muted);
}

.enm-guide__meta {
  margin: 0.1875rem 0 0;
  font-size: var(--enm-fs-2xs);
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-faint);
}

/* --- One guide ----------------------------------------------------------- */

.single-enm_guide .enm-pagehead > .enm-wrap > *,
.single-enm_guide .enm-section > .enm-wrap > * {
  max-width: 46rem;
  margin-inline: auto;
}

.enm-guidehero {
  margin: 0 0 var(--enm-s-6);
  overflow: hidden;
  border-radius: var(--enm-r);
  background: var(--enm-surface-sunk);
}

.enm-guidehero__img {
  width: 100%;
  height: auto;
  display: block;
}

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

.enm-prose--article h2 {
  margin-top: var(--enm-s-7);
  font-size: clamp(1.375rem, 3vw, 1.625rem);
}

.enm-prose--article h3 {
  margin-top: var(--enm-s-6);
  font-size: 1.1875rem;
}

.enm-guide__updated {
  margin: var(--enm-s-6) 0 0;
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-faint);
}

.enm-guidecta {
  display: grid;
  gap: var(--enm-s-5);
  margin-top: var(--enm-s-6);
  padding: var(--enm-s-6);

  /* The fill fades to white two thirds down while the border stayed gold the
     whole way round, so the bottom edge read as a stray gold line under an
     otherwise white panel. A neutral hairline holds the shape and the warmth
     stays where the gradient puts it. */
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r-lg);
  background: linear-gradient(180deg, var(--enm-gold-tint) 0%, var(--enm-surface) 60%), var(--enm-surface);
}

.enm-guidecta__title {
  margin: 0 0 var(--enm-s-3);
  font-family: var(--enm-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--enm-ink-strong);
}

.enm-guidecta__body {
  margin: 0;
  font-size: var(--enm-fs-sm);
  line-height: 1.65;
  color: var(--enm-ink-muted);
}

.enm-guidecta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

@media (max-width: 519px) {
  .enm-guidecta__actions .enm-btn { width: 100%; }
}

.enm-guidemore { margin-top: var(--enm-s-7); }

.enm-guidemore__title {
  margin: 0 0 var(--enm-s-3);
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-faint);
}

.enm-guidemore__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--enm-line);
}

.enm-guidemore .enm-guidemore__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-4);
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--enm-line);
  color: var(--enm-ink);
  font-size: 1rem;
}

.enm-guidemore .enm-guidemore__list a:hover { color: var(--enm-gold-deep); }

.enm-guidemore__list svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--enm-gold);
}

/* ==========================================================================
   73. Filter bar top row

   Search and distance are both about narrowing the whole list rather than
   picking one facet, so they sit together above the facet pills instead of the
   distance select being stranded on a line of its own.
   ========================================================================== */

.enm-filterbar__top {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;

  /* It lives inside the facet card now, on its own line under the pills, so it
     claims the full width of that flex row rather than sitting beside them. */
  flex: 1 1 100%;
  margin: 0.125rem 0 0;
}

.enm-filterbar__top .enm-filterbar__search {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.enm-filterbar__top .enm-filterbar__radius {
  flex: 0 0 auto;
  width: auto;
  min-width: 10.5rem;
  margin: 0;
}

/* Below this the placeholder has nothing left to say, so the two stack. */
@media (max-width: 519px) {
  .enm-filterbar__top { flex-wrap: wrap; }
  .enm-filterbar__top .enm-filterbar__radius { width: 100%; min-width: 0; }
}

/* ==========================================================================
   74. Hub links

   The index pages sit one level below the home page and above everything else,
   so they get a band of their own rather than a line of chips. Each carries a
   count, which is the fastest way to tell someone how much is behind a link.
   ========================================================================== */

.enm-hubs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--enm-s-4);
}

@media (min-width: 560px)  { .enm-hubs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .enm-hubs { grid-template-columns: repeat(3, 1fr); } }

.enm-hubs .enm-hub {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  height: 100%;
  padding: var(--enm-s-5);
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
  color: var(--enm-ink);
  transition: border-color 200ms var(--enm-ease),
              box-shadow 200ms var(--enm-ease),
              transform 200ms var(--enm-ease);
}

.enm-hubs .enm-hub:hover,
.enm-hubs .enm-hub:focus {
  border-color: var(--enm-gold);
  box-shadow: 0 8px 26px rgba(23, 20, 15, 0.1);
  transform: translateY(-2px);
  color: var(--enm-ink);
}

.enm-hub__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--enm-s-3);
}

.enm-hub__label {
  font-family: var(--enm-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--enm-ink-strong);
}

.enm-hub__count {
  font-size: var(--enm-fs-sm);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--enm-gold-deep);
}

.enm-hub__note {
  font-size: var(--enm-fs-sm);
  line-height: 1.6;
  color: var(--enm-ink-muted);
}

/* The facet card lays its children out two across on a phone. The search and
   distance row is a child of that card now, so it inherited the half width and
   ended up as a narrow column with its two fields stacked inside it. It needs
   the whole line. */
@media (max-width: 599px) {
  .enm-filterbar__row > .enm-filterbar__top { flex: 1 1 100%; }
}


/* ==========================================================================
   75. Filter bar and guide spacing corrections
   ========================================================================== */

/* Below 600px the facet card switches from flex to a two column grid, so the
   flex-basis on the search row was ignored and it took a single cell. In a grid
   the way to claim the line is to say so. */
@media (max-width: 599px) {
  .enm-filterbar__row > .enm-filterbar__top { grid-column: 1 / -1; }
}

/* Every band already pads its own bottom edge, so the footer adding 68px of its
   own on top left a hole above the dark band on every page. */
.enm-footer { margin-top: 0; }

.enm-guidemore { margin-top: var(--enm-s-6); }

/* A section heading rather than a caption. At eleven pixels it read as a label
   on the list instead of a heading over it. */
.enm-guidemore__title {
  font-family: var(--enm-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--enm-ink-strong);
  margin-bottom: var(--enm-s-4);
}

/* ==========================================================================
   76. Closing note spacing

   The legal note ends most templates on the site. It was picking up its
   distance from whatever happened to precede it: a grid gap on one page, an
   inline margin on another, nothing at all on a third, so the same element sat
   at 0px, 26px, 34px and 40px depending on where you looked.

   One token sets it everywhere. Written against the sibling combinator so a
   note that opens a block does not gain a margin it has no use for.
   ========================================================================== */

* + .enm-note { margin-top: var(--enm-s-6); }