/*
  Primal Moves Lisbon. The one stylesheet for the whole site.

  This file is the source. build/css.py publishes it as web/css/site.<hash>.css
  and points every page at it. Edit here, then run:  python3 build/css.py

  Plain CSS, class prefix pm-, no framework. Every colour, size and space is a
  custom property in the :root block below, and nowhere else.
  Type and layout spacing are fluid: the --size-* and --space-gap/block/gutter/
  section tokens are clamp() values that grow from 390px to 1248px wide. So no
  media query here changes a size or a space. The ones left change a layout.
  Flat colour blocks, one radius, thin dividers. No shadows, no gradients.
*/

/*#fonts*/
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/poppins-400.ac6d71b4.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/poppins-500.0da2d17e.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/poppins-700.cb726212.woff2) format("woff2"); }
/*#/fonts*/

/* ---------- tokens ---------- */
:root {
  /* colour: each one has a job, see the design system */
  --cream: #ede7dd;        /* the page */
  --ink: #1f2a22;          /* text on light grounds, primary buttons. as a ground: the footer and nothing else */
  --off-white: #fbf8f3;    /* text on dark grounds, review cards */
  --ink-soft: #5d635a;     /* text that has stepped back: a class that is over or cancelled. still 5 to 1 on the page */
  --deep-olive: #4f5b42;   /* memberships, top tier */
  --olive: #5f6b4f;        /* memberships, middle tier */
  --light-olive: #697557;  /* memberships, lighter tier. as light as it can be and still carry off-white text (4.6 to 1) */
  --terracotta: #b7694b;   /* accent outside pricing, review stars, headings only */
  --mustard: #d6a84f;      /* start here */
  --mauve: #c9aeb8;        /* pay as you go */
  --pink: #e2b3aa;         /* warnings and notes */
  --sage: #9fb0ab;         /* calm content outside pricing, and the "get the app" block */
  --rule-on-dark: rgba(251, 248, 243, 0.35);
  --rule-on-light: rgba(31, 42, 34, 0.4);
  --rule-soft: rgba(31, 42, 34, 0.15);   /* review card border */
  --scrim: rgba(31, 42, 34, 0.5);        /* the veil over the hero photo */
  --scrim-soft: rgba(31, 42, 34, 0.32);  /* the same veil over a photo that is dark already */
  --logo-orange: #be5a38;                /* the logo's own "Lisbon", not a UI colour */
  --map-land: #dcd8ce;                   /* the little map on /contact: the ground */
  --map-park: #c3c6b3;                   /* and its parks. streets are off-white, the river is sage */

  /* class colours: one per class, the same on its card, its page and in the week.
     for classes only. ink text on every one of them. */
  --class-foundations: #d6a84f;    /* mustard, because it is the class to start with */
  --class-primal: #cb947d;
  --class-moves: #e2b3aa;
  --class-progressions: #ead4a9;
  --class-handstands: #e8a77c;
  --class-compound: #bdc2af;
  --class-sculpt: #efcdb4;
  --class-inbody: #9fb0ab;
  --class-unwind: #a9bd9c;
  --class-self-practice: #d8c9d3;
  --class-events: #c5d3d0;         /* workshops and events in the week */

  /* type */
  --font-sans: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size-label-small: clamp(0.75rem, 0.7216rem + 0.1166vw, 0.8125rem);  /* 12 to 13 */
  --size-label: clamp(0.8125rem, 0.7557rem + 0.2331vw, 0.9375rem);      /* 13 to 15 */
  --size-caption: clamp(0.9375rem, 0.8807rem + 0.2331vw, 1.0625rem);    /* 15 to 17 */
  --size-body: clamp(1.0625rem, 1.0057rem + 0.2331vw, 1.1875rem);       /* 17 to 19 */
  --size-lead: clamp(1.1875rem, 1.0739rem + 0.4662vw, 1.4375rem);       /* 19 to 23 */
  --size-price-inline: clamp(1.625rem, 1.4545rem + 0.6993vw, 2rem);     /* 26 to 32 */
  --size-h3: clamp(1.75rem, 1.5227rem + 0.9324vw, 2.25rem);             /* 28 to 36 */
  --size-price: clamp(1.875rem, 1.6477rem + 0.9324vw, 2.375rem);        /* 30 to 38 */
  --size-h2: clamp(2.125rem, 1.6705rem + 1.8648vw, 3.125rem);           /* 34 to 50 */
  --size-h1: clamp(2.75rem, 1.8409rem + 3.7296vw, 4.75rem);             /* 44 to 76 */
  --size-display: clamp(4.75rem, 2.6477rem + 8.6247vw, 9.375rem);       /* 76 to 150 */

  /* space: small gaps are fixed, layout spacing is fluid */
  --space-4: 4px;
  --space-10: 10px;
  --space-14: 14px;
  --space-20: 20px;
  --space-28: 28px;
  --space-gap: clamp(1.25rem, 1.0227rem + 0.9324vw, 1.75rem);      /* 20 to 28, between blocks */
  --space-block: clamp(1.5rem, 1.0455rem + 1.8648vw, 2.5rem);      /* 24 to 40, inside a block */
  --space-gutter: clamp(0.625rem, -0.9091rem + 6.2937vw, 4rem);    /* 10 to 64, page edge. 10 on a phone (it was 20: Daniel halved it), 64 from 1248px up as before */
  --burger-inset: min(12px, var(--space-gutter));                  /* how far the menu button's 48px square reaches past its two lines into the gutter. never past the edge of the screen */
  --space-section: clamp(3.5rem, 2.3636rem + 4.662vw, 6rem);       /* 56 to 96, above and below a section */

  --radius-block: 14px;

  /* what a ground gives the things on it; the dark grounds swap these below */
  --pm-rule: var(--rule-on-light);
  --pm-focus: var(--ink);
  --pm-btn-bg: var(--ink);
  --pm-btn-fg: var(--off-white);
  --pm-btn-hover: var(--deep-olive);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { scroll-padding-top: 6.5rem; }

/* ---------- for a keyboard and for a screen reader ---------- */
/* words that are read out and not shown */
.pm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* the first stop for a keyboard: past the menu, to the page. out of sight until it has focus */
.pm-skip { position: absolute; top: var(--space-14); left: var(--space-14); z-index: 100; padding: var(--space-14) var(--space-20); border-radius: var(--radius-block); background: var(--ink); color: var(--off-white); font-weight: 700; text-decoration: none; transform: translateY(-300%); }
.pm-skip:focus { transform: none; }
/* <main> takes focus from the skip link so reading starts there. it is not a control, so no ring */
main:focus { outline: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 3px; }

/* ---------- surfaces: which text, divider and button colours a ground takes ---------- */
.pm-section--ink,
.pm-footer,
.pm-block--ink,
.pm-block--deep-olive,
.pm-block--olive,
.pm-block--light-olive,
.pm-block--terracotta,
.pm-hero--media {
  color: var(--off-white);
  --pm-rule: var(--rule-on-dark);
  --pm-focus: var(--off-white);
  --pm-btn-bg: var(--off-white);
  --pm-btn-fg: var(--ink);
  --pm-btn-hover: var(--cream);
}
.pm-section--cream,
.pm-block--cream,
.pm-block--mustard,
.pm-block--mauve,
.pm-block--pink,
.pm-block--sage,
.pm-block--off-white,
[class*="pm-class--"],
.pm-note,
.pm-review {
  color: var(--ink);
  --pm-rule: var(--rule-on-light);
  --pm-focus: var(--ink);
  --pm-btn-bg: var(--ink);
  --pm-btn-fg: var(--off-white);
  --pm-btn-hover: var(--deep-olive);
}

/* ---------- type: the fluid scale ---------- */
/* 11vw keeps one long word ("Progressions") inside a 320px screen. it only bites below 400px */
.pm-h1 { font-weight: 700; font-size: min(var(--size-h1), 11vw); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: break-word; }
.pm-h2 { font-weight: 700; font-size: var(--size-h2); line-height: 1; text-wrap: balance; }
.pm-h3 { font-weight: 700; font-size: var(--size-h3); line-height: 1; text-wrap: balance; }
.pm-h4 { font-weight: 700; font-size: var(--size-lead); line-height: 1.1; }
.pm-lead { font-size: var(--size-lead); line-height: 1.3; }
.pm-body { font-size: var(--size-body); line-height: 1.45; text-wrap: pretty; }
.pm-caption { font-size: var(--size-caption); line-height: 1.3; }
.pm-label { font-weight: 500; font-size: var(--size-label); line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; }
.pm-label--small { font-size: var(--size-label-small); }
.pm-display-price { font-weight: 700; font-size: var(--size-display); line-height: 0.9; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.pm-price { font-weight: 700; font-size: var(--size-price); line-height: 1; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.pm-price-inline { font-weight: 700; font-size: var(--size-price-inline); line-height: 1; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.pm-price__unit { font-weight: 400; font-size: var(--size-body); margin-left: 2px; }
.pm-price__unit--ghost { visibility: hidden; }
.pm-measure { max-width: 65ch; }

/* ---------- layout ---------- */
/* 1200px of content: the 1328px is that plus the 64px gutter on each side */
.pm-wrap { width: 100%; max-width: 1328px; margin-inline: auto; padding-inline: var(--space-gutter); }
.pm-section { padding-block: var(--space-section); }
.pm-section--tight { padding-top: 0; }
/* a section that starts with a picture as wide as the page: on a phone and a tablet, where the picture
   is stacked on top, nothing above it, so it sits right under the bar */
@media (max-width: 899px) {
  .pm-section--picture-first { padding-top: 0; }
}
.pm-section--ink { background: var(--ink); }
.pm-section--cream { background: var(--cream); }
.pm-stack { display: flex; flex-direction: column; gap: var(--space-gap); align-items: flex-start; }
.pm-stack > * { min-width: 0; }
.pm-stack--wide { align-items: stretch; }
.pm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-gap); }
.pm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-14) var(--space-gap); }
.pm-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-gap); align-items: center; }
/* two columns that start level, or that are made the same height */
.pm-split--top { align-items: start; }
/* stacked on a phone, the second column needs clear air above its own heading */
@media (max-width: 899px) {
  .pm-split--top { row-gap: calc(var(--space-gap) * 2); }
}
.pm-split--fill { align-items: stretch; }
@media (min-width: 720px) {
  .pm-grid--2, .pm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .pm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-gutter); }
  /* the first column goes to the right. on a phone it stays first */
  .pm-split--flip > :first-child { order: 2; }
}
@media (min-width: 1000px) {
  .pm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- label + heading pairing ---------- */
.pm-heading { display: flex; flex-direction: column; gap: var(--space-14); }
.pm-heading > .pm-lead, .pm-heading > .pm-body { max-width: 65ch; }
.pm-statement > .pm-h2 { max-width: 18em; }

/* ---------- meta row ---------- */
/* a row of short facts: SANTOS, LISBON · CLASSES SIX DAYS A WEEK · IN ENGLISH.
   A small dot sits in the gap before every fact, so three facts never read as one run of words.
   The fact that starts a line must not have one, and which fact that is depends on the width
   of the screen. So every fact carries its dot in the space to its left, the whole row is
   pulled left by that much, and the row is clipped at its true left edge: the dot of whatever
   starts a line falls outside and is not seen. The dot is drawn, not typed, so nothing reads it out. */
.pm-meta { --meta-gap: var(--space-28); display: flex; flex-wrap: wrap; row-gap: var(--space-4); padding: 0; list-style: none;
  margin-left: calc(var(--meta-gap) * -1); clip-path: inset(-1rem -1rem -1rem var(--meta-gap)); }
.pm-meta > li { position: relative; padding-left: var(--meta-gap); }
/* 0.08em to the left of the middle: a label's letter-spacing leaves that much air after its last letter */
.pm-meta > li::before { content: ""; position: absolute; left: calc(var(--meta-gap) / 2 - 2px - 0.08em); top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: currentColor; }
/* a row of tags: the same row without the dots, because a tag has its own outline */
.pm-tags { display: flex; flex-wrap: wrap; gap: var(--space-10); padding: 0; list-style: none; }

/* ---------- links ---------- */
.pm-link, .pm-prose a, .pm-say a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--pm-rule);
}
.pm-link:hover, .pm-prose a:hover, .pm-say a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* ---------- button ----------
   Labels are written in sentence case in the pages. Casing is decided here and
   only here: there is no text-transform, so buttons read as written. */
