/* tokens.css */
/* ==========================================================================
   Escorts Near Me : design tokens
   A single source of truth for colour, type, space, radius and elevation.
   Everything downstream references these, so a rebrand is one file deep.
   ========================================================================== */

:root {

  /* --- Canvas and surfaces -------------------------------------------------
     The site sits on a warm white. Pure #fff is reserved for cards and rails
     so they lift off the page without needing heavy shadows. */
  --enm-canvas:        #ffffff;
  --enm-canvas-warm:   #faf9f6;
  --enm-surface:       #ffffff;
  --enm-surface-sunk:  #f5f3ef;
  --enm-surface-veil:  #efece6;

  /* --- Ink ---------------------------------------------------------------- */
  --enm-ink:           #17140f;
  --enm-ink-strong:    #0d0b08;
  --enm-ink-muted:     #4c463c;
  --enm-ink-soft:      #837b6d;
  --enm-ink-faint:     #a9a196;
  --enm-ink-invert:    #ffffff;

  /* --- Lines -------------------------------------------------------------- */
  --enm-line:          #e9e5dd;
  --enm-line-strong:   #d8d2c6;
  --enm-line-hair:     rgba(23, 20, 15, 0.08);

  /* --- Champagne accent ---------------------------------------------------
     Used sparingly: rules, active states, price, small caps labels. */
  --enm-gold:          #b0894f;
  --enm-gold-deep:     #8a6a37;
  --enm-gold-bright:   #c9a86a;
  --enm-gold-tint:     #f3ecdf;
  --enm-gold-veil:     rgba(176, 137, 79, 0.12);

  /* --- Frosted glass -------------------------------------------------------
     Translucent panels that let a tinted backdrop through. The blur only
     shows if something sits behind them, so anything using these should
     lay a wash down first. The unprefixed backdrop-filter covers current
     Chrome, Edge and Firefox; the -webkit- one is still needed for Safari
     and every iOS browser. */
  --enm-glass:       rgba(255, 255, 255, 0.58);
  --enm-glass-deep:  rgba(255, 255, 255, 0.72);
  --enm-glass-edge:  rgba(176, 137, 79, 0.28);
  --enm-glass-blur:  blur(18px) saturate(150%);
  --enm-glass-lip:   inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* --- Status ------------------------------------------------------------- */
  --enm-verified:      #2f6f52;
  --enm-verified-tint: #e6f0ea;
  --enm-live:          #c2413a;
  --enm-live-tint:     #fbeceb;
  --enm-new:           #2f5f8f;
  --enm-new-tint:      #e8eff6;

  /* --- Typography ---------------------------------------------------------- */
  --enm-font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --enm-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --enm-fs-2xs:  0.6875rem;  /* 11px : eyebrow, meta */
  --enm-fs-xs:   0.75rem;    /* 12px */
  --enm-fs-sm:   0.8125rem;  /* 13px : card meta */
  --enm-fs-base: 0.9375rem;  /* 15px : body */
  --enm-fs-md:   1.0625rem;  /* 17px */
  --enm-fs-lg:   1.25rem;    /* 20px */
  --enm-fs-xl:   1.625rem;   /* 26px */
  --enm-fs-2xl:  2.125rem;   /* 34px */
  --enm-fs-3xl:  2.75rem;    /* 44px */
  --enm-fs-4xl:  3.75rem;    /* 60px : hero */

  --enm-lh-tight: 1.12;
  --enm-lh-snug:  1.32;
  --enm-lh-body:  1.68;

  --enm-track-caps: 0.14em;
  --enm-track-wide: 0.04em;

  /* --- Space scale --------------------------------------------------------- */
  --enm-s-1:  0.25rem;
  --enm-s-2:  0.5rem;
  --enm-s-3:  0.75rem;
  --enm-s-4:  1rem;
  --enm-s-5:  1.5rem;
  --enm-s-6:  2rem;
  --enm-s-7:  3rem;
  --enm-s-8:  4rem;
  --enm-s-9:  6rem;
  --enm-s-10: 8rem;

  /* --- Radius -------------------------------------------------------------- */
  --enm-r-xs:   4px;
  --enm-r-sm:   8px;
  --enm-r:      12px;
  --enm-r-lg:   18px;
  --enm-r-xl:   26px;
  --enm-r-pill: 999px;

  /* --- Elevation ----------------------------------------------------------
     Two-layer shadows: a tight contact shadow plus a wide ambient one. */
  --enm-e-1: 0 1px 2px rgba(23, 20, 15, 0.05),
             0 1px 3px rgba(23, 20, 15, 0.04);
  --enm-e-2: 0 2px 4px rgba(23, 20, 15, 0.05),
             0 6px 16px rgba(23, 20, 15, 0.06);
  --enm-e-3: 0 4px 8px rgba(23, 20, 15, 0.06),
             0 16px 36px rgba(23, 20, 15, 0.09);
  --enm-e-4: 0 8px 16px rgba(23, 20, 15, 0.07),
             0 32px 64px rgba(23, 20, 15, 0.12);

  /* --- Motion -------------------------------------------------------------- */
  --enm-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --enm-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --enm-dur-fast:  140ms;
  --enm-dur:       260ms;
  --enm-dur-slow:  480ms;

  /* --- Layout -------------------------------------------------------------- */
  --enm-wrap:       1280px;
  --enm-wrap-wide:  1560px;
  --enm-wrap-text:  78ch;
  --enm-gutter:     1rem;

  /* --- Card grid ----------------------------------------------------------
     Column count is the one knob the whole directory hangs off.
     Two on phones, five on desktop, with sensible steps between. */
  --enm-grid-cols: 2;
  --enm-grid-gap:  0.75rem;

  /* Portrait source images are 800x1200, so cards hold a true 2:3 frame. */
  --enm-card-ratio: 2 / 3;
}

@media (min-width: 600px) {
  :root { --enm-grid-cols: 3; --enm-grid-gap: 1rem; --enm-gutter: 1.5rem; }
}
@media (min-width: 900px) {
  :root { --enm-grid-cols: 4; --enm-grid-gap: 1.25rem; --enm-gutter: 2rem; }
}
@media (min-width: 1200px) {
  :root { --enm-grid-cols: 5; --enm-grid-gap: 1.5rem; --enm-gutter: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --enm-dur-fast: 0ms; --enm-dur: 0ms; --enm-dur-slow: 0ms; }
}

/* components.css */
/* ==========================================================================
   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);
}

/* A reset, so it is written with :where() and carries no specificity of its
   own. As ".enm img" it scored a class plus an element and quietly beat every
   avatar and thumbnail sized by a single class: height: auto won, the browser
   fell back to the aspect ratio implied by the width and height attributes
   WordPress puts on the tag, and every round avatar on the site rendered as a
   two by three oval. */
:where(.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 {
  /* Fluid rather than a fixed 34px with a breakpoint under it. "Mature escorts
     London" at 34px wraps to two lines on a 360px phone and crowds the line of
     description under it. clamp() scales it smoothly between 24px and 34px
     instead of stepping, so there is no width at which it looks wrong.

     The middle term is what does the work: 4.4vw tracks the viewport, and the
     +0.6rem floor stops it collapsing on very narrow screens. */
  font-size: clamp(1.5rem, 0.6rem + 4.4vw, var(--enm-fs-2xl));
  margin: 0;
  /* pretty, not balance. balance evens the lines out, which on a two line
     heading means the first line stops early and leaves a ragged gap down
     the right: "Chinese and Asian / escorts in London" on a heading with
     room for more. pretty fills the measure and only steps in to stop a
     single word being left on the last line. */
  text-wrap: pretty;
}

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

/* On a phone the profile's link wrapped onto a line of its own: the heading
   block and
   "See all in High St Kensington" together want about 420px and there are
   341. Rather than let it drop, the row is held to one line and both sides
   are allowed to give. The heading takes the space it needs and wraps; the
   link drops a size and keeps its own text on one line. */
@media (max-width: 599px) {

  .enm-section-head--tight {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: var(--enm-s-3);
  }

  /* The heading block absorbs the squeeze. The link keeps its automatic
     minimum: min-width: 0 on both let the link shrink below its own text,
     and with nowrap on the row that overflowed the head and set the whole
     page scrolling sideways on the home page and the sitemap. */
  .enm-section-head--tight > div { min-width: 0; }

  .enm-section-head--tight .enm-section-head__link {
    flex: 0 0 auto;
    font-size: var(--enm-fs-2xs);
  }

  /* Only one of these labels is long enough to be a problem: every other
     one reads "All reviews" or "Guides hub" and fits as it is. The profile
     names an area, so on a phone it drops the preamble and shows the area
     alone, which is the part carrying the meaning. Cutting the text with
     an ellipsis instead would have mangled the short labels too. */
  .enm-section-head--tight .enm-section-head__pre { display: none; }
}

/* --------------------------------------------------------------------------
   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);
  /* pretty, not balance. balance evens the lines out, which on a two line
     heading means the first line stops early and leaves a ragged gap down
     the right: "Chinese and Asian / escorts in London" on a heading with
     room for more. pretty fills the measure and only steps in to stop a
     single word being left on the last line. */
  text-wrap: pretty;
}

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

/* Two columns on a phone, so an odd number of stats leaves one on its own.
   Let the last one take the full width rather than sit in a half-empty row.
   Written against the count rather than a fixed fifth child, so it stays
   right if a stat is ever added or dropped. */
@media (max-width: 679.98px) {
  .enm-hero__trust-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.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);
  /* pretty, not balance. balance evens the lines out, which on a two line
     heading means the first line stops early and leaves a ragged gap down
     the right: "Chinese and Asian / escorts in London" on a heading with
     room for more. pretty fills the measure and only steps in to stop a
     single word being left on the last line. */
  text-wrap: pretty;
}

.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-body);
  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 {
  /* A step under the nationality beside it, at every width. The area is the
     longer of the two and the less important, so it is the one that gives way
     and the one that takes the ellipsis. */
  font-size: var(--enm-fs-2xs);
  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; }

/* Except where a header row precedes the block. Zeroing the top padding is
   right when .enm-rates opens the panel, and wrong once Incall/Outcall labels
   sit above it: the first rate then sits flush against the header's rule while
   every row below it is evenly spaced. Scoped to the adjacent sibling so the
   headerless case is untouched. */
.enm-rate-row--head + .enm-rates .enm-rate-row:first-child { padding-top: var(--enm-s-3); }
.enm-rate-row:last-child { border-bottom: 0; padding-bottom: 0; }

/* The line under the table. It is a footnote to the rates rather than part of
   them, so it sits a step below the card meta size and carries the soft ink.
   It used to be an inline style on the paragraph. */
.enm-rates__note {
  margin: var(--enm-s-4) 0 0;
  font-size: var(--enm-fs-xs);
  line-height: 1.5;
  color: var(--enm-ink-soft);
}

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

.enm-rate-row__value {
  /* Same face as the price on a card. Figures set in the body face across the
     site, so a rate reads the same wherever it appears. Colour unchanged. */
  font-family: var(--enm-font-body);
  font-size: calc(var(--enm-fs-lg) - 1px);
  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); }
/* The lede is in here with the prose on purpose. It had no colour rule of its
   own, so a link in it inherited the lede's muted grey and read as plain text,
   while the identical link in the closing paragraph was gold. Same kind of
   link, same running text, two different treatments on one page. */
.enm-prose a,
.enm-lede a { color: var(--enm-gold-deep); border-bottom: 1px solid var(--enm-gold-veil); }
.enm-prose a:hover,
.enm-lede 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; }

/* The row is the list item, not the link. As a full width anchor the whole
   line answered a hover and a click, including the empty stretch between the
   name and its count, so the link now wraps the name and nothing else. It
   reads better as anchor text too: "Petite" rather than "Petite 32". */
.enm-index__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--enm-s-3);
}

.enm-index__list a {
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--enm-dur) var(--enm-ease),
              border-color var(--enm-dur) var(--enm-ease);
}

@media (hover: hover) {
  .enm-index__list a:hover {
    color: var(--enm-gold-deep);
    border-bottom-color: var(--enm-gold);
  }
}

/* No hover on a phone, so the affordance sits at rest on the veil tint the
   rest of the site uses for the same job. */
@media (hover: none) {
  .enm-index__list a { border-bottom-color: var(--enm-gold-veil); }
}

.enm-index__n {
  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;
}

/* The profile pads its own bottom and the band below pads its top, so the
   two stacked: 102px of nothing under the reviews card on a phone and 170px
   on a wide screen, where one band is the house measure. The band is the one
   that scales with the viewport, so the profile stands down and lets it do
   the spacing. Only when a band actually follows, since on a profile with no
   related escorts that padding is all that separates it from the footer. */
.enm-profile:has(+ .enm-section) { padding-bottom: 0; }

/* The same hand off where a band is wrapped in its own canvas but the one
   before it is not. Without this the two paddings stack and the join reads as
   a hole. The warm rule below still re-adds its own padding, since a colour
   change is meant to have air on both sides; a pattern is not. */
.enm-section + .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: calc(var(--enm-fs-md) - 5px); }
}

/* 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: calc(var(--enm-fs-lg) - 1px);
  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;
  /* The body face, matching the name it sits beside. The colour stays gold,
     which is what marks it out as the price; the serif was doing no work here
     that the colour was not already doing. The "hr" unit below was already
     set in Inter, so the whole price now reads in one family. */
  font-family: var(--enm-font-body);
  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__price { font-size: calc(var(--enm-fs-md) - 5px); }
  .enm-card__name { font-size: calc(var(--enm-fs-md) - 1px); }
}

/* ==========================================================================
   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__price { font-size: calc(var(--enm-fs-base) - 4px); }
.enm-grid--duo .enm-card__name  { font-size: calc(var(--enm-fs-base) - 1px); }
.enm-grid--duo .enm-card__meta  { font-size: var(--enm-fs-2xs); }

/* The duo grid shrinks the whole meta line, which had the side effect of
   pulling the nationality down to the size the area was already using, so the
   two ended up identical. The area gets its own step down again here. */
.enm-grid--duo .enm-card__loc   { font-size: 11px; }
.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; }

/* An option that would return nothing under the current selection. Dimmed
   rather than hidden: a list that reshuffles itself as you tick things is
   harder to use than one that stays put and greys out. Still clickable, since
   the visitor may want to swap one choice for another. */
.enm-facet__opt.is-empty { opacity: 0.4; }

.enm-facet__opt.is-empty .enm-facet__opt-count { color: var(--enm-ink-faint); }

.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;
  /* 1.35rem left 17px between the text and the line, which read as a stray
     rule rather than an underline. This sits it about 8px under. */
  bottom: 1.85rem;
  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);
}

/* One line on desktop. The 62ch measure is right where the footer is a column,
   but on a wide screen it broke a single legal sentence across two lines next
   to a one line copyright, which read as two different kinds of thing.

   The row is the wrap (1280 max, 42.5 either side) less the meta beside it and
   the gap. The sentence needs 771px at the size below, and the breakpoint is
   1240 rather than 1200 because at 1200 that leaves eleven pixels spare, which
   is not a margin, it is a coincidence. At 1240 it has sixty six. Nothing sits
   at 1240 to 1279 in practice, and anything narrower genuinely has no room. */
@media (min-width: 1240px) {
  .enm-footer__legal {
    max-width: none;
    white-space: nowrap;
    font-size: 0.625rem;
  }
}

.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 share one line on a phone, the same as everywhere else.
   They run to about thirty characters between them and a card at two up is
   only around 170px, so something has to give: the nationality is short and
   holds its width, while the area is set a step smaller and takes the ellipsis
   when it needs one. Most areas fit whole; only the long ones clip.
   ========================================================================== */

@media (max-width: 599px) {
  .enm-card__meta {
    flex-wrap: nowrap;
    /* Tighter than the desktop gap. The dot is 3px and does not need much air
       around it, and the 4px this frees is the difference between "Gloucester
       Rd" fitting and clipping on a 375px screen. */
    gap: 0.1875rem;
    line-height: 1.35;
  }

  .enm-card__nat,
  .enm-card__loc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Never shrunk: it is the shorter of the two and clipping it reads worse. */
  .enm-card__nat {
    flex: 0 0 auto;
    color: var(--enm-ink-muted);
  }

  .enm-card__loc {
    flex: 0 1 auto;
    font-size: 11px;
    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);
}

/* White on the gold, which is what the hover further up already asked for and
   never got. The pin above sets -webkit-text-fill-color, and in WebKit and
   Blink that beats `color` whatever the specificity of the rule setting it, so
   the pill went gold underneath while its label stayed gold on top. Releasing
   the pin is the whole fix.

   :hover:active as well, because on a pointer a press is also a hover, and the
   press would otherwise drop the label back to gold for as long as the button
   is held. Clear all is excluded: it is transparent, so white would erase it,
   and it has a hover of its own. */
@media (hover: hover) {
  .enm-pill:not(.enm-pill--clear):hover,
  .enm-pill:not(.enm-pill--clear):hover:active {
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
}

/* 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:not(:active) { background: var(--enm-surface); border-color: var(--enm-line-strong); }
  .enm-facet__toggle:hover:not(:active)  { border-color: var(--enm-line-strong); }
  .enm-chip:hover:not(:active)           { border-color: var(--enm-line-strong); }
  .enm-pill:hover:not(:active)           { background: var(--enm-gold-tint); border-color: var(--enm-gold-veil); }
  .enm-pagernav__btn:hover:not(:active)  { border-color: var(--enm-line); background: var(--enm-surface); }
  .enm-facet__opt:hover:not(:active)     { 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__price { font-size: calc(var(--enm-fs-sm) - 4px); }
  .enm-grid--duo .enm-card__meta { font-size: 11px; }
  .enm-grid--duo .enm-card__loc  { font-size: 10px; }

  .enm-grid--duo .enm-card__name { font-size: calc(var(--enm-fs-sm) - 1px); }
}

/* ==========================================================================
   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

   Two up on a phone. The row layout, thumbnail then name then count all on one
   line, genuinely does not fit at that width, so on a phone the tile becomes a
   small card instead: the portrait across the top, the name and the count on a
   line beneath it. That gives the name the full width of the tile, so nothing
   needs truncating, and forty five areas take a quarter of the scrolling.

   Laid out on named areas so the same three elements rearrange without the
   markup changing.
   ========================================================================== */

.enm-areatiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 559px) {
  .enm-areatile {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "thumb thumb"
      "name  count";
    align-items: center;
    gap: 0.5rem 0.375rem;
    padding: 0.4375rem 0.4375rem 0.5625rem;
  }

  .enm-areatile__thumb {
    grid-area: thumb;
    width: 100%;

    /* Shorter than the source portrait, so the crop takes off the legs rather
       than the head, which the upward object-position then protects. */
    aspect-ratio: 4 / 3;
  }

  .enm-areatile__name {
    grid-area: name;
    font-size: 0.8125rem;
    line-height: 1.25;
  }

  .enm-areatile__count { grid-area: count; }
}

