/* ─────────────────────────────────────────────────────────────
   Beaulieu Padel — editorial site styles
   Canvas #ffffff · Ink #022344 · Sand #C9BCAB · Taupe #A19785
   Teal #39C0BB (rare small accents only)
   Prata (display serif) + Inter (body/UI)

   ONE SCALE, ONE RHYTHM, ONE RADIUS FAMILY.
   Every size, space, radius, hairline and easing below comes from a
   token. If you are about to type a raw px value in a component,
   check the token block first — it is almost certainly already there.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── palette ─────────────────────────────────────────────── */
  --ink: #022344;
  --ink-hover: #0a3a63;
  --sand: #C9BCAB;
  --taupe: #A19785;
  --teal: #39C0BB;
  --paper: #ffffff;
  --paper-2: #FBFAF8;

  /* ink at readable strengths — use these, not ad-hoc rgba() */
  --ink-body: rgba(2, 35, 68, .84);   /* paragraphs */
  --ink-meta: rgba(2, 35, 68, .62);   /* meta, captions, footnotes */
  --ink-faint: rgba(2, 35, 68, .45);  /* placeholders, disabled */

  /* on navy */
  --paper-body: rgba(255, 255, 255, .84);
  --paper-meta: rgba(255, 255, 255, .64);

  /* ── hairlines — one weight, one hover weight ────────────── */
  --line: rgba(2, 35, 68, .10);
  --line-2: rgba(2, 35, 68, .18);       /* hover / active edge only */
  --line-light: rgba(255, 255, 255, .16);
  --line-light-2: rgba(255, 255, 255, .30);
  /* legacy alias — kept so nothing breaks; do not use on new work */
  --line-strong: var(--line-2);

  /* ── elevation — a shadow REPLACES a border, never both ──── */
  --e1: 0 1px 2px rgba(2, 35, 68, .05);
  --e2: 0 14px 34px -18px rgba(2, 35, 68, .28);
  --e3: 0 30px 70px -30px rgba(2, 35, 68, .45);

  /* ── type ────────────────────────────────────────────────── */
  --serif: 'Prata', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-display:  clamp(2.55rem, 5vw, 4.05rem);   /* homepage hero h1 only */
  --t-page:     clamp(2.05rem, 3.6vw, 3.0rem);  /* every interior h1     */
  --t-section:  clamp(1.7rem, 2.7vw, 2.25rem);  /* every section h2      */
  --t-sub:      clamp(1.4rem, 2vw, 1.65rem);    /* sub-section h2        */
  --t-card:     1.3125rem;                      /* 21 — card / row title */
  --t-card-sm:  1.125rem;                       /* 18 — dense card title */
  --t-lede:     1.09375rem;                     /* 17.5 — lede + article */
  --t-body:     1rem;                           /* 16                    */
  --t-meta:     .90625rem;                      /* 14.5                  */
  --t-micro:    .84375rem;                      /* 13.5                  */
  --t-label:    .6875rem;                       /* 11 — THE label size   */

  --lh-tight: 1.16;
  --lh-title: 1.3;
  --lh-body: 1.65;
  --lh-read: 1.75;

  /* ── space — 4pt ─────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --s-section: 96px;          /* the one vertical rhythm unit */
  --s-head: 44px;             /* section-head → content       */
  --measure: 700px;           /* article / reading column     */

  /* ── radii — four steps, nothing else ────────────────────── */
  --r-xs: 4px;    /* pills, badges, dots-with-corners */
  --r-sm: 8px;    /* buttons, inputs, chips           */
  --r-md: 12px;   /* media, cards, thumbs             */
  --r-lg: 16px;   /* hero-scale media, feature lead   */
  --r-pill: 999px;

  /* ── motion — calm, one easing ───────────────────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, .84, .32, 1);
  --fast: 150ms;
  --base: 180ms;
  --slow: 200ms;
  --t: var(--base) var(--ease);

  --tap: 44px;    /* minimum interactive height */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: .005em;
  text-wrap: balance;
}
h3 { line-height: var(--lh-title); }

p { text-wrap: pretty; }

/* Every figure — price, time, count, date — aligns. */
.num, .p-figure, .plan-price, .chip-num, .ev-price, .t-replies,
.price-table td, .thumb-cal-d { font-variant-numeric: tabular-nums; }

::selection { background: var(--sand); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.site-head :focus-visible,
.hero :focus-visible,
.page-band :focus-visible,
.photo-band :focus-visible,
.section--navy :focus-visible { outline-color: var(--sand); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 26px; }
.wrap-narrow { max-width: calc(var(--measure) + 52px); margin: 0 auto; padding: 0 26px; }
@media (max-width: 560px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
}

/* ── Small uppercase labels — ONE size, ONE tracking ───────── */
.kicker,
.card-eyebrow,
.card-foot,
.section-link,
.back-link,
.ev-date,
.g-level,
.plan-name,
.plan-per,
.st-meta,
.t-meta,
.foot-col h4,
.foot-base,
.ed-figure figcaption,
.form label,
.price-table th {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kicker {
  color: var(--taupe);
  display: block;
  margin-bottom: var(--s-3);
}
.kicker--ink { color: var(--ink); opacity: .72; }
.kicker--sand { color: var(--sand); }

/* ── Buttons ────────────────────────────────────────────────
   One shape, three tiers. Always ≥44px so a thumb can hit it. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 26px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
.btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn:active { background: #06294c; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Quiet underlined text links (section "All stories", "← Back") */
.section-link,
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--t), border-color var(--t);
}
.section-link {
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 5px;
  min-height: var(--tap);
}
.section-link:hover { border-bottom-color: var(--ink); }
.section-link .ico { transition: transform var(--t); }
.section-link:hover .ico { transform: translateX(2px); }
.section--navy .section-link,
.photo-band .section-link { color: #fff; border-bottom-color: var(--line-light-2); }
.section--navy .section-link:hover,
.photo-band .section-link:hover { border-bottom-color: #fff; }
.back-link { color: var(--taupe); }
.back-link:hover { color: var(--ink); }
.back-link .ico { transition: transform var(--t); }
.back-link:hover .ico { transform: translateX(-2px); }

/* icons: real SVG only, never a unicode glyph */
.ico { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico-lg { width: 20px; height: 20px; }

/* ── Thumbnail — required on every row and card ─────────────
   Real image → <img>. No image → the club B mark on navy.
   It is never absent, and it is never an empty coloured box. */
.thumb {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(148deg, #04355f 0%, #022344 72%);
  display: grid;
  place-items: center;
  color: var(--sand);
}
.thumb > img { width: 100%; height: 100%; object-fit: cover; }
.thumb .thumb-mark {
  width: 54%;
  height: auto;
  opacity: .5;
  filter: brightness(0) invert(1);
}
.thumb .thumb-initials {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  color: var(--sand);
  letter-spacing: .02em;
}
.thumb .ico { width: 22px; height: 22px; color: var(--sand); }
.thumb.round { border-radius: 50%; }
.thumb.sm { width: 42px; height: 42px; }
.thumb.sm .thumb-initials { font-size: 14px; }
.thumb.sm .ico { width: 17px; height: 17px; }
.thumb.lg { width: 68px; height: 68px; }
.thumb.lg .thumb-initials { font-size: 22px; }
/* quiet variant for light surfaces */
.thumb.ghost {
  background: rgba(2, 35, 68, .05);
  border: 1px solid var(--line);
  color: var(--ink);
}
.thumb.ghost .ico { color: var(--ink); opacity: .72; }
.thumb.ghost .thumb-initials { color: var(--ink); opacity: .72; }
.thumb.ghost .thumb-mark { opacity: .3; filter: none; }

/* calendar-style thumb (events) */
.thumb-cal { display: grid; place-items: center; gap: 1px; line-height: 1; }
.thumb-cal-d { font-family: var(--serif); font-size: 20px; color: #fff; }
.thumb-cal-m {
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
}

/* cover-sized fallback (card covers, feature leads, social tiles) */
.cover-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(148deg, #04355f 0%, #022344 72%);
}
.cover-fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 68% 22%, rgba(57, 192, 187, .12), transparent 70%);
}
.cover-fallback img {
  position: relative;
  z-index: 1;
  width: clamp(44px, 22%, 84px);
  height: auto;
  opacity: .34;
  filter: brightness(0) invert(1);
}

/* ── Header ─────────────────────────────────────────────────
   Hairline OR shadow — the border goes when the shadow arrives. */
.site-head {
  background: var(--sand);
  border-bottom: 1px solid rgba(2, 35, 68, .14);
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: visible;
  transition: box-shadow var(--slow) var(--ease), border-color var(--slow) var(--ease);
}
.site-head.scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 10px 30px -18px rgba(2, 35, 68, .5);
}
.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
  position: relative;
  z-index: 2;
}
.brand { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.brand .brand-mark { height: 46px; width: auto; filter: brightness(0) invert(1); }
.brand .brand-word { height: 33px; width: auto; }
/* small corner watermark on interior-page header bands */
.head-wm-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.head-watermark {
  position: absolute;
  right: -26px;
  top: -34px;
  height: 150px;
  width: auto;
  opacity: .08;
  filter: brightness(0) invert(1);
  user-select: none;
}
.nav { display: flex; align-items: center; gap: 26px; }
.nav a:not(.btn) {
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), opacity var(--t);
}
.nav a:not(.btn):hover { border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav .btn { min-height: var(--tap); padding: 0 20px; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: 0 16px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.nav-toggle:hover { border-color: var(--ink); }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sand);
    box-shadow: 0 18px 34px -22px rgba(2, 35, 68, .5);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-2) 26px var(--s-6);
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) {
    min-height: var(--tap);
    width: 100%;
    border-bottom: 1px solid rgba(2, 35, 68, .1);
  }
  .nav a:not(.btn):hover { border-bottom-color: rgba(2, 35, 68, .1); opacity: .62; }
  .nav .btn { margin-top: var(--s-5); min-height: var(--tap); }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(150deg, #022344 0%, #011526 78%);
}
.hero::after {
  /* subtle court-teal glow, permitted as a faint accent */
  content: '';
  position: absolute;
  right: -18%;
  bottom: -34%;
  width: 62%;
  height: 78%;
  background: radial-gradient(closest-side, rgba(57, 192, 187, .16), transparent 72%);
  pointer-events: none;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: kenburns 22s ease alternate infinite;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
.hero-watermark {
  position: absolute;
  right: -7%;
  bottom: -22%;
  height: 118%;
  width: auto;
  opacity: .08;
  filter: brightness(0) invert(1);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(1, 18, 33, .88) 0%, rgba(2, 35, 68, .42) 55%, rgba(2, 35, 68, .40) 100%);
}
/* The kicker is 11px sand on photography, and it sits high in the frame where
   the gradient is weakest — over the bright roof lights it disappeared. A soft
   shadow carries its own scrim without drawing a box around the line. */
.hero .kicker--sand {
  text-shadow: 0 1px 16px rgba(1, 18, 33, .85), 0 1px 4px rgba(1, 18, 33, .65);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 140px;
  padding-bottom: var(--s-10);
}
.hero h1 {
  font-size: var(--t-display);
  max-width: 15em;
  color: #fff;
  margin-bottom: var(--s-6);
}
.hero p.lede {
  font-size: var(--t-lede);
  line-height: var(--lh-body);
  max-width: 34em;
  color: var(--paper-body);
  margin-bottom: var(--s-8);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ── Photo page band (interior page tops) ───────────────────── */
.page-band {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(150deg, #022344, #011526);
  color: #fff;
}
.page-band .band-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-band .band-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(1, 18, 33, .9) 0%, rgba(2, 35, 68, .55) 60%, rgba(2, 35, 68, .4) 100%);
}
.page-band .band-inner { position: relative; z-index: 2; width: 100%; padding-top: 84px; padding-bottom: var(--s-9); }
.page-band h1 { font-size: var(--t-page); max-width: 16em; color: #fff; }
.page-band .lede {
  margin-top: var(--s-5);
  max-width: 40em;
  color: var(--paper-body);
  font-size: var(--t-lede);
  line-height: var(--lh-body);
}

/* ── Photo band section (homepage colour groups) ────────────── */
.photo-band { position: relative; overflow: hidden; color: #fff; background: var(--ink); }
.photo-band .band-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band .band-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(1, 18, 33, .95) 20%, rgba(2, 35, 68, .86) 100%); }
.photo-band > .wrap { position: relative; z-index: 2; }
.photo-band h2 { color: #fff; }
.photo-band .kicker { color: var(--sand); }
.photo-band .price-note { color: var(--paper-meta); }

/* ── Sections — one vertical rhythm ─────────────────────────── */
.section { padding: var(--s-section) 0; }
.section--tight { padding: var(--s-10) 0; }
.section--hairline { border-top: 1px solid var(--line); }
.section--taupe { background: rgba(161, 151, 133, .09); }
.section--navy { background: var(--ink); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: var(--paper-body); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-head);
  flex-wrap: wrap;
}
.section-head h2 { font-size: var(--t-section); }
.section-head .kicker { margin-bottom: var(--s-2); }
.section-head > div { min-width: 0; }

/* the one-line explainer under a section title */
.section-sub {
  margin-top: var(--s-3);
  font-size: var(--t-meta);
  color: var(--ink-meta);
  max-width: 56ch;
}
.section--navy .section-sub,
.photo-band .section-sub { color: var(--paper-meta); }

/* ── Editorial 2-col grid ───────────────────────────────────── */
.ed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-10) 84px;
  align-items: start;
}
.ed-item h2 { font-size: var(--t-sub); margin-bottom: var(--s-4); }
.ed-item p { color: var(--ink-body); max-width: 34em; }
.ed-item p + p { margin-top: var(--s-3); }
.ed-item .facts {
  list-style: none;
  margin-top: var(--s-5);
  columns: 2;
  column-gap: var(--s-8);
}
.ed-item .facts li {
  font-size: var(--t-meta);
  color: var(--ink-body);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
.ed-figure { margin: 0; }
.ed-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}
.ed-figure figcaption {
  margin-top: var(--s-3);
  color: var(--taupe);
  letter-spacing: .13em;
}
.ed-figure--wide { margin-top: var(--s-7); }
.ed-figure--wide img { aspect-ratio: 21 / 9; object-position: center 55%; }

/* Partnership row */
.partner-row {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--s-10);
  align-items: center;
}
.partner-row .ed-figure img { aspect-ratio: 3 / 2; }
.partner-row h2 { font-size: var(--t-sub); margin-bottom: var(--s-4); }
.partner-row p { color: var(--ink-body); max-width: 34em; }
.partner-row p + p { margin-top: var(--s-3); }
@media (max-width: 860px) {
  .partner-row { grid-template-columns: 1fr; gap: var(--s-7); }
  .ed-grid { grid-template-columns: 1fr; gap: var(--s-9); }
  .ed-item .facts { columns: 2; }
  .ed-figure--first-mobile { order: -1; }
}
@media (max-width: 520px) {
  .ed-item .facts { columns: 1; }
}

/* ── What's on — horizontal snap strip ──────────────────────
   Bleeds to the wrap edge so a clipped card reads as "scroll me",
   not as a broken layout. */
.event-strip {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 26px;
  -webkit-overflow-scrolling: touch;
  margin: 0 -26px;
  padding: 0 26px var(--s-3);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
/* the last card fades rather than being chopped — it reads as "scroll me" */
@supports (mask-image: linear-gradient(#000, #000)) {
  @media (min-width: 700px) {
    .event-strip {
      mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%);
    }
  }
}
.event-strip::-webkit-scrollbar { height: 4px; }
.event-strip::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
.event-card {
  scroll-snap-align: start;
  flex: 0 0 min(320px, 80vw);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
.event-card:hover { border-color: var(--line-2); }
.event-card .ev-top { display: flex; align-items: center; gap: var(--s-3); }
.event-card .ev-date { color: var(--taupe); display: block; }
.event-card .ev-name { font-family: var(--serif); font-size: var(--t-card-sm); line-height: var(--lh-title); }
.event-card .ev-meta { font-size: var(--t-meta); color: var(--ink-meta); }
.event-card .ev-price {
  margin-top: auto;
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.events-empty { padding: var(--s-7) 0; }
@media (max-width: 560px) {
  .event-strip { margin: 0 -20px; padding-left: 20px; padding-right: 20px; scroll-padding-left: 20px; }
}

/* ── Colour groups — gapped cards, not a bordered table ─────── */
/* Seven groups, not four — the club's real count. Seven divides into no tidy
   grid, so the tiers below are chosen to keep the last row from stranding a
   single card: 7 across, then 4+3, then 3+3+1, then 2s. */
.groups {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-3);
}
.group-card {
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.group-card h3 { color: var(--ink); font-size: var(--t-card); margin-bottom: 2px; }
.group-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-bottom: var(--s-4); }
/* Crystal is a pale group on a white card — it needs an edge or it reads as a
   missing dot rather than a light one. */
.group-dot--pale { box-shadow: inset 0 0 0 1px rgba(2, 35, 68, .28); }
.group-card .g-level { color: var(--taupe); display: block; margin-bottom: var(--s-3); }
.group-card p { font-size: var(--t-meta); color: var(--ink-body); flex: 1; }
.group-card .g-when {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink);
  flex: 0 0 auto;
}
@media (max-width: 1100px) { .groups { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .groups { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .groups { grid-template-columns: 1fr 1fr; } }

/* ── Pricing ────────────────────────────────────────────────── */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th {
  color: var(--taupe);
  text-align: left;
  padding: 0 var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--line-2);
}
.price-table th:last-child, .price-table td:last-child { padding-right: 0; }
.price-table td {
  padding: var(--s-5) var(--s-4) var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
  font-size: var(--t-body);
}
.price-table td.p-figure { font-family: var(--serif); font-size: 23px; white-space: nowrap; }
.price-table .p-unit {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--taupe);
  letter-spacing: 0;
  text-transform: none;
}
.price-note { margin-top: var(--s-5); font-size: var(--t-meta); color: var(--ink-meta); max-width: 60ch; }
.table-title { font-size: var(--t-card); margin: var(--s-9) 0 var(--s-5); }
/* Rate tables: the figure column sits right, so the money lines up. */
.price-table--rates th:last-child,
.price-table--rates td:last-child { text-align: right; }
.price-table--rates .p-unit { display: inline-block; margin-left: 6px; }
/* ── The generated rate tables on a phone ──────────────────────────────────
   MEASURED IN A BROWSER AT 375px, 2026-08-11. The model table is four columns
   and its narrowest possible width is 493px, so it pushed the WHOLE PAGE 118px
   sideways — body, main, the Pricing section and its wrapper — which is the
   kind of overflow `document.scrollWidth` cannot see and a per-element walk
   can (CLAUDE.md).

   Two half-fixes were tried and both traded one defect for another: letting the
   table scroll inside its own box put every price off the right-hand edge, and
   letting it squeeze back to 375 put one word on each line of every
   description. So on a phone the rows STACK — the same answer the dashboard's
   own card tables give, with the column heading printed above each figure so a
   value is never orphaned from what it means.

   Scoped to `--rates`, which is only the three tables `pnpm ratecard:build`
   generates. The hand-typed pricing tables above them are untouched. */
.p-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .p-scroll { overflow-x: visible; }
  .price-table--rates,
  .price-table--rates tbody,
  .price-table--rates tr,
  .price-table--rates td { display: block; width: auto; }
  /* The heading row goes, and each cell reprints its own heading instead — the
     same `data-label` pattern the dashboard's card tables use, so the label is
     read out beside its value rather than four screens above it.

     The usual clip-it-out-of-sight trick was tried first and MEASURED WORSE:
     an absolutely-positioned 1px `thead` still lays its `th` out at full width
     inside itself, so the row boxes stayed up to 485px wide in a 375px page and
     the per-element overflow walk kept finding them. Invisible is not the same
     as not there. */
  .price-table--rates thead { display: none; }
  .price-table--rates tr {
    border-bottom: 1px solid var(--line-2);
    padding: var(--s-4) 0;
  }
  .price-table--rates td,
  .price-table--rates td:last-child {
    border-bottom: 0;
    padding: var(--s-2) 0 0;
    text-align: left;
  }
  .price-table--rates td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--sans);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--taupe);
    margin-bottom: 2px;
  }
  /* The first cell is the thing being priced, and it names itself. */
  .price-table--rates td:first-child::before { content: none; }
  /* `.price-table td.p-figure` is `white-space: nowrap` so a price never breaks
     across lines — right on a wide screen, wrong once the cell is a block on a
     375px phone, because the unit that follows the figure ("per picture ·
     £0.90 for 100 pictures") is inside the same cell and inherits it. Measured:
     that made seven rows up to 485px wide inside a 375px page. The FIGURE keeps
     its nowrap; the unit beside it does not, and sits on its own line. */
  .price-table--rates td.p-figure { white-space: normal; }
  .price-table--rates .p-unit { display: block; margin-left: 0; }
}

/* Capability matrix: one label column, two narrow tier columns of marks. */
.price-table--matrix th:not(:first-child),
.price-table--matrix td:not(:first-child) { width: 112px; text-align: center; }
.price-table--matrix .p-yes { color: var(--ink); font-size: 17px; }
.price-table--matrix .p-no { color: var(--ink-faint); }
@media (max-width: 560px) {
  .price-table--matrix th:not(:first-child),
  .price-table--matrix td:not(:first-child) { width: 68px; }
  .price-table--matrix td { padding: var(--s-4) var(--s-3) var(--s-4) 0; font-size: var(--t-meta); }
}
.tag-soon {
  display: inline-block;
  margin-left: var(--s-2);
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--taupe);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  padding: 4px 6px;
  vertical-align: 2px;
}
.ed-actions { margin-top: var(--s-7); }

/* ── Article cards ──────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8) var(--s-7);
}
.card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform var(--slow) var(--ease);
}
.card-cover {
  position: relative;
  aspect-ratio: 3 / 2;
  background: linear-gradient(148deg, #04355f, #022344 72%);
  overflow: hidden;
  margin-bottom: var(--s-4);
  border-radius: var(--r-md);
}
.card-cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
@media (hover: hover) {
  .card:hover .card-cover > img { transform: scale(1.02); }
  .card:hover .card-title { color: var(--ink-hover); }
}
.card-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--taupe);
  margin-bottom: var(--s-2);
  letter-spacing: .13em;
}
.card-eyebrow .tag-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.card h3, .card-title {
  font-size: var(--t-card);
  margin-bottom: var(--s-2);
  transition: color var(--t);
}
.card .card-excerpt { font-size: var(--t-meta); color: var(--ink-body); }
.card .card-foot { margin-top: auto; padding-top: var(--s-3); color: var(--taupe); letter-spacing: .13em; }
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .card-grid { grid-template-columns: 1fr; gap: var(--s-7); } }

/* Feature lead (journal/guides index) — full-width editorial */
.feature-lead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 460px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(148deg, #04355f, #022344 72%);
  margin-bottom: var(--s-10);
}
.feature-lead .fl-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--slow) var(--ease);
}
@media (hover: hover) {
  .feature-lead:hover .fl-media { transform: scale(1.02); }
}
.feature-lead .fl-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(1, 18, 33, .92) 0%, rgba(2, 35, 68, .5) 58%, rgba(2, 35, 68, .2) 100%);
}
.feature-lead .fl-content {
  position: relative;
  z-index: 2;
  padding: var(--s-9) var(--s-9) var(--s-8);
  max-width: 720px;
}
.feature-lead .card-eyebrow { color: var(--sand); margin-bottom: var(--s-3); }
.feature-lead h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: #fff; margin-bottom: var(--s-3); }
.feature-lead .fl-excerpt {
  display: block;
  font-size: var(--t-lede);
  line-height: var(--lh-body);
  color: var(--paper-body);
  max-width: 38em;
}
.feature-lead .fl-foot {
  display: block;
  margin-top: var(--s-5);
  font: 600 var(--t-label)/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
}
@media (max-width: 700px) {
  .feature-lead { min-height: 400px; margin-bottom: var(--s-9); }
  .feature-lead .fl-content { padding: var(--s-7) var(--s-5) var(--s-6); }
}

/* ── Article view ───────────────────────────────────────────
   Cover, title, byline and body all share one left edge. */
.article-head { padding-top: var(--s-10); padding-bottom: var(--s-6); }
.article-head .back-link { margin-bottom: var(--s-6); }
.article-head .card-eyebrow { margin-bottom: var(--s-4); }
.article-head h1 { font-size: var(--t-page); margin: 0 0 var(--s-6); }

.byline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-2);
}
.byline .byline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.byline .byline-name {
  font: 600 var(--t-meta)/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.byline .byline-meta {
  font: 400 var(--t-meta)/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-meta);
}

.article-cover { margin: 0 0 var(--s-8); }
/* Editorial cover: capped height so the story starts above the fold — never a
   full-bleed dump of the source graphic. Body copy stays a readable column. */
.article-cover img {
  width: 100%;
  max-height: 430px;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--r-md);
}
.article-body img {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: var(--r-md);
  margin: var(--s-6) auto;
  display: block;
}
@media (max-width: 640px) { .article-cover img { max-height: 240px; } }

/* ── Space held while the journal and guides load ───────────
   The index and the article are drawn by script after the page arrives. Until
   then each box holds the room it is about to fill, so the footer stays put
   instead of jumping up and back down. An article address is known before
   first paint (the page's head marks <html> with `is-article`), so the index
   never shows on one. */
html.is-article #index-view { display: none; }
html.is-article #article-view.hidden { display: block !important; }
html.is-article #article-view { min-height: 100vh; min-height: 100svh; }
#lead-slot:empty {
  min-height: 460px;
  margin-bottom: var(--s-10);
  border-radius: var(--r-lg);
  background: linear-gradient(148deg, #04355f, #022344 72%);
}
@media (max-width: 700px) { #lead-slot:empty { min-height: 400px; margin-bottom: var(--s-9); } }
#card-grid:has(> .quiet-empty) { min-height: 420px; }
/* The cover's box is a fixed 2:1 before the picture arrives, so the story
   under it does not move when the picture loads. Covers come in several
   shapes; each is cropped to this box (object-fit: cover), as the height cap
   above already did for tall ones. */
.article-cover img { aspect-ratio: 2 / 1; }

.article-body {
  font-size: var(--t-lede);
  line-height: var(--lh-read);
  color: var(--ink-body);
  padding-bottom: var(--s-10);
  overflow-wrap: break-word;
}
.article-body h2 { font-size: 1.625rem; margin: var(--s-9) 0 var(--s-4); color: var(--ink); }
.article-body h3 { font-size: var(--t-card); margin: var(--s-8) 0 var(--s-3); color: var(--ink); }
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 var(--s-5); }
.article-body ul, .article-body ol { margin: 0 0 var(--s-5) var(--s-5); }
.article-body li { margin-bottom: var(--s-2); padding-left: 2px; }
.article-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-body a:hover { color: var(--ink-hover); }
.article-body strong { font-weight: 650; color: var(--ink); }

/* ── The club's own documents (terms, privacy, safeguarding) ─────────────
   The article reading column, with the club's text word for word. The text
   stays in English in both languages; this note tells a Spanish reader so and
   is not shown in English, where it would say nothing. */
.legal-note { display: none; }
html[lang^="es"] .legal-note { display: block; margin: 0; font-size: var(--t-meta); color: var(--ink-meta); }
.legal-doc .article-head h1 { margin-bottom: var(--s-4); }

/* ── Comments / forum ───────────────────────────────────────── */
.comments { border-top: 1px solid var(--line); padding: var(--s-9) 0 var(--s-10); }
.comments h2 { font-size: var(--t-sub); margin-bottom: var(--s-6); }
.comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.comment .c-main { min-width: 0; }
.comment .c-head {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s-3);
  align-items: baseline;
  margin-bottom: var(--s-1);
}
.comment .c-name { font: 600 var(--t-meta)/1.4 var(--sans); color: var(--ink); }
.comment .c-head .c-date { font: 400 var(--t-meta)/1.4 var(--sans); color: var(--ink-meta); }
.comment .c-body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-body); white-space: pre-wrap; }
.comments-empty { padding: var(--s-2) 0 var(--s-5); }