.pm-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--space-14) var(--space-28);
  border: 2px solid var(--pm-btn-bg);
  border-radius: var(--radius-block);
  background: var(--pm-btn-bg);
  color: var(--pm-btn-fg);
  font: inherit;
  font-weight: 700;
  font-size: var(--size-body);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.pm-btn:hover { background: var(--pm-btn-hover); border-color: var(--pm-btn-hover); }
.pm-btn__sub { font-weight: 400; font-size: var(--size-caption); line-height: 1.3; overflow-wrap: anywhere; }
.pm-btn--secondary { background: transparent; color: inherit; border-color: currentColor; }
.pm-btn--secondary:hover { background: var(--pm-btn-bg); color: var(--pm-btn-fg); border-color: var(--pm-btn-bg); }
.pm-btn--small { min-height: 44px; padding: var(--space-10) var(--space-20); font-size: var(--size-caption); }
.pm-btn--block { display: flex; width: 100%; }
.pm-btn--store { flex-direction: row; gap: var(--space-10); }
.pm-btn--store svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.pm-btn:disabled, .pm-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
/* a channel button with its icon on the left: the icon, then the label and its second line */
.pm-btn--icon { flex-direction: row; gap: var(--space-14); }
.pm-btn--icon > svg { flex: none; width: 26px; height: 26px; fill: currentColor; }
.pm-btn__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
/* as wide as its column: the icon and the words sit at the left edge */
.pm-btn--icon.pm-btn--block { justify-content: flex-start; }