@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;

  /* Matches the source portraits at 2:3, so cover has nothing left to crop and
     the whole photograph shows. The tile used to ask WordPress for a square
     150x150, which is a hard crop: the face was cut in the file itself, which
     is why moving object-position could not fix it. */
  aspect-ratio: 2 / 3;
  height: auto;
  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) {
  /* Both of these were written for the dark footer and neither survived the
     move to a light one: white on white is invisible, and brightening an
     already pale gradient washes the wordmark out rather than lifting it.
     Darkening is the equivalent gesture on a light ground. */
  /* The same gold every other footer link takes on hover, so the wordmark is
     not the one thing in the footer that behaves differently. */
  .enm-footer__brandlink:hover .enm-logo__place { color: var(--enm-gold-deep); }
  .enm-footer__brandlink:hover .enm-logo__mark { filter: brightness(0.88); }
}

/* ==========================================================================
   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,
.enm-profile__detail > :last-child,
.enm-profile__media > :last-child,
.enm-panel > :last-child {
  margin-bottom: 0;
}

/* The same at the top of a band that opens on prose. A prose h2 carries a top
   margin to separate it from the paragraph above, and as the first thing in
   the band it had nothing above it but the band's own padding, so the two
   stacked: 34px more than the house gap under the partner card on /partners/,
   and the same over "Before you book one" on duos and the closing text on
   rates and the area pages. */
.enm-section > .enm-wrap > .enm-prose > :first-child {
  margin-top: 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);
}

/* Scoped to pointers. Applying a hover everywhere and then undoing it under
   (hover: none) works, but it depends on the reset winning, and a stale cached
   bundle or a later rule breaks it silently. Defining it only where hover is
   real cannot fail that way. Focus stays outside the query: a keyboard needs it
   on any device. */
@media (hover: hover) {
  .enm-castcta a.enm-castcta__item:hover {
    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: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;
  /* The same line every other card on this page uses. It was on the gold
     veil at twelve percent, which against the warm canvas paints roughly a
     third fainter than the step cards and the duo rows sitting right beside
     it, so the card read as though it had no edge at all. */
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r-lg);
  background:
    linear-gradient(180deg, var(--enm-gold-tint) 0%, var(--enm-surface) 42%),
    var(--enm-surface);

  /* Start the gradient at the border box, not the padding box.
     background-origin defaults to padding-box, so the gradient's tile began
     one pixel inside the border, and background-repeat then tiled it upward
     into that one pixel strip. What repeats into the strip above the tile is
     the tile's bottom row, and the bottom of this gradient is white. So a
     white line sat under the top border, invisible in Chrome because an
     opaque border covers it cleanly, and visible in Firefox, which
     antialiases the border over it on a rounded box and lets it bleed.

     Anchoring the gradient to the border box puts the gold tint at the very
     top edge instead, so there is no white row left to leak. no-repeat as
     well, so nothing can tile into an edge again. */
  background-origin: border-box;
  background-repeat: no-repeat;

  /* No padding-box clip. One was tried here, to stop the gradient painting
     under the border. It is pointless now that the border is fully opaque,
     because nothing beneath it can show through anyway, and it is worse than
     pointless in Firefox: the clip edge and the border's inner edge are
     antialiased separately on a rounded corner, which leaves a pale hairline
     seam just inside the border along the top. Letting the background run to
     the border box, which is the default, removes the seam. */

  /* No spread ring here. One was tried, on the theory that a shadow survives
     fractional display scaling where a hairline can be rounded away. It does,
     but it sits directly outside the border in the same colour, so the two
     stack into a two pixel pale band. Against the cream at the top of this
     card that band reads as a white line, which is worse than the problem it
     was meant to solve. The padding-box clip above is the fix that matters. */
  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;
  position: relative;
  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;
}

/* A withheld photograph on the booking card. The thumb is about 250px, so the
   panel reads at its normal size; the round faces in a party stack are 40px and
   take the icon alone, since a title at that size is a smudge. */
.enm-forcard__thumb .enm-noph {
  padding: var(--enm-s-2);
  gap: 0.3125rem;
  border-radius: inherit;
}

/* 145px on a desktop and 85px on a phone, so the icon comes down hard and the
   rule and the second line go: at that width the full panel filled the box to
   the pixel and the title wrapped into the icon. */
.enm-forcard__thumb .enm-noph__icon { width: 26%; max-width: 40px; }
.enm-forcard__thumb .enm-noph__title { font-size: var(--enm-fs-xs); line-height: 1.3; }
.enm-forcard__thumb .enm-noph__rule,
.enm-forcard__thumb .enm-noph__note { display: none; }

.enm-forcard__face .enm-noph { padding: 0; gap: 0; }
.enm-forcard__face .enm-noph__icon { width: 46%; max-width: none; }
.enm-forcard__face .enm-noph__rule,
.enm-forcard__face .enm-noph__title,
.enm-forcard__face .enm-noph__note { display: none; }

.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;
  /* The booking card carries a rate too, so it follows the card price and the
     rate rows into the body face rather than being the last figure in serif. */
  font-family: var(--enm-font-body);
  font-size: calc(1.375rem - 3px);
  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 an escort 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);
  transition: border-color var(--enm-dur) var(--enm-ease),
              background var(--enm-dur) var(--enm-ease),
              box-shadow var(--enm-dur) var(--enm-ease),
              transform var(--enm-dur) var(--enm-ease);
}

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

/* The colour change was there but it arrived instantly, since the shorthand
   named every property and no duration, which computes to none. */
@media (hover: hover) {
  .enm-picker__toggle:hover {
    border-color: var(--enm-gold);
    background: var(--enm-gold-tint);
    box-shadow: var(--enm-e-2);
    transform: translateY(-1px);
  }

  .enm-picker__toggle:hover .enm-picker__avatar { transform: scale(1.08); }
  .enm-picker__toggle:hover .enm-picker__chev { color: var(--enm-gold); }
}

/* Pressed: down rather than up, and no shadow, so it reads as a button
   going in under the finger or the cursor. */
.enm-picker__toggle:active {
  border-color: var(--enm-gold);
  background: var(--enm-gold-tint);
  box-shadow: none;
  transform: translateY(0) scale(0.985);
}

.enm-picker__toggle:focus-visible {
  border-color: var(--enm-gold);
  background: var(--enm-gold-tint);
}

/* A tint alone is a weak place marker for anyone driving this from the
   keyboard, so that case gets a real ring on top of it. */
.enm-picker__toggle:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .enm-picker__toggle,
  .enm-picker__avatar { transition: none; }

  .enm-picker__toggle:hover { transform: none; }
  .enm-picker__toggle:active { transform: none; }
  .enm-picker__toggle:hover .enm-picker__avatar { transform: none; }
}

.enm-picker__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  transition: transform var(--enm-dur) var(--enm-ease);
}

.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),
              color var(--enm-dur) 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;
}

/* -webkit-tap-highlight-color is transparent above, which removes the grey
   flash iOS draws on tap. That is right for a bespoke look and wrong with
   nothing put back, so the press is drawn here instead. :active rather than
   :hover, because it releases when the finger lifts. */
.enm-picker .enm-picker__opt:active {
  background: var(--enm-gold-tint);
  color: var(--enm-ink);
}

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

/* A withheld photograph in the roster picker. The circle is 36px, so it takes
   the icon alone: the same panel the cards show, with everything that cannot
   be read at that size stripped off. */
.enm-picker__thumb--none {
  position: relative;
  overflow: hidden;
}

.enm-picker__thumb--none .enm-noph {
  padding: 0;
  gap: 0;
  border-radius: 50%;
}

.enm-picker__thumb--none .enm-noph__icon { width: 48%; max-width: none; }

.enm-picker__thumb--none .enm-noph__rule,
.enm-picker__thumb--none .enm-noph__title,
.enm-picker__thumb--none .enm-noph__note { display: none; }

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

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

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

/* 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;

  /* No rule between the items. The one under the heading is enough to mark the
     block, and a line under every title turned a short list of three into
     something that read like a table. */
  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);
  /* Warm tint rather than the flat surface white. These sit on a white band,
     so an off-white card is what separates them from the page behind. */
  background: var(--enm-surface-sunk);
  color: var(--enm-ink);
  transition: border-color 200ms var(--enm-ease),
              box-shadow 200ms var(--enm-ease),
              transform 200ms var(--enm-ease);
}

@media (hover: hover) {
  .enm-hubs .enm-hub:hover {
    border-color: var(--enm-gold);
    background: var(--enm-gold-tint);
    box-shadow: 0 8px 26px rgba(23, 20, 15, 0.1);
    transform: translateY(-2px);
  }
}

.enm-hubs .enm-hub:focus {
  border-color: var(--enm-gold);
  box-shadow: 0 8px 26px rgba(23, 20, 15, 0.1);
  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); }

/* ==========================================================================
   77. Reviews

   Stars, the list on a profile, the form behind a disclosure, and the grouped
   view on /reviews/. The rating input is a row of radios reversed in the
   markup so a plain sibling selector can fill every star to the left of the
   hovered one, with no script involved.
   ========================================================================== */

.enm-stars {
  display: inline-flex;
  gap: 0.0625rem;
  vertical-align: middle;
}

.enm-star {
  width: 15px;
  height: 15px;
  fill: var(--enm-line-strong);
}

.enm-star.is-on { fill: var(--enm-gold); }

.enm-reviews__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--enm-s-3);
}

.enm-reviews__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
}

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

/* The count is the quietest part of the line: the stars and the average are
   the figures, this only says how much they rest on. A step down from the
   summary it sits in, and plain text with no decoration or weight of its
   own, so it does not read as something to click. */
.enm-reviews__count {
  font-size: var(--enm-fs-2xs);
  font-weight: 400;
  color: var(--enm-ink-soft);
  text-decoration: none;
  border: 0;
  background: none;
}

.enm-reviews__none {
  margin: var(--enm-s-4) 0 0;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
}

.enm-reviews__list,
.enm-revgroup__list {
  list-style: none;
  margin: var(--enm-s-4) 0 0;
  padding: 0;
}

.enm-review {
  padding: var(--enm-s-4) 0;
  border-bottom: 1px solid var(--enm-line);
}

.enm-review:last-child { border-bottom: 0; }

.enm-review__top {
  display: flex;
  align-items: center;
  gap: var(--enm-s-3);
  margin-bottom: 0.3125rem;
}

.enm-review__author {
  font-weight: 600;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink);
}

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

.enm-review__date {
  margin: 0.3125rem 0 0;
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-faint);
}

/* --- The form ------------------------------------------------------------ */

.enm-reviewform { margin-top: var(--enm-s-5); }

.enm-reviewform__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-3);
  padding: 0.75rem 0;
  border-top: 1px solid var(--enm-line);
  font-size: var(--enm-fs-sm);
  font-weight: 600;
  color: var(--enm-gold-deep);
  cursor: pointer;
  list-style: none;
}

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

.enm-reviewform__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms var(--enm-ease);
}

.enm-reviewform[open] .enm-reviewform__toggle svg { transform: rotate(180deg); }

.enm-reviewform__form { padding-top: var(--enm-s-3); }

.enm-rating {
  margin: 0 0 var(--enm-s-4);
  padding: 0;
  border: 0;
}

.enm-rating__legend {
  padding: 0;
  margin-bottom: 0.375rem;
  font-size: var(--enm-fs-xs);
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-soft);
}

.enm-rating__stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.1875rem;
}

.enm-rating__star {
  cursor: pointer;
  line-height: 0;
  color: var(--enm-line-strong);
  transition: color 120ms var(--enm-ease), transform 120ms var(--enm-ease);
}

.enm-rating__star svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.enm-rating__stars input:checked ~ .enm-rating__star,
.enm-rating__star:hover,
.enm-rating__star:hover ~ .enm-rating__star {
  color: var(--enm-gold);
}

.enm-rating__stars input:focus-visible + .enm-rating__star {
  outline: 2px solid var(--enm-gold);
  outline-offset: 2px;
  border-radius: var(--enm-r-xs);
}

.enm-rating__star:active { transform: scale(0.9); }

.enm-field { margin: 0 0 var(--enm-s-4); }

.enm-field label {
  display: block;
  margin-bottom: 0.3125rem;
  font-size: var(--enm-fs-xs);
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-soft);
}

.enm-field input,
.enm-field textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--enm-line-strong);
  border-radius: var(--enm-r-sm);
  background: var(--enm-surface);
  color: var(--enm-ink);
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
}

.enm-field input:focus,
.enm-field textarea:focus {
  outline: 0;
  border-color: var(--enm-gold);
}

.enm-field textarea { resize: vertical; }

/* A line under a field saying what it is for. Same size and ink as the note at
   the foot of the form, so the two read as the same kind of reassurance. */
.enm-field__hint {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--enm-fs-xs);
  line-height: 1.5;
  color: var(--enm-ink-soft);
}

.enm-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

/* --- The reviews page ---------------------------------------------------- */

.enm-revgroups {
  display: grid;
  gap: var(--enm-s-5);
}

/* White cards on a white page, separated by a hairline and nothing else, so
   nothing read as a card at all. The page moves to the warm ground the tokens
   file reserves for exactly this ("pure #fff is for cards and rails so they
   lift off the page"), and the cards keep the white. No shadow: the ground
   and the hairline do the separating, which is what that note describes. */
.enm-revgroup {
  position: relative;
  padding: var(--enm-s-5);
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
}

/* Her name used to cover the whole card through an overlay, which made every
   word of a review part of a link and nothing on the card selectable. Only her
   photograph and her name go to her profile; the card responds across all of
   itself, but the two things that read as her are the two that navigate. */

/* No hover response on the card. It carried a gold border, a two pixel lift,
   her name warming and the photograph scaling; on a page that is a column of
   these, all of it firing as the pointer crossed each one was movement for
   its own sake. The name is still a link and still underlines. */

/* Gold while the group is open, and while it holds keyboard focus.

   It used to be :focus-within, which meant the border came on because the
   Read more control had been clicked rather than because the group was open:
   on desktop it stayed gold after the second click closed it, and on iPhone a
   tap left no focus behind so it never came on at all. Reading the open state
   instead says the same thing on both, and :focus-visible keeps the Tab
   response without answering to a pointer. */
.enm-revgroup:has(.enm-revgroup__stack.is-open),
.enm-revgroup:has(:focus-visible) { border-color: var(--enm-gold); }

.enm-revgroup__head {
  display: flex;
  align-items: center;
  gap: var(--enm-s-4);
  padding-bottom: var(--enm-s-4);
  border-bottom: 1px solid var(--enm-line);
}

.enm-revgroup__thumb {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--enm-surface-sunk);
}

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

.enm-revgroup__meta { min-width: 0; }

.enm-revgroup__name {
  margin: 0;
  font-family: var(--enm-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Her name is the one thing on the head that navigates, so it is the one thing
   that responds. The underline is always there and starts transparent, so the
   line fades in rather than arriving at full strength and shifting the text. */
.enm-revgroup .enm-revgroup__name a {
  color: var(--enm-ink-strong);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--enm-dur) var(--enm-ease),
              text-decoration-color var(--enm-dur) var(--enm-ease);
}

/* :not(:active) so the press below wins while a finger is down, rather than
   the hover state a touch browser leaves behind cancelling it. */
@media (hover: hover) {
  .enm-revgroup .enm-revgroup__name a:hover:not(:active) {
    color: var(--enm-gold-deep);
    text-decoration-color: var(--enm-gold-deep);
  }
}

/* The tap. Lighter gold than the hover and quick, so a finger gets an answer
   on touch, where there is no hover to give one. */
.enm-revgroup .enm-revgroup__name a:active {
  color: var(--enm-gold);
  text-decoration-color: var(--enm-gold);
  transition-duration: 90ms;
}

.enm-revgroup__area {
  margin: 0.125rem 0 0;
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-soft);
}

.enm-revgroup__score {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0.3125rem 0 0;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink);
}

/* Top right of the card rather than trailing the stars, so the eye reads name,
   area, rating down the left and the count as a corner fact. */
.enm-revgroup__n {
  position: absolute;
  top: var(--enm-s-5);
  right: var(--enm-s-5);
  color: var(--enm-ink-faint);
  font-size: var(--enm-fs-xs);
}

/* The reviews page gets the same deck the home page shelf uses, but written
   for this shape rather than borrowing the rail's classes: there the control
   lives inside the card's footer, so the stack and the card are the same box.
   Here the control sits below the deck, and reusing .enm-revstack drew the
   edges around the control too. Same look, its own rules.

   The front card carries a surface and a border, because on the shelf the
   cards sit on warm ground and inside this group the ground is already white. */
/* No border-top here. The header already draws a rule under itself, so adding
   one gave two hairlines a few pixels apart. */
.enm-revgroup__stack {
  position: relative;
  margin-top: var(--enm-s-4);
}

/* The front card carries a surface and a border, because on the shelf the
   cards sit on warm ground and inside this group the ground is already white. */
.enm-revgroup__front,
.enm-revgroup__more .enm-revgroup__list {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--enm-s-4) var(--enm-s-4) 0;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
}

.enm-revgroup__stack .enm-review:last-child { border-bottom: 0; }


/* The cards behind, drawn on a wrapper around the front card rather than on
   the card itself. A positioned pseudo element paints above its own parent's
   text, so edges drawn on the card covered the review; as siblings under a
   card that carries z-index they sit behind it, which is what a deck is. */
.enm-revgroup__deck { position: relative; }

.enm-revgroup__deck--2::after,
.enm-revgroup__deck--3::after,
.enm-revgroup__deck--3::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 0;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
  pointer-events: none;
}

.enm-revgroup__deck--2::after,
.enm-revgroup__deck--3::after {
  left: 10px;
  right: 10px;
  bottom: -7px;
}

.enm-revgroup__deck--3::before {
  left: 20px;
  right: 20px;
  bottom: -14px;
}

.enm-revgroup__stack.is-open .enm-revgroup__deck::before,
.enm-revgroup__stack.is-open .enm-revgroup__deck::after { display: none; }

.enm-revgroup__more { display: none; }

.enm-revgroup__stack.is-open .enm-revgroup__more {
  display: grid;
  gap: var(--enm-s-4);
  margin-top: var(--enm-s-4);
}

/* Right, on the far side of the group, the way the count sits at the end of a
   card footer on the shelf. The lowest edge of the deck sits 14px under the
   front card, so the gap here is measured from that edge and not from the
   card, which is why it is larger than it looks. */
.enm-revgroup__stack .enm-revgroup__count {
  display: inline-flex;
  margin-left: auto;
  margin-top: var(--enm-s-6);
  font-size: var(--enm-fs-sm);
}