.form { margin-top: var(--s-8); max-width: 560px; }
.form h3 { font-size: var(--t-card); margin-bottom: var(--s-5); }
.form label {
  display: block;
  color: var(--taupe);
  margin: var(--s-5) 0 var(--s-2);
}
.form input, .form textarea {
  width: 100%;
  font: 400 15.5px/1.5 var(--sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  min-height: 48px;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.form input::placeholder, .form textarea::placeholder { color: var(--ink-faint); }
.form input:hover, .form textarea:hover { border-color: rgba(2, 35, 68, .3); }
.form input:focus, .form textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(2, 35, 68, .08);
  outline: none;
}
.form textarea { min-height: 128px; resize: vertical; }
.form .btn { margin-top: var(--s-6); }
.form-note { margin-top: var(--s-3); font-size: var(--t-meta); }
.form-note.ok { color: #2e7d4f; }
.form-note.err { color: #a03232; }

/* a form presented as its own quiet panel (community "start a topic") */
.form-panel {
  margin-top: var(--s-9);
  padding: var(--s-7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  max-width: 100%;
}
.form-panel { max-width: 660px; }
.form-panel .form { margin-top: 0; max-width: 100%; }
.form-panel .form h3 { margin-bottom: var(--s-1); }
/* A page whose whole content is one form (enrich.html): the heading is the page's h1, set at the card size, and the panel sits centred. */
.form-panel .form h1 { font-size: var(--t-card); margin-bottom: var(--s-1); }
.form-panel--centred { margin-inline: auto; }
.form-panel .form-panel-sub {
  font-size: var(--t-meta);
  color: var(--ink-meta);
  margin-bottom: var(--s-4);
  max-width: 52ch;
}
@media (max-width: 560px) { .form-panel { padding: var(--s-5); border-radius: var(--r-md); } }

/* Forum topic rows — thumb | title + meta | replies */
.topic-rows { border-top: 1px solid var(--line); }
.topic-rows:has(> .empty),
.topic-rows:has(> .quiet-empty) { border-top: none; }
.topic-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5) var(--s-3);
  margin: 0 calc(var(--s-3) * -1);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--t);
}
@media (hover: hover) {
  .topic-row:hover { background: rgba(2, 35, 68, .035); }
  .topic-row:hover .t-title { color: var(--ink-hover); }
}
.topic-row .t-main { display: block; min-width: 0; }
.topic-row h3, .topic-row .t-title {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  line-height: var(--lh-title);
  font-size: var(--t-card-sm);
  transition: color var(--t);
}
.topic-row .t-meta {
  display: block;
  color: var(--taupe);
  margin-top: var(--s-2);
}
.topic-row .t-excerpt {
  display: block;
  font-size: var(--t-meta);
  color: var(--ink-body);
  margin-top: var(--s-2);
  max-width: 62ch;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topic-row .t-replies {
  font: 600 var(--t-micro)/1 var(--sans);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  white-space: nowrap;
  transition: border-color var(--t);
}
.topic-row .t-replies.is-quiet { color: var(--taupe); border-color: var(--line); }
@media (hover: hover) { .topic-row:hover .t-replies { border-color: var(--ink); } }
@media (max-width: 600px) {
  .topic-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .topic-row .t-replies { grid-column: 2; justify-self: start; margin-top: var(--s-3); }
}

/* ── Contact ────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.contact-card { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-grid h3 { font-size: var(--t-card-sm); margin-bottom: var(--s-2); }
.contact-grid p { font-size: var(--t-meta); color: var(--ink-body); }
.contact-grid p + p { margin-top: var(--s-2); }
.contact-grid a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-7); } }

/* ── Social / Follow the club ───────────────────────────────── */
/* One row, never two: five equal cards on a laptop and a tablet (mark,
   platform, handle), five round icon buttons spread evenly on a phone. */
.social-cards {
  list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-8);
}
.social-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 116px; padding: var(--s-4) var(--s-3); text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
  color: var(--ink); text-decoration: none; transition: border-color var(--t), background var(--t), color var(--t);
}
.social-card .social-ico { width: 24px; height: 24px; fill: currentColor; margin-bottom: 4px; }
.social-card .sc-name { font: 600 var(--t-meta)/1.2 var(--sans); }
.social-card .sc-handle { font: 400 var(--t-micro)/1.3 var(--sans); color: var(--ink-meta); overflow-wrap: anywhere; }
.social-card:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.social-card:hover .sc-handle { color: var(--sand); }
@media (max-width: 600px) {
  .social-cards { display: flex; justify-content: space-between; gap: 0; }
  .social-card { width: 52px; height: 52px; min-height: 0; padding: 0; border-radius: 50%; border-color: var(--line-2); }
  .social-card .sc-name, .social-card .sc-handle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .social-card .social-ico { width: 21px; height: 21px; margin: 0; }
}

.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-5); }
.social-tile { display: block; text-decoration: none; }
.social-tile .st-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(148deg, #04355f, #022344 72%);
}
.social-tile .st-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
@media (hover: hover) {
  .social-tile:hover .st-media > img { transform: scale(1.02); }
  .social-tile:hover .st-caption { color: var(--ink); }
}
.social-tile .st-caption {
  margin-top: var(--s-3);
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--ink-body);
  transition: color var(--t);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.social-tile .st-meta {
  display: block;
  margin-top: var(--s-2);
  color: var(--taupe);
  letter-spacing: .13em;
}
/* legacy single-letter placeholder — kept as a safety net, now quiet */
.social-tile .st-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--serif);
  font-size: 30px;
  color: rgba(201, 188, 171, .55);
  user-select: none;
}
.social-empty { color: var(--ink-meta); font-size: var(--t-meta); }
/* compact strip variant (community page) */
.social-strip { padding: var(--s-10) 0; border-bottom: 1px solid var(--line); }
.social-strip .section-head { margin-bottom: var(--s-7); }
@media (max-width: 700px) {
  .social-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
}

/* ── Empty states — never a bare italic dash ────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-9) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
.empty .empty-ico {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(2, 35, 68, .05);
  color: var(--ink);
  margin-bottom: var(--s-1);
}
.empty .empty-ico .ico { width: 21px; height: 21px; opacity: .7; }
.empty .empty-title { font-family: var(--serif); font-size: var(--t-card-sm); color: var(--ink); }
.empty .empty-sub { font-size: var(--t-meta); color: var(--ink-meta); max-width: 44ch; }
.empty--inline { border: none; background: none; padding: var(--s-7) 0; align-items: flex-start; text-align: left; }
.card-grid > .empty, .card-grid > .quiet-empty,
.topic-rows > .empty { grid-column: 1 / -1; }
.section--navy .empty, .photo-band .empty {
  background: rgba(255, 255, 255, .05);
  border-color: var(--line-light);
}
.section--navy .empty .empty-title, .photo-band .empty .empty-title { color: #fff; }
.section--navy .empty .empty-sub, .photo-band .empty .empty-sub { color: var(--paper-meta); }

/* ── Proposal page ──────────────────────────────────────────── */
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin: var(--s-9) 0 0; }
.chip-tile { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md); }
.chip-tile .chip-num { font-family: var(--serif); font-size: 42px; line-height: 1; display: block; margin-bottom: var(--s-3); }
.chip-tile p { font-size: var(--t-meta); color: var(--ink-body); }
@media (max-width: 820px) { .chips { grid-template-columns: 1fr; } }

.fix-list { display: flex; flex-direction: column; gap: var(--s-2); }
.fix-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 132px minmax(0, 1fr);
  gap: var(--s-3) var(--s-7);
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  align-items: start;
  transition: border-color var(--t);
}
.fix-row:hover { border-color: var(--line-2); }
.fix-row .f-issue { font-family: var(--serif); font-size: var(--t-card-sm); line-height: 1.4; }
/* One quiet chip shape; the dot carries the meaning, not four fill colours. */
.fix-row .f-by {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: 600 var(--t-micro)/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 7px 12px;
  justify-self: start;
  white-space: nowrap;
}
.fix-row .f-by::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  flex: 0 0 auto;
}
.fix-row .f-by--website::before { background: var(--taupe); }
.fix-row .f-by--dashboard::before { background: var(--teal); }
.fix-row .f-by--club::before { background: var(--sand); }
/* The chip says who does it; the tag under it says whether it exists yet. */
.fix-row .f-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.fix-row .f-tags .tag-soon { margin-left: 0; }
.fix-row .f-how { font-size: var(--t-meta); color: var(--ink-body); }
@media (max-width: 900px) {
  .fix-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .fix-row .f-by { order: -1; }
  .fix-row .f-tags { order: -1; flex-direction: row; align-items: center; }
}

.plain-list { list-style: none; }
.plain-list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-meta);
  color: var(--ink-body);
}
.plain-list li:last-child { border-bottom: none; }
.plain-list li strong { font-weight: 650; color: var(--ink); }

/* ── Feature cards (What is Lily) ───────────────────────────── */
.feat-group { margin-top: var(--s-10); }
.feat-group:first-of-type { margin-top: 0; }
.feat-group > h2 { font-size: var(--t-section); margin-bottom: var(--s-2); }
.feat-group > .feat-sub {
  font-size: var(--t-meta);
  color: var(--ink-meta);
  max-width: 56ch;
  margin-bottom: var(--s-7);
}
.feat-group > h2:last-child { margin-bottom: var(--s-7); }
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  align-items: stretch;
}
.feat-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
.feat-card:hover { border-color: var(--line-2); }
.feat-card h3 {
  font-size: var(--t-card-sm);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.feat-card p { font-size: var(--t-meta); color: var(--ink-body); }
.badge-new {
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(57, 192, 187, .16);
  border-radius: var(--r-xs);
  padding: 5px 7px;
}
@media (max-width: 980px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .feat-grid { grid-template-columns: 1fr; } }

/* ── Plan cards (proposal pricing) ──────────────────────────── */
.plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.plan-card {
  padding: var(--s-7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.plan-card .plan-name { color: var(--taupe); display: block; margin-bottom: var(--s-4); letter-spacing: .16em; }
.plan-card .plan-figures { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.plan-card .plan-price { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1; }
.plan-card .plan-per { color: var(--taupe); letter-spacing: .12em; }
.plan-card p { margin-top: var(--s-4); font-size: var(--t-meta); color: var(--ink-body); max-width: 32em; }
.plan-card--featured { background: var(--ink); color: #fff; border-color: transparent; }
.plan-card--featured .plan-name { color: var(--sand); }
.plan-card--featured .plan-price { color: #fff; }
.plan-card--featured .plan-per { color: var(--sand); }
.plan-card--featured p { color: var(--paper-body); }
@media (max-width: 720px) {
  .plan-cards { grid-template-columns: 1fr; }
  .plan-card { padding: var(--s-6); }
}

/* ── Closing call-to-action block (navy sections) ───────────── */
.cta-block { text-align: center; max-width: 720px; }
.cta-block h2 { font-size: var(--t-section); margin-bottom: var(--s-4); }
.cta-block p { color: var(--paper-body); margin-bottom: var(--s-7); max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-foot { background: var(--sand); border-top: 1px solid rgba(2, 35, 68, .16); margin-top: 0; }
/* Balanced to the page container: the brand column and three link columns,
   even gaps. The wordmark is the club's dark logo (brand_profile.logo_light)
   on sand — measured ink #000 on #C9BCAB, 11.3:1. */
.foot-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
  padding: var(--s-10) 0 var(--s-9);
}
.foot-inner .foot-logo { width: 224px; height: auto; margin: -22px 0 var(--s-3) -26px; }
.foot-inner p { font-size: var(--t-meta); color: var(--ink-body); max-width: 26em; }
.foot-hours { margin-top: var(--s-3); font-variant-numeric: tabular-nums; }
.foot-hours b { color: var(--ink); font-weight: 600; }
.foot-col h4 { color: rgba(2, 35, 68, .6); margin-bottom: var(--s-4); letter-spacing: .16em; }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 2px; }
.foot-col a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  font-size: var(--t-meta);
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t);
}
.foot-col a:hover { border-bottom-color: var(--ink); }
.foot-base {
  border-top: 1px solid rgba(2, 35, 68, .16);
  padding: var(--s-5) 0 calc(var(--s-7) + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  letter-spacing: .12em;
  color: rgba(2, 35, 68, .72);
}
@media (max-width: 900px) { .foot-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-inner > .foot-col:first-child { grid-column: 1 / -1; } }
@media (max-width: 540px) {
  .foot-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding: var(--s-9) 0 var(--s-7); }
  .foot-inner .foot-logo { width: 180px; margin: -18px 0 var(--s-2) -21px; }
  .foot-col a { min-height: var(--tap); min-width: var(--tap); }
  .foot-base { flex-direction: column; align-items: flex-start; }
}

/* ── Mobile rhythm — tighter, never cramped ─────────────────── */
@media (max-width: 860px) {
  :root { --s-section: 68px; --s-head: 32px; }
  .hero { min-height: 76vh; }
  .hero-inner { padding-top: 110px; padding-bottom: var(--s-9); }
  .page-band { min-height: 280px; }
  .page-band .band-inner { padding-top: 64px; padding-bottom: var(--s-7); }
  .article-head { padding-top: var(--s-8); padding-bottom: var(--s-5); }
}
@media (max-width: 560px) {
  :root { --s-section: 56px; }
  .hero h1 { max-width: 100%; }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  /* thumb-sized targets: the link keeps its hairline, the padding does the work */
  .section-link { min-height: var(--tap); padding-bottom: 0; align-items: flex-end; padding-top: 14px; }
  .back-link { min-height: var(--tap); }
  .contact-grid .tel-link, .contact-grid a[href^="mailto:"], .ed-item .facts a { min-height: var(--tap); display: inline-flex; align-items: center; }
  .article-body li > a:only-child { min-height: var(--tap); display: inline-flex; align-items: center; }
  .comments { padding: var(--s-7) 0 var(--s-8); }
  .article-body { padding-bottom: var(--s-8); }
}

/* ── Scroll reveal ──────────────────────────────────────────── */
/* Hidden only when script runs (the `js` class on <html>, set in each page's
   head): with script off every section is simply shown. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Internal pages — fenced off from the public site ───────
   The PerCorner pages for the club team are not part of the
   club's public website and are not in its nav. They are reached
   from the staff index (/staff, behind the passcode); the one
   public page among them carries a banner strip saying so. */
.internal-tag {
  display: inline-flex;
  align-items: center;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .6;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  padding: 5px 7px;
  white-space: nowrap;
}

/* footer — one quiet "Staff" link in the base row. The internal pages are
   no longer listed anywhere public; the team signs in at /staff and finds
   every one of them on the index behind the passcode. */
@media (min-width: 541px) { .foot-base { align-items: center; } }
.foot-staff {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  color: inherit;
  text-decoration: none;
  opacity: .8;
}
.foot-staff:hover,
.foot-staff:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
/* the Lily Sports credit: same light ink as the footer text, underlined so it reads as a link (LJ, 6 Oct: "we cant read the link") */
.foot-by a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }
.foot-by a:hover, .foot-by a:focus-visible { opacity: .8; }

/* banner strip at the top of an internal page body */
.internal-banner { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.internal-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
}
.internal-banner p { font-size: var(--t-micro); color: var(--ink-meta); }
@media (max-width: 560px) {
  .internal-banner-inner { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

/* ── Contact map (Leaflet) ──────────────────────────────────
   Same hairline + radius as the cards. If Leaflet never loads,
   the static address panel underneath simply stays put. */
.contact-map-wrap { margin-top: var(--s-8); }
.contact-map {
  position: relative;
  height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate;
}
.contact-map .leaflet-container {
  height: 100%;
  width: 100%;
  background: var(--paper-2);
  font-family: var(--sans);
}
.map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-7);
}
.map-fallback .kicker { margin-bottom: 0; }
.map-fallback .map-fallback-title { font-family: var(--serif); font-size: var(--t-card-sm); }
.map-fallback p { font-size: var(--t-meta); color: var(--ink-body); }
.map-actions { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* divIcon default chrome off — the SVG is the whole marker */
.leaflet-div-icon.map-pin { background: none; border: none; }
/* OpenStreetMap's tiles are full colour; the map sits quietly in the page. */
.contact-map .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }
/* Leaflet draws its + and − in a monospaced face and at 30px; the site has one
   face, and a control is a tap target. */
.contact-map .leaflet-bar a {
  font-family: var(--sans);
  width: var(--tap);
  height: var(--tap);
  line-height: var(--tap);
}
.map-pin svg { display: block; filter: drop-shadow(0 6px 12px rgba(2, 35, 68, .32)); }
/* Mapbox tiles (the club feed's `map` token): the style is already quiet, so
   no filter; the Mapbox wordmark is shown as its terms require — the asset is
   Mapbox's own, copied from mapbox-gl's stylesheet. */
.contact-map.is-mapbox .leaflet-tile-pane { filter: none; }
.map-mapbox-logo {
  position: absolute; left: 10px; bottom: 10px; z-index: 800; display: block; width: 88px; height: 23px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='0.9' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.contact-map .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, .84);
  color: var(--ink-meta);
}
.contact-map .leaflet-control-attribution a { color: var(--ink-meta); }
.contact-map .leaflet-popup-content {
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--ink-body);
}
.contact-map .leaflet-popup-content strong { color: var(--ink); font-weight: 650; }
@media (max-width: 640px) { .contact-map { height: 240px; } }

/* ── Social icon row ────────────────────────────────────────
   Icons only, circular, hairline — same hover lift as the cards. */
.contact-social { margin-top: var(--s-8); }
.contact-social .kicker { margin-bottom: var(--s-4); }
.social-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--t), background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
.social-btn .social-ico { width: 19px; height: 19px; display: block; fill: currentColor; }
@media (hover: hover) {
  .social-btn:hover {
    transform: translateY(-2px);
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    box-shadow: var(--e2);
  }
}
/* footer sits on sand — keep the ink mark (white on sand fails contrast).
   These override the generic `.foot-col a` link styling, hence the depth. */
.social-row--foot { margin-top: var(--s-5); }
.site-foot .social-btn {
  min-height: var(--tap);
  border: 1px solid rgba(2, 35, 68, .28);
  color: var(--ink);
}
@media (hover: hover) {
  .site-foot .social-btn:hover { background: var(--ink); color: var(--sand); border-color: var(--ink); }
}

/* ── Language toggle ────────────────────────────────────────── */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  overflow: hidden;
}
.lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  color: var(--ink-faint);
  transition: background var(--t), color var(--t);
}
.lang-opt.active {
  background: var(--ink);
  color: #fff;
}
.site-head .lang-toggle {
  border-color: rgba(255, 255, 255, .28);
}
.site-head .lang-opt {
  color: rgba(255, 255, 255, .5);
}
.site-head .lang-opt.active {
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
}
.site-head.scrolled .lang-toggle {
  border-color: var(--line-2);
}
.site-head.scrolled .lang-opt {
  color: var(--ink-faint);
}
.site-head.scrolled .lang-opt.active {
  background: var(--ink);
  color: #fff;
}

/* ── Figure grid — measured numbers about the club ──────────
   Internal pages only (proposal, questions). Every tile is one
   measurement: the figure, what it counts, and where it came
   from. The source line is not decoration — a number a club
   owner cannot trace is a number he is right to distrust. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.stat {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: border-color var(--t);
}
.stat:hover { border-color: var(--line-2); }
.stat .s-fig {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat .s-fig .s-unit {
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--taupe);
  margin-left: 5px;
}
.stat .s-label {
  font-size: var(--t-meta);
  line-height: 1.45;
  color: var(--ink-body);
}
.stat .s-src {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--ink-faint);
}
.stat--wide { grid-column: span 2; }
.stat--lead { background: rgba(161, 151, 133, .09); border-color: transparent; }
.section--navy .stat { border-color: var(--line-light); }
.section--navy .stat:hover { border-color: var(--line-light-2); }
.section--navy .stat .s-fig { color: #fff; }
.section--navy .stat .s-label { color: var(--paper-body); }
.section--navy .stat .s-src { color: var(--paper-meta); }
.section--navy .stat--lead { background: rgba(255, 255, 255, .06); border-color: transparent; }
@media (max-width: 900px) {
  .stat-grid, .stat-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stat-grid, .stat-grid--3, .stat-grid--2 { grid-template-columns: 1fr; }
  .stat--wide { grid-column: auto; }
}

/* ── Step list — a numbered sequence in the club's own voice ── */
.step-list { display: flex; flex-direction: column; gap: var(--s-2); counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  padding: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 0; }
.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--serif);
  font-size: var(--t-card);
  color: var(--taupe);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--t-card-sm); margin-bottom: var(--s-2); }
/* grid-column: 2 is not cosmetic — without it the paragraph is INVISIBLE.
   .step is a two-column grid (42px number, then the text) and ::before, h3 and
   p are three auto-placed items: the number takes row 1 column 1, the heading
   takes row 1 column 2, and the paragraph wraps onto row 2 — back in the 42px
   NUMBER column. Measured on the deployed audit page: every step paragraph was
   42px wide, wrapping one word per line into a 431–718px tall ribbon. */
.step p { font-size: var(--t-meta); color: var(--ink-body); max-width: 62ch; grid-column: 2; }
.step p + p { margin-top: var(--s-2); }
/* And on navy it was navy-on-navy, ~1:1 — the text was not there at all.
   Line 536 already says `.section--navy p { color: var(--paper-body) }`, which
   is correct; `.step p` above carries the same specificity and comes later, so
   it silently won. This restores the ground-aware colour where it applies. */
.section--navy .step p { color: var(--paper-body); }

/* ── Question rows — the standing questions the club answers ── */
.q-list { display: flex; flex-direction: column; gap: var(--s-2); }
.q-row {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t);
}
.q-row:hover { border-color: var(--line-2); }
.q-row .q-ask {
  font-family: var(--serif);
  font-size: var(--t-card);
  line-height: 1.35;
  margin-bottom: var(--s-4);
  display: block;
}
.q-row .q-why,
.q-row .q-evidence { font-size: var(--t-meta); line-height: var(--lh-body); max-width: 68ch; }
.q-row .q-why { color: var(--ink-body); }
.q-row .q-evidence {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--ink-meta);
}
.q-row .q-evidence b { color: var(--ink); font-weight: 600; }
.q-row .q-changes {
  margin-top: var(--s-4);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--taupe);
}
.q-row .q-changes b {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: var(--s-1);
}

/* ── "Not switched on yet" marker ───────────────────────────
   The counterpart of .tag-soon, for a thing that is built and
   waiting on the club rather than on us. Both are quiet on
   purpose: a loud badge reads as an excuse. */
.tag-ready {
  display: inline-block;
  margin-left: var(--s-2);
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  padding: 4px 6px;
  vertical-align: 2px;
}
.section--navy .tag-ready { color: #fff; border-color: var(--line-light-2); }

/* ── Ask block — where a feature request lands ──────────────── */
.ask-block {
  margin-top: var(--s-7);
  padding: var(--s-6);
  border-left: 2px solid var(--sand);
  background: var(--paper-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.ask-block h3 {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--taupe);
  font-family: var(--sans);
  margin-bottom: var(--s-3);
}
.ask-block p, .ask-block li { font-size: var(--t-meta); color: var(--ink-body); line-height: var(--lh-body); max-width: 68ch; }
.ask-block ul { list-style: none; }
.ask-block li { padding: 5px 0 5px 18px; position: relative; }
.ask-block li::before { content: '—'; position: absolute; left: 0; color: var(--taupe); }
.section--navy .ask-block { background: rgba(255, 255, 255, .05); border-left-color: var(--sand); }
.section--navy .ask-block p, .section--navy .ask-block li { color: var(--paper-body); }

/* ── Utilities ──────────────────────────────────────────────── */
.hidden { display: none !important; }
.quiet-empty { color: var(--ink-meta); font-size: var(--t-meta); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Competition banner ─────────────────────────────────────────
   Injected by initGiveawayBanner() only while a competition is open.
   Deliberately one strip, above the fold, and gone the rest of the time. */
.gw-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: 0; padding: 14px 20px;
  background: var(--ink); color: #fff; text-decoration: none;
  border-bottom: 1px solid var(--line-light);
}
.gw-banner:hover { background: var(--ink-hover); }
.gw-kicker {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal); flex: 0 0 auto;
}
.gw-title { font-weight: 700; flex: 0 0 auto; }
.gw-prize { color: var(--paper-meta); font-size: 14px; flex: 1 1 auto; }
.gw-cta { color: var(--teal); font-size: 14px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .gw-banner { padding: 12px 16px; }
  .gw-prize { flex-basis: 100%; }
}

/* ── Fixture / standings tables (tournament.html, league.html) ───
   MEASURED 2026-08-07: `.t-fixtures`, `.t-facts` and `.t-v` were used by
   tournament.html from the day it shipped and existed in NO stylesheet, so a
   tournament draw rendered as an unspaced run of digits — "11 00+3 3". Nobody
   caught it because the page returned 200 and the markup was correct; only a
   picture of it shows the defect.

   league.html carried a copy of these rules in a <style> block with a comment
   saying the shared stylesheet was the right home for them. This is that move:
   ONE copy, both pages, and the next page that renders a fixture list gets it
   for free rather than shipping unstyled for a month. */
.t-facts { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 1.25rem 0 2rem; }
.t-facts div { display: flex; flex-direction: column; gap: .15rem; }
.t-facts dt {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-meta);
}
.t-facts dd { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }

table.t-fixtures {
  width: 100%; border-collapse: collapse;
  margin: .75rem 0 2rem; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
table.t-fixtures th {
  text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-meta); font-weight: 600;
  padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
table.t-fixtures td {
  padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--ink);
}
table.t-fixtures th:last-child, table.t-fixtures td:last-child { padding-right: 0; }
table.t-fixtures td:first-child, table.t-fixtures th:first-child { white-space: nowrap; }
.t-v { color: var(--ink-meta); padding: 0 .35rem; }

/* A wide draw scrolls inside itself on a phone rather than pushing the whole
   page sideways. */
#t-body, #l-body { overflow-x: auto; }

/* Rate-card disclosure. The generated block between RATE-CARD:START/END is the
   supplier prices every figure on the proposal is built from — it has to stay
   on the page for the arithmetic to be checkable, and it is 700 words of model
   pricing that a club manager does not read top to bottom. So it is present
   and closed, not removed. The <details> sits OUTSIDE the generated markers;
   `pnpm ratecard:check` still compares the block byte-for-byte. */
.rate-detail { margin-top: var(--s-5); border: 1px solid var(--line); border-radius: 10px; padding: var(--s-4); }
.rate-detail > summary {
  cursor: pointer; list-style: none; font-size: var(--t-meta); color: var(--ink-body);
  min-height: 44px; display: flex; align-items: center; gap: var(--s-2);
}
.rate-detail > summary::-webkit-details-marker { display: none; }
.rate-detail > summary::before { content: "+"; color: var(--teal); font-weight: 700; }
.rate-detail[open] > summary::before { content: "–"; }
.rate-detail > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.rate-detail[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
@media (min-width: 761px) { .rate-detail > summary { min-height: 52px; } }

/* ─────────────────────────────────────────────────────────────
   LIVE BOARD — the club's courts, games and coaching this week.
   Ported ONCE from docs/research/lily-rebuild/DESIGN-SYSTEM.md, in the
   club's own colours (LJ, 30 Sep 2026). Nothing here is drawn per page:
     §3  the row           .sb-row
     §6  the strip         .sb-strip / .sb-pill / .sb-strip-select
     §11 the sheet         .sb-scrim / .sb-sheet   (the empty-court pop-up)
     §20 the search field  .sb-search
     §22 the lazy list     .sb-lazy / .sb-more
     §29 the empty state   .sb-empty
   One deliberate difference from §22: no capped inner scroll box and no
   "N of M" window. LJ's ruling of 29 Sep — one page scroll, never a scroll
   inside a scroll — so the list flows on the page and the next twenty rows
   load as the page reaches the end of it.
   ───────────────────────────────────────────────────────────── */

/* §20 — the search field */
.sb-search {
  display: flex; align-items: center; gap: var(--s-2);
  width: 320px; max-width: 100%; min-height: var(--tap);
  padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink);
}
.sb-search.is-wide { width: 100%; }
.sb-search .ico { width: 15px; height: 15px; color: var(--ink-meta); }
.sb-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: 400 15px/1.3 var(--sans); color: var(--ink);
}
.sb-search input::placeholder { color: var(--ink-faint); }
.sb-search:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }

/* §6 — the strip: pills on one line, a single chooser once it outgrows it */
.sb-strip { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.sb-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 16px; border-radius: 11px;
  font: 600 15px/1 var(--sans); color: var(--ink); white-space: nowrap;
  background: transparent; border: 1px solid var(--line); cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.sb-pill:hover { border-color: var(--line-2); }
.sb-pill[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sb-count {
  display: inline-grid; place-items: center; min-width: 21px; height: 19px; padding: 0 6px;
  border-radius: var(--r-pill); background: rgba(2, 35, 68, .08);
  font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums;
}
.sb-pill[aria-selected="true"] .sb-count { background: rgba(255, 255, 255, .18); }
.sb-strip-select {
  display: none; width: 100%; min-height: var(--tap); padding: 0 40px 0 16px;
  border-radius: 11px; border: 1px solid var(--line-2); color: var(--ink);
  font: 600 15px/1 var(--sans); appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23022344' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
}
.sb-strip.is-collapsed .sb-pill { display: none; }
.sb-strip.is-collapsed .sb-strip-select { display: block; max-width: 360px; }
@media (max-width: 560px) { .sb-strip.is-collapsed .sb-strip-select { max-width: none; } }

/* §3 — the row: thumbnail, a name with ONE meta line, a trailing column */
.sb-rows { display: flex; flex-direction: column; }
.sb-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 14px;
  align-items: center; min-height: 72px; padding: 14px 10px; border-radius: 10px;
}
.sb-row + .sb-row { border-top: 1px solid var(--line); }
.sb-row:hover { background: var(--paper-2); }
.sb-thumb {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(2, 35, 68, .06); color: var(--ink);
}
.sb-thumb .ico { width: 20px; height: 20px; }
.sb-body { min-width: 0; }
/* Name and details wrap in full at every width — nothing is cut off. Each
   field stays whole (nowrap below), so a line breaks between fields. */
.sb-name {
  display: block; font: 600 16px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere;
}
.sb-meta {
  display: block; margin-top: 2px; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}
.sb-meta b { color: var(--ink); font-weight: 600; }
.sb-meta b, .sb-meta i, .ev-meta b { white-space: nowrap; }
.sb-meta i { font-style: italic; }
.sb-sep { color: var(--ink-faint); }
.sb-end { display: flex; align-items: center; justify-content: flex-end; }
.sb-chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  background: rgba(2, 35, 68, .06); color: var(--ink-meta); font: 600 12.5px/1 var(--sans); white-space: nowrap;
}
.sb-row.is-greyed .sb-name { color: var(--ink-faint); }
.sb-row.is-greyed .sb-meta, .sb-row.is-greyed .sb-meta b { color: var(--ink-faint); }
.sb-row.is-greyed .sb-thumb { background: rgba(2, 35, 68, .03); color: var(--ink-faint); }
.sb-row.is-greyed:hover { background: transparent; }
.sb-req { padding: 0 18px; }
@media (max-width: 560px) {
  .sb-row { gap: 0 12px; padding: 12px 6px; }
  .sb-req { padding: 0 14px; }
}