/* the map pin in front of an address or a maps link. a drawn marker, the
   same on every device. terracotta in running text, the button's own colour
   on a button */
.pm-pin { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.3em; vertical-align: -0.12em; fill: var(--terracotta); }
.pm-btn .pm-pin { fill: currentColor; }

/* a checkout link with no product behind it yet. Local builds only: every one
   of these must be gone before the site goes live. See the handoff, section 12. */
[data-todo] { outline: 3px dashed var(--terracotta); outline-offset: 3px; }

/* ---------- the booking widget (sign-up only) ---------- */
.pm-widget { margin-top: var(--space-gap); }
.pm-widget * { font-family: inherit !important; }
.pm-widget .mindbody-widget, .pm-widget healcode-widget { display: block; width: 100%; }

/* ---------- colour block ---------- */
.pm-block {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-block);
  padding: var(--space-block);
  background: var(--cream);
}
.pm-block--ink { background: var(--ink); }
.pm-block--deep-olive { background: var(--deep-olive); }
.pm-block--olive { background: var(--olive); }
.pm-block--light-olive { background: var(--light-olive); }
.pm-block--terracotta { background: var(--terracotta); }
.pm-block--mustard { background: var(--mustard); }
.pm-block--mauve { background: var(--mauve); }
.pm-block--pink { background: var(--pink); }
.pm-block--sage { background: var(--sage); }
.pm-block--off-white { background: var(--off-white); }

/* ---------- class colours ---------- */
.pm-class--foundations { background: var(--class-foundations); }
.pm-class--primal { background: var(--class-primal); }
.pm-class--moves { background: var(--class-moves); }
.pm-class--progressions { background: var(--class-progressions); }
.pm-class--handstands { background: var(--class-handstands); }
.pm-class--compound { background: var(--class-compound); }
.pm-class--sculpt { background: var(--class-sculpt); }
.pm-class--inbody { background: var(--class-inbody); }
.pm-class--unwind { background: var(--class-unwind); }
.pm-class--self-practice { background: var(--class-self-practice); }
.pm-class--events { background: var(--class-events); }
.pm-block > .pm-lead { margin-top: var(--space-10); }
.pm-block__rule { border: 0; border-top: 1px solid var(--pm-rule); margin: var(--space-20) 0; width: 100%; }

/* ---------- note box ---------- */
.pm-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-radius: var(--radius-block);
  padding: var(--space-20);
  background: var(--pink);
}

/* ---------- tag ---------- */
.pm-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-14);
  border-radius: var(--radius-block);
  background: var(--ink);
  color: var(--off-white);
  font-weight: 500;
  font-size: var(--size-label-small);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pm-tag--mustard { background: var(--mustard); color: var(--ink); }
.pm-tag--mauve { background: var(--mauve); color: var(--ink); }
.pm-tag--pink { background: var(--pink); color: var(--ink); }

/* ---------- list without bullets ---------- */
.pm-list { list-style: none; padding: 0; text-wrap: pretty; }

/* ---------- price card ---------- */
.pm-price-rows { margin-top: var(--space-20); border-top: 1px solid var(--pm-rule); }
.pm-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-14);
  padding: var(--space-14) 0;
  border-bottom: 1px solid var(--pm-rule);
}
.pm-price-row__term { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; font-size: var(--size-lead); line-height: 1.2; }
.pm-price-row__price { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); flex-shrink: 0; text-align: right; }
.pm-price-row__price > .pm-btn { margin-top: var(--space-10); }
.pm-price-row .pm-caption { text-wrap: balance; }
/* the narrowest phones: term above price, so the button never sits on the words */
@media (max-width: 359px) {
  .pm-price-row { flex-direction: column; align-items: stretch; }
  .pm-price-row__price { align-items: flex-start; text-align: left; }
}
.pm-price-card__included { display: flex; flex-direction: column; gap: var(--space-10); margin-top: var(--space-gap); }

/* ---------- intro offer ---------- */
.pm-intro { display: grid; gap: var(--space-20); }
.pm-intro__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pm-intro__body > .pm-lead { margin-top: var(--space-10); }
.pm-intro__notes {
  align-self: stretch;
  margin-top: var(--space-20);
  padding-top: var(--space-20);
  border-top: 1px solid var(--pm-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.pm-intro__body > .pm-btn, .pm-intro__body > .pm-actions { margin-top: var(--space-gap); }
@media (min-width: 720px) {
  .pm-intro { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-block); align-items: center; }
}

/* ---------- pay as you go ---------- */
.pm-payg { gap: var(--space-14); }
.pm-payg__offers { display: grid; gap: var(--space-gap); }
.pm-payg__offer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10); font-size: var(--size-lead); line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; }
.pm-payg__offer .pm-price-inline, .pm-payg__offer .pm-caption { margin-left: var(--space-4); }
@media (min-width: 720px) {
  .pm-payg__offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- comparison ---------- */
.pm-compare { gap: var(--space-14); }
.pm-compare__figure { display: grid; gap: var(--space-4); margin-top: auto; padding-top: var(--space-14); border-top: 1px solid var(--pm-rule); }

/* ---------- photo ---------- */
.pm-photo { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-block); background: var(--sage); }
.pm-photo--tall { aspect-ratio: 4 / 5; }
/* A square that keeps its shape before its picture arrives, in every browser. Its height comes
   from padding (a share of its own width), not from aspect-ratio, and the picture is laid over
   the box instead of sitting inside it. So nothing about the picture, loaded or not, tall or
   wide, can change the size of the box or move what is around it. */
.pm-photo--square { position: relative; aspect-ratio: auto; }
.pm-photo--square::before { content: ""; display: block; padding-top: 100%; }
.pm-photo--square picture { position: absolute; inset: 0; height: auto; }
.pm-photo picture { display: block; height: 100%; }
.pm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* beside a column of rows on a wide screen: as tall as the rows, never a sliver */
@media (min-width: 900px) {
  .pm-photo--fill { position: relative; aspect-ratio: auto; height: 100%; min-height: 24rem; }
  .pm-photo--fill picture { position: absolute; inset: 0; }
}

/* ---------- hero ---------- */
.pm-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-gap); min-width: 0; }
.pm-hero--media { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(35rem, 100svh, 70vw); overflow: hidden; background: var(--ink); }
/* The photo fills the window: as tall as the screen, but never taller than 70% of its
   own width, so a narrow or upright window gets the 35rem it always had (a phone is
   unchanged). The old fixed 45rem cut a wide screen's photo down to a strip. */
.pm-hero--media > * { position: relative; z-index: 2; }
.pm-hero--media > .pm-hero__media { position: absolute; inset: 0; z-index: 0; }
.pm-hero__media picture { display: block; height: 100%; }
.pm-hero__media img, .pm-hero__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a wide photo on a narrow screen loses its sides: this one keeps what is left of centre */
.pm-hero__media--left img { object-position: 22% 50%; }
.pm-hero--media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim); }
.pm-hero--soft::before { background: var(--scrim-soft); }
.pm-hero--media .pm-hero__body { max-width: 760px; padding-block: 8rem max(var(--space-block), var(--space-gutter)); }
@media (prefers-reduced-motion: reduce) {
  .pm-hero__media video { display: none; }
}

