/* Generated by scripts/build-site.mjs from src/css/ — do not edit. */

/* --- about.css --- */
/* About — the finca photo is a 3:4 portrait file; show it as a landscape crop
   so it sits level with the sticky column beside it. */
.about-finca__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 55%;
}

/* Covered, not indoor (#covered): three cards with the same rows, the club's
   own first, each with a small line drawing after the club's "Know your
   court" posts. On wide screens every row lines up across the three cards:
   each card is a subgrid of the section's rows (kind, title, drawing, five
   comparisons). */
.covered__lede { max-width: 62ch; margin: 32px 0 40px; }
.covered { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.covered__card {
  padding: 26px 24px 8px;
  background: var(--paper-warm);
  border: 1px solid var(--rule-ink-12);
  border-top: 3px solid var(--rule-ink-35);
}
.covered__card--ours { border-top-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.covered__kind { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive); }
.covered__title { margin: 0 0 16px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--forest); }
.covered__fig { margin: 0 0 16px; color: var(--forest); }
.covered__fig svg { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; }
.covered__fig .cf-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.covered__fig .cf-rain { fill: none; stroke: var(--moss-mute); stroke-width: 1.5; stroke-linecap: round; }
.covered__fig .cf-sun,
.covered__fig .cf-wind { fill: none; stroke: var(--terracotta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.covered__fig .cf-court { fill: var(--stone); stroke: currentColor; stroke-width: 1.5; }
.covered__fig .cf-wet { fill: var(--moss); }
.covered__rows { margin: 0; }
.covered__rows > div { padding: 14px 0; border-top: 1px solid var(--rule-ink-16); }
.covered__rows dt { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss-mute); }
.covered__rows dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--forest); }
.covered__card--ours .covered__rows dd { font-weight: 600; }
@media (min-width: 901px) {
  .covered { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; }
  .covered__card { display: grid; grid-template-rows: subgrid; grid-row: span 8; }
  .covered__rows { display: contents; }
}
.covered__note { max-width: 62ch; margin: 32px 0 0; font-size: 18px; line-height: 1.55; color: var(--forest); }
.covered__note strong { font-weight: 600; }

/* --- contact.css --- */
/* Contact (/contact) — getting here: the map beside the address, the two
   ways to open it in Google Maps, and driving times as one short list. */
.getthere {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-8) var(--space-12);
  align-items: start;
}
.getthere__map {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--stone);           /* while the map loads */
  border: 1px solid var(--rule-ink-12);
}
.getthere__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.getthere__address { margin: 0; font-size: 18px; line-height: 1.55; color: var(--moss); }
.getthere__address strong { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--forest); }
.getthere__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}

.getthere__title {
  margin: var(--space-10) 0 var(--space-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
}
.getthere__times { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--forest); }
.getthere__times li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-ink-16);
  font-size: 16px;
  color: var(--moss);
}
.getthere__times li span:last-child { flex: none; color: var(--forest); font-weight: 600; font-variant-numeric: tabular-nums; }

.getthere__note { margin: var(--space-5) 0 0; font-size: 15px; line-height: 1.6; color: var(--moss); }

@media (max-width: 900px) {
  .getthere { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .getthere__map { aspect-ratio: 1 / 1; }   /* taller on phones: room for the pin and the roads around it */
  .getthere__actions .btn { flex: 1 1 100%; text-align: center; }
}

/* --- event.css --- */
/* Event pages (/events/…): page-head buttons and a fact list that reads left
   to right like the press kit's. */
.event-page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.event-page__facts .spec__row { justify-content: flex-start; }
.event-page__facts dt { flex: 0 0 8.5em; }
.event-page__facts dd { flex: 1 1 auto; max-width: 54ch; font-size: 16px; text-align: left; line-height: 1.55; }
@media (max-width: 700px) {
  .event-page__facts .spec__row { display: block; }
  .event-page__facts dt { margin-bottom: 4px; }
}

/* --- lotus-and-lime.css --- */
/* Lotus & Lime — the club's crest and the restaurant's logo, side by side.
   The logo arrived 2026-09-29 as a burgundy square; it fills its frame edge to edge. */
.lotus-marks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.lotus-marks figure { margin: 0; }
.lotus-marks__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--paper-warm);
  border: 1px solid var(--rule-ink-12);
}
.lotus-marks__crest { width: 60%; height: auto; border-radius: 50%; }
.lotus-marks__logo { display: block; width: 100%; height: 100%; object-fit: cover; }