.enm-revgroup__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.enm-revgroup__stack > .enm-revgroup__deck,
.enm-revgroup__stack > .enm-revgroup__more { align-self: stretch; }

.enm-revgroup__stack.is-open .enm-revgroup__count { margin-top: var(--enm-s-4); }


/* The lede was capped at a text measure while the title above it and the band
   below ran the full width, so it stopped short in the same way the prose and
   the FAQ did. It takes the band width like everything else in the head. The
   guide article keeps its own column, since that cap is on the wrap rather
   than on this element. */
.enm-lede { max-width: none; }

/* Every thumbnail cropped from a portrait to a square or a landscape frame was
   cutting the head off. cover centres its crop, and a portrait puts the face in
   the top third, so the middle of the frame is the body. Biasing the crop
   upward keeps the face in shot.

   Left out on purpose: the card and profile images, whose frames already match
   the source ratio, so their crop is close to neutral and moving it would
   introduce a fault rather than fix one. */
.enm-areatile__thumb img,
.enm-picker__avatar,
.enm-picker__thumb,
.enm-revgroup__img,
.enm-guide__img {
  object-position: 50% 20%;
}

/* Confirmation after a review is submitted. Sits above the block it belongs to
   and is focused on arrival so a screen reader announces it too. */
.enm-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: var(--enm-s-5);
  padding: var(--enm-s-4) var(--enm-s-5);
  border: 1px solid rgba(47, 143, 91, 0.35);
  border-radius: var(--enm-r);
  background: rgba(47, 143, 91, 0.07);
  color: var(--enm-ink);
}

.enm-notice:focus { outline: 0; }

/* The same block when a review was turned away. Amber rather than red: nothing
   has gone wrong with the site and nothing is lost, the form is directly under
   it and takes the text again. */
.enm-notice--warn {
  border-color: rgba(176, 137, 79, 0.45);
  background: var(--enm-gold-tint);
}

.enm-notice--warn svg { color: var(--enm-gold-deep); }

.enm-notice svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 0.125rem;
  color: var(--enm-verified, #2f8f5b);
}

.enm-notice strong {
  display: block;
  margin-bottom: 0.1875rem;
  font-size: var(--enm-fs-sm);
}

.enm-notice span {
  display: block;
  font-size: var(--enm-fs-xs);
  line-height: 1.6;
  color: var(--enm-ink-muted);
}

/* A band with nothing in it should not spend a band of height. :empty ignores
   whitespace, so this catches a wrap whose only content is the indentation left
   behind when its contents were removed. Belt and braces alongside taking the
   markup out. */
.enm-section > .enm-wrap:empty,
.enm-section:has(> .enm-wrap:empty) {
  padding-block: 0;
}

/* ==========================================================================
   78. Recent reviews rail

   A horizontal shelf on the home page sharing the chip rail's chevrons, which
   already appear only when there is somewhere to scroll and only on pointer
   widths. The last card carries the figures rather than letting the shelf
   trail off into nothing.
   ========================================================================== */

.enm-rail { position: relative; }

.enm-revrail {
  list-style: none;
  margin: 0;
  /* Room at the bottom for the deck edges. The rail scrolls on x, which makes
     y scroll too, so anything hanging below a card would be clipped. */
  padding: 2px 0 18px;
  display: flex;
  gap: var(--enm-s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.enm-revrail::-webkit-scrollbar { display: none; }

/* At rest the row stretches every card to the height of the tallest, which is
   what keeps the shelf level. Once a deck is open that turns into a fault: the
   row is suddenly as tall as the deck and every other card is blown up to
   match, with a field of nothing in the middle of it. While one is open the
   cards take their own height and only the open one is tall. */
.enm-revrail:has(.enm-revstack.is-open) { align-items: flex-start; }

.enm-revrail > li {
  flex: 0 0 auto;
  width: min(20rem, 78vw);
  scroll-snap-align: start;
}

.enm-revcard {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
  padding: var(--enm-s-5);
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
}

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

/* An escort with more than one review keeps one place on the shelf and the
   rest of hers sit under the front card as a deck, edges showing, so the shelf
   still reads one card per name while saying there is more here. Merging them
   into a single card hid the fact that these were separate evenings. */
/* No height here on purpose. An explicit height stops a flex item stretching
   to the height of its row, so the deck came up shorter than the plain cards
   beside it; left alone it is stretched like they are, and the card inside
   grows to fill it. */
.enm-revstack {
  position: relative;
  display: flex;
  flex-direction: column;
}

.enm-revstack > .enm-revcard { height: auto; }
.enm-revstack:not(.is-open) > .enm-revcard { flex: 1; }

/* The cards behind. Drawn rather than rendered: they are only ever an edge and
   a corner, so two pseudo elements cost nothing and cannot fall out of step
   with whatever the real cards are doing. */
.enm-revstack--2::after,
.enm-revstack--3::after,
.enm-revstack--3::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 0;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
  pointer-events: none;
}

/* The near edge is ::after and the far one ::before, because a pseudo element
   paints in that order and the nearer card has to sit over the one behind it.
   The far edge was drawn with a negative z-index to push it back, which sent
   it behind the warm ground this band sits on instead of behind the card, so
   the third of three was never visible at all. */
.enm-revstack--2::after,
.enm-revstack--3::after {
  left: 10px;
  right: 10px;
  bottom: -7px;
}

.enm-revstack--3::before {
  left: 20px;
  right: 20px;
  bottom: -14px;
}

.enm-revstack > .enm-revcard { position: relative; z-index: 1; }

/* Open, there is nothing left behind to suggest. */
.enm-revstack.is-open::before,
.enm-revstack.is-open::after { display: none; }

.enm-revstack__rest { display: none; }

.enm-revstack.is-open .enm-revstack__rest {
  display: grid;
  gap: var(--enm-s-4);
  margin-top: var(--enm-s-4);
}

/* How many reviews she has, at the far end of the top row. Quiet, and not a
   control: it states a fact, while the thing that opens the deck is the one
   word in the footer. */
.enm-revcard__total {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-faint);
  white-space: nowrap;
}

/* The control sits at the far end of the footer, opposite her name. */
.enm-revcard__count {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--enm-gold-deep);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.enm-revcard__count svg {
  width: 13px;
  height: 13px;
  transition: transform var(--enm-dur) var(--enm-ease);
}

.enm-revstack.is-open .enm-revcard__count svg { transform: rotate(180deg); }

/* The count is the only thing that opens the deck, so it is the only thing
   that answers the pointer. A card that lit up all over while only one small
   link did anything was promising more than it meant. */
@media (hover: hover) {
  .enm-revcard__count:hover { text-decoration: underline; }
}

/* Every review in the card carries its own name and stars, so the card cannot
   look like one long review signed by whoever wrote the first. */
.enm-revcard__subtop {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--enm-fs-xs);
}

/* The one at the front keeps the full sized stars it always had; the folded
   ones sit a step back, which is the order they should be read in. */
.enm-revcard__list .enm-revcard__subtop {
  margin-bottom: 0.3125rem;
}

.enm-revcard__list .enm-revcard__subtop .enm-star { width: 12px; height: 12px; }

.enm-revcard__foot {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-soft);
}

.enm-revcard__who { font-weight: 600; color: var(--enm-ink); }
.enm-revcard .enm-revcard__on { color: var(--enm-gold-deep); }

.enm-revcard .enm-revcard__on:hover { text-decoration: underline; }

/* Her portrait beside her name. The anchor becomes an inline flex row so the
   two sit on one line and stay centred on each other; as plain inline content
   the image dropped the name onto a line of its own. */