/* ---------- feature: photo and text. stacked on a phone, side by side and alternating on a wide screen ---------- */
.pm-features { display: grid; gap: var(--space-gap); }
.pm-feature { gap: var(--space-14); overflow: hidden; }
.pm-feature__photo { margin: calc(var(--space-block) * -1) calc(var(--space-block) * -1) var(--space-10); aspect-ratio: 4 / 3; overflow: hidden; }
.pm-feature__photo picture { display: block; height: 100%; }
.pm-feature__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-feature__text { display: flex; flex-direction: column; gap: var(--space-14); }
.pm-feature__text > p { max-width: 42ch; }
@media (min-width: 860px) {
  .pm-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; min-height: clamp(24rem, 38vw, 30rem); }
  .pm-feature__photo { position: relative; margin: 0; aspect-ratio: auto; height: 100%; }
  .pm-feature__photo picture { position: absolute; inset: 0; }
  .pm-feature__text { justify-content: center; padding: var(--space-gutter); }
  .pm-feature:nth-child(even) > .pm-feature__photo { order: 2; }
}

/* ---------- class card, class page head ---------- */
/* the whole card is the link. the arrow says so where nothing can hover; where
   something can, the card lifts a little. the one soft shadow on the site */
.pm-class-card { gap: var(--space-14); color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pm-class-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-14); }
.pm-class-card__top > .pm-label { min-width: 0; }
.pm-class-card > .pm-tag { align-self: flex-start; }
.pm-go { flex: none; width: 24px; height: 24px; transition: transform 0.2s ease; }
.pm-class-card > p { max-width: 60ch; }
.pm-class-card__facts { display: grid; gap: var(--space-10) var(--space-gap); margin-top: auto; padding-top: var(--space-14); border-top: 1px solid var(--pm-rule); }
.pm-class-card__facts > div { display: flex; flex-direction: column; gap: var(--space-4); }
@media (hover: hover) {
  .pm-class-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(31, 42, 34, 0.4); }
  .pm-class-card:hover .pm-go { transform: translateX(4px); }
}
.pm-class-card:active { transform: none; box-shadow: none; }
@media (min-width: 480px) {
  .pm-class-card__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.pm-block--hero { gap: var(--space-gap); align-items: flex-start; padding-block: max(var(--space-block), var(--space-gutter)); }

/* ---------- events: the same card as a class, in the events tint, with a photo when there is one ---------- */
.pm-event { overflow: hidden; }
.pm-event__body { display: flex; flex-direction: column; flex: 1; gap: var(--space-14); min-width: 0; }
.pm-event__body > p { max-width: 60ch; }
/* An event's name in the list. Event names are long ("DIVINE UNION:Tantra Yoga with Live Indian
   Classical Music" is 56 characters) and they are typed by whoever runs the event, so the size is
   set for a long one: 18px on a phone, where that name takes two lines on a 375px screen and up,
   growing to 24px in the wide-screen row. A heading size (28px and up) made it four lines. */
.pm-event__title { font-weight: 700; font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem); line-height: 1.15; text-wrap: balance; }
.pm-event__body > .pm-tag { align-self: flex-start; }
.pm-event__date { display: none; }
.pm-event__day { font-weight: 700; font-size: var(--size-h2); line-height: 1; }
.pm-event__photo { margin: calc(var(--space-block) * -1) calc(var(--space-block) * -1) var(--space-10); aspect-ratio: 16 / 10; overflow: hidden; }
.pm-event__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a square or upright picture is shown whole: cropping a poster cuts its words off */
.pm-event__photo--whole { aspect-ratio: auto; }
.pm-event__photo--whole img { height: auto; }
.pm-event-none { border: 1px solid var(--rule-soft); }
/* the list on a wide screen: one event to a row, and the row is one joined block.
   the date as a calendar leaf, then the picture, then the words. the leaf replaces the
   written date, and the row leaves the description to the event's own page */
@media (min-width: 900px) {
  .pm-event-list { grid-template-columns: minmax(0, 1fr); }
  .pm-event { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0; padding: 0; }
  .pm-event--pic { grid-template-columns: 8.5rem 17.5rem minmax(0, 1fr); }
  .pm-event__date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-10); padding: var(--space-20); background: var(--sage); }
  .pm-event__photo, .pm-event__photo--whole { margin: 0; aspect-ratio: auto; min-height: 17.5rem; }
  .pm-event__photo img, .pm-event__photo--whole img { height: 100%; }
  .pm-event__body { justify-content: center; padding: var(--space-block); padding-right: calc(var(--space-block) + 48px); }
  .pm-event__body > p, .pm-event__body > .pm-class-card__top > .pm-label { display: none; }
  .pm-event__body > .pm-class-card__top { position: absolute; top: var(--space-block); right: var(--space-block); }
  .pm-event__body > .pm-class-card__facts { margin-top: 0; }
}
/* an event's own page, when its picture is square or upright: the picture large and whole,
   joined to the words as one block. side by side on a wide screen, the picture on top on a phone.
   the corners are rounded on the outside only: where the two meet there is no gap and no curve */
.pm-event-head { display: grid; overflow: hidden; border-radius: var(--radius-block); }
.pm-event-head__photo { overflow: hidden; background: var(--class-events); }
.pm-event-head__photo img { display: block; width: 100%; height: auto; max-height: 48rem; object-fit: cover; }
.pm-event-head > .pm-block { justify-content: center; border-radius: 0; }
@media (min-width: 900px) {
  .pm-event-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .pm-event-head__photo img { height: 100%; }
}
.pm-photo--wide { aspect-ratio: 2 / 1; }

/* ---------- /coaches: a picture, a name, a few lines, for each coach ---------- */
.pm-coaches { padding: 0; list-style: none; align-items: start; row-gap: calc(var(--space-gap) * 2); }
.pm-coach { display: flex; flex-direction: column; gap: var(--space-14); }
.pm-coach__face { margin-bottom: var(--space-4); }
/* the picture and the name lead to the coach's own page. the name looks like a heading, not a link, until pointed at */
.pm-coach__face { display: block; }
.pm-coach__name { color: inherit; text-decoration: none; }
.pm-coach__name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
/* a coach's own page: the event page's joined picture and block, with the picture square */
/* the square is held open the same way as .pm-photo--square: by padding, with the picture laid over it */
.pm-event-head--square .pm-event-head__photo { position: relative; background: var(--off-white); }
.pm-event-head--square .pm-event-head__photo::before { content: ""; display: block; padding-top: 100%; }
.pm-event-head--square .pm-event-head__photo picture { position: absolute; inset: 0; }
.pm-event-head--square .pm-event-head__photo img { width: 100%; height: 100%; max-height: none; object-position: 50% 30%; }
/* a portrait is cut square. faces sit above the middle, so the cut keeps more of the top.
   a focus point set on the picture in the CMS overrides this, inline */