/* §22 — the lazy list: twenty rows, then twenty more as the page reaches the end */
.sb-lazy { display: flex; flex-direction: column; gap: var(--s-3); }
.sb-lazy-foot { display: flex; justify-content: center; padding-top: var(--s-2); }
.sb-sentinel { height: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .sb-row.is-new { animation: sb-up 250ms var(--ease-out) both; }
  @keyframes sb-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* §29 — the empty state: why it is empty and what to do next */
.sb-empty {
  max-width: 64ch; margin-inline: auto; padding: 40px; text-align: center;
  font-size: var(--t-micro); line-height: 1.6; color: var(--ink-meta);
}
.sb-empty b { font-weight: 600; color: var(--ink); }

/* The board's own furniture: the freshness line, the court price, the toolbar */
.sb-bar { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.sb-fresh { font-size: var(--t-meta); color: var(--ink-meta); font-variant-numeric: tabular-nums; }
.sb-fresh b { color: var(--ink); font-weight: 600; }
.sb-fresh.is-stale b { color: var(--ink); }
.sb-fields { display: grid; gap: 6px; margin: 0; }
.sb-field { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s-3); align-items: baseline; font-size: var(--t-meta); }
.sb-field dt { color: var(--ink-meta); }
.sb-field dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.sb-field dd b { font-weight: 600; }
.sb-field dd i { color: var(--ink-meta); }
.sb-price { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); background: #fff; }

/* §11 — the sheet: centred on a laptop, from the bottom edge below 900 */
.sb-scrim {
  position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: var(--s-4);
  background: rgba(2, 35, 68, .45); opacity: 0; transition: opacity 130ms var(--ease);
}
.sb-scrim.is-open { opacity: 1; }
.sb-sheet {
  position: relative; width: min(520px, 100%); min-width: min(340px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: #fff; border-radius: 14px; padding: var(--s-6);
  box-shadow: 0 24px 70px rgba(2, 35, 68, .22); transform: translateY(3px); transition: transform 130ms var(--ease);
}
.sb-scrim.is-open .sb-sheet { transform: none; }
.sb-sheet h3 { font-family: var(--serif); font-size: var(--t-card); margin: 0 44px var(--s-4) 0; }
.sb-sheet-x {
  position: absolute; top: 10px; right: 10px; width: var(--tap); height: var(--tap);
  display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--r-sm); color: var(--ink); cursor: pointer;
}
.sb-sheet-x:hover { background: var(--paper-2); }
.sb-rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }
.sb-steps { font-size: var(--t-meta); color: var(--ink-body); }
.sb-caveat { margin-top: var(--s-3); font-size: var(--t-micro); font-style: italic; color: var(--ink-meta); }
.sb-sheet-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.sb-sheet-actions .btn { flex: 1 1 auto; }
@media (max-width: 900px) {
  .sb-scrim { place-items: end center; padding: 0; }
  .sb-sheet { width: 100%; max-width: none; border-radius: 14px 14px 0 0; }
}
body.sb-lock { overflow: hidden; }

/* ─────────────────────────────────────────────────────────────
   THE PLAY WIZARD, SEARCH AND THE PLAY CARDS (LJ, 30 Sep 2026)
   Assembled from DESIGN-SYSTEM.md parts, ported here once:
     §20 the search field       .sb-searchbar (the field + its two buttons)
     §6  the strip              the steps, the periods, the understood filters
     §28 the kick-off card      .sb-choice   (the four things to do)
     §18 the day cell           .sb-day      (seven equal columns)
     §29 the empty state        .sb-empty-act (its buttons)
   The play card .pc is the What's on card family (date tile, Prata title,
   field lines, the price as its footer), used by the wizard's options, Lily's
   suggested slots and the What's on carousel.
   ───────────────────────────────────────────────────────────── */
.sb-searchbar { display: flex; gap: var(--s-2); align-items: stretch; flex-wrap: nowrap; }
.sb-searchbar .sb-search { flex: 1 1 auto; min-width: 0; }
.sb-searchbar .sb-search input[type="search"] { min-width: 0; }
.sb-searchbar-act { display: flex; gap: var(--s-2); flex: 0 0 auto; }
.sb-searchbar-act .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .sb-searchbar { flex-direction: column; }
  .sb-searchbar-act .btn { flex: 1 1 0; }
}
.sb-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.wiz-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); flex-wrap: nowrap; }
.wiz-head .sb-strip { flex: 1 1 auto; justify-content: flex-end; }
.wiz-back { padding: 0 16px; gap: var(--s-2); flex: 0 0 auto; }
.wiz-back .ico { width: 16px; height: 16px; }
.sb-pill:disabled { opacity: .45; cursor: default; }
.sb-pill:disabled:hover { border-color: var(--line); }
.wiz-search { margin-bottom: var(--s-7); }
.wiz-q { font-size: var(--t-sub); margin-bottom: var(--s-5); }
.wiz-sel { font-size: var(--t-meta); color: var(--ink-meta); margin-bottom: var(--s-5); font-variant-numeric: tabular-nums; }
.wiz-sel b { color: var(--ink); font-weight: 600; }
.wiz-or { font-size: var(--t-meta); color: var(--ink-meta); margin: var(--s-6) 0 var(--s-3); }
.wiz-actions { margin-top: var(--s-6); display: flex; }
.wiz-actions .btn { min-width: 220px; }
.wiz-foot { margin-top: var(--s-6); }
@media (max-width: 560px) {
  .wiz-head { flex-wrap: wrap; }
  .wiz-head .sb-strip { justify-content: flex-start; flex-basis: 100%; }
  .wiz-actions .btn { width: 100%; }
}

/* §28 — the kick-off card: a mark, a name, a one-line question. 2 × 2 on a
   laptop and a tablet, one column on a phone. */
.sb-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.sb-choice {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px;
  align-items: center; text-align: left; min-height: 88px; padding: 18px 20px; border-radius: 13px;
  background: #fff; border: 1px solid var(--line); color: var(--ink); cursor: pointer; font: inherit;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.sb-choice:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--e1); }
.sb-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sb-choice-ico {
  grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(2, 35, 68, .06); color: var(--ink);
}
.sb-choice-ico .ico { width: 20px; height: 20px; }
.sb-choice-name { font: 600 17px/1.3 var(--sans); }
.sb-choice-q { font-size: var(--t-micro); line-height: 1.45; color: var(--ink-meta); }
@media (max-width: 640px) {
  .sb-choices { grid-template-columns: minmax(0, 1fr); }
  .sb-choice { min-height: 76px; padding: 14px 16px; }
  .sb-choice:hover { transform: none; }
}

/* §18 — the day cells: seven equal columns, one row; a cell is a toggle. */
.sb-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sb-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 72px; padding: 8px 2px; border-radius: 11px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer; font: inherit; font-variant-numeric: tabular-nums;
}
.sb-day:hover { border-color: var(--line-2); }
.sb-day[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sb-day-w { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sb-day-n { font-size: 19px; font-weight: 600; line-height: 1.1; }
.sb-day-c {
  display: inline-grid; place-items: center; min-width: 21px; height: 19px; padding: 0 6px; border-radius: var(--r-pill);
  background: rgba(2, 35, 68, .08); font: 600 12px/1 var(--sans);
}
.sb-day-c.is-none { opacity: .5; }
.sb-day[aria-pressed="true"] .sb-day-c { background: rgba(255, 255, 255, .18); }
@media (max-width: 400px) { .sb-days { gap: 4px; } .sb-day-w { font-size: 11.5px; letter-spacing: 0; } }

/* The understood filters: §6 pills carrying a field name, its value and ×. */
.sb-chips { margin-bottom: var(--s-4); }
.sb-pill--chip { gap: 6px; padding: 0 12px 0 14px; font-weight: 500; }
.sb-pill--chip b { font-weight: 600; }
.sb-pill--chip .sb-chip-k { color: var(--ink-meta); }
.sb-pill--chip .ico { width: 14px; height: 14px; color: var(--ink-meta); }
.sb-pill--chip:hover { border-color: var(--ink); }
.sb-empty-act { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; margin-top: var(--s-4); }

/* A row that is a link (the home list). */
.sb-row--link { text-decoration: none; color: var(--ink); }
.sb-row--link .sb-end .ico { width: 18px; height: 18px; color: var(--ink-meta); transition: transform var(--t); }
.sb-row--link:hover .sb-end .ico { transform: translateX(2px); color: var(--ink); }

/* The play card. */
.pc-day + .pc-day { margin-top: var(--s-7); }
.pc-day-h { font-size: var(--t-card); margin-bottom: var(--s-4); }
.pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 1100px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pc-grid { grid-template-columns: minmax(0, 1fr); } }
.pc-grid--chat { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-top: var(--s-2); }
.pc {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
  color: var(--ink); text-decoration: none; transition: border-color var(--t), box-shadow var(--t);
}
.pc:hover { border-color: var(--line-2); }
.pc--link:hover { border-color: var(--ink); box-shadow: var(--e1); }
.pc-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pc-tile {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--r-md); padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--ink); color: #fff; font-variant-numeric: tabular-nums;
}
.pc-tile-d { font: 600 23px/1 var(--sans); }
.pc-tile-m { font: 600 12.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--sand); }
.pc-eyebrow { font-size: var(--t-micro); font-weight: 600; color: var(--ink-meta); letter-spacing: .02em; }
.pc-name { font-family: var(--serif); font-size: var(--t-card-sm); line-height: var(--lh-title); overflow-wrap: anywhere; }
.pc-meta { font-size: var(--t-meta); line-height: 1.5; color: var(--ink-meta); font-variant-numeric: tabular-nums; }
.pc-meta b, .pc-price b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.pc-meta i { white-space: nowrap; }
.pc-price {
  margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line);
  font-size: var(--t-meta); color: var(--ink-meta); font-variant-numeric: tabular-nums;
}
.pc-act { display: flex; }
.pc-act .btn { width: 100%; }
.pc.is-greyed { background: var(--paper-2); }
.pc.is-greyed .pc-name, .pc.is-greyed .pc-meta { color: var(--ink-faint); }
.pc.is-greyed .pc-tile { background: rgba(2, 35, 68, .35); }
.sb-sheet-pick { margin-top: var(--s-4); }
.sb-field-k { font-size: var(--t-meta); color: var(--ink-meta); margin-bottom: var(--s-2); }

/* What's on — the carousel starts on the page gutter and shows a peek of the
   next card; no fade, so no card is ever clipped by a mask. */
.event-strip { mask-image: none !important; -webkit-mask-image: none !important; }
.event-strip > .pc {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 3 * var(--s-3) - 52px) / 3.25);
}
@media (max-width: 1100px) { .event-strip > .pc { flex-basis: calc((100% - 2 * var(--s-3) - 52px) / 2.3); } }
@media (max-width: 640px) { .event-strip > .pc { flex-basis: min(300px, 80vw); } }
.bp-search { margin-bottom: var(--s-5); }
.sb-chips-read { display: none; font-size: var(--t-meta); color: var(--ink-meta); margin: calc(-1 * var(--s-2)) 0 var(--s-4); }
.sb-chips-read b { color: var(--ink); font-weight: 600; }
.sb-chips.is-collapsed + .sb-chips-read { display: block; }
/* The carousel runs on to the window's right edge, so the next card peeks in
   from the edge of the screen, not from the edge of the page column. */
@media (min-width: 641px) {
  .event-strip { margin-right: calc((100% - 100vw) / 2); padding-right: calc((100vw - 100%) / 2); }
}
.nw { white-space: nowrap; }
.pc-act { margin-top: auto; }
.pc-price + .pc-act { margin-top: 0; }

/* The language toggle and the header links are a full tap target. */
.lang-toggle { min-height: var(--tap); }
.lang-toggle .lang-opt { min-height: var(--tap); display: inline-flex; align-items: center; }
/* The member banner — the club's own discounts, as labelled fields. */
.sb-banner { margin: var(--s-3) 0 var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--paper-2); border: 1px solid var(--line); font-size: var(--t-meta); color: var(--ink-meta); }
.sb-banner b { color: var(--ink); font-weight: 600; }
#board-preview-fresh .sb-banner { margin-bottom: 0; }
/* The day heading: sans numerals, so a 1 never reads as an l. */
.pc-day-h { font-family: var(--sans); font-weight: 600; font-size: var(--t-card-sm); font-variant-numeric: tabular-nums lining-nums; }
/* Keep controls clear of the floating Lily button on a phone and a tablet. */
@media (max-width: 900px) {
  .sb-strip.is-collapsed .sb-strip-select { width: calc(100% - 56px); }
}
/* What's on on a laptop: the cards fit a full grid — no carousel, nothing cut. */
@media (min-width: 1100px) {
  .event-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .event-strip > .pc { flex: none; }
}
/* The home list's right edge stays clear of the floating Lily button on a phone and a tablet. */
@media (max-width: 900px) { #board-preview-list .sb-row { padding-right: 56px; } }
/* Compact alternatives in the "someone has just taken this" sheet — no inner scroll. */
.sb-sheet .sb-rows .sb-row { min-height: 60px; padding: 10px 6px; }

/* ── Header tools: the EN/ES switch sits beside Menu, outside the menu, so it
   is always on screen on a phone. ─────────────────────────────── */
.head-tools { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
@media (min-width: 981px) { .head-tools { order: 3; margin-left: 0; } .head-inner > .nav { margin-left: auto; } .head-tools .nav-toggle { display: none; } }
.lang-toggle .lang-opt { background: none; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; min-width: 44px; }
.lang-opt[aria-pressed="true"] { background: var(--ink); color: #fff; }
.site-head .lang-opt[aria-pressed="true"] { background: var(--ink); color: #fff; }
.site-head .lang-toggle { border-color: var(--line-2); }
.site-head .lang-opt { color: var(--ink-meta); }
.lang-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ── Book buttons carry the Padelmates mark (their own favicon, unaltered). */
.btn--book { gap: 10px; }
.pm-mark { height: 18px; width: auto; flex: none; display: block; }
.hero-hours { margin-top: var(--s-3); color: var(--paper-body); font-size: var(--t-meta); }
.hero-hours b { color: #fff; font-weight: 600; }

/* ── Labelled rows (prices, times): one fact per line, label then value. */
.facts--rows { columns: 1 !important; }
.ed-item .facts--rows li b, .price-rows li b { color: var(--ink); font-weight: 600; }
.price-rows { list-style: none; margin-top: var(--s-5); max-width: 46em; }
.price-rows li { font-size: var(--t-meta); color: var(--ink-body); padding: 9px 0; border-bottom: 1px solid var(--line); }
.price-rows li strong { color: var(--ink); }

/* ── Court sponsors: the card grid's rhythm, one tile per court. */
.sponsor-grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-5); }
.sponsor-card { display: flex; flex-direction: column; gap: var(--s-3); }
.sponsor-logo { aspect-ratio: 1 / 1; border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sponsor-logo img { width: 100%; height: 100%; object-fit: contain; }
.sponsor-logo--plate { background: var(--ink); border-color: var(--ink); padding: var(--s-4); }
.sponsor-plate { font-family: var(--serif); color: #fff; font-size: var(--t-card-sm); line-height: var(--lh-title); text-align: center; }
.sponsor-court { font-size: var(--t-meta); color: var(--ink-body); }
.sponsor-court b { color: var(--ink); font-weight: 600; }
@media (max-width: 1000px) { .sponsor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }

/* ── The 404 page: the empty state, centred in the page. */
.nf { min-height: 60vh; display: flex; align-items: center; }
.nf .empty { max-width: 34em; }
.nf-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); justify-content: center; }
/* A long Spanish field in the member banner wraps on a phone rather than
   pushing the page sideways. */
@media (max-width: 480px) { .sb-banner .nw { white-space: normal; } }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN HOUSE — claude/site-design-house (LJ approved the concept, 30 Sep)
   ───────────────────────────────────────────────────────────────────────────
   Everything the site-wide redesign changes lives in THIS block, below every
   earlier rule, so another builder's work above it merges without touching it.
   What it owns: the tokens below, the eyebrow (.kicker), section titles, the
   header, the footer, the home hero and moving scene, the home sections, and
   the inner-page photo bands. The /play wizard, board, ticker and request
   pop-up are NOT restyled here (the home page's copies are scoped by id).

   Type: display = Mona Sans ExtraBold 800 at width 112.5, caps, one to four
   words; Prata stays for sentences; Inter does the work. Figures are sans and
   tabular. Motion is opacity only (assets/design.js).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --navy: #022344;
  --navy-900: #011a33;
  --bone: #F3EFEB;          /* the partner-logo ground, so logos sit seamlessly */
  --bone-2: #E9E1D5;
  --taupe-ink: #736856;     /* small labels on bone and white, 4.78:1 */
  --on-photo: #F3EFEB;
  --line-dark: rgba(201, 188, 171, .22);
  --display: 'Mona Sans', 'Inter', Helvetica, Arial, sans-serif;
  --display-wdth: 112.5%;
  --ease-fade: cubic-bezier(.4, 0, .2, 1);
  --gutter: clamp(16px, 3.4vw, 48px);
  --lily-clear: 64px;
  --lily-fab-w: 57px;       /* the launcher's width (bot.js); 46px at 420 and below */       /* the Lily launcher's strip on the right edge */
  --t-eyebrow: 13.5px;
  --t-title: clamp(2.35rem, 5.6vw, 5.6rem);
}
@media (max-width: 760px) { :root { --t-eyebrow: 12.5px; } }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.display,
.section-head h2,
.page-band h1,
.scene-title h2 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: var(--display-wdth);
  font-variation-settings: 'wdth' 112.5;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .92;
}
/* A title word never breaks: the phone size is set so the longest Spanish
   word ("PRÓXIMAMENTE", "ENCUÉNTRANOS") fits 350px (pnpm sitetitles:check). */
.section-head h2 { font-size: var(--t-title); max-width: 14em; overflow-wrap: normal; hyphens: manual; }
.kicker,
.kicker--sand {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--taupe-ink);
}
@media (max-width: 760px) { .kicker, .kicker--sand { letter-spacing: .15em; } }
.kicker--photo,
.page-band .kicker,
.page-band .kicker--sand,
.photo-band .kicker,
.section--night .kicker,
.site-foot .kicker {
  color: var(--on-photo);
  text-shadow: 0 1px 12px rgba(1, 26, 51, .55);
}
.section--night .kicker, .photo-band .kicker { color: var(--sand); text-shadow: none; }

/* Pill buttons for the hero, scene and header. */
.btn--pill { border-radius: var(--r-pill); letter-spacing: .18em; padding: 0 24px; }
.btn--sand { background: var(--sand); border-color: var(--sand); color: var(--navy); }
.btn--sand:hover { background: var(--bone); border-color: var(--bone); color: var(--navy); }

/* Reveals fade; nothing slides. */
.reveal { transform: none; transition: opacity 900ms var(--ease-fade); transition-delay: var(--reveal-delay, 0s); will-change: opacity; }

/* ── Header: night navy, transparent over a photograph ────────────────────── */
.site-head { background: var(--navy-900); border-bottom: 1px solid var(--line-dark); transition: background .5s var(--ease-fade), border-color .5s var(--ease-fade); }
.site-head.scrolled { box-shadow: none; border-bottom-color: var(--line-dark); }
.site-head .head-wm-clip { display: none; }
.site-head .head-inner { max-width: none; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.site-head .brand .brand-mark { height: 40px; }
.site-head .nav a:not(.btn) { color: var(--bone); opacity: .86; font-weight: 700; font-size: 12px; letter-spacing: .18em; }
.site-head .nav a:not(.btn):hover,
.site-head .nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--sand); }
/* Play is the header's one primary button (LJ, 30 Sep): it replaces Book now,
   opens the /play wizard, and sits beside Menu on a phone. */
.site-head .btn--play { min-height: var(--tap); padding: 0 22px; border-radius: var(--r-pill); background: var(--sand); border-color: var(--sand); color: var(--navy); font-weight: 700; letter-spacing: .18em; white-space: nowrap; }
.site-head .btn--play:hover { background: var(--bone); border-color: var(--bone); color: var(--navy); }
.site-head .btn--play[aria-current="page"] { background: var(--bone); border-color: var(--bone); box-shadow: inset 0 -3px 0 var(--sand); }
/* The header's markup is in screen order, so Tab walks it left to right at every
   width: the links, EN/ES, Play, then Menu on a phone (Play beside Menu). */
@media (max-width: 420px) { .site-head .btn--play { padding: 0 16px; letter-spacing: .14em; } .site-head .head-tools { gap: 8px; } .site-head .nav-toggle { padding: 0 14px; } }
.site-head .lang-toggle,
.site-head.scrolled .lang-toggle { border-color: var(--line-dark); }
.site-head .lang-opt,
.site-head.scrolled .lang-opt { color: rgba(243, 239, 235, .7); }
.site-head .lang-opt[aria-pressed="true"],
.site-head.scrolled .lang-opt[aria-pressed="true"] { background: var(--bone); color: var(--navy); }
.site-head .lang-opt:focus-visible { outline-color: var(--sand); }
.site-head .nav-toggle { color: var(--bone); border-color: rgba(243, 239, 235, .45); border-radius: var(--r-pill); }
.site-head .nav-toggle:hover { border-color: var(--bone); }
@media (max-width: 980px) {
  .site-head .nav { background: var(--navy-900); box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .6); }
  .site-head .nav a:not(.btn) { border-bottom-color: var(--line-dark); }
  .site-head .nav a:not(.btn):hover { border-bottom-color: var(--line-dark); opacity: .7; }
}
/* Over a photograph (home hero, inner-page bands): the header floats on the
   picture and turns solid once the picture has scrolled away. design.js sets
   `photo-top` only when the page opens on a visible photograph. */
html.photo-top .site-head { position: fixed; left: 0; right: 0; top: 0; background: linear-gradient(rgba(1, 26, 51, .62), rgba(1, 26, 51, 0)) no-repeat; background-clip: padding-box; border-bottom-color: transparent; }
html.photo-top .site-head.is-solid { background: rgba(1, 26, 51, .8); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line-dark); }
@media (max-width: 980px) { html.photo-top .site-head:has(.nav.open) { background: var(--navy-900); } }

/* ── Home hero: exactly the screen it opens on ────────────────────────────── */
.hero--house { height: 100vh; height: 100svh; min-height: 0; display: block; background: var(--navy-900); }
.hero--house::after { content: none; }
.hero--house .hero-media { animation: none; transform: none; will-change: auto; object-position: 50% 38%; filter: saturate(.86) contrast(1.04); }
.hero--house .hero-scrim {
  background:
    linear-gradient(rgba(1, 26, 51, .6), rgba(1, 26, 51, 0) 180px),
    linear-gradient(to top, rgba(1, 26, 51, .96) 0%, rgba(1, 26, 51, .72) 34%, rgba(1, 26, 51, 0) 64%),
    rgba(2, 35, 68, .2);
}
.hero-copy {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  color: var(--bone);
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(8px, 1.2vw, 18px); padding-right: var(--lily-clear); }
.hero--house .kicker { margin-bottom: 14px; }
.hero--house h1 { font: 400 clamp(24px, min(2.7vw, 4.6svh), 40px)/1.12 var(--serif); max-width: 15em; color: var(--bone); margin: 0; }
.hero--house .hero-actions { flex-shrink: 0; flex-wrap: nowrap; }
.hero-lock { margin: 0; padding-right: var(--lily-clear); position: relative; }
.hero-word {
  display: flex; justify-content: space-between;
  font: 800 min(14.4vw, 24svh)/.86 var(--display); font-stretch: var(--display-wdth); font-variation-settings: 'wdth' 112.5;
  letter-spacing: -.01em; color: var(--bone); padding-top: .04em;
}
.hero-word > span { opacity: 0; animation: bp-fade 1.1s var(--ease-fade) forwards; }
.hero-word > span:nth-child(1) { animation-delay: .25s; } .hero-word > span:nth-child(2) { animation-delay: .33s; }
.hero-word > span:nth-child(3) { animation-delay: .41s; } .hero-word > span:nth-child(4) { animation-delay: .49s; }
.hero-word > span:nth-child(5) { animation-delay: .57s; } .hero-word > span:nth-child(6) { animation-delay: .65s; }
.hero-word > span:nth-child(7) { animation-delay: .73s; } .hero-word > span:nth-child(8) { animation-delay: .81s; }
.hero-club {
  display: block; text-align: right; margin-top: .45em;
  font: 800 clamp(13px, 1.6vw, 24px)/1 var(--display); font-stretch: var(--display-wdth); letter-spacing: .34em; text-transform: uppercase; color: var(--sand);
  opacity: 0; animation: bp-fade 1s var(--ease-fade) 1.1s forwards;
}
@keyframes bp-fade { to { opacity: 1; } }
.hero-rail {
  display: flex; align-items: center; gap: 10px 28px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-dark);
  font: 700 var(--t-eyebrow)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(243, 239, 235, .86); text-shadow: 0 1px 12px rgba(1, 26, 51, .55);
}
.hero-rail b { color: var(--bone); font-weight: 700; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: .06em; }
.hero-rail .hero-hours { margin: 0; color: inherit; font-size: inherit; }
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-right: 10px; vertical-align: 1px; }
.live-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: var(--teal); opacity: 0; animation: bp-beat 2.4s var(--ease-fade) infinite; }
@keyframes bp-beat { 0% { opacity: .5; } 70%, 100% { opacity: 0; } }
.motion-btn {
  margin-left: auto; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-dark); background: rgba(1, 26, 51, .35); color: var(--bone); cursor: pointer;
  font: 700 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.motion-btn:hover { border-color: var(--bone); }
.motion-btn:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.hero-rail .motion-btn { margin-right: var(--lily-clear); }
html.motion-paused .live-dot::after { animation-play-state: paused; opacity: 0; }