.enm-revcard__on {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.enm-revcard__face {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* ---- The closing stats card ---------------------------------------------
   Four figures two across, because a number needs a neighbour to be read
   against, on the same frosted glass the rate index uses. */
.enm-revstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.enm-revstat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 0.75rem 0.75rem;
  border: 1px solid var(--enm-glass-edge);
  border-radius: var(--enm-r);
  background: var(--enm-glass);
  -webkit-backdrop-filter: var(--enm-glass-blur);
  backdrop-filter: var(--enm-glass-blur);
  box-shadow: var(--enm-glass-lip);
}

.enm-revstat__n {
  font-family: var(--enm-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--enm-ink-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

.enm-revstat__l {
  font-size: var(--enm-fs-2xs);
  line-height: 1.35;
  color: var(--enm-ink-muted);
}

/* The sample size and the way out share a line at the foot of the card,
   divided from the figures by a hairline. Left loose between the grid and the
   link, "across 1 escort" read as a line somebody forgot to finish. */
/* A band that paints its own background needs its gap inside it. The general
   hand-off rule zeroes the top padding of a section that follows another, on
   the assumption the one above supplies the space — right for a plain band,
   wrong here: it left the heading eight pixels under the colour seam with
   forty three pixels of white stranded outside the band where it read as a
   hole rather than as breathing room. Same specificity as that rule and later
   in the file, so this wins; the band above gives back most of what it had. */
.enm-section + .enm-canvas--warm > .enm-section:first-child {
  padding-top: var(--enm-band);
}

.enm-section:has( + .enm-canvas--warm ) {
  padding-bottom: calc(var(--enm-band) * 0.35);
}

/* The sample size and the way out share a line at the foot of the card. No
   rule above them: the stat panes already carry edges of their own, so a
   divider on top of that was one line too many. Spacing does the separating. */
.enm-revcard__end {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  width: 100%;
  margin-top: auto;
  padding-top: 0.85rem;
}

.enm-revcard__across {
  font-size: var(--enm-fs-2xs);
  color: var(--enm-ink-soft);
}

/* Nothing to blur without something behind it, so the card lays down the same
   champagne wash the rate index panels sit on. */
.enm-revcard--stats {
  position: relative;
  isolation: isolate;
  justify-content: flex-start;
  gap: 0.9rem;
}

.enm-revcard--stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(50% 60% at 15% 20%, rgba(201, 168, 106, 0.20), transparent 70%),
    radial-gradient(55% 55% at 85% 80%, rgba(176, 137, 79, 0.14), transparent 72%);
  background-repeat: no-repeat;
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .enm-revstat { background: var(--enm-surface); border-color: var(--enm-line); }
}

/* The closing card: the numbers, and the way through to the full page. */
.enm-revrail .enm-revcard--stats {
  gap: 0.5rem;
  justify-content: center;
  /* The review cards beside it use --enm-line. gold-veil is twelve per cent
     opaque, so against this card's own pale gradient the top and bottom edges
     all but disappeared while its neighbour's stayed crisp. Two cards in one
     rail want one edge. */
  border-color: var(--enm-line);
  background: linear-gradient(180deg, var(--enm-gold-tint) 0%, var(--enm-surface) 70%), var(--enm-surface);

  /* background-origin defaults to padding-box while background-clip defaults
     to border-box, so the gradient is positioned inside the padding box but
     painted out to the border box, and the strip left over gets filled by the
     gradient repeating. In Firefox that tiled a pale row into the top border.
     Originating on the border box leaves nothing to fill, and no-repeat means
     nothing can tile into an edge again. Same fault, same fix, as the booking
     card. */
  background-origin: border-box;
  background-repeat: no-repeat;
  color: var(--enm-ink);
  transition: border-color 200ms var(--enm-ease), box-shadow 200ms var(--enm-ease);
}

.enm-revrail .enm-revcard--stats:hover,
.enm-revrail .enm-revcard--stats:focus {
  border-color: var(--enm-gold);
  box-shadow: 0 8px 26px rgba(23, 20, 15, 0.1);
  color: var(--enm-ink);
}

.enm-revcard__statline {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.enm-revcard__stat {
  min-width: 2.75rem;
  font-family: var(--enm-font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--enm-ink-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

.enm-revcard__statlabel {
  font-size: var(--enm-fs-xs);
  color: var(--enm-ink-soft);
}

.enm-revcard__go {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  /* The footer row owns the spacing now, and the label is a step under the
     section's own "All reviews" link while staying above the caption beside
     it in the same row. */
  margin-top: 0;
  /* Level with the caption it shares the row with, so the two read as one
     line rather than a label and a button. */
  font-size: var(--enm-fs-2xs);
  font-weight: 400;
  color: var(--enm-gold-deep);
}

.enm-revcard__go svg { width: 13px; height: 13px; }

@media (min-width: 921px) {
  .enm-rail .enm-filters__nav--prev { left: -1rem; }
  .enm-rail .enm-filters__nav--next { right: -1rem; }

  /* Held where they were while a deck is open. The value is measured and set
     by the script at the moment of opening; the fallback is the ordinary
     centre, so with no script running nothing changes. */
  .enm-rail:has(.enm-revstack.is-open) .enm-filters__nav {
    top: var(--enm-rail-nav, 50%);
  }
}

/* ==========================================================================
   79. Hover on touch screens

   A touch device has no hover, but it fakes one: tapping a card applies :hover
   and leaves it applied until something else is tapped. Every card that lifts
   or brightens on hover therefore stays lifted after a tap, which is why the
   stats card kept a full strength gold border on a phone.

   Each of these restates its resting appearance where hovering is not a real
   thing. :focus is deliberately left out, since a keyboard still needs to show
   where it is, and :active is untouched so a tap still gives feedback.
   ========================================================================== */

@media (hover: none) {

  .enm-revrail .enm-revcard--stats:hover:not(:active) {
    border-color: var(--enm-line);
    box-shadow: none;
  }

  .enm-guide:hover:not(:active) {
    border-color: var(--enm-line);
    box-shadow: none;
    transform: none;
  }

  .enm-hubs .enm-hub:hover:not(:active) {
    border-color: var(--enm-line);
    box-shadow: none;
    transform: none;
  }

  .enm-castcta a.enm-castcta__item:hover:not(:active) {
    border-color: var(--enm-line-strong);
    background-color: var(--enm-surface);
    box-shadow: none;
  }

  .enm-forcard a.enm-forcard__call:hover:not(:active) {
    background: var(--enm-ink-strong);
  }

  .enm-picker .enm-picker__opt:hover:not(:active) {
    background: transparent;
  }

  .enm-picker__toggle:hover:not(:active) {
    border-color: var(--enm-line-strong);
    background: var(--enm-surface);
    box-shadow: none;
    transform: none;
  }

  .enm-picker__toggle:hover:not(:active) .enm-picker__avatar { transform: none; }

  .enm-forcard .enm-forcard__tool:hover:not(:active) {
    background: var(--enm-surface);
    border-color: var(--enm-line);
    color: var(--enm-ink-soft);
  }

  #ast-scroll-top:hover:not(:active) {
    color: var(--enm-gold) !important;
    transform: none;
  }
}

/* ==========================================================================
   80. Area tiles on a phone

   Two up, portrait on the left, words on the right. This replaces four earlier
   passes at the same block that were all still in the file and overriding each
   other, which is why the name kept coming out at a size nobody had asked for.
   One rule now owns the phone layout.

   The standalone count badge is hidden here: the small line under the name
   already says "37 girls", so the badge was repeating it and taking the width
   the name needed to stay on one line.
   ========================================================================== */

.enm-areatile__text {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.enm-areatile__note {
  font-size: 0.625rem;
  line-height: 1.35;
  color: var(--enm-ink-faint);
  font-variant-numeric: lining-nums tabular-nums;
}

.enm-areatile__dot { margin: 0 0.125rem; }

@media (max-width: 559px) {

  .enm-areatile {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    grid-template-areas: "thumb text";
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.5rem;
  }

  .enm-areatile .enm-areatile__thumb {
    grid-area: thumb;
    width: 2.5rem;
    aspect-ratio: 2 / 3;
  }

  .enm-areatile__text { grid-area: text; }

  .enm-areatile > .enm-areatile__count { display: none; }

  /* The longest name on the roster, "High St Kensington", needs about 96px in
     a 98px column at this size. Sized with a little room so an area added
     later does not put the ellipsis straight back. */
  .enm-areatile__name {
    /* rem is not 16px here: Astra sets the root to about 17.7px, so 0.625rem
       lands at 11.05px rather than 10. Sized in px to take the guesswork out. */
    font-size: 10.5px;
    line-height: 1.3;
    letter-spacing: -0.012em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .enm-areatile__note { font-size: 0.5625rem; }
}

/* Guide clusters on the hub. A heading per group, spaced so the sets read as
   separate shelves rather than one long list broken up by text. */
.enm-guideset + .enm-guideset { margin-top: var(--enm-s-7); }

.enm-guideset__title {
  margin: 0 0 var(--enm-s-4);
  padding-bottom: var(--enm-s-3);
  border-bottom: 1px solid var(--enm-line);
  font-family: var(--enm-font-display);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 500;
  color: var(--enm-ink-strong);
}

/* ==========================================================================
   81. Booking roadmap

   A vertical run of numbered steps on the guides hub. Read as a sequence
   rather than a grid, with a rule down the left joining the numbers, because
   the whole point is that one step follows another.
   ========================================================================== */

.enm-roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.enm-roadstep {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--enm-s-4);
  padding-bottom: var(--enm-s-5);
}

/* The joining line, stopping at the last step rather than running off. */
.enm-roadstep:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.9375rem;
  top: 2.25rem;
  bottom: 0;
  width: 1px;
  background: var(--enm-line);
}

.enm-roadstep__num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--enm-gold-tint);
  color: var(--enm-gold-deep);
  font-family: var(--enm-font-display);
  font-size: 0.9375rem;
  position: relative;
  z-index: 1;
}

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

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

.enm-roadstep__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.875rem;
  margin: 0.5rem 0 0;
  font-size: var(--enm-fs-xs);
}

.enm-roadstep__links a {
  color: var(--enm-gold-deep);
  font-weight: 600;
}

.enm-roadstep__links a:hover { text-decoration: underline; }

.enm-roadmap__foot {
  margin: var(--enm-s-4) 0 0;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
}

.enm-roadmap__foot a { color: var(--enm-gold-deep); }

@media (min-width: 720px) {
  .enm-roadstep__title { font-size: 1.1875rem; }
  .enm-roadstep__text { font-size: var(--enm-fs-base); }
}

/* Guide cards sit on a slightly warmer ground than the page, so a shelf of
   them reads as a set of cards rather than as text floating on white. */
.enm-guide {
  background: var(--enm-surface-sunk);
}

.enm-guide:hover,
.enm-guide:focus-within {
  background: var(--enm-surface);
}

/* ==========================================================================
   82. Breadcrumb row: keeping the marker on the line

   Collapsing the head of the trail on a phone was not enough on its own. Where
   the current page has a long title, "Booking an Escort at a London Hotel",
   the remaining crumb is wide enough on its own to push the count or read time
   marker onto a second line.

   The trail is allowed to shrink and the current page truncates, so the marker
   always keeps its place. The full title is still the H1 directly beneath, so
   nothing is lost by shortening it here.
   ========================================================================== */

.enm-pagehead__top .enm-crumbs {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.enm-pagehead__top .enm-crumbs [aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enm-pagehead__top .enm-crumbs a { white-space: nowrap; }

/* A wrapping flex row wraps before it shrinks, so the trail claimed the whole
   line and pushed the marker underneath even though it was set to shrink and
   truncate. With the truncation in place the row no longer needs to wrap at
   all: the trail gives way instead. */
.enm-pagehead__top {
  flex-wrap: nowrap;
  align-items: center;
}

/* ==========================================================================
   83. Press feedback on cards

   Hover does not exist on a touch screen, and section 79 correctly stops the
   fake one sticking after a tap. The side effect was that a card became inert
   under a finger: nothing at all happened between touching it and the next page
   loading.

   Every card surface now acknowledges a press. The guide card carries its
   effect through :has, because the thing actually being pressed is the
   stretched link inside it rather than the card itself.
   ========================================================================== */

.enm-castcta a.enm-castcta__item:active,
.enm-hubs .enm-hub:active,
.enm-areatile:active,
.enm-revrail .enm-revcard--stats:active,
.enm-guide:has(.enm-guide__link:active) {
  transform: scale(0.985);
  border-color: var(--enm-gold);
  transition-duration: 90ms;
}

/* The guide card also warms slightly, since it has no border colour of its own
   to shift against the tinted background. */
.enm-guide:has(.enm-guide__link:active) {
  background: var(--enm-gold-tint);
}

/* ==========================================================================
   84. Footer on white

   The footer was a dark band closing a light site. Turned over to the same
   paper as everything above it, which means every colour in it has to be
   restated rather than just the background: text set for a dark ground goes
   invisible the moment the ground changes.

   Champagne at full strength is too thin against white for small type, so the
   headings and links take the deeper gold. A hairline at the top keeps the
   footer legible as a separate region now that it no longer changes colour.
   ========================================================================== */

.enm-footer {
  /* Warm at the top, resolving to white by the bottom of the page. The tone
     holds flat through the top half so the columns sit on a consistent ground,
     and only starts giving way from the middle down, which puts the transition
     behind the bottom bar rather than across the links. */
  background: linear-gradient(
    to bottom,
    var(--enm-surface-sunk) 0%,
    var(--enm-surface-sunk) 50%,
    var(--enm-surface) 100%
  );
  color: var(--enm-ink-muted);

  /* The stronger hairline matters more now than it did on the dark band. A
     page ending on a warm section, the home page does, puts two near identical
     tones against each other and the footer stops reading as its own region. */
  border-top: 1px solid var(--enm-line-strong);
}

.enm-footer__brand .enm-logo__place { color: var(--enm-ink-soft); }

.enm-footer__brand .enm-logo__rule {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(23, 20, 15, 0.08) 18%,
    rgba(176, 137, 79, 0.85) 50%,
    rgba(23, 20, 15, 0.08) 82%,
    transparent 100%
  );
}

.enm-footer__blurb { color: var(--enm-ink-muted); }

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

.enm-footer .enm-footer__phone-label { color: var(--enm-gold-deep); }
.enm-footer .enm-footer__phone-num { color: var(--enm-ink-strong); }

@media (hover: hover) {
  .enm-footer__phone:hover {
    border-color: var(--enm-gold);
    background: var(--enm-gold-veil);
  }
}

/* Gold headings worked on the dark band and do not here. Against the warm
   ground gold-deep measures 4.51:1, which passes on paper but is small
   uppercase with wide tracking, and that combination is what makes it hard to
   read rather than the ratio on its own.

   Dark headings with muted links is the ordinary treatment for a light footer.
   The tracking comes in a little too, since letterforms this size do not need
   that much air to read as a label. Gold stays where it is an accent: the
   phone panel and the "all of them" links. */
.enm .enm-footer__heading,
.enm-footer .enm-footer__heading,
.enm .enm-footer h2,
.enm .enm-footer h3 {
  color: var(--enm-ink-strong);
  -webkit-text-fill-color: var(--enm-ink-strong);
  letter-spacing: 0.1em;

  /* Up from the 14px set earlier in the file. Stated here so the whole footer
     heading treatment stays in one place rather than split across two rules. */
  font-size: 16px;
  font-weight: 700;
}

.enm-footer .enm-footer__col a {
  color: var(--enm-ink-muted);
}

@media (hover: hover) {
  .enm-footer .enm-footer__col a:hover { color: var(--enm-gold-deep); }
}

.enm-footer .enm-footer__more {
  color: var(--enm-gold-deep) !important;
  -webkit-text-fill-color: var(--enm-gold-deep);
}

.enm-footer__bottom { border-top-color: var(--enm-line); }

/* ink-faint was legible against the old dark ground and is not against white:
   both of these measured 2.55:1. ink-soft takes them past 4.4:1. */
.enm-footer__legal,
.enm-footer__meta { color: var(--enm-ink-soft); }

.enm-footer .enm-footer__meta a { color: var(--enm-ink-soft); }

@media (hover: hover) {
  .enm-footer .enm-footer__meta a:hover { color: var(--enm-gold-deep); }
}

.enm-footer__age {
  border-color: var(--enm-line-strong);
  color: var(--enm-ink-soft);
}

/* A slight shade under the footer wordmark, to lift it off the warm ground.

   Applied to the wrapper rather than to the mark itself: the lettering is a
   gradient clipped to text, so it has no fill for text-shadow to work from, and
   the mark already carries a filter of its own on hover that this would
   otherwise replace. */

/* ==========================================================================
   85. Footer press states

   With hover correctly scoped to pointers, the footer had nothing left to say
   under a finger. iOS does paint its own tap highlight, but on a light ground
   it is faint enough to read as nothing happening at all.

   Every footer target now answers a press. Colour is the gold the links
   already use on hover, so touch and pointer arrive at the same place.
   ========================================================================== */

.enm-footer a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.enm-footer .enm-footer__col a:active,
.enm-footer .enm-footer__meta a:active,
.enm-footer .enm-footer__more:active {
  color: var(--enm-gold-deep);
  -webkit-text-fill-color: var(--enm-gold-deep);
}

.enm-footer .enm-footer__brandlink:active .enm-logo {
  transform: scale(0.97);
  transition: transform 90ms var(--enm-ease);
}

.enm-footer .enm-footer__brandlink:active .enm-logo__place {
  color: var(--enm-gold-deep);
}

.enm-footer .enm-footer__phone:active {
  border-color: var(--enm-gold);
  background: var(--enm-gold-veil);
  transform: scale(0.99);
  transition: transform 90ms var(--enm-ease);
}

/* ==========================================================================
   86. Footer wordmark in black

   The mark is normally a gradient clipped to the text, so turning it black
   means clearing the background as well as setting a colour: leaving the
   gradient in place with a solid fill would just paint over it.

   The rule beneath keeps its fade to transparent and only changes hue, so it
   still tails off rather than stopping dead.
   ========================================================================== */

.enm-footer__brand .enm-logo__mark {
  background: none;
  -webkit-text-fill-color: var(--enm-ink-strong);
  color: var(--enm-ink-strong);
}

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

/* ==========================================================================
   87. Header wordmark: the same behaviour as the footer

   The footer lockup responds to a pointer and to a press; the header one did
   neither, which made the site's most obvious link feel inert. Same gestures
   here, with one difference: on the home page this sits over the hero
   photograph, where "LONDON" is set light rather than dark, so gold on hover
   would be a step backwards. It brightens there instead.
   ========================================================================== */

.site-title a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

@media (hover: hover) {
  .site-title a:hover .enm-logo__place { color: var(--enm-gold-deep); }
  .site-title a:hover .enm-logo__mark { filter: brightness(0.88); }

}

.site-title a:active .enm-logo {
  transform: scale(0.97);
  transition: transform 90ms var(--enm-ease);
}

.site-title a:active .enm-logo__place { color: var(--enm-gold-deep); }

/* ==========================================================================
   88. Focus rings: keyboard only

   Astra sets outline: thin dotted on :focus. :focus fires on a mouse click as
   well as on keyboard navigation, so a dotted box was being left around
   whatever you last clicked: a menu item, the logo, a button.

   :focus-visible is the distinction the browser already makes for us. It
   matches when focus arrives by keyboard and not when it arrives by pointer,
   so the ring is removed for clicks and kept for tabbing.

   This is deliberately not "outline: none on :focus". Removing the ring
   outright would leave anyone navigating by keyboard with no idea where they
   are on the page.
   ========================================================================== */

*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* And a ring worth having for the case that matters. Anything with its own
   focus-visible treatment already overrides this. */
:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   89. Search fields: one focus indicator, not two

   Astra repaints an input's border to the theme accent on focus. Where a field
   sits inside a wrapper that already carries the focus treatment, that produced
   two indicators at once and the inner one was blue.

   The wrapper keeps the job, since it is the thing that looks like the field.
   The input inside draws nothing in any state.
   ========================================================================== */

.enm-filterbar__search input,
.enm-filterbar__search input:focus,
.enm-filterbar__search input:hover,
.enm-picker__panel .enm-picker__search:focus,
.enm-finder__field input,
.enm-finder__field input:focus {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* The wrapper is the indicator, and it already was. Stated here so the pairing
   is obvious to whoever reads this next. */
.enm-filterbar__search:focus-within {
  border-color: var(--enm-gold);
}


/* ==========================================================================
   90. Full bleed bands on small screens

   The Astra container reset in section 9 sets padding to zero, but Astra
   prints an inline rule at 544px and below that puts it back:

     .ast-separate-container #content .ast-container { padding: 0 0.54em; }

   That carries an ID, so it outranked the reset and the home page sat about
   9px in from each edge on a phone, which cropped the hero photograph away
   from the screen edges.

   Beaten on specificity rather than with !important: the same #content, one
   class deeper. Content keeps its own gutter through .enm-wrap, so only the
   band backgrounds move. Scoped to .enm-full, which functions.php puts on
   every view we build out of bands, so the one page still running through
   Astra's own layout keeps its gutter.
   ========================================================================== */

.enm-full #content.site-content > .ast-container {
  padding-inline: 0;
}


/* ==========================================================================
   91. Place name in the profile subhead

   "Paddington, London" is two links with a comma between them, sitting in a
   flex row. The wrapper from enm_location_label() keeps them as one item so
   the row gap cannot open up around the comma.
   ========================================================================== */

.enm-place {
  display: inline;
}

.enm-profile__sub .enm-place a + a {
  margin-left: 0;
}


/* ==========================================================================
   92. Card name in the body face

   The name sets in Inter, matching the nationality and area on the line below
   rather than the price beside it.

   It needs this much selector because the card name is an h3, and the heading
   rule in section 5 is written as ".enm h3", which scores a class and an
   element. A bare .enm-card__name is only a class and loses, so the family and
   the weight were both being pulled back to the display face. One more class
   settles it without reaching for !important.

   Inter carries a far larger x-height than Cormorant, so the name reads bigger
   than the point size alone suggests. That is why every card name is set a
   pixel under its token: at the token size the sans sat heavier on the card
   than the serif ever did.
   ========================================================================== */

.enm .enm-card__name {
  font-family: var(--enm-font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* ==========================================================================
   93. Caps labels in the body face

   The small uppercase labels come in two kinds that are meant to look
   identical: some are headings ("Details", "Get in touch", "Popular areas")
   and some are not ("profiles listed", "from", the stat captions). The
   non-headings already set in Inter because they inherit from the body. The
   headings were being pulled into Cormorant by the ".enm h2" rule in section
   5, so two labels of the same size and tracking sat in different faces.

   These are labels rather than titles, so they follow the body. Real headings,
   the hero line, a profile name, a guide title, keep the display face.

   Two classes deep, which is what it takes to beat ".enm h2" at a class plus
   an element. Listed one by one rather than caught with a wildcard, so adding
   a new caps label is a deliberate act.
   ========================================================================== */

.enm .enm-panel__title,
.enm .enm-footer__heading,
.enm .enm-filters__label,
.enm .enm-arearest__label,
.enm .enm-bookcta__label,
.enm .enm-castcta__label {
  font-family: var(--enm-font-body);

  /* Bold, and it has to be stated here for the same reason the family does.
     The heading rule sets 500, which was leaving the panel titles lighter than
     the footer headings even though the two are the same kind of label. The
     footer was already 700 through its own rule, so this is what the rest of
     the family was missing rather than a new look. */
  font-weight: 700;
}


/* ==========================================================================
   94. Panel headings: solid ink

   Plain ink, flat. The gradient fill and the per letter shadow that followed
   it have both been taken back out: at 17px in a bold caps label neither one
   was earning its place, and the weight is doing the work on its own.
   ========================================================================== */

.enm .enm-panel__title,
.enm-panel .enm-panel__title {
  color: var(--enm-ink-strong);
}


/* ==========================================================================
   95. Rates a shade smaller on desktop

   Both figures were sitting at --enm-fs-lg, which the serif carried but Inter
   does not: at the same point size the sans has far more presence, and the
   price ended up shouting over the name next to it. Five pixels under the
   token puts the figure clearly below the name in the hierarchy, which is
   where it belongs: the name is what someone is scanning for, the price is
   what they check second.

   Desktop only, so the phone layouts keep the sizes they were tuned at. The
   duo grid sets its own price size at a higher specificity and is untouched.
   ========================================================================== */

@media (min-width: 600px) {

  .enm-card__price {
    font-size: calc(var(--enm-fs-lg) - 9px);
  }

  /* A pixel under the card price. The rate table shows two or three figures a
     row, so it carries a smaller size more comfortably than a card does. */
  .enm-rate-row__value {
    font-size: calc(var(--enm-fs-lg) - 9px);
  }
}

/* The other half of the same job. The rate row had its own size only below
   420px, so between there and 600px it kept the full token and ended up the
   one figure on the site that was larger on a phone than on a desktop. This
   carries the phone size across the whole phone range.

   Deliberately not folded into the 420px block above: that one also switches
   the row to three narrow columns, which is right for a small screen and
   wrong at 560. Only the size travels up. */

@media (max-width: 599px) {

  .enm-rate-row__value {
    font-size: calc(var(--enm-fs-md) - 5px);
  }
}


/* ==========================================================================
   96. Guides hub search

   Reuses the roster field so the two searches on the site look and behave the
   same. The wrapper only handles the spacing around it and the count beneath.
   ========================================================================== */

.enm-guidesearch {
  margin-bottom: var(--enm-s-6);
}

.enm-guidesearch .enm-filterbar__search {
  margin-bottom: 0.5rem;
}

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

.enm-guidesearch__empty {
  margin: 0 0 var(--enm-s-6);
  padding: var(--enm-s-5);
  border: 1px dashed var(--enm-line-strong);
  border-radius: var(--enm-r);
  background: var(--enm-canvas-warm);
  color: var(--enm-ink-muted);
  font-size: var(--enm-fs-sm);
}

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


/* ==========================================================================
   97. Faint diagonal pattern

   A hairline ruling behind a band. Kept at about three per cent alpha, which
   on the warm canvas is enough to give the surface some texture without ever
   becoming a stripe you notice. Anything stronger fights the photographs.

   Painted on a pseudo element rather than the band itself so it sits under
   the content and can be faded at the edges.
   ========================================================================== */

.enm-pattern,
.enm-pagehead--pattern {
  position: relative;
  isolation: isolate;
}

.enm-pattern::before,
.enm-pagehead--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(23, 20, 15, 0.032) 0 1px,
    transparent 1px 9px
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

/* ==========================================================================
   98. Duo and trio combinations

   Two or three portraits sharing one card. The frames are a grid rather than
   a flex row so a trio divides into three equal columns without any of them
   collapsing on a narrow screen.
   ========================================================================== */

.enm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.5rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--enm-line-strong);
  border-radius: var(--enm-r-pill);
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  color: var(--enm-ink-soft);
  vertical-align: middle;
}

.enm-lede--tight { margin-bottom: 0; }

.enm-pagehead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--enm-s-3);
  margin-top: var(--enm-s-5);
}

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

.enm-combo {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--enm-surface);
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r-lg);
  overflow: hidden;
}

.enm-combo__frames {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--enm-line);
}

.enm-combo--trio .enm-combo__frames { grid-template-columns: repeat(3, 1fr); }

.enm-combo__frame {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--enm-canvas-warm);
}

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

/* The withheld-photo panel inside a duo frame, which is about half the width
   of a grid card. Everything steps down and the second line goes: at this size
   the title alone carries it, and the note only crowded the icon. */
.enm-combo__frame .enm-noph {
  padding: var(--enm-s-3);
  gap: 0.375rem;
}

.enm-combo__frame .enm-noph__icon { width: 34%; max-width: 54px; }
.enm-combo__frame .enm-noph__rule { width: 1.75rem; }
.enm-combo__frame .enm-noph__title { font-size: var(--enm-fs-sm); }
.enm-combo__frame .enm-noph__note { display: none; }

.enm-combo__body {
  display: flex;
  flex-direction: column;
  gap: var(--enm-s-2);
  padding: var(--enm-s-4);
  flex: 1 1 auto;
}

.enm-combo__names {
  margin: 0;
  font-family: var(--enm-font-body);
  font-size: var(--enm-fs-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--enm-ink-strong);
}

.enm-combo__names a { color: inherit; }
.enm-combo__amp { color: var(--enm-gold-deep); margin-inline: 0.15rem; }

.enm-combo__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: var(--enm-fs-2xs);
  color: var(--enm-ink-soft);
}

.enm-combo__cta {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 599px) {
  .enm-combos { grid-template-columns: 1fr; }
  .enm-combo__names { font-size: var(--enm-fs-md); }
}


/* ==========================================================================
   99. Duo glass card

   Frosted, over the diagonal pattern. backdrop-filter needs something behind
   it to be worth anything, which is why the band carries .enm-pattern: on a
   flat white ground a blur has nothing to blur and the card reads as a plain
   grey box. The ruling gives it texture to work on.

   The gradient tint is very slightly warm so the glass picks up the canvas
   rather than looking like a cold overlay dropped on top of it.
   ========================================================================== */

.enm-glasscard {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--enm-r-lg);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 255, 255, 0.62) 48%,
      rgba(250, 246, 238, 0.72) 100%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 1px 2px rgba(23, 20, 15, 0.04),
    0 18px 48px rgba(23, 20, 15, 0.075);
}

.enm-glasscard__title {
  margin: 0 0 var(--enm-s-3);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.15;
}

.enm-glasscard__lede {
  margin: 0 0 var(--enm-s-5);
  max-width: 42ch;
  color: var(--enm-ink-muted);
  font-size: var(--enm-fs-base);
}

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

/* Each stat is its own smaller pane. Warmer and a shade darker than the card
   behind it, not lighter: white panes on a white card were the same value as
   their background and the group read as four floating captions rather than
   as tiles. The border is ink at low opacity for the same reason, since a
   white border on near white draws nothing. */