.pm-coach .pm-photo img { object-position: 50% 30%; }

/* ---------- the week on a wide screen: a calendar ---------- */
/* a time ruler and six days. --q is a quarter of an hour; a class sits at its
   real start time and is as tall as it is long. nothing is nudged into rows */
.pm-cal { display: none; --q: 19px; --ruler: 3.5rem; gap: var(--space-14); }
.pm-cal__head, .pm-cal__body, .pm-cal__foot { display: grid; grid-template-columns: var(--ruler) repeat(var(--days), minmax(0, 1fr)); column-gap: 8px; }
.pm-cal__head > p { display: flex; align-items: center; min-height: 32px; }
.pm-cal__head > .is-today { justify-self: start; margin-left: calc(var(--space-10) * -1); padding: 0 var(--space-10); border-radius: var(--radius-block); background: var(--ink); color: var(--off-white); }
.pm-cal__body { position: relative; }
/* a hairline on every hour, behind the classes */
.pm-cal__body::before { content: ""; position: absolute; inset: 0 0 0 var(--ruler); border-bottom: 1px solid var(--rule-soft); background-image: repeating-linear-gradient(to bottom, var(--rule-soft) 0, var(--rule-soft) 1px, transparent 1px, transparent calc(var(--q) * 4)); }
.pm-cal__ruler, .pm-cal__slots { display: grid; grid-template-rows: repeat(var(--rows), var(--q)); }
.pm-cal__ruler > span { grid-row: var(--s); height: 0; font-size: var(--size-label-small); line-height: 0; font-variant-numeric: lining-nums tabular-nums; }
.pm-cal__slots { position: relative; padding: 0; list-style: none; }
.pm-cal__slots > li { grid-row: var(--s) / span var(--n); min-height: 0; padding: 1px 0 3px; }
.pm-slot { display: flex; flex-direction: column; gap: 1px; height: 100%; padding: 7px var(--space-10); overflow: hidden; border-radius: 10px; color: var(--ink); font-size: var(--size-caption); line-height: 1.15; text-decoration: none; }
.pm-slot__time { font-size: var(--size-label-small); line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; }
.pm-slot__name { font-weight: 700; }
.pm-slot__note { font-size: var(--size-label-small); line-height: 1.25; }
a.pm-slot:hover .pm-slot__name { text-decoration: underline; text-underline-offset: 0.2em; }
.pm-cal__foot .pm-slot { height: auto; }

/* ---------- the week on a narrow screen: pick a day, read down ---------- */
.pm-tint--foundations { --tint: var(--class-foundations); }
.pm-tint--primal { --tint: var(--class-primal); }
.pm-tint--moves { --tint: var(--class-moves); }
.pm-tint--progressions { --tint: var(--class-progressions); }
.pm-tint--handstands { --tint: var(--class-handstands); }
.pm-tint--compound { --tint: var(--class-compound); }
.pm-tint--sculpt { --tint: var(--class-sculpt); }
.pm-tint--inbody { --tint: var(--class-inbody); }
.pm-tint--unwind { --tint: var(--class-unwind); }
.pm-tint--self-practice { --tint: var(--class-self-practice); }
.pm-tint--events { --tint: var(--class-events); }
.pm-daylist { display: grid; gap: var(--space-gap); }
.pm-days { display: none; }
.js .pm-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-block); background: var(--off-white); border: 1px solid var(--rule-soft); }
.pm-days > button { position: relative; min-height: 48px; padding: 0; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-weight: 500; font-size: var(--size-caption); cursor: pointer; }
.pm-days > button[aria-selected="true"] { background: var(--ink); color: var(--off-white); font-weight: 700; }
/* a dot under today */
.pm-days > .is-today::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: currentColor; }
.pm-day { display: grid; gap: var(--space-14); }
.pm-daylist.is-tabbed .pm-day > .pm-h3 { display: none; }
.pm-day__list { padding: 0; list-style: none; border-top: 1px solid var(--pm-rule); }
.pm-day__list > li { border-bottom: 1px solid var(--pm-rule); }
.pm-dayrow > summary, .pm-dayrow--plain { display: grid; grid-template-columns: 3.25rem 6px minmax(0, 1fr) auto; align-items: center; gap: var(--space-14); min-height: 68px; padding: var(--space-10) var(--space-10) var(--space-10) 0; }
.pm-dayrow > summary { list-style: none; cursor: pointer; }
.pm-dayrow--link { color: inherit; text-decoration: none; }
.pm-dayrow--link > .pm-go { width: 1.25rem; height: 1.25rem; }
.pm-dayrow > summary::-webkit-details-marker { display: none; }
.pm-dayrow > summary::after { content: "+"; content: "+" / ""; width: 1.25rem; font-weight: 400; font-size: var(--size-lead); line-height: 1; text-align: center; }
.pm-dayrow[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.pm-dayrow__time { font-weight: 700; font-size: var(--size-body); font-variant-numeric: lining-nums tabular-nums; }
.pm-dayrow__stripe { align-self: stretch; border-radius: 3px; background: var(--tint); }
.pm-dayrow__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-dayrow__what > b { font-size: var(--size-body); line-height: 1.2; overflow-wrap: break-word; }
.pm-dayrow__meta { font-size: var(--size-caption); line-height: 1.3; }
/* an open row takes its class's colour */
.pm-dayrow { transition: background-color 0.2s ease; }
.pm-dayrow[open] { margin-inline: calc(var(--space-10) * -1); padding-inline: var(--space-10); border-radius: var(--radius-block); background: var(--tint); }
.pm-dayrow[open] .pm-dayrow__stripe { background: var(--ink); }
.pm-dayrow__more { display: grid; gap: var(--space-10); justify-items: start; padding: 0 0 var(--space-20) calc(3.25rem + 6px + var(--space-14) * 2); font-size: var(--size-caption); line-height: 1.45; }
.pm-dayrow__facts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-20); }
.pm-dayrow__facts b { font-weight: 500; font-size: var(--size-label-small); letter-spacing: 0.16em; text-transform: uppercase; margin-right: 0.4em; }
/* ---------- the live timetable: the same calendar and list, with real dates ----------
   build/schedule-live.js draws these on /schedule. the status line and the
   pager appear only once real classes have arrived. */