/* ── The moving scene: one full-bleed picture at a time ───────────────────── */
.scene { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--navy-900); color: var(--bone); contain: layout paint; }
.scene-slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 0; }
.slide.is-on { opacity: 1; z-index: 2; transition: opacity 1.2s var(--ease-fade); }
.slide.is-prev { opacity: 1; z-index: 1; }
.slide img:not([src]) { visibility: hidden; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.slide figcaption {
  position: absolute; z-index: 5; right: calc(var(--gutter) + var(--lily-clear)); bottom: 112px;
  max-width: min(30em, 40vw); text-align: right; display: grid; gap: 8px;
}
.slide-nm { font: 400 clamp(22px, 2.2vw, 32px)/1.15 var(--serif); color: var(--bone); }
.slide-ln { font-size: 15px; line-height: 1.5; color: rgba(243, 239, 235, .86); }
/* The shade belongs to each slide, under its caption, so the words are never
   dimmed by the gradient that makes them readable. */
.slide::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* A navy pool under the title (bottom left) on every picture, so its eyebrow
     holds 4.5:1 however bright the room is; then the caption and top shades. */
  background:
    radial-gradient(ellipse 82% 78% at 0% 100%, rgba(1, 26, 51, .86) 0%, rgba(1, 26, 51, .8) 55%, rgba(1, 26, 51, 0) 100%),
    linear-gradient(to top, rgba(1, 26, 51, .86) 0%, rgba(1, 26, 51, .42) 36%, rgba(1, 26, 51, 0) 60%),
    linear-gradient(rgba(1, 26, 51, .55), rgba(1, 26, 51, 0) 30%);
}
.slide figcaption { z-index: 2; }
.scene-title { position: absolute; z-index: 5; left: var(--gutter); bottom: 112px; max-width: 58%; }
.scene-title .kicker { margin-bottom: 14px; }
.scene-title h2 { font-size: clamp(46px, min(7vw, 13svh), 112px); color: var(--bone); }
.scene-bar { position: absolute; z-index: 6; left: var(--gutter); right: calc(var(--gutter) + var(--lily-clear)); bottom: max(28px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 18px; }
.scene-idx { font: 700 var(--t-eyebrow)/1 var(--sans); letter-spacing: .14em; color: var(--bone); white-space: nowrap; font-variant-numeric: tabular-nums; }
.scene-idx b { font-weight: 700; }
.scene-steps { flex: 1; display: flex; gap: 6px; }
.scene-steps button { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.scene-steps button i { display: block; width: 100%; height: 2px; background: rgba(243, 239, 235, .28); transition: background .6s var(--ease-fade); }
.scene-steps button.is-done i { background: rgba(243, 239, 235, .62); }
.scene-steps button[aria-current="true"] i { background: var(--bone); }
.scene-steps button:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.scene .scene-ctl { margin-left: 4px; }
/* The captions fade with their picture; the slide carries both. */

/* ── Home sections ────────────────────────────────────────────────────────── */
.section--bone { background: var(--bone); }
.section--flush { padding-top: 0; }
.section--night { background: var(--navy-900); color: var(--bone); }
.section--night h2, .section--night h3 { color: var(--bone); }
.section--night p { color: rgba(243, 239, 235, .84); }
.section--night .section-sub { color: rgba(243, 239, 235, .7); }
.section--night .section-link { color: var(--bone); border-bottom-color: var(--line-dark); }
.section--night .section-link:hover { border-bottom-color: var(--bone); }
.section--night :focus-visible { outline-color: var(--sand); }
.section--bone .section-sub { color: rgba(2, 35, 68, .7); }
#club-detail .ed-item h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
#club-detail .ed-item .facts li { border-bottom-color: rgba(2, 35, 68, .12); }

/* Play this week: the rows as a hairline list on bone. */
#board-preview .sb-rows { background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
#board-preview .sb-name { font-family: var(--serif); }
#board-preview .sb-meta b { font-variant-numeric: tabular-nums; }

/* What's on: a grid, never a scroller inside the page (no scroll in a scroll). */
#whats-on .event-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; mask-image: none; }
#whats-on .event-strip > .pc { flex: none; min-width: 0; border-radius: 4px; background: #fff; }
#whats-on .event-strip > .pc:nth-child(n+7) { display: none; }
#whats-on .pc-tile { width: auto; min-width: 64px; height: auto; padding: 10px 10px 8px; border-radius: 3px; background: var(--navy); }
#whats-on .pc-tile-d { font: 800 30px/1 var(--display); font-stretch: var(--display-wdth); font-variant-numeric: tabular-nums; }
#whats-on .pc-name { font-size: clamp(20px, 1.6vw, 24px); }
/* A sponsor's name wraps inside its card; the court and figures do not. */
.pc-meta .nw, .pc-meta i { white-space: normal; overflow-wrap: anywhere; }
.pc-meta b { white-space: nowrap; }
@media (max-width: 1000px) { #whats-on .event-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #whats-on .event-strip { grid-template-columns: minmax(0, 1fr); } #whats-on .event-strip > .pc:nth-child(n+5) { display: none; } }
/* One "Diary updated" stamp on the page: Play this week carries it; What's on
   shows its own only when Play this week is not on the page. */
#board-preview:not(.hidden) ~ #whats-on .ev-fresh { display: none; }

/* Colour groups: a level ladder on night navy. */
#groups .band-media { display: none; }
#groups { background: var(--navy); }
#groups .band-scrim { display: none; }
#groups .groups { counter-reset: rung; gap: 0; border-top: 1px solid var(--line-dark); }
#groups .group-card { counter-increment: rung; background: none; border: 0; border-right: 1px solid var(--line-dark); border-radius: 0; padding: 22px 16px 26px 0; gap: 14px; }
#groups .group-card:last-child { border-right: 0; }
#groups .group-card + .group-card { padding-left: 16px; }
#groups .group-card::before { content: counter(rung, decimal-leading-zero); font: 700 var(--t-eyebrow)/1 var(--sans); letter-spacing: .18em; color: var(--sand); font-variant-numeric: tabular-nums; }
#groups .group-dot { margin: 0; box-shadow: 0 0 0 1px rgba(201, 188, 171, .55); }
#groups .group-card h3 { font: 800 clamp(18px, 1.9vw, 30px)/1 var(--display); font-stretch: var(--display-wdth); text-transform: uppercase; color: var(--bone); letter-spacing: -.005em; }
/* A rung that starts a row has no left padding; every other rung keeps 16px off its divider. */
@media (max-width: 1100px) { #groups .group-card { border-bottom: 1px solid var(--line-dark); } #groups .group-card:nth-child(4n) { border-right: 0; } #groups .group-card:nth-child(4n+1) { padding-left: 0; } }
@media (max-width: 820px) { #groups .group-card:nth-child(4n) { border-right: 1px solid var(--line-dark); } #groups .group-card:nth-child(3n) { border-right: 0; } #groups .group-card:nth-child(4n+1) { padding-left: 16px; } #groups .group-card:nth-child(3n+1) { padding-left: 0; } }
@media (max-width: 560px) { #groups .group-card, #groups .group-card:nth-child(3n) { border-right: 1px solid var(--line-dark); } #groups .group-card:nth-child(n) { padding-left: 16px; } #groups .group-card:nth-child(2n+1) { padding-left: 0; } #groups .group-card:nth-child(2n) { border-right: 0; } }

/* Pricing: figures in tabular sans, never the serif (the numerals rule). */
.price-table td.p-figure { font: 700 clamp(18px, 2vw, 26px)/1.2 var(--sans); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.price-table th { color: var(--taupe-ink); font-weight: 700; }
@media (max-width: 560px) { .price-table td.p-figure { white-space: normal; } .price-table td { padding-right: var(--s-3); } }

/* Court partners: the headline sponsor, then one plate per court. */
#partnership .partner-row h2 { font-family: var(--serif); color: var(--bone); }
#partnership .kicker { color: var(--sand); }
#partnership .ed-figure img { border-radius: 3px; }
.partner-plate { display: block; width: 148px; aspect-ratio: 1; margin-top: var(--s-5); background: var(--bone); border-radius: 3px; overflow: hidden; }
.partner-plate img { width: 100%; height: 100%; object-fit: contain; }
#sponsors .sponsor-grid { gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
#sponsors .sponsor-card { background: var(--navy-900); padding: 16px 16px 18px; gap: 12px; }
#sponsors .sponsor-logo { background: var(--bone); border: 0; border-radius: 2px; }
#sponsors .sponsor-logo--plate { background: var(--bone); padding: 14px; }
#sponsors .sponsor-plate { color: var(--navy); }
#sponsors .sponsor-court { color: rgba(243, 239, 235, .86); display: grid; gap: 6px; font-size: 13px; line-height: 1.35; }
#sponsors .sponsor-court b { color: var(--bone); font: 800 clamp(22px, 2.6vw, 40px)/.9 var(--display); font-stretch: var(--display-wdth); text-transform: uppercase; font-variant-numeric: tabular-nums; }
#sponsors .sponsor-court b span { font: 700 var(--t-eyebrow)/1 var(--sans); letter-spacing: .18em; color: var(--sand); vertical-align: .35em; margin-right: .3em; }
#sponsors .sponsor-court i { font-style: normal; overflow-wrap: anywhere; }

/* ── Inner pages: the same photograph-first top ───────────────────────────── */
body:not([data-page="play"]) .page-band { min-height: 0; height: 62vh; height: 62svh; max-height: 720px; background: var(--navy-900); }
body:not([data-page="play"]) .page-band .band-scrim {
  background: linear-gradient(rgba(1, 26, 51, .55), rgba(1, 26, 51, 0) 180px), linear-gradient(to top, rgba(1, 26, 51, .94) 0%, rgba(1, 26, 51, .78) 50%, rgba(1, 26, 51, .3) 85%);
}
body:not([data-page="play"]) .page-band .band-media { filter: saturate(.88) contrast(1.03); }
body:not([data-page="play"]) .page-band .band-inner { padding-bottom: clamp(28px, 4vw, 56px); padding-right: var(--lily-clear); }
.page-band h1 { font-size: clamp(2.5rem, 6.4vw, 6rem); max-width: 12em; color: var(--bone); }
.page-band .lede { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: rgba(243, 239, 235, .88); }
@media (max-width: 760px) { body:not([data-page="play"]) .page-band { height: 56svh; min-height: 380px; } }

/* ── Footer: night navy, the club's white wordmark ────────────────────────── */
.site-foot { background: var(--navy-900); border-top: 1px solid var(--line-dark); color: var(--bone); }
.foot-inner .foot-logo { width: clamp(220px, 22vw, 300px); margin: 0 0 var(--s-5); }
.foot-inner .foot-logo:not(.foot-logo--svg) { filter: brightness(0) invert(1); margin: -22px 0 var(--s-3) -26px; }
.foot-inner p { color: rgba(243, 239, 235, .8); }
.foot-hours b { color: var(--bone); }
.site-foot .foot-col h4 { color: var(--sand); font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .18em; }
.site-foot .foot-col a { color: rgba(243, 239, 235, .88); }
.site-foot .foot-col a:hover { color: var(--bone); border-bottom-color: var(--sand); }
.site-foot .foot-base { border-top-color: var(--line-dark); color: rgba(243, 239, 235, .62); }
.site-foot .foot-staff { color: rgba(243, 239, 235, .62); }
.site-foot .social-btn { border-color: var(--line-dark); color: var(--bone); background: transparent; }
@media (hover: hover) { .site-foot .social-btn:hover { background: var(--bone); color: var(--navy); border-color: var(--bone); } }
.site-foot :focus-visible { outline-color: var(--sand); }
@media (max-width: 540px) { .foot-inner .foot-logo { width: 200px; margin: 0 0 var(--s-4); } }

/* ── Phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero--house .hero-media { object-position: 62% 40%; }
  .hero-copy { display: flex; flex-direction: column; }
  .hero-top { display: contents; }
  .hero-lead { display: contents; }
  .hero--house .kicker { order: 1; }
  .hero-lock { order: 2; margin: 6px 0 14px; padding-right: 0; }
  .hero-word { font-size: min(14.2vw, 11svh); }
  .hero-club { text-align: left; font-size: 13px; letter-spacing: .3em; margin-top: .6em; }
  .hero--house h1 { order: 3; font-size: 24px; max-width: calc(100% - var(--lily-clear)); margin-bottom: 16px; }
  /* The Lily launcher sits on the right edge at this height: the buttons keep clear of it. */
  .hero--house .hero-actions { order: 4; width: 100%; gap: 8px; padding-right: var(--lily-clear); }
  .hero--house .hero-actions .btn { flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: 10.5px; letter-spacing: .07em; gap: 6px; white-space: nowrap; }
  .hero--house .hero-actions .pm-mark { height: 14px; }
  .hero-rail { order: 5; gap: 8px 12px; margin-top: 16px; padding-top: 12px; flex-wrap: nowrap; }
  .hero-rail .hero-where { display: none; }
  .hero-rail .motion-btn { margin-right: 0; padding: 0 12px; letter-spacing: .14em; white-space: nowrap; }
  .scene-title { top: calc(88px + env(safe-area-inset-top)); bottom: auto; right: var(--gutter); max-width: none; }
  .slide figcaption { left: var(--gutter); right: var(--lily-clear); bottom: 96px; max-width: none; text-align: left; }
  .slide-ln { font-size: 14px; }
  .scene-bar { right: var(--gutter); bottom: max(22px, env(safe-area-inset-bottom)); gap: 10px; }
  /* On a phone the title sits at the top: the pool moves there. */
  .slide::after { background: linear-gradient(to top, rgba(1, 26, 51, .92) 0%, rgba(1, 26, 51, .5) 40%, rgba(1, 26, 51, 0) 58%), linear-gradient(rgba(1, 26, 51, .88) 0%, rgba(1, 26, 51, .8) 30%, rgba(1, 26, 51, 0) 52%); }
  .section-head h2 { font-size: clamp(1.7rem, 9.2vw, 3.2rem); }
  .page-band h1 { font-size: clamp(1.8rem, 9.2vw, 2.6rem); }
  #sponsors .sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) { .hero--house .hero-actions .btn .pm-mark { display: none; } }

/* ── Reduced motion: pictures at rest, words shown at once, no autoplay. ──── */
@media (prefers-reduced-motion: reduce) {
  .hero-word > span, .hero-club { opacity: 1; animation: none; }
  .live-dot::after { animation: none; }
  .slide.is-on { transition: none; }
  .reveal { opacity: 1; transition: none; }
}
/* ═══ END DESIGN HOUSE ══════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════════
   PLAY — THE WIZARD OVER THE HERO, THE MEMBER TICKER, THE REQUEST
   CONFIRMATION AND THE IN-PAGE ANCHORS (LJ, 30 Sep 2026).
   Owned by the play-wizard seat: play.html and the board / wizard /
   ticker / pop-up code in site.js. Kept in this one block, at the end of
   the file, so it merges cleanly with the home-page and type work.
   No new design language: the club's navy, sand and white, the site's
   tokens, and the parts already ported above (§6 pills, §11 sheet, §28
   choices, §18 days, the play card).
   ═════════════════════════════════════════════════════════════════════ */

/* Every in-page anchor lands under the sticky header. --head-h is measured
   by site.js (initAnchors); the fallback is the header's height at rest. */
[id] { scroll-margin-top: calc(var(--head-h, 78px) + 6px); }

/* The hero: the court photo is the BACKGROUND, the wizard the module in
   front of it, and the whole first screen is the wizard. */
.play-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--ink), #011526);
  min-height: calc(100vh - var(--head-h, 78px));
  min-height: calc(100svh - var(--head-h, 78px));
  display: flex; flex-direction: column;
}
.play-hero.is-results { min-height: 0; }
.play-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.play-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(1, 18, 33, .9) 0%, rgba(2, 35, 68, .55) 55%, rgba(2, 35, 68, .45) 100%);
}
.play-hero-inner {
  position: relative; z-index: 2; flex: 1 0 auto; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: var(--s-8);
  align-items: center; padding-top: var(--s-7); padding-bottom: var(--s-7);
}
/* The eyebrow on the photo: the design's on-photo colour, its shadow, and a soft local scrim behind the heading, so it
   clears 4.5:1 over the bright roof lights (checked in the browser). */
.play-hero-head { background: radial-gradient(ellipse farthest-side at 30% 50%, rgba(1, 18, 33, .6), rgba(1, 18, 33, 0)); }
/* The design's on-photo eyebrow colour (bone, #F3EFEB), held in this block's
   own token so the two CSS blocks never define one name twice. */
:root { --play-on-photo: #F3EFEB; }
.play-hero-head .kicker, .play-hero-head .kicker--photo {
  color: var(--play-on-photo);
  text-shadow: 0 1px 16px rgba(1, 18, 33, .85), 0 1px 4px rgba(1, 18, 33, .65);
}
.play-hero-head h1 { font-size: var(--t-page); color: #fff; max-width: 11em; }
.play-hero .play-module :focus-visible { outline-color: var(--ink); }
@media (max-width: 1099px) {
  .play-hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; padding-top: var(--s-5); padding-bottom: var(--s-5); }
  .play-hero-head h1 { font-size: clamp(1.5rem, 5.4vw, 2.05rem); max-width: none; }
  .play-hero-head .kicker { margin-bottom: var(--s-1); }
}

/* The module: one white panel carrying the steps, the search and Ask Lily,
   the question and its choices. */
.play-module {
  background: #fff; color: var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--e3); padding: var(--s-6); min-width: 0;
}
.play-module .quiet-empty { padding: var(--s-5) 0; }
@media (max-width: 560px) { .play-module { padding: var(--s-4); border-radius: var(--r-md); } }

/* The step indicator, inside the module: three numbered steps on one line. */
.play-module .wiz-head { justify-content: space-between; margin-bottom: var(--s-5); flex-wrap: nowrap; }
.wiz-steps { list-style: none; display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.wiz-steps li { display: flex; align-items: center; }
.wiz-steps li + li::before { content: ''; width: 14px; height: 1px; background: var(--line-2); margin-right: var(--s-1); }
.wiz-step {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 10px 0 6px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-meta);
  font: 600 14px/1 var(--sans); cursor: pointer; white-space: nowrap;
}
.wiz-step:disabled { cursor: default; }
.wiz-step-n {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-2); font-variant-numeric: tabular-nums; font-size: 13px;
}
.wiz-step.is-current { color: var(--ink); }
.wiz-step.is-current .wiz-step-n { background: var(--ink); border-color: var(--ink); color: #fff; }
.wiz-step.is-done { color: var(--ink); }
.wiz-step.is-done:hover .wiz-step-l { text-decoration: underline; }
.wiz-step.is-done .wiz-step-n { border-color: var(--ink); }
.wiz-step:disabled:not(.is-current) { opacity: .55; }
.play-module .wiz-back { min-height: var(--tap); }
.play-module .wiz-search { margin-bottom: var(--s-5); }
.play-module .wiz-q { font-size: var(--t-sub); margin-bottom: var(--s-4); }
.play-module .wiz-foot { margin-top: var(--s-4); }
.play-module .wiz-actions { margin-top: var(--s-5); }
@media (max-width: 560px) {
  .play-module .wiz-head { margin-bottom: var(--s-3); }
  .wiz-steps li + li::before { width: 8px; }
  .wiz-step { padding: 0 6px 0 2px; font-size: 13.5px; gap: 6px; }
  .play-module .wiz-back { padding: 0 12px; }
  .play-module .wiz-search { margin-bottom: var(--s-4); }
  .play-module .wiz-q { font-size: 1.25rem; margin-bottom: var(--s-3); }
  .play-module .sb-choice { min-height: 64px; padding: 10px 14px; }
  .play-module .sb-searchbar { gap: 6px; }
}
@media (max-width: 380px) { .wiz-step-l { font-size: 12.5px; } }
/* On a phone, with Back beside them, the steps you are not on show their
   number only; the word stays for a screen reader. */
@media (max-width: 560px) {
  .wiz-head:has(.wiz-back) .wiz-step:not(.is-current) .wiz-step-l {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* The results flow on the page below the hero. */
.play-results { padding-top: var(--s-8); }
.play-results .wiz-results { margin-top: 0; }

/* ── The member ticker: navy ground, white words, sand figures. ───────── */
.tk-slot { position: relative; z-index: 2; }
.tk {
  display: block; background: var(--ink); color: #fff; border-top: 1px solid var(--line-light);
  font-size: var(--t-meta); line-height: 1; outline-offset: -3px;
}
.tk:focus-visible { outline: 2px solid var(--sand); }
.tk-view { overflow: hidden; }
.tk-track { display: flex; width: max-content; animation: tk-run var(--tk-dur, 40s) linear infinite; }
.tk:hover .tk-track, .tk:focus-within .tk-track, .tk:focus .tk-track { animation-play-state: paused; }
.tk-run { display: flex; flex: none; }
.tk-item { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-left: var(--s-5); white-space: nowrap; color: var(--paper-body); }
.tk-item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--taupe); margin-left: var(--s-5); flex: none; }
.tk-item b { color: var(--sand); font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-k { color: #fff; font-weight: 600; }
@keyframes tk-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tk-track { animation: none; width: auto; flex-wrap: wrap; }
  .tk-run { flex-wrap: wrap; }
  .tk-run ~ .tk-run { display: none; }
  .tk-item { min-height: 36px; }
}

/* ── Who a game is for: small labelled chips; a group is its dot AND name. */
.who-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.who-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  background: rgba(2, 35, 68, .06); color: var(--ink-meta); font-size: var(--t-micro); line-height: 1.2; white-space: nowrap;
}
.who-chip b { color: var(--ink); font-weight: 600; }
.who-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.who-dot--pale { box-shadow: inset 0 0 0 1px rgba(2, 35, 68, .28); }

/* ── The Request confirmation: §11's sheet, wide on a laptop with the QR
   beside the details, the whole screen on a phone. ─────────────────── */
.sb-sheet--wide { width: min(760px, 100%); }
.sb-sheet-body { min-width: 0; }
.cf { display: grid; grid-template-columns: minmax(0, 1fr) 188px; gap: var(--s-6); align-items: start; }
.cf-main { min-width: 0; }
.cf-kicker { display: block; font-size: var(--t-micro); color: var(--ink-meta); margin: 0 44px var(--s-2) 0; }
.cf .sb-fields { gap: 8px; }
.cf .sb-field { grid-template-columns: 9em minmax(0, 1fr); }
.sb-field--who dd, .sb-field--price dd { display: block; }
.sb-field--price { padding-top: 8px; border-top: 1px solid var(--line); }
.sb-field--price + .sb-field--price { padding-top: 0; border-top: 0; }
.cf-actions { margin-top: var(--s-5); }
.cf-book.is-busy { opacity: .55; pointer-events: none; }
.cf-steps { margin-top: var(--s-4); }
.cf-qr {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); text-align: center; margin-top: 44px;
}
.cf-qr-code { width: 150px; height: 150px; background: #fff; border-radius: var(--r-xs); }
.cf-qr-code svg { width: 100%; height: 100%; display: block; }
.cf-qr-t { font-size: var(--t-micro); color: var(--ink-body); line-height: 1.4; }
.cf-alt-k { margin-top: var(--s-4); }
@media (max-width: 899px) {
  .cf { grid-template-columns: minmax(0, 1fr); }
  .cf-qr { display: none; }
}
@media (max-width: 640px) {
  .sb-scrim--full { padding: 0; place-items: stretch; }
  .sb-sheet--full { width: 100%; min-width: 0; height: 100%; max-height: none; border-radius: 0; padding: var(--s-5) var(--s-4) var(--s-6); }
  .sb-sheet--full .cf-actions { flex-direction: column; }
  .sb-sheet--full .cf-actions .btn { width: 100%; }
  .cf .sb-field { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ── The card switcher (signed off 30 Sep): one per kind, one card at a time
   on a phone, three side by side on a laptop, ‹ › and "3 of 12". A native
   swipe: the strip scroll-snaps and hides its bar; the arrows are buttons. */
.sw + .sw { margin-top: var(--s-8); }
.sw-head { display: flex; align-items: center; gap: var(--s-3) var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-4); }
.sw-h { font-size: var(--t-sub); margin-right: auto; }
.sw-parts { display: flex; gap: 6px; flex-wrap: wrap; }
.sw-part {
  min-height: var(--tap); padding: 0 14px; border-radius: 11px; border: 1px solid var(--line); background: transparent;
  color: var(--ink); font: 600 14px/1 var(--sans); cursor: pointer;
}
.sw-part:hover:not(:disabled) { border-color: var(--ink); }
.sw-part:disabled { opacity: .45; cursor: default; }
.sw-nav { display: flex; align-items: center; gap: var(--s-2); }
.sw-arrow {
  width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer;
}
.sw-arrow .ico { width: 18px; height: 18px; }
.sw-arrow:hover:not(:disabled) { border-color: var(--ink); }
.sw-arrow:disabled { opacity: .4; cursor: default; }
.sw-count { min-width: 5.5em; text-align: center; font-size: var(--t-meta); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.sw-view {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  border-radius: var(--r-md); outline-offset: 4px;
}
.sw-view::-webkit-scrollbar { display: none; }
.sw-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--s-4)) / 3); gap: var(--s-4); }
.sw-track > .pc { scroll-snap-align: start; }
@media (max-width: 1099px) { .sw-track { grid-auto-columns: calc((100% - var(--s-4)) / 2); } }
@media (max-width: 640px) {
  .sw-track { grid-auto-columns: 100%; }
  .sw-head { gap: var(--s-3); }
  .sw-h { flex-basis: 100%; }
  .sw-nav { margin-left: auto; }
}

/* The headline card: field lines, ONE who chip, "from £X", Request. */
.pc--head .pc-meta { line-height: 1.45; }
.pc-who { display: flex; }
.pc--head .pc-price { margin-top: auto; }

/* The Request loader: what is happening, over a short progress bar. */
.pc-req.is-checking, .sb-req.is-checking {
  flex-direction: column; gap: 6px; padding: 8px 16px; text-transform: none; letter-spacing: 0;
  font: 600 13px/1.3 var(--sans); white-space: normal; text-align: center; cursor: progress; opacity: 1;
}
.req-bar { display: block; width: 100%; max-width: 220px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.req-bar > span { display: block; height: 100%; width: 0; background: var(--sand); border-radius: 3px; animation: req-fill 3s var(--ease-out) forwards; }
@keyframes req-fill { from { width: 4%; } to { width: 92%; } }
@media (prefers-reduced-motion: reduce) { .req-bar > span { animation: none; width: 60%; } }

/* "Already know what you want? Go straight to Padelmates" — the quiet line
   at the top of the module, secondary to the wizard. */
.play-direct {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); flex-wrap: wrap;
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line);
  font-size: var(--t-micro); color: var(--ink-meta);
}
.play-direct-a {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap);
  color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2);
}
.play-direct-a:hover { text-decoration-color: var(--ink); }
@media (max-width: 560px) {
  .play-direct { margin-bottom: var(--s-2); padding-bottom: 0; }
  /* On a phone the link says it all; the question gives way to the wizard. */
  .play-direct > span { display: none; }
  .play-hero-inner { padding-top: var(--s-3); gap: var(--s-3); }
  .play-module .wiz-foot { margin-top: var(--s-3); }
}
/* The Padelmates mark is the app's own square icon: a small rounded tile. */
.pm-mark { border-radius: 4px; }

/* ── Join the play list: one field, a plain consent line, then an optional
   second step. The site's own form parts, in a quiet panel. ─────────── */