.enm-glassstat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--enm-s-4);
  border: 1px solid rgba(23, 20, 15, 0.08);
  border-radius: var(--enm-r);
  background: rgba(240, 233, 221, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.enm-glassstat__num {
  font-family: var(--enm-font-display);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1;
  color: var(--enm-ink-strong);
}

.enm-glassstat__label {
  font-size: var(--enm-fs-2xs);
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-soft);
}

@media (max-width: 767px) {
  .enm-glasscard { grid-template-columns: 1fr; }
  .enm-glasscard__lede { max-width: none; }
}

/* Compact on a phone. The four panes were carrying desktop padding and a
   desktop numeral, which made the block taller than the copy above it, and
   "sensible minimum" wrapped to two lines so one tile stood taller than its
   neighbour. Smaller type on the label keeps every caption on one line, which
   is what puts the four back on a level. */
@media (max-width: 599px) {

  .enm-glasscard {
    padding: var(--enm-s-4);
    gap: var(--enm-s-4);
  }

  .enm-glassstats { gap: 0.5rem; }

  .enm-glassstat {
    padding: 0.625rem 0.75rem;
    gap: 0;
  }

  .enm-glassstat__num { font-size: 1.25rem; }

  .enm-glassstat__label {
    font-size: 9px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

/* Safari and Chrome both support this, but where they do not the card would
   be a washed out panel with nothing behind it. Solid is the better fallback. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .enm-glasscard { background: #fff; }
  .enm-glassstat { background: var(--enm-canvas-warm); }
}


/* ==========================================================================
   100. Duo card hover

   Matching the roster cards: a small lift, a deeper shadow and a slow zoom on
   the portraits. Only the portrait the pointer is over zooms, so on a trio the
   card responds to which of the three you are looking at rather than moving
   all three at once.

   Every rule is inside (hover: hover). Defining them unqualified is what
   leaves a phone stuck in a hover state after a tap, because iOS keeps the
   last touched element hovered until something else is touched.
   ========================================================================== */

.enm-combo {
  transition:
    transform var(--enm-dur) var(--enm-ease),
    box-shadow var(--enm-dur) var(--enm-ease),
    border-color var(--enm-dur) var(--enm-ease);
}

.enm-combo__img {
  transition: transform 0.5s var(--enm-ease);
}

.enm-combo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 11, 8, 0);
  transition: background var(--enm-dur) var(--enm-ease);
  pointer-events: none;
}

@media (hover: hover) {

  .enm-combo:hover {
    transform: translateY(-4px);
    border-color: var(--enm-line-strong);
    box-shadow: var(--enm-e-3);
  }

  .enm-combo__frame:hover .enm-combo__img { transform: scale(1.05); }

  /* The frames it is not over recede slightly, which points the eye at the one
     it is. */
  .enm-combo__frames:hover .enm-combo__frame:not(:hover)::after {
    background: rgba(13, 11, 8, 0.14);
  }

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

/* Touch gets a press instead, since there is no hover to give feedback with. */
@media (hover: none) {
  .enm-combo:active { transform: scale(0.99); }
}


/* ==========================================================================
   101. Casting tile

   A recruitment card sitting on the profile grid. It borrows .enm-card so the
   sizing, the stretched link and the hover all come free, then replaces the
   photograph with a drawn frame.

   Drawn rather than photographed deliberately: a stock portrait in a grid of
   real profiles reads as one more profile, and implies a woman who is not on
   the books. Gold on ink says "us" instead.
   ========================================================================== */

.enm-casting__frame {
  display: grid;
  place-content: center;
  gap: 0.625rem;
  text-align: center;
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%,
      rgba(201, 168, 106, 0.22) 0%,
      transparent 62%),
    linear-gradient(160deg, #17140f 0%, #221d15 46%, #0d0b08 100%);
}

/* The same ruling the duo band used, kept faint so it reads as texture. */
.enm-casting__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(240, 220, 180, 0.055) 0 1px,
    transparent 1px 10px
  );
  pointer-events: none;
}

.enm-casting__mark {
  font-family: var(--enm-font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  background: linear-gradient(155deg, #f0dcb4 0%, #e3c98f 34%, #d4b478 66%, #f0dcb4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.enm-casting__rule {
  height: 1px;
  width: 3rem;
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, rgba(224, 200, 150, 0.75), transparent);
}

.enm-casting__kicker {
  font-size: var(--enm-fs-2xs);
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: rgba(240, 232, 218, 0.72);
}

.enm-casting__meta { color: var(--enm-ink-soft); }



/* ==========================================================================
   102. Page head actions, side by side on a phone

   The two buttons wrapped, because the phone number is long enough to claim a
   whole row on its own. Holding them on one line means letting both shrink and
   dropping the type a step, which is preferable to a stacked pair that pushes
   the content below the fold.
   ========================================================================== */

@media (max-width: 599px) {

  .enm-pagehead__actions {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .enm-pagehead__actions .enm-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 0.75rem;
    font-size: var(--enm-fs-2xs);
    white-space: nowrap;
  }
}


/* ==========================================================================
   103. Logo wrappers follow the body font

   Astra's Google Fonts request is dequeued in functions.php, so the handful of
   elements that inherited Barlow Semi Condensed need somewhere to land. They
   render no glyphs of their own, the wordmark and the place name are drawn by
   children, but leaving them pointed at a face that no longer loads would put
   a system condensed fallback behind any text that ever ends up here.
   ========================================================================== */

.site-title,
.site-title a,
.enm-logo,
.enm-logo__rule {
  font-family: var(--enm-font-body);
}


/* ==========================================================================
   104. Photos on request

   Stands in for a withheld photograph. The profile stays live, keeps its
   rates, area and services, and only the pictures are replaced, so a woman
   between photo sets does not have to be unpublished and lose the page.

   Sized by the frame it sits in rather than by itself, so it inherits the same
   2:3 box the real images use and nothing on the grid shifts.
   ========================================================================== */

.enm-noph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--enm-s-4);
  text-align: center;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%,
      rgba(201, 168, 106, 0.16) 0%,
      transparent 62%),
    linear-gradient(165deg, #1b1710 0%, #262019 48%, #14110c 100%);
}

.enm-noph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(240, 220, 180, 0.05) 0 1px,
    transparent 1px 10px
  );
  pointer-events: none;
}

.enm-noph__icon {
  width: 38%;
  max-width: 84px;
  height: auto;
  color: rgba(224, 200, 150, 0.62);
}

.enm-noph__rule {
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 200, 150, 0.6), transparent);
}

.enm-noph__title {
  font-family: var(--enm-font-display);
  font-size: var(--enm-fs-base);
  color: #f0e4cc;
  line-height: 1.2;
}

.enm-noph__note {
  font-size: 10px;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: rgba(240, 232, 218, 0.6);
}

/* The portrait is a much larger box, so everything steps up with it. */
.enm-noph--portrait {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--enm-r-lg);
  overflow: hidden;
  gap: 0.75rem;
}

/* Inside the profile figure it fills the frame instead of setting its own
   shape. That figure is a fixed height on desktop (58vh) because it normally
   holds a cover-fitted photograph, so a placeholder insisting on 2:3 came out
   256px taller than the box that clips it and the note fell off the bottom. */
.enm-profile__figure .enm-noph--portrait {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.enm-noph--portrait .enm-noph__icon { width: 30%; max-width: 140px; }
.enm-noph--portrait .enm-noph__title { font-size: var(--enm-fs-lg); }
.enm-noph--portrait .enm-noph__note { font-size: var(--enm-fs-2xs); }

@media (max-width: 599px) {
  .enm-noph__title { font-size: var(--enm-fs-sm); }
  .enm-noph__note { font-size: 9px; }
}


/* ==========================================================================
   105. Read more, on a blog post

   Borrows the guides list wholesale so the two read as one site. Only the
   trailing "all posts" line is new.
   ========================================================================== */

.enm-guidemore__all {
  margin: var(--enm-s-4) 0 0;
  font-size: var(--enm-fs-2xs);
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
}

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

@media (hover: hover) {
  .enm-guidemore__all a:hover { border-bottom-color: var(--enm-gold); }
}


/* ==========================================================================
   106. Distance note on an outcall area page

   Sits under a card on an area with nobody based in it. Small and quiet: the
   card is the thing, the distance is a qualifier on it.
   ========================================================================== */

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


/* ==========================================================================
   107. Subheading inside the areas disclosure

   Separates the areas we are based in from the ones we only reach by outcall,
   without adding a second band to the page. Quiet enough to read as a divider
   rather than as a new section.
   ========================================================================== */

.enm-arearest__subhead {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: var(--enm-s-5) 0 var(--enm-s-3);
  padding-top: var(--enm-s-4);
  border-top: 1px solid var(--enm-line);
  font-size: var(--enm-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-ink-muted);
}

.enm-arearest__subhead span {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-size: var(--enm-fs-2xs);
  color: var(--enm-ink-soft);
}


/* ==========================================================================
   108. Distance caveat on a far out area page

   Only renders where the nearest escort is more than three miles off. Set as
   a note rather than a warning: it is useful information, not a problem.
   ========================================================================== */

.enm-farnote {
  margin: var(--enm-s-5) 0 0;
  padding: var(--enm-s-4);
  border: 1px solid var(--enm-line-strong);
  border-left: 3px solid var(--enm-gold);
  border-radius: var(--enm-r);
  background: var(--enm-canvas-warm);
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-muted);
  max-width: var(--enm-wrap-text);
}

.enm-farnote strong { color: var(--enm-ink-strong); }

/* ==========================================================================
   109. Sitemap

   A reading page rather than a crawler artefact, so it is set like the rest of
   the site: Cormorant headings, a gold hairline under each block, and the
   counts held back in a muted figure so the names stay the thing you scan.

   The lists are CSS columns rather than a grid because the items are single
   lines of wildly different lengths, and columns balance that without any of
   them needing a fixed width.
   ========================================================================== */

.enm-sitemap__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--enm-line);
}

.enm-sitemap__jump a {
  font-family: var(--enm-font-body, Inter, system-ui, sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--enm-ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.enm-sitemap__jump a:hover,
.enm-sitemap__jump a:focus-visible {
  color: var(--enm-gold-deep);
  border-bottom-color: var(--enm-gold);
}

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

.enm-sitemap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem 3rem;
}

.enm-sitemap__block { min-width: 0; }

.enm .enm-sitemap__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--enm-gold-veil);
  font-family: var(--enm-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--enm-ink-strong);
}

.enm-sitemap__tally {
  font-family: var(--enm-font-body, Inter, system-ui, sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--enm-gold-deep);
}

.enm-sitemap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
}

/* The roster and the services run long, so let those two flow into columns
   while the shorter regional blocks stay in one. */
.enm-sitemap > .enm-wrap > .enm-sitemap__block .enm-sitemap__list {
  columns: 16rem 4;
  column-gap: 2.5rem;
}

.enm-sitemap__list li {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.enm-sitemap__list a {
  color: var(--enm-ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.enm-sitemap__list a:hover,
.enm-sitemap__list a:focus-visible {
  color: var(--enm-ink-strong);
  border-bottom-color: var(--enm-gold);
}

.enm-sitemap__count {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--enm-ink-faint);
  font-variant-numeric: tabular-nums;
}

.enm-sitemap__foot {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--enm-line);
  font-size: 0.9rem;
  color: var(--enm-ink-soft);
}

@media (max-width: 599px) {
  .enm-sitemap__grid { gap: 2rem; }
  .enm-sitemap > .enm-wrap > .enm-sitemap__block .enm-sitemap__list { columns: 1; }
  .enm-sitemap__jump { gap: 0.4rem 1rem; }
}

/* ==========================================================================
   110. Footer brand card: quick actions and opening hours

   Two icon only links pinned to the top right of the brand block, sitting
   opposite the wordmark rather than competing with the phone number, which
   stays the primary call. Labels live in aria-label and title, so the meaning
   survives for a screen reader and on hover without adding visual weight.

   The hours line answers the question the phone number provokes: whether
   anyone is going to pick up.
   ========================================================================== */

/* The card carries the border now, so the phone link inside it gives its own
   up and the two sit as one object: number on the left, actions on the right. */
.enm-footer__contact {
  /* Fills the brand column rather than shrinking to the number, which left the
     opening hours wrapping onto two lines with space going spare beside it. */
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 0.7rem 0.8rem 0.7rem 1.25rem;
  border: 1px solid rgba(176, 137, 79, 0.45);
  border-radius: var(--enm-r);
  background: var(--enm-gold-tint);
  transition: border-color var(--enm-dur) var(--enm-ease);
}

.enm-footer .enm-footer__contact .enm-footer__phone {
  border: 0;
  padding: 0;
  background: none;
}

.enm-footer .enm-footer__contact .enm-footer__phone:hover { background: none; }

@media (hover: hover) {
  .enm-footer__contact:hover { border-color: var(--enm-gold); }
}

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

.enm-footer__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  margin-left: auto;
  padding-left: 1rem;
  border-left: 1px solid rgba(176, 137, 79, 0.28);
}

.enm-footer__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(176, 137, 79, 0.4);
  border-radius: var(--enm-r);
  color: var(--enm-gold-deep);
  transition: border-color var(--enm-dur) var(--enm-ease),
              background var(--enm-dur) var(--enm-ease),
              color var(--enm-dur) var(--enm-ease);
}

.enm-footer__action svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

@media (hover: hover) {
  .enm-footer__action:hover {
    border-color: var(--enm-gold);
    background: var(--enm-gold-veil);
    color: var(--enm-ink-strong);
  }
}

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

.enm-footer__hours {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  /* Sized to clear the brand column in one line. Any larger and "seven days"
     drops to a second row and unbalances the card. */
  font-size: 0.6rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--enm-ink-soft);
}

.enm-footer__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--enm-verified);
  flex: none;
}

@media (max-width: 420px) {
  /* Narrow enough that the number and the icons stop fitting on one line. */
  .enm-footer__contact {
    display: flex;
    width: 100%;
    gap: 0.9rem;
  }
}

/* ==========================================================================
   111. Sitemap: the XML block

   Set apart from the human sections above it. The filename sits under each
   label in a mono face because that is what you are actually going to paste
   into Search Console.
   ========================================================================== */

.enm-sitemap__xml {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--enm-line);
}

.enm-sitemap__xmlnote {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: var(--enm-ink-soft);
}

.enm-sitemap__xmllist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.75rem 1.5rem;
}

.enm-sitemap__xmllist a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  text-decoration: none;
  color: var(--enm-ink-muted);
  font-size: 0.85rem;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.enm-sitemap__xmllist a span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  color: var(--enm-ink-faint);
  word-break: break-all;
}

@media (hover: hover) {
  .enm-sitemap__xmllist a:hover {
    border-color: var(--enm-gold);
    background: var(--enm-gold-veil);
  }
}

.enm-sitemap__xmllist a:hover span { color: var(--enm-gold-deep); }

/* ==========================================================================
   112. The gold rule on text links

   A hairline that is transparent until hovered, then gold. It began as a
   global rule with a growing :not() list of everything it should skip, and
   that was the wrong shape: every link component with a border of its own
   had its bottom edge quietly replaced by a transparent one. It happened to
   the footer icon buttons, then to the XML cards, then to the browse hubs.
   Each fix added another class to the exclusion list and the next component
   broke the same way.

   So it is opt in now. Listed here are the places that actually hold running
   text, where an underline is what you want. Anything that is a card, a
   button or a tile is simply never matched, which is a rule that cannot rot
   as components get added.
   ========================================================================== */

/* .enm-arearest a used to be in this list and should not have been. Those are
   pills with a border on all four sides, so a bottom-only underline landed on
   an edge that was already drawn and overwrote it with transparent: three
   sides visible and the bottom missing. They have their own hover, which is
   the whole pill warming, and that is the right answer for a tile. */
.enm-prose a,
.enm-lede a,
.enm p a,
.enm-footer__col a,
.enm-sitemap__list a,
.enm-sitemap__jump a,
.enm-farnote a {
  border-bottom: 1px solid transparent;
  transition: color var(--enm-dur) var(--enm-ease),
              border-color var(--enm-dur) var(--enm-ease);
}

@media (hover: hover) {
  .enm-prose a:hover,
  .enm-lede a:hover,
  .enm p a:hover,
  .enm-footer__col a:hover,
  .enm-sitemap__list a:hover,
  .enm-sitemap__jump a:hover,
  .enm-farnote a:hover {
    border-bottom-color: var(--enm-gold);
  }
}

/* ==========================================================================
   113. The same, on touch

   Section 112 hides behind (hover: hover), which is right for a hover effect
   and leaves a phone with a border that is permanently transparent. On touch
   the affordance has to be at rest, held at the veil tint so a column of nine
   footer links does not become nine hard underlines.
   ========================================================================== */

@media (hover: none) {

  .enm-prose a,
  .enm-lede a,
  .enm p a,
  .enm-footer__col a,
  .enm-sitemap__list a,
  .enm-sitemap__jump a,
  .enm-farnote a {
    border-bottom-color: var(--enm-gold-veil);
  }

  .enm-prose a:active,
  .enm-lede a:active,
  .enm p a:active,
  .enm-footer__col a:active,
  .enm-sitemap__list a:active,
  .enm-sitemap__jump a:active,
  .enm-farnote a:active {
    border-bottom-color: var(--enm-gold);
  }
}

/* ==========================================================================
   114. Footer contact card on touch

   The card and its two icons only ever responded to hover, which on an iPhone
   means they never responded at all. These give the same answer to a finger
   that the hover states give to a cursor, and the tap highlight is tinted to
   the gold rather than left as Safari's default grey box.
   ========================================================================== */

/* .enm-footer a already clears the tap highlight for the whole footer, and it
   outranks a single class, so these have to be qualified to win it back. The
   icons are targets rather than text links and deserve the acknowledgement. */
.enm-footer .enm-footer__action,
.enm-footer .enm-footer__contact,
.enm-footer .enm-footer__phone {
  -webkit-tap-highlight-color: rgba(176, 137, 79, 0.16);
}

@media (hover: none) {
  .enm-footer__action:active {
    border-color: var(--enm-gold);
    background: var(--enm-gold-veil);
    color: var(--enm-ink-strong);
  }

  .enm-footer__contact:active { border-color: var(--enm-gold); }

  .enm .enm-footer__phone:active .enm-footer__phone-num { color: var(--enm-gold-deep); }
}

/* ==========================================================================
   115. Partners, and the 404

   Two pages that only exist because of what the domain used to be. The
   partners page rebuilds a URL that still carries most of the site's inbound
   links; the 404 catches whatever the redirect map does not.

   The snippet blocks are the fiddly part: a partner is going to select the
   contents, so the code has to wrap rather than scroll on a phone, and the
   copy button must not sit on top of the text it is copying.
   ========================================================================== */

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