.pm-live { display: grid; gap: var(--space-gap); }
.pm-live__view { display: grid; gap: var(--space-gap); transition: opacity 0.25s ease; }
.pm-live.is-loading .pm-live__view { opacity: 0.45; }
.pm-live__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10) var(--space-20); }
.pm-live__bar[hidden] { display: none; }
.pm-live__status { display: flex; align-items: center; gap: var(--space-10); font-size: var(--size-caption); font-variant-numeric: lining-nums tabular-nums; }
.pm-live__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta); animation: pm-pulse 2.4s ease-out infinite; }
@keyframes pm-pulse {
  0% { box-shadow: 0 0 0 0 rgba(183, 105, 75, 0.55); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(183, 105, 75, 0); }
}
/* a round arrow button: the calendar's pager and the day rail */
.pm-arrow { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--pm-rule); border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.pm-arrow > svg { width: 20px; height: 20px; }
.pm-arrow--back > svg { transform: rotate(180deg); }
.pm-arrow:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) {
  .pm-arrow:not(:disabled):hover { border-color: var(--ink); background: var(--ink); color: var(--off-white); }
}
/* the day rail: an arrow, a strip of dates that scrolls sideways, an arrow */
.pm-dayrail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.pm-dayrail > .pm-arrow { width: 40px; height: 40px; border: 0; }
.js .pm-days--dates { display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.pm-days--dates::-webkit-scrollbar { display: none; }
.pm-days--dates > button { display: flex; flex: 1 0 3.25rem; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px; scroll-snap-align: center; }
.pm-days--dates > button > span { font-weight: 500; font-size: var(--size-label-small); line-height: 1.2; }
.pm-days--dates > button > b { font-size: var(--size-body); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.pm-days--dates > .is-today::after { content: none; }
.pm-daylist--live.is-tabbed .pm-day > .pm-h3 { display: block; }
.pm-dayrow__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-20); }
/* every class in the live timetable is one thing to press: it opens the class window */
button.pm-slot { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
/* what a class is right now: nearly full, full, cancelled, already over */
.pm-flag { display: inline-block; margin-left: 0.6em; padding: 1px 9px; border-radius: 99px; background: var(--ink); color: var(--off-white); font-weight: 500; font-size: var(--size-label-small); line-height: 1.5; white-space: nowrap; }
.pm-flag--off { background: none; box-shadow: inset 0 0 0 1px currentColor; color: inherit; }
.pm-slot.is-off { background: var(--cream); box-shadow: inset 0 0 0 1px var(--rule-on-light); }
.pm-slot.is-off .pm-slot__name, .pm-dayrow.is-off .pm-dayrow__time, .pm-dayrow.is-off .pm-dayrow__what > b { text-decoration: line-through; color: var(--ink-soft); }
.pm-dayrow.is-off .pm-dayrow__stripe { background: none; box-shadow: inset 0 0 0 1px var(--rule-on-light); }
/* A class that is over steps back: it loses its colour, and its words go to the
   softer ink. Not by fading the whole thing, which took the words below the
   contrast a person needs to read them (it measured 1.9 to 1 on the darker tints). */
.pm-slot.is-past { background: var(--cream); box-shadow: inset 0 0 0 1px var(--rule-on-light); color: var(--ink-soft); }
.pm-dayrow.is-past > summary, .pm-dayrow--plain.is-past { color: var(--ink-soft); }
.pm-dayrow.is-past .pm-dayrow__stripe { opacity: 0.4; }
/* two classes at the same time share their day's column */
/* ---------- the class window: opens over the timetable when a class is picked ----------
   a native dialog. its head is in the class's colour, "Book online" is in the
   middle, and the app sits in sage at the bottom, as it does on every page.
   on a phone it rises from the bottom edge. */
.pm-sheet { width: 34rem; max-width: calc(100% - 2.5rem); max-height: 90vh; max-height: 90dvh; margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: var(--radius-block); background: var(--cream); color: var(--ink); }
.pm-sheet::backdrop { background: var(--scrim); }
.pm-sheet[open] { animation: pm-sheet-in 0.2s ease; }
@keyframes pm-sheet-in {
  from { opacity: 0; transform: translateY(14px); }
}
html:has(.pm-sheet[open]) { overflow: hidden; }
.pm-sheet__head { position: relative; display: grid; gap: var(--space-4); padding: var(--space-block) calc(var(--space-block) + 48px) var(--space-block) var(--space-block); }
.pm-sheet__when { font-weight: 700; font-size: var(--size-lead); line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; }
.pm-sheet__close { position: absolute; top: var(--space-10); right: var(--space-10); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.pm-sheet__close > svg { width: 22px; height: 22px; }
.pm-sheet__close:hover { background: var(--rule-soft); }
.pm-sheet__body { display: grid; gap: var(--space-14); justify-items: start; padding: var(--space-block); }
.pm-sheet__body > .pm-actions { margin-top: var(--space-4); }
.pm-sheet__note { font-weight: 700; }
/* the lean window, opened from a list row: the date, Book online, the app */
.pm-sheet--lean .pm-sheet__body > .pm-actions { width: 100%; margin-top: 0; }
.pm-sheet--lean .pm-sheet__body .pm-btn { width: 100%; }
.pm-sheet__app { display: grid; gap: var(--space-14); justify-items: start; padding: var(--space-20) var(--space-block) var(--space-block); font-size: var(--size-caption); }
.pm-sheet__app .pm-btn { min-height: 44px; padding: var(--space-10) var(--space-20); font-size: var(--size-caption); }
@media (max-width: 599px) {
  .pm-sheet { width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-block) var(--radius-block) 0 0; }
}
/* ---------- the swap: the list below 1000px, the calendar from there up ---------- */
/* kept after both, so neither one's own display rule can undo it. six day
   columns and a ruler need about 1000px before a class name fits its column */
@media (min-width: 1000px) {
  .pm-cal { display: grid; }
  .pm-daylist { display: none; }
  /* except the live schedule, which is the list at every width */
  .pm-live .pm-daylist { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-class-card, .pm-go, .pm-dayrow, .pm-live__view, .pm-arrow { transition: none; }
  .pm-sheet[open] { animation: none; }
  .pm-live__dot { animation: none; }
  .pm-class-card:hover { transform: none; }
}

/* ---------- the little map on /contact ----------
   one inline SVG drawn by build/map.py from open map data. nothing is loaded
   from anyone. the whole map is a link to Google Maps. wide screens only: on a
   phone the "Open in Google Maps" button opens the real thing */
.pm-map { display: none; }
.pm-map__link { display: block; border-radius: var(--radius-block); }
.pm-map__svg { display: block; width: 100%; height: 100%; border-radius: var(--radius-block); pointer-events: none; }
.pm-map__land { fill: var(--map-land); }
.pm-map__park { fill: var(--map-park); }
.pm-map__water { fill: var(--sage); }
.pm-map__square { fill: var(--off-white); }
.pm-map__road { fill: none; stroke: var(--off-white); stroke-linecap: round; stroke-linejoin: round; }
.pm-map__rail { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 12 8; opacity: 0.4; }
.pm-map__stop { fill: var(--off-white); stroke: var(--ink); stroke-width: 5; }
.pm-map__pin { fill: var(--terracotta); transform-origin: 0 0; transition: transform 0.2s ease; }
.pm-map__pinhole { fill: var(--off-white); }
/* the halo round a label is its own stroke, painted first (paint-order is set on the text in the SVG) */
.pm-map__label { fill: var(--ink); font-weight: 500; font-size: 24px; stroke: var(--map-land); stroke-width: 7px; stroke-linejoin: round; }
.pm-map__label--us { font-weight: 700; font-size: 28px; }
.pm-map__river { fill: var(--ink); font-weight: 500; font-size: 20px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.55; }
/* the credit the map data's licence asks for, in the corner, as maps do */
.pm-map__credit { position: absolute; left: var(--space-10); bottom: var(--space-10); padding: 3px var(--space-10); border-radius: var(--radius-block); background: var(--off-white); font-size: var(--size-label-small); line-height: 1.3; }
.pm-map__credit > a { color: inherit; }
/* beside the rows, the map is exactly as tall as they are: it fills its cell
   and the drawing is cropped to fit (preserveAspectRatio="slice" on the SVG) */
@media (min-width: 900px) {
  .pm-map { display: block; position: relative; min-height: 18rem; }
  /* the link lies over the whole drawing; the drawing fills the same box under it */
  .pm-map__link { position: absolute; inset: 0; z-index: 1; }
  .pm-map__svg { position: absolute; inset: 0; }
  .pm-map__credit { z-index: 2; }
}
@media (hover: hover) {
  .pm-map__link:hover + .pm-map__svg .pm-map__pin { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .pm-map__pin { transition: none; }
}

/* ---------- info rows ---------- */
.pm-rows { border-top: 1px solid var(--pm-rule); }
.pm-row { display: grid; gap: var(--space-4); padding: var(--space-14) 0; border-bottom: 1px solid var(--pm-rule); }
.pm-row > dt { padding-top: 0.3em; }
/* a value that has to wrap breaks into even lines, never one word alone */
.pm-row > dd { text-wrap: balance; }
/* days and their times, one under the other in two straight columns: every day starts at the
   same place, every time starts at the same place, and every digit is as wide as the next */
/* the times take what is left of the line: a day with many of them wraps under its own first time */
.pm-times { display: grid; grid-template-columns: fit-content(60%) minmax(0, 1fr); column-gap: 1.5em; font-variant-numeric: lining-nums tabular-nums; }
/* each day is one row of that grid, so the columns are the same for all of them */
.pm-times > span { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
@media (min-width: 640px) {
  .pm-row { grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-gap); }
}

/* ---------- house rules ---------- */
.pm-rules { list-style: none; padding: 0; border-top: 1px solid var(--pm-rule); }
.pm-rules > li { padding: var(--space-14) 0; border-bottom: 1px solid var(--pm-rule); font-size: var(--size-lead); line-height: 1.3; }

/* ---------- reviews ---------- */
.pm-stars { display: block; flex: none; align-self: flex-start; width: 116px; height: 20px; fill: var(--terracotta); }
.pm-stars--large { align-self: center; width: 162px; height: 28px; }
.pm-rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-14); }
.pm-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  padding: var(--space-gap);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-block);
  background: var(--off-white);
}
.pm-review cite { margin-top: auto; padding-top: var(--space-4); font-style: normal; }