.pl {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-4) var(--s-7); align-items: start;
  padding: var(--s-6); border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--line);
}
.pl-h { font-size: var(--t-sub); margin-bottom: var(--s-2); }
.pl-s { font-size: var(--t-meta); color: var(--ink-body); }
.pl-form { min-width: 0; }
.pl-row { display: flex; gap: var(--s-2); align-items: flex-end; flex-wrap: wrap; }
.pl-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; }
.pl-k { font-size: var(--t-micro); font-weight: 600; color: var(--ink); }
.pl-field input {
  min-height: var(--tap); padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: #fff;
  font: 400 16px/1.2 var(--sans); color: var(--ink); width: 100%;
}
.pl-field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pl-go { flex: 0 0 auto; }
.pl-toggle {
  min-height: var(--tap); padding: 0; margin-top: var(--s-1); border: 0; background: none; cursor: pointer;
  color: var(--ink); font: 600 var(--t-micro)/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2);
}
.pl-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pl-consent { margin-top: var(--s-2); font-size: var(--t-micro); color: var(--ink-meta); line-height: 1.5; }
.pl-msg { margin-top: var(--s-2); font-size: var(--t-micro); color: var(--ink-body); min-height: 1em; }
.pl-msg.is-err { color: var(--ink); font-weight: 600; }
.pl-done { font-weight: 600; color: var(--ink); margin-bottom: var(--s-3); }
.pl-h2 { font: 600 var(--t-body)/1.35 var(--sans); margin-bottom: var(--s-3); }
.pl-more .pl-field { margin-bottom: var(--s-3); max-width: 320px; }
.pl-set { border: 0; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: 6px var(--s-2); }
.pl-set legend { margin-bottom: 6px; }
.pl-check {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; font-size: var(--t-meta);
}
.pl-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.pl-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pl-home { margin-top: var(--s-7); }
.play-list-sec { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.sb-sheet .pl { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-5); padding: var(--s-4); }
.sb-empty .pl { text-align: left; margin-top: var(--s-5); }
@media (max-width: 760px) {
  .pl { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .pl-go { width: 100%; }
}

/* The floating Ask Lily button is fixed to the right edge of a phone (bot.js,
   57px wide). On /play the whole page keeps a right-hand lane clear of it:
   the page's gutter on the right is the button's width, so as the page
   scrolls no control ever passes under it — at 390 or at 360. */
@media (max-width: 1229px) { body[data-page="play"] main .wrap { padding-right: 61px; } }
@media (max-width: 640px) {
  body[data-page="play"] .play-module { padding: 12px 12px 12px 14px; }
  /* In the narrower lane: Back is its arrow (the word stays for a screen
     reader), and the search's two buttons keep their words on one line. */
  .play-module .wiz-back { padding: 0; width: var(--tap); justify-content: center; }
  .play-module .wiz-back-l { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .play-module .sb-searchbar-act .btn { padding: 0 8px; letter-spacing: .06em; min-width: 0; }
}
@media (max-width: 640px) {
  .play-module .sb-choices { gap: var(--s-2); }
  .play-module .sb-choice { min-height: 56px; padding: 8px 12px; column-gap: 12px; }
  .play-module .sb-choice-ico { width: 40px; height: 40px; }
  .play-module .sb-choice { grid-template-columns: 40px minmax(0, 1fr); }
}

/* The /play title takes the design's inner-page title face (.display: Mona
   Sans 800, wide, capitals — LJ: titles use the heavier font), sized for the
   hero's left column on a laptop and to keep the wizard on a phone's first
   screen. */
.play-hero-head h1.display { font-size: clamp(2.4rem, 4.4vw, 4.2rem); max-width: 9em; color: var(--play-on-photo); text-shadow: 0 2px 24px rgba(1, 18, 33, .45); }
@media (max-width: 1099px) { .play-hero-head h1.display { font-size: clamp(1.55rem, 6.6vw, 2.4rem); max-width: none; } }
/* The search hint stays whole on the narrowest phones: a little less room
   around the field's icon (measured at 360, 375 and 390). */
@media (max-width: 400px) {
  .play-module .sb-search { padding: 8px 8px; gap: 6px; }
}
/* The narrowest phones: the steps you are not on show their number only
   (the word stays for a screen reader), so the indicator never runs wider
   than the module. On a short 360 screen the choices drop their one-line
   descriptions and the eyebrow gives way, so the wizard fits the first
   screen. */
@media (max-width: 380px) {
  .wiz-step:not(.is-current) .wiz-step-l { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 380px) and (max-height: 820px) {
  .play-module .sb-choice-q { display: none; }
  .play-module .sb-choice { min-height: 48px; padding: 6px 12px; }
  .play-module .sb-choice-ico { width: 34px; height: 34px; }
  .play-module .sb-choice { grid-template-columns: 34px minmax(0, 1fr); }
  .play-hero-head .kicker { display: none; }
  .play-module .wiz-q { font-size: 1.125rem; margin-bottom: var(--s-2); }
  .play-module .wiz-search { margin-bottom: var(--s-3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN HOUSE R2 — claude/site-design-r2 (LJ on his phone, 1 Oct: "this has to
   look high end not boilerplate")
   ───────────────────────────────────────────────────────────────────────────
   Below DESIGN HOUSE so it wins without touching it. Owns: the home hero (the
   moving scene), the header menu (EN/ES inside it, every page), the Play
   button's live ring, the price card, info boxes, fact grids and expanders,
   the amenity grid, the levels ladder with its eighth tile, the partnership
   plate, the footer, and the spacing and type scale. Brand tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --s-section: clamp(104px, 10vw, 160px);
  --s-head: clamp(40px, 4.4vw, 64px);
  --t-eyebrow: 14.5px;
  --t-body-r2: 17px;
  --head-h: 76px;
}
@media (max-width: 860px) { :root { --s-section: 88px; --s-head: 36px; } }
@media (max-width: 760px) { :root { --t-eyebrow: 13.5px; --t-body-r2: 16.5px; } }
@media (max-width: 560px) { :root { --s-section: 80px; } }

/* ── Type: larger eyebrows, links, ledes, headers ─────────────────────────── */
.section-head { margin-bottom: var(--s-head); gap: var(--s-5) var(--s-7); }
.section-head .kicker { margin-bottom: 10px; }
.section-lede { margin-top: 20px; max-width: 34em; font: 400 clamp(19px, 1.7vw, 24px)/1.45 var(--serif); color: var(--ink-body); }
.section--night .section-lede { color: rgba(243, 239, 235, .84); }
.section-sub { font-size: 16px; }
.section-link { font: 700 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding-bottom: 8px; }
.section-link .ico { width: 16px; height: 16px; }
.block-title { font: 400 clamp(24px, 2.2vw, 32px)/1.2 var(--serif); color: var(--ink); margin-bottom: 14px; }
.block-title--gap { margin-top: clamp(40px, 5vw, 64px); }
.block-text { font-size: var(--t-body-r2); line-height: 1.65; color: var(--ink-body); max-width: 34em; }
#club .block-text + .amenity-grid, #club .block-text + .spec { margin-top: 28px; }
@media (max-width: 760px) { .section-link { font-size: 12.5px; } }

/* ── Header: logo, Play and Menu at every width; the rest is in the menu ──── */
.site-head .head-inner { gap: 16px; }
.site-head .head-tools { margin-left: auto; order: 0; gap: 10px; }
.site-head .head-tools .nav-toggle { display: inline-flex; }
.site-head .nav { display: none; }
.site-head .nav.open {
  display: flex; position: fixed; left: 0; right: 0; top: var(--head-h); bottom: 0; z-index: 60;
  flex-direction: column; align-items: stretch; gap: 0; margin: 0;
  padding: clamp(24px, 5vh, 56px) max(var(--gutter), 24px) calc(32px + env(safe-area-inset-bottom));
  background: var(--navy-900); box-shadow: none;
}
.site-head .nav.open a:not(.btn) {
  display: flex; align-items: center; min-height: clamp(64px, 7vw, 96px); width: 100%; opacity: 1;
  font: 800 clamp(26px, 4.4vw, 60px)/1 var(--display); font-stretch: var(--display-wdth); letter-spacing: -.005em;
  text-transform: uppercase; color: var(--bone); border-bottom: 1px solid var(--line-dark);
}
.site-head .nav.open a:not(.btn):hover { color: var(--sand); border-bottom-color: var(--line-dark); }
.site-head .lang-toggle--menu { margin-top: auto; align-self: flex-start; border-color: var(--line-dark); }
.site-head .nav.open .lang-toggle--menu { margin-top: 32px; }
/* The open menu is the one scroller (the page behind it is locked), so on a
   short screen nothing in it is ever out of reach. */
.site-head .nav.open { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* A phone on its side: two columns of links and the language switch beneath,
   so the whole menu fits the 280-odd pixels under the header. */
@media (max-height: 520px) and (orientation: landscape) {
  .site-head .nav.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: 32px; padding-top: 12px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .site-head .nav.open a:not(.btn) { min-height: 52px; font-size: 24px; }
  .site-head .nav.open .lang-toggle--menu { grid-column: 1 / -1; justify-self: start; margin-top: 16px; }
}
html.menu-open { overflow: hidden; }
/* Lily's launcher steps aside while the menu covers the page. */
html.menu-open .lb-fab { visibility: hidden; pointer-events: none; }
html.menu-open .site-head, html.photo-top.menu-open .site-head { background: var(--navy-900); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-head .nav-toggle { min-height: 44px; padding: 0 18px; font-weight: 700; letter-spacing: .16em; }

/* ── The Play button is live: a slow gold ring, opacity only ──────────────── */
.btn--play, .btn--live { position: relative; isolation: isolate; }
.btn--play::after, .btn--live::after {
  /* An outline, not a border: it draws outside the button without making the
     button any wider, so nothing on the page reads as overflowing. */
  content: ''; position: absolute; inset: 0; border-radius: var(--r-pill);
  outline: 1.5px solid var(--sand); outline-offset: 3px; opacity: 0; pointer-events: none;
  animation: bp-ring 2.8s var(--ease-fade) infinite;
}
@keyframes bp-ring { 0% { opacity: 0; } 35% { opacity: .75; } 100% { opacity: 0; } }
html.motion-paused .btn--play::after, html.motion-paused .btn--live::after { animation-play-state: paused; }

/* ── The home hero: the moving scene, one full screen ─────────────────────── */
/* The hero photo is a slide: no zoom (the old hero's slow scale), opacity only. */
.scene--hero .hero-media { animation: none; transform: none; will-change: auto; inset: 0; width: 100%; height: 100%; }
.scene--hero .scene-copy {
  position: absolute; z-index: 5; left: var(--gutter); right: calc(var(--gutter) + var(--lily-clear)); bottom: 104px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; color: var(--bone);
}
.scene--hero .scene-copy > .kicker, .scene--hero .hero-lock { grid-column: 1 / -1; }
.scene--hero .scene-copy > .kicker { margin-bottom: 18px; }
.scene--hero .hero-lock { margin: 0 0 14px; padding-right: 0; font-weight: inherit; }
.scene--hero .hero-word { font-size: min(13.2vw, 22svh); }
.scene--hero .scene-actions { display: flex; gap: 12px; }
/* The room's name is a thin glass tag (LJ, 1 Oct): a light frosted pill with a
   hairline cream border and cream words, on every width. Its legibility comes
   from a soft navy pool UNDER the pill (::before), which fades out to nothing,
   so it never reads as a box: measured against the lightest pixel behind the
   words on all six rooms at 1440, 1280, 1024, 390 and 360, every one 4.5:1 or
   more. */
.scene--hero .slide figcaption {
  top: calc(var(--head-h) + 28px); bottom: auto; right: var(--gutter); max-width: min(26em, 34vw);
  padding: 9px 18px 10px; border-radius: var(--r-pill); border: 1px solid rgba(243, 239, 235, .62);
  background: linear-gradient(180deg, rgba(243, 239, 235, .2), rgba(243, 239, 235, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
}
.scene--hero .slide figcaption::before {
  content: ''; position: absolute; inset: -26px -40px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(1, 26, 51, .8), rgba(1, 26, 51, .68) 55%, rgba(1, 26, 51, 0));
}
.scene--hero .slide-ln { display: none; }
.scene--hero .slide-nm { font-size: clamp(18px, 1.5vw, 22px); }
.scene--hero .slide::after {
  background:
    radial-gradient(ellipse 100% 90% at 0% 100%, rgba(1, 26, 51, .92) 0%, rgba(1, 26, 51, .88) 58%, rgba(1, 26, 51, 0) 100%),
    linear-gradient(to top, rgba(1, 26, 51, .94) 0%, rgba(1, 26, 51, .74) 40%, rgba(1, 26, 51, .5) 55%, rgba(1, 26, 51, 0) 78%),
    linear-gradient(rgba(1, 26, 51, .6), rgba(1, 26, 51, 0) 32%);
}
.scene--hero .scene-bar { right: calc(var(--gutter) + var(--lily-clear)); }
/* Three seconds a room (design.js SHOW), so a shorter fade (design.js FADE). */
.scene--hero .slide.is-on { transition-duration: .8s; }
/* Press and hold pauses the scene: no text selection, no long-press callout and
   no image drag on the way. The hero takes focus for Space/Enter held. */
.scene--hero { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.scene--hero img { -webkit-user-drag: none; }
.scene--hero:focus { outline: none; }
.scene--hero:focus-visible { outline: 2px solid var(--sand); outline-offset: -6px; }
.scroll-cue {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-dark); color: var(--bone); flex: none;
}
.scroll-cue .ico { width: 20px; height: 20px; animation: bp-cue 2.4s var(--ease-fade) infinite; }
@keyframes bp-cue { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.scroll-cue:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
@media (max-width: 760px) {
  .scene--hero .scene-copy { display: flex; flex-direction: column; align-items: stretch; right: var(--gutter); bottom: 84px; }
  .scene--hero .scene-copy > .kicker { order: 1; margin-bottom: 12px; }
  .scene--hero .hero-lock { order: 2; margin: 0 0 4px; }
  .scene--hero .scene-actions { order: 4; }
  .scene--hero .hero-word { font-size: min(14.2vw, 11svh); }
  .scene--hero .hero-club { text-align: left; }
  .scene--hero .scene-actions { padding-right: var(--lily-clear); }
  .scene--hero .scene-actions .btn { flex: 0 0 auto; padding: 0 22px; letter-spacing: .12em; white-space: nowrap; }
  .scene--hero .scene-actions .btn--ghost-light { flex: 1 1 auto; min-width: 0; padding: 0 14px; }
  /* On a phone the tag sits under the header, top left, clear of the
     lockup, the buttons and the dashes at the foot. */
  .scene--hero .slide figcaption { display: block; top: calc(var(--head-h) + 14px); left: var(--gutter); right: auto; max-width: calc(100% - 2 * var(--gutter)); padding: 7px 14px 8px; }
  .scene--hero .slide-nm { font-size: 16px; }
  .scene--hero .slide figcaption { border-radius: 18px; }
}
/* A phone on its side has no room for the tag beside the lockup. */
@media (max-height: 520px) and (orientation: landscape) {
  .scene--hero .slide figcaption { display: none; }
  .scene--hero .slide::after { background: linear-gradient(to top, rgba(1, 26, 51, .94) 0%, rgba(1, 26, 51, .72) 38%, rgba(1, 26, 51, 0) 64%), linear-gradient(rgba(1, 26, 51, .6), rgba(1, 26, 51, 0) 26%); }
  .scene--hero .scene-bar { right: var(--gutter); }
}

/* ── Expanders: one plus, one line, the detail behind it ──────────────────── */
.more { margin-top: 20px; }
.more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font: 700 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before {
  content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2);
  background: linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px no-repeat;
}
.more[open] > summary::before { background: linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat; }
.more > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.more[open] .more-open, .more:not([open]) .more-close { display: none; }
.more > summary + * { margin-top: 20px; }
.more--panel { margin-top: 0; border-top: 1px solid var(--line-2); }
.more--panel:last-child { border-bottom: 1px solid var(--line-2); }
.more--panel > summary {
  display: flex; width: 100%; justify-content: space-between; flex-direction: row-reverse; min-height: 76px;
  font: 400 clamp(21px, 1.9vw, 27px)/1.2 var(--serif); letter-spacing: 0; text-transform: none;
}
.more--panel > summary + * { margin-top: 4px; margin-bottom: 28px; }
.more-note { font-size: 15px; color: var(--ink-meta); max-width: 60ch; margin: 0 0 28px; }
.more-stack { display: grid; }

/* ── Fact grids (label above value), the amenity grid, benefit tiles ──────── */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.spec--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spec > div { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.spec dt, .benefit-grid dt, .stat-pair dt, .plan-k {
  font: 700 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-ink); margin-bottom: 8px;
}
.spec dd { font-size: var(--t-body-r2); line-height: 1.45; color: var(--ink); }
.spec dd b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Set text on hairlines, not a ruled table: each amenity sits under one thin
   rule, the columns held apart by space alone. */
.amenity-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; }
.amenity-grid li { padding: 14px 0 18px; border-top: 1px solid var(--line-2); display: grid; gap: 4px; align-content: start; }
.am-k { font: 500 16px/1.4 var(--sans); color: var(--ink); }
.am-v { font: 500 14px/1.3 var(--sans); color: var(--taupe-ink); }
.club-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 104px); align-items: start; }
/* The closing line runs the full width under both columns: its title on the
   left column's line, its words on the right's, so neither column ends in a
   hole. */
.club-coda {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px clamp(48px, 6vw, 104px); align-items: baseline;
  margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(32px, 3.4vw, 48px); border-top: 1px solid var(--line-2);
}
.club-coda .block-title { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.1; margin: 0; }
.club-coda .block-text { margin: 0; font: 400 clamp(19px, 1.6vw, 22px)/1.5 var(--serif); color: var(--ink-body); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.benefit-grid > div { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 22px 22px 24px; }
.benefit-grid dd { font: 600 clamp(19px, 1.6vw, 22px)/1.3 var(--sans); color: var(--ink); }
#membership .block-title { margin-top: clamp(48px, 5vw, 72px); }
#membership .more--panel { margin-top: 28px; }
@media (max-width: 900px) {
  .club-split, .club-coda { grid-template-columns: minmax(0, 1fr); }
  .spec--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .amenity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .amenity-grid li { padding: 12px 0 16px; }
  .spec, .spec--wide { grid-template-columns: minmax(0, 1fr); }
  .benefit-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ── Pricing: one clean card, then two info boxes ─────────────────────────── */
.price-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: clamp(8px, 2vw, 16px) clamp(20px, 3vw, 40px); }
.price-grid { width: 100%; border-collapse: collapse; }
.price-grid th, .price-grid td { padding: 22px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.price-grid tbody tr:last-child th, .price-grid tbody tr:last-child td { border-bottom: 0; }
.price-grid thead th { font: 700 13.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-ink); padding: 18px 0 16px; border-bottom-color: var(--line-2); }
.price-grid thead th + th, .price-grid td { text-align: right; width: 24%; }
.price-grid tbody th { font-weight: 400; padding-right: 16px; }
.pg-k { display: block; font: 600 17px/1.35 var(--sans); color: var(--ink); }
.pg-note { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-meta); }
.price-grid td.p-figure { font: 700 clamp(22px, 2.4vw, 32px)/1 var(--sans); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.info-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.info-box { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: clamp(20px, 2.4vw, 32px); }
.info-title { font: 400 clamp(20px, 1.8vw, 24px)/1.25 var(--serif); color: var(--ink); margin-bottom: 14px; }
.mini-grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mini-grid th, .mini-grid td { text-align: left; padding: 12px 12px 12px 0; border-top: 1px solid var(--line); vertical-align: top; font-size: 16px; }
.mini-grid thead th { border-top: 0; font: 700 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-ink); padding-top: 0; }
.mini-grid tbody th { font-weight: 600; color: var(--ink); }
.mini-grid td b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-pair > div { border-top: 1px solid var(--line); padding-top: 14px; }
.stat-pair dd { font-size: 16px; color: var(--ink-body); }
.stat-pair dd b { font: 700 clamp(30px, 3vw, 40px)/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 4px; }
@media (max-width: 760px) {
  .price-card { padding: 4px 18px; }
  .price-grid th, .price-grid td { padding: 18px 0; }
  .price-grid thead th { font-size: 12px; letter-spacing: .1em; }
  .price-grid thead th + th, .price-grid td { width: 27%; }
  .pg-k { font-size: 15.5px; }
  .pg-note { font-size: 13px; }
  .price-grid td.p-figure { font-size: 21px; }
  .info-row { grid-template-columns: minmax(0, 1fr); }
  .mini-grid th, .mini-grid td { font-size: 15px; }
}
/* The price table (LJ, 1 Oct): 90 mins, then Members, then Non members. A
   soft band runs down the Peak column behind its header and figures, and the
   Members row carries a stronger sand band; ink on both stays above 12:1. */
.price-grid th, .price-grid td { padding-left: 14px; padding-right: 14px; }
/* The headings carry the same side padding as their figures (the thead rule
   above set it to 0), so each heading's right edge is its column's. */
.price-grid thead th { padding-left: 14px; padding-right: 14px; }
.price-grid thead th:nth-child(2), .price-grid td:nth-child(2) { background: rgba(2, 35, 68, .045); }
.price-grid .pg-members th, .price-grid .pg-members td { background: rgba(201, 188, 171, .38); }
.price-grid .pg-members td:nth-child(2) { background: rgba(201, 188, 171, .52); }
.price-grid .pg-members .pg-k { font-weight: 700; }
.price-grid .pg-note { color: var(--ink); font-weight: 600; }
.price-grid tbody th { white-space: nowrap; }
.price-card { padding: 0; overflow: hidden; }

/* The narrowest phones: each price column keeps a clear gap from the next, and
   the hours box keeps all three columns, and its rules, inside its border. */
@media (max-width: 420px) {
  .price-grid thead th + th, .price-grid td { width: auto; padding-left: 12px; }
  .price-grid th:first-child { padding-left: 12px; }
  .price-grid thead th { font-size: 11.5px; letter-spacing: .08em; line-height: 1.35; }
  .price-grid tbody th { padding-right: 4px; }
  /* "Off-peak" never splits at its hyphen; Spanish wraps at the space. */
  :lang(en) .price-grid thead th { white-space: nowrap; }
  .price-grid td.p-figure { font-size: 18px; }
  .pg-k { font-size: 15px; }
  .info-box { padding: 20px 16px; }
  .mini-grid th, .mini-grid td { font-size: 14px; padding: 10px 8px 10px 0; }
  .mini-grid td:last-child, .mini-grid th:last-child { padding-right: 0; }
  .mini-grid thead th { font-size: 11.5px; letter-spacing: .08em; }
  /* Lily's launcher is narrower on a small phone, and the price card and hours
     box keep their figures clear of the strip it scrolls past. */
  :root { --lily-fab-w: 46px; }
  html .lb-fab { width: var(--lily-fab-w); height: 52px; }
}
/* Below 1100px the price card and the hours box keep every figure clear of the
   strip Lily's launcher scrolls past on the right edge. */
@media (max-width: 1100px) {
  .price-grid th:last-child, .price-grid td:last-child { padding-right: max(14px, calc(var(--lily-fab-w) + 6px - var(--gutter))); }
  .info-box { padding-right: max(clamp(16px, 2.4vw, 32px), calc(var(--lily-fab-w) + 6px - var(--gutter))); }
}
/* 380 and below: the hours box's last column keeps "5:30pm–10pm" inside it. */
@media (max-width: 380px) {
  .mini-grid th, .mini-grid td { font-size: 13.5px; padding-right: 6px; }
  .mini-grid td:last-child, .mini-grid th:last-child { padding-right: 0; }
}

/* ── Membership plans ─────────────────────────────────────────────────────── */
.plan-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 720px; }
.plan-card { display: grid; gap: 6px; align-content: start; background: var(--navy-900); color: var(--bone); border-radius: 4px; padding: clamp(18px, 2.2vw, 28px); }
.plan-card .plan-k { color: var(--sand); margin: 0; }
/* A lone price is not a column: proportional figures and a plain zero (Mona
   Sans draws its tabular zero slashed). */
.plan-v { font: 800 clamp(36px, 4vw, 56px)/1 var(--display); font-stretch: var(--display-wdth); font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "tnum" 0, "zero" 0; color: var(--bone); margin-top: 4px; }
#whats-on .pc-tile-d, #sponsors .sponsor-court b { font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "tnum" 0, "zero" 0; }
.plan-u { font-size: 15px; color: rgba(243, 239, 235, .78); }
@media (max-width: 420px) { .plan-row { gap: 10px; } .plan-card { padding: 16px; } .plan-v { font-size: 34px; } }

/* ── Levels: a 4 × 2 ladder, the eighth tile says how levels work ─────────── */
#groups .groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#groups .groups .group-card { padding: 26px 20px 30px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
#groups .groups .group-card:nth-child(4n) { border-right: 0; }
#groups .groups .group-card:nth-child(4n+1) { padding-left: 0; }
#groups .group-card h3 { font-size: clamp(22px, 2.2vw, 34px); }
#groups .groups .group-card:nth-child(7) { border-right: 0; }
#groups .price-note { font-size: 16px; max-width: 62ch; margin-top: 32px; color: rgba(243, 239, 235, .78); }
@media (max-width: 820px) {
  #groups .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #groups .groups .group-card, #groups .groups .group-card:nth-child(4n) { border-right: 1px solid var(--line-dark); padding-left: 16px; }
  #groups .groups .group-card:nth-child(2n) { border-right: 0; }
  #groups .groups .group-card:nth-child(2n+1) { padding-left: 0; }
  #groups .groups .group-card:nth-child(7) { grid-column: 1 / -1; border-right: 0; }
}
/* From 821px: four groups on the first row, three sharing the whole second row
   (a twelve-column grid, spans of 3 then 4), so no row ends in an empty cell. */
@media (min-width: 821px) {
  #groups .groups { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #groups .groups .group-card { grid-column: span 3; }
  #groups .groups .group-card:nth-child(n+5) { grid-column: span 4; }
}

/* ── Partnership: the school's mark sits on the photograph ────────────────── */
.partner-figure { position: relative; }
.partner-figure .partner-plate {
  position: absolute; left: 16px; bottom: 16px; margin: 0; width: clamp(84px, 9vw, 124px);
  box-shadow: 0 10px 30px -12px rgba(1, 26, 51, .6);
}

/* ── Padelmates mark: larger on its buttons ───────────────────────────────── */
/* 26px tall wherever it is a link to Padelmates: the square mark on a button
   (.btn .pm-mark), the Play page's direct link (.play-direct-a .pm-mark) and
   Padelmates' white wordmark on its own button (.btn--pm .pm-word, 256 × 118,
   from play-widget-r2; this rule outranks its 20px one wherever it sits).
   Height only: the width follows each file's own shape. */
.btn .pm-mark, .play-direct-a .pm-mark { height: 26px; width: auto; }
body .btn.btn--pm .pm-word { height: 26px; width: auto; }
.btn--book { gap: 12px; }

/* ── Footer: shorter, two columns on a phone ──────────────────────────────── */
.foot-inner { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; padding: clamp(56px, 6vw, 88px) 0 clamp(40px, 4vw, 56px); }
.foot-inner .foot-logo { width: clamp(180px, 18vw, 240px); margin-bottom: 18px; }
.site-foot .foot-col h4 { margin-bottom: 12px; }
.site-foot .foot-col a { font-size: 15px; }
@media (max-width: 900px) {
  .foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot-inner > .foot-col:first-child, .foot-inner > .foot-col:last-child { grid-column: 1 / -1; }
  .foot-inner > .foot-col:last-child ul { columns: 2; column-gap: 20px; }
}
@media (max-width: 540px) {
  /* The right-hand strip stays clear of the Lily launcher. */
  .foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding: 48px var(--lily-clear) 28px 0; }
  .foot-inner .foot-logo { width: 170px; margin: 0 0 14px; }
  .site-foot .foot-col li { margin: 0; }
  .foot-inner p { font-size: 14.5px; }
  .foot-base { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; }
}

/* ── Home board rows: the price field may break between its words on a phone
   (the same rule play-widget-r2 carries, 33bf6645d; the figures stay whole). */
@media (max-width: 560px) { .sb-row .sb-meta .nw { white-space: normal; } }

/* ── "Ask Lily …" prompt (LJ, 1 Oct): the one component that replaces an
   explanation or an expander. A pill row, its label and an arrow in a disc;
   pressing it asks Lily that question in the site chat (site.js, the
   [data-ask-lily] handler; the attribute names the question's i18n key). ── */
.ask-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ask-prompt {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; max-width: 100%;
  padding: 6px 6px 6px 20px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--paper);
  font: 600 15px/1.3 var(--sans); color: var(--ink); text-align: left; cursor: pointer; transition: border-color var(--t), background var(--t);
}
.ask-prompt:hover { border-color: var(--ink); }
.ask-prompt:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ask-prompt-go { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bone); transition: transform var(--t); }
.ask-prompt-go .ico { width: 18px; height: 18px; }
.ask-prompt:hover .ask-prompt-go { transform: translateX(2px); }
.ask-prompt--night { background: rgba(243, 239, 235, .06); border-color: rgba(243, 239, 235, .32); color: var(--bone); }
.ask-prompt--night:hover { border-color: var(--bone); }
.ask-prompt--night .ask-prompt-go { background: var(--sand); color: var(--navy-900); }
.ask-prompt--night:focus-visible { outline-color: var(--sand); }
#groups .ask-row { margin-top: 36px; }
#good-to-know .ask-row, #contact .ask-row { margin-top: 20px; }
@media (max-width: 560px) { .ask-row .ask-prompt { width: 100%; } }

/* One line of facts at a glance: labelled fields, never a sentence. */
.fact-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 16px; font-size: 16px; color: var(--ink-body); }
.fact-line b { color: var(--ink); font-weight: 700; }
.fact-line .sb-sep { color: var(--ink-faint); }
.fact-line a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap); display: inline-flex; align-items: center; }
#club .club-block .ask-row, #club .club-block .ask-prompt { margin-top: 20px; }
#membership .fact-line { margin-top: 20px; }
/* One row only: on a phone the booking window drops (the ticker and the
   price table already carry it), and the levelling line sets a size smaller. */
@media (max-width: 560px) {
  #membership .fact-line .fl-ahead, #membership .fact-line .fl-ahead-sep { display: none; }
  .fact-line { font-size: 14.5px; gap: 4px 8px; }
  #club .fact-line { flex-wrap: nowrap; }
}
/* The levelling line keeps to one row: where "members, first one included"
   would not fit beside the price, it gives way (Lily's prompt carries it). */
@media (max-width: 400px) { #club .fact-line .fl-mem { display: none; } }
@media (max-width: 440px) { :lang(es) #club .fact-line .fl-mem { display: none; } }

/* ── Play this week: a calm list on hairlines (LJ, 1 Oct) ───────────────── */
.bp-ticker { margin: 0 0 var(--s-5); border-radius: 4px; overflow: hidden; }
.bp-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.bp-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 18px;
  padding: 22px max(4px, calc(var(--lily-fab-w) + 6px - var(--gutter))) 22px 4px; text-decoration: none; color: var(--ink);
}
.bp-row + .bp-row { border-top: 1px solid var(--line); }
.bp-row:hover { background: var(--paper-2); }
.bp-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.bp-mark { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink); }
.bp-mark .ico { width: 20px; height: 20px; }
.bp-dot { width: 14px; height: 14px; border-radius: 50%; display: block; }
.bp-dot--pale { box-shadow: inset 0 0 0 1px rgba(2, 35, 68, .28); }
.bp-body { display: grid; gap: 4px; min-width: 0; }
.bp-name { font: 400 clamp(20px, 1.8vw, 24px)/1.2 var(--serif); color: var(--ink); }
.bp-when { font: 600 15px/1.35 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.bp-facts { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink-meta); }
.bp-f { white-space: nowrap; }
.bp-f b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.bp-facts .sb-sep { color: var(--ink-faint); }
.bp-go { display: grid; place-items: center; color: var(--ink-meta); }
.bp-go .ico { width: 20px; height: 20px; transition: transform var(--t); }
.bp-row:hover .bp-go .ico { transform: translateX(3px); color: var(--ink); }
.bp-foot { margin-top: 24px; }
@media (max-width: 560px) {
  .bp-row { grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 14px; padding-top: 18px; padding-bottom: 18px; }
  .bp-mark { width: 40px; height: 40px; }
  /* The places stay whole; a long court price may break between its words. */
  .bp-f:last-child .nw { white-space: normal; }
}

/* ── Events: row cards, each with a picture (LJ, 1 Oct) ─────────────────── */
.ev-list { display: grid; gap: 14px; }
.ev-row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color var(--t);
}
.ev-row:hover { border-color: var(--line-2); }
.ev-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ev-thumb { position: relative; background: var(--paper-2); min-height: 100%; }
.ev-thumb img:not([src]) { visibility: hidden; }
.ev-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-body { display: grid; gap: 6px; align-content: start; padding: 20px 24px 22px; min-width: 0; }
.ev-date { font: 700 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-ink); }
.ev-name { font: 400 clamp(21px, 1.9vw, 26px)/1.2 var(--serif); color: var(--ink); margin: 0 0 6px; }
.ev-facts { display: grid; grid-template-columns: max-content minmax(150px, 1.4fr) max-content minmax(110px, 1fr) max-content; gap: 10px 28px; margin: 0; }
.ev-f dt { font: 700 11.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-ink); margin-bottom: 3px; }
.ev-f dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-body); }
.ev-f dd b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-f dd i { font-style: italic; color: var(--ink-meta); }
.ev-f .nw { white-space: normal !important; }
.ev-f .ev-t { white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 641px) { .ev-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  /* A phone: the picture as a slim column, and the facts as label / value
     lines, so the card stays short and nothing is cut. */
  .ev-name { margin-bottom: 4px; }
  .ev-facts { grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; align-items: baseline; }
  .ev-f { display: contents; }
  .ev-f dt { font-size: 10.5px; margin: 0; }
  .ev-f dd { font-size: 14px; }
}