.enm-partners__row { display: grid; gap: 1.25rem; }

.enm-partners__preview--text {
  padding: 1.25rem;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
}

.enm-partners__preview--text a { color: var(--enm-gold-deep); font-weight: 600; }
.enm-partners__preview--text span { color: var(--enm-ink-muted); }

.enm-partners__banner {
  display: grid;
  gap: 1rem 2rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--enm-line);
  grid-template-columns: 1fr;
}

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

.enm .enm-partners__meta h3 {
  margin: 0 0 0.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.1rem;
}

.enm-partners__meta h3 span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--enm-gold-deep);
}

.enm-partners__meta p { margin: 0; font-size: 0.88rem; color: var(--enm-ink-soft); }

.enm-partners__art {
  overflow-x: auto;
  padding: 0.5rem 0;
}

.enm-partners__art img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* The skyscraper is 600 tall and would otherwise set the row height. */
.enm-partners__art img[height="600"] { max-height: 300px; width: auto; }

.enm-snippet { position: relative; }

.enm-snippet pre {
  margin: 0;
  padding: 0.9rem 4.5rem 0.9rem 1rem;
  background: var(--enm-ink);
  border-radius: var(--enm-r);
  overflow-x: auto;
}

.enm-snippet code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--enm-gold-bright);
  white-space: pre-wrap;
  word-break: break-all;
}

.enm-snippet__copy {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--enm-ink);
  background: var(--enm-gold);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.enm-snippet__copy.is-done { background: var(--enm-verified); color: #fff; }

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

.enm-partners__list a {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);

  /* Same easing the escort cards use, so the two feel like one site. */
  transition:
    transform var(--enm-dur) var(--enm-ease-out),
    box-shadow var(--enm-dur) var(--enm-ease-out),
    border-color var(--enm-dur) var(--enm-ease-out);
}

.enm-partners__list .enm-partners__banner-art img {
  transition: transform var(--enm-dur-slow) var(--enm-ease-out);
}

/* A pointer gets the lift the escort cards get. Restrained: these are
   outbound links to somebody else's site, not the merchandise. */
@media (hover: hover) {

  /* gold-bright, not gold-veil. The veil is twelve percent gold, which
     over white lands lighter than the resting border it replaces, so
     hovering faded the edge away instead of warming it. */
  .enm-partners__list a:hover {
    transform: translateY(-3px);
    border-color: var(--enm-gold-bright);
    box-shadow: var(--enm-e-2);
  }

  .enm-partners__list a:hover .enm-partners__banner-art img {
    transform: scale(1.02);
  }
}

/* A finger pushes down rather than lifting, so the card settles instead.
   Without this a tap gives no sign of having registered at all, which on an
   outbound link is the half second where people tap a second time.

   ui.js already registers the empty touchstart listener iOS wants before it
   will apply :active to anything. */
@media (hover: none) {

  .enm-partners__list a:active {
    transform: scale(0.985);
    border-color: var(--enm-gold-bright);
    box-shadow: var(--enm-e-2);
  }

  /* Safari's grey flash on top of a card that is already responding is one
     signal too many. */
  .enm-partners__list a {
    -webkit-tap-highlight-color: transparent;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .enm-partners__list a,
  .enm-partners__list .enm-partners__banner-art img {
    transition: none;
  }

  .enm-partners__list a:hover,
  .enm-partners__list a:active {
    transform: none;
  }
}

.enm-partners__list strong { display: block; color: var(--enm-ink-strong); }

.enm-partners__list a > span {
  display: block;
  font-size: 0.8rem;
  color: var(--enm-gold-deep);
}

.enm-partners__list .enm-partners__desc {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--enm-ink-muted);
  max-width: var(--enm-wrap-text);
}

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

.enm-404grid {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.enm-404grid a {
  display: block;
  height: 100%;
  padding: 1.4rem;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.enm-404grid__num {
  display: block;
  font-family: var(--enm-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--enm-gold-deep);
  margin-bottom: 0.4rem;
}

.enm-404grid strong { display: block; color: var(--enm-ink-strong); margin-bottom: 0.2rem; }
.enm-404grid a > span:last-child { font-size: 0.85rem; color: var(--enm-ink-soft); }

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

.enm-404search { max-width: var(--enm-wrap-text); }
.enm-404search .enm-eyebrow { margin-bottom: 0.6rem; }

@media (min-width: 700px) {
  .enm-partners__banner { grid-template-columns: 15rem 1fr; align-items: start; }
  .enm-partners__banner .enm-snippet { grid-column: 1 / -1; }
}

/* A partner's own banner, shown at the size they supply it. */
.enm-partners__list a { display: block; }

.enm-partners__banner-art {
  display: block;
  margin: 0 0 0.9rem;
  max-width: 100%;
  overflow-x: auto;
}

.enm-partners__banner-art img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

/* ==========================================================================
   117. Booking card for a duo or a trio

   The card was built for one escort and its portrait column is about 145px
   wide. Splitting that between three faces gives each one 48px, which crops a
   portrait into a vertical sliver: technically all three are shown, and you
   cannot tell who any of them are.

   So a party gets an overlapping round stack instead, the pattern used for
   showing several people in a small space. At 56px each with an 18px overlap,
   three fit inside the same column with room to spare, and a face is legible
   at that size where a sliver is not.

   object-position sits high, because a portrait cropped square from the centre
   lands on the collarbone.
   ========================================================================== */

.enm-forcard__thumb--stack {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* Sized as a share of the column rather than in pixels. The thumb column is
   145px on a wide screen and 85px on a phone, and a fixed 56px avatar that
   fits the first overflows the second: three of them ran to 140px inside an
   85px column and spilled out past the edge of the card.

   At 40% wide with a 10% overlap, three always come to exactly 100% of
   whatever the column happens to be, so it fits at every width without a
   breakpoint. aspect-ratio keeps them round as they scale. */
/* Each face is its own link now, so the circle lives on the anchor and the
   image simply fills it. */
/* Positioned, which every other frame that can hold a withheld photograph
   already was. The placeholder is position:absolute with inset:0, so on a
   static parent it resolved against the thumb column instead: a 145 by 198
   panel hung off the 95px avatar at minus 25, minus 102, escaping the round
   clip and taking a 50% radius from border-radius:inherit, which is what drew
   the tall dark oval next to the face that did have a photograph.

   It also makes the inline z-index on each face count. That was written to
   order the stack and had been doing nothing, since z-index is ignored on a
   static element. */
.enm-forcard__face {
  position: relative;
  display: block;
  width: 40%;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--enm-surface);
  box-shadow: 0 2px 8px rgba(23, 20, 15, 0.18);
  transition: transform var(--enm-dur) var(--enm-ease),
              box-shadow var(--enm-dur) var(--enm-ease);
}

.enm-forcard__face .enm-forcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 0;
  border: 0;
  display: block;
}

/* Lifts the one under the cursor clear of its neighbours, so it is obvious
   which face you are about to open. */
@media (hover: hover) {
  .enm-forcard__face:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 16px rgba(23, 20, 15, 0.3);
    z-index: 20 !important;
  }
}

.enm-forcard__face:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: 2px;
  z-index: 20;
}

.enm-forcard__face + .enm-forcard__face { margin-left: -10%; }

/* ==========================================================================
   118. Booking card for a party, on a phone

   Side by side, the thumb column is 85px on a phone. Three avatars sized to
   fit it come out at 34px each, which is small enough that you cannot tell one
   from another, and the whole point of showing three faces is that you can.

   So a party card goes to one column below 600px and the stack gets a proper
   width of its own. A single escort keeps the side by side layout, which works
   perfectly well at that size and is not worth changing.
   ========================================================================== */

@media (max-width: 599px) {

  .enm-forcard:has(.enm-forcard__thumb--stack) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "thumb"
      "head"
      "call"
      "pick"
      "note";
    justify-items: start;
  }

  .enm-forcard__thumb--stack {
    width: 100%;
    max-width: 12rem;
    justify-content: flex-start;
    margin-bottom: 0.25rem;
  }
}

/* ==========================================================================
   119. "She also books duos" on the booking card

   Somebody who tapped "Book her" has chosen one person and has no idea a
   pairing is available unless they happened to find the duos page. This puts
   the combinations she is actually in, agreed by both women, in front of them
   at the moment it is useful.

   Sits inside the card's note area so it reads as part of the same object
   rather than a second card competing with it.
   ========================================================================== */

.enm-alsoduo {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--enm-gold-veil);
}

.enm-alsoduo__lead {
  margin: 0 0 0.7rem;
  font-size: 0.8125rem;
  color: var(--enm-ink-strong);
  font-weight: 600;
}

.enm-alsoduo__lead span {
  display: block;
  font-weight: 400;
  color: var(--enm-ink-soft);
}

.enm-alsoduo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.enm-alsoduo__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r-sm);
  background: var(--enm-surface);
  transition: border-color var(--enm-dur) var(--enm-ease),
              background var(--enm-dur) var(--enm-ease),
              box-shadow var(--enm-dur) var(--enm-ease),
              transform var(--enm-dur) var(--enm-ease);
}

/* A chevron rather than a hover-only cue, because most of the people reading
   this are on a phone and will never produce a hover. It sits quiet at rest
   and does the moving when there is a pointer. */
.enm-alsoduo__opt::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--enm-ink-faint);
  border-bottom: 1.5px solid var(--enm-ink-faint);
  transform: rotate(-45deg);
  transition: border-color var(--enm-dur) var(--enm-ease),
              transform var(--enm-dur) var(--enm-ease);
}

.enm-alsoduo__faces {
  transition: transform var(--enm-dur) var(--enm-ease);
}

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

  .enm-alsoduo__opt:hover::after {
    border-color: var(--enm-gold-deep);
    transform: rotate(-45deg) translate(2px, 2px);
  }

  /* Scaled rather than respaced, so the names beside them do not shuffle. */
  .enm-alsoduo__opt:hover .enm-alsoduo__faces { transform: scale(1.06); }
}

/* Touch gets the same colour change on press, without the lift, which reads
   as lag rather than as feedback when your finger is already on it. */
.enm-alsoduo__opt:active {
  border-color: var(--enm-gold);
  background: var(--enm-gold-tint);
}

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

@media (prefers-reduced-motion: reduce) {
  .enm-alsoduo__opt,
  .enm-alsoduo__opt::after,
  .enm-alsoduo__faces { transition: none; }

  .enm-alsoduo__opt:hover { transform: none; }
  .enm-alsoduo__opt:hover .enm-alsoduo__faces { transform: none; }
}

.enm-alsoduo__faces {
  display: flex;
  flex: none;
}

.enm-alsoduo__face {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 2px solid var(--enm-surface);
}

.enm-alsoduo__face + .enm-alsoduo__face { margin-left: -0.5rem; }

.enm-alsoduo__text { min-width: 0; line-height: 1.3; }

.enm-alsoduo__text strong {
  display: block;
  font-size: 0.8125rem;
  color: var(--enm-ink-strong);
  font-weight: 600;
}

.enm-alsoduo__text > span {
  font-size: 0.72rem;
  color: var(--enm-ink-soft);
}

/* ==========================================================================
   120. Landing on the booking card

   Choosing a name in the picker is a page load, so the browser put you back at
   the top: the H1, the lede, and the card you had just chosen sitting below
   the fold. You had to scroll to see the thing you had asked for.

   The picker and the duo buttons now link to #book, and this offset decides
   where that lands. A plain anchor would pin the card's top edge to the very
   top of the window, which loses the page's own heading and reads as though
   you have arrived somewhere else. A quarter viewport down puts the card near
   the middle with the page still recognisable around it.

   Done with scroll-margin rather than script, so it is right on the first
   paint rather than after a jump.
   ========================================================================== */

#book {
  scroll-margin-top: 25vh;
}

@media (max-width: 599px) {
  /* Less room on a phone, and the card is taller, so sit it higher or the
     Call button ends up under the browser's own toolbar. */
  #book { scroll-margin-top: 12vh; }
}

/* Where a #book arrival lands is decided in ui.js, not here. The offsets
   above still apply to scrollIntoView, but the scroll a browser performs for
   a fragment on page load ignores scroll-margin entirely, which is why this
   never worked on a real navigation. */

/* ==========================================================================
   121. Party avatars run vertically on desktop

   Side by side, three avatars have to share a 145px column and come out at
   about 40px each. Turned through ninety degrees they each get the full width
   of the column instead, and the card has vertical room going spare: it stands
   355px tall for a stack that was only 60.

   Percentage margins resolve against the containing block's width, not its
   height, so -18% is a predictable 26px overlap at this column width rather
   than something that drifts with the card's height.

   Desktop only. On a phone the card is already one column with the faces in a
   row at 82px, which is larger than this would give and reads better there.
   ========================================================================== */

@media (min-width: 600px) {

  .enm-forcard__thumb--stack {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
  }

  .enm-forcard__thumb--stack .enm-forcard__face {
    width: 66%;
  }

  /* Spaced, not overlapped. Overlapping reads as a stack of cards when they
     run left to right, and as one face hiding another when they run top to
     bottom: the middle circle ate the bottom of the first and the last ate the
     middle. Vertically there is room to simply separate them, and three faces
     you can see is the entire point of showing three. */
  .enm-forcard__thumb--stack .enm-forcard__face + .enm-forcard__face {
    margin-left: 0;
    margin-top: 0;
  }
}

/* ==========================================================================
   122. Escort cards on touch

   The card lifts, its frame deepens and the portrait scales a little on
   hover, and every one of those sits behind (hover: hover). Correct, because
   a phone reporting a hover state it cannot deliver is worse than none. But
   it left a phone with a grid of cards that give no sign of having been
   pressed at all: you tap, nothing moves, and for the half second before the
   next page arrives you do not know whether it registered.

   :active is the touch equivalent. Pressed rather than lifted, because a
   finger is pushing down: the card settles slightly and the frame tightens.
   The scale is deliberately small. Anything larger reads as the card moving
   away from you at the moment you are trying to open it.

   ui.js registers the empty touchstart listener that iOS needs before it will
   apply :active at all.
   ========================================================================== */

@media (hover: none) {

  .enm-card:active {
    transform: scale(0.975);
  }

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

  .enm-card:active .enm-card__img {
    transform: scale(1.03);
  }

  /* Safari's grey flash on top of a card that is already responding is one
     signal too many. */
  .enm-card,
  .enm-card__link {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Keyboard users get the same acknowledgement as a cursor, and a ring that
   follows the card's own corner radius rather than a browser default box. */
.enm-card__link:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: 3px;
}

.enm-card:has(.enm-card__link:focus-visible) .enm-card__frame {
  box-shadow: var(--enm-e-3);
}

/* ---- 113. Sibling term links -------------------------------------------
   A quiet index at the foot of every nationality, service and category page.
   Its job is internal linking rather than browsing, so it is deliberately
   plainer than the chip rail at the top: no counts, no scroller, no active
   state. Wraps to as many rows as it needs. */
.enm-termtail {
  padding: 2rem 0 2.75rem;
  border-top: 1px solid var(--enm-line);
}

.enm-termtail .enm-eyebrow {
  margin-bottom: 0.75rem;
}

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

.enm-termtail__list li {
  margin: 0;
}

.enm-termtail__list a {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--enm-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

@media (hover: hover) {
  .enm-termtail__list a:hover {
    color: var(--enm-ink-strong);
    border-bottom-color: currentColor;
  }
}

/* ---- 114. Guide links on browse pages ----------------------------------
   Three at most, sitting above the sibling index. Cards would compete with
   the escort grid directly above, so these are rules and text instead. */
.enm-guidelinks__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--enm-line);
}

@media (min-width: 780px) {
  .enm-guidelinks__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2rem;
  }
}

.enm-guidelinks__list li {
  margin: 0;
  border-bottom: 1px solid var(--enm-line);
}

@media (min-width: 780px) {
  .enm-guidelinks__list li { border-bottom: 0; }
}

.enm-guidelinks__list a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 0;
  text-decoration: none;
  color: inherit;
}

.enm-guidelinks__title {
  font-family: var(--enm-font-display);

  /* Was 17px. The display serif is light enough that it needs more size than
     a sans would at the same job, and these sat smaller than the sentence of
     grey text underneath them, which is the wrong way round for a link that
     is the thing you are meant to read first. */
  font-size: 1.25rem;
  line-height: 1.28;
  color: var(--enm-ink-strong);
}

.enm-guidelinks__note {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--enm-ink-soft);
}