.lotus-marks figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss-mute);
}
@media (max-width: 480px) {
  .lotus-marks { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lotus-marks figure {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }
  .lotus-marks figcaption { margin: 0; text-align: left; }
}

/* Inline links inside the forest "Eat, then play" section. Terracotta on forest
   is 3.46:1; gold on forest is 8.94:1, so the links here use gold. */
.lotus-day__link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lotus-day__link:hover,
.lotus-day__link:focus-visible { color: var(--paper); }

@media (max-width: 640px) {
  .lotus-marks figcaption { font-size: 12px; }
}

/* From the kitchen: the restaurant's own food photography. Desktop: the noodles
   lead across two columns and two rows, four dishes beside them, every tile
   4:5. Phone: the lead full width, the rest two by two. */
.lotus-food {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.lotus-food__item { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.lotus-food__item--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.lotus-food__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lotus-food__item:hover img { transform: scale(1.03); }
}
@media (max-width: 640px) {
  .lotus-food { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .lotus-food__item--lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; }
}

/* --- press.css --- */
/* Press kit (/press): fact sheet, copyable descriptions, crest, photographs. */
.press__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* The file type and size ride along in the button and drop to their own line
   when the button gets narrow. */
.press .btn:has(.press__size) { flex-wrap: wrap; column-gap: 10px; }
.press__size { font-weight: 400; letter-spacing: 0.08em; white-space: nowrap; opacity: 0.8; }
.press__email a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--paper-warm); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.press__email a:hover { color: var(--gold); }

/* Fact sheet: long values read left-aligned beside a fixed label column. */
.press__facts .spec__row { justify-content: flex-start; }
.press__facts dt { flex: 0 0 8.5em; }
.press__facts dd { flex: 1 1 auto; max-width: 54ch; font-size: 16px; text-align: left; line-height: 1.55; }

.press__texts { display: grid; gap: 24px; }
.press__text { background: var(--paper-warm); border: 1px solid var(--rule-ink-16); padding: 24px 28px 28px; }
.press__text-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.press__text-title { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); }
.press__copy {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--forest);
  border-radius: 2px;
  background: transparent;
  color: var(--forest);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.press__copy:hover { background: var(--forest); color: var(--paper); }
.press__copy:focus-visible { outline: 2px solid var(--terracotta-text); outline-offset: 2px; }
.press__text-body, .press__text-body p { margin: 0; max-width: 54ch; font-size: 16.5px; line-height: 1.7; color: var(--forest); }
.press__text-body p + p { margin-top: 14px; }

.press__rules { margin: 0; padding: 0; list-style: none; }
.press__rules li { max-width: 56ch; padding: 18px 0; border-bottom: 1px solid var(--rule-ink-16); font-size: 16.5px; line-height: 1.6; color: var(--moss); }
.press__rules li:first-child { border-top: 1px solid var(--rule-ink-16); }
.press__rules strong { color: var(--forest); font-weight: 600; }

.press__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.press__logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 16%; }
.press__logo img { width: 100%; max-width: 200px; height: auto; }
.press__logo--light { background: var(--paper-warm); border: 1px solid var(--rule-ink-16); }
.press__logo--dark { background: var(--forest); }

.press__photos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.press__photo { margin: 0; }
.press__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sand); }
.press__photo img.press__photo-img--portrait { object-position: 50% 55%; }
.press__photo figcaption { display: grid; gap: 6px; margin-top: 14px; }
.press__photo-cap { font-size: 15px; line-height: 1.5; color: var(--forest); }
.press__photo-meta { font-size: 13.5px; color: var(--moss-mute); }
/* A 44px tap area around a text-sized link. */
.press__photo-meta a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--terracotta-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.press__photo-meta a:hover { color: var(--forest); }