/* ── The row card (.rc), one component for the Events rows and, on a phone,
   every journal and guide card (LJ, 1 Oct): a small picture on the left, then
   the eyebrow, the title and one line of summary. A laptop keeps the article
   grid, so there .rc-body simply steps aside. ── */
.card .rc-body { display: contents; }
@media (max-width: 400px) {
  .ev-facts { grid-template-columns: 62px minmax(0, 1fr) !important; column-gap: 8px !important; }
  .ev-f dt { white-space: normal; }
}
/* Reduced motion: the ticker stands still and WRAPS, so no fact is cut off. */
@media (prefers-reduced-motion: reduce) {
  .tk-track { width: 100%; }
  .tk-run { flex: 1 1 100%; min-width: 0; }
  .tk-item { white-space: normal; padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 640px) {
  .rc {
    display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: start;
    background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--ink);
  }
  /* A fixed square, so the picture is never stretched to the card's height. */
  .rc .rc-thumb { position: relative; width: 88px; height: 88px; aspect-ratio: auto; margin: 12px 0 12px 12px; border-radius: 4px; min-height: 0; overflow: hidden; background: var(--paper-2); }
  .rc .rc-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .rc .rc-body { display: grid; gap: 4px; align-content: start; padding: 12px 14px 14px 16px; min-width: 0; }
  .rc .rc-eyebrow { font: 700 10.5px/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--taupe-ink); margin: 0; }
  .rc .rc-title { font: 400 18px/1.25 var(--serif); color: var(--ink); margin: 0; }
  .rc .rc-line { font-size: 14px; line-height: 1.4; color: var(--ink-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card.rc .card-foot { display: none; }
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ── Visit (LJ, 1 Oct): two columns at every width, the address and the map
   one block, then phone and email beside the hours. ── */
#contact.section { padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(64px, 7vw, 104px); }
.visit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }
.visit-place { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); align-items: stretch; }
.visit-block { min-width: 0; border-top: 1px solid var(--line-2); padding-top: 16px; }
.visit-block h3 { font: 700 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-ink); margin-bottom: 10px; }
.visit-block p { font-size: 16px; line-height: 1.5; color: var(--ink-body); }
.visit-block p + p { margin-top: 8px; }
.visit-block a { color: var(--ink); text-underline-offset: 3px; }
.visit-block b { color: var(--ink); font-weight: 700; }
.visit-place .contact-map { height: auto; min-height: 220px; margin: 0; }
.visit-dir { margin-top: 14px; }
.visit-num { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.visit-num a { min-height: var(--tap); display: inline-flex; align-items: center; text-decoration: none; }
.visit-icons { display: flex; gap: 8px; }
[data-club-line][hidden], .icon-btn[hidden] { display: none; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line-2); color: var(--ink); background: var(--paper); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { border-color: var(--ink); }
.icon-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.visit-store { font-size: 13.5px !important; color: var(--ink-meta) !important; }
.visit-store a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; text-decoration: underline; }
.visit-mail { min-height: var(--tap); display: inline-block; padding: 11px 0; line-height: 1.4; }
@media (max-width: 560px) {
  .visit-block p { font-size: 15px; }
  .visit-num { font-size: 16px; }
  .visit-place .contact-map { min-height: 200px; }
  .visit-dir { padding: 0 14px; letter-spacing: .1em; }
  .visit-place { grid-template-columns: minmax(0, 1fr); }
  .visit-place .contact-map { min-height: 220px; }
  .visit-place .map-fallback { padding: 12px; }
  .visit-place .map-fallback .map-fallback-title { font-size: 15px; }
  .visit-place .map-fallback .kicker { font-size: 10px; letter-spacing: .1em; }
}
.dir-list { display: grid; gap: 8px; margin-top: var(--s-4); }
.dir-opt { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 600; }
.dir-opt:hover { border-color: var(--ink); }
.dir-opt .ico { width: 18px; height: 18px; }

/* Staff sign-in: sand on the navy footer (10:1), underlined. */
.site-foot .foot-staff { color: var(--sand); opacity: 1; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.site-foot .foot-staff:hover { color: var(--bone); }

/* ═══ COURT GLASS v2 (LJ, 1 Oct: "the glass panels first") ════════════════
   The approved recipe, verbatim from club-docs/beaulieu/court-glass/
   court-glass.css (GLASS.md): the Vero "Glass House" pane in the club's navy,
   cream type, the B as frosted light in reserved space. */
:root {
  --cg-tint: 2 35 68;                         /* navy #022344             */
  --cg-tint-deep: 1 18 33;                    /* its shadow               */
  --cg-blur: 14px;                            /* Vero's blur; see .cg--frost */
  --cg-saturate: 115%;

  /* cream = the club's bone #F3EFEB, at Vero's stepped alphas */
  --cg-ink: #F3EFEB;
  --cg-ink-86: rgba(243, 239, 235, .86);      /* body                     */
  --cg-ink-72: rgba(243, 239, 235, .84);      /* meta: .84 clears 4.5:1 over the brightest glass (4.73:1 at 74,94,108; .76 measured 4.20:1 in the push gate) */
  --cg-gold: #DDD3C6;                         /* sand #C9BCAB lifted halfway to bone: the 'gold' that holds 4.5:1 at 11px on glass */
  --cg-line: rgba(243, 239, 235, .16);        /* hairlines inside a pane  */
  --cg-edge: rgba(243, 239, 235, .22);        /* the pane's own border    */

  /* frost grain for the etch: fine white noise */
  --cg-noise-etch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .22 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23e)'/%3E%3C/svg%3E");
  --cg-bmark: url(brand/bmark-white.png);      /* same origin, so the mask loads */
  /* The etch's per-pane knobs, at their neutral values (a pane sets its own). */
  --cg-etch-x: auto; --cg-etch-y: auto; --cg-etch-r: auto; --cg-etch-b: auto;
  --cg-etch-size: 320px; --cg-etch-rot: 0deg; --cg-etch-o: 1;
  --cg-etch-max: 140px; --cg-etch-pad: 10px 0; --cg-etch-align: end;
}

/* ── The room: grade + specular over the photo, under the glass ── */
.cg-room { position: relative; isolation: isolate; }
.cg-room-light {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* specular (Vero gh-specular, 112deg) */
    linear-gradient(112deg,
      rgb(255 255 255 / .16) 0%, rgb(255 255 255 / .03) 24%, rgb(255 255 255 / 0) 40%,
      rgb(255 255 255 / .07) 64%, rgb(255 255 255 / 0) 80%),
    /* grade (Vero gh-grade, in navy) */
    linear-gradient(103deg, rgb(var(--cg-tint-deep) / .38) 0%, rgb(var(--cg-tint-deep) / .18) 45%, rgb(var(--cg-tint-deep) / .05) 100%),
    linear-gradient(0deg, rgb(var(--cg-tint-deep) / .35) 0%, rgb(var(--cg-tint-deep) / 0) 32%);
}

/* ── The pane (Vero GlassPane) ── */
.cg {
  --cg-fill: .34;                              /* .06–.6; set per photo    */
  --cg-radius: 20px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--cg-ink);
  background: linear-gradient(180deg,
    rgb(var(--cg-tint) / var(--cg-fill)),
    rgb(var(--cg-tint) / max(0, calc(var(--cg-fill) - .14))));
  border: 1px solid var(--cg-edge);
  border-radius: var(--cg-radius);
  box-shadow: 0 34px 80px -44px rgb(var(--cg-tint-deep) / .9), inset 0 1px 0 rgb(255 255 255 / .26);
  -webkit-backdrop-filter: blur(var(--cg-blur)) saturate(var(--cg-saturate));
          backdrop-filter: blur(var(--cg-blur)) saturate(var(--cg-saturate));
}
/* Beaulieu's photos are full of fine lines (court nets, glass frames, roof
   trusses). At Vero's 14px they still read through the pane, which LJ ruled
   out ("the opacity of the image behind it, not the lines through"), so the
   club's panes run frosted: same recipe, heavier blur. */
.cg--frost { --cg-blur: 30px; --cg-saturate: 125%; }

/* Glint sweep (optional): one soft band of light across the pane, long rest.
   Transform + opacity only; off under reduced motion. */
.cg::after {
  content: '';
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .05) 35%, rgb(255 255 255 / .10) 50%, rgb(255 255 255 / .04) 65%, transparent);
  transform: translateX(-120%) skewX(-14deg);
  opacity: 0; pointer-events: none; z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .cg--sweep::after { animation: cg-sweep 14s cubic-bezier(.45, 0, .2, 1) 1.2s infinite; }
}
@keyframes cg-sweep {
  0%   { transform: translateX(-120%) skewX(-14deg); opacity: 0; }
  4%   { opacity: 1; }
  30%  { transform: translateX(340%) skewX(-14deg); opacity: 1; }
  34%, 100% { transform: translateX(340%) skewX(-14deg); opacity: 0; }
}

/* ── The etched B: frosted light within the pane ── */
.cg-etch {
  position: absolute; z-index: -1; pointer-events: none;
  left: var(--cg-etch-x, auto); top: var(--cg-etch-y, auto);
  right: var(--cg-etch-r, auto); bottom: var(--cg-etch-b, auto);
  width: var(--cg-etch-size, 320px);
  aspect-ratio: 455 / 498;
  transform: rotate(var(--cg-etch-rot, 0deg));
  opacity: var(--cg-etch-o, 1);
}
.cg-etch::before {
  content: ''; position: absolute; inset: 0;
  background: var(--cg-noise-etch), rgb(255 255 255 / .07);
  -webkit-mask: var(--cg-bmark) center / contain no-repeat;
          mask: var(--cg-bmark) center / contain no-repeat;
}

/* ── Where the B lives: an etch slot ──
   The B sits INSIDE the pane, BEHIND the text layer, in a run of empty
   space that the layout reserves for it — never hanging off an edge, never
   cropped, never under small text, never tacked on below the content.
   A .cg-etch-slot is a flex child that takes the pane's spare height; the
   B is drawn whole inside it, sized to the slot (capped at --cg-etch-max). */
.cg-etch-slot { flex: 1 1 auto; min-height: 0; display: grid; align-items: center; justify-items: var(--cg-etch-align, end); padding: var(--cg-etch-pad, 10px 0); pointer-events: none; }
.cg-etch-slot > .cg-etch { position: relative; inset: auto; width: auto; height: 100%; max-height: var(--cg-etch-max, 140px); aspect-ratio: 455 / 498; }

/* ── Inside a pane (Vero GlassGrid / GlassCell) ── */
.cg-cell { background: rgb(var(--cg-tint) / .28); border: 1px solid var(--cg-line); border-radius: 14px; }

/* ── Fallbacks ── */
/* No backdrop-filter: solid dark smoke, so the photo's lines never show. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cg { background: linear-gradient(180deg, rgb(var(--cg-tint) / .94), rgb(var(--cg-tint-deep) / .96)); }
}
@media (prefers-reduced-transparency: reduce) {
  .cg { background: linear-gradient(180deg, rgb(var(--cg-tint) / .94), rgb(var(--cg-tint-deep) / .96)); }
}
@media (prefers-contrast: more) {
  .cg { background: rgb(var(--cg-tint-deep) / .97); --cg-ink-86: #F3EFEB; --cg-ink-72: #F3EFEB; }
}

/* ── B2: membership on court glass ─────────────────────────────────────── */
.mem-glass { position: relative; overflow: hidden; background: var(--navy-900); padding: clamp(72px, 9vw, 128px) 0; border-top: 0; }
.mem-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; z-index: -2; }
.mem-glass .cg-room-light { z-index: -1; }
.mem-inner { position: relative; }
.mem-card { --cg-fill: .68; display: flex; flex-direction: column; width: min(620px, 100%); padding: clamp(28px, 3.4vw, 48px); }
.mem-card .kicker { color: var(--cg-gold); margin-bottom: 10px; }
.mem-card .mem-h { color: var(--cg-ink); font-size: clamp(40px, 4.6vw, 60px); margin: 0; overflow-wrap: normal; }
.mem-lede-row { display: block; margin: 16px 0 24px; }
.mem-lede { font: 400 clamp(17px, 1.5vw, 20px)/1.5 var(--serif); color: var(--cg-ink-86); max-width: 24em; margin: 0; }
.mem-etch--lede { display: none; }
.mem-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--cg-line); border-bottom: 1px solid var(--cg-line); }
.mem-plan { display: grid; gap: 8px; padding: 18px 0; }
.mem-plan + .mem-plan { border-left: 1px solid var(--cg-line); padding-left: 24px; }
.mem-plan-k { font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cg-gold); }
.mem-plan-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; color: var(--cg-ink-72); }
.mem-plan-v b { font: 800 clamp(40px, 4vw, 52px)/1 var(--display); font-stretch: var(--display-wdth); font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "tnum" 0, "zero" 0; letter-spacing: -.01em; color: var(--cg-ink); }
.mem-card .fact-line { color: var(--cg-ink-86); margin-top: 18px; }
.mem-card .fact-line b { color: var(--cg-ink); }
.mem-card .fact-line .sb-sep { color: var(--cg-ink-86); }
/* The actions and, beside them, the open glass the B stands in. */
.mem-acts { display: flex; align-items: stretch; gap: 16px; margin-top: 24px; }
.mem-acts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mem-join-slot:empty { display: none; }
.mem-etch--wide { --cg-etch-max: 104px; --cg-etch-pad: 0; min-width: 96px; height: 104px; align-self: center; }
.mem-card .ask-prompt--night { background: rgb(var(--cg-tint) / .28); border-color: rgba(243, 239, 235, .3); }
@media (max-width: 640px) {
  .mem-glass { padding: 64px 0; }
  .mem-media { object-position: 72% 50%; }
  .mem-card { --cg-fill: .78; padding: 28px 20px 22px; width: 100%; }
  /* On a phone the B stands beside the lede, in the column it frees. */
  .mem-lede-row { display: grid; grid-template-columns: minmax(0, 1fr) 68px; column-gap: 14px; align-items: center; margin: 12px 0 20px; }
  .mem-etch--lede { display: grid; height: 74px; --cg-etch-max: 68px; --cg-etch-pad: 0; --cg-etch-align: center; }
  .mem-etch--wide { display: none; }
  .mem-plan + .mem-plan { padding-left: 16px; }
  .mem-plan-v { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mem-plan-v b { font-size: 36px; }
  .mem-card .mem-h { font-size: 36px; }
  .mem-acts { margin-top: 18px; }
  .mem-acts-row, .mem-acts-row .ask-prompt { width: 100%; }
}

/* ── Every text field is 16px or more (LJ, 1 Oct, on his iPhone) ──────────
   iOS Safari zooms the page into any input, textarea or select set smaller,
   and the page then sits shifted sideways. A floor, so it covers the fields
   drawn later too (Lily's chat box from bot.js, the request sheet, the comment
   forms). Zoom itself is never turned off. Guarded by siteinputs:check. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), textarea, select { font-size: 16px !important; }

/* ── Reduced motion: the ring and the cue stand still ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn--play::after, .btn--live::after { animation: none; opacity: .5; }
  .scroll-cue .ico { animation: none; opacity: 1; }
}
/* ═══ END DESIGN HOUSE R2 ═══════════════════════════════════════════════════ */
/* ── R2 (LJ, 1 Oct 2026, from his phone) ──────────────────────────────────
   THE WIDGET IS ONE FIXED SIZE. Steps 1-3, the search's matches, the options
   and their cards all happen inside it, and it never changes size: fixed
   dimensions per screen, the steps' body fills what is left, and the options
   PAGE inside it (the switcher) — nothing scrolls inside it and the page
   around it does not grow. Frosted court glass: the hall photo shows through,
   blurred, behind a translucent fill and a fine light edge; text measured at
   >= 4.5:1 over the brightest photo behind it (site-play-request.mjs). */
:root { --pw-w: 600px; --pw-h: 600px; }
@media (max-width: 640px) { :root { --pw-h: 560px; } }
@media (max-width: 380px) and (max-height: 820px) { :root { --pw-h: 520px; } }

.play-module {
  width: var(--pw-w); max-width: 100%; height: var(--pw-h); flex: none;
  display: flex; flex-direction: column; overflow: hidden;
  padding: var(--s-5);
  /* On the court glass the site's inks are the glass's cream (the
     approved recipe's tokens); the paper surfaces inside keep the paper inks. */
  --ink: var(--cg-ink);
  --ink-body: var(--cg-ink-86);
  --ink-meta: var(--cg-ink-72);
  --ink-faint: var(--cg-ink-72);
  --line: var(--cg-line);
  --line-2: var(--cg-edge);
}
.play-hero-inner { align-items: center; }
@media (min-width: 1100px) { .play-hero-inner { grid-template-columns: minmax(0, 1fr) var(--pw-w); } }
.play-module #board { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.play-module .wiz-head { flex: none; margin-bottom: var(--s-3); }
.play-module .wiz-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.play-module .wiz-foot { margin-top: auto; padding-top: var(--s-2); }
.play-module .wiz-sum { margin-bottom: var(--s-2); flex: none; }
.play-module .wiz-body > .sb-chips { flex: none; margin-bottom: var(--s-2); }
.play-module .wiz-results { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.play-module .wiz-results > .sb-empty { margin: auto; padding: var(--s-4) 0; }
@media (max-width: 640px) { .play-module { padding: 12px; } }

/* "Go straight to Padelmates": a proper button, navy with the white mark. */
.play-direct { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-3); padding: 0 0 var(--s-3); border-bottom: 1px solid var(--line); font-size: var(--t-micro); color: var(--ink-meta); }
.btn--pm { gap: 8px; padding: 0 16px; min-height: var(--tap); letter-spacing: .1em; }
.btn--pm .pm-word { height: 20px; width: auto; display: block; }
@media (max-width: 640px) {
  .play-direct { margin-bottom: var(--s-2); padding-bottom: var(--s-2); }
  .play-direct .btn--pm { width: 100%; }
}

/* The switcher inside the widget: parts on top, the cards (one on a phone,
   two on a laptop) filling the rest, ‹ 3 of 12 › below. */
.play-module .sw { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.play-module .sw + .sw { margin-top: 0; }
.play-module .sw-head { flex: none; margin-bottom: var(--s-2); }
.play-module .sw-parts { flex-wrap: nowrap; width: 100%; }
.play-module .sw-part { flex: 1 1 0; padding: 0 8px; font-size: 13.5px; }
.play-module .sw-view { flex: 1 1 auto; min-height: 0; overflow-y: hidden; }
.play-module .sw-track { height: 100%; grid-auto-columns: calc((100% - var(--s-3)) / 2); gap: var(--s-3); }
@media (max-width: 640px) { .play-module .sw-track { grid-auto-columns: 100%; } }
.play-module .sw-nav { flex: none; justify-content: center; margin: var(--s-2) 0 0; }
/* The card, compact to fit its page: headline only, Request at its foot. */
.play-module .pc { height: 100%; overflow: hidden; padding: 14px; gap: 6px; background: rgba(255, 255, 255, .9); }
.play-module .pc-tile { width: 46px; height: 46px; padding: 4px; }
.play-module .pc-tile-d { font-size: 19px; }
.play-module .pc-tile-m { font-size: 11px; }
.play-module .pc-top { gap: 10px; }
.play-module .pc-name { font-size: 1.0625rem; }
.play-module .pc-meta { font-size: 14px; line-height: 1.35; }
.play-module .pc-price { padding-top: 8px; }
.play-module .pc-act { margin-top: 6px; }

/* On a phone the widget spans the gutter and Lily's button moves to the foot
   of the screen (over the ticker), below the widget, so it never covers it. */
@media (max-width: 640px) {
  body[data-page="play"] .play-hero .wrap { padding-left: 16px; padding-right: 16px; }
  body[data-page="play"] .play-module { width: 100%; }
  body[data-page="play"] .lb-fab { bottom: 8px; }
}

/* THE REQUEST BOTTOM SHEET: it slides up from the bottom, a grab handle on a
   rounded top edge; drag it down to close. Centred and capped in width on a
   laptop, the whole width on a phone. */
.sb-scrim--bottom { place-items: end center; padding: 0; }
.sb-sheet.sb-sheet--bottom {
  width: min(760px, 100%); min-width: 0; max-height: 92vh; max-height: 92svh; border-radius: 22px 22px 0 0;
  padding: 34px var(--s-6) var(--s-6); transform: translateY(100%); transition: transform 280ms var(--ease-out);
  box-shadow: 0 -24px 70px -20px rgba(2, 35, 68, .35);
}
.sb-scrim.is-open .sb-sheet--bottom { transform: translateY(0); }
.sb-sheet--bottom.is-dragging { transition: none; }
.sb-grab { position: absolute; top: 0; left: 0; right: 0; height: 30px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.sb-grab::before { content: ''; width: 44px; height: 5px; border-radius: 3px; background: rgba(2, 35, 68, .22); }
.sb-sheet--bottom .sb-sheet-x { top: 14px; }
@media (max-width: 640px) {
  .sb-sheet.sb-sheet--bottom { width: 100%; padding: 32px var(--s-4) var(--s-5); }
  .sb-sheet--bottom .cf-actions { flex-direction: column; }
  .sb-sheet--bottom .cf-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-sheet.sb-sheet--bottom { transition: none; }
  .sb-scrim { transition: none; }
}
.play-module .wiz-sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A phone's page holds one card: tighter still, so all of it — Request
   included — is on the page. */
@media (max-width: 640px) {
  .play-module .pc { padding: 10px 12px; gap: 4px; }
  .play-module .pc-tile { width: 40px; height: 40px; }
  .play-module .pc-tile-d { font-size: 17px; }
  .play-module .pc-name { font-size: 1rem; }
  .play-module .pc-price { padding-top: 4px; }
  .play-module .pc-act { margin-top: 4px; }
  .play-module .who-chip { min-height: 26px; }
}
/* The card's head in two columns: the date tile beside the weekday and the
   name, so the card's page holds the whole card. */
.play-module .pc--head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-content: start; }
.play-module .pc--head > * { grid-column: 1 / -1; }
.play-module .pc--head > .pc-top { display: contents; }
.play-module .pc--head .pc-tile { grid-column: 1; grid-row: 1 / span 2; }
.play-module .pc--head .pc-eyebrow { grid-column: 2; grid-row: 1; align-self: end; line-height: 1.2; }
.play-module .pc--head > .pc-name { grid-column: 2; grid-row: 2; align-self: start; }
.play-module .pc--head > .pc-act { margin-top: auto; }
.play-module .wiz-fresh { flex: none; margin: -4px 0 var(--s-2); font-size: 12.5px; }
.play-module .wiz-fresh .sb-fresh { font-size: 12.5px; }
/* On a phone the four choices sit two by two, each its mark and its name
   (the description is the name said again), and the eyebrow over the title
   gives way — so step 1 fits the widget and the widget clears Lily's button. */
@media (max-width: 640px) {
  .play-module .sb-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .play-module .sb-choice { grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto; min-height: 60px; padding: 8px 10px; column-gap: 8px; }
  .play-module .sb-choice-ico { grid-row: auto; width: 32px; height: 32px; }
  .play-module .sb-choice-name { font-size: 14.5px; line-height: 1.25; }
  .play-module .sb-choice-q { display: none; }
  .play-hero-head .kicker { display: none; }
}
@media (max-width: 640px) { .play-hero-head h1.display { font-size: clamp(1.4rem, 5.6vw, 2rem); } }
@media (min-width: 641px) { .play-module .pc { gap: 5px; } }
/* The shortest phone (360×780): the card's page is shorter still. */
@media (max-width: 380px) and (max-height: 820px) {
  .play-module .wiz-fresh { display: none; }
  .play-module .pc { padding: 8px 10px; gap: 3px; }
  .play-module .pc-price { border-top: 0; padding-top: 0; }
  .play-module .pc-meta { font-size: 13.5px; line-height: 1.3; }
}
@media (max-width: 640px) { .play-hero-inner { padding-top: 6px; gap: 8px; } }

/* ── Your level (optional): a row in step 2 and beside the summary in the
   options; its panel opens INSIDE the widget, over the body, at the
   widget's own size. ── */
@media (min-width: 641px) { :root { --pw-h: 640px; } }
.play-module .wiz-top { flex: none; display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); min-width: 0; }
.play-module .wiz-top .wiz-sum { flex: 1 1 auto; min-width: 0; margin: 0; }
.play-module .wiz-top .lv-row { flex: 0 1 auto; min-width: 0; margin: 0; }
.lv-row { display: flex; align-items: center; gap: 4px; margin: 0 0 var(--s-3); min-width: 0; }
.lv-open {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); min-width: 0; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); color: var(--ink-meta);
  font: 500 13.5px/1.2 var(--sans); cursor: pointer;
}
.lv-open b { color: var(--ink); font-weight: 600; }
.lv-open > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-open:hover { border-color: var(--ink); }
.lv-chip { background: var(--ink); border-color: var(--ink); color: rgba(255, 255, 255, .82); }
.lv-chip b { color: #fff; }
.lv-x { width: var(--tap); height: var(--tap); flex: none; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--ink); cursor: pointer; }
.lv-x .ico { width: 16px; height: 16px; }
.lv-panel {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); background: linear-gradient(180deg, rgb(var(--cg-tint) / .97), rgb(var(--cg-tint-deep) / .98)); border-radius: inherit; overflow: hidden;
}
.lv-h { font-size: var(--t-sub); }
.lv-s { font-size: var(--t-micro); color: var(--ink-body); line-height: 1.45; }
.lv-k { font-size: var(--t-micro); font-weight: 600; color: var(--ink); margin-top: var(--s-1); }
.lv-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lv-g { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 6px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font: 600 13.5px/1 var(--sans); cursor: pointer; }
.lv-g[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lv-select { min-height: var(--tap); padding: 0 12px; border: 1px solid var(--line-2); border-radius: 11px; background: #fff; color: var(--ink); font: 600 15px/1 var(--sans); }
.lv-actions { margin-top: auto; display: flex; gap: var(--s-2); }
.lv-actions .btn { flex: 1 1 0; }
@media (max-width: 640px) {
  .lv-panel { padding: var(--s-4) 12px; }
  .play-module .wiz-body.is-results .wiz-fresh { display: none; }
  .lv-open { padding: 0 10px; font-size: 13px; }
}
@media (max-width: 380px) and (max-height: 820px) { .play-module .wiz-top { margin-bottom: 4px; } .play-module .sw-head { margin-bottom: 4px; } }
/* A board row's price field may break between its words on a phone — the
   figures themselves never split (b stays whole) — so a longer language
   ("£64.50 una pista durante 90 min") never runs past its row. */
@media (max-width: 560px) { .sb-row .sb-meta .nw { white-space: normal; } }

.play-module .wiz-top .lv-open { white-space: nowrap; }

/* ── COURT GLASS v2 — LJ approved, 1 Oct ("yes much better push it") ──────
   The recipe below is club-docs/beaulieu/court-glass/court-glass.css as
   approved (the Vero "Glass House" pane in the club's navy: a navy gradient
   at --cg-fill, 30px frost, a cream edge, the inset top-edge highlight, the
   room's 112° sheen, and the B as frosted light in a slot the layout
   reserves). Kept verbatim so the designer's file and this one stay one
   recipe; the B mark is same-origin (assets/brand/bmark-white.png). */
:root { --cg-bmark: url("brand/bmark-white.png"); }
/* The etch's placement tokens, defined at the recipe's own defaults so every
   name the recipe reads exists (a pane overrides what it needs). */
:root { --cg-etch-x: auto; --cg-etch-y: auto; --cg-etch-r: auto; --cg-etch-b: auto; --cg-etch-size: 320px; --cg-etch-rot: 0deg; --cg-etch-align: end; --cg-etch-o: 1; --cg-etch-max: 140px; --cg-etch-pad: 10px 0; }
/* ==========================================================================
   COURT GLASS v2 — Beaulieu Padel Club
   Built on the Vero "Glass House" recipe (glass-house.tsx, GlassPane +
   gh-grade + gh-specular), translated to plain CSS and the club's navy:
     pane   linear-gradient(180deg, navy @ fill, navy @ fill - .14)
            1px border in cream @ .22, radius 20
            0 34px 80px -44px deep shadow + inset 0 1px 0 white @ .26
            backdrop-filter: blur + saturate
     room   a grade wash and a 112deg specular sweep over the photo, under
            the pane: the only "lines" are light.
     fill   follows the measured mean luminance of the photo behind it:
            fill = .34 + clamp((lum - 105) / 70, 0, 1) * .22
   Beaulieu additions: the etched B (frosted light within the pane) and the
   optional glint sweep.

   Markup:
     <section class="cg-room">  photo  <div class="cg-room-light"></div>  ...
       <div class="cg [cg--sweep]" style="--cg-fill: .34">
         <span class="cg-etch" aria-hidden="true"></span>
         ...content...
       </div>
     </section>
   ========================================================================== */

:root {
  --cg-tint: 2 35 68;                         /* navy #022344             */
  --cg-tint-deep: 1 18 33;                    /* its shadow               */
  --cg-blur: 14px;                            /* Vero's blur; see .cg--frost */
  --cg-saturate: 115%;

  /* cream = the club's bone #F3EFEB, at Vero's stepped alphas */
  --cg-ink: #F3EFEB;
  --cg-ink-86: rgba(243, 239, 235, .86);      /* body                     */
  --cg-ink-72: rgba(243, 239, 235, .84);      /* meta: .84 clears 4.5:1 over the brightest glass (4.73:1 at 74,94,108; .76 measured 4.20:1 in the push gate) */
  --cg-gold: #DDD3C6;                         /* sand #C9BCAB lifted halfway to bone: the 'gold' that holds 4.5:1 at 11px on glass */
  --cg-line: rgba(243, 239, 235, .16);        /* hairlines inside a pane  */
  --cg-edge: rgba(243, 239, 235, .22);        /* the pane's own border    */

  /* frost grain for the etch: fine white noise */
  --cg-noise-etch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .22 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23e)'/%3E%3C/svg%3E");
  /* --cg-bmark: url(/assets/brand/bmark-white.png) on the site (same origin) */
}

/* ── The room: grade + specular over the photo, under the glass ── */
.cg-room { position: relative; isolation: isolate; }
.cg-room-light {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* specular (Vero gh-specular, 112deg) */
    linear-gradient(112deg,
      rgb(255 255 255 / .16) 0%, rgb(255 255 255 / .03) 24%, rgb(255 255 255 / 0) 40%,
      rgb(255 255 255 / .07) 64%, rgb(255 255 255 / 0) 80%),
    /* grade (Vero gh-grade, in navy) */
    linear-gradient(103deg, rgb(var(--cg-tint-deep) / .38) 0%, rgb(var(--cg-tint-deep) / .18) 45%, rgb(var(--cg-tint-deep) / .05) 100%),
    linear-gradient(0deg, rgb(var(--cg-tint-deep) / .35) 0%, rgb(var(--cg-tint-deep) / 0) 32%);
}

/* ── The pane (Vero GlassPane) ── */
.cg {
  --cg-fill: .34;                              /* .06–.6; set per photo    */
  --cg-radius: 20px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--cg-ink);
  background: linear-gradient(180deg,
    rgb(var(--cg-tint) / var(--cg-fill)),
    rgb(var(--cg-tint) / max(0, calc(var(--cg-fill) - .14))));
  border: 1px solid var(--cg-edge);
  border-radius: var(--cg-radius);
  box-shadow: 0 34px 80px -44px rgb(var(--cg-tint-deep) / .9), inset 0 1px 0 rgb(255 255 255 / .26);
  -webkit-backdrop-filter: blur(var(--cg-blur)) saturate(var(--cg-saturate));
          backdrop-filter: blur(var(--cg-blur)) saturate(var(--cg-saturate));
}
/* Beaulieu's photos are full of fine lines (court nets, glass frames, roof
   trusses). At Vero's 14px they still read through the pane, which LJ ruled
   out ("the opacity of the image behind it, not the lines through"), so the
   club's panes run frosted: same recipe, heavier blur. */