@media (hover: hover) {
  .enm-guidelinks__list a:hover .enm-guidelinks__title {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ---- 115. Rate index ----------------------------------------------------
   A data page laid out as data: figures on tabular numerals, the median
   carrying the weight because it is the number people came for, and the
   sample count quiet without being hidden.

   The panels are frosted glass. That only works if something sits behind
   them to blur, so each section lays down a champagne wash first and every
   panel floats above it. Over a flat colour a backdrop filter renders as
   nothing at all and the whole thing reads as plain translucency. */
.enm-ratesection {
  position: relative;
  isolation: isolate;
}

/* Consecutive bands hand off flush by default and let the one above supply
   the gap, which is right for a plain band and wrong for one that paints a
   background: the wash starts at the section box, so its top edge landed on
   the heading and the title sat on the seam with nothing above it. The gap
   has to be inside the section for the wash to sit behind it. Taken off the
   bottom in the same breath so the page does not simply grow. */
.enm-section + .enm-ratesection { padding-top: calc(var(--enm-band) * 0.4); }
.enm-ratesection { padding-bottom: calc(var(--enm-band) * 0.35); }

/* Two soft champagne pools, off centre so the blur has an edge to work on
   rather than an even field. Behind the content, and untouchable. */
.enm-ratesection::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(42% 62% at 14% 18%, rgba(201, 168, 106, 0.22), transparent 70%),
    radial-gradient(46% 58% at 86% 82%, rgba(176, 137, 79, 0.15), transparent 72%),
    radial-gradient(60% 70% at 50% 50%, rgba(243, 236, 223, 0.55), transparent 75%);
  pointer-events: none;
}

/* --- The headline figures ------------------------------------------------
   Four numbers, each on its own pane rather than four cells sharing a box.
   Separate panes let each figure carry its own edge and its own shadow, so
   they read as four findings instead of one table with the rules removed. */
.enm-ratefacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 479px) {
  .enm-ratefacts { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1080px) {
  .enm-ratefacts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.enm-ratefact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.35rem 1.35rem 1.45rem;
  border: 1px solid var(--enm-glass-edge);
  border-radius: var(--enm-r-lg);
  background: var(--enm-glass);
  -webkit-backdrop-filter: var(--enm-glass-blur);
  backdrop-filter: var(--enm-glass-blur);
  box-shadow: var(--enm-glass-lip), var(--enm-e-2);
}

.enm-ratefact b {
  font-family: var(--enm-font-display);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 500;
  line-height: 1;
  color: var(--enm-ink-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

.enm-ratefact span {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--enm-ink-muted);
}

.enm-ratenote {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--enm-ink-muted);
  max-width: var(--enm-wrap-text);
  margin: 0.5rem 0 1.25rem;
}

/* --- The tables ----------------------------------------------------------
   One glass panel holding the whole table on a wide screen. Wide content
   still scrolls inside its own box rather than pushing the page out. */
.enm-ratetable__wrap {
  overflow-x: auto;
  margin-top: 1.25rem;
  padding: 0.4rem 1.5rem 0.75rem;
  border: 1px solid var(--enm-glass-edge);
  border-radius: var(--enm-r-lg);
  background: var(--enm-glass);
  -webkit-backdrop-filter: var(--enm-glass-blur);
  backdrop-filter: var(--enm-glass-blur);
  box-shadow: var(--enm-glass-lip), var(--enm-e-2);
}

/* Astra puts a border on all four sides of every table cell, so a table
   styled only on the bottom edge keeps its vertical rules and reads as a
   spreadsheet. Cleared here rather than overridden one edge at a time. */
.enm-ratetable {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: transparent;
}

.enm-ratetable th,
.enm-ratetable td {
  border: 0;
  border-bottom: 1px solid var(--enm-line);
  padding: 0.95rem 1.25rem;
  text-align: left;
  white-space: nowrap;
  vertical-align: baseline;
  background: transparent;
}

/* Flush to the panel's own padding at both ends, so the columns sit on one
   margin rather than floating inside a second indent. */
.enm-ratetable th:first-child,
.enm-ratetable td:first-child { padding-left: 0; }
.enm-ratetable th:last-child,
.enm-ratetable td:last-child { padding-right: 0; }

.enm-ratetable thead th {
  font-family: var(--enm-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--enm-ink-muted);
  padding-bottom: 0.7rem;
  border-bottom-color: var(--enm-ink-strong);
}

.enm-ratetable tbody th {
  font-family: var(--enm-font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--enm-ink-strong);
  white-space: normal;
}

@media (min-width: 720px) {
  .enm-ratetable tbody tr:last-child th,
  .enm-ratetable tbody tr:last-child td { border-bottom: 0; }
}

@media (hover: hover) {
  .enm-ratetable tbody tr:hover th,
  .enm-ratetable tbody tr:hover td { background: var(--enm-glass-deep); }
}

.enm-ratetable tbody th a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--enm-gold-veil);
}

@media (hover: hover) {
  .enm-ratetable tbody th a:hover { border-bottom-color: var(--enm-gold); }
}

.enm-ratetable .num {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--enm-ink-muted);
}

/* The median is the number people came for, so it is the one set in the
   display face at a size you can read across the table. */
.enm-ratetable .strong {
  font-family: var(--enm-font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--enm-ink-strong);
}

/* The sample size earns its place by being checkable, not by being read. */
.enm-ratetable .muted {
  color: var(--enm-ink-soft);
  font-size: 0.8125rem;
}

/* --- Phones --------------------------------------------------------------
   Six columns will not fit a phone. Scrolling sideways was the result, with
   the first column wrapping to three lines and the last two off screen,
   which is the least readable way to present six numbers.

   Under 720px each row becomes its own glass card: the booking or the area
   as the title, the median beside it at size, a rule, then every supporting
   figure on its own small pane with its column name above it. Nothing is
   hidden, nothing scrolls sideways, and no figure is left to be identified
   by its position now that the header row has gone. */
@media (max-width: 719px) {

  .enm-ratetable__wrap {
    overflow-x: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .enm-ratetable,
  .enm-ratetable tbody,
  .enm-ratetable tr,
  .enm-ratetable th,
  .enm-ratetable td { display: block; }

  .enm-ratetable thead { display: none; }

  .enm-ratetable tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    align-items: end;
    padding: 0.95rem 0.9rem 1rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--enm-glass-edge);
    border-radius: var(--enm-r-lg);
    background: var(--enm-glass);
    -webkit-backdrop-filter: var(--enm-glass-blur);
    backdrop-filter: var(--enm-glass-blur);
    box-shadow: var(--enm-glass-lip), var(--enm-e-2);
  }

  .enm-ratetable tr:last-child { margin-bottom: 0; }

  .enm-ratetable th,
  .enm-ratetable td {
    border: 0;
    padding: 0;
    white-space: nowrap;
  }

  /* Title left, headline price right, on one line. The reading order is set
     with grid order rather than by moving anything in the markup, so this
     stays a table for anything that parses it. */
  .enm-ratetable tbody th {
    grid-column: 1;
    order: 1;
    font-size: 1.0625rem;
    line-height: 1.25;
    white-space: normal;
  }

  .enm-ratetable td.strong {
    grid-column: 2;
    order: 2;
    text-align: right;
    font-size: 1.5rem;
    line-height: 1;
  }

  /* A price sitting beside the thing it prices needs no caption. */
  .enm-ratetable td.strong::before { content: none; }

  /* The rule under the title is a grid item of its own, which is the only
     way to run it the full width of a card whose header is two cells. */
  .enm-ratetable tbody tr::after {
    content: "";
    grid-column: 1 / -1;
    order: 3;
    height: 1px;
    margin: 0.1rem 0 0.15rem;
    background: linear-gradient(
      90deg,
      rgba(176, 137, 79, 0.35),
      rgba(216, 210, 198, 0.9) 45%,
      rgba(216, 210, 198, 0)
    );
  }

  /* Then the supporting figures, spread first and summary after. */
  .enm-ratetable td[data-label="Lowest"]  { order: 4; }
  .enm-ratetable td[data-label="Highest"] { order: 5; }
  .enm-ratetable td[data-label="Range"]   { order: 5; }
  .enm-ratetable td[data-label="Average"] { order: 6; }
  .enm-ratetable td[data-label="Escorts"] { order: 7; }
  .enm-ratetable td[data-label="Rates"]   { order: 7; }

  /* Each one on its own small pane, name above figure. Stacked rather than
     spread across the pane, because a label and a number pushed to opposite
     edges stop looking like they belong to each other. */
  .enm-ratetable td:not(.strong) {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem 0.55rem;
    line-height: 1.2;
    border: 1px solid rgba(176, 137, 79, 0.18);
    border-radius: var(--enm-r-sm);
    background: rgba(243, 236, 223, 0.66);
    text-align: left;
    font-size: 0.9375rem;
    color: var(--enm-ink-strong);
  }

  .enm-ratetable td:not(.strong)::before {
    content: attr(data-label);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--enm-ink-muted);
  }

  .enm-ratetable td.muted {
    font-size: 0.9375rem;
    color: var(--enm-ink-strong);
  }

  .enm-ratetable tbody tr:hover th { background: transparent; }
  .enm-ratetable tbody tr:hover td { background: rgba(243, 236, 223, 0.66); }
}

/* Firefox before 103 and anything else without the filter would show these
   panels as flat translucent boxes with the wash bleeding through the type.
   Opaque surfaces there instead: the layout is identical, only the glass
   is missing. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  .enm-ratefact,
  .enm-ratetable__wrap,
  .enm-ratetable tr {
    background: var(--enm-surface);
    border-color: var(--enm-line);
  }

  .enm-ratetable td:not(.strong) {
    background: var(--enm-gold-tint);
    border-color: rgba(176, 137, 79, 0.18);
  }
}

/* ---- 117. Site search ---------------------------------------------------
   Astra's form shipped two submit controls with the same class, so anywhere
   they were not styled the browser drew its own pair of blue buttons. The
   template is overridden rather than the buttons hidden, since one of them
   was also carrying tabindex="-1" and a label pointing at an id that was
   not on the page. */
.enm-search {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  max-width: 34rem;
}

.enm-search__field {
  flex: 1 1 auto;
  min-width: 0;
  /* 16px exactly. Anything under it and iOS zooms the page on focus. */
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--enm-line-strong);
  border-radius: var(--enm-r-sm);
  background: var(--enm-surface);
  color: var(--enm-ink);
}

.enm-search__field:focus {
  outline: 0;
  border-color: var(--enm-gold);
  box-shadow: 0 0 0 3px var(--enm-gold-veil);
}

.enm-search__go {
  flex: 0 0 auto;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--enm-ink-strong);
  border-radius: var(--enm-r-sm);
  background: var(--enm-ink-strong);
  color: var(--enm-ink-invert);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--enm-dur) var(--enm-ease);
}

@media (hover: hover) {
  .enm-search__go:hover { background: var(--enm-ink); }
}

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

/* The suggestion list. Sits over the page rather than pushing it, so the
   layout does not jump as somebody types. */
.enm-search__results {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem;
  border: 1px solid var(--enm-line-strong);
  border-radius: var(--enm-r);
  background: var(--enm-surface);
  box-shadow: var(--enm-e-3);
}

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

.enm-search__hit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--enm-r-sm);
  color: var(--enm-ink);
  text-decoration: none;
}

.enm-search__hit.is-active,
.enm-search__hit:hover { background: var(--enm-gold-tint); }

.enm-search__hitname {
  font-size: 0.9375rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enm-search__hitname mark {
  background: none;
  color: var(--enm-gold-deep);
  font-weight: 600;
}

.enm-search__kind {
  flex: none;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--enm-ink-soft);
}

@media (max-width: 479px) {
  .enm-search { flex-wrap: wrap; }
  .enm-search__go { width: 100%; }
}

/* ---- 118. Escorts you viewed --------------------------------------------
   A horizontal rail of small cards, filled from localStorage. It reuses the
   chevron buttons the review rail uses, so ui.js wires it with no extra
   script, and it stays hidden until the visitor has actually been somewhere. */
.enm-viewed[hidden] { display: none; }

.enm-viewed .enm-section-head { align-items: baseline; }

/* The band above already pads its own bottom. Without this the two stack and
   leave a hole between the last card and this heading. */
.enm-canvas > .enm-viewed,
.enm-section + .enm-viewed { padding-top: 0; }

/* That left 68px above and 41px below, because the band above pads at the
   full measure and this one is a tight band. The band above hands off at the
   tight measure when the rail follows it, so the section sits evenly. */
.enm-canvas > .enm-wrap:has( + .enm-viewed ) > .enm-section:last-child {
  padding-bottom: calc(var(--enm-band) * 0.6);
}

.enm-viewed__clear {
  flex: none;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--enm-fs-sm);
  color: var(--enm-ink-soft);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--enm-dur) var(--enm-ease),
              border-color var(--enm-dur) var(--enm-ease);
}

/* Astra styles every button, and its button:hover carries a solid blue. A
   plain background on the resting state does not survive that, because an
   element selector plus a pseudo class outscores one class. Every state is
   restated here so nothing of Astra's chrome shows through: the blue, the
   drop shadow and the rounded corners it adds at rest. */
.enm-viewed__clear,
.enm-viewed__clear:hover,
.enm-viewed__clear:focus,
.enm-viewed__clear:active {
  background: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  /* Astra's button:hover sets white text to sit on its blue. The blue is
     cleared above; without clearing the colour too, a tap on iOS applies
     :hover and sticks it there, leaving white text on nothing. */
  color: var(--enm-ink-soft);
}

@media (hover: hover) {
  .enm-viewed__clear:hover {
    color: var(--enm-gold-deep);
    border-bottom-color: var(--enm-gold);
  }
}

/* Touch gets its feedback on press, which releases when the finger lifts.
   The underline goes to full gold, the same as it does on hover with a
   pointer, so a tap confirms itself rather than only changing the text.
   Placed after the touch block below in specificity terms because :active
   carries a pseudo class the resting rules there do not. */
.enm-viewed__clear:active {
  color: var(--enm-gold-deep);
  border-bottom-color: var(--enm-gold);
}

/* No hover on a phone, so the underline has to be there at rest or the
   control reads as a stray line of text. Held at the veil tint, which is what
   the footer links and every other link on the site do for the same job.
   Restated after the reset above, because that sets the border shorthand and
   would otherwise put it back to transparent. */
@media (hover: none) {
  /* :not(:active) because a tap on iOS applies :hover as well, and this rule
     sits after the :active one above. Same specificity, later in the file, so
     without the guard it painted the veil straight back over the gold and the
     press looked like it had done nothing. The same guard is on every other
     touch reset in this stylesheet, for the same reason. */
  .enm-viewed__clear:not(:active),
  .enm-viewed__clear:hover:not(:active),
  .enm-viewed__clear:focus:not(:active) {
    border-bottom-color: var(--enm-gold-veil);
  }
}

/* A button brings its own line-height, so its text sat eight pixels above
   the eyebrow it is meant to line up with. */
.enm-viewed__clear { line-height: 1.45; }

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

.enm-viewrail {
  list-style: none;
  margin: 0;
  padding: 2px 0;
  display: flex;
  gap: var(--enm-s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.enm-viewrail::-webkit-scrollbar { display: none; }

.enm-viewrail > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 12.25rem;
}

/* Built like .enm-card: no border and no box around the whole thing, the
   frame below carrying the radius and the shadow, and the text sitting on the
   page rather than inside a panel. */
.enm-viewcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--enm-surface);
  border-radius: var(--enm-r-lg);
  color: inherit;
  text-decoration: none;
  transition: transform var(--enm-dur) var(--enm-ease-out);
}

@media (hover: hover) {
  .enm-viewcard:hover { transform: translateY(-4px); }
  .enm-viewcard:hover .enm-viewcard__frame { box-shadow: var(--enm-e-3); }
  .enm-viewcard:hover .enm-card__img { transform: scale(1.045); }
}

/* The lift above is behind (hover: hover), so a touch screen had no feedback
   at all on these: a tap just navigated. :active gives it and releases when
   the finger lifts, so nothing sticks the way a faked hover would. No lift on
   press, which reads as lag under a finger already holding the card. */
/* With a pointer the press just cancels the lift, so the card sits back down
   under the cursor rather than jumping again. */
@media (hover: hover) {
  .enm-viewcard:active { transform: translateY(0); }
}

/* On touch there is no lift to cancel, so translateY(0) was doing nothing at
   all and a tap gave no feedback: the native flash is off, and the frame
   shadow alone is too quiet to read on a card this size. A scale, the same
   press the duo cards use. */
@media (hover: none) {
  .enm-viewcard:active { transform: scale(0.98); }
}

.enm-viewcard:active .enm-viewcard__frame { box-shadow: var(--enm-e-3); }

.enm-viewcard { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* A grid card's anchor is an empty overlay stretched across the tile, so a
   long press lands on the image and nothing is selectable. This card is a
   single anchor wrapping its own portrait, so holding it selected the anchor
   and iOS painted the whole photograph in its selection blue.

   The image also gets the callout off, which stops the save-image sheet on a
   long hold. The link menu on the text below is untouched, so "open in new
   tab" still works where somebody would reach for it. */
.enm-viewcard {
  -webkit-user-select: none;
  user-select: none;
}

.enm-viewcard .enm-card__img {
  -webkit-touch-callout: none;
  pointer-events: none;
}

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

/* Everything about the frame comes from .enm-card__frame, which is on it. */
.enm-viewcard__frame { flex: none; }

/* .enm-card__body gives the padding, which is 2px at the sides rather than
   the 11px this had. That is the width the meta line needed: "Indian · High
   St Kensington" was being cut short inside its own card. */
.enm-viewcard__body { gap: 0.15rem; }

/* Family, weight, size and colour all come from .enm-card__name, which is on
   this element too, so the rail reads as the same card as the grid rather
   than the one place the names are set in the display face. */
.enm-viewcard__name { min-width: 0; }

/* One line, as on the grid cards. "E. European · Earls Court" wrapped to two
   and left the cards in the rail at different heights. The sizes and colours
   come from .enm-card__meta, so the nationality and the area relate to each
   other here exactly as they do in the grid. */
.enm-viewcard__meta {
  flex-wrap: nowrap;
  gap: 0.3125rem;
  line-height: 1.35;
}

/* .enm-card__price carries the family, weight, colour and numerals, so the
   price reads identically to the grid. Only the size is stepped down, since
   these cards are a third of the width. */
.enm-viewcard .enm-card__headline { gap: 0.4rem; }

/* Two to a screen, sized by the same arithmetic the grid uses rather than a
   fixed rem: the grid is two columns of (100% - gap) / 2 with a 0.75rem gap,
   which comes to 164px on a 375px phone. These were 10.5rem with a 1rem gap,
   needing 374px against the 341px available, so the second card was cut by
   33px at the edge.

   The portrait also squares off. At 2:3 a card that wide stood 355px tall on
   a 375px screen, so a strip meant to be glanced at was taking most of the
   viewport. cover keeps the crop on the face, the same as everywhere else. */
@media (max-width: 599px) {
  .enm-viewrail { gap: var(--enm-s-3); }
  .enm-viewrail > li { width: calc((100% - var(--enm-s-3)) / 2); }
  .enm-viewcard__frame { aspect-ratio: 1 / 1; }
  .enm-viewed .enm-section-head { gap: var(--enm-s-3); }
}

/* Sizing the cards to fit exactly took away the only clue that the rail
   moves: two cards, flush to both edges, reading as an ordinary pair. A
   pointer has the chevrons to say otherwise and a phone had nothing.

   A hairline rule under the rail rather than a fade over it. It carries the
   same information the chevrons do and a little more, since the length of the
   champagne segment is the share of the rail you can see and its position is
   where you are in it. The script hides the whole thing when everything fits,
   so it never appears on a rail that does not move. */
.enm-railtrack {
  position: relative;
  height: 2px;
  margin-top: var(--enm-s-4);
  border-radius: var(--enm-r-pill);
  background: var(--enm-line);
  overflow: hidden;
}

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

.enm-railtrack__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: inherit;
  background: var(--enm-gold);
  transition: left 140ms linear, width 140ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .enm-railtrack__bar { transition: none; }
}

/* The chevrons already answer this for a pointer, so the rule is the phone's
   version of the same thing rather than a second one alongside it. */
@media (hover: hover) {
  .enm-railtrack { display: none; }
}

/* The chevrons are gated on width elsewhere, at 921px, which leaves a mouse
   on anything narrower with no way of knowing the rail moves. Width was never
   the right test: a touch screen shows there is more by being swipeable, and
   a pointer shows nothing at all. So these are gated on the pointer instead,
   and the styling is restated because the original lives inside that width
   query and does not reach down here. */
