/* =============================================================================
   ROUTE: entry — singular pages, posts, the front page (COMPONENTS.md §1, §6).
   mp-prose: page content. A breakout grid: text blocks sit in the prose lane at
   --mp-w-prose, component blocks (mp-core's meta-box/mp-*) in the wide lane at
   --mp-w-max. Tag selectors are allowed here and only here, as direct children.
   ============================================================================= */
@layer base {
  .mp-prose {
    --_side: calc((var(--mp-w-max) - var(--mp-w-prose)) / 2);
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--mp-gutter), 1fr)
      [wide-start] minmax(0, var(--_side))
      [prose-start] min(100% - var(--mp-gutter) * 2, var(--mp-w-prose)) [prose-end]
      minmax(0, var(--_side)) [wide-end]
      minmax(var(--mp-gutter), 1fr) [full-end];
    padding-block-end: var(--mp-space-section);
  }
  .mp-prose--wide { --_side: 0px; --mp-w-prose: var(--mp-w-max); }
  /* An ink page (the MP Camp redesign) is laid out on the container: its sections' headings and
     ledes start at the gutter like the grids beside them; text keeps its measure. */
  .mp-page-ink .mp-prose { --_side: 0px; --mp-w-prose: var(--mp-w-max); }

  /* Components: the wide lane, a section's rhythm between them. */
  :is(.mp-prose, .mp-band) > * { grid-column: wide; }
  :is(.mp-prose, .mp-band) > * + * { margin-block-start: var(--mp-space-section); }
  .mp-band > * + * { margin-block-start: var(--mp-space-m); } /* inside a band: one section, a tighter rhythm (text rules below still win) */
  .mp-prose > .mp-hero:first-child { margin-block-start: var(--mp-space-xs); }
  /* A section head belongs to what follows it (its own bottom margin is the gap). */
  :is(.mp-prose, .mp-band) > .mp-section-head + * { margin-block-start: 0; }
  /* Phone (Nick 2026-11-05): the hero breaks out to the screen edges and its words stay on the
     page gutter with the rest of the text; the card's radius and top gap go with it (hero.css). */
  @media (width < 48rem) {
    .mp-prose > .mp-hero { grid-column: full; margin-inline: 0; }
  }

  /* Text blocks: the prose lane, text rhythm between them. */
  :is(.mp-prose, .mp-band) > :where(p, h2, h3, h4, ul:not([class^="mp-"]), ol:not([class^="mp-"]), figure, blockquote, details, hr, table, pre, .wp-block-table, .wp-block-image, .wp-block-quote, .wp-block-details, .wp-block-separator, .wp-block-shortcode) {
    grid-column: prose;
    margin-block-start: var(--mp-space-s);
  }
  :is(.mp-prose, .mp-band) > :first-child { margin-block-start: 0; }
  :is(.mp-prose, .mp-band) > :where(h2) { margin-block-start: var(--mp-space-xl); font-size: var(--mp-fs-display-s); }
  .mp-prose :where(h2) em { font-style: normal; color: var(--mp-color-accent-text); } /* a heading's green word ("Pick your week"), in a band, a section head or a column: green on ink, green-text on light */
  :is(.mp-prose, .mp-band) > :where(h3) { margin-block-start: var(--mp-space-l); font-size: var(--mp-fs-display-xs); }
  :is(.mp-prose, .mp-band) > :where(h4) { margin-block-start: var(--mp-space-m); font-size: var(--mp-fs-display-2xs); }
  /* Content lists only: a component that is a list (mp-schedule, mp-rows…) keeps its own box. */
  :is(.mp-prose, .mp-band) > :where(h2, h3, h4) + :where(p, ul:not([class^="mp-"]), ol:not([class^="mp-"])) { margin-block-start: var(--mp-space-xs); }

  :is(.mp-prose, .mp-band) > :where(p, ul:not([class^="mp-"]), ol:not([class^="mp-"])) { max-inline-size: var(--mp-measure); }
  :is(.mp-prose, .mp-band) > .is-style-lead { color: var(--mp-color-text-2); font-size: var(--mp-fs-lead); line-height: var(--mp-lh-snug); }
  .mp-prose :where(p, li, dd, figcaption) a { color: var(--mp-color-accent-text); text-decoration: underline; text-decoration-thickness: var(--mp-border); }
  .mp-prose :where(p, li) a:hover { text-decoration-thickness: calc(var(--mp-border) * 2); }

  :is(.mp-prose, .mp-band) > :where(ul, ol):not([class^="mp-"]) { padding-inline-start: var(--mp-space-m); list-style: revert; } /* base resets ul[class]; the core list block has one */
  :is(.mp-prose, .mp-band) > :where(ul, ol):not([class^="mp-"]) > li + li { margin-block-start: var(--mp-space-2xs); }
  :is(.mp-prose, .mp-band) > :where(ul, ol):not([class^="mp-"]) > li::marker { color: var(--mp-color-accent-text); }

  :is(.mp-prose, .mp-band) > :where(figure, .wp-block-image) img { border-radius: var(--mp-radius-md); }
  .mp-prose figcaption { margin-block-start: var(--mp-space-2xs); color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); }

  :is(.mp-prose, .mp-band) > :where(blockquote, .wp-block-quote) {
    padding-inline-start: var(--mp-space-m);
    border-inline-start: calc(var(--mp-border) * 2) solid var(--mp-color-accent);
    font-size: var(--mp-fs-lead);
  }
  :is(.mp-prose, .mp-band) > :where(blockquote, .wp-block-quote) cite { display: block; margin-block-start: var(--mp-space-2xs); color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); font-style: normal; }

  :is(.mp-prose, .mp-band) > :where(hr, .wp-block-separator) { border: 0; border-block-start: var(--mp-border) solid var(--mp-color-line); margin-block: var(--mp-space-l); }

  /* Core details block: the mp-faq look (faq.css aliases .wp-block-details too). */
  :is(.mp-prose, .mp-band) > :where(details, .wp-block-details) > :not(summary) { margin-block-start: var(--mp-space-xs); }

  /* 7.46 mp-band — a full-bleed surface section (07 §1): content's core/group with
     .mp-band .mp-scheme-{light|tint|ink}, or a block the theme wraps (facts, CTA). It spans
     the page's full track as a subgrid, so its children keep the prose / wide lanes; bands
     touch, 48→72 px inside. The fill reaches the viewport edges through a border-image
     outset (paint only: no scroll), also on Program pages where the column ends at the
     reserve card, which then floats on the band. */
  .mp-prose > .mp-band {
    grid-column: full;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
    margin-block-start: 0;
    padding-block: var(--mp-space-section);
    border-image: linear-gradient(var(--mp-color-surface) 0 0) fill 0 // 0 100vw;
  }
  /* A textured band: its pattern on a layer as wide as the fill (main clips it, no scroll). */
  .mp-prose > .mp-band:is(.mp-scheme-texture-tint, .mp-scheme-texture-ink) { position: relative; isolation: isolate; background-image: none; }
  .mp-prose > .mp-band:is(.mp-scheme-texture-tint, .mp-scheme-texture-ink)::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: -100vw;
    z-index: -1;
    background-image: var(--mp-texture);
    background-size: var(--mp-texture-size);
  }
  /* Two textured bands in a row: the second's track starts half a tile on, so the rows never line up. */
  .mp-prose > .mp-band:is(.mp-scheme-texture-tint, .mp-scheme-texture-ink) + .mp-band:is(.mp-scheme-texture-tint, .mp-scheme-texture-ink)::before { background-position: var(--mp-texture-shift); }
  .mp-prose > .mp-hero + .mp-band { margin-block-start: var(--mp-space-l); }
  .mp-prose:has(> .mp-band:last-child) { padding-block-end: 0; }
  /* The section head: an optional eyebrow, the H2, one line. */
  .mp-band > .mp-eyebrow + :where(h2) { margin-block-start: var(--mp-space-2xs); }
  .mp-band > :where(h2):first-of-type + p { color: var(--mp-color-text-2); }

  /* A statement line (07 §4: "Day ride $45 · membership $55 · HST included"): the display face. */
  :is(.mp-prose, .mp-band) > .is-style-mp-statement { /* vendor-alias: core paragraph style */
    max-inline-size: none;
    font: var(--mp-weight-display) var(--mp-fs-display-l) / var(--mp-lh-display) var(--mp-font-display);
    letter-spacing: var(--mp-track-display);
    text-transform: uppercase;
  }
  /* A status dot inside a table cell ("Open" days): mp-dot sits on the text's line. */
  .wp-block-table td > .mp-dot { margin-inline-end: var(--mp-space-2xs); vertical-align: middle; } /* vendor-alias */

  /* Side by side (core/columns): a grid that stacks below two 20rem columns. */
  :is(.mp-prose, .mp-band) > .wp-block-columns { /* vendor-alias */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--mp-w-form) / 2)), 1fr));
    gap: var(--mp-space-l) var(--mp-space-xl);
  }
  .wp-block-column > * { margin: 0; } /* vendor-alias */
  .wp-block-column > * + * { margin-block-start: var(--mp-space-xs); } /* vendor-alias */
  .wp-block-column > :where(h3) { font-size: var(--mp-fs-display-xs); } /* vendor-alias */
  .wp-block-column > :where(h2) { font-size: var(--mp-fs-display-s); } /* vendor-alias: a section's heading inside its first column */
  .wp-block-column > :where(h2) + * { margin-block-start: var(--mp-space-s); } /* vendor-alias */
  /* MP Camp coaching: a shared heading row, six skill areas and a real coaching photo. */
  .mp-camp-training__head,
  .mp-camp-training__body { display: grid; gap: var(--mp-space-l) var(--mp-space-xl); }
  .mp-camp-training__head { align-items: center; }
  .mp-camp-training__head > h2 { margin: 0; font-size: var(--mp-fs-display-xl); }
  .mp-camp-training__intro > p { margin: 0; color: var(--mp-color-text-2); }
  .mp-camp-training__intro > p + p { margin-block-start: var(--mp-space-s); }
  .mp-camp-training__intro > .mp-camp-training__count { display: flex; align-items: center; gap: var(--mp-space-s); color: var(--mp-color-text); }
  .mp-camp-training__count strong { color: var(--mp-color-accent-text); font: var(--mp-weight-display) var(--mp-fs-display-2xl) / 1 var(--mp-font-display); }
  .mp-camp-training__count span { font: var(--mp-weight-ui) var(--mp-fs-lead) / var(--mp-lh-snug) var(--mp-font-ui); }
  .mp-camp-training > .mp-camp-training__body { margin-block-start: var(--mp-space-xl); }
  .mp-camp-training__skills { display: grid; gap: var(--mp-space-m) var(--mp-space-l); margin: 0; padding: 0; list-style: none; }
  .mp-camp-training__skills > li { padding-block-start: var(--mp-space-s); border-block-start: var(--mp-border) solid var(--mp-color-line); }
  .mp-camp-training__skills h3,
  .mp-camp-training__feedback h3 { margin: 0; font-size: var(--mp-fs-display-2xs); }
  .mp-camp-training__skills h3 { color: var(--mp-color-accent-text); }
  .mp-camp-training__skills p,
  .mp-camp-training__feedback p { margin: var(--mp-space-2xs) 0 0; color: var(--mp-color-text-2); }
  .mp-camp-training__media { align-self: start; }
  .mp-camp-training__media > figure { margin: 0; }
  /* The current coaching asset is darkened in the source file; lift its display only. */
  .mp-camp-training__photo img { filter: brightness(1.4); }
  .mp-camp-training__media img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--mp-radius-md); }
  .mp-camp-training__feedback { margin-block-start: var(--mp-space-m); padding-inline-start: var(--mp-space-s); border-inline-start: calc(var(--mp-border) * 2) solid var(--mp-color-accent-text); }
  .mp-camp-training__link { margin: var(--mp-space-s) 0 0; }
  @media (width >= 48rem) {
    .mp-camp-training__skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (width >= 64rem) {
    .mp-camp-training__head,
    .mp-camp-training__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* .mp-pillars (the MP Camp intro, Nick 2026-10-28): content's core/columns of three, each a
     label (its first paragraph), a word (its h3) and a sentence; a 2px rule across the top,
     hairlines between, the word huge. Light or ink by the band's scheme; stacked under hairlines
     on a phone. */
  :is(.mp-prose, .mp-band) > .wp-block-columns.mp-pillars { gap: 0; border-block-start: calc(var(--mp-border) * 2) solid var(--mp-color-text); } /* vendor-alias */
  :is(.mp-prose, .mp-band) > .mp-section-head + .wp-block-columns.mp-pillars { margin-block-start: calc(var(--mp-space-s) + var(--mp-space-3xs)); } /* vendor-alias: 52 under the head */
  /* Approved camp intro: darker supporting copy, scoped to this section. */
  .mp-camp-intro { --mp-color-text-2: color-mix(in srgb, var(--mp-ink-2) 80%, var(--mp-ink)); }
  .mp-band:has(> .wp-block-columns.mp-pillars) { padding-block-start: calc(var(--mp-space-section) + var(--mp-space-2xs)); } /* vendor-alias */
  .mp-pillars > .wp-block-column { display: flex; flex-direction: column; gap: calc(var(--mp-space-s) + var(--mp-space-3xs)); padding-block: var(--mp-space-l); } /* vendor-alias */
  .mp-pillars > .wp-block-column > * + * { margin-block-start: 0; } /* vendor-alias: the gap spaces them */
  .mp-pillars > .wp-block-column + .wp-block-column { box-shadow: inset 0 var(--mp-border) 0 var(--mp-color-line); } /* vendor-alias */
  .mp-pillars > .wp-block-column > p:first-child { color: var(--mp-color-accent-text); font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-label); text-transform: uppercase; } /* vendor-alias */
  .mp-pillars > .wp-block-column > h3 { color: var(--mp-color-text); font: var(--mp-weight-display) calc(var(--mp-fs-display-xl) * 1.45) / .92 var(--mp-font-display); letter-spacing: var(--mp-track-display); text-transform: uppercase; } /* vendor-alias: 64 on a phone */
  .mp-pillars > .wp-block-column > p:not(:first-child) { max-inline-size: 19em; color: var(--mp-color-text-2); font-size: var(--mp-fs-lead); line-height: var(--mp-lh-body); } /* vendor-alias: 34ch */
  @media (width >= 48rem) {
    :is(.mp-prose, .mp-band) > .wp-block-columns.mp-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* vendor-alias */
    .mp-pillars > .wp-block-column { padding: var(--mp-space-l) calc(var(--mp-space-l) + var(--mp-space-2xs)) 0; } /* vendor-alias: 32 above, 40 gutters */
    .mp-pillars > .wp-block-column:first-child { padding-inline-start: 0; } /* vendor-alias */
    .mp-pillars > .wp-block-column:last-child { padding-inline-end: 0; } /* vendor-alias */
    .mp-pillars > .wp-block-column + .wp-block-column { box-shadow: inset var(--mp-border) 0 0 var(--mp-color-line); } /* vendor-alias */
    .mp-pillars > .wp-block-column > h3 { font-size: calc(var(--mp-fs-display-xl) * 1.22); } /* vendor-alias: 88 at the widest */
  }
  /* .mp-info (the MP Camp "Important information", Nick 2026-10-28): content's core/group of
     cards, each a core/group .mp-info__card (an optional .mp-eyebrow, an h3, paragraphs, a
     paragraph of .mp-chip--raised times or prices); bordered like Before you come, top-aligned at
     their own heights; one column on a phone, two from md, three from lg. */
  :is(.mp-prose, .mp-band) > .wp-block-group.mp-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mp-space-xs); align-items: start; } /* vendor-alias */
  @media (width >= 48rem) { :is(.mp-prose, .mp-band) > .wp-block-group.mp-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* vendor-alias */
  @media (width >= 64rem) { :is(.mp-prose, .mp-band) > .wp-block-group.mp-info { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* vendor-alias */
  .mp-info > .wp-block-group.mp-info__card { display: grid; gap: var(--mp-space-xs); padding: var(--mp-space-panel); border-radius: var(--mp-radius-lg); box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line); } /* vendor-alias */
  @media (width >= 48rem) { :is(.mp-prose, .mp-band) > .wp-block-group.mp-tyke-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* vendor-alias: Tyke parent/bike panels */
  .mp-info__card > * { margin: 0; } /* vendor-alias */
  .mp-info__card > h3 { font-size: var(--mp-fs-display-xs); } /* vendor-alias */
  .mp-info__card > p { color: var(--mp-color-text-2); } /* vendor-alias */
  .mp-info__card > p:has(> .mp-chip) { display: flex; flex-wrap: wrap; gap: var(--mp-space-2xs); } /* vendor-alias: a row of chips */
  .mp-info__card > .mp-eyebrow { color: var(--mp-color-accent-text); } /* vendor-alias */
  /* Camp cancellation policy (Nick, 2026-10-30): an ink section with a yellow deposit notice,
     then equal before/during cards; all policy text stays in content and stacks on a phone. */
  .mp-camp-policy__notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--mp-space-xs) var(--mp-space-m);
    padding: var(--mp-space-panel);
    border: var(--mp-border) solid color-mix(in srgb, var(--mp-color-warn-on-dark) 65%, transparent);
    border-radius: var(--mp-radius-lg);
    background-color: color-mix(in srgb, var(--mp-color-warn-on-dark) 8%, var(--mp-color-surface));
  }
  .mp-camp-policy__notice::before {
    content: "";
    grid-row: 1 / span 2;
    inline-size: var(--mp-space-xl);
    block-size: var(--mp-space-xl);
    background-color: var(--mp-color-warn-on-dark);
    mask: url("../icons/alert.svg") center / contain no-repeat;
  }
  .mp-camp-policy__notice > h3 { margin: 0; color: var(--mp-color-warn-on-dark); font-size: var(--mp-fs-display-s); }
  .mp-camp-policy__notice > p { grid-column: 2; margin: 0; color: var(--mp-color-text-2); font-size: var(--mp-fs-lead); }
  .mp-camp-policy__cards { display: grid; gap: var(--mp-space-m); }
  .mp-camp-policy__card {
    padding: var(--mp-space-panel);
    border: var(--mp-border) solid var(--mp-color-line);
    border-radius: var(--mp-radius-lg);
    background-color: color-mix(in srgb, var(--mp-color-surface-2) 50%, var(--mp-color-surface));
  }
  .mp-camp-policy__card > h3 { margin: 0 0 var(--mp-space-s); font-size: var(--mp-fs-display-xs); }
  .mp-camp-policy__card > ul { display: grid; gap: var(--mp-space-s); margin: 0; padding: 0; list-style: none; color: var(--mp-color-text-2); }
  .mp-camp-policy__card li { position: relative; padding-inline-start: var(--mp-space-m); }
  .mp-camp-policy__card li::before { content: "›"; position: absolute; inset-inline-start: 0; color: var(--mp-color-accent-text); font-weight: var(--mp-weight-ui); }
  .mp-camp-policy__card strong { color: var(--mp-color-text); }
  .mp-camp-policy > .mp-camp-policy__more { margin-block-start: var(--mp-space-m); color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  @media (width >= 48rem) { .mp-camp-policy__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width < 48rem) {
    .mp-camp-policy__notice { gap: var(--mp-space-s); }
    .mp-camp-policy__notice::before { grid-row: 1; inline-size: var(--mp-space-l); block-size: var(--mp-space-l); }
    .mp-camp-policy__notice > p { grid-column: 1 / -1; }
  }
  /* An ink page's section headings at the design's size (40 → 72). */
  .mp-page-ink :is(.mp-prose, .mp-band) > :where(h2),
  .mp-page-ink .wp-block-column > :where(h2) { font-size: var(--mp-fs-display-xl); }
  /* An ink page's column labels ("Included, Sunday dinner to Friday lunch"): h3s for the outline,
     drawn as the eyebrow (green, small caps), 20px above what they label. */
  .mp-page-ink .wp-block-columns:not(.mp-pillars) > .wp-block-column > :where(h3) { color: var(--mp-color-accent-text); font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-label); text-transform: uppercase; } /* vendor-alias */
  .mp-page-ink .wp-block-columns:not(.mp-pillars) > .wp-block-column > :where(h3) + * { margin-block-start: calc(var(--mp-space-s) + var(--mp-space-3xs)); } /* vendor-alias */
  /* The columns block's vertical alignment, and mp-columns--head: a narrow first column (a
     section's heading) beside the rest, from md. */
  :is(.mp-prose, .mp-band) > .wp-block-columns.are-vertically-aligned-center { align-items: center; } /* vendor-alias */
  :is(.mp-prose, .mp-band) > .wp-block-columns.are-vertically-aligned-top { align-items: start; } /* vendor-alias */
  :is(.mp-prose, .mp-band) > .wp-block-columns.are-vertically-aligned-bottom { align-items: end; } /* vendor-alias */
  @media (width >= 48rem) {
    :is(.mp-prose, .mp-band) > .wp-block-columns.mp-columns--head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } /* vendor-alias */
  }
  .wp-block-column > :where(ul, ol):not([class*="is-style-mp-"]) { padding-inline-start: var(--mp-space-m); list-style: revert; } /* vendor-alias */
  .wp-block-column > :where(ul, ol) > li + li { margin-block-start: var(--mp-space-2xs); } /* vendor-alias */

  /* Lists with a mark: green ticks (included), stone crosses (not included). */
  :where(.is-style-mp-check, .is-style-mp-cross),
  :is(.mp-prose, .mp-band) > :is(.is-style-mp-check, .is-style-mp-cross) { padding-inline-start: 0; list-style: none; } /* vendor-alias: beats the content list's markers when it sits right on a band */
  /* .mp-extras (the MP Camp redesign: "In the price, and on top"): content's <dl>, a row per
     extra between hairlines: <div><dt>name</dt><dd>note</dd><dd>price <small>+ HST</small></dd></div>;
     the last <dd> is the price, right-aligned in the display face. */
  :is(.mp-prose, .mp-band) > dl.mp-extras { grid-column: prose; margin-block-start: var(--mp-space-s); }
  dl.mp-extras { box-shadow: inset 0 calc(-1 * var(--mp-border)) 0 var(--mp-color-line); } /* the last row's line, in a column too */
  .mp-extras > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mp-space-3xs) var(--mp-space-s); padding-block: var(--mp-space-s); box-shadow: inset 0 var(--mp-border) 0 var(--mp-color-line); }
  .mp-extras > div > dt { grid-column: 1; font-weight: var(--mp-weight-ui); }
  .mp-extras > div > dd { grid-column: 1; margin: 0; color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  .mp-extras > div > dd:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: start; color: var(--mp-color-text); font: var(--mp-weight-display) var(--mp-fs-display-2xs) / 1 var(--mp-font-display); letter-spacing: var(--mp-track-display); text-align: end; white-space: nowrap; }
  .mp-extras > div > dd:last-child > small { color: var(--mp-color-text-2); font: var(--mp-weight-body) var(--mp-fs-sm) / 1 var(--mp-font-body); letter-spacing: 0; }
  /* .mp-care (the MP Camp redesign: "How we look after them", 2026-10-29): content's <dl> under
     the coaches rail, a cell per fact between hairlines: <div><dt>Overnight</dt><dd>Counsellors in
     the bunkhouse, 4 PM to 9 AM</dd></div>; the term in the green label, the fact under it; one
     column on a phone, two from md, three from lg. */
  :is(.mp-prose, .mp-band) > dl.mp-care { grid-column: wide; margin-block-start: var(--mp-space-xl); }
  dl.mp-care { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--mp-space-l); margin-block-end: 0; }
  @media (width >= 48rem) { dl.mp-care { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width >= 64rem) { dl.mp-care { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .mp-care > div { display: grid; align-content: start; gap: var(--mp-space-2xs); padding-block: var(--mp-space-s) var(--mp-space-m); box-shadow: inset 0 var(--mp-border) 0 var(--mp-color-line); }
  .mp-care > div > dt { color: var(--mp-color-accent-text); font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-transform: uppercase; }
  .mp-care > div > dd { margin: 0; font-size: var(--mp-fs-lead); line-height: var(--mp-lh-snug); text-wrap: pretty; }
  :where(.is-style-mp-check, .is-style-mp-cross) > li { position: relative; padding-inline-start: var(--mp-space-l); } /* vendor-alias */
  :where(.is-style-mp-check, .is-style-mp-cross) > li::before { position: absolute; inset-inline-start: 0; font-weight: var(--mp-weight-ui); } /* vendor-alias */
  .is-style-mp-check > li::before { content: "✓"; color: var(--mp-color-accent-text); } /* vendor-alias */
  .is-style-mp-cross > li::before { content: "✕"; color: var(--mp-color-line-strong); } /* vendor-alias */
}

/* -----------------------------------------------------------------------------
   Program pages (page-program.php): content left, the sticky booking card right
   from lg; one column below it (the pinbar and the week table serve the phone).
   ----------------------------------------------------------------------------- */
@layer layout {
  /* Bands paint past the content edge (fills, textures): main clips that, no page scroll.
     clip, not hidden: no scroll container, so the sticky reserve card still sticks. */
  .mp-main { overflow-x: clip; }

  @media (width >= 64rem) {
    .mp-program__layout:has(> .mp-program__aside) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--mp-w-aside);
      align-items: stretch;
      gap: var(--mp-space-xl);
      padding-inline: var(--mp-pad-bleed);
    }
    /* In the column every lane is the column: text left-aligned at its measure. */
    .mp-program__layout:has(> .mp-program__aside) .mp-prose {
      grid-template-columns: [full-start wide-start prose-start] minmax(0, 1fr) [prose-end wide-end full-end];
    }
    .mp-program__layout:has(> .mp-program__aside) .mp-section-head--page { padding-inline: 0; }
    .mp-program__aside { padding-block-start: var(--mp-space-s); }
  }
}