.cg--frost { --cg-blur: 30px; --cg-saturate: 125%; }

/* Glint sweep (optional): one soft band of light across the pane, long rest.
   Transform + opacity only; off under reduced motion. */
.cg::after {
  content: '';
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .05) 35%, rgb(255 255 255 / .10) 50%, rgb(255 255 255 / .04) 65%, transparent);
  transform: translateX(-120%) skewX(-14deg);
  opacity: 0; pointer-events: none; z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .cg--sweep::after { animation: cg-sweep 14s cubic-bezier(.45, 0, .2, 1) 1.2s infinite; }
}
@keyframes cg-sweep {
  0%   { transform: translateX(-120%) skewX(-14deg); opacity: 0; }
  4%   { opacity: 1; }
  30%  { transform: translateX(340%) skewX(-14deg); opacity: 1; }
  34%, 100% { transform: translateX(340%) skewX(-14deg); opacity: 0; }
}

/* ── The etched B: frosted light within the pane ── */
.cg-etch {
  position: absolute; z-index: -1; pointer-events: none;
  left: var(--cg-etch-x, auto); top: var(--cg-etch-y, auto);
  right: var(--cg-etch-r, auto); bottom: var(--cg-etch-b, auto);
  width: var(--cg-etch-size, 320px);
  aspect-ratio: 455 / 498;
  transform: rotate(var(--cg-etch-rot, 0deg));
  opacity: var(--cg-etch-o, 1);
}
.cg-etch::before {
  content: ''; position: absolute; inset: 0;
  background: var(--cg-noise-etch), rgb(255 255 255 / .07);
  -webkit-mask: var(--cg-bmark) center / contain no-repeat;
          mask: var(--cg-bmark) center / contain no-repeat;
}

/* ── Where the B lives: an etch slot ──
   The B sits INSIDE the pane, BEHIND the text layer, in a run of empty
   space that the layout reserves for it — never hanging off an edge, never
   cropped, never under small text, never tacked on below the content.
   A .cg-etch-slot is a flex child that takes the pane's spare height; the
   B is drawn whole inside it, sized to the slot (capped at --cg-etch-max). */
.cg-etch-slot { flex: 1 1 auto; min-height: 0; display: grid; align-items: center; justify-items: var(--cg-etch-align, end); padding: var(--cg-etch-pad, 10px 0); pointer-events: none; }
.cg-etch-slot > .cg-etch { position: relative; inset: auto; width: auto; height: 100%; max-height: var(--cg-etch-max, 140px); aspect-ratio: 455 / 498; }

/* ── Inside a pane (Vero GlassGrid / GlassCell) ── */
.cg-cell { background: rgb(var(--cg-tint) / .28); border: 1px solid var(--cg-line); border-radius: 14px; }

/* ── Fallbacks ── */
/* No backdrop-filter: solid dark smoke, so the photo's lines never show. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cg { background: linear-gradient(180deg, rgb(var(--cg-tint) / .94), rgb(var(--cg-tint-deep) / .96)); }
}
@media (prefers-reduced-transparency: reduce) {
  .cg { background: linear-gradient(180deg, rgb(var(--cg-tint) / .94), rgb(var(--cg-tint-deep) / .96)); }
}
@media (prefers-contrast: more) {
  .cg { background: rgb(var(--cg-tint-deep) / .97); --cg-ink-86: #F3EFEB; --cg-ink-72: #F3EFEB; }
}

/* ── The wizard on the approved glass (mock A) ── */
.play-module.cg { --cg-fill: .34; --cg-radius: 20px; --cg-etch-o: 1; --cg-etch-max: 120px; --cg-etch-pad: 6px 4px 2px; }
/* The phone crop of the court photo is the bright middle of the hall, and the
   frost does not render the same on every phone: on the GitHub runner's
   Chromium the glass behind the words read as light as 81,104,123 and the meta
   words (--cg-ink-72) fell to 3.70:1. The fill is the per-photo knob, so the
   phone pane carries more of the navy: at .54 every word on the glass clears
   4.5:1 against that brightest reading (meta 4.6, gold 5.1). */