/* ---------- questions ---------- */
.pm-faq { border-top: 1px solid var(--pm-rule); }
.pm-faq details { border-bottom: 1px solid var(--pm-rule); }
.pm-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-gap);
  padding: var(--space-20) 0;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--size-lead);
  line-height: 1.1;
}
.pm-faq summary::-webkit-details-marker { display: none; }
.pm-faq summary::after { content: "+"; content: "+" / ""; flex: none; font-weight: 400; }
.pm-faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.pm-faq__answer { display: flex; flex-direction: column; gap: var(--space-10); max-width: 65ch; padding-bottom: var(--space-20); }

/* ---------- call to action block ---------- */
.pm-cta { gap: var(--space-gap); align-items: flex-start; }

/* ---------- quiz ---------- */
.pm-quiz { margin-top: var(--space-gap); max-width: 760px; }
.pm-quiz__step, .pm-quiz__result { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-gap); }
.pm-quiz__step:focus, .pm-quiz__result:focus, .pm-quiz [tabindex="-1"]:focus { outline: none; }
.pm-options { display: flex; flex-direction: column; gap: var(--space-14); align-self: stretch; }
.pm-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
  padding: var(--space-20) var(--space-block);
  border: 0;
  border-radius: var(--radius-block);
  background: var(--sage);
  color: var(--ink);
  font: inherit;
  font-size: var(--size-lead);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
/* the second content line gives the arrow an empty text alternative, so a
   screen reader hears the answer and not "right arrow" */
.pm-option::after { content: "\2192"; content: "\2192" / ""; flex: none; }
.pm-option:hover { background: var(--ink); color: var(--off-white); }
.pm-quiz__result > .pm-block { align-self: stretch; gap: var(--space-14); align-items: flex-start; }

/* ---------- form ---------- */
.pm-form { display: grid; gap: var(--space-20); max-width: 680px; }
/* in a column of the page grid, the form and its messages are as wide as the column */
.pm-form--fill, .pm-say--fill { max-width: none; }
.pm-form > .pm-btn { justify-self: start; }
.pm-form__pair { display: grid; gap: var(--space-20); }
.pm-field { display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; }
/* a field that may be left empty says so. the ones that do not say it are needed */
.pm-optional { margin-left: 0.5em; color: var(--ink-soft); font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
.pm-input {
  width: 100%;
  min-height: 56px;
  padding: var(--space-14) var(--space-20);
  border: 1px solid var(--ink);
  border-radius: var(--radius-block);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--size-body);
  line-height: 1.45;
  -webkit-appearance: none;
  appearance: none;
}
textarea.pm-input { min-height: 160px; resize: vertical; }
select.pm-input {
  padding-right: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none' stroke='%231F2A22' stroke-width='2'%3E%3Cpath d='M1 1l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
}
.pm-input[aria-invalid="true"] { border-width: 3px; }
/* a few things to tick. each is a block you can press anywhere on */
.pm-choices { display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; margin: 0; padding: 0; border: 0; }
.pm-choices > legend { margin-bottom: var(--space-10); padding: 0; }
.pm-choices__list { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.pm-choice { display: inline-flex; align-items: center; gap: var(--space-10); min-height: 56px; padding: var(--space-10) var(--space-20); border: 1px solid var(--ink); border-radius: var(--radius-block); cursor: pointer; }
.pm-choice > input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.pm-choice:has(input:checked) { background: var(--ink); color: var(--off-white); }
.pm-choice:has(input:checked) > input { accent-color: var(--off-white); }
.pm-choice:has(input:focus-visible) { outline: 3px solid var(--pm-focus); outline-offset: 3px; }
.pm-field__error { border-radius: var(--radius-block); padding: var(--space-10) var(--space-14); background: var(--pink); color: var(--ink); font-size: var(--size-caption); line-height: 1.3; }
/* The honeypot on the referral form. Off-screen rather than display:none,
   because some autofill tools skip hidden fields and some bots look for them. */
.pm-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* the one place a form speaks from */
.pm-say { max-width: 680px; margin-top: var(--space-20); padding: var(--space-14) var(--space-20); border: 1px solid var(--ink); border-radius: var(--radius-block); }
.pm-say--bad { border: 0; background: var(--pink); }
@media (min-width: 640px) {
  .pm-form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- long-form text ---------- */
.pm-prose { display: flex; flex-direction: column; gap: var(--space-14); max-width: 680px; }
.pm-prose h2 { margin-top: var(--space-block); font-weight: 700; font-size: var(--size-h3); line-height: 1; }
.pm-prose h3 { margin-top: var(--space-14); font-weight: 700; font-size: var(--size-lead); line-height: 1.1; }
.pm-prose ul, .pm-prose ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-4); }
.pm-prose__stamp { margin-top: var(--space-gap); padding-top: var(--space-14); border-top: 1px solid var(--pm-rule); }