@media (hover: hover) and (pointer: fine) {

  .enm-viewed .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:
     the script hides whichever chevron has nowhere to go. */
  .enm-viewed .enm-filters__nav[hidden] { display: none; }

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

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

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

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

/* Past the wrap's own margin there is room to sit them further out. */
@media (min-width: 921px) {
  .enm-viewed .enm-rail .enm-filters__nav--prev { left: -1rem; }
  .enm-viewed .enm-rail .enm-filters__nav--next { right: -1rem; }
}

/* ---- 116. Glossary ------------------------------------------------------
   A reference page rather than an article, so it gets an index and every
   entry gets an anchor. The point is that somebody can cite one definition
   rather than the whole page. */
.enm-glossary__index {
  margin: 1.5rem 0 2.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--enm-line);
  border-radius: var(--enm-r);
  background: var(--enm-canvas-warm);
}

.enm-glossary__index p {
  margin: 0 0 0.45rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.enm-glossary__index p:last-child { margin-bottom: 0; }

.enm-glossary__index b {
  display: inline-block;
  min-width: 1.4rem;
  font-family: var(--enm-font-display);
  color: var(--enm-gold-deep);
}

.enm-glossary__index a {
  color: var(--enm-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  margin-right: 0.4rem;
}

@media (hover: hover) {
  .enm-glossary__index a:hover {
    color: var(--enm-ink-strong);
    border-bottom-color: currentColor;
  }
}

/* Somewhere to land, clear of the sticky header. */
.enm-prose dt[id] { scroll-margin-top: 6rem; }

.enm-glossary__anchor {
  text-decoration: none;
  color: var(--enm-line-strong);
  font-weight: 400;
  opacity: 0;
  transition: opacity var(--enm-dur) var(--enm-ease-out);
}

.enm-prose dt:hover .enm-glossary__anchor,
.enm-glossary__anchor:focus-visible { opacity: 1; }

/* No hover on a phone, so the anchor would never appear at all. */
@media (hover: none) {
  .enm-glossary__anchor { opacity: 0.5; }
}

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

/* ---- 117. The seams between the trailing blocks -------------------------
   A term page ends with four blocks stacked: the grid, the closing
   paragraph, the guide links and the sibling index. Each carries its own
   padding, so where two meet the two paddings add up. Measured on a service
   page the rhythm inside a block was 29 to 41px and the seams between them
   were 72px and 91px, which reads as the page having stopped rather than
   moved on.

   Fixed by letting the following block own the space rather than both of
   them contributing to it. */

/* The card grid already carries its own trailing space inside each card, so
   the section under it does not need a full measure as well. */
.enm-section--tight:has(> .enm-wrap > .enm-grid) {
  padding-bottom: 1.5rem;
}

/* The sibling index brings its own top padding and a rule to sit under, so
   the guide links above it should not add a second gap. */
.enm-guidelinks {
  padding-bottom: 0;
}

.enm-guidelinks + .enm-termtail {
  padding-top: 2.25rem;
}

/* mobile-nav.css */
/* ==========================================================================
   Mobile navigation
   A drill down panel, dark, full height. Kept in its own file because it owes
   nothing to the rest of the sheet and replaces Astra's menu outright.
   ========================================================================== */

.enm-nav {
  position: fixed;
  inset: 0;
  z-index: 9999;
  -webkit-tap-highlight-color: transparent;
}

/* The dim lives on a pseudo element rather than on the panel itself. Fading the
   container faded the sheet along with it, so on the way out the slide was
   never visible and the whole thing simply blinked away. */
.enm-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 11, 8, 0.55);
  opacity: 0;
  transition: opacity 260ms var(--enm-ease);
}

.enm-nav[hidden] { display: none; }
.enm-nav:not(.is-open) { pointer-events: none; }
.enm-nav.is-open::before { opacity: 1; }

.enm-nav__sheet {
  position: absolute;
  inset: 0 0 0 0;
  display: flex;
  flex-direction: column;
  background: var(--enm-surface);
  transform: translateX(-100%);
  transition: transform 260ms var(--enm-ease-out);
  max-width: 26rem;
  box-shadow: 0 0 40px rgba(23, 20, 15, 0.18);
}

.enm-nav.is-open .enm-nav__sheet { transform: none; }

/* --- Bar ----------------------------------------------------------------- */

.enm-nav__bar {
  display: flex;
  align-items: center;
  gap: var(--enm-s-4);
  padding: var(--enm-s-4) var(--enm-s-5);
  padding-top: calc(var(--enm-s-4) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--enm-line);
  flex: 0 0 auto;
}

.enm-nav__close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--enm-line-strong);
  border-radius: var(--enm-r-sm);
  background: transparent;
  color: var(--enm-ink-muted);
  cursor: pointer;
}

.enm-nav__close svg { width: 17px; height: 17px; }
.enm-nav__close:active { background: var(--enm-surface-sunk); }

.enm-nav__brand { display: block; }
.enm-nav__brand .enm-logo { gap: 0.625rem; padding-bottom: 0.3125rem; }
.enm-nav__brand .enm-logo__mark { font-size: 1.375rem; }
.enm-nav__brand .enm-logo__place { font-size: 0.6875rem; color: var(--enm-ink-soft); }
.enm-nav__brand .enm-logo__rule { height: 1.25rem; background: var(--enm-line-strong); }
.enm-nav__brand .enm-logo::after,
.enm-nav__brand .enm-logo::before { display: none; }

/* --- Stage --------------------------------------------------------------- */

.enm-nav__stage {
  position: relative;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.enm-nav__panel {
  padding-bottom: calc(var(--enm-s-6) + env(safe-area-inset-bottom, 0px));
}

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

.enm-nav__panel.is-entering {
  opacity: 0;
  transform: translateX(1.25rem);
}

.enm-nav__panel.is-current {
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--enm-ease), transform 240ms var(--enm-ease-out);
}

/* --- Level one ----------------------------------------------------------- */

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

.enm-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-4);
  width: 100%;
  padding: 1.125rem var(--enm-s-5);
  border: 0;
  border-bottom: 1px solid var(--enm-line);
  background: transparent;
  color: var(--enm-ink);
  font-family: var(--enm-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.enm-nav__link svg { width: 17px; height: 17px; color: var(--enm-gold); flex: 0 0 auto; }
.enm-nav__link:active { background: var(--enm-gold-veil); }

/* --- Foot ---------------------------------------------------------------- */

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

.enm-nav__call {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid rgba(176, 137, 79, 0.45);
  border-radius: var(--enm-r);
}

.enm-nav__call:active { background: var(--enm-gold-veil); }

.enm-nav__call-label {
  font-size: 0.6875rem;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-gold);
}

.enm-nav__call-num {
  font-family: var(--enm-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--enm-ink);
}

.enm-nav__hours {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--enm-ink-soft);
}

/* --- Level two ----------------------------------------------------------- */

.enm-nav__back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem var(--enm-s-5);
  border: 0;
  border-bottom: 1px solid var(--enm-line);
  background: transparent;
  color: var(--enm-ink-soft);
  font-family: var(--enm-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  cursor: pointer;
}

.enm-nav__back svg { width: 16px; height: 16px; color: var(--enm-gold); }
.enm-nav__back:active { background: var(--enm-surface-sunk); }

.enm-nav__all {
  display: block;
  padding: 1rem var(--enm-s-5);
  border-bottom: 1px solid var(--enm-line);
  color: var(--enm-gold);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
}

.enm-nav__all:active { background: var(--enm-gold-veil); }

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

.enm-nav__letter {
  margin: 0 0 0.375rem;
  padding: 0 var(--enm-s-5);
  font-family: var(--enm-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--enm-gold);
}

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

.enm-nav__terms a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-4);
  padding: 0.8125rem var(--enm-s-5);
  color: var(--enm-ink-muted);
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--enm-line);
}

.enm-nav__terms a:active { background: var(--enm-gold-veil); }

.enm-nav__count {
  font-size: 0.75rem;
  color: var(--enm-ink-faint);
  font-variant-numeric: tabular-nums;
}

/* --- Page behind ---------------------------------------------------------- */

body.enm-nav-open { overflow: hidden; }

/* Astra's own mobile menu is replaced outright. */
@media (max-width: 921px) {
  .main-header-bar-navigation { display: none !important; }
}

@media (min-width: 922px) {
  .enm-nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .enm-nav,
  .enm-nav__sheet,
  .enm-nav__panel { transition: none !important; }
}

/* ==========================================================================
   Colour, pinned

   Two things upstream reach in here. `.enm a { color: inherit }` scores
   (0,1,1) and beat the link class at (0,1,0), so the anchor items rendered
   near black on black while the button items were fine. And Astra paints its
   accent onto every bare <button>, which turned the close control blue.

   Every rule below carries two classes so neither can win.
   ========================================================================== */

.enm-nav .enm-nav__close,
.enm-nav .enm-nav__close:hover,
.enm-nav .enm-nav__close:focus,
.enm-nav .enm-nav__close:active {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--enm-line-strong) !important;
  color: var(--enm-ink-muted) !important;
  -webkit-text-fill-color: var(--enm-ink-muted);
  box-shadow: none !important;
}

.enm-nav .enm-nav__close:active { background: var(--enm-surface-sunk) !important; }

.enm-nav a.enm-nav__link,
.enm-nav a.enm-nav__link:link,
.enm-nav a.enm-nav__link:visited,
.enm-nav button.enm-nav__link {
  color: var(--enm-ink) !important;
  -webkit-text-fill-color: var(--enm-ink);
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.enm-nav a.enm-nav__link:active,
.enm-nav button.enm-nav__link:active {
  background: var(--enm-gold-veil) !important;
}

.enm-nav .enm-nav__back,
.enm-nav .enm-nav__back:hover,
.enm-nav .enm-nav__back:focus {
  background: transparent !important;
  background-image: none !important;
  color: var(--enm-ink-soft) !important;
  -webkit-text-fill-color: var(--enm-ink-soft);
  box-shadow: none !important;
}

.enm-nav a.enm-nav__all,
.enm-nav a.enm-nav__all:link,
.enm-nav a.enm-nav__all:visited {
  color: var(--enm-gold) !important;
  -webkit-text-fill-color: var(--enm-gold);
}

.enm-nav .enm-nav__terms a,
.enm-nav .enm-nav__terms a:link,
.enm-nav .enm-nav__terms a:visited {
  color: var(--enm-ink-muted) !important;
  -webkit-text-fill-color: var(--enm-ink-muted);
}

.enm-nav .enm-nav__terms a .enm-nav__count {
  color: var(--enm-ink-faint) !important;
  -webkit-text-fill-color: var(--enm-ink-faint);
}

.enm-nav a.enm-nav__call,
.enm-nav a.enm-nav__call:link,
.enm-nav a.enm-nav__call:visited { color: var(--enm-ink) !important; }

.enm-nav .enm-nav__call-num {
  color: var(--enm-ink) !important;
  -webkit-text-fill-color: var(--enm-ink);
}

.enm-nav .enm-nav__call-label,
.enm-nav .enm-nav__letter {
  color: var(--enm-gold) !important;
  -webkit-text-fill-color: var(--enm-gold);
}

/* Astra draws a blue focus ring on buttons. Inside a dark panel that reads as
   a stray line under whatever was last pressed. Gold, and only for keyboard. */
.enm-nav button:focus,
.enm-nav a:focus {
  outline: none;
  box-shadow: none !important;
  border-color: var(--enm-line-strong);
}

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

.enm-nav .enm-nav__back:focus,
.enm-nav .enm-nav__all:focus,
.enm-nav .enm-nav__link:focus {
  border-bottom-color: var(--enm-line) !important;
}

/* Belt and braces on the focus ring. WebKit will draw its own on a control
   that receives focus programmatically, and it does not always show up in
   computed styles, so every route to a ring is closed here. */
.enm-nav *:focus,
.enm-nav *:focus-within {
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-focus-ring-color: transparent;
}

.enm-nav *::-moz-focus-inner { border: 0; }

/* Reinstated only for genuine keyboard use, which the script flags. */
body.enm-using-keys .enm-nav button:focus,
body.enm-using-keys .enm-nav a:focus {
  outline: 2px solid var(--enm-gold) !important;
  outline-offset: -3px;
}

/* ==========================================================================
   Focus rings, final word

   Astra ships `a:focus { outline: thin dotted }` in its accessibility styles.
   That scores the same as a single-class rule, so on some load orders it can
   win. These carry three classes each, which nothing upstream matches, and the
   separator colour is restated so a focused row cannot brighten its own edge.
   ========================================================================== */

.enm-nav .enm-nav__list a.enm-nav__link:focus,
.enm-nav .enm-nav__list button.enm-nav__link:focus,
.enm-nav .enm-nav__stage a:focus,
.enm-nav .enm-nav__stage button:focus,
.enm-nav .enm-nav__bar button:focus {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border-bottom-color: var(--enm-line) !important;
  -webkit-tap-highlight-color: transparent;
}

.enm-nav .enm-nav__stage a:focus:not(:focus-visible),
.enm-nav .enm-nav__stage button:focus:not(:focus-visible) {
  outline: 0 !important;
}

/* Keyboard users still get a ring, in gold, and only then. */
body.enm-using-keys .enm-nav .enm-nav__stage a:focus,
body.enm-using-keys .enm-nav .enm-nav__stage button:focus,
body.enm-using-keys .enm-nav .enm-nav__bar button:focus {
  outline: 2px solid var(--enm-gold) !important;
  outline-offset: -3px !important;
}

/* ==========================================================================
   Tap highlight

   iOS paints a translucent blue wash over whatever you touch. Setting the
   property on the container is not reliable once a child declares its own, so
   it is cleared on every element in the panel, in every state.

   The panel supplies its own pressed feedback through :active backgrounds,
   so nothing is lost by removing the system one.
   ========================================================================== */

.enm-nav,
.enm-nav *,
.enm-nav *::before,
.enm-nav *::after {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.enm-nav a,
.enm-nav button,
.enm-nav a:active,
.enm-nav button:active,
.enm-nav a:focus,
.enm-nav button:focus,
.enm-nav a:hover,
.enm-nav button:hover {
  outline: 0 !important;
  -webkit-focus-ring-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* The trigger in the header is outside the panel and gets the same treatment. */
.menu-toggle,
.menu-toggle:focus,
.menu-toggle:active {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  outline: 0 !important;
}


/* ==========================================================================
   Astra button colours

   Astra styles every <button> on the site as a themed button. Its inline CSS
   sets background-color and border-color on :hover and :focus, and main.min.css
   sets border-color on :active, all to the theme accent. iOS leaves :hover
   stuck on whatever you last touched, which is where the blue edge under a
   tapped row came from. Every control in the panel pins its own colours in
   every state so nothing leaks through.
   ========================================================================== */

.enm-nav .enm-nav__link,
.enm-nav .enm-nav__link:hover,
.enm-nav .enm-nav__link:focus,
.enm-nav .enm-nav__link:active,
.enm-nav .enm-nav__back,
.enm-nav .enm-nav__back:hover,
.enm-nav .enm-nav__back:focus,
.enm-nav .enm-nav__back:active,
.enm-nav .enm-nav__all,
.enm-nav .enm-nav__all:hover,
.enm-nav .enm-nav__all:focus,
.enm-nav .enm-nav__all:active {
  border-color: var(--enm-line) !important;
}

.enm-nav .enm-nav__terms a,
.enm-nav .enm-nav__terms a:hover,
.enm-nav .enm-nav__terms a:focus,
.enm-nav .enm-nav__terms a:active {
  border-color: var(--enm-line) !important;
}

.enm-nav .enm-nav__close,
.enm-nav .enm-nav__close:hover,
.enm-nav .enm-nav__close:focus,
.enm-nav .enm-nav__close:active {
  border-color: var(--enm-line-strong) !important;
}

.enm-nav .enm-nav__call,
.enm-nav .enm-nav__call:hover,
.enm-nav .enm-nav__call:focus,
.enm-nav .enm-nav__call:active {
  border-color: rgba(176, 137, 79, 0.45) !important;
}

/* Astra paints a background on hover and focus too. Cleared here, then the
   panel puts its own pressed state back below. */
.enm-nav a:hover,
.enm-nav a:focus,
.enm-nav button:hover,
.enm-nav button:focus {
  background-color: transparent !important;
}

.enm-nav .enm-nav__link:active,
.enm-nav .enm-nav__back:active,
.enm-nav .enm-nav__all:active,
.enm-nav .enm-nav__terms a:active {
  background-color: var(--enm-surface-sunk) !important;
}

.enm-nav .enm-nav__close:active {
  background-color: var(--enm-surface-sunk) !important;
  transform: scale(0.92);
  transition: transform 90ms var(--enm-ease);
}

/* Champagne at full strength is thin against white for small type. The links
   and the A to Z markers take the deeper gold so they stay legible; the icons
   keep the brighter tone. */
.enm-nav .enm-nav__all,
.enm-nav .enm-nav__all:link,
.enm-nav .enm-nav__all:visited,
.enm-nav .enm-nav__letter,
.enm-nav .enm-nav__call-label {
  color: var(--enm-gold-deep) !important;
  -webkit-text-fill-color: var(--enm-gold-deep);
}

/* --- Bookings card ------------------------------------------------------- */

/* The one thing in the panel actually worth reaching for, so it gets a warm
   fill and a firmer edge rather than the flat reset every other link takes.
   The rules above clear backgrounds on hover across the board, so these need
   the extra class to outscore them. */
.enm-nav a.enm-nav__call {
  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-nav a.enm-nav__call:hover,
.enm-nav a.enm-nav__call:focus {
  background-color: var(--enm-gold-tint) !important;
  border-color: var(--enm-gold) !important;
  box-shadow: 0 4px 18px rgba(176, 137, 79, 0.22) !important;
}

.enm-nav a.enm-nav__call:active {
  background-color: var(--enm-gold-veil) !important;
  border-color: var(--enm-gold-deep) !important;
  box-shadow: 0 1px 6px rgba(176, 137, 79, 0.18) !important;
  transform: scale(0.985);
}

/* The number lifts to the deep gold alongside the fill so the card reads as a
   single object rather than a box that changed colour behind fixed text. */
.enm-nav a.enm-nav__call:hover .enm-nav__call-num,
.enm-nav a.enm-nav__call:focus .enm-nav__call-num,
.enm-nav a.enm-nav__call:active .enm-nav__call-num {
  color: var(--enm-gold-deep) !important;
  -webkit-text-fill-color: var(--enm-gold-deep);
}

/* --- Wordmark ------------------------------------------------------------ */

/* Black, as in the footer, and a little larger. The mark is normally a gradient
   clipped to the text, so the background has to be cleared as well as a colour
   set: leaving the gradient in place would simply paint over the fill. */
.enm-nav .enm-logo__mark {
  background: none;
  -webkit-text-fill-color: var(--enm-ink-strong);
  color: var(--enm-ink-strong);
  font-size: 1.625rem;
}

.enm-nav .enm-logo__place {
  font-size: 0.75rem;
  color: var(--enm-ink-soft);
}

.enm-nav .enm-logo__rule { background: var(--enm-line-strong); }