@media (max-width: 760px) { .play-module.cg { --cg-fill: .54; } }
.play-module .play-direct { color: var(--cg-ink-72); border-bottom-color: var(--cg-line); }
.play-module.cg .btn--pm { background: rgb(var(--cg-tint-deep) / .7); border-color: var(--cg-edge); color: var(--cg-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.play-module.cg .btn--pm:hover { background: rgb(var(--cg-tint-deep) / .9); }
.play-module .wiz-step { color: var(--cg-ink-72); }
.play-module .wiz-step-n { border-color: rgb(243 239 235 / .30); background: rgb(243 239 235 / .08); color: var(--cg-ink); }
.play-module .wiz-step.is-current, .play-module .wiz-step.is-done { color: var(--cg-ink); }
.play-module .wiz-step.is-current .wiz-step-n { background: var(--cg-gold); border-color: var(--cg-gold); color: #022344; }
.play-module .wiz-steps li + li::before { background: var(--cg-edge); }
.play-module .sb-search { background: rgb(var(--cg-tint-deep) / .45); border-color: var(--cg-edge); color: var(--cg-ink-72); }
.play-module .sb-search input { color: var(--cg-ink); }
.play-module .sb-search input::placeholder { color: var(--cg-ink-72); }
.play-module .sb-search .ico { color: var(--cg-ink-72); }
.play-module .wiz-q { color: var(--cg-ink); }
/* Choices, day cells and cards are Vero's GlassCell: navy .28, a cream hairline. */
.play-module :is(.sb-choice, .sb-day, .pc) { background: rgb(var(--cg-tint) / .28); border-color: var(--cg-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .10); color: var(--cg-ink); }
.play-module .sb-choice:hover { border-color: var(--cg-edge); }
.play-module .sb-choice-ico { background: rgb(243 239 235 / .08); color: var(--cg-gold); }
.play-module .sb-choice-q { color: var(--cg-ink-72); }
.play-module .sb-day-c, .play-module .sb-count { background: rgb(243 239 235 / .12); }
.play-module .sb-day[aria-pressed="true"] { background: var(--cg-gold); border-color: var(--cg-gold); color: #022344; }
.play-module .sb-day[aria-pressed="true"] .sb-day-c { background: rgb(2 35 68 / .14); }
.play-module .pc-tile { background: var(--cg-gold); color: #022344; }
.play-module .pc-tile-m { color: #022344; }
.play-module .pc-price { border-top-color: var(--cg-line); }
.play-module .who-chip { background: rgb(243 239 235 / .10); color: var(--cg-ink-72); }
.play-module .who-chip b { color: var(--cg-ink); }
/* Buttons on the glass: bone, navy words (the cards' Request too). */
.play-module.cg .btn:not(.btn--ghost):not(.btn--pm) { background: var(--cg-ink); border-color: var(--cg-ink); color: #022344; }
.play-module.cg .btn:not(.btn--ghost):not(.btn--pm):hover { background: #fff; border-color: #fff; }
.play-module.cg .btn--ghost { color: var(--cg-ink); border-color: var(--cg-edge); }
.play-module.cg .btn--ghost:hover { background: rgb(243 239 235 / .10); color: var(--cg-ink); border-color: var(--cg-ink-72); }
.play-module .sb-pill { color: var(--cg-ink); border-color: var(--cg-line); }
.play-module .sb-pill[aria-selected="true"] { background: var(--cg-ink); border-color: var(--cg-ink); color: #022344; }
.play-module .sw-part { color: var(--cg-ink); border-color: var(--cg-line); background: rgb(var(--cg-tint) / .28); }
.play-module .sw-arrow { background: var(--cg-ink); border-color: var(--cg-ink); color: #022344; }
.play-module .lv-open { background: rgb(var(--cg-tint) / .28); border-color: var(--cg-edge); color: var(--cg-ink-72); }
.play-module .lv-open b, .play-module .lv-chip b { color: var(--cg-ink); }
.play-module .lv-chip { background: rgb(243 239 235 / .14); border-color: var(--cg-ink-72); color: var(--cg-ink-72); }
.play-module .lv-x { background: rgb(var(--cg-tint) / .28); border-color: var(--cg-edge); color: var(--cg-ink); }
.play-module .lv-g { background: rgb(var(--cg-tint) / .28); border-color: var(--cg-line); color: var(--cg-ink); }
.play-module .lv-g[aria-pressed="true"] { border-color: var(--cg-gold); box-shadow: inset 0 0 0 1px var(--cg-gold); }
.play-module .lv-select, .play-module .sb-strip-select { background-color: #fff; color: #022344; }
.play-module :focus-visible { outline-color: var(--cg-gold); }
/* The B lives in the step's spare height, behind nothing. */
.play-module .wiz-body > .cg-etch-slot { order: 0; }
.play-module .wiz-body > .wiz-foot { margin-top: 0; }
/* Nothing in the widget is ever clipped: the summary and the level chip wrap
   in full. On a phone the options' header is two rows (what and when, then
   the level), and at the options and a search the straight-to-Padelmates
   row gives its height to them (Book in Padelmates is in every Request). */
.play-module .wiz-sum { white-space: normal; overflow: visible; text-overflow: clip; }
.play-module .lv-open > span { white-space: normal; overflow: visible; text-overflow: clip; text-align: left; }
.play-module .wiz-top .lv-open { white-space: normal; }
@media (max-width: 640px) {
  .play-module .wiz-top { flex-direction: column; align-items: stretch; gap: 6px; }
  .play-module .wiz-top .lv-row { width: 100%; }
  .play-module .wiz-top .lv-open { flex: 1 1 auto; justify-content: flex-start; }
  .play-module[data-step="3"] .play-direct, .play-module[data-step="search"] .play-direct { display: none; }
}
/* A laptop's first screen holds the widget AND the member ticker (1280×800,
   1440×900): the hero gives the widget a slimmer margin above and below. */
@media (min-width: 1100px) { .play-hero-inner { padding-top: var(--s-4); padding-bottom: var(--s-4); } }
@media (max-width: 380px) and (max-height: 820px) {
  /* Step 2 on the shortest phone: the "or pick days" line gives way (the
     day cells say it themselves), and the rows sit closer. */
  .play-module .wiz-or { display: none; }
  .play-module .wiz-periods { margin-bottom: var(--s-2); }
  .play-module .lv-row { margin-bottom: var(--s-2); }
  .play-module .wiz-actions { margin-top: var(--s-2); }
}
.play-module .lv-chip { background: rgb(243 239 235 / .08); color: var(--cg-ink); }

/* iOS Safari zooms the page into any field set under 16px (LJ, 1 Oct): every
   field the play flow draws — the search, the level and court choosers, the
   play list — is 16px. The page never blocks zoom. */
.sb-search input, .sb-strip-select, .lv-select, .pl-field input, .play-module input, .play-module select, .sb-sheet input, .sb-sheet select, .sb-sheet textarea { font-size: 16px; }
/* What a search understood stays on screen when its filters fold into a
   chooser (the read line under them). The glint peaks softly enough that
   every word on the glass holds 4.5:1 while it passes. */
.play-module.cg::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .025) 35%, rgb(255 255 255 / .055) 50%, rgb(255 255 255 / .02) 65%, transparent); }
/* ═══ END PLAY WIZARD (play-wizard seat) ═══════════════════════════════════ */

/* ── LJ 1 Oct hotfix ──────────────────────────────────────────────────────
   Hero bars FILL across each room's seconds (design.js setFill), and the
   desktop header keeps its floating nav tabs; the Menu button is phones only. */
.scene-steps button i { position: relative; overflow: hidden; background: rgba(243, 239, 235, .28) !important; }
.scene-steps button i b { position: absolute; inset: 0; display: block; background: var(--bone); transform-origin: left center; transform: scaleX(0); will-change: transform; }
.scene-steps button.is-done i b { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .scene-steps button i b { transition: none !important; } }
@media (min-width: 1081px) {
  .site-head .head-tools .nav-toggle { display: none; }
  .site-head .nav { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 12px; }
  .site-head .head-inner > .nav { order: 2; }
  .site-head .head-tools { order: 3; }
  .site-head .nav a:not(.btn) {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
    color: var(--bone); opacity: 1; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
    background: rgba(243, 239, 235, .08); border: 1px solid rgba(243, 239, 235, .22);
    -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    transition: background .2s, border-color .2s;
  }
  .site-head .nav a:not(.btn):hover, .site-head .nav a[aria-current="page"] { background: rgba(243, 239, 235, .16); border-color: var(--sand); }
  .site-head .nav .lang-toggle--menu { margin: 0 0 0 4px; }
}

/* LJ 1 Oct: the facilities list shows its headline items and asks Lily for the
   rest; the club section sits tight to what follows. */
#club .club-block .ask-prompt { margin-top: 20px; }
#club .club-coda { margin-top: clamp(28px, 4vw, 48px) !important; padding-top: clamp(24px, 3vw, 40px) !important; }
#club.section { padding-bottom: clamp(40px, 5vw, 72px) !important; }
#club + .section, #club + section { padding-top: clamp(40px, 5vw, 72px) !important; }

/* LJ 1 Oct: Play this week as cards, three to a row on a laptop, two on a
   tablet, one on a phone. */
@media (min-width: 761px) {
  .bp-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; }
  .bp-row, .bp-row + .bp-row { border: 1px solid var(--line); border-radius: 14px; background: var(--paper, #fff); padding: 18px 18px; }
  .bp-row:hover { background: var(--paper-2); border-color: var(--line-2); }
}
@media (min-width: 1081px) { .bp-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* LJ 1 Oct: Full terms and Safeguarding together, same style, bottom right. */
#good-to-know .legal-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 32px; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 760px) { #good-to-know .legal-links { justify-content: flex-start; } }

/* LJ 1 Oct: colour groups tidied into one even row, then FAQ prompts. */
#groups .groups { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; border: 0 !important; margin-top: clamp(24px, 3vw, 40px); }
#groups .group-card { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border: 1px solid rgba(243, 239, 235, .18) !important; border-radius: 14px; background: rgba(243, 239, 235, .05); min-height: 0; }
#groups .group-card h3 { font-size: clamp(16px, 1.4vw, 20px); margin: 0; letter-spacing: .06em; }
#groups .group-card::before { display: none !important; }
@media (max-width: 1080px) { #groups .groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { #groups .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#groups .ask-row--groups { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 3vw, 36px); }
#groups .groups .group-card { grid-column: auto !important; grid-row: auto !important; flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; width: auto !important; }
#groups .groups .group-card .group-dot { margin: 0 !important; flex: none; }
#groups .groups .group-card { padding: 16px 14px !important; gap: 10px !important; overflow: hidden; }
#groups .groups .group-card h3 { font-size: clamp(13px, 1.05vw, 17px) !important; white-space: nowrap; overflow: hidden; text-overflow: clip; }

/* LJ 1 Oct: level panel clean and compact: small group chips, a typed level
   with − / + steps, and the band it falls in. */
.lv-panel .lv-groups { display: flex !important; flex-wrap: wrap; gap: 6px; }
.lv-panel .lv-g { min-height: 40px !important; padding: 0 12px !important; font-size: 14px; flex: 0 0 auto; width: auto !important; }
.lv-num { display: flex; align-items: center; gap: 8px; max-width: 260px; }
.lv-num .lv-input { flex: 1; min-width: 0; height: 48px; font-size: 18px !important; text-align: center; font-variant-numeric: tabular-nums; border-radius: 12px; border: 1px solid rgba(243,239,235,.3); background: rgba(243,239,235,.08); color: var(--bone); -moz-appearance: textfield; }
.lv-num .lv-input::-webkit-outer-spin-button, .lv-num .lv-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lv-step { width: 48px; height: 48px; border-radius: 12px; border: 1px solid rgba(243,239,235,.3); background: rgba(243,239,235,.08); color: var(--bone); font-size: 22px; line-height: 1; cursor: pointer; }
.lv-step:hover { background: rgba(243,239,235,.16); }
.lv-band { margin: 8px 0 0; min-height: 1.4em; color: rgba(243,239,235,.8); font-size: 14px; }
.lv-band b { color: var(--sand); }
/* LJ 1 Oct: option cards break up by colour and weight. */
.pc .pc-time b { color: var(--sand); font-size: 1.06em; }
.pc .pc-court { font-size: .92em; opacity: .72; }
.pc .pc-places { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: rgba(57, 192, 187, .16); color: #9fe3df; font-size: .9em; }
.pc .pc-places b { color: #c9f1ef; }
.pc .pc-price { font-size: 1.05em; }
.pc .pc-price b { color: var(--bone); font-size: 1.25em; }

/* LJ 1 Oct: on a laptop the Request confirmation opens inside the widget. */
.play-module { position: relative; }
.sb-scrim.sb-scrim--inside { position: absolute; inset: 0; z-index: 30; padding: 12px; place-items: stretch; border-radius: inherit; background: rgba(2, 20, 40, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: none; }
.sb-scrim--inside .sb-sheet { width: 100%; max-width: none; height: 100%; max-height: 100%; overflow: auto; transform: none !important; transition: none !important; border-radius: 16px; }

/* Membership CTA beside every member ticker (LJ, 1 Oct). */
[id$="ticker"], #play-ticker, #board-preview-ticker { display: flex; align-items: center; gap: 12px; }
[id$="ticker"] .tk, #play-ticker .tk, #board-preview-ticker .tk { flex: 1; min-width: 0; }
.tk-cta { flex: none; min-height: 40px !important; padding: 0 18px !important; font-size: 12px !important; letter-spacing: .14em; white-space: nowrap; }
.play-hero-ask { margin-top: 24px; }
/* The in-widget Request sheet and the level panel sit on solid navy glass so
   nothing behind them shows through, and the widget's cream text reads. */
.play-module .sb-scrim--inside .sb-sheet { background: #071d36 !important; color: var(--bone) !important; border: 1px solid rgba(243, 239, 235, .18); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7); }
.play-module .sb-scrim--inside .sb-sheet .sb-field-k, .play-module .sb-scrim--inside .sb-sheet .cf-k, .play-module .sb-scrim--inside .sb-sheet dt { color: rgba(243, 239, 235, .66) !important; }
.play-module .sb-scrim--inside .sb-sheet b, .play-module .sb-scrim--inside .sb-sheet dd, .play-module .sb-scrim--inside .sb-sheet h3 { color: var(--bone) !important; }
.play-module .sb-scrim--inside .sb-sheet .sb-sheet-x { color: var(--bone); }
.play-module .sb-scrim--inside .sb-sheet .btn--pm { background: var(--bone) !important; color: var(--navy-900) !important; }
.play-module .sb-scrim--inside .sb-sheet .btn--pm img { filter: invert(1) brightness(.2); }
.play-module .sb-scrim--inside .sb-sheet .btn--ghost, .play-module .sb-scrim--inside .sb-sheet .btn:not(.btn--pm) { background: transparent !important; color: var(--bone) !important; border: 1px solid rgba(243, 239, 235, .4) !important; }
.play-module .lv-panel { background: #071d36 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.play-module .sb-scrim--inside .sb-sheet [class*="qr"], .play-module .sb-scrim--inside .sb-sheet [class*="qr"] * { color: var(--navy-900) !important; }

/* Fix (1 Oct verifier): the second glass copy (for /play) overrode the
   membership pane — fill fell to .34 and both B marks showed. Re-assert the
   membership pane with more specific selectors; a little darker so text holds
   4.5:1 even mid-sweep. */
.mem-glass .mem-card.cg { --cg-fill: .74; }
.mem-glass .mem-etch--lede { display: none !important; }
.mem-glass .mem-etch--wide { display: grid !important; }
@media (max-width: 640px) {
  .mem-glass .mem-card.cg { --cg-fill: .84; }
  .mem-glass .mem-etch--lede { display: grid !important; }
  .mem-glass .mem-etch--wide { display: none !important; }
  .mem-glass .mem-join-slot, .mem-glass .mem-join-slot .btn { display: flex; width: 100%; justify-content: center; }
  .mem-glass .mem-acts-row .ask-prompt { justify-content: space-between; }
}
/* LJ 1 Oct: the language toggle matches the nav tabs' height. */
@media (min-width: 1081px) {
  .site-head .nav .lang-toggle--menu { height: 40px; min-height: 40px; align-items: stretch; border-radius: 999px; overflow: hidden; }
  .site-head .nav .lang-toggle--menu .lang-opt { min-height: 0 !important; height: 40px; padding: 0 14px; font-size: 11.5px; display: inline-flex; align-items: center; }
}

/* LJ 1 Oct: confirmation = the details on top; the buttons and the QR code
   side by side at the bottom, even. */
.cf { display: flex !important; flex-direction: column; gap: 20px; min-height: 100%; }
.cf-main { width: 100%; }
.cf-foot { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
.cf-foot .cf-actions { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cf-foot .cf-actions .btn { width: 100%; min-height: 52px; }
.cf-foot .cf-qr { margin: 0; padding: 14px; width: 168px; display: grid; justify-items: center; gap: 8px; }
.cf-foot .cf-qr-code { width: 120px; height: 120px; }
.cf-foot .cf-qr-code img, .cf-foot .cf-qr-code svg, .cf-foot .cf-qr-code canvas { width: 120px !important; height: 120px !important; }
.cf-foot .cf-qr-t { font-size: 12px; text-align: center; margin: 0; }
@media (max-width: 899px) { .cf-foot { grid-template-columns: 1fr; } .cf-foot .cf-qr { display: none; } }
.sb-scrim--inside .sb-sheet-body, .sb-scrim--inside .sb-sheet-body > .cf { height: 100%; }

/* LJ 1 Oct: "Become a member" rides IN the ticker, highlighted. */
.tk-item--cta .tk-cta { display: inline-flex; align-items: center; min-height: 30px !important; padding: 0 14px !important; font-size: 11px !important; letter-spacing: .14em; vertical-align: middle; animation: tk-glow 2.4s ease-in-out infinite; }
@keyframes tk-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(201,188,171,.0); } 50% { box-shadow: 0 0 0 6px rgba(201,188,171,.28); } }
@media (prefers-reduced-motion: reduce) { .tk-item--cta .tk-cta { animation: none; } }
.cf-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch !important; }
.cf-foot .cf-actions { justify-content: flex-end; }
.cf-foot .cf-qr { width: auto !important; align-content: center; }
@media (max-width: 899px) { .cf-foot { grid-template-columns: 1fr !important; } }

/* THE HERO WORDMARK (LJ, 1 Oct): the club's own "Beaulieu Padel" wordmark in
   place of the set-in-type BEAULIEU / PADEL CLUB lock-up. */
.scene--hero .hero-wordmark {
  display: block; height: clamp(110px, 27svh, 290px); width: auto; max-width: 100%;
  opacity: 0; animation: bp-fade 1.1s var(--ease-fade) .25s forwards;
}
@media (max-width: 760px) {
  .scene--hero .hero-wordmark { height: auto; width: min(76vw, 340px); }
}
@media (prefers-reduced-motion: reduce) { .scene--hero .hero-wordmark { opacity: 1; animation: none; } }

/* A short phone (360×780): the /play hero's "Ask Lily to find you a slot"
   sits tighter, so the widget ends above Lily's button — nothing of the
   widget under it, and the glass reads at 4.5:1 to its last corner. */
@media (max-width: 380px) and (max-height: 820px) {
  .play-hero-ask { margin-top: 10px; }
  .play-hero-ask .ask-prompt { min-height: 44px; padding-top: 2px; padding-bottom: 2px; }
  .play-hero-ask .ask-prompt-go { width: 36px; height: 36px; }
}

/* The ticker's one keyboard "Become a member" (the moving copies are out of
   the Tab order): out of sight until it has focus, then over the ticker. */
.tk { position: relative; }
.tk-cta-once { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tk-cta-once:focus-within { width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; right: 12px; top: 50%; transform: translateY(-50%); z-index: 3; }
.tk-cta-once .tk-cta { display: inline-flex; align-items: center; min-height: 44px !important; padding: 0 18px !important; font-size: 12px !important; letter-spacing: .14em; }

/* ═══════════════════════════════════════════════════════════════════════════
   OLD STYLING RESTORED (Wendy, 1 Oct)
   ───────────────────────────────────────────────────────────────────────────
   Wendy (via LJ): "she prefers the styling of the first website … too much
   scrim and doesn't like the big headline shouting copy throughout … keep
   the current structure but return it back to the old styling."
   LJ: keep the photo sections and the glass panels; return the COPY styling
   to the first site (8a280dd69) and lighten the heavy scrims over the photos.

   Copy: Prata 400 for headings in sentence case at the first site's scale
   (--t-display / --t-page / --t-section / --t-sub), Inter for everything
   else, one 11px label (600, .14em caps) for eyebrows, buttons, nav and
   table heads. Nothing is set in the wide, heavy capitals any more.
   Scrims: the photographs carry a light shade only; legibility comes from a
   soft local pool behind the words (each measured 4.5:1 or more).
   Last in the file so it wins without rewriting the blocks above.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --t-eyebrow: var(--t-label);      /* every eyebrow back to the one 11px label */
  --t-title: var(--t-section);
  --t-body-r2: var(--t-lede);
}

/* ── Headings: the serif, sentence case, the first site's sizes ──────────── */
.display,
.section-head h2,
.page-band h1,
.scene-title h2,
.play-hero-head h1.display,
.mem-card .mem-h {
  font-family: var(--serif);
  font-weight: 400;
  font-stretch: normal;
  font-variation-settings: normal;
  text-transform: none;
  letter-spacing: .005em;
  line-height: var(--lh-tight);
}
.section-head h2 { font-size: var(--t-section); max-width: 24em; }
.page-band h1 { font-size: var(--t-page); max-width: 16em; }
.scene-title h2 { font-size: var(--t-display); }
.play-hero-head h1.display { font-size: var(--t-page); max-width: 11em; text-shadow: 0 1px 16px rgba(1, 18, 33, .55); }
@media (max-width: 1099px) { .play-hero-head h1.display { font-size: clamp(1.5rem, 5.4vw, 2.05rem); max-width: none; } }
.mem-card .mem-h { font-size: var(--t-section); }
.block-title { font: 400 var(--t-sub)/var(--lh-title) var(--serif); }
#club-detail .ed-item h2 { font-size: var(--t-sub); }

/* ── Text: Inter, the first site's reading sizes ─────────────────────────── */
.section-lede { font: 400 var(--t-lede)/var(--lh-body) var(--sans); max-width: 40em; margin-top: var(--s-4); }
.page-band .lede { font-family: var(--sans); font-size: var(--t-lede); line-height: var(--lh-body); max-width: 40em; }
.mem-lede { font: 400 var(--t-lede)/var(--lh-body) var(--sans); }
.block-text { font-size: var(--t-lede); line-height: var(--lh-body); }
.section-sub { font-size: var(--t-meta); }

/* ── Labels: one size, one weight, one tracking (the first site's) ───────── */
.kicker, .kicker--sand, .kicker--photo,
.section-link,
.site-foot .foot-col h4,
.price-grid thead th, .mini-grid thead th, .price-table th,
.ev-date, .ev-f dt, .visit-block h3, .rc .rc-eyebrow,
.mem-plan-k,
.hero-rail, .scene-idx,
#sponsors .sponsor-court b span {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
}
.section-link { line-height: 1; }

/* ── Buttons and the header: small caps labels, never shouting ───────────── */
.btn, .btn--pill, .site-head .btn--play, .motion-btn, .site-head .nav-toggle, .scroll-cue {
  font-weight: 600;
  letter-spacing: .14em;
}
.btn, .btn--pill, .site-head .btn--play, .site-head .nav-toggle { font-size: var(--t-label); }
.site-head .nav a:not(.btn) { font-weight: 600; font-size: var(--t-label); letter-spacing: .13em; }
@media (min-width: 1081px) {
  .site-head .nav .lang-toggle--menu .lang-opt { font-size: var(--t-label); font-weight: 600; }
}

/* The header carries the club's wordmark (LJ, 1 Oct) in place of the B. */
.site-head .brand .brand-mark.brand-wordmark { height: 32px; width: auto; filter: none; }
@media (max-width: 760px) { .site-head .brand .brand-mark.brand-wordmark { height: 26px; } }

/* The menu, phone and tablet: the first site's dropdown — a panel under the
   header, 44px rows on hairlines, the 11px label, not a screen of capitals. */
@media (max-width: 1080px) {
  .site-head .nav.open {
    bottom: auto; max-height: calc(100vh - var(--head-h)); max-height: calc(100svh - var(--head-h));
    padding: var(--s-2) max(var(--gutter), 20px) var(--s-6);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .6);
  }
  .site-head .nav.open a:not(.btn) {
    min-height: var(--tap); padding: 0;
    font: 600 var(--t-label)/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
    color: var(--bone); border-bottom: 1px solid var(--line-dark);
  }
  .site-head .nav.open a:not(.btn):hover { color: var(--bone); opacity: .7; }
  .site-head .nav.open .lang-toggle--menu { margin-top: var(--s-5); }
}

/* ── Figures and small titles inside the new parts, in the old language ─── */
#groups .group-card h3 { font-family: var(--serif); font-weight: 400; font-stretch: normal; text-transform: none; letter-spacing: .005em; }
#sponsors .sponsor-court b { font: 400 var(--t-card)/1.15 var(--serif); text-transform: none; }
.plan-v, .mem-plan-v b { font-family: var(--serif); font-weight: 400; font-stretch: normal; letter-spacing: 0; font-size: clamp(2rem, 3.4vw, 2.7rem); }
#whats-on .pc-tile-d { font: 600 23px/1 var(--sans); }
.price-table td.p-figure { font: 400 23px/1.2 var(--serif); letter-spacing: 0; }

/* ── The home hero: no masthead line now; the buttons sit under the wordmark */
.scene--hero .scene-actions { grid-column: 1 / -1; justify-self: start; margin-top: 18px; }
@media (max-width: 760px) { .scene--hero .scene-actions { margin-top: 18px; } }

/* ── Scrims: a light shade over the photographs, a soft pool behind words ── */
/* Home hero, every room (was .92/.88 pool, .94 → .5 foot, .6 top). */
.scene--hero .slide::after {
  background:
    radial-gradient(ellipse 62% 52% at 0% 100%, rgba(1, 26, 51, .6) 0%, rgba(1, 26, 51, .42) 50%, rgba(1, 26, 51, 0) 100%),
    linear-gradient(to top, rgba(1, 26, 51, .5) 0%, rgba(1, 26, 51, .18) 30%, rgba(1, 26, 51, 0) 50%),
    linear-gradient(rgba(1, 26, 51, .36), rgba(1, 26, 51, 0) 18%);
}
/* The room's glass tag keeps a soft pool under it (was .8/.68). */
.scene--hero .slide figcaption::before { background: radial-gradient(closest-side, rgba(1, 26, 51, .74), rgba(1, 26, 51, .6) 55%, rgba(1, 26, 51, 0)); }
.scene--hero .scene-copy > .kicker { text-shadow: 0 1px 14px rgba(1, 26, 51, .7), 0 1px 3px rgba(1, 26, 51, .6); }
/* A soft local pool behind the hero's words and buttons only, so the
   photograph around them stays clear. */
.scene--hero .scene-copy::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -120px; bottom: -70px; left: calc(-1 * var(--gutter)); width: min(1040px, 82vw);
  background: radial-gradient(ellipse 75% 50% at 25% 46%, rgba(1, 26, 51, .74) 0%, rgba(1, 26, 51, .66) 55%, rgba(1, 26, 51, 0) 100%);
}
@media (max-width: 760px) {
  .scene--hero .scene-copy::before { top: -90px; bottom: -40px; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); width: auto; background: radial-gradient(ellipse 120% 50% at 30% 50%, rgba(1, 26, 51, .7) 0%, rgba(1, 26, 51, .6) 50%, rgba(1, 26, 51, 0) 100%); }
}
/* The header over a photograph (was .62). */
html.photo-top .site-head { background: linear-gradient(rgba(1, 26, 51, .55), rgba(1, 26, 51, .3) 70%, rgba(1, 26, 51, 0)) no-repeat; }
/* Over a bright room the nav tabs' glass takes a little navy, so their words
   hold 4.5:1 without shading the whole photograph. */
@media (min-width: 1081px) { html.photo-top .site-head:not(.is-solid) .nav a:not(.btn) { background: rgba(1, 26, 51, .70); } }
/* Inner-page photo bands (was .55 top, .94 → .78 → .3 foot). */
body:not([data-page="play"]) .page-band .band-scrim {
  background:
    radial-gradient(ellipse 58% 62% at 24% 70%, rgba(1, 26, 51, .66) 0%, rgba(1, 26, 51, .56) 50%, rgba(1, 26, 51, 0) 100%),
    linear-gradient(to top, rgba(1, 26, 51, .55) 0%, rgba(1, 26, 51, .22) 45%, rgba(1, 26, 51, 0) 75%),
    linear-gradient(rgba(1, 26, 51, .36), rgba(1, 26, 51, 0) 160px);
}
.page-band h1, .page-band .lede, .page-band .kicker { text-shadow: 0 1px 14px rgba(1, 26, 51, .6), 0 1px 3px rgba(1, 26, 51, .45); }
/* /play behind the wizard (was .9 → .55 → .45 over the whole photo). */
.play-hero-scrim { background: radial-gradient(ellipse 46% 70% at 70% 50%, rgba(1, 18, 33, .3), rgba(1, 18, 33, 0)), linear-gradient(to top, rgba(1, 18, 33, .62) 0%, rgba(2, 35, 68, .34) 55%, rgba(2, 35, 68, .3) 100%); }
@media (max-width: 1099px) { .play-hero-scrim { background: radial-gradient(ellipse 80% 50% at 50% 62%, rgba(1, 18, 33, .3), rgba(1, 18, 33, 0)), linear-gradient(to top, rgba(1, 18, 33, .62) 0%, rgba(2, 35, 68, .34) 55%, rgba(2, 35, 68, .3) 100%); } }
.play-hero-head { background: radial-gradient(ellipse farthest-side at 30% 50%, rgba(1, 18, 33, .72), rgba(1, 18, 33, 0)); }
/* ── Spacing: the first site's one even rhythm (96 / 68 / 56) ───────────── */
:root { --s-section: 96px; --s-head: 44px; }
@media (max-width: 860px) { :root { --s-section: 68px; --s-head: 32px; } }
@media (max-width: 560px) { :root { --s-section: 56px; } }
#contact.section, .mem-glass { padding-top: var(--s-section); padding-bottom: var(--s-section); }
/* The club section still sits close to Play this week (LJ, 1 Oct), on the rhythm. */
#club.section { padding-bottom: calc(var(--s-section) / 2) !important; }
#club + .section, #club + section { padding-top: calc(var(--s-section) / 2) !important; }

/* ── Ask Lily prompts: quiet, in the old language ─────────────────────────── */
.ask-prompt { min-height: var(--tap); gap: 12px; padding: 3px 3px 3px 16px; font: 500 var(--t-meta)/1.3 var(--sans); background: transparent; border-color: var(--line-2); }
.ask-prompt-go { width: 36px; height: 36px; }
.ask-prompt-go .ico { width: 16px; height: 16px; }
.ask-row { gap: 8px; }
/* ── Card and row titles at the first site's card scale ─────────────────── */
.info-title, .bp-name, .ev-name { font-size: var(--t-card); line-height: var(--lh-title); }
.more--panel > summary { font-size: var(--t-card); min-height: 64px; }
.club-coda .block-title { font-size: var(--t-section); line-height: var(--lh-tight); }
.club-coda .block-text { font: 400 var(--t-lede)/var(--lh-body) var(--sans); }
/* The night prompts keep their own light-on-dark colours. */
.ask-prompt--night { background: rgba(243, 239, 235, .06); border-color: rgba(243, 239, 235, .32); }
.mem-card .ask-prompt--night { background: rgb(var(--cg-tint) / .28); border-color: rgba(243, 239, 235, .3); }
/* ═══ END OLD STYLING RESTORED ═════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   HOME LOOM (LJ, 2 Oct)
   ───────────────────────────────────────────────────────────────────────────
   The home page is the first site's look (8a280dd69, the one Wendy liked)
   under today's navy bar and moving hero. Everything here is scoped to the
   home page (body[data-page="home"]), so no other page changes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero words: the first site's kicker, Prata headline and Inter lede ───── */
body[data-page="home"] .scene--hero .scene-copy {
  display: flex; flex-direction: column; align-items: flex-start;
}
body[data-page="home"] .scene--hero .scene-copy > .kicker { margin-bottom: var(--s-4); color: var(--sand); }
body[data-page="home"] .scene--hero .hero-h1 {
  font: 400 var(--t-display)/1.08 var(--serif); letter-spacing: .005em; text-transform: none;
  color: #fff; max-width: 15em; margin: 0 0 var(--s-5);
  text-shadow: 0 1px 18px rgba(1, 26, 51, .35);
}
body[data-page="home"] .scene--hero .hero-lede {
  font: 400 var(--t-lede)/var(--lh-body) var(--sans);
  color: var(--paper-body); max-width: 34em; margin: 0;
  text-shadow: 0 1px 12px rgba(1, 26, 51, .35);
}
body[data-page="home"] .scene--hero .scene-actions { margin-top: var(--s-7); }
@media (max-width: 760px) {
  body[data-page="home"] .scene--hero .scene-copy > .kicker { order: 1; }
  body[data-page="home"] .scene--hero .hero-h1 { order: 2; font-size: clamp(2.05rem, 9.4vw, 2.55rem); margin-bottom: var(--s-4); }
  body[data-page="home"] .scene--hero .hero-lede { order: 3; }
  body[data-page="home"] .scene--hero .scene-actions { align-self: stretch; }
  body[data-page="home"] .scene--hero .hero-lede { font-size: 1rem; line-height: 1.55; }
  body[data-page="home"] .scene--hero .scene-actions { margin-top: var(--s-6); }
}
@media (max-width: 380px) {
  body[data-page="home"] .scene--hero .scene-actions .btn { padding: 0 16px; letter-spacing: .1em; }
}
@media (max-width: 760px) and (max-height: 800px) {
  body[data-page="home"] .scene--hero .hero-h1 { font-size: 1.95rem; }
  body[data-page="home"] .scene--hero .hero-lede { font-size: .9375rem; }
}

/* ── Hero scrim: one smooth fade, only where the words sit ─────────────────
   No pool, no ring, no oval (LJ: "nice and faded. No lines"): a long eased
   fade up from the foot, a gentler one in from the left edge where the words
   start, and a light one under the header. Each gradient runs through many
   small steps so no edge can be seen. The words hold 4.5:1 on every room
   (measured on the lightest pixel behind them, 1440, 390 and 360). */
body[data-page="home"] .scene--hero .scene-copy::before { content: none; }
body[data-page="home"] .scene--hero .slide::after {
  background:
    linear-gradient(to top,
      rgba(1, 26, 51, .88) 0%, rgba(1, 26, 51, .86) 14%, rgba(1, 26, 51, .83) 26%,
      rgba(1, 26, 51, .78) 36%, rgba(1, 26, 51, .7) 45%, rgba(1, 26, 51, .59) 53%,
      rgba(1, 26, 51, .46) 60%, rgba(1, 26, 51, .32) 67%, rgba(1, 26, 51, .19) 74%,
      rgba(1, 26, 51, .09) 81%, rgba(1, 26, 51, .03) 88%, rgba(1, 26, 51, 0) 94%),
    linear-gradient(to right,
      rgba(1, 26, 51, .62) 0%, rgba(1, 26, 51, .6) 20%, rgba(1, 26, 51, .54) 34%,
      rgba(1, 26, 51, .44) 46%, rgba(1, 26, 51, .32) 56%, rgba(1, 26, 51, .2) 64%,
      rgba(1, 26, 51, .1) 71%, rgba(1, 26, 51, .03) 78%, rgba(1, 26, 51, 0) 84%),
    linear-gradient(rgba(1, 26, 51, .42) 0%, rgba(1, 26, 51, .3) 6%, rgba(1, 26, 51, .16) 12%,
      rgba(1, 26, 51, .06) 17%, rgba(1, 26, 51, 0) 22%);
}
@media (max-width: 760px) {
  body[data-page="home"] .scene--hero .slide::after {
    background:
      linear-gradient(to top,
        rgba(1, 26, 51, .9) 0%, rgba(1, 26, 51, .88) 24%, rgba(1, 26, 51, .86) 40%,
        rgba(1, 26, 51, .82) 52%, rgba(1, 26, 51, .72) 60%, rgba(1, 26, 51, .56) 67%,
        rgba(1, 26, 51, .38) 73%, rgba(1, 26, 51, .22) 79%, rgba(1, 26, 51, .1) 85%,
        rgba(1, 26, 51, .03) 91%, rgba(1, 26, 51, 0) 96%),
      linear-gradient(rgba(1, 26, 51, .5) 0%, rgba(1, 26, 51, .36) 6%, rgba(1, 26, 51, .2) 12%,
        rgba(1, 26, 51, .08) 18%, rgba(1, 26, 51, 0) 24%);
  }
}
/* A short phone (667 tall): the words reach higher, so the fade does too. */
@media (max-width: 760px) and (max-height: 720px) {
  body[data-page="home"] .scene--hero .slide::after {
    background:
      linear-gradient(to top,
        rgba(1, 26, 51, .9) 0%, rgba(1, 26, 51, .88) 30%, rgba(1, 26, 51, .86) 48%,
        rgba(1, 26, 51, .82) 62%, rgba(1, 26, 51, .72) 70%, rgba(1, 26, 51, .56) 76%,
        rgba(1, 26, 51, .38) 81%, rgba(1, 26, 51, .22) 86%, rgba(1, 26, 51, .1) 91%,
        rgba(1, 26, 51, .03) 95%, rgba(1, 26, 51, 0) 99%),
      linear-gradient(rgba(1, 26, 51, .5) 0%, rgba(1, 26, 51, .36) 6%, rgba(1, 26, 51, .2) 12%,
        rgba(1, 26, 51, .08) 18%, rgba(1, 26, 51, 0) 24%);
  }
}
/* The room's glass tag carries its own navy tint, so it needs no glow (the
   oval) round it to be read. */
body[data-page="home"] .scene--hero .slide figcaption::before { content: none; }
body[data-page="home"] .scene--hero .slide figcaption {
  background: linear-gradient(180deg, rgba(1, 26, 51, .7), rgba(1, 26, 51, .64));
  border-color: rgba(243, 239, 235, .5);
}

/* ── Pictures fetched as they near the screen (site.js initDeferredPictures):
   the box keeps its shape, in bone, until the picture arrives. ─────────── */
body[data-page="home"] img[data-defer-src] { background: var(--bone); color: transparent; }

/* ── Play this week: the game cards in the club's sand, on white ─────────── */
body[data-page="home"] #board-preview .bp-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border: 0; }
@media (min-width: 761px) { body[data-page="home"] #board-preview .bp-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1081px) { body[data-page="home"] #board-preview .bp-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body[data-page="home"] #board-preview .bp-row,
body[data-page="home"] #board-preview .bp-row + .bp-row {
  background: var(--sand); border: 1px solid var(--sand); border-radius: 14px; padding: 18px; color: var(--ink);
}
body[data-page="home"] #board-preview .bp-row:hover { background: color-mix(in srgb, var(--sand) 86%, var(--ink)); border-color: color-mix(in srgb, var(--sand) 86%, var(--ink)); }
body[data-page="home"] #board-preview .bp-mark { background: var(--bone); border-color: rgba(2, 35, 68, .22); }
body[data-page="home"] #board-preview .bp-facts { color: var(--ink-body); }
body[data-page="home"] #board-preview .bp-facts .sb-sep { color: rgba(2, 35, 68, .55); }
body[data-page="home"] #board-preview .bp-go { color: var(--ink); }

/* ═══ END HOME LOOM ════════════════════════════════════════════════════════ */

/* ── Hero: a CLEAR photo (LJ, 2 Oct: "the murky scrim"). The fade sits only
   at the foot and the left edge behind the words, lightly; the words carry a
   soft shadow of their own so the photo is not dimmed to make them read. ── */
body[data-page="home"] .scene--hero .slide::after {
  background:
    linear-gradient(to top,
      rgba(1, 26, 51, .62) 0%, rgba(1, 26, 51, .5) 14%, rgba(1, 26, 51, .34) 26%,
      rgba(1, 26, 51, .18) 36%, rgba(1, 26, 51, .07) 44%, rgba(1, 26, 51, 0) 52%),
    linear-gradient(to right,
      rgba(1, 26, 51, .36) 0%, rgba(1, 26, 51, .26) 22%, rgba(1, 26, 51, .12) 40%,
      rgba(1, 26, 51, .03) 54%, rgba(1, 26, 51, 0) 62%),
    linear-gradient(rgba(1, 26, 51, .3) 0%, rgba(1, 26, 51, .12) 8%, rgba(1, 26, 51, 0) 16%);
}
@media (max-width: 760px) {
  body[data-page="home"] .scene--hero .slide::after {
    background:
      linear-gradient(to top,
        rgba(1, 26, 51, .7) 0%, rgba(1, 26, 51, .6) 22%, rgba(1, 26, 51, .44) 36%,
        rgba(1, 26, 51, .24) 48%, rgba(1, 26, 51, .08) 58%, rgba(1, 26, 51, 0) 66%),
      linear-gradient(rgba(1, 26, 51, .32) 0%, rgba(1, 26, 51, .12) 8%, rgba(1, 26, 51, 0) 16%);
  }
}
@media (max-width: 760px) and (max-height: 720px) {
  body[data-page="home"] .scene--hero .slide::after {
    background:
      linear-gradient(to top,
        rgba(1, 26, 51, .72) 0%, rgba(1, 26, 51, .62) 30%, rgba(1, 26, 51, .46) 46%,
        rgba(1, 26, 51, .26) 58%, rgba(1, 26, 51, .08) 68%, rgba(1, 26, 51, 0) 76%),
      linear-gradient(rgba(1, 26, 51, .32) 0%, rgba(1, 26, 51, .12) 8%, rgba(1, 26, 51, 0) 16%);
  }
}
body[data-page="home"] .scene--hero .hero-h1,
body[data-page="home"] .scene--hero .hero-lede,
body[data-page="home"] .scene--hero .scene-copy > .kicker {
  text-shadow: 0 1px 2px rgba(1, 26, 51, .55), 0 2px 18px rgba(1, 26, 51, .55);
}
body[data-page="home"] .scene--hero .scene-copy > .kicker { color: var(--bone, #f3efeb); }

/* ── /play option card (LJ, 3 Oct): use the card's width, not one left-hand
   column. The date and name across the top; time and court on the left,
   places and level on the right; the price beside Request. ────────────── */
.play-module .pc--head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; row-gap: 8px;
  grid-template-areas: "top top" "name name" "time places" "court who" "price act";
  align-items: center;
}
.play-module .pc--head > .pc-top { grid-area: top; }
.play-module .pc--head > .pc-name { grid-area: name; margin: 0; }
.play-module .pc--head > .pc-time { grid-area: time; margin: 0; }
.play-module .pc--head > .pc-court { grid-area: court; margin: 0; }
.play-module .pc--head > .pc-places { grid-area: places; margin: 0; justify-self: end; text-align: right; width: auto; }
.play-module .pc--head > .pc-who { grid-area: who; margin: 0; justify-self: end; }
.play-module .pc--head > .pc-price { grid-area: price; margin: 0; padding-top: 10px; border-top: 0; }
.play-module .pc--head > .pc-act { grid-area: act; margin: 0; padding-top: 10px; }
.play-module .pc--head > .pc-act .btn { width: 100%; }
/* A window card has no places or level: its court line takes the row. */
.play-module .pc--head > .pc-meta:not(.pc-time):not(.pc-court):not(.pc-places) { grid-column: 1 / -1; margin: 0; }
.play-module .pc--head .pc-top { display: flex; align-items: center; gap: 12px; }

/* ── Home, More than courts (LJ, 3 Oct): two to a row, centred; the Café and
   the Recovery Suite each take their own row. ─────────────────────────── */
body[data-page="home"] #club .facts { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
body[data-page="home"] #club .facts li { text-align: center; justify-content: center; }
body[data-page="home"] #club .facts li:nth-child(-n+2) { grid-column: 1 / -1; }
/* The left column carries the longer lines (time, court, price): give it
   more of the width so they sit on one line on a phone. */
.play-module .pc--head { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.play-module .pc--head > .pc-time,
.play-module .pc--head > .pc-price { white-space: nowrap; }
.play-module .pc--head > .pc-price { font-size: clamp(.95rem, 4.2vw, 1.1rem); }
.play-module .pc--head > .pc-price b { font-size: 1.35em; }
@media (max-width: 420px) {
  .play-module .pc--head > .pc-price { font-size: .9rem; }
  .play-module .pc--head > .pc-price b { font-size: 1.3em; }
  .play-module .pc--head > .pc-act .btn { padding-left: 10px; padding-right: 10px; }
}

/* ── LJ, 3 Oct ──────────────────────────────────────────────────────────── */
/* Fact lists: words sit on the line, left, in their column. */
body[data-page="home"] #club .facts li { text-align: left; justify-content: flex-start; }
/* Colour groups: Ask Lily sits in the grid; on a phone it fills the cell
   beside Jade, on wider screens it takes its own row. */
#groups .groups .group-ask { grid-column: 1 / -1; margin: 0; justify-self: start; }
@media (max-width: 760px) {
  #groups .groups .group-ask { grid-column: auto; justify-self: stretch; height: 100%; min-height: 44px; text-align: left; }
}
/* Pricing: two Ask Lily buttons under the table. */
#pricing .ask-row--pricing { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-6); }
/* Court sponsors: "COURT 1" as one small capitals label, like an eyebrow. */
#sponsors .sponsor-court b,
#sponsors .sponsor-court b span { font: 700 var(--t-eyebrow)/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sand); vertical-align: baseline; margin: 0; }
#sponsors .sponsor-court b span { margin-right: .35em; }

/* ── Meet Lily strip (LJ, 3 Oct): under the top bar on every page, part of
   the sticky header so it never covers the page. ───────────────────────── */
.lily-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 8px var(--gutter, 16px); min-height: 44px;
  background: var(--sand); color: var(--ink);
  font: 400 14px/1.35 var(--sans);
}
.lily-strip-text { margin: 0; flex: 1; min-width: 0; }
.lily-strip-text b { font-weight: 700; }
.lily-strip-go {
  flex: none; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bone, #F3EFEB);
  font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.lily-strip-x { flex: none; width: 44px; height: 44px; margin-right: -12px; display: grid; place-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; }
.lily-strip :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 600px) {
  .lily-strip { font-size: 13px; gap: 8px; }
  .lily-strip-text span { display: none; }
}
/* In the page under the hero, then held under the top bar (LJ, 3 Oct). */
.lily-strip--flow { position: sticky; top: var(--head-h, 76px); z-index: 40; }

/* ── Player guides: numbered steps with a screenshot each (R1080) ─────────── */
.guide-steps { list-style: none; margin: 0 0 var(--s-9); padding: 0; counter-reset: none; }
.guide-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.guide-step:first-child { border-top: 0; padding-top: var(--s-2); }
.guide-step-n { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 600 var(--t-meta)/1 var(--sans); font-variant-numeric: tabular-nums; }
.guide-step-body { min-width: 0; }
.guide-step-body .article-body > *:last-child { margin-bottom: 0; }
.guide-step-shot { margin: var(--s-4) 0 0; max-width: 340px; }
.guide-step-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e1); background: var(--paper-2); }
@media (max-width: 600px) {
  .guide-step { grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); }
  .guide-step-n { width: 30px; height: 30px; }
  .guide-step-shot { max-width: 100%; }
}

/* ── Levels (R272): the (i) and its small 0–7 bar ───────────────────────── */
/* The (i) is a 44 x 44 box (the site's minimum tap target); the circle is drawn inside it. */
.lv-i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px -8px -8px -2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; vertical-align: middle; flex: none; }
.lv-i::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--line-2); border-radius: 50%; }
.lv-i .ico { position: relative; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.lv-i[aria-expanded="true"] { color: #fff; }
.lv-i[aria-expanded="true"]::before { background: var(--ink); border-color: var(--ink); }
.pc-who { align-items: center; }
.lv-h2 { display: inline; }
.lv-h2 + [data-level-info-slot] .lv-i { margin-left: 2px; vertical-align: 2px; }
[data-level-info-slot] + .lv-info, .lv-h2 ~ .lv-info { margin-top: 12px; }
.lv-info { margin: 10px 0 4px; padding: 14px 14px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); color: var(--ink); font-size: 14px; text-align: left; }
.lv-info--compact { padding: 12px 14px 8px; }
.lvi-sheet-h { margin: 0 0 12px; font-family: var(--serif); font-size: var(--t-card); font-weight: 400; }
.sb-sheet .lv-info { margin-top: 0; }
.lv-info-h { margin: 0 0 10px; color: var(--ink-meta); font-size: 13px; }
.lvbar-track { position: relative; height: 10px; }
.lvbar-segs { display: flex; height: 100%; border-radius: 5px; overflow: hidden; }
.lvbar-seg { height: 100%; border-right: 2px solid var(--paper-2); }
.lvbar-seg:last-child { border-right: 0; }
.lvbar-seg:nth-child(1) { background: rgba(2, 35, 68, .10); }
.lvbar-seg:nth-child(2) { background: rgba(2, 35, 68, .18); }
.lvbar-seg:nth-child(3) { background: rgba(2, 35, 68, .28); }
.lvbar-seg:nth-child(4) { background: rgba(2, 35, 68, .40); }
.lvbar-seg:nth-child(5) { background: rgba(2, 35, 68, .54); }
.lvbar-range { position: absolute; top: -3px; bottom: -3px; min-width: 6px; border-radius: 6px; background: var(--teal); box-shadow: 0 0 0 2px var(--paper-2); }
.lvbar-dot { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px var(--paper-2); }
.lvbar-ticks { display: flex; justify-content: space-between; margin-top: 4px; color: var(--ink-meta); font-size: 12px; font-variant-numeric: tabular-nums; }
.lv-info-bands { display: grid; gap: 2px; margin: 10px 0 0; }
.lv-info-band { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.lv-info-band dt { margin: 0; color: var(--ink-body); }
.lv-info-band dd { margin: 0; color: var(--ink-meta); font-variant-numeric: tabular-nums; }
.lv-info-band.is-on dt { color: var(--ink); font-weight: 600; }
.lv-info-band.is-on dt::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--teal); vertical-align: 1px; }
.lv-info-band.is-on dd { color: var(--ink); font-weight: 600; }
/* On the navy level panel */
.lv-panel .lv-i::before { border-color: var(--line-light-2); }
.lv-panel .lv-i[aria-expanded="true"] { color: var(--ink); }
.lv-panel .lv-i[aria-expanded="true"]::before { background: var(--sand); border-color: var(--sand); }
.lv-panel .lv-info { background: rgba(255, 255, 255, .06); border-color: var(--line-light); color: #fff; }
.lv-panel .lv-info-h, .lv-panel .lvbar-ticks, .lv-panel .lv-info-band dd { color: var(--paper-meta); }
.lv-panel .lv-info-band { border-color: var(--line-light); }
.lv-panel .lv-info-band dt { color: var(--paper-body); }
.lv-panel .lv-info-band.is-on dt, .lv-panel .lv-info-band.is-on dd { color: #fff; }
.lv-panel .lvbar-seg { border-color: transparent; }
.lv-panel .lvbar-seg:nth-child(1) { background: rgba(255, 255, 255, .12); }
.lv-panel .lvbar-seg:nth-child(2) { background: rgba(255, 255, 255, .20); }
.lv-panel .lvbar-seg:nth-child(3) { background: rgba(255, 255, 255, .30); }
.lv-panel .lvbar-seg:nth-child(4) { background: rgba(255, 255, 255, .42); }
.lv-panel .lvbar-seg:nth-child(5) { background: rgba(255, 255, 255, .56); }
.lv-panel .lvbar-range, .lv-panel .lvbar-dot { box-shadow: 0 0 0 2px var(--ink); }