/* Nine photos stay three across down to 700px, so no row ends with one. */
/* Where the site moves a section's button below its content, keep it the
   width of its label like the other download button. */
@media (max-width: 1180px) { .press .section__split > .section__sticky > .btn { justify-self: start; } }
@media (max-width: 700px) {
  .press__photos { grid-template-columns: minmax(0, 1fr); }
  .press__facts .spec__row { display: block; }
  .press__facts dt { margin-bottom: 4px; }
  .press__text { padding: 20px; }
}
/* On a phone the size drops under the label and the button shrinks to it. */
@media (max-width: 480px) { .press .btn:has(.press__size) { flex-direction: column; } }

/* Press releases: the list on /press and the release pages (/press/…). */
.press__releases { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-ink-16); }
.press__releases li { display: grid; grid-template-columns: 10em minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule-ink-16); }
.press__releases time { font-size: 13.5px; color: var(--moss-mute); }
.press__releases a { font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--forest); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.press__releases a:hover { color: var(--terracotta-text); }
.press__langs { font-size: 13px; color: var(--moss-mute); white-space: nowrap; }
@media (max-width: 700px) { .press__releases li { grid-template-columns: minmax(0, 1fr); } }

/* A release headline is a sentence, not a slogan: smaller than a page title. */
.release .pagehead .display--xl { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; }
.release__body { max-width: 760px; }
.release__text p:not(.kicker) { margin: 0 0 18px; max-width: 64ch; font-size: 17px; line-height: 1.7; color: var(--moss); }
.release__text a { color: var(--terracotta-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.release__text a:hover { color: var(--forest); }
.release__text strong { color: var(--forest); }
.release__h { margin: 36px 0 12px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--forest); }
.release__text--es { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--rule-ink-16); }
.release__title { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; color: var(--forest); }
.release__text p.release__sub { font-size: 19px; color: var(--moss); margin-bottom: 28px; }
.release__back { margin-top: 48px; }

/* Printing the page gives a plain fact sheet: no chrome, no downloads. */
@media print {
  .openbar, .site-footer, .opening, .consent, .press__actions, .press__copy, #photos, #logo .btn, #press-contact .btn { display: none !important; }
  .press__facts a[href^="http"]::after, .press__rules a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; }
  .press .lede a[href^="/"]::after { content: " (fincaescondidacr.com" attr(href) ")"; font-size: 0.9em; }
  .press .pagehead, .press .section--forest { background: #fff; padding: 24px 0; }
  .press .pagehead *, .press .section--forest * { color: #000 !important; }
  .press .section { padding: 24px 0; }
  .press .section__sticky { position: static; }
}

/* --- tennis.css --- */
/* Tennis (/tennis) — a short page head, then one row of four choices
   ("What are you looking for?") that switches the academy's panels. Inside a
   panel every class is a row of the same list, so name, days and times and
   price line up in columns and compare at a glance. Then the coaches, the
   rules in four steps, court rates and the FAQ.

   Type on this page, five levels only: display (page and section heads),
   serif 30 (group heads), serif 22–24 (class names and prices, choice
   labels), sans 16 (running text, times), sans 14 / 12 caps (meta, labels,
   small print). Spacing from the 4px scale in tokens.css. */

/* --- Page head: compact, so the choices are on the first screen --------- */
.thero { padding: var(--space-16) var(--gutter) var(--space-12); }
.thero .pagehead__inner { align-items: end; }
/* Wide screens: the lede starts on the third choice's edge, so the head and
   the choices under it share one four-column grid. */
@media (min-width: 1025px) {
  .thero .pagehead__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-3); }
  .thero .pagehead__inner > :first-child { grid-column: 1 / 3; }
  .thero .pagehead__lede { grid-column: 3 / 5; }
}
.tnw { white-space: nowrap; }
.thero .display { margin-bottom: 0; }
.thero .pagehead__lede { max-width: 44ch; padding-bottom: 6px; }
@media (max-width: 1024px) {
  .thero { padding: var(--space-12) var(--gutter) var(--space-10); }
  .thero .pagehead__inner { row-gap: var(--space-5); }
}
@media (max-width: 640px) {
  .thero { padding: var(--space-10) var(--gutter) var(--space-8); }
  .thero .pagehead__lede { font-size: 16px; padding-bottom: 0; }
}