/* ---------- site header: a bar that stays at the top ---------- */
.pm-topbar { position: sticky; top: 0; z-index: 40; background: var(--cream); color: var(--ink); transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.pm-topbar.is-scrolled { box-shadow: 0 1px 0 var(--rule-soft); }
/* over a photo hero: out of the flow, see-through until the page scrolls.
   only with the script running, or the bar could never turn solid again */
.pm-topbar--over { position: fixed; inset: 0 0 auto 0; }
.js .pm-topbar--over:not(.is-scrolled) {
  background: transparent;
  color: var(--off-white);
  --pm-focus: var(--off-white);
  --pm-btn-bg: var(--off-white);
  --pm-btn-fg: var(--ink);
  --pm-btn-hover: var(--cream);
}
.pm-header { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10) var(--space-gap); padding-block: var(--space-14); }
.pm-logo { position: relative; z-index: 2; display: inline-flex; color: inherit; text-decoration: none; }
/* One inline SVG, from build/logo-inline.svg. Its wordmark takes the text
   colour, so it is ink on cream and off-white on a photo or on the open menu.
   Its "Lisbon" carries its own orange, which does not read on a dark ground,
   so there it takes the text colour too. */
.pm-logo .logo { display: block; width: auto; height: clamp(3rem, 2.7727rem + 0.9324vw, 3.5rem); }
.pm-logo path { transition: fill 0.25s ease; }
.js .pm-topbar--over:not(.is-scrolled) .pm-logo path[style*="190,90,56"],
.menu-open .pm-topbar .pm-logo path[style*="190,90,56"] { fill: currentColor !important; }
.pm-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-gap); }
.pm-nav > a:not(.pm-btn) { padding: var(--space-10) 0; border-bottom: 2px solid transparent; color: inherit; font-weight: 500; font-size: var(--size-caption); line-height: 1.3; text-decoration: none; }
.pm-nav > a:not(.pm-btn):hover, .pm-nav > a:not(.pm-btn)[aria-current="page"] { border-bottom-color: currentColor; }
.pm-burger { display: none; }

/* ---------- the phone menu: one button, the whole screen ----------
   Below 800px, because the five links and the button need about 785px to sit
   on one line beside the logo. Add a link and this number has to go up. */
@media (max-width: 799px) {
  .js .pm-burger {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-right: calc(var(--burger-inset) * -1); padding: 0;
    border: 0; border-radius: var(--radius-block); background: none; color: inherit; cursor: pointer;
  }
  /* two lines. opening: they meet in the middle, then turn into a cross.
     closing runs the same two steps backwards */
  .pm-burger > span { position: absolute; left: calc(24px - var(--burger-inset)); right: var(--burger-inset); height: 2px; border-radius: 2px; background: currentColor; transition: translate 0.2s ease 0.2s, rotate 0.25s cubic-bezier(0.6, 0, 0.2, 1) 0s; }
  .pm-burger > span:first-child { translate: 0 -4px; }
  .pm-burger > span:last-child { translate: 0 4px; }
  .menu-open .pm-burger > span { translate: 0 0; transition: translate 0.2s ease 0s, rotate 0.3s cubic-bezier(0.6, 0, 0.2, 1) 0.2s; }
  .menu-open .pm-burger > span:first-child { rotate: 45deg; }
  .menu-open .pm-burger > span:last-child { rotate: -45deg; }

  /* the colour grows out of the button until it covers the screen */
  .js .pm-nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: var(--space-4);
    padding: 7rem var(--space-gutter) var(--space-gutter);
    overflow-y: auto;
    background: var(--deep-olive);
    color: var(--off-white);
    --pm-focus: var(--off-white);
    --pm-btn-bg: var(--off-white);
    --pm-btn-fg: var(--ink);
    --pm-btn-hover: var(--cream);
    visibility: hidden;
    clip-path: circle(0 at calc(100% - var(--space-gutter) + var(--burger-inset) - 24px) 2.75rem);
    transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.55s;
  }
  .menu-open .pm-nav { visibility: visible; clip-path: circle(150vmax at calc(100% - var(--space-gutter) + var(--burger-inset) - 24px) 2.75rem); transition: clip-path 0.65s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s; }
  .js .pm-nav > a { opacity: 0; translate: 0 18px; transition: opacity 0.2s ease, translate 0.2s ease; }
  /* --d is each link's turn, set on the link by build/sync-chrome.py */
  .menu-open .pm-nav > a { opacity: 1; translate: 0 0; transition: opacity 0.4s ease var(--d), translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d); }
  .js .pm-nav > a:not(.pm-btn) { display: block; padding: var(--space-4) 0; border-bottom: 0; font-weight: 700; font-size: var(--size-h1); line-height: 1.1; letter-spacing: -0.01em; }
  .js .pm-nav > a:not(.pm-btn)[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.14em; }
  .js .pm-nav > .pm-btn { align-self: stretch; min-height: 60px; margin-top: var(--space-28); font-size: var(--size-lead); }
  .menu-open { overflow: hidden; }
  .menu-open .pm-topbar { background: transparent; color: var(--off-white); box-shadow: none; --pm-focus: var(--off-white); }
}
@media (prefers-reduced-motion: reduce) {
  .pm-topbar, .pm-logo path, .pm-burger > span, .js .pm-nav, .js .pm-nav > a { transition: none !important; }
}

/* ---------- site footer ---------- */
/* an ink band across the whole page, so every page ends on the same dark ground */
.pm-footer { background: var(--ink); }
.pm-footer__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-gap); padding-block: var(--space-section) var(--space-block); }
.pm-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-14); }
/* the logo's orange "Lisbon" does not read on ink, so here it takes the text colour */
.pm-footer .pm-logo path[style*="190,90,56"] { fill: currentColor !important; }
/* a heading and its links: "Links", "Get in touch" */
.pm-footer__group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-14); }
.pm-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10); padding: 0; list-style: none; }
/* the bottom line: the policies */
.pm-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-gap); margin-top: var(--space-gap); padding: var(--space-20) 0 0; border-top: 1px solid var(--pm-rule); list-style: none; font-size: var(--size-caption); }
@media (min-width: 720px) {
  .pm-footer__inner { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--space-gutter); }
  .pm-footer__brand { grid-column: auto; }
}