/* Pluramour UI hotfix: lighter, smaller age gate that keeps the hero/search visible. */
.age-gate {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: clamp(76px, 10vh, 116px) clamp(20px, 7vw, 112px) 24px !important;
  overflow: auto !important;
  background: rgba(18, 14, 13, .42) !important;
  backdrop-filter: blur(1.5px) saturate(.95) !important;
  -webkit-backdrop-filter: blur(1.5px) saturate(.95) !important;
}

.age-gate__veil {
  background: linear-gradient(90deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .24) 58%, rgba(0, 0, 0, .45)) !important;
}

.age-gate__card {
  max-width: 360px !important;
  padding: 24px !important;
  border-radius: 8px !important;
  text-align: left !important;
  background: rgba(21, 16, 14, .84) !important;
  border-color: rgba(246, 236, 226, .18) !important;
  box-shadow: 0 1px 0 rgba(246, 236, 226, .08) inset, 0 28px 70px -34px rgba(0, 0, 0, .92) !important;
}

.age-gate__brand {
  margin-bottom: 16px !important;
}

.age-gate__wordmark {
  font-size: 28px !important;
}

.age-gate__mark {
  width: 30px !important;
  height: 30px !important;
}

.age-gate__eyebrow {
  margin-bottom: 10px !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
}

.age-gate__title {
  margin-bottom: 10px !important;
  font-size: 24px !important;
  line-height: 1.16 !important;
}

.age-gate__copy {
  margin-bottom: 14px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}

.age-gate__rules {
  margin-bottom: 16px !important;
  padding: 12px 14px !important;
  gap: 7px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .075) !important;
}

.age-gate__rules li {
  font-size: 12.2px !important;
  line-height: 1.38 !important;
}

.age-gate__actions {
  gap: 8px !important;
}

.age-gate__btn {
  padding: 12px 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

.age-gate__btn--primary {
  box-shadow: 0 10px 22px -12px rgba(220, 74, 61, .9) !important;
}

@media (max-width: 900px) {
  .age-gate {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 16px !important;
    background: rgba(18, 14, 13, .36) !important;
  }

  .age-gate__veil {
    background: linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .38)) !important;
  }

  .age-gate__card {
    width: min(100%, 390px) !important;
    max-height: min(70svh, 620px) !important;
    overflow: auto !important;
    padding: 22px !important;
  }
}

@media (max-width: 480px) {
  .age-gate__title {
    font-size: 22px !important;
  }

  .age-gate__wordmark {
    font-size: 25px !important;
  }
}

/* Hero image stabilization for ultra-wide screens.
   The current hero image is 1600px wide; do not stretch it across 2500px+ viewports. */
.pw-hero__media {
  background:
    linear-gradient(90deg, #15100e 0%, #15100e 24%, rgba(21, 16, 14, .72) 42%, rgba(21, 16, 14, .22) 66%, #15100e 100%) !important;
  overflow: hidden !important;
}

.pw-hero__photo {
  object-position: 62% 30% !important;
  transform-origin: center center !important;
}

@media (min-width: 1760px) {
  .pw-hero__photo {
    position: absolute !important;
    inset: 0 0 0 auto !important;
    width: min(100%, 1840px) !important;
    max-width: 1840px !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 60% 30% !important;
  }
}

@media (min-width: 2400px) {
  .pw-hero__photo {
    width: 1840px !important;
  }
}

/* Club detail "Entry & membership" rows: a long fact value (e.g. a verbose
   "Minimum age" note) could not shrink (.std-entry__price was flex:none), which
   forced the label (.std-entry__who, min-width:0) to collapse to zero width and
   wrap one letter per line. Keep the label at its natural width and let the value
   shrink and wrap within the remaining space. */
.std-entry__who {
  flex: 0 0 auto !important;
}
.std-entry__price {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ==========================================================================
   EVENTS HIDDEN - TEMPORARY (2026-08-08)
   There is no event content yet, so the feature is withdrawn rather than shown
   empty. To restore Events: delete this whole block, delete the removeEventsTab()
   call in the hotfix JS, and drop the /events redirects from the hosting config.
   Nothing else was changed.

   One selector covers every navigation entry because Angular compiles routerLink
   into a plain href: the homepage nav, the interior .st-appbar nav, the mobile
   drawer, the footer, the mobile bottom tab bar, and the homepage "see all" link.
   ========================================================================== */
a[href="/events"] {
  display: none !important;
}

/* The whole "Events near <city>" band on the homepage - heading, city picker,
   Tonight/This weekend/This week tabs, and the card grid. */
.pw-events-band {
  display: none !important;
}

/* The mobile drawer's "Log in" and "Join free" link to /auth. Both are routerLink, so they
   navigate client-side and never hit the hosting 302 - landing the visitor on the inherited
   SusanHub role picker ("University researcher", "sara@mcgill.ca"). This app has no accounts
   at all, so the buttons promise something that does not exist even when they work. Hiding
   the wrapper removes both. CSS rather than JS on purpose: the drawer is created fresh on
   every burger click, so a JS removal would race the render.

   CORRECTION (2026-08-12). The sentence that used to stand here said these were "the ONLY
   surfaces on the site that link to /auth". That was a false enumeration, written from the
   surfaces we happened to know about, and an audit found three more - all on venue pages,
   the most-visited pages on the site: "Report an issue" on club detail, "Report an issue"
   on resort detail, and "Join free" on resort detail. A hard GET to /auth does 302 home, so
   the hosting redirect made this look closed while every in-app click sailed straight past
   it. The rule below is written against the href prefix rather than a component class, so
   it covers any surface that links there, including ones nobody has enumerated yet.

   That is the shape of nearly every bug on this site: fixed where someone was looking. */
.pw-drawer__cta {
  display: none !important;
}

a[href="/auth"],
a[href^="/auth/"],
a[href^="/onboarding"] {
  display: none !important;
}

/* ==========================================================================
   /about WITHDRAWN (2026-08-12/13)

   The page described "a small, discreet team dedicated to curating and growing
   the Pluramour guide", staff who "discover and review lifestyle clubs, parties
   and getaways worldwide", and a commitment to "protecting member privacy".
   There is no team, nobody reviews venues, and there are no members. It was
   invented copy about an organisation that does not exist, and its twelve
   photographs - 6000x4000 camera files - have been deleted from the manifest.

   The hosting layer already 302s /about to /. That is NOT sufficient on its own
   and this is the third time the same lesson has come up: a hosting redirect
   only catches a hard GET. These links are Angular routerLink, so a click
   navigates client-side, never touches the redirect, and renders the page.
   Measured 2026-08-13 before this rule: clicking the footer "About" landed on
   /about with 2,823 characters of the invented copy on screen.

   Matching on the href prefix rather than a component class is deliberate -
   there are TWO footers carrying this link (.pw-footer on the homepage and
   .st-footer site-wide) plus two top-nav entries, and a class-based rule would
   have caught whichever one someone happened to look at.
   ========================================================================== */
a[href="/about"],
a[href^="/about/"],
a[href="/team"],
a[href="/news"] {
  display: none !important;
}

/* Container of a venue photo that failed to load - almost always an expired Google Places
   reference. A quiet neutral tile reads as "no photo yet"; a broken-image icon reads as a
   broken site. Kept deliberately plain so it is obvious which venues still need a photo,
   rather than papering over them with the homepage banner as the app does today. */
.pw-photo-missing {
  background-image: linear-gradient(135deg, rgba(122, 74, 110, .10), rgba(122, 74, 110, .04)) !important;
  background-color: rgba(28, 26, 33, .04) !important;
}

/* ---- One consent screen, and a lighter one -------------------------------------
   Two blockers used to stack: a tall age-gate card plus a separate cookie bar at the
   bottom. The cookie decision now lives inside the gate, and the standalone bar is
   suppressed while the gate is up. The gate still blocks - it just stops shouting. */
.pw-gate-open .cookie {
  display: none !important;
}

/* Lighter veil: the gate was a near-opaque wash with a blur over it, which made the site
   behind look broken rather than gated. Enough dimming to hold focus, little enough that
   the page beneath still reads as a real page. */
.age-gate {
  background: rgba(18, 14, 13, .30) !important;
  backdrop-filter: blur(.5px) saturate(.98) !important;
  -webkit-backdrop-filter: blur(.5px) saturate(.98) !important;
}

.age-gate__veil {
  background: linear-gradient(90deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .14) 58%, rgba(0, 0, 0, .30)) !important;
}

/* Tighter card. The rules list is the bulk of the height, so it loses its inset box and
   becomes quiet supporting text - still present, still readable, no longer a wall. */
.age-gate__card {
  padding: 20px !important;
  background: rgba(21, 16, 14, .90) !important;
}

.age-gate__rules {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  opacity: .85 !important;
}

.age-gate__title {
  font-size: 21px !important;
  line-height: 1.2 !important;
}

.age-gate__copy {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* The folded-in cookie line. Deliberately quiet - it is a disclosure, not a decision the
   visitor has to stop and make, because the default is already the private one. */
.pw-consent {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px 10px !important;
  margin: 14px 0 12px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.pw-consent__note {
  color: rgba(246, 236, 226, .62) !important;
}

.pw-consent__accept {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font: inherit !important;
  color: rgba(246, 236, 226, .92) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
}

.pw-consent__accept:hover,
.pw-consent__accept:focus-visible {
  color: #fff !important;
}


/* Owner invitation on venue pages. Photographs are gone with Google Places, so this is how
   they come back - and it doubles as the opt-in and correction route. Deliberately plain:
   it is an offer, not a call to action, and it should not compete with the listing. */
.pw-owner-invite {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 8px !important;
  margin: 18px 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(28, 26, 33, .12) !important;
  border-radius: 10px !important;
  background: rgba(122, 74, 110, .045) !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}

.pw-owner-invite__text {
  margin: 0 !important;
  color: rgba(28, 26, 33, .74) !important;
}

.pw-owner-invite__link {
  color: #7A4A6E !important;
  font-weight: 620 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ==========================================================================
   GUIDES WERE BLANK ON PHONES (2026-08-12)

   The site's flagship content - 54,530 words across 31 guides, leading the
   homepage - did not render on a phone for 22 of the 31.

   chunk 392 ships `.ga-reveal { opacity: 0 }` and reveals it by adding `is-in`
   from an IntersectionObserver configured
       { rootMargin: "0px 0px -8% 0px", threshold: .08 }
   and it observes `[1,"ga-body","ga-reveal"]` - the entire article body, which
   runs 8,000-12,400px tall. `threshold: .08` asks for 8% of the ELEMENT to be
   visible at once. On a 390x844 viewport the maximum possible fraction is
   844/10000 ~ 0.08 before the -8% bottom margin takes it lower, so the callback
   can never fire. It is unreachable by construction, not a timing flake: swept
   across all 31 slugs at 390x844, 22 never revealed, with a clean boundary at
   body height 9,706px. At 360x640 every guide fails. Landscape fails.

   The text is in the DOM the whole time, so Google would index full articles
   that no phone visitor can read.

   The declaration below is the same one the bundle already applies to itself:
   its own code path is `if (this.reducedMotion || typeof IntersectionObserver
   > "u") { ...forEach(o => o.classList.add("is-in")) }`. Emulating
   prefers-reduced-motion restores every guide, which is what proved the cause.

   This costs the fade-in on desktop, where it did work. Content that renders
   beats content that animates, and there is no way to keep the animation for
   tall articles without an observer threshold we cannot reach from CSS.

   `ga-reveal` occurs in chunk 392 only - 19 hits, 0 in main.js and 0 in the
   other 27 chunks - so that chunk is the whole blast radius.
   ========================================================================== */
.ga-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ==========================================================================
   LANDING PAGE REDESIGN (2026-08-13)

   Six changes, all measured against the live page at 390 and 1440. The copy
   half lives in the JS; this is the structure half.
   ========================================================================== */

/* ---- 1. The hero subtitle was printing twice ------------------------------
   `p.pw-hero__sub` holds TWO spans, and the bundle only ever hides one of them:
   `.pw-hero__sub-full{display:none}` and `.pw-hero__sub-mini{display:inline}`
   exist inside @media(max-width:767.98px), and there is no base rule hiding the
   mini. So above 768px both rendered back to back with nothing between them,
   which is the whole of the "…wherever you go.Verified clubs, parties &
   resorts…" text on the live desktop page. Not one fused string - two strings
   in a row.

   The JS writes the same approved sentence into both text nodes, so which span
   wins no longer changes what the page says. These two rules make it exactly
   one span at every width, which is also what stops the mini's withdrawn
   "Verified" claim from ever painting. */
.pw-hero__sub-full {
  display: inline !important;
}

.pw-hero__sub-mini {
  display: none !important;
}

/* One sentence instead of two, but a longer one: the bundle caps the subtitle
   at 290px below 768px, which stacks the approved sentence 9 lines deep on a
   390px phone. The hero copy column is ~350px wide there, which takes the same
   sentence to 4 lines. */
@media (max-width: 767.98px) {
  .pw-hero__sub {
    max-width: 100% !important;
  }
}

/* ---- 2. Section order: learn first ---------------------------------------
   Target: Hero -> Guides -> Cities -> Clubs -> Communities -> Footer.
   Source order in the bundle is Hero -> Clubs -> Cities -> Guides -> Footer.

   CSS `order` on a flex `div.pw`, not DOM moves: Angular owns those nodes, and
   `order` cannot be undone by a re-render the way an insertBefore can.

   The two guides/clubs blocks ship as `section.pw-section.pw-container` with
   IDENTICAL classes, so they have to be told apart by what is inside them.
   `:has()` rather than :nth-of-type, and the reason is specific rather than
   stylistic: leadWithGuides() in the JS DOM-moves the guides section above the
   clubs section after render, so a positional selector means one thing at first
   paint and the opposite one frame later, and would apply the clubs order to
   the guides band for exactly as long as that gap lasts. Content-matching has
   no such window.

   If an engine without :has() ever loads this, those two rules are dropped and
   both sections fall back to order 1 - which leaves them in DOM order right
   after the hero, i.e. today's live layout plus the communities band. A
   degradation, not a break.

   `order` and leadWithGuides() agree rather than fight: 3 (guides) < 5 (clubs)
   is the same answer the DOM move reaches.

   The catch-all is deliberate. Every child not named below - the hidden notice
   bar, the drawer, anything a future bundle adds - sits at order 1, i.e. with
   the hero in DOM order. Without it an unenumerated child would default to 0
   and render ABOVE the hero. */
.pw {
  display: flex !important;
  flex-direction: column !important;
}

.pw > * {
  order: 1 !important;
}

.pw > .pw-events-band {
  order: 2 !important;
}

.pw > .pw-section:has(.pw-guides) {
  order: 3 !important;
}

.pw > .pw-cities-band {
  order: 4 !important;
}

.pw > .pw-section:has(.pw-featured) {
  order: 5 !important;
}

.pw > .pw-comm {
  order: 6 !important;
}

.pw > .pw-resorts-wrap {
  order: 7 !important;
}

.pw > .pw-join-wrap {
  order: 8 !important;
}

.pw > .pw-footer {
  order: 9 !important;
}

/* The clubs band now follows the full-bleed dark cities band, which already
   carries 80px of its own bottom padding. Its stock `.pw-section{padding-top:
   80px}` on top of that opens a 160px hole between the dark block and the
   "Featured clubs" heading - a dead zone the old order never had, because
   clubs used to follow the hero. 40px keeps the total at 120px, which reads as
   deliberate separation from a full-width dark block, and keeps the section
   from sitting flush against the guides cards on the days the cities band has
   no data to render. */
.pw > .pw-section:has(.pw-featured) {
  padding-top: 40px !important;
}

/* ---- 3. The featured club card had no name -------------------------------
   The card rendered as an anonymous italic address with raw slug chips. Cause
   was ours: removeEmptyMedia() matched `.pw-fcard__media` and set display:none
   on it, and that div is not an empty photo slot - it holds the badge row AND
   `.pw-fcard__caption`, which is where the club's NAME lives. The name was
   never missing from the DOM. We were hiding it.

   The JS now exempts `.pw-fcard__media` by name. Three things it deliberately
   does NOT hide, against the first draft of this lane:

     .pw-fcard__img    only exists when clubCover() returns something, and
                       clubCover(o) is `o?.coverImage||""` behind an *ngIf - so
                       the div is absent unless a venue-sourced cover really
                       exists. Hiding it would suppress genuine photography for
                       the sake of the Places photos that are already gone.
     .pw-fcard__scrim  is what makes the name legible. Without a photo the band
                       ends on #c9544a, and the name is var(--cream) #F6ECE2:
                       about 2.6:1, under every threshold there is. The scrim's
                       gradient takes the same pair past 10:1.
     .pw-fcard__grain  is the house texture, shared with .pw-city__grain and
                       .pw-mini__grain. Dropping it on one card of three makes
                       that card look flat beside its own siblings.

   What changes is the height. The stock 320px was sized for a photograph; as a
   header band it should be whatever bottom-aligns the card with the column of
   small cards beside it. `flex: 1 1 auto` inside a flex-column card does that
   exactly, with no fabricated content. 208px is the floor for the single-column
   case, where there is no neighbour to align to - enough for the 32px serif
   name, its meta line and the badge row, and tighter than the bundle's 280px
   because a band with no photograph in it does not need the room. */
.pw-fcard {
  display: flex !important;
  flex-direction: column !important;
}

.pw-fcard__media {
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 208px !important;
}

.pw-fcard__body {
  flex: 0 0 auto !important;
}

/* ---- 4/5. Desktop dead zones under both bands ----------------------------
   Measured at 1440: the guides band ran 849px tall and the clubs band 693px,
   with the empty area inside each one - the right-hand column of small cards
   ends well above the bottom of the big card beside it, because
   `align-items:start` sizes every grid item to its own content.

   Gated at 1101px rather than the 1024px the brief asked for, and the boundary
   is the bundle's, not a preference: `@media(max-width:1100px)` collapses both
   `.pw-featured` and `.pw-guides` to `grid-template-columns:1fr`. Between 1024
   and 1100 there is no second column to balance, and a grid-template-rows or
   stretch rule applied there would be acting on a single-column stack.

   No cards are added. The columns are told to fill the height they already
   occupy: `align-items:stretch` gives the short column the row's height, and
   then the elements inside it absorb it - the two guide cards by growing
   equally, and the clubs column by pushing its dashed CTA to the bottom rather
   than stretching real cards away from their content. */
@media (min-width: 1101px) {
  .pw-guides {
    align-items: stretch !important;
  }

  /* Grow, never shrink. `flex: 1 1 0` would have divided the column's height evenly and
     squeezed whichever of the two cards has the longer title below its own content, and
     .pw-guide-mini is overflow:hidden - the clipping would have been silent. Growing from
     the natural height instead leaves the two cards slightly unequal and neither clipped,
     and the column still ends level with the feature card beside it, which is the whole
     point. */
  /* SUPERSEDED 2026-08-14 by the uniform guides grid below: .pw-guides__col is
     display:contents there, so its children are grid items and this flex-grow is
     inert. Left as a no-op rather than deleted so the reasoning above stays
     readable if the grid is ever reverted. */
  .pw-guide-mini {
    flex: 0 1 auto !important;
  }

  /* The art strip grows from ~140x110 to ~140x195 when the cards stretch, which
     crops a landscape gouache illustration into a narrow portrait. 180px brings
     the crop back toward square without eating the body text, which still has
     ~335px at this width. */
  .pw-guide-mini__art {
    width: 180px !important;
  }

  .pw-featured {
    align-items: stretch !important;
  }

  .pw-featured__cta {
    margin-top: auto !important;
  }
}

/* ---- 6. Online communities band ------------------------------------------
   Communities are one of the three things this site is, and the homepage never
   said so - the nav linked to /communities and no sentence on the page
   mentioned it. Injected by the JS, styled entirely here: Angular's emulated
   encapsulation stamps `_ngcontent-*` attributes on its own elements and scopes
   every component rule to them, so an injected node inherits NONE of
   .pw-section / .pw-eyebrow / .pw-h2 / .pw-container. Those values are
   reproduced below rather than borrowed.

   Ivory, not dark, and the reasoning is adjacency rather than alternation. The
   new order paints hero (dark) -> guides (paper) -> cities (dark) -> clubs
   (paper) -> communities -> footer (dark). Alternation asks for dark; the
   footer directly below it is #15100E, and a dark band there would read as a
   200px-tall footer with a heading in it. So: paper family, but --card2
   (#FBF7F0 against the page's #F4EFE7) between two hairlines, which is enough
   to separate it from the clubs band above without introducing a second dark
   block against the footer. */
.pw-comm {
  background: var(--card2, #FBF7F0) !important;
  border-top: 1px solid var(--line, #E7DECF) !important;
  border-bottom: 1px solid var(--line, #E7DECF) !important;
  padding: 80px 0 !important;
}

.pw-comm__inner {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
}

/* .pw-section__head, reproduced: baseline-aligned title block and a link pinned
   to the far end, wrapping to its own line when there is no room. */
.pw-comm__head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-bottom: 18px !important;
}

.pw-comm__eyebrow {
  margin: 0 0 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  color: var(--accent, #DC4A3D) !important;
}

.pw-comm__title {
  margin: 0 !important;
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif) !important;
  font-weight: 400 !important;
  font-size: 46px !important;
  line-height: 1 !important;
  color: var(--ink, #1A1714) !important;
}

.pw-comm__link {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink, #1A1714) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--accent, #DC4A3D) !important;
  padding-bottom: 2px !important;
}

.pw-comm__link:hover,
.pw-comm__link:focus-visible {
  opacity: .7 !important;
}

.pw-comm__lede {
  margin: 0 !important;
  max-width: 560px !important;
  font-size: 16.5px !important;
  line-height: 1.62 !important;
  color: var(--muted, #8A8175) !important;
}

/* The bundle's own container and heading steps, at the bundle's own
   breakpoints, so the band moves with the sections around it. */
@media (max-width: 767.98px) {
  .pw-comm {
    padding: 56px 0 !important;
  }

  .pw-comm__inner {
    padding: 0 20px !important;
  }

  .pw-comm__title {
    font-size: 36px !important;
  }

  .pw-comm__lede {
    font-size: 15px !important;
  }
}

@media (max-width: 600px) {
  .pw-comm__inner {
    padding: 0 16px !important;
  }

  .pw-comm__title {
    font-size: 32px !important;
  }
}

/* ---- 7. The mobile tab bar was standing on the footer --------------------
   `nav.mt-tabbar` is position:fixed bottom:0 and shows below 767.98px, and
   NOTHING anywhere in the bundle compensates for it: no padding-bottom on the
   body, the app-root host (display:contents, so padding could not apply to it
   anyway) or either footer. It sat on top of the footer's legal row - the line
   carrying the 18+ notice and the privacy and terms links.

   53px is measured, not chosen: `.mt-tab{min-height:52px}` plus the bar's own
   1px border-top. `.mt-tabbar` already adds env(safe-area-inset-bottom) to
   itself, so the compensation has to add it too or the home-indicator strip
   eats the difference. 60px leaves 7px of clearance above the bar.

   Applied inside the footers rather than on the body so the dark footer
   background runs the full height behind the translucent bar. Body padding
   would paint a strip of page background between the footer and the bar. Both
   footer classes are named because the homepage ships .pw-footer and every
   other route ships .st-footer. */
@media (max-width: 767.98px) {
  .pw-footer,
  .st-footer {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---- 8. "lifestylelives." on phones --------------------------------------
   The hero title markup is `<em>lifestyle</em><br class="pw-hero__title-br2">
   "lives. "` with no whitespace between the em and the text node - the line
   break IS the separator. Below 768px the bundle hides that br to set the
   title in two lines instead of three, and the two words fuse: the mobile
   hero has read "Where the lifestylelives." since launch.

   A pseudo-element space after the em, rather than un-hiding the br: the
   two-line composition is the bundle's own mobile design, and a plain space
   (not \00a0) so the pair may still wrap if a narrow viewport needs it. On
   desktop the br renders and the extra space sits harmlessly before it. */
.pw-hero__title em::after {
  content: " ";
}

/* ==== Design markup round 2 (2026-08-14) ==================================== */

/* #2 The dark city band's "Browse all cities" link was a bare underline on
   near-black - functionally invisible. Ghost pill, same link, same place.
   Scoped to the band so the light sections' section-links stay as they are. */
.pw-cities-band .pw-section__link--dark {
  color: #F6ECE2 !important;
  border: 1px solid rgba(246, 236, 226, 0.35) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* #3 A one-chip row under a tagline that says the same word reads as leftover
   UI. Chips earn the row at two or more; at one, the tagline carries it.
   Data-driven count, so handled where the count lands: in CSS. */
.pw-fcard__chips:has(.pw-tag:only-child) {
  display: none !important;
}

/* #5a The tall featured band showed a lot of empty berry. The entwined brand
   mark, cream at 8%, bleeding off the top-right corner - decor that claims
   nothing about the venue. The bundle paints this band with a `background`
   shorthand (warm radial + berry linear), so this rule restates those two
   layers beneath the mark; overriding background-image alone would have
   silently deleted them. Badges sit top-LEFT, caption bottom-left: the
   top-right corner is the one quiet spot on the card. */
.pw-fcard__media {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 100%22%3E%3Cmask id=%22w%22 maskUnits=%22userSpaceOnUse%22%3E%3Crect width=%22120%22 height=%22100%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2244%22 cy=%2250%22 r=%228%22 fill=%22%23000%22/%3E%3C/mask%3E%3Cg stroke=%22%23F6ECE2%22 stroke-opacity=%22.08%22 fill=%22none%22 stroke-width=%227%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M26 36C46 36 46 62 60 62 74 62 74 36 94 36%22/%3E%3Cpath d=%22M26 64C46 64 46 38 60 38 74 38 74 64 94 64%22 mask=%22url(%2523w)%22/%3E%3C/g%3E%3Cg fill=%22%23F6ECE2%22 fill-opacity=%22.08%22%3E%3Ccircle cx=%2226%22 cy=%2236%22 r=%225.4%22/%3E%3Ccircle cx=%2294%22 cy=%2236%22 r=%225.4%22/%3E%3Ccircle cx=%2226%22 cy=%2264%22 r=%225.4%22/%3E%3Ccircle cx=%2294%22 cy=%2264%22 r=%225.4%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 28% 8%, rgba(220, 74, 61, 0.52), transparent 58%),
    linear-gradient(148deg, #2a1418, #6e1e2a 54%, #c9544a) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: right -26px top -20px, 0 0, 0 0 !important;
  background-size: 168px auto, auto, auto !important;
}

/* ==== Half-size hero (Juan, 2026-08-14) ====================================
   The hero ran clamp(470px,36vw,760px) plus a three-line display title - most
   of a viewport before any content. Halved: tighter grid clamp, smaller type,
   and the forced line breaks removed so the title flows on one line. This also
   finishes the pixelation fix - the art now paints at roughly half the device
   pixels, well inside what the 3200px asset resolves. Scoped to >=768px; the
   bundle's own mobile hero layout is untouched. */
@media (min-width: 768px) {
  .pw-hero__grid {
    min-height: clamp(250px, 18vw, 380px) !important;
    padding-top: 26px !important;
    padding-bottom: 34px !important;
  }
  .pw-hero__title {
    font-size: clamp(32px, 3vw, 46px) !important;
    margin-bottom: 14px !important;
  }
  /* Two break elements, not one: __title-br and __title-br2 (the digit hid it
     from the first class scan). Both must go for the title to flow one line. */
  .pw-hero__title-br,
  .pw-hero__title-br2 {
    display: none !important;
  }
  .pw-hero__eyebrow {
    margin-bottom: 10px !important;
  }
  .pw-hero__sub {
    max-width: 620px !important;
  }
}

/* ==== Guides band: more guides, all smaller (Juan, 2026-08-14) ==============
   The landing showed THREE guides out of 31 - one 490px feature card beside two
   small ones - and the count is hard-capped twice in compiled code that cannot be
   reached: loadFeaturedGuides() filters to category "foundations" then .slice(0,3),
   and the ngFor slices (1,3) again. So 28 written guides never reached the page,
   including every club, safety and dating guide.

   The fix is geometry plus cloned cards (see cloneGuideCards in the JS): one
   uniform 2-up grid of the SMALL horizontal card, eight of them. Same section
   height as the old three-card block, nearly three times the guides.

   Mechanism worth knowing: `.pw-guides__col` becomes display:contents, which
   dissolves the wrapper so the feature card, the two real minis and the clones all
   become siblings in ONE grid. Without it the clones would stack inside a 514px
   column while the feature card sat alone in the other.

   The feature card is restyled into the mini's shape rather than hidden - it holds
   a real guide, and hiding real content to win a layout is the wrong trade. Its
   internals differ from a mini's (art on top at 300px, serif 26px title, a "Read
   the guide" link), so each of those is brought to the mini's values.

   Gated at >=768px: below that the bundle's own @media(max-width:767.98px) already
   collapses the grid to a single column, which is the right mobile answer. */
@media (min-width: 768px) {
  .pw-guides {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  .pw-guides__col {
    display: contents !important;
  }

  .pw-guide-feature,
  .pw-guide-mini {
    display: flex !important;
    border-radius: 16px !important;
    min-height: 0 !important;
  }

  .pw-guide-feature__art {
    width: 180px !important;
    height: auto !important;
    flex: 0 0 180px !important;
    border-bottom: 0 !important;
    border-right: 1px solid var(--line) !important;
  }

  .pw-guide-feature__body {
    padding: 14px 16px !important;
    min-width: 0 !important;
  }

  /* The feature title is the bundle's one serif card title. At small size a serif
     26px next to seven 16px sans titles reads as a mistake, not a hierarchy. */
  .pw-guide-feature__title {
    font-family: var(--font-sans, inherit) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
  }

  .pw-guide-feature__eyebrow {
    font-size: 10px !important;
    letter-spacing: .12em !important;
    margin-bottom: 6px !important;
  }

  .pw-guide-feature__summary,
  .pw-guide-mini__summary {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 2 !important;
  }

  /* Only the feature card carries this link, so on a row of eight identical cards
     it is the one card shouting. The whole card is already a link. */
  .pw-guide-feature__link {
    display: none !important;
  }
}

/* Below 768px the bundle stacks the guides in one column and the feature card keeps
   its 300px art and 26px serif title, so the first guide is three times the height of
   the seven under it. "All of them smaller" has to hold on a phone too: the art is
   capped, the title comes down, and the redundant "Read the guide" link goes (the card
   is the link). The art stays on TOP here rather than moving to the side - at 350px wide
   a 180px art strip would leave the title 150px to live in. */
@media (max-width: 767.98px) {
  .pw-guide-feature__art {
    height: 150px !important;
  }

  .pw-guide-feature__body {
    padding: 14px 16px 16px !important;
  }

  .pw-guide-feature__title {
    font-size: 19px !important;
    margin: 0 0 7px !important;
  }

  .pw-guide-feature__summary {
    margin: 0 !important;
    font-size: 13px !important;
    -webkit-line-clamp: 2 !important;
  }

  .pw-guide-feature__link {
    display: none !important;
  }
}

/* ==== /guides index redesign (design handoff, 2026-08-14) ==================
   Ships the "Polyworld website wireframes" handoff: cream editorial hero,
   situation chips, restyled featured banner, and the guide list rebuilt as a
   magazine table of contents.

   Everything here is scoped to `html.pw-gd`, a class the JS puts on the root
   element only while the route is /guides. Without that gate these selectors
   would repaint the club and city pages, which share the section chrome.

   The encapsulation hash (_ngcontent-serverapp-c137) is deliberately NOT used
   in any selector: it changes on every Angular build, so a selector carrying it
   would silently stop matching after the next deploy. Bare .gd-* classes only,
   every declaration !important - component styles ship as an inline <style> in
   <head>, which a stylesheet <link> cannot outrank by order. */

/* ---- 1. Hero: dark photograph -> cream editorial -------------------------
   The hero root is ALREADY cream (background:var(--paper)); it only looks dark
   because of two stacked absolute overlays. Hiding those reveals the cream,
   which is why this is a repaint and not a rebuild. The brand watermark is also
   already in the DOM (svg.gd-hero__mark, display:none, cream strokes) - it gets
   unhidden and re-inked rather than injected. */
html.pw-gd .gd-hero {
  background:
    radial-gradient(80% 130% at 88% -10%, rgba(220, 74, 61, 0.12), transparent 55%),
    linear-gradient(158deg, #FBF7F0 0%, #F4EFE7 55%, #EDE4D6 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  border-bottom: 1px solid #E7DECF !important;
}

html.pw-gd .gd-hero__photo,
html.pw-gd .gd-hero__grade {
  display: none !important;
}

html.pw-gd .gd-hero__mark {
  display: block !important;
  width: 230px !important;
  height: auto !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0.10 !important;
  pointer-events: none !important;
}

/* Direct children only. The knot's cutout is a <mask> whose own rect and circle
   must keep fill #fff / #000 - recolouring those would dissolve the weave. */
html.pw-gd .gd-hero__mark > path {
  stroke: #1A1714 !important;
}

html.pw-gd .gd-hero__mark > circle {
  fill: #1A1714 !important;
}

/* Brief said 64/54; taken down after seeing it on the page - the index is the point
   of this route and the masthead was eating the first screen. */
html.pw-gd .gd-hero__inner {
  padding: 38px 40px 34px !important;
}

html.pw-gd .gd-hero__eyebrow {
  color: #DC4A3D !important;
  letter-spacing: 0.26em !important;
  text-shadow: none !important;
}

html.pw-gd .gd-hero__title {
  color: #1A1714 !important;
  text-shadow: none !important;
  font-size: 46px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 10px !important;
}

html.pw-gd .gd-hero__title-em {
  color: #DC4A3D !important;
  font-style: italic !important;
}

html.pw-gd .gd-hero__lede {
  color: #5A544A !important;
  text-shadow: none !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  max-width: 500px !important;
  margin: 0 !important;
}

/* ---- 1b. Trust line + situation chips (both injected by the JS) ----------- */
html.pw-gd .pw-gd-meta {
  margin-top: 14px !important;
  font-size: 13px !important;
  color: #8A8175 !important;
}

html.pw-gd .pw-gd-chips {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 18px !important;
}

/* Desktop: the rail is inert, so the pills stay direct flex children of the row and
   sit on one line beside the lead exactly as the brief drew them. The rail element
   exists only so the phone layout can make the pills swipeable without moving the
   lead label into the scroll area. */
html.pw-gd .pw-gd-chips__rail {
  display: contents !important;
}

html.pw-gd .pw-gd-chips__lead {
  font-family: "Instrument Serif", serif !important;
  font-style: italic !important;
  font-size: 16px !important;
  color: #5A544A !important;
  margin-right: 4px !important;
}

html.pw-gd .pw-gd-chip {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1A1714 !important;
  background: #FFFFFF !important;
  border: 1px solid #E7DECF !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.08) !important;
}

html.pw-gd .pw-gd-chip:hover {
  border-color: #DC4A3D !important;
  color: #DC4A3D !important;
}

/* ---- 3. Featured banner --------------------------------------------------
   Already a two-column grid, so this is geometry and paint. The columns are
   swapped by explicit grid-column rather than `order`, which grid ignores here.
   NOTE: which guide is featured stays the compiled choice (the glossary) - the
   anchor carries a RouterLink whose binding wins over its href, so rewriting
   the href would show one destination and navigate to another. */
html.pw-gd .gd-feature {
  align-items: stretch !important;
  grid-template-columns: 1.1fr 1fr !important;
  border-radius: 20px !important;
  box-shadow: 0 26px 48px -34px rgba(0, 0, 0, 0.35) !important;
  margin-bottom: 48px !important;
  overflow: hidden !important;
}

/* Both children are pinned to row 1. The art is the FIRST child in the DOM, so with
   only grid-column set, auto-placement puts the art in row 1 column 2 and then refuses
   to backtrack for the copy - which landed in a second row, under the art, leaving the
   top-left quarter of the banner empty. */
html.pw-gd .gd-feature__main {
  grid-column: 1 !important;
  grid-row: 1 !important;
  padding: 26px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

html.pw-gd .gd-feature__art {
  grid-column: 2 !important;
  grid-row: 1 !important;
  background: #FBF7F0 !important;
  border-left: 1px solid #E7DECF !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 190px !important;
  position: relative !important;
}

/* The art image is absolutely inset in its panel with object-fit:cover, which on a
   tall column crops a wide illustration down to a detail - the glossary cartoon was
   rendering as two pencils and a bookmark. contain shows the drawing. */
html.pw-gd .gd-feature__art-img {
  object-fit: contain !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

html.pw-gd .gd-feature__eyebrow {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #BD9444 !important;
  margin-bottom: 8px !important;
}

/* Taken down from the brief's 38px: at 38 the banner shouted over the index it is
   meant to introduce, and the glossary summary ran three lines under it. */
html.pw-gd .gd-feature__title {
  font-size: 26px !important;
  line-height: 1.1 !important;
  margin: 0 0 8px !important;
}

/* Clamped to two lines. The summary is a full data field written for the guide page,
   not for a banner, so it is trimmed by the layout rather than rewritten. */
html.pw-gd .gd-feature__summary {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #5A544A !important;
  margin: 0 0 14px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html.pw-gd .gd-feature__cta {
  align-self: flex-start !important;
  background: #DC4A3D !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 9px 17px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ---- 4. The list becomes a magazine table of contents --------------------
   Two columns of category groups (the JS moves the eight sections into one
   injected grid so whole groups stay intact), and every card collapses from a
   370px art panel into a 64x52 thumbnail row.

   .gd-card--warm is bound to isFoundations and carries a different background
   token, so both selectors are listed everywhere a row background is set -
   otherwise the first section reads differently from the other seven. */
/* Column flow, not a two-column grid. A grid aligns rows, so a 5-row section beside a
   7-row one leaves a two-inch hole under the short one; columns let each section start
   where the previous one ended. break-inside keeps a section whole across the gutter. */
html.pw-gd .pw-gd-toc {
  column-count: 2 !important;
  column-gap: 56px !important;
}

html.pw-gd .pw-gd-toc > .gd-section {
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  display: block !important;
  margin: 0 0 34px !important;
}

html.pw-gd .gd-section {
  margin: 0 !important;
}

html.pw-gd .gd-section__head {
  border-bottom: 2px solid #1A1714 !important;
  padding-bottom: 10px !important;
  margin-bottom: 4px !important;
  align-items: baseline !important;
}

html.pw-gd .gd-section__title {
  font-size: 22px !important;
  line-height: 1.2 !important;
}

html.pw-gd .gd-section__accent {
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  flex: 0 0 30px !important;
}

html.pw-gd .gd-section__count {
  font-size: 12.5px !important;
  color: #8A8175 !important;
}

html.pw-gd .gd-grid {
  display: block !important;
}

/* The sections carry a decorative flourish as a pseudo-element divider. It was drawn
   for one full-width column; in a two-column index it lands beside a section head
   instead of under a section, and the magazine index wants dashed rules as its only
   rule. Decorative only - no cartoon or guide art is touched. */
html.pw-gd .gd-section::before,
html.pw-gd .gd-section::after,
html.pw-gd .gd-grid::before,
html.pw-gd .gd-grid::after {
  display: none !important;
  content: none !important;
}

html.pw-gd .gd-card,
html.pw-gd .gd-card--warm {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  column-gap: 14px !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed #E7DECF !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 2px !important;
  transform: none !important;
  min-height: 0 !important;
}

html.pw-gd .gd-card:hover,
html.pw-gd .gd-card--warm:hover {
  background: #FBF7F0 !important;
  transform: none !important;
}

/* The bookmark button is absolutely positioned over a 370px art panel; on a
   52px-tall row it lands on top of the thumbnail. Hidden here only - the
   feature is untouched everywhere else on the site. */
html.pw-gd .gd-card__bookmark {
  display: none !important;
}

html.pw-gd .gd-card__art {
  width: 64px !important;
  height: 52px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 9px !important;
  background: #FBF7F0 !important;
  border: 1px solid #E7DECF !important;
  overflow: hidden !important;
}

/* contain, not cover: these are 1200px explanatory diagrams, and cropping one
   to a 64x52 box cuts the drawing's subject out entirely. */
html.pw-gd .gd-card__art-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 3px !important;
  box-sizing: border-box !important;
}

html.pw-gd .gd-card__body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 14px !important;
  align-items: center !important;
  padding: 0 !important;
}

/* The category is the group header two rows up, and the reading time moves to
   the meta column, so the eyebrow has nothing left to say. */
html.pw-gd .gd-card__eyebrow {
  display: none !important;
}

html.pw-gd .gd-card__title {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-family: "Instrument Serif", serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  -webkit-line-clamp: none !important;
  display: block !important;
}

html.pw-gd .gd-card__summary {
  grid-column: 1 !important;
  grid-row: 2 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #8A8175 !important;
  margin: 3px 0 0 !important;
  -webkit-line-clamp: 1 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html.pw-gd .gd-card__read {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  align-self: center !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #8A8175 !important;
  white-space: nowrap !important;
}

html.pw-gd .gd-card__read svg {
  display: none !important;
}

/* One column below 900px: two columns of 64px-thumb rows stop fitting their
   titles well before the bundle's own 767.98px breakpoint. */
@media (max-width: 900px) {
  html.pw-gd .pw-gd-toc {
    column-count: 1 !important;
  }

  html.pw-gd .gd-hero__title {
    font-size: 34px !important;
  }

  html.pw-gd .gd-hero__inner {
    padding: 26px 20px 24px !important;
  }

  html.pw-gd .gd-feature {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.pw-gd .gd-feature__main {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 26px 22px !important;
  }

  html.pw-gd .gd-feature__art {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 200px !important;
    border-left: 0 !important;
    border-bottom: 1px solid #E7DECF !important;
  }

  html.pw-gd .gd-feature__title {
    font-size: 22px !important;
  }

  /* ---- Mobile guides chrome ------------------------------------------------
     Three things went wrong on a phone. The chip row wrapped one pill per line
     and ate half the first screen; the category directory wrapped into four
     ragged dot-separated lines; and the brand watermark sat directly behind the
     trust line. Chips and directory both become single-line rails you swipe,
     which is the pattern a thumb expects, and the watermark steps aside. */
  html.pw-gd .pw-gd-chips {
    display: block !important;
    margin-top: 14px !important;
    /* Bleed to the screen edges so a half-visible pill signals "swipe me". */
    margin-left: -20px !important;
    margin-right: -20px !important;
  }

  html.pw-gd .pw-gd-chips__lead {
    display: block !important;
    margin: 0 0 8px 20px !important;
    font-size: 14px !important;
  }

  html.pw-gd .pw-gd-chips > .pw-gd-chip {
    display: inline-block !important;
    scroll-snap-align: start !important;
  }

  html.pw-gd .pw-gd-chips__rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px 20px 6px !important;
  }

  html.pw-gd .pw-gd-chips__rail::-webkit-scrollbar {
    display: none !important;
  }

  html.pw-gd .gd-dir {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    max-width: none !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 0 20px 8px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.pw-gd .gd-dir::-webkit-scrollbar {
    display: none !important;
  }

  /* The dot separators were drawn for a wrapping centred list; on a rail they
     land mid-swipe. The pills carry the separation themselves. */
  html.pw-gd .gd-dir__link::after {
    display: none !important;
    content: none !important;
  }

  html.pw-gd .gd-dir__link {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    border: 1px solid #E7DECF !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
  }

  /* Behind the trust line at this width, and there is no room to move it. */
  html.pw-gd .gd-hero__mark {
    display: none !important;
  }
}

/* ---- 5. Article pages: the end-of-article block -------------------------- */
.ga-readnext__eyebrow--pw-next {
  color: #DC4A3D !important;
}

/* ==== Hero T2: the original painting, framed (Juan's pick, 2026-08-15) ========
   Four in-context directions were mocked on the live DOM; Juan chose T2. The band
   becomes a type-led berry ground with the brand knot as a watermark, and the
   ORIGINAL hero painting - the one he liked all along - returns as a framed print.
   The print renders at ~430px from an 840px file: oversampled 2x, so the resolution
   problem that killed the full-bleed versions cannot exist here by construction.

   These rules intentionally repaint the same selectors the earlier full-bleed hero
   sections styled (the ultra-wide 1760px+ blocks included). Equal specificity, later
   in the file: these win. The earlier sections are left in place for history; if the
   hero ever goes back to full-bleed art, delete THIS block. */
.pw-hero__media {
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 100%22%3E%3Cmask id=%22hm%22 maskUnits=%22userSpaceOnUse%22%3E%3Crect width=%22120%22 height=%22100%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2244%22 cy=%2250%22 r=%228%22 fill=%22%23000%22/%3E%3C/mask%3E%3Cg stroke=%22%23F6ECE2%22 stroke-opacity=%22.09%22 fill=%22none%22 stroke-width=%227%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M26 36C46 36 46 62 60 62 74 62 74 36 94 36%22/%3E%3Cpath d=%22M26 64C46 64 46 38 60 38 74 38 74 64 94 64%22 mask=%22url(%2523hm)%22/%3E%3C/g%3E%3Cg fill=%22%23F6ECE2%22 fill-opacity=%22.09%22%3E%3Ccircle cx=%2226%22 cy=%2236%22 r=%225.4%22/%3E%3Ccircle cx=%2294%22 cy=%2236%22 r=%225.4%22/%3E%3Ccircle cx=%2226%22 cy=%2264%22 r=%225.4%22/%3E%3Ccircle cx=%2294%22 cy=%2264%22 r=%225.4%22/%3E%3C/g%3E%3C/svg%3E") no-repeat 56% 50% / 340px auto,
    radial-gradient(90% 120% at 78% 20%, rgba(123, 34, 48, 0.55), transparent 60%),
    radial-gradient(70% 100% at 20% 90%, rgba(220, 74, 61, 0.16), transparent 55%),
    linear-gradient(148deg, #17090c 0%, #241014 55%, #2e1216 100%) !important;
  overflow: hidden !important;
}

.pw-hero__scrim {
  display: none !important;
}

.pw-hero__photo {
  position: absolute !important;
  inset: auto !important;
  right: 4.5% !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(1.2deg) !important;
  width: 430px !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 9px solid #F6ECE2 !important;
  border-radius: 3px !important;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.75) !important;
}

/* The print scales down before it may collide with the copy column. */
@media (max-width: 1180px) {
  .pw-hero__photo {
    width: 330px !important;
  }
}

@media (max-width: 950px) {
  .pw-hero__photo {
    width: 250px !important;
    right: 3% !important;
  }
}

@media (max-width: 767.98px) {
  .pw-hero__photo {
    width: 168px !important;
    right: 12px !important;
    border-width: 5px !important;
  }

  .pw-hero__media {
    background:
      url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 100%22%3E%3Cmask id=%22hm%22 maskUnits=%22userSpaceOnUse%22%3E%3Crect width=%22120%22 height=%22100%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2244%22 cy=%2250%22 r=%228%22 fill=%22%23000%22/%3E%3C/mask%3E%3Cg stroke=%22%23F6ECE2%22 stroke-opacity=%22.09%22 fill=%22none%22 stroke-width=%227%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M26 36C46 36 46 62 60 62 74 62 74 36 94 36%22/%3E%3Cpath d=%22M26 64C46 64 46 38 60 38 74 38 74 64 94 64%22 mask=%22url(%2523hm)%22/%3E%3C/g%3E%3Cg fill=%22%23F6ECE2%22 fill-opacity=%22.09%22%3E%3Ccircle cx=%2226%22 cy=%2236%22 r=%225.4%22/%3E%3Ccircle cx=%2294%22 cy=%2236%22 r=%225.4%22/%3E%3Ccircle cx=%2226%22 cy=%2264%22 r=%225.4%22/%3E%3Ccircle cx=%2294%22 cy=%2264%22 r=%225.4%22/%3E%3C/g%3E%3C/svg%3E") no-repeat 40% 42% / 230px auto,
      radial-gradient(90% 120% at 78% 20%, rgba(123, 34, 48, 0.55), transparent 60%),
      radial-gradient(70% 100% at 20% 90%, rgba(220, 74, 61, 0.16), transparent 55%),
      linear-gradient(148deg, #17090c 0%, #241014 55%, #2e1216 100%) !important;
  }
}

/* ==== /clubs UI v2: faithful conversion of the design target (2026-08-16) ===
   The owner rejected the invented v1 design and supplied the real target (Claude
   design's clubs concept). Two Opus builders converted it - desktop2 (base +
   >=768px, measured off the mock at its derived 1.388 scale) then Fable glue for
   the injected row data, then mobile2 (one 767.98px block) - ORDER LOAD-BEARING.
   Fable-gated: selector audits, plus one cross-lane defect fixed at merge:
   desktop2 styled .cl-results as the header line, but the live DOM has it as the
   wrapper around head+grid+loadmore (mobile2's probe caught it; verified) - all
   14 occurrences retargeted to .cl-results__head. Rationales + originals in the
   session scratchpad clubs-ui/ dir. */

/* ============================================================================
   PLURAMOUR /clubs - DESKTOP RULE SET (>= 768px lane)          desktop2.css
   2026-08-16. REPLACES desktop.css in full.

   This is a conversion of DESIGN-TARGET.png, not a new design. The target's
   anatomy, measured off the mock at 1.388x and converted to CSS px:

     hero band      cream, serif H1 (~52px) + 15.5px sub left, 56px-tall
                    rounded search field (~448px) right, hairline underneath
     section head   serif heading sitting on a 1px INK rule
     sidebar        ONE white card, radius 10, full-bleed hairline rows,
                    round count badges right, active row tinted + red bar
     club row       white card r14, 92px tall, 12px/16px padding,
                    104x68 thumb r8 left, 17px gap, serif name 23px,
                    muted 14.5px locality inline 13px after it, meta right,
                    18px gap, caret at the right edge
     row pitch      92 + 14 gap

   WHAT THE APP MAKES ME ADAPT (see rationale for the full list)
     - No photos, ever (owner directive): the thumb is the honest per-city
       gradient that is already inline on .cl-card__tile, painted as a
       104x68 block; .cl-card__wash rounds its corners, .cl-card__scrim
       gives it an edge and a sheen.
     - The club NAME lives inside .cl-card__tile in the real DOM, so the tile
       is the whole left half of the row and only its BACKGROUND is the thumb.
     - The target's locality is a neighbourhood; we hold the city, so the city
       chip is what sits beside the name.
     - Country grouping, hours, "Open tonight", "City guide" links are T2.

   LANE RULES
     - Everything is scoped html.pw-clubs, every declaration !important,
       no _ngcontent selectors, no class names outside DOM-REFERENCE.md
       except pw-clx-hero / pw-clx-sub (injection spec in the rationale).
     - Mobile (<768px) belongs to the other builder: this file contains NO
       max-width query. Every rule below sits in a min-width block, except
       the one unscoped photo rule in section 0, which is the owner's
       standing directive and must hold at every width.
     - Exactly ONE pseudo-element in the file (the row caret, section 7),
       written as briefed and isolated so it can be deleted on its own.
   ========================================================================== */


/* --- 0. Owner floor: no venue has ever submitted a photo ------------------ */
/* Unscoped by width on purpose - this is a content directive, not a layout
   decision, and it must survive whatever the mobile lane does or does not
   write. Nothing else in this file is unscoped. */

html.pw-clubs .cl-card__photo {
  display: none !important;
}


@media (min-width: 768px) {

  /* --- 1. Hero band ------------------------------------------------------ */
  /* The target's cream band. .cl-controls is the full-bleed band;
     .cl-controls__row is the page container, so the injected H1 and sub go
     INSIDE the row (they inherit the container's gutter that way) and the
     row becomes the hero's two-column grid.

     Every placement rule is guarded by :has(.pw-clx-hero). If the injection
     has not shipped yet, the guard fails, the row keeps the app's own flex
     layout, and the file degrades to a skin-only controls bar instead of a
     grid with a hole in it. */

  html.pw-clubs .cl-controls {
    position: static !important;
    background: #FBF7F0 !important;
    border-bottom: 1px solid #E7DECF !important;
    padding: 40px 0 34px !important;
    margin: 0 !important;
  }

  html.pw-clubs .cl-controls__row:has(.pw-clx-hero) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 448px) !important;
    column-gap: 48px !important;
    row-gap: 14px !important;
    align-items: center !important;
  }

  html.pw-clubs .pw-clx-hero {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-size: 42px !important;
    font-weight: 400 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.015em !important;
    color: #1A1714 !important;
    text-wrap: balance !important;
  }

  /* "city by city." - the one italic red moment in the hero. */
  html.pw-clubs .pw-clx-hero i,
  html.pw-clubs .pw-clx-hero em {
    font-style: italic !important;
    font-weight: 400 !important;
    color: #DC4A3D !important;
  }

  html.pw-clubs .pw-clx-sub {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: #8A8175 !important;
  }

  /* The target's field: soft rectangle, not a pill, no visible border, one
     low shadow. It is the only raised object in the band. */
  html.pw-clubs .cl-search {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    height: 56px !important;
    padding: 0 20px !important;
    border: 1px solid #F0E8DA !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(26, 23, 20, 0.04),
                0 12px 26px -20px rgba(26, 15, 10, 0.55) !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
  }

  html.pw-clubs .cl-controls__row:has(.pw-clx-hero) .cl-search {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html.pw-clubs .cl-search:focus-within {
    border-color: rgba(220, 74, 61, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(220, 74, 61, 0.10) !important;
  }

  html.pw-clubs .cl-search svg {
    flex: 0 0 auto !important;
    width: 19px !important;
    height: 19px !important;
    color: #8A8175 !important;
  }

  html.pw-clubs .cl-search input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    color: #1A1714 !important;
  }

  html.pw-clubs .cl-search input::placeholder {
    color: #A79C8C !important;
    font-weight: 400 !important;
  }

  /* Sort and the view toggle are not in the target - it has no such controls -
     but they are real and functional, so they sit quietly on the sub's line,
     under the field, instead of being deleted. */
  html.pw-clubs .cl-controls__row:has(.pw-clx-hero) .cl-sort {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
  }

  html.pw-clubs .cl-controls__row:has(.pw-clx-hero) .cl-toggle {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  html.pw-clubs .cl-sort__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid #E7DECF !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #43392F !important;
    cursor: pointer !important;
    transition: border-color 0.16s ease, background-color 0.16s ease !important;
  }

  html.pw-clubs .cl-sort__caret {
    color: #8A8175 !important;
    opacity: 0.9 !important;
  }

  html.pw-clubs .cl-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Deliberately NO display declaration here: the Map twin is hidden by the
     app's JS and a display:inline-flex would drag it back onto the page.
     Only .is-on - the button that is always rendered - gets one. */
  html.pw-clubs .cl-toggle__btn {
    align-items: center !important;
    gap: 7px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #8A8175 !important;
    cursor: pointer !important;
    transition: color 0.16s ease, background-color 0.16s ease !important;
  }

  html.pw-clubs .cl-toggle__btn.is-on {
    display: inline-flex !important;
    background: #F1EAE0 !important;
    border-color: transparent !important;
    color: #6E6558 !important;
    box-shadow: none !important;
  }


  /* --- 2. Page split ----------------------------------------------------- */

  html.pw-clubs .cl-body {
    grid-template-columns: minmax(0, 268px) minmax(0, 1fr) !important;
    column-gap: 44px !important;
    align-items: start !important;
    padding-bottom: 0 !important;
  }


  /* --- 3. Results header: serif heading on an ink rule ------------------- */
  /* The target's "Browse by country." / "Germany" treatment. "284 clubs" is
     real data, so it is the heading - no injected copy needed here. The
     font-size is set on .cl-results__head AND on any heading it may wrap, because
     the reference does not say which it is. */

  html.pw-clubs .cl-results__head,
  html.pw-clubs .cl-results__head h1,
  html.pw-clubs .cl-results__head h2,
  html.pw-clubs .cl-results__head h3 {
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.012em !important;
    color: #1A1714 !important;
    margin: 0 !important;
  }

  html.pw-clubs .cl-results__head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 0 0 13px !important;
    margin: 0 0 22px !important;
    border-bottom: 1px solid #1A1714 !important;
  }

  html.pw-clubs .cl-results__sub {
    flex: 0 0 auto !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.17em !important;
    text-transform: uppercase !important;
    color: #8A8175 !important;
    white-space: nowrap !important;
  }


  /* --- 4. The list ------------------------------------------------------- */
  /* Three columns become one. Rows, not tiles. */

  html.pw-clubs .cl-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }


  /* --- 5. The row -------------------------------------------------------- */
  /*  [ thumb 104x68 ] name  city .................. chips  country  $$  >
      .cl-card__tile ------------------------------  .cl-card__body ---  ::after
     The tile is the whole left half because the name lives inside it in the
     real DOM; only the tile's BACKGROUND is the thumb. */

  html.pw-clubs .cl-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: 92px !important;
    padding: 12px 18px 12px 16px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    color: inherit !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(26, 23, 20, 0.05),
                0 10px 22px -18px rgba(26, 15, 10, 0.50) !important;
    transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.16s ease !important;
  }

  /* The tile: flex row, its own background painted as the thumb block at the
     left edge. background-origin is the padding box, which for a border-less
     box is the left edge, so the 122px padding-left clears the thumb (104)
     plus the target's 17px gap without moving the paint. */
  html.pw-clubs .cl-card__tile {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    aspect-ratio: auto !important;
    gap: 13px !important;
    padding: 0 18px 0 121px !important;   /* right: the floor on the gap
                                             before the meta when a long
                                             name has taken all the slack */
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
    background-origin: padding-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 104px 68px !important;   /* keep in sync with 5a/5b */
  }

  /* 5a. Corner mask. The tile's background paints a square block; this span
     sits exactly over it with the target's 8px radius and a white spread
     shadow, so everything outside the rounded shape is painted back to the
     card's ground. 2px oversized in each direction so a half-pixel of
     rounding can never leave a sliver of gradient in a corner. The spread
     stops 15px out, well short of the name, and the text sits above it
     anyway (z-index in 5c). */
  html.pw-clubs .cl-card__wash {
    position: absolute !important;
    top: 50% !important;
    left: -1px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1 !important;
    display: block !important;
    width: 106px !important;
    height: 70px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    border-radius: 9px !important;
    background: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    box-shadow: 0 0 0 15px #FFFFFF !important;
  }

  /* 5b. The thumb's own surface: a hairline edge so the block reads as an
     object, and a light-to-dark rake so the city's two colours have some
     depth. The gradient underneath is untouched - it is the honest part. */
  html.pw-clubs .cl-card__scrim {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2 !important;
    display: block !important;
    width: 104px !important;
    height: 68px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    border-radius: 8px !important;
    opacity: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(152deg,
        rgba(255, 246, 236, 0.14) 0%,
        rgba(26, 15, 10, 0.10) 48%,
        rgba(26, 15, 10, 0.26) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(26, 23, 20, 0.10) !important;
    transition: box-shadow 0.16s ease !important;
  }

  /* 5c. Name, then city. They are siblings in source order city-then-name,
     so flex order puts them the target's way round. Both are lifted above
     the corner mask. The left half is the only part of the row that gives
     way when space is tight, so the meta on the right is never sliced. */
  html.pw-clubs .cl-card__nameblock {
    position: relative !important;
    z-index: 3 !important;
    order: 1 !important;
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html.pw-clubs .cl-card__name {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-size: 23px !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
    letter-spacing: 0.004em !important;
    color: #1A1714 !important;
    text-shadow: none !important;
  }

  /* The target has no rule under the row name - that was the grid-tile idiom. */
  html.pw-clubs .cl-card__hair {
    display: none !important;
  }

  /* display:block, not inline-flex: text-overflow cannot ellipsize the
     anonymous item a flex box would make of this span's text, and the city
     names include "Burnaby (Metro Vancouver)". The flag stays inline inside. */
  html.pw-clubs .cl-card__city {
    position: relative !important;
    z-index: 3 !important;
    order: 2 !important;
    display: block !important;
    flex: 0 0 auto !important;
    inset: auto !important;
    max-width: 32% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.3 !important;
    color: #8A8175 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.pw-clubs .cl-card__flag {
    width: 17px !important;
    height: auto !important;
    margin: 0 8px 0 0 !important;
    border-radius: 2px !important;
    vertical-align: -2px !important;
    box-shadow: 0 0 0 1px rgba(26, 23, 20, 0.12) !important;
  }


  /* --- 6. Right-hand meta ------------------------------------------------ */
  /* Where the target carries "Open tonight" + hours + price, we carry the
     facts we actually hold: the amenity chips (>=1180px only, section 6a),
     the country, and the price tier. Order is reversed from source so the
     pill-shaped things sit outboard of the data, as in the target. */

  html.pw-clubs .cl-card__body {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html.pw-clubs .cl-card__row {
    order: 2 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  html.pw-clubs .cl-card__country {
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #8A8175 !important;
  }

  /* Holds the price tier ("$$"), not a rating - see the rationale's wishlist. */
  html.pw-clubs .cl-card__rating {
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    color: #4A4038 !important;
  }

  /* Hidden by default: below 1180px the row has no width to spare, and
     clipping a chip in half is worse than not showing one. */
  html.pw-clubs .cl-card__chips {
    display: none !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Filled soft pills, taking the target's "Open tonight" shape rather than
     the outlined-chip idiom of the rejected grid. */
  html.pw-clubs .cl-card__chip {
    display: inline-flex !important;
    align-items: center !important;
    height: 24px !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Colour only for plain chips. Any modifier this lane cannot see (the
     screenshots show one whose class is undocumented) adopts the new shape
     but keeps its own palette. */
  html.pw-clubs .cl-card__chip:not([class*="cl-card__chip--"]) {
    background: #F4EFE7 !important;
    color: #6E6558 !important;
  }

  html.pw-clubs .cl-card__chip--nomen {
    background: #FBF0EE !important;
    color: #B03A2E !important;
  }


  /* --- 7. The caret ------------------------------------------------------ */
  /* THE ONLY PSEUDO-ELEMENT IN THIS FILE, written as briefed. It is the last
     flex child of the row, so it lands at the right edge with no wrapper.
     Chevron points right, not down: the target's caret expands a row, ours
     opens /clubs/<slug>. Delete this single block and the row loses the
     chevron and nothing else. */

  html.pw-clubs .cl-card::after {
    content: "" !important;
    flex: 0 0 auto !important;
    order: 9 !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 0 0 18px !important;
    opacity: 0.55 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8175' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    transition: opacity 0.16s ease, transform 0.16s ease !important;
  }


  /* --- 8. Filters rail ---------------------------------------------------- */
  /* The target's sidebar is ONE white card with full-bleed hairline rows and
     round count badges - not a stack of separate cards. .cl-rail becomes the
     card, .cl-group becomes a section inside it. */

  html.pw-clubs .cl-rail {
    position: sticky !important;
    top: 88px !important;
    align-self: start !important;
    max-height: calc(100vh - 116px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #E0D5C2 transparent !important;
  }

  html.pw-clubs .cl-rail__head {
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.008em !important;
    color: #1A1714 !important;
    margin: 0 0 22px !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid #1A1714 !important;
  }
  /* The 20px is not arbitrary: 26px/1.1 + 20 lands this rule on the same
     baseline as the results rule (34px/1.06 + 13), so the two read as the
     target's ONE ink rule running the width of the page. Re-derive it if
     either heading size moves - the two other size bands do exactly that. */

  html.pw-clubs .cl-group {
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 0 12px !important;
    padding: 13px 14px 11px !important;
    border: 1px solid #EFE7DA !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(26, 23, 20, 0.04),
                0 10px 22px -20px rgba(26, 15, 10, 0.45) !important;
  }

  html.pw-clubs .cl-group__label {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.17em !important;
    text-transform: uppercase !important;
    color: #8A8175 !important;
  }

  /* 8a. Facet rows. Only labels that actually contain a checkbox are turned
     into rows - the price and amenity value pills must not be caught by this
     even if they turn out to be labels rather than buttons. Layout inside
     the row (checkbox, name, count position) is left entirely to the app:
     it already places the count at the right edge, and this lane cannot see
     the row's internals. Negative margins bleed the hairline to the card
     edge, the way the target's rows do. */
  html.pw-clubs .cl-group label:has(input[type="checkbox"]) {
    margin: 0 -14px !important;
    padding: 9px 14px !important;
    border-top: 1px solid #F3ECE0 !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: #43392F !important;
    cursor: pointer !important;
    transition: background-color 0.14s ease !important;
  }

  /* Active row: tinted, red text, red bar at the right edge (the mock puts
     the bar on the right, pointing at the results column). Drawn as an inset
     shadow so it costs no pseudo-element and cannot disturb the row's box. */
  html.pw-clubs .cl-group label:has(input[type="checkbox"]:checked) {
    background: #FBF1EC !important;
    color: #C4402F !important;
    font-weight: 600 !important;
    box-shadow: inset -3px 0 0 #DC4A3D !important;
  }

  /* 8b. Count badge. Deliberately requires a span PRECEDED by a span: if the
     count is a bare text node the selector simply does not match and the
     count keeps the app's plain-text treatment rather than the name getting
     badged by mistake. */
  html.pw-clubs .cl-group label > span + span:last-child {
    display: inline-block !important;
    min-width: 24px !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: #F1EAE0 !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    text-align: center !important;
    color: #6E6558 !important;
  }

  html.pw-clubs .cl-group label:has(input[type="checkbox"]:checked) > span + span:last-child {
    background: #F6DFD8 !important;
    color: #B03A2E !important;
  }

  html.pw-clubs .cl-rail input[type="checkbox"] {
    accent-color: #DC4A3D !important;
    cursor: pointer !important;
  }

  /* 8c. The city search field. display:block + width:auto fills the card
     minus its padding without having to guess at a wrapper. */
  html.pw-clubs .cl-rail input[type="search"],
  html.pw-clubs .cl-rail input[type="text"] {
    display: block !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: 36px !important;
    margin: 0 0 4px !important;
    padding: 0 13px !important;
    border: 1px solid #E7DECF !important;
    border-radius: 999px !important;
    background: #FDFBF7 !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 13px !important;
    color: #1A1714 !important;
    outline: none !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
  }

  html.pw-clubs .cl-rail input[type="search"]::placeholder,
  html.pw-clubs .cl-rail input[type="text"]::placeholder {
    color: #A79C8C !important;
  }

  html.pw-clubs .cl-rail input[type="search"]:focus,
  html.pw-clubs .cl-rail input[type="text"]:focus {
    border-color: rgba(220, 74, 61, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(220, 74, 61, 0.10) !important;
  }

  /* 8d. Value pills ($ / $$ / $$$, amenities, "+14 more"). */
  html.pw-clubs .cl-group button:not(.cl-group__more) {
    border: 1px solid #E7DECF !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    padding: 6px 12px !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #43392F !important;
    cursor: pointer !important;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease !important;
  }

  /* Selected pill, if the app exposes state as aria-pressed. Attribute, not
     an invented class. If it does not, this is inert. */
  html.pw-clubs .cl-group button[aria-pressed="true"]:not(.cl-group__more) {
    border-color: rgba(220, 74, 61, 0.45) !important;
    background: #FBF1EC !important;
    color: #C4402F !important;
  }

  /* No display declaration: a "show all" control can legitimately be hidden
     when a group is short. */
  html.pw-clubs .cl-group__more {
    margin: 12px 0 0 !important;
    padding: 0 0 1px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(220, 74, 61, 0.35) !important;
    background: none !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #DC4A3D !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.16s ease, border-color 0.16s ease !important;
  }


  /* --- 9. Load more ------------------------------------------------------- */

  html.pw-clubs .cl-loadmore__btn {
    margin: 26px auto 0 !important;
    padding: 13px 26px !important;
    border: 1px solid #DFD3BF !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #1A1714 !important;
    cursor: pointer !important;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
  }


  /* --- 10. Focus floor ---------------------------------------------------- */

  html.pw-clubs .cl-card:focus-visible,
  html.pw-clubs .cl-sort__btn:focus-visible,
  html.pw-clubs .cl-toggle__btn:focus-visible,
  html.pw-clubs .cl-loadmore__btn:focus-visible,
  html.pw-clubs .cl-group__more:focus-visible,
  html.pw-clubs .cl-group button:focus-visible,
  html.pw-clubs .cl-rail input:focus-visible {
    outline: 2px solid #DC4A3D !important;
    outline-offset: 3px !important;
  }

  html.pw-clubs .cl-group label:has(input[type="checkbox"]:focus-visible) {
    outline: 2px solid #DC4A3D !important;
    outline-offset: -2px !important;
  }
}


/* --- 11. One chip, where the row can afford it ---------------------------- */
/* The target's row carries exactly one pill ("Open tonight") in this slot,
   and measurement says that is also all the room there is: the results
   column is ~800px at any width past 1200 (the app's container caps at
   1160), and a second chip starts eating the club name. So the first chip -
   the app orders restrictions first, which is the one that changes a
   decision - takes the pill slot, and the rest stay on the detail page.
   Rendered and checked at 1440 and 1280. */

@media (min-width: 1180px) {

  html.pw-clubs .cl-card__chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  html.pw-clubs .cl-card__chip:nth-child(n + 2) {
    display: none !important;
  }
}


/* --- 11a. Narrow desktop (768-1023px) ------------------------------------ */
/* The rail eats a fixed 268px, so this is where the row runs out of width
   first. Paired with min-width so it can never reach the mobile lane. */

@media (min-width: 768px) and (max-width: 1023.98px) {

  html.pw-clubs .cl-controls {
    padding: 32px 0 28px !important;
  }

  html.pw-clubs .cl-controls__row:has(.pw-clx-hero) {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 340px) !important;
    column-gap: 28px !important;
  }

  html.pw-clubs .pw-clx-hero {
    font-size: 32px !important;
  }

  html.pw-clubs .pw-clx-sub {
    font-size: 14.5px !important;
  }

  html.pw-clubs .cl-search {
    height: 48px !important;
  }

  html.pw-clubs .cl-body {
    grid-template-columns: minmax(0, 216px) minmax(0, 1fr) !important;
    column-gap: 28px !important;
  }

  html.pw-clubs .cl-results__head,
  html.pw-clubs .cl-results__head h1,
  html.pw-clubs .cl-results__head h2,
  html.pw-clubs .cl-results__head h3 {
    font-size: 27px !important;
  }

  /* Keeps the two ink rules on one line at this heading size. */
  html.pw-clubs .cl-rail__head {
    font-size: 23px !important;
    padding-bottom: 17px !important;
  }

  html.pw-clubs .cl-card {
    min-height: 84px !important;
    padding: 10px 14px 10px 12px !important;
  }

  html.pw-clubs .cl-card__tile {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 12px 0 98px !important;
    gap: 10px !important;
    background-size: 84px 64px !important;
  }

  html.pw-clubs .cl-card__wash {
    width: 86px !important;
    height: 66px !important;
  }

  html.pw-clubs .cl-card__scrim {
    width: 84px !important;
    height: 64px !important;
  }

  html.pw-clubs .cl-card__name {
    font-size: 20px !important;
  }

  html.pw-clubs .cl-card__city {
    font-size: 13px !important;
    max-width: 38% !important;
  }

  html.pw-clubs .cl-card__body {
    gap: 12px !important;
  }

  html.pw-clubs .cl-card::after {
    margin-left: 12px !important;
  }
}


/* --- 12. Large desktop type scale ---------------------------------------- */

@media (min-width: 1200px) {

  html.pw-clubs .cl-controls {
    padding: 52px 0 44px !important;
  }

  html.pw-clubs .pw-clx-hero {
    font-size: 52px !important;
  }

  html.pw-clubs .cl-results__head,
  html.pw-clubs .cl-results__head h1,
  html.pw-clubs .cl-results__head h2,
  html.pw-clubs .cl-results__head h3 {
    font-size: 38px !important;
  }

  /* Keeps the two ink rules on one line at this heading size. */
  html.pw-clubs .cl-rail__head {
    font-size: 28px !important;
    padding-bottom: 23px !important;
  }

  html.pw-clubs .cl-card__name {
    font-size: 24px !important;
  }
}


/* --- 13. Hover, pointer devices only ------------------------------------- */

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {

  html.pw-clubs .cl-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(26, 23, 20, 0.06),
                0 16px 30px -20px rgba(26, 15, 10, 0.62) !important;
  }

  html.pw-clubs .cl-card:hover .cl-card__scrim {
    box-shadow: inset 0 0 0 1px rgba(26, 23, 20, 0.18) !important;
  }

  html.pw-clubs .cl-card:hover::after {
    opacity: 1 !important;
    transform: translateX(2px) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC4A3D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") !important;
  }

  html.pw-clubs .cl-sort__btn:hover {
    border-color: #DCD0BC !important;
    background: #FDFBF7 !important;
  }

  html.pw-clubs .cl-toggle__btn:not(.is-on):hover {
    color: #1A1714 !important;
  }

  html.pw-clubs .cl-group label:has(input[type="checkbox"]):hover {
    background: #FBF7F0 !important;
  }

  html.pw-clubs .cl-group label:has(input[type="checkbox"]:checked):hover {
    background: #F9EBE5 !important;
  }

  html.pw-clubs .cl-group button:not(.cl-group__more):hover {
    border-color: #DCD0BC !important;
    background: #FBF7F0 !important;
  }

  html.pw-clubs .cl-group__more:hover {
    color: #7B2230 !important;
    border-color: rgba(123, 34, 48, 0.45) !important;
  }

  html.pw-clubs .cl-loadmore__btn:hover {
    background: #1A1714 !important;
    border-color: #1A1714 !important;
    color: #F6ECE2 !important;
  }
}


/* --- 14. Reduced motion --------------------------------------------------- */

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {

  html.pw-clubs .cl-card,
  html.pw-clubs .cl-card::after,
  html.pw-clubs .cl-card__scrim,
  html.pw-clubs .cl-search,
  html.pw-clubs .cl-sort__btn,
  html.pw-clubs .cl-toggle__btn,
  html.pw-clubs .cl-group label,
  html.pw-clubs .cl-group button,
  html.pw-clubs .cl-group__more,
  html.pw-clubs .cl-rail input,
  html.pw-clubs .cl-loadmore__btn {
    transition: none !important;
  }

  html.pw-clubs .cl-card:hover {
    transform: none !important;
  }

  html.pw-clubs .cl-card:hover::after {
    transform: none !important;
  }
}


/* ---- Fable glue: the row-enrichment elements injected by enrichClubRows() ----
   Baked per-club data (neighborhood, hours summary, open-day list) rendered into
   the builders' row layout. Desktop: neighborhood inline after the serif name,
   hours in the baseline meta row before the price, the green pill leading it.
   Mobile keeps only the pill - the 88px rows have no room for prose. */
html.pw-clubs .pw-clx-nbhd {
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #8A8175 !important;
  margin-left: 10px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html.pw-clubs .pw-clx-meta {
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #8A8175 !important;
}

html.pw-clubs .pw-clx-open {
  background: #1F8A4D !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

@media (max-width: 767.98px) {
  html.pw-clubs .pw-clx-nbhd,
  html.pw-clubs .pw-clx-meta {
    display: none !important;
  }

  html.pw-clubs .pw-clx-open {
    padding: 2px 8px !important;
    font-size: 10px !important;
  }
}

/* ============================================================================
   PLURAMOUR /clubs - MOBILE LANE (<= 767.98px)   round 2: DESIGN-TARGET.png
   2026-08-16.

   WHAT THIS IS: the phone translation of DESIGN-TARGET.png. The target is a
   cream page carrying a compact serif hero and a single-column list of white
   rows: small thumb left, serif name with the muted place inline beside it,
   quiet meta right, caret. That anatomy survives a 390px screen almost
   unchanged - it only has to get slimmer and lose the columns the phone has no
   room for. My previous lane already had the row anatomy; this one keeps its
   proven parts (the 60x60 per-city gradient jewel, the name in ink on white)
   and re-proportions everything else to the target: slimmer rows (~88px),
   name + city on ONE line, meta right-aligned and vertically centred, a caret,
   borderless cards with a soft shadow floating on a cream ground.

   LANE RULES OBSERVED
   - ONE @media (max-width: 767.98px) block. Nothing outside it.
   - Every selector scoped html.pw-clubs; every declaration !important.
   - No _ngcontent attributes. No class names beyond DOM-REFERENCE.md plus the
     two injected hero classes (.pw-clx-hero / .pw-clx-sub); element and
     structural selectors only elsewhere.
   - MUST BE CONCATENATED AFTER desktop2.css. Same selector shape, same
     specificity, so source order decides. If it lands first the desktop lane's
     tile geometry wins and this block vanishes.
   - Written to be self-sufficient: it does not assume which base rules
     desktop2.css leaves reaching below 768px, so every property this row's
     shape depends on is stated here rather than inherited.
   ========================================================================== */

@media (max-width: 767.98px) {

  /* ---- 1. page ground ---------------------------------------------------- */

  /* The target's list floats on cream, not on white. Desktop's 262px rail +
     1fr split is collapsed: on a phone the rail is the Filters sheet, so the
     list owns the width. Grid is restated (not just its columns) so the single
     column holds whatever display desktop2 chose. Bottom padding is the tab
     bar clearance - unchanged from the shipped lane. */
  html.pw-clubs .cl-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    background: #F4EFE7 !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* A row list stays a row list: one column at every phone and small-tablet
     width. No auto-fill - the target's row is full-bleed by design, and two
     half-width rows at 720px would put the name back in a 130px column.
     The ink rule under the header is drawn HERE, on the grid's top edge, and
     not on .cl-results: verified live, .cl-results is a WRAPPER around
     .cl-results__head + .cl-grid + .cl-loadmore, not the header line. */
  html.pw-clubs .cl-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    /* the target rules its sections off with a full ink line, not a hairline */
    border-top: 1px solid #1A1714 !important;
    padding-top: 14px !important;
    align-items: stretch !important;
  }


  /* ---- 2. the hero band -------------------------------------------------- */
  /* .cl-controls is the only band above the list, so it plays the target's
     cream hero: heading, sub, then the search field full width, then the two
     controls. If desktop2 injects the H1/sub, they are styled here for small
     screens; if it does not, the band is still a hero-shaped cream block. */

  html.pw-clubs .cl-controls {
    background: #FBF7F0 !important;
    border-bottom: 1px solid #E7DECF !important;
  }

  html.pw-clubs .cl-controls__row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 16px 16px 16px !important;
  }

  /* Compact hero line. 30px is the largest size at which "The clubs, city by
     city." still sets on two lines at 320px. flex-basis is stated in case the
     injection lands inside .cl-controls__row (it is inert if the heading is a
     child of .cl-controls instead); horizontal padding is deliberately NOT set
     here, so whichever parent it lands in keeps supplying the page gutter. */
  html.pw-clubs .pw-clx-hero {
    flex: 1 0 100% !important;
    margin: 0 0 5px !important;
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 30px !important;
    line-height: 1.03 !important;
    letter-spacing: -0.015em !important;
    color: #1A1714 !important;
  }

  /* The accent half of the headline is an <i> in the target's markup; reached
     as an element, since the injected accent class is not mine to name. */
  html.pw-clubs .pw-clx-hero i,
  html.pw-clubs .pw-clx-hero em {
    font-style: italic !important;
    color: #DC4A3D !important;
  }

  /* Insurance, not layout: if the injection lands as a direct child of
     .cl-controls instead of inside the row, it is outside the row's padding and
     would sit flush against the screen edge. These two rules only match in that
     placement, so they are inert in the other. */
  html.pw-clubs .cl-controls > .pw-clx-hero {
    padding: 16px 16px 0 !important;
  }

  html.pw-clubs .cl-controls > .pw-clx-sub {
    padding: 0 16px !important;
  }

  html.pw-clubs .pw-clx-sub {
    flex: 1 0 100% !important;
    margin: 0 0 12px !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    color: #8A8175 !important;
  }

  /* The target's search is a soft-cornered rectangle, not a pill - the one
     radius on the page that is neither card nor pill. Full width on its own
     line. */
  html.pw-clubs .cl-search {
    flex: 1 0 100% !important;
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 15px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    border: 1px solid #E7DECF !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(26, 23, 20, 0.04) !important;
  }

  html.pw-clubs .cl-search svg {
    flex: 0 0 auto !important;
    width: 17px !important;
    height: 17px !important;
    color: #8A8175 !important;
    stroke: #8A8175 !important;
  }

  /* 16px is the floor that stops iOS zooming the page on focus. */
  html.pw-clubs .cl-search input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: #1A1714 !important;
  }

  html.pw-clubs .cl-search input::placeholder {
    color: #A79D8E !important;
    opacity: 1 !important;
  }

  /* Sort pill. Takes the slack so it can never push the Filters trigger to a
     third line. */
  html.pw-clubs .cl-sort {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  html.pw-clubs .cl-sort__btn {
    display: flex !important;
    width: 100% !important;
    max-width: 230px !important;
    min-height: 40px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid #E2D8C6 !important;
    background: #FFFFFF !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1A1714 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.pw-clubs .cl-sort__caret {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    color: #8A8175 !important;
  }

  /* Map view is withdrawn and the app's own JS hides its button, which leaves a
     lone "Grid" switch that switches nothing. On a phone that costs a whole
     control line for no function. (If map view returns, delete this one rule -
     nothing else here refers to the toggle.) */
  html.pw-clubs .cl-toggle {
    display: none !important;
  }

  /* The Filters trigger - the phone's whole answer to the target's country
     sidebar, together with the sheet it opens. Its class is not in
     DOM-REFERENCE.md so it is reached structurally: it is the only button that
     is a DIRECT child of the controls row (sort and toggle sit inside their own
     wrappers). Styling only; the sheet's mechanics are untouched. */
  html.pw-clubs .cl-controls__row > button {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 7px !important;
    margin-left: auto !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid #DCD0BC !important;
    background: #FFFFFF !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1A1714 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(26, 23, 20, 0.05) !important;
  }

  html.pw-clubs .cl-controls__row > button svg {
    flex: 0 0 auto !important;
    stroke: #DC4A3D !important;
  }

  html.pw-clubs .cl-controls__row > button[aria-expanded="true"] {
    border-color: #DC4A3D !important;
    background: #FDF3F2 !important;
  }


  /* ---- 3. list header ---------------------------------------------------- */
  /* Plays the target's "Browse by country." line: serif count, tracked micro
     label opposite, full ink rule beneath (drawn on .cl-grid above). Reached
     by descendant selectors only - the header line's own class
     (.cl-results__head) is not in DOM-REFERENCE.md, so it is not mine to use,
     and it already lays itself out flex/space-between. */

  html.pw-clubs .cl-results h1 {
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.012em !important;
    color: #1A1714 !important;
    margin: 0 !important;
  }

  html.pw-clubs .cl-results__sub {
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.17em !important;
    text-transform: uppercase !important;
    color: #8A8175 !important;
    white-space: nowrap !important;
  }

  /* The target marks its tracked city labels with a short gold dash. The phone
     has no city sections to mark, so the one gold moment moves here - it is the
     same idiom on the one tracked label the phone does have. */
  html.pw-clubs .cl-results__sub::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 1px !important;
    margin: 0 8px 3px 0 !important;
    vertical-align: middle !important;
    background: #BD9444 !important;
  }


  /* ---- 4. the row -------------------------------------------------------- */
  /* Target anatomy, phone proportions:
       [ 60x60 jewel ][ serif name + muted city inline ][ price ][ caret ]
     ~88px tall, white, borderless, soft shadow on cream. */

  /* Radius, ground and shadow are desktop2's exact values: the two lanes are
     one design and a row should not change material at 768px. */
  html.pw-clubs .cl-card {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    box-sizing: border-box !important;
    gap: 10px !important;
    min-height: 88px !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow:
      0 1px 2px rgba(26, 23, 20, 0.05),
      0 10px 22px -18px rgba(26, 15, 10, 0.50) !important;
    overflow: hidden !important;
    color: inherit !important;
    text-decoration: none !important;
    transform: none !important;
    transition: background-color 0.18s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* The target's row ends in a caret. Same chevron, same data-URI, same opacity
     as the desktop lane's, sized down and set as the row's last flex child, so
     it needs no wrapper and no absolute positioning. Delete this one block and
     the row loses the chevron and nothing else. */
  html.pw-clubs .cl-card::after {
    content: "" !important;
    position: static !important;
    flex: 0 0 auto !important;
    order: 9 !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 0 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 0.55 !important;
    box-shadow: none !important;
    transform: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8175' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    pointer-events: none !important;
  }

  /* Touch keeps :hover stuck after a tap - neutralise any lift the desktop lane
     adds and give a real press state instead. */
  html.pw-clubs .cl-card:hover {
    transform: none !important;
    border: 0 !important;
    box-shadow:
      0 1px 2px rgba(26, 23, 20, 0.05),
      0 10px 22px -18px rgba(26, 15, 10, 0.50) !important;
  }

  html.pw-clubs .cl-card:active {
    background: #FBF7F0 !important;
  }

  /* Owner directive: no venue has submitted a photo, so no card shows one. The
     veil / candlelight / watermark layers existed to make cream type readable
     over a picture; with the name in ink on white they have nothing to do. */
  html.pw-clubs .cl-card__photo,
  html.pw-clubs .cl-card__wash,
  html.pw-clubs .cl-card__scrim {
    display: none !important;
  }

  /* The tile stops being a picture frame and becomes the row's text column: the
     inline per-city gradient (the only honest, data-driven art left) is re-laid
     as a 60x60 jewel on the leading edge, and the type sits beside it on the
     card's own white. background-position/-size are !important, which beats the
     inline `background:` shorthand, so the data is re-laid, never rewritten. */
  html.pw-clubs .cl-card__tile {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    align-content: center !important;
    gap: 3px 8px !important;
    height: auto !important;
    min-height: 60px !important;
    /* the desktop lane's thumb is a landscape box; an aspect-ratio left standing
       would re-inflate this tile to the width of the row */
    aspect-ratio: auto !important;
    /* 60px jewel + 12px gutter */
    padding: 0 0 0 72px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    /* origin pinned to the padding box, or the 72px text indent would push the
       jewel off its own edge */
    background-origin: padding-box !important;
    background-clip: border-box !important;
    background-position: 0 50% !important;
    background-size: 60px 60px !important;
    isolation: isolate !important;
  }

  /* Rounds the jewel without new DOM: a card-coloured mask with a rounded
     window, held inside the tile by its overflow. Cheap, and if it ever failed
     the only loss is square corners on the jewel. desktop2 does this same job
     with the .cl-card__wash span; I keep it on the tile's own pseudo, which
     always exists, and hide the spans - same look, different insurance. */
  html.pw-clubs .cl-card__tile::before {
    content: "" !important;
    position: absolute !important;
    inset: auto !important;
    left: 0 !important;
    top: 50% !important;
    z-index: 1 !important;
    width: 60px !important;
    height: 60px !important;
    margin: -30px 0 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: none !important;
    box-shadow:
      0 0 0 420px #FFFFFF,
      inset 0 0 0 1px rgba(26, 23, 20, 0.10) !important;
    pointer-events: none !important;
  }

  /* The jewel's own surface: city gradients were authored to sit UNDER a photo,
     so they run dark, and a light-to-dark rake gives the two colours some
     depth at 60px. Same gradient the desktop lane rakes its 104x68 thumb with,
     so one swatch does not change character at 768px. */
  html.pw-clubs .cl-card__tile::after {
    content: "" !important;
    position: absolute !important;
    inset: auto !important;
    left: 0 !important;
    top: 50% !important;
    z-index: 1 !important;
    width: 60px !important;
    height: 60px !important;
    margin: -30px 0 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(
      152deg,
      rgba(255, 246, 236, 0.14) 0%,
      rgba(26, 15, 10, 0.10) 48%,
      rgba(26, 15, 10, 0.26) 100%
    ) !important;
    pointer-events: none !important;
  }

  /* Both were absolutely positioned over the photo; they now flow, above the
     mask, and share one baseline. Order puts the name first and the city after
     it, which is the target's reading order (the DOM's is the reverse). */
  html.pw-clubs .cl-card__city,
  html.pw-clubs .cl-card__nameblock {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    transform: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.pw-clubs .cl-card__nameblock {
    order: 1 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    width: auto !important;
    text-align: left !important;
  }

  /* The row's one loud thing. Clamped at two lines so a long name cannot break
     the list's rhythm. */
  html.pw-clubs .cl-card__name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 19px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    color: #1A1714 !important;
    text-shadow: none !important;
  }

  /* The target's rows carry no rule under the name; at 88px there is no room
     for one either. The gold moves to the list header's tracked label. */
  html.pw-clubs .cl-card__hair {
    display: none !important;
  }

  /* Muted place, inline beside the name exactly as the target sets its
     neighbourhood - sentence case, not a tracked eyebrow. It wraps to its own
     line only when the name has taken the width.
     display:block, not inline-flex: text-overflow cannot be relied on to
     ellipsize the anonymous item a flex box makes of this span's text, and the
     city names include "Burnaby (Metro Vancouver)". The flag stays inline. */
  html.pw-clubs .cl-card__city {
    order: 2 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.3 !important;
    color: #8A8175 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.pw-clubs .cl-card__flag {
    display: inline !important;
    width: 16px !important;
    height: auto !important;
    margin: 0 6px 0 0 !important;
    border-radius: 2px !important;
    vertical-align: -2px !important;
    box-shadow: 0 0 0 1px rgba(26, 23, 20, 0.12) !important;
  }

  /* Right meta, vertically centred: the price tier, which is the only per-row
     fact the target puts there that our data actually has (its hours and its
     "Open tonight" pill are T2 - not in this DOM). */
  html.pw-clubs .cl-card__body {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    max-width: 38% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    text-align: right !important;
  }

  html.pw-clubs .cl-card__row {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  /* The flag beside the city already carries the country, and the target's rows
     carry no country either - so the row spends its right-hand width on the
     name instead of repeating it. Country is still on the club page and is
     still a facet in the Filters sheet. */
  html.pw-clubs .cl-card__country {
    display: none !important;
  }

  html.pw-clubs .cl-card__rating {
    flex: 0 0 auto !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    color: #4A4038 !important;
    white-space: nowrap !important;
  }

  /* Nothing precedes the price now, so any separator the desktop lane hangs
     here has nothing to separate. */
  html.pw-clubs .cl-card__rating::before {
    content: none !important;
  }

  /* The target's row is name / place / meta / caret - no tags. On a 390px row a
     single "Membership required" pill is 120px wide and takes half the name's
     column with it, so the tags come off the phone row. They stay reachable as
     facets in the Filters sheet and in full on the club page. To put one back,
     delete this rule and give .cl-card__chips a 100% flex-basis - rows grow to
     ~110px. */
  html.pw-clubs .cl-card__chips {
    display: none !important;
  }


  /* ---- 5. the Filters sheet ---------------------------------------------- */
  /* The target's country sidebar has no phone equivalent that this DOM can
     honour (country grouping is T2), so the sheet the app already opens is the
     sidebar. Typography and tap targets only - no rule touches the sheet's box
     or its display, so its open/close mechanics are exactly as authored. */

  html.pw-clubs .cl-rail__head {
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.008em !important;
    color: #1A1714 !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    /* the same ink rule the desktop lane runs under its sidebar head */
    border-bottom: 1px solid #1A1714 !important;
  }

  html.pw-clubs .cl-group__label {
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #8A8175 !important;
  }

  /* 40px rows: the facet list is the phone's browse-by-city control, so it has
     to be tappable, not just readable. */
  html.pw-clubs .cl-rail label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 40px !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.3 !important;
    color: #1A1714 !important;
  }

  html.pw-clubs .cl-rail input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: #DC4A3D !important;
  }

  /* Same iOS-zoom floor as the main search: the sheet's city filter is a text
     input and focusing it must not zoom the page either. */
  html.pw-clubs .cl-rail input[type="search"],
  html.pw-clubs .cl-rail input[type="text"] {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    border: 1px solid #E7DECF !important;
    background: #FFFFFF !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 16px !important;
    color: #1A1714 !important;
  }

  /* "Show all 93 cities" is a block-level button, so its red underline runs the
     full sheet width. width:fit-content trims the underline to the words
     WITHOUT touching `display` - setting display here would drag legitimately
     hidden instances of this button back onto the page. */
  html.pw-clubs .cl-group__more {
    width: fit-content !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #DC4A3D !important;
  }


  /* ---- 6. load more ------------------------------------------------------ */

  html.pw-clubs .cl-loadmore__btn {
    display: block !important;
    width: 100% !important;
    max-width: 340px !important;
    min-height: 48px !important;
    margin: 18px auto 0 !important;
    padding: 13px 22px !important;
    border-radius: 999px !important;
    border: 1px solid #DFD3BF !important;
    background: #FFFFFF !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #1A1714 !important;
    box-shadow: 0 1px 2px rgba(26, 23, 20, 0.05) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html.pw-clubs .cl-loadmore__btn:active {
    background: #FBF7F0 !important;
    border-color: #DC4A3D !important;
  }
}


/* ============================================================================
   PLURAMOUR /clubs - COUNTRY -> CITY MASTER-DETAIL DIRECTORY   directory.css
   Styling for the DOM built by directory.js.

   This is a TRANSCRIPTION of handoff_clubs_directory/"Pluramour Clubs
   Directory.dc.html" + snippets.html: every value below is copied from the
   mock's inline styles, not re-derived. Where the mock and snippets.html
   agree, that value is used verbatim.

   Lane rules
     - every selector under html.pw-clubs, every declaration !important
     - our own class names only (pw-clx-*), no _ngcontent selectors
     - DESKTOP lane: section 0 (standing app suppression) is unscoped by
       width; everything else sits inside @media (min-width: 768px). The
       phone lane belongs to the mobile builder, exactly as desktop2.css /
       mobile2.css split it.
     - the only transition in the file is the chevron's transform 0.15s,
       per "NO other animations anywhere".

   Tokens: paper #F4EFE7 . ink #1A1714 . body muted #5a544a . meta #8A8175
           faint #A89C8B . line #E7DECF . faint line #F2EBDF . coral #DC4A3D
           gold #BD9444 . pill idle #EFE8DC . card warm #FBF7F0 . tint #FBF3EC
           open-tonight rgba(31,122,77,0.95) . dashed #D9CDB8
   ========================================================================== */


/* --- 0. The compiled list stands down ------------------------------------ */
/* directory.js puts .pw-clx-on on <html> as soon as the directory is in the
   page. The app's grid, its "Load more" and its filter rail stop competing;
   .cl-body's two-column split collapses so the directory owns the width. */

html.pw-clubs.pw-clx-on .cl-grid,
html.pw-clubs.pw-clx-on .cl-loadmore,
html.pw-clubs.pw-clx-on .cl-rail,
html.pw-clubs.pw-clx-on .cl-results__head {
  display: none !important;
}

html.pw-clubs.pw-clx-on .cl-body {
  display: block !important;
}

html.pw-clubs.pw-clx-on .cl-results {
  min-width: 0 !important;
}


@media (min-width: 768px) {

  /* --- 1. Root + section header ----------------------------------------- */

  html.pw-clubs .pw-clx-dir {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1A1714 !important;
    font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
  }

  html.pw-clubs .pw-clx-dir *,
  html.pw-clubs .pw-clx-dir *:before,
  html.pw-clubs .pw-clx-dir *:after {
    box-sizing: border-box !important;
  }

  html.pw-clubs .pw-clx-head {
    display: flex !important;
    align-items: baseline !important;
    gap: 16px !important;
    margin: 0 0 24px !important;
    padding: 0 0 12px !important;
    border-bottom: 2px solid #1A1714 !important;
  }

  html.pw-clubs .pw-clx-title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-size: 38px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #1A1714 !important;
  }

  html.pw-clubs .pw-clx-title i {
    font-style: italic !important;
    font-weight: 400 !important;
    color: #DC4A3D !important;
  }


  /* --- 2. Master-detail split ------------------------------------------- */

  html.pw-clubs .pw-clx-grid {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
  }


  /* --- 3. Sidebar: countries -------------------------------------------- */

  html.pw-clubs .pw-clx-side {
    position: sticky !important;
    top: 84px !important;
    align-self: start !important;
    max-height: calc(100vh - 110px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #E7DECF !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    scrollbar-width: thin !important;
    scrollbar-color: #E0D5C2 transparent !important;
  }

  html.pw-clubs .pw-clx-cblock {
    display: block !important;
    border-bottom: 1px solid #F2EBDF !important;
  }

  html.pw-clubs .pw-clx-crow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 17px !important;
    border: 0 !important;
    border-right: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
    font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif !important;
    font-size: 16px !important;
    line-height: normal !important;
    color: #1A1714 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  html.pw-clubs .pw-clx-crow:hover {
    background: #FBF3EC !important;
  }

  html.pw-clubs .pw-clx-crow.is-sel {
    background: #FBF3EC !important;
    border-right-color: #DC4A3D !important;
  }

  html.pw-clubs .pw-clx-cleft {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  html.pw-clubs .pw-clx-cflag {
    flex-shrink: 0 !important;
    display: block !important;
    width: 21px !important;
    height: 14px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    object-fit: cover !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
  }

  html.pw-clubs .pw-clx-cname {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #1A1714 !important;
  }

  html.pw-clubs .pw-clx-crow.is-sel .pw-clx-cname {
    font-weight: 700 !important;
    color: #DC4A3D !important;
  }

  html.pw-clubs .pw-clx-chev {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    line-height: normal !important;
    color: #A89C8B !important;
    transform: rotate(0deg) !important;
    transition: transform 0.15s !important;
  }

  html.pw-clubs .pw-clx-crow.is-sel .pw-clx-chev {
    transform: rotate(180deg) !important;
  }

  /* 3a. City list of the selected country. */

  html.pw-clubs .pw-clx-cities {
    display: block !important;
    padding: 2px 0 8px !important;
  }

  html.pw-clubs .pw-clx-city {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 17px 7px 48px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
    font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif !important;
    font-size: 16px !important;
    line-height: normal !important;
    color: #1A1714 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  html.pw-clubs .pw-clx-city:hover {
    background: #FBF3EC !important;
  }

  html.pw-clubs .pw-clx-cityname {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    color: #5a544a !important;
  }

  html.pw-clubs .pw-clx-city.is-sel .pw-clx-cityname {
    font-weight: 700 !important;
    color: #DC4A3D !important;
  }

  /* Counts are pill bubbles. Never text. */
  html.pw-clubs .pw-clx-bubble {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 21px !important;
    height: 21px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: #EFE8DC !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    color: #8A8175 !important;
  }

  html.pw-clubs .pw-clx-city.is-sel .pw-clx-bubble {
    background: #DC4A3D !important;
    color: #FFFFFF !important;
  }


  /* --- 4. Detail panel head + city group -------------------------------- */

  html.pw-clubs .pw-clx-detail {
    min-width: 0 !important;
  }

  html.pw-clubs .pw-clx-dhead {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    margin: 0 0 6px !important;
    padding: 0 0 12px !important;
    border-bottom: 2px solid #1A1714 !important;
  }

  html.pw-clubs .pw-clx-dflag {
    display: block !important;
    align-self: center !important;
    flex-shrink: 0 !important;
    width: 26px !important;
    height: 18px !important;
    margin: 0 !important;
    border-radius: 2.5px !important;
    object-fit: cover !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
  }

  html.pw-clubs .pw-clx-dname {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #1A1714 !important;
  }

  html.pw-clubs .pw-clx-group {
    display: block !important;
    margin: 22px 0 0 !important;
    scroll-margin-top: 96px !important;
  }

  html.pw-clubs .pw-clx-ghead {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 10px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid #E7DECF !important;
  }

  html.pw-clubs .pw-clx-glabel {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #8A8175 !important;
  }

  html.pw-clubs .pw-clx-dash {
    flex-shrink: 0 !important;
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: #BD9444 !important;
  }

  html.pw-clubs .pw-clx-guide {
    flex-shrink: 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #DC4A3D !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  html.pw-clubs .pw-clx-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }


  /* --- 5. Club card: collapsed row -------------------------------------- */

  html.pw-clubs .pw-clx-card {
    overflow: hidden !important;
    border: 1px solid #E7DECF !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04),
                0 14px 30px -26px rgba(0, 0, 0, 0.4) !important;
  }

  html.pw-clubs .pw-clx-card.is-open {
    border-color: #DC4A3D !important;
  }

  html.pw-clubs .pw-clx-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
    font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif !important;
    font-size: 16px !important;
    line-height: normal !important;
    color: #1A1714 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  html.pw-clubs .pw-clx-row:hover {
    background: #FBF7F0 !important;
  }

  /* 5a. Duotone. No venue has ever submitted a photo, so the <img> layer of
     the handoff recipe is simply absent: per-club gradient + multiply tone +
     grain. Never a gray placeholder, never a stock image. */

  html.pw-clubs .pw-clx-thumb {
    position: relative !important;
    flex-shrink: 0 !important;
    display: block !important;
    width: 92px !important;
    height: 60px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  html.pw-clubs .pw-clx-tone,
  html.pw-clubs .pw-clx-grain,
  html.pw-clubs .pw-clx-scrim {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    pointer-events: none !important;
  }

  html.pw-clubs .pw-clx-tone {
    mix-blend-mode: multiply !important;
  }

  html.pw-clubs .pw-clx-grain {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    background-size: 140px 140px !important;
    mix-blend-mode: screen !important;
    opacity: 0.10 !important;
  }

  /* the banner is 3.5x the thumb's area: the same tile at the same strength
     would read as noise, so it sits back a stop */
  html.pw-clubs .pw-clx-banner .pw-clx-grain {
    opacity: 0.08 !important;
  }

  html.pw-clubs .pw-clx-scrim {
    background: linear-gradient(to bottom, rgba(12, 6, 8, 0.5),
                transparent 50%, rgba(12, 6, 8, 0.35)) !important;
  }

  html.pw-clubs .pw-clx-idb {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  html.pw-clubs .pw-clx-idline {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  html.pw-clubs .pw-clx-name {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    color: #1A1714 !important;
  }

  html.pw-clubs .pw-clx-area {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    color: #8A8175 !important;
  }

  html.pw-clubs .pw-clx-open {
    flex-shrink: 0 !important;
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(31, 122, 77, 0.95) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
  }

  html.pw-clubs .pw-clx-meta {
    flex-shrink: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    color: #8A8175 !important;
    white-space: nowrap !important;
  }

  html.pw-clubs .pw-clx-rchev {
    font-size: 12px !important;
  }

  html.pw-clubs .pw-clx-card.is-open .pw-clx-rchev {
    transform: rotate(180deg) !important;
  }


  /* --- 6. Club card: expanded ------------------------------------------- */

  html.pw-clubs .pw-clx-exp {
    display: block !important;
    border-top: 1px solid #F2EBDF !important;
  }

  html.pw-clubs .pw-clx-banner {
    position: relative !important;
    display: block !important;
    height: 210px !important;
    overflow: hidden !important;
  }

  html.pw-clubs .pw-clx-bannerin {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
  }

  html.pw-clubs .pw-clx-bname {
    display: block !important;
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-size: 44px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #F6ECE2 !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55) !important;
  }

  html.pw-clubs .pw-clx-hair {
    display: block !important;
    width: 38px !important;
    height: 1px !important;
    margin: 13px auto 0 !important;
    background: rgba(246, 236, 226, 0.55) !important;
  }

  html.pw-clubs .pw-clx-facts {
    display: block !important;
    padding: 18px 20px !important;
    background: #FBF7F0 !important;
  }

  html.pw-clubs .pw-clx-grid4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }

  html.pw-clubs .pw-clx-flabel {
    margin: 0 0 5px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #8A8175 !important;
  }

  html.pw-clubs .pw-clx-fval {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #1A1714 !important;
  }

  html.pw-clubs .pw-clx-contact {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 22px !important;
    margin: 15px 0 0 !important;
    padding: 13px 0 0 !important;
    border-top: 1px solid #F2EBDF !important;
    font-size: 13px !important;
    line-height: normal !important;
    color: #5a544a !important;
  }

  html.pw-clubs .pw-clx-addr,
  html.pw-clubs .pw-clx-web {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  html.pw-clubs .pw-clx-web {
    font-weight: 600 !important;
    color: #1A1714 !important;
    text-decoration: none !important;
  }

  html.pw-clubs .pw-clx-ico {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  html.pw-clubs .pw-clx-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 14px 0 0 !important;
  }

  html.pw-clubs .pw-clx-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  html.pw-clubs .pw-clx-tag {
    padding: 3px 10px !important;
    border: 1px solid #E7DECF !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    color: #3a342c !important;
    white-space: nowrap !important;
  }

  html.pw-clubs .pw-clx-full {
    margin-left: auto !important;
    padding: 9px 20px !important;
    border-radius: 999px !important;
    background: #DC4A3D !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }


  /* --- 7. Empty state + suggest band ------------------------------------ */

  html.pw-clubs .pw-clx-empty {
    margin: 20px 0 0 !important;
    padding: 26px 30px !important;
    border: 1.5px dashed #D9CDB8 !important;
    border-radius: 14px !important;
    background: #FBF7F0 !important;
    font-size: 14.5px !important;
    line-height: normal !important;
    color: #5a544a !important;
  }

  html.pw-clubs .pw-clx-empty a {
    color: #DC4A3D !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  html.pw-clubs .pw-clx-band {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    margin: 70px 0 0 !important;
    padding: 34px 38px !important;
    border: 1.5px dashed #D9CDB8 !important;
    border-radius: 18px !important;
    background: #FBF7F0 !important;
  }

  html.pw-clubs .pw-clx-bandh {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #1A1714 !important;
  }

  html.pw-clubs .pw-clx-bandp {
    max-width: 460px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #5a544a !important;
  }

  html.pw-clubs .pw-clx-cta {
    display: inline-block !important;
    padding: 12px 26px !important;
    border-radius: 999px !important;
    background: #DC4A3D !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
}


/* ---- Fable: page chrome to the handoff's values (2026-08-16) ----------------
   The directory component matches the mock; the chrome around it did not. These
   override desktop2's hero/search rules with the spec's literals (README §2) and
   remove the two controls the design does not have. Last in the desktop cascade,
   equal specificity, so these win. */
@media (min-width: 768px) {
  html.pw-clubs .pw-clx-hero {
    font-size: 54px !important;
    line-height: 1.02 !important;
  }

  html.pw-clubs .pw-clx-sub {
    font-size: 16px !important;
    color: #5a544a !important;
  }

  html.pw-clubs .cl-search {
    border-radius: 13px !important;
    border: 1px solid #E7DECF !important;
    box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.35) !important;
    background: #FFFFFF !important;
  }

  /* "No region chips, no counts, no facet filters" - the sort menu and the
     grid/map toggle are not in the design, and the toggle's Map twin is already
     withdrawn. The directory replaces what they acted on. */
  html.pw-clubs .cl-sort,
  html.pw-clubs .cl-toggle {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  html.pw-clubs .cl-sort,
  html.pw-clubs .cl-toggle {
    display: none !important;
  }
}

/* ============================================================================
   PLURAMOUR /clubs — MOBILE lane. One @media block, nothing outside it.
   Concatenate AFTER directory.css (same selector shape, same specificity, so
   source order decides) and after the app's own clubs CSS, which carries a
   max-width:767.98px block of its own.

   Pairs with directory-mobile.js, which builds #pw-clxm (the three-level
   accordion) below 768px and removes it above. Values are copied from
   "Pluramour Clubs Mobile.dc.html" and snippets.html §6; the three places this
   file departs from them are marked TAP-TARGET / DEVIATION and explained in
   directory-mobile-rationale.md.
   ========================================================================== */

@media (max-width: 767.98px) {

  /* --- 1 · what the design removes from the shipped page ------------------ */

  /* The compiled list, the facet rail, the pagination and the sort/view
     controls are all absent from the design; .cl-results__head is the only
     "284 clubs" text on the page and counts may exist only as bubbles. */
  html.pw-clubs .cl-grid,
  html.pw-clubs .cl-loadmore,
  html.pw-clubs .cl-loadmore__btn,
  html.pw-clubs .cl-rail,
  html.pw-clubs .cl-row,
  html.pw-clubs .cl-results__head,
  html.pw-clubs .cl-sort,
  html.pw-clubs .cl-toggle {
    display: none !important;
  }

  /* The desktop two-pane directory in full: below 768px #pw-clxm replaces it. */
  html.pw-clubs #pw-clx-dir {
    display: none !important;
  }

  /* --- 2 · page ground and bottom-nav clearance -------------------------- */

  html.pw-clubs body {
    background: #F4EFE7 !important;
  }

  html.pw-clubs .cl-body {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 96px !important;   /* the shipped fixed tab bar sits here */
  }

  /* --- 3 · header band: H1, subline, search card ------------------------- */

  html.pw-clubs .cl-controls {
    background: #F4EFE7 !important;
    border-bottom: 0 !important;
    padding: 22px 18px 4px !important;
  }

  html.pw-clubs .cl-controls__row {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  html.pw-clubs .pw-clx-hero {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #1A1714 !important;
    margin: 0 0 6px !important;
  }

  html.pw-clubs .pw-clx-hero i,
  html.pw-clubs .pw-clx-hero em {
    font-style: italic !important;
    color: #DC4A3D !important;
  }

  html.pw-clubs .pw-clx-sub {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #5a544a !important;
    margin: 0 0 14px !important;
  }

  html.pw-clubs .cl-search {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    background: #FFFFFF !important;
    border: 1px solid #E7DECF !important;
    border-radius: 12px !important;
    padding: 11px 14px !important;
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.3) !important;
  }

  html.pw-clubs .cl-search svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    stroke: #8A8175 !important;
  }

  html.pw-clubs .cl-search input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
    font-size: 14.5px !important;
    color: #1A1714 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* --- 4 · accordion root ------------------------------------------------ */

  html.pw-clubs .pw-clx-mroot {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 16px 18px 26px !important;
    margin: 0 !important;
    font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
    font-size: 14px !important;          /* .cl-results sets 34px on the real
                                            page; nothing here may inherit it */
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-transform: none !important;     /* the only tracked, uppercased type
                                            in this tree is the detail label */
    text-indent: 0 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    white-space: normal !important;
    color: #1A1714 !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /* Every accordion header is a button; the app's button chrome must not
     survive into it. */
  html.pw-clubs .pw-clx-mctry-hd,
  html.pw-clubs .pw-clx-mcity-hd,
  html.pw-clubs .pw-clx-mclub-hd {
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #1A1714 !important;
    font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: rgba(220, 74, 61, 0.12) !important;
  }

  /* --- 5 · level 1 · country card ---------------------------------------- */

  html.pw-clubs .pw-clx-mctry {
    background: #FFFFFF !important;
    border: 1px solid #E7DECF !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 12px 26px -24px rgba(0, 0, 0, 0.4) !important;
  }

  html.pw-clubs .pw-clx-mctry.is-open {
    border-color: #DC4A3D !important;
  }

  html.pw-clubs .pw-clx-mctry-hd {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    min-height: 50px !important;
  }

  html.pw-clubs .pw-clx-mctry-l {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
  }

  html.pw-clubs .pw-clx-mflag {
    width: 23px !important;
    height: 16px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  html.pw-clubs .pw-clx-mctry-nm {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #1A1714 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.pw-clubs .pw-clx-mctry.is-open .pw-clx-mctry-nm {
    font-weight: 700 !important;
    color: #DC4A3D !important;
  }

  html.pw-clubs .pw-clx-mctry-r {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    flex-shrink: 0 !important;
  }

  /* --- 6 · count bubbles (§5) — counts appear nowhere else --------------- */

  html.pw-clubs .pw-clx-mcount {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: #EFE8DC !important;
    color: #8A8175 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  /* Child combinator, not descendant: the country's coral bubble must not
     reach the city bubbles nested inside the open country. */
  html.pw-clubs .pw-clx-mctry.is-open > .pw-clx-mctry-hd .pw-clx-mcount {
    background: #DC4A3D !important;
    color: #FFFFFF !important;
  }

  html.pw-clubs .pw-clx-mcount--city {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    background: #EFE8DC !important;
    color: #8A8175 !important;
  }

  html.pw-clubs .pw-clx-mcity.is-open > .pw-clx-mcity-hd .pw-clx-mcount--city {
    background: #BD9444 !important;
    color: #FFFFFF !important;
  }

  /* --- 7 · chevrons ------------------------------------------------------ */

  html.pw-clubs .pw-clx-mchev {
    display: block !important;
    font-size: 11px !important;
    line-height: 1 !important;
    color: #A89C8B !important;
    flex-shrink: 0 !important;
    transform: rotate(0deg) !important;
    transition: transform 0.15s !important;
  }

  html.pw-clubs .pw-clx-mchev--city {
    font-size: 10px !important;
  }

  html.pw-clubs .pw-clx-mctry.is-open > .pw-clx-mctry-hd .pw-clx-mchev,
  html.pw-clubs .pw-clx-mcity.is-open > .pw-clx-mcity-hd .pw-clx-mchev,
  html.pw-clubs .pw-clx-mclub.is-open > .pw-clx-mclub-hd .pw-clx-mchev {
    transform: rotate(180deg) !important;
  }

  /* --- 8 · level 2 · city row -------------------------------------------- */

  html.pw-clubs .pw-clx-mcities {
    border-top: 1px solid #F2EBDF !important;
    padding: 6px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  html.pw-clubs .pw-clx-mcity {
    border: 1px solid #EDE5D8 !important;
    border-radius: 12px !important;
    background: #FDFBF7 !important;
    overflow: hidden !important;
  }

  html.pw-clubs .pw-clx-mcity.is-open {
    border-color: #E0C9A0 !important;
  }

  html.pw-clubs .pw-clx-mcity-hd {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 11px 13px !important;
    min-height: 44px !important;   /* TAP-TARGET: mock computes 42px */
  }

  html.pw-clubs .pw-clx-mcity-l {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  html.pw-clubs .pw-clx-mdash {
    width: 15px !important;
    height: 2px !important;
    background: #BD9444 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  html.pw-clubs .pw-clx-mcity-nm {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #5a544a !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.pw-clubs .pw-clx-mcity.is-open .pw-clx-mcity-nm {
    font-weight: 700 !important;
    color: #1A1714 !important;
  }

  html.pw-clubs .pw-clx-mcity-r {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  html.pw-clubs .pw-clx-mclubs {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 2px 9px 10px !important;
  }

  /* --- 9 · level 3 · club row -------------------------------------------- */

  html.pw-clubs .pw-clx-mclub {
    border: 1px solid #EDE5D8 !important;
    border-radius: 13px !important;
    background: #FDFBF7 !important;
    overflow: hidden !important;
  }

  html.pw-clubs .pw-clx-mclub.is-open {
    border-color: #DC4A3D !important;
  }

  html.pw-clubs .pw-clx-mclub-hd {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    min-height: 66px !important;
  }

  /* --- 10 · duotone (§4) — gradient + grain, never a photo, never gray ---
     Layer 1 is the multiply overlay, layer 2 the base gradient; both arrive as
     one inline background-image from the record's g index, and the blend mode
     lives here. ::after is the grain. No <img> layer exists because no venue
     has ever submitted a photo. */

  html.pw-clubs .pw-clx-mthumb,
  html.pw-clubs .pw-clx-mbanner {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    background-color: #2c1a10 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply, normal !important;
  }

  html.pw-clubs .pw-clx-mthumb::after,
  html.pw-clubs .pw-clx-mbanner::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0.09 !important;
    mix-blend-mode: screen !important;   /* overlay is invisible on a near-black base */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E") !important;
    background-size: 140px 140px !important;
    background-repeat: repeat !important;
  }

  html.pw-clubs .pw-clx-mthumb {
    width: 62px !important;
    height: 46px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  html.pw-clubs .pw-clx-mclub-id {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
  }

  html.pw-clubs .pw-clx-mclub-nm {
    display: block !important;
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    color: #1A1714 !important;
    overflow-wrap: break-word !important;
  }

  html.pw-clubs .pw-clx-mclub-when {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #8A8175 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* "Open tonight" on a collapsed row is a plain dot (§6). */
  html.pw-clubs .pw-clx-mdot {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #1f7a4d !important;
    flex-shrink: 0 !important;
  }

  /* --- 11 · expanded club card ------------------------------------------- */

  html.pw-clubs .pw-clx-mopen {
    display: block !important;
    border-top: 1px solid #F2EBDF !important;
  }

  html.pw-clubs .pw-clx-mbanner {
    height: 150px !important;
    border-radius: 0 !important;
  }

  /* Banner-only scrim, under the grain and under the type. */
  html.pw-clubs .pw-clx-mbanner::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom, rgba(12, 6, 8, 0.5), transparent 50%, rgba(12, 6, 8, 0.35)) !important;
  }

  html.pw-clubs .pw-clx-mbanner-in {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
    display: block !important;
    z-index: 2 !important;
  }

  html.pw-clubs .pw-clx-mbanner-nm {
    display: block !important;
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    color: #F6ECE2 !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55) !important;
  }

  html.pw-clubs .pw-clx-mhair {
    display: block !important;
    width: 32px !important;
    height: 1px !important;
    background: rgba(246, 236, 226, 0.55) !important;
    margin: 10px auto 0 !important;
  }

  html.pw-clubs .pw-clx-mtonight {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    background: rgba(31, 122, 77, 0.95) !important;
    border-radius: 999px !important;
    padding: 4px 9px !important;
    white-space: nowrap !important;
  }

  html.pw-clubs .pw-clx-mdetail {
    background: #FBF7F0 !important;
    padding: 14px 15px !important;
  }

  html.pw-clubs .pw-clx-mgrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 13px !important;
  }

  html.pw-clubs .pw-clx-mfield {
    min-width: 0 !important;
  }

  html.pw-clubs .pw-clx-mlabel {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #8A8175 !important;
    margin-bottom: 3px !important;
  }

  html.pw-clubs .pw-clx-mval {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #1A1714 !important;
    overflow-wrap: break-word !important;
  }

  html.pw-clubs .pw-clx-mmeta {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
    padding-top: 11px !important;
    border-top: 1px solid #F2EBDF !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #5a544a !important;
  }

  /* A club with no entry/nights/dress/pricing at all starts on the address
     row, and then that row must not carry a rule above nothing. */
  html.pw-clubs .pw-clx-mdetail > .pw-clx-mmeta:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  html.pw-clubs .pw-clx-maddr,
  html.pw-clubs .pw-clx-mweb {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  html.pw-clubs .pw-clx-mweb {
    position: relative !important;
    font-weight: 600 !important;
    color: #1A1714 !important;
    text-decoration: none !important;
  }

  /* TAP-TARGET: the design draws this link at 12px inline (~17px tall). The
     hit area is grown to 44px with a pseudo element so the drawn row keeps the
     mock's proportions exactly. */
  html.pw-clubs .pw-clx-mweb::after {
    content: '' !important;
    position: absolute !important;
    top: -14px !important;
    right: -6px !important;
    bottom: -14px !important;
    left: -6px !important;
  }

  /* …and the CTA below it stays on top of that grown area. */
  html.pw-clubs .pw-clx-mfull {
    position: relative !important;
    z-index: 1 !important;
  }

  html.pw-clubs .pw-clx-micon {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

  html.pw-clubs .pw-clx-mfull {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;    /* TAP-TARGET: padding alone gives 39px */
    margin-top: 13px !important;
    padding: 11px !important;
    border-radius: 999px !important;
    background: #DC4A3D !important;
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  /* --- 12 · empty state (§3c) -------------------------------------------- */

  html.pw-clubs .pw-clx-mempty {
    border: 1.5px dashed #D9CDB8 !important;
    border-radius: 13px !important;
    background: #FBF7F0 !important;
    padding: 20px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #5a544a !important;
  }

  html.pw-clubs .pw-clx-mlink {
    color: #DC4A3D !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  /* --- 13 · suggest-a-club band (§9), stacked for the phone -------------- */

  html.pw-clubs .pw-clx-mband {
    border: 1.5px dashed #D9CDB8 !important;
    border-radius: 18px !important;
    background: #FBF7F0 !important;
    padding: 22px 20px !important;
    margin-top: 12px !important;
  }

  html.pw-clubs .pw-clx-mbandh {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    color: #1A1714 !important;
    margin: 0 0 8px !important;
  }

  html.pw-clubs .pw-clx-mbandp {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #5a544a !important;
    margin: 0 0 16px !important;
  }

  html.pw-clubs .pw-clx-mcta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 12px 26px !important;
    border-radius: 999px !important;
    background: #DC4A3D !important;
    color: #FFFFFF !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

}

/* ---- Fable: give the directory the full content width ----------------------
   Hiding .cl-rail takes it out of .cl-body's `262px 1fr` grid, so .cl-results
   inherits the RAIL's 262px column and the directory renders as a narrow strip
   (measured 262x7034 at 1440). The directory carries its own sidebar, so the
   parent grid must become a single column whenever the directory is mounted. */
html.pw-clubs.pw-clx-on .cl-body {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

html.pw-clubs.pw-clx-on .cl-results {
  width: auto !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
}

/* ==== No submitted photo means NO photo block (Juan, 2026-08-17) =============
   A gradient tile where a picture should be is still a placeholder. Zero of 289
   venues have submitted an image, so the thumbnail and the expanded banner are
   removed outright - on both breakpoints - and the rows become type-led. The
   duotone recipe stays in the stylesheet above, unused, ready for the day a
   venue actually sends a photo. */
html.pw-clubs .pw-clx-thumb,
html.pw-clubs .pw-clx-banner,
html.pw-clubs .pw-clx-mthumb,
html.pw-clubs .pw-clx-mbanner {
  display: none !important;
}

/* The row was a flex line with the thumb first; without it the text needs the
   thumb's former left inset back so names do not sit on the card edge. */
html.pw-clubs .pw-clx-row {
  padding-left: 20px !important;
  min-height: 62px !important;
}

/* The expanded card opened with the banner; its top edge now needs the padding
   the banner used to supply. */
html.pw-clubs .pw-clx-facts {
  padding-top: 18px !important;
}

/* Contracted default: the detail panel's invitation to pick a country. */
html.pw-clubs .pw-clx-hint {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 220px !important;
  padding: 40px 24px !important;
}

html.pw-clubs .pw-clx-hintline {
  margin: 0 !important;
  font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #8A8175 !important;
  text-align: center !important;
}

@media (max-width: 767.98px) {
  html.pw-clubs .pw-clx-mrow,
  html.pw-clubs .pw-clx-mclub {
    padding-left: 16px !important;
  }

  html.pw-clubs .pw-clx-hint {
    min-height: 0 !important;
    padding: 20px 16px !important;
  }

  html.pw-clubs .pw-clx-hintline {
    font-size: 18px !important;
  }
}

/* ---- World view spacing (nothing selected = every country) ----------------- */
html.pw-clubs .pw-clx-wblock + .pw-clx-wblock {
  margin-top: 46px !important;
}

/* The sidebar is taller than a single country block but shorter than the world,
   so it must not stretch the page; it scrolls itself and sticks. */
html.pw-clubs .pw-clx-world {
  min-height: 0 !important;
}

/* ---- Contracted-row actions: address, Google maps, website ------------------
   The row itself is a <button>; these sit beneath it inside the card so the
   anchors are real links and never swallow the row's expand click. */
html.pw-clubs .pw-clx-acts {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px 14px !important;
  padding: 0 20px 13px 20px !important;
  margin: -6px 0 0 !important;
}

html.pw-clubs .pw-clx-addr {
  font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif !important;
  font-size: 12.5px !important;
  color: #8A8175 !important;
  margin-right: 2px !important;
}

html.pw-clubs .pw-clx-act {
  font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #DC4A3D !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(220, 74, 61, 0.32) !important;
  padding-bottom: 1px !important;
}

html.pw-clubs .pw-clx-act:hover {
  border-bottom-color: #DC4A3D !important;
}

@media (max-width: 767.98px) {
  html.pw-clubs .pw-clx-acts {
    padding: 0 16px 12px 16px !important;
    gap: 4px 12px !important;
  }

  html.pw-clubs .pw-clx-addr,
  html.pw-clubs .pw-clx-act {
    font-size: 12px !important;
  }
}

/* ==== DELTA 2026-08-17: collapsed header + region-grouped sidebar ============ */
@media (min-width: 768px) {
  /* 1. Header band tightens and centres; H1 down to 44px, subline gone. */
  html.pw-clubs .cl-controls__row:has(.pw-clx-hero) {
    align-items: center !important;
    padding: 30px 40px 24px !important;
  }

  html.pw-clubs .pw-clx-hero {
    font-size: 44px !important;
    line-height: 1.04 !important;
  }

  html.pw-clubs #pw-clx-dir {
    margin-top: 26px !important;
  }
}

html.pw-clubs .pw-clx-sub {
  display: none !important;
}

/* 2. Region header rows. */
html.pw-clubs .pw-clx-rhead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 17px 9px !important;
  background: #FBF7F0 !important;
  border: 0 !important;
  border-bottom: 1px solid #F2EBDF !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif !important;
}

html.pw-clubs .pw-clx-rname {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #A89C8B !important;
}

html.pw-clubs .pw-clx-rhead.is-open .pw-clx-rname {
  color: #1A1714 !important;
}

html.pw-clubs .pw-clx-rhead:hover .pw-clx-rname {
  color: #1A1714 !important;
}

html.pw-clubs .pw-clx-rright {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

html.pw-clubs .pw-clx-rbubble {
  min-width: 20px !important;
  height: 20px !important;
  background: #EFE8DC !important;
  color: #8A8175 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

html.pw-clubs .pw-clx-rhead .pw-clx-chev {
  font-size: 10px !important;
  color: #A89C8B !important;
  transition: transform 0.15s ease !important;
}

html.pw-clubs .pw-clx-rhead.is-open .pw-clx-chev {
  transform: rotate(180deg) !important;
}

/* 2b. Country rows tighten to 10px now that the regions carry the rhythm. */
html.pw-clubs .pw-clx-crow {
  padding: 10px 17px !important;
}

/* 4. Country names must never ellipsize - sub-pixel rounding was clipping
   "Germany" to "Germa…" once the count bubbles left the row. */
html.pw-clubs .pw-clx-cname {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  max-width: none !important;
}

/* ---- Bubbles count CLUBS (Juan, 2026-08-17) --------------------------------
   Region bubble = clubs in the region; country rows gain their own club total.
   The delta had region=country-count and no country bubble; this supersedes it. */
html.pw-clubs .pw-clx-cright {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex: 0 0 auto !important;
}

html.pw-clubs .pw-clx-cbubble {
  min-width: 21px !important;
  height: 21px !important;
  background: #EFE8DC !important;
  color: #8A8175 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

html.pw-clubs .pw-clx-crow.is-sel .pw-clx-cbubble {
  background: #DC4A3D !important;
  color: #FFFFFF !important;
}

/* ==== Day filter chips + smaller hero (Juan, 2026-08-18) ==================== */
html.pw-clubs .pw-clx-days {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 20px !important;
}

html.pw-clubs .pw-clx-dayslabel {
  font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #8A8175 !important;
  margin-right: 4px !important;
}

html.pw-clubs .pw-clx-day {
  font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A1714 !important;
  background: #FFFFFF !important;
  border: 1px solid #E7DECF !important;
  border-radius: 999px !important;
  padding: 7px 15px !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

html.pw-clubs .pw-clx-day:hover {
  border-color: #DC4A3D !important;
  color: #DC4A3D !important;
}

html.pw-clubs .pw-clx-day.is-on {
  background: #DC4A3D !important;
  border-color: #DC4A3D !important;
  color: #FFFFFF !important;
}

html.pw-clubs .pw-clx-dayclear {
  font-family: "Hanken Grotesk", "Helvetica Neue", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #8A8175 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 7px 4px !important;
  cursor: pointer !important;
  text-decoration: underline !important;
}

/* The header band shrinks again: the directory is the page, and the masthead was
   still spending 100px+ before the first country. */
@media (min-width: 768px) {
  html.pw-clubs .cl-controls__row:has(.pw-clx-hero) {
    padding: 18px 40px 16px !important;
  }

  html.pw-clubs .pw-clx-hero {
    font-size: 32px !important;
    line-height: 1.05 !important;
  }

  html.pw-clubs #pw-clx-dir {
    margin-top: 18px !important;
  }
}

@media (max-width: 767.98px) {
  html.pw-clubs .pw-clx-days {
    gap: 6px !important;
    margin-bottom: 14px !important;
  }

  html.pw-clubs .pw-clx-day {
    font-size: 12px !important;
    padding: 6px 11px !important;
  }

  html.pw-clubs .pw-clx-hero {
    font-size: 26px !important;
  }
}

/* The Angular app's own active-filter chip (.cl-active, holding “query” ✕) still
   renders inside .cl-results even though the directory below it is entirely ours.
   With the original results list replaced, the chip is orphaned and lands at the
   very bottom of the page - under the "Know a club we're missing?" band - so typing
   a club name made the query text appear at the foot of the page. The search box
   already shows the query and clears it, so the chip has no job here. */
html.pw-clubs .cl-active {
  display: none !important;
}

/* ==== Club review in the expanded card (Juan, 2026-08-21) ================== */
/* Sits between the banner and the fact grid: the prose explains the venue, the cells
   answer specifics. Measure is capped because a 900px line of body copy is tiring, and
   the serif face marks it as editorial rather than as another data field. */
html.pw-clubs .pw-clx-review {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 14.5px !important;
  line-height: 1.62 !important;
  color: #3A332C !important;
  margin: 0 !important;
  padding: 16px 22px 0 !important;
  max-width: 78ch !important;
  text-wrap: pretty;
}

@media (max-width: 767.98px) {
  html.pw-clubs .pw-clx-review {
    font-size: 13.5px !important;
    line-height: 1.58 !important;
    padding: 13px 16px 0 !important;
  }
}

/* ==== Top navigation (Juan, 2026-08-22) ==================================== */
/* The bar was fine structurally - fixed, blurred, correctly aligned - but the current
   page was signalled by colour alone, which is both the weakest possible indicator and
   invisible to anyone who cannot separate the red from the brown. Give the active item a
   rule under it, and give every item a hover that previews the same mark. */
.st-appbar__nav a,
.st-appbar a:not(.st-appbar__brand) {
  position: relative !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .005em !important;
  color: #4A4038 !important;
  padding-bottom: 3px !important;
  transition: color .16s ease !important;
}

.st-appbar__nav a::after,
.st-appbar a:not(.st-appbar__brand)::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -3px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1) !important;
}

.st-appbar__nav a:hover,
.st-appbar a:not(.st-appbar__brand):hover { color: #1A1714 !important; }

.st-appbar__nav a:hover::after,
.st-appbar a:not(.st-appbar__brand):hover::after { transform: scaleX(.55) !important; }

.st-appbar__nav a.is-active,
.st-appbar a.is-active:not(.st-appbar__brand) { color: #DC4A3D !important; }

.st-appbar__nav a.is-active::after,
.st-appbar a.is-active:not(.st-appbar__brand)::after { transform: scaleX(1) !important; }

/* Keyboard users get the same affordance as the mouse, which the original bar gave
   neither. */
.st-appbar__nav a:focus-visible,
.st-appbar a:not(.st-appbar__brand):focus-visible {
  outline: 2px solid rgba(220, 74, 61, .55) !important;
  outline-offset: 4px !important;
  border-radius: 3px !important;
}

/* ==== Resorts directory (Juan, 2026-08-22) ================================= */
/* Deliberately the clubs directory's clothes: same rail width, same row rhythm, same
   chevron and expanded panel. Two directories on one site should not teach two idioms. */
.pw-rsx-wrap {
  display: grid !important;
  grid-template-columns: 268px minmax(0, 1fr) !important;
  gap: 26px !important;
  align-items: start !important;
  margin-top: 6px !important;
}

.pw-rsx-side {
  background: #fff !important;
  border: 1px solid #E7DECF !important;
  border-radius: 14px !important;
  padding: 6px !important;
  position: sticky !important;
  top: 84px !important;
  max-height: calc(100svh - 104px) !important;
  overflow-y: auto !important;
}

.pw-rsx-count,
.pw-rsx-region {
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: #8A8175 !important;
}
.pw-rsx-count { padding: 12px 14px 10px !important; }
.pw-rsx-region {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 13px 14px 7px !important; border-top: 1px solid #F1EBE1 !important; margin-top: 4px !important;
}

.pw-rsx-item {
  display: flex !important; align-items: center !important; gap: 9px !important;
  width: 100% !important; background: none !important; border: 0 !important;
  border-radius: 9px !important; padding: 8px 14px !important; cursor: pointer !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important; font-size: 14px !important;
  color: #1A1714 !important; text-align: left !important;
}
.pw-rsx-item:hover { background: #FAF7F2 !important; }
.pw-rsx-item.is-on { background: #FDF0EE !important; color: #B93A2E !important; font-weight: 600 !important; }
.pw-rsx-cname { flex: 1 !important; }
.pw-rsx-flag { width: 19px !important; height: auto !important; border-radius: 2px !important; display: block !important; }
.pw-rsx-ccount, .pw-rsx-rcount, .pw-rsx-gcount {
  font-variant-numeric: tabular-nums !important; font-size: 12px !important; color: #8A8175 !important;
  background: #F3EFE7 !important; border-radius: 999px !important; padding: 2px 9px !important;
}
.pw-rsx-item.is-on .pw-rsx-ccount { background: #F7DCD8 !important; color: #B93A2E !important; }

.pw-rsx-group { margin-bottom: 26px !important; }
.pw-rsx-ghead {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 0 2px 10px !important;
}
.pw-rsx-gname {
  font-family: "Fraunces", Georgia, serif !important; font-size: 21px !important; color: #1A1714 !important;
}

/* A row is the unit of scanning: name, where, and the two chips that decide whether to
   read further. Everything else waits for the expand. */
.pw-rsx-card {
  background: #fff !important; border: 1px solid #E7DECF !important;
  border-radius: 13px !important; margin-bottom: 9px !important; overflow: hidden !important;
}
.pw-rsx-card.is-open { border-color: #DC4A3D !important; box-shadow: 0 6px 26px -14px rgba(26,23,20,.4) !important; }

.pw-rsx-row {
  display: flex !important; align-items: center !important; gap: 14px !important;
  width: 100% !important; background: none !important; border: 0 !important;
  padding: 15px 18px !important; cursor: pointer !important; text-align: left !important;
}
.pw-rsx-idb { flex: 1 !important; min-width: 0 !important; display: flex !important; align-items: baseline !important; gap: 11px !important; flex-wrap: wrap !important; }
.pw-rsx-name { font-family: "Fraunces", Georgia, serif !important; font-size: 19px !important; color: #1A1714 !important; }
.pw-rsx-where { font-family: "Hanken Grotesk", sans-serif !important; font-size: 13px !important; color: #8A8175 !important; }
.pw-rsx-meta { display: flex !important; gap: 7px !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
.pw-rsx-chip {
  font-family: "Hanken Grotesk", sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important;
  color: #6B6257 !important; background: #F3EFE7 !important; border-radius: 999px !important; padding: 4px 10px !important; white-space: nowrap !important;
}
.pw-rsx-chip--who { background: #FDF0EE !important; color: #B93A2E !important; }
.pw-rsx-chev { color: #8A8175 !important; font-size: 13px !important; transition: transform .18s ease !important; }
.pw-rsx-card.is-open .pw-rsx-chev { transform: rotate(180deg) !important; }

.pw-rsx-exp { border-top: 1px solid #F1EBE1 !important; padding: 16px 18px 15px !important; }
.pw-rsx-blurb {
  font-family: "Fraunces", Georgia, serif !important; font-size: 14.5px !important; line-height: 1.6 !important;
  color: #3A332C !important; margin: 0 0 14px !important; max-width: 78ch !important;
}
.pw-rsx-facts { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 14px !important; margin-bottom: 13px !important; }
.pw-rsx-flabel {
  font-family: "Hanken Grotesk", sans-serif !important; font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important; color: #8A8175 !important; margin-bottom: 3px !important;
}
.pw-rsx-fval { font-family: "Hanken Grotesk", sans-serif !important; font-size: 13.5px !important; color: #1A1714 !important; }
.pw-rsx-ams { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 13px !important; }
.pw-rsx-am {
  font-family: "Hanken Grotesk", sans-serif !important; font-size: 11.5px !important; color: #6B6257 !important;
  border: 1px solid #E7DECF !important; border-radius: 999px !important; padding: 3px 9px !important;
}
.pw-rsx-bottom { display: flex !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important; }
.pw-rsx-addr { font-family: "Hanken Grotesk", sans-serif !important; font-size: 12.5px !important; color: #8A8175 !important; }
.pw-rsx-web { font-family: "Hanken Grotesk", sans-serif !important; font-size: 13px !important; color: #B93A2E !important; text-decoration: underline !important; }
.pw-rsx-full {
  margin-left: auto !important; font-family: "Hanken Grotesk", sans-serif !important; font-size: 13px !important;
  font-weight: 600 !important; color: #fff !important; background: #DC4A3D !important;
  border-radius: 999px !important; padding: 8px 16px !important; text-decoration: none !important;
}

@media (max-width: 900px) {
  .pw-rsx-wrap { grid-template-columns: 1fr !important; gap: 14px !important; }
  .pw-rsx-side { position: static !important; max-height: none !important; }
  .pw-rsx-meta { justify-content: flex-start !important; }
}

/* ==== Resort profile hero (Juan, 2026-08-22) =============================== */
/* 560px of cover before a single fact, on a page people open to check a policy or a rate.
   Halved, with the title scaled to match - the image is context, not the content.

   A MINIMUM, not a fixed height. The first version set `height: 300px; max-height: 300px`
   and the cover centres its content, so on a resort whose title wraps to two lines the
   344px inner block overflowed a 300px box by 22px at each end and slid the "All resorts"
   link up underneath the app bar, where it was unclickable. A hero can be short; it cannot
   be shorter than what is written in it. */
.st-rd__cover {
  height: auto !important;
  min-height: 300px !important;
  max-height: none !important;
}
.st-rd__cover-img,
.st-rd__cover-scrim {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
}

@media (max-width: 767.98px) {
  .st-rd__cover { min-height: 220px !important; }
}

/* ==== Club profile: one page, facts first (Juan, 2026-08-23) =============== */
.pw-cp { margin-top: 4px !important; }

/* The description carries the page; set in the display serif at reading measure. */
.pw-cp-about {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 16px !important;
  line-height: 1.66 !important;
  color: #3A332C !important;
  max-width: 72ch !important;
  margin: 0 0 22px !important;
  text-wrap: pretty;
}

/* Facts as a grid rather than a list: a reader scanning for "who gets in" should find it
   without reading a paragraph. */
.pw-cp-facts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
  gap: 18px 26px !important;
  padding: 18px 0 !important;
  border-top: 1px solid #E7DECF !important;
  border-bottom: 1px solid #E7DECF !important;
  margin-bottom: 18px !important;
}

.pw-cp-flabel {
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: #8A8175 !important;
  margin-bottom: 4px !important;
}

.pw-cp-fval {
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  color: #1A1714 !important;
}

.pw-cp-tags { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; margin-bottom: 20px !important; }
.pw-cp-tag {
  font-family: "Hanken Grotesk", sans-serif !important;
  font-size: 12px !important;
  color: #6B6257 !important;
  background: #F3EFE7 !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
}

.pw-cp-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 18px !important; }
.pw-cp-link {
  font-family: "Hanken Grotesk", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #B93A2E !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.pw-cp-link--back { margin-left: auto !important; color: #6B6257 !important; text-decoration: none !important; }

@media (max-width: 767.98px) {
  .pw-cp-about { font-size: 15px !important; }
  .pw-cp-facts { gap: 14px 18px !important; }
  .pw-cp-link--back { margin-left: 0 !important; }
}

/* Stacked resort sections, with the rhythm the tabs used to hide. */
.pw-rd-stack { display: block !important; }
.pw-rd-sec { padding: 26px 0 !important; border-top: 1px solid #E7DECF !important; }
.pw-rd-sec:first-child { border-top: 0 !important; padding-top: 6px !important; }
.pw-rd-h {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 23px !important;
  color: #1A1714 !important;
  margin: 0 0 14px !important;
}

/* Resort profile sections, rendered from /assets/resorts-profile.json because the app's
   own tabs are inert. The type scale matches .st-rd__h2 / .st-rd__prose so the appended
   sections read as part of the page rather than as something bolted on. */
.pw-rd-h3 {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 16px !important;
  letter-spacing: .01em !important;
  color: #4A2130 !important;
  margin: 20px 0 6px !important;
}
.pw-rd-sec > .pw-rd-h3:first-of-type { margin-top: 0 !important; }
.pw-rd-p {
  font-size: 15px !important;
  line-height: 1.62 !important;
  color: #3A342E !important;
  margin: 0 0 10px !important;
}
.pw-rd-note {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #8A8078 !important;
  margin: 10px 0 0 !important;
}
.pw-rd-rooms, .pw-rd-am, .pw-rd-src { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.pw-rd-rooms { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 18px !important; }
.pw-rd-room {
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  padding: 12px 14px !important; border: 1px solid #E7DECF !important; border-radius: 12px !important;
  background: #FCF8F1 !important;
}
.pw-rd-roomn { font-size: 14.5px !important; font-weight: 600 !important; color: #1A1714 !important; }
.pw-rd-rooms2 { font-size: 12.5px !important; color: #8A8078 !important; }
/* Amenities are a scan-list, not prose: two columns of short phrases with a quiet marker. */
.pw-rd-am { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 22px !important; }
.pw-rd-amitem {
  position: relative !important; padding-left: 16px !important;
  font-size: 14.5px !important; line-height: 1.5 !important; color: #3A342E !important;
}
.pw-rd-amitem::before {
  content: "" !important; position: absolute !important; left: 0 !important; top: 9px !important;
  width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #C2564B !important;
}
.pw-rd-src { display: flex !important; flex-wrap: wrap !important; gap: 8px 10px !important; }
.pw-rd-srclink {
  display: inline-block !important; padding: 5px 11px !important;
  border: 1px solid #E7DECF !important; border-radius: 999px !important;
  font-size: 12.5px !important; color: #6B625A !important; text-decoration: none !important;
  max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.pw-rd-srclink:hover { border-color: #C2564B !important; color: #4A2130 !important; }
@media (max-width: 720px) {
  .pw-rd-rooms, .pw-rd-am { grid-template-columns: 1fr !important; }
}