/* --- The choices ---------------------------------------------------------- */
.tpick { padding-top: var(--space-12); }
@media (max-width: 1024px) { .tpick { padding-top: var(--space-10); } }
@media (max-width: 640px)  { .tpick { padding-top: var(--space-6); } }

.tpick__choose { scroll-margin-top: var(--space-4); }
.tpick__choose[hidden] { display: none; }
.tpick__prompt {
  margin: 0 0 var(--space-4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--olive);
}
.tpick__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;            /* two rows on phones: the same height */
  gap: var(--space-3);
}
.tpick__tab {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-height: 80px;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  cursor: pointer;
  background: var(--paper-warm);
  color: var(--forest);
  border: 1px solid var(--rule-ink-35);
  border-radius: 2px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.tpick__tabname { font-family: var(--serif); font-size: 24px; line-height: 1.15; }
.tpick__tabsub { font-size: 14px; line-height: 1.4; color: var(--moss-mute); }
@media (hover: hover) {
  .tpick__tab:hover { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
}
.tpick__tab[aria-selected="true"],
.tpick__tab[aria-selected="true"]:hover { background: var(--forest); border-color: var(--forest); box-shadow: none; color: var(--paper-warm); cursor: default; }
.tpick__tab[aria-selected="true"] .tpick__tabsub { color: var(--sage); }
/* A notch under the chosen card points at what it opened. */
.tpick__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--space-6);
  bottom: -9px;
  width: 16px;
  height: 16px;
  background: var(--forest);
  transform: rotate(45deg);
  border-radius: 0 0 2px 0;
}
@media (max-width: 1024px) {
  .tpick__tab { padding: var(--space-4); }
  .tpick__tabname { font-size: 22px; }
}
/* Two by two: a notch would point at the card below, so the fill alone marks
   the choice. */
@media (max-width: 820px) {
  .tpick__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .tpick__tab[aria-selected="true"]::after { display: none; }
}
@media (max-width: 640px) {
  .tpick__tab { min-height: 72px; padding: var(--space-3) var(--space-4); }
  .tpick__tabname { font-size: 19px; }
  .tpick__tabsub { font-size: 13px; }
}
@media (max-width: 360px) {
  .tpick__tab { padding: var(--space-3); }
  .tpick__tabname { font-size: 17px; }
}
/* Windows high contrast replaces the fill: keep the chosen card marked. */
@media (forced-colors: active) {
  .tpick__tab[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .tpick__tab[aria-selected="true"] .tpick__tabsub { color: HighlightText; }
  .tpick__tab[aria-selected="true"]::after { background: Highlight; }
}

/* --- Panels --------------------------------------------------------------- */
/* Without JavaScript there are no choices: every panel reads in order under
   its own heading. With them (app.js adds .is-tabbed) the chosen card names
   the panel and the heading is for screen readers only. */
.tpick__panel[hidden] { display: none; }
.tpick__panel:focus-visible { outline-offset: 8px; }
.tpick__ptitle {
  margin: 0 0 var(--space-4);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--forest);
}
/* The tabbed look is the default (no reflow when the script arrives); the
   no-JavaScript reading lives in a <noscript> style in tennis.html. */
.tpick__panel { padding-top: var(--space-10); }
.tpick .tpick__ptitle {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tpick__intro {
  margin: 0 0 var(--space-10);
  max-width: 62ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--moss);
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .tpick__panel { padding-top: var(--space-8); }
  .tpick__intro { font-size: 17px; margin-bottom: var(--space-8); }
}

/* A group of classes: a heading, one line about it, then the list. */
.tgroup + .tgroup { margin-top: var(--space-16); }
.tgroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
}
.tgroup__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 32px);
  line-height: 1.1;
  color: var(--forest);
}
.tgroup__note {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: 16px;
  color: var(--moss);
}
/* A notice, not a day and not a button: terracotta caps after a dot, no box
   (so it cannot be mistaken for the dark day tags). */
.tbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--terracotta-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tbadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* In-panel targets (#clinics, #juniors…) land with room under the header. */
.tgroup { scroll-margin-top: var(--space-6); }
@media (max-width: 640px) { .tgroup + .tgroup { margin-top: var(--space-12); } }

/* --- The list: one row per class ----------------------------------------- */
/* Wide: four columns (class · about · days and times · price), with a header
   row. Tablet: the about text moves under the name. Phone: name and price on
   one line, days and times under it, the about text last. */
.plist { list-style: none; margin: 0; padding: 0; }
.plist__cols, .prog {
  display: grid;
  grid-template-columns: minmax(0, 15fr) minmax(0, 22fr) minmax(0, 13fr) minmax(0, 10fr);
  column-gap: var(--space-8);
}
.plist__cols--short, .plist--short .prog { grid-template-columns: minmax(0, 37fr) minmax(0, 13fr) minmax(0, 10fr); }
.plist__cols {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--forest);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss-mute);
}
.plist__cols > :last-child { text-align: right; }
.prog {
  grid-template-areas: "name about when price";
  align-items: start;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--rule-ink-16);
}
.plist--short .prog { grid-template-areas: "name when price"; }
.prog__name  { grid-area: name; }
.prog__about { grid-area: about; }
.prog__when  { grid-area: when; }
.prog__price { grid-area: price; text-align: right; }

.prog__title {
  margin: 0 0 var(--space-1);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  color: var(--forest);
}
.prog__meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--moss); }
.prog__meta strong { font-weight: 600; color: var(--forest); }
.prog__about p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--moss); text-wrap: pretty; }
.prog__about p + p { margin-top: var(--space-2); }
.prog__req strong { font-weight: 600; color: var(--forest); }

/* Days and times. Only a weekday gets the dark tag; anything else
   ("weekly", "on request", "you pick") is plain text. */
.when { margin: 0; font-size: 16px; line-height: 1.5; color: var(--moss); text-wrap: pretty; }
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.slots li { display: flex; align-items: center; gap: var(--space-3); }
.slot__day {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  border-radius: 2px;
  background: var(--forest);
  color: var(--paper-warm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* The column head names the column on wide screens; on phones the label
   sits in the box itself. */
.prog__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.slot__time { font-size: 16px; font-weight: 600; color: var(--forest); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Prices: the figure in the serif, its unit under it, right-aligned so the
   figures line up down the column. */
.price { margin: 0; }
.price + .price { margin-top: var(--space-3); }
.price__amt {
  display: block;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.15;
  color: var(--forest);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.price__unit { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--moss-mute); }
.price--ask { font-size: 16px; line-height: 1.5; color: var(--moss); }

@media (max-width: 1100px) {
  .plist__cols, .prog { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) minmax(0, 8.5rem); column-gap: var(--space-6); }
  .plist__cols > :nth-child(2):not(:last-child):nth-last-child(3) { display: none; }
  .plist__cols--short, .plist--short .prog { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) minmax(0, 8.5rem); }
  .prog { grid-template-areas: "name when price" "about when price"; }
  .plist--short .prog { grid-template-areas: "name when price"; }
  .prog__about { margin-top: var(--space-3); }
}
@media (max-width: 700px) {
  .plist__cols { display: none; }
  .plist { border-top: 1px solid var(--forest); }
  .prog, .plist--short .prog {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name price" "when when" "about about";
    column-gap: var(--space-4);
    padding: var(--space-5) 0;
  }
  .prog__title { font-size: 22px; }
  /* Days and times under a small label, set apart by a rule, not a box. */
  .prog__when {
    margin-top: var(--space-3);
    padding-left: var(--space-3);
    border-left: 2px solid var(--forest);
  }
  .prog__label {
    position: static; width: auto; height: auto; margin: 0 0 var(--space-2); overflow: visible;
    clip-path: none; white-space: normal;
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--moss-mute);
  }
  .prog__about { margin-top: var(--space-3); }
  .price__amt { font-size: 22px; }
  .price__unit { font-size: 13px; }
  .price--ask { max-width: 7.5em; margin-left: auto; font-size: 14px; line-height: 1.4; color: var(--moss-mute); }
}

/* --- Panel foot: the small print and the next step ------------------------ */
.tpick__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-8);
}
.tpick__foot .smallprint { margin: 0; max-width: 64ch; }
.tpick__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.tpick__back {
  display: inline-block;
  padding: var(--space-3) 0 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--forest);
  border-bottom: 1.5px solid var(--terracotta);
}
.tpick__back:hover { color: var(--terracotta-text); }
@media (max-width: 640px) {
  .tpick__actions { width: 100%; flex-direction: column-reverse; align-items: stretch; gap: var(--space-4); }
  .tpick__actions .btn { width: 100%; padding-left: var(--space-4); padding-right: var(--space-4); }
  .tpick__back { align-self: flex-start; }
}

/* --- Coaches -------------------------------------------------------------- */
.trainers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.trainer {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--forest);
}
.trainer__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.trainer__role {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
}
.trainer__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 32px); line-height: 1.1; color: var(--forest); }
.trainer__langs { margin: var(--space-2) 0 0; font-size: 14px; color: var(--moss); }
.trainer__bio { margin-top: var(--space-4); }
.trainer__bio p { margin: 0 0 var(--space-3); max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--moss); }
.trainer__bio p:last-child { margin-bottom: 0; }
.trainer__more { margin-top: var(--space-2); }
.trainer__more > summary {
  cursor: pointer;
  display: inline-block;
  padding: var(--space-3) 0 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest);
  border-bottom: 1.5px solid var(--terracotta);
  list-style: none;
}
.trainer__more > summary::-webkit-details-marker { display: none; }
.trainer__more > summary::after { content: " +"; content: " +" / ""; }
.trainer__more[open] > summary::after { content: " −"; content: " −" / ""; }
@media (max-width: 1100px) {
  .trainers { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .trainer { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-8); }
}
/* Phones: a small portrait beside the name, the story below. */
@media (max-width: 640px) {
  .trainer { grid-template-columns: 96px minmax(0, 1fr); gap: 0 var(--space-4); grid-auto-rows: min-content; }
  .trainer__img { grid-row: 1 / span 3; max-width: 96px; }
  .trainer__text { display: contents; }
  .trainer__role, .trainer__name, .trainer__langs { grid-column: 2; }
  .trainer__role { align-self: end; }
  .trainer__bio, .trainer__more { grid-column: 1 / -1; }
  .trainer__name { font-size: 26px; }
}

/* --- How it works -------------------------------------------------------- */
.howto {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}
@media (min-width: 560px) { .howto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .howto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.howto__step { padding-top: var(--space-4); border-top: 2px solid var(--forest); }
.howto__n { display: block; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--terracotta-text); }
.howto__title { margin: var(--space-3) 0 var(--space-2); font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--forest); }
.howto__step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--moss); }
.howto__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-12);
  padding: var(--space-6) var(--space-8);
  background: var(--paper-warm);
  border: 1px solid var(--rule-ink-12);
}
.howto__contact p { margin: 0; font-size: 16px; color: var(--moss); overflow-wrap: anywhere; }
.howto__contact strong { color: var(--forest); }
@media (max-width: 640px) {
  .howto { gap: var(--space-6); }
  .howto__n { font-size: 32px; }
  .howto__contact { padding: var(--space-5) var(--space-4); }
  .howto__contact .btn { width: 100%; padding-left: var(--space-4); padding-right: var(--space-4); }
  .howto__contact a[href^="mailto:"], .howto__contact a[href^="tel:"] { white-space: nowrap; }
}

/* Phone numbers and addresses never break mid-way. */
.tpick__foot a[href^="mailto:"], .tpick__foot a[href^="tel:"] { white-space: nowrap; }