/**
 * Rich page bodies (winx_richpage), the shared component system from the five
 * approved page mockups (contact / about / mws-admissions / mws-courses /
 * mws-grade-1-3), ported verbatim, namespaced `mk-` so nothing collides with
 * the theme, and wired to the site's per-org tokens: --accent is red on the
 * Centre/About/Contact pages and MWS gold on the School pages automatically,
 * and --page-bg already carries each org's tint. Heroes are untouched (each
 * page's own hero widget renders above this).
 */

/* This component now conforms to the theme's canonical design language
   (tokens.css / base.css): near-square --radius, flat hairline-border cards
   instead of heavy resting drop-shadows, square sliding-fill .btn-style
   buttons, serif small-caps section eyebrows, theme heading sizes, and the
   theme's --section-y rhythm. Mono is kept only for genuine DATA labels
   (ages/years/step numbers), matching the theme's own .card__tag convention. */
.mk { color: var(--ink); }
.mk-wrap { max-width: var(--content); margin-inline: auto; padding-inline: var(--pad); }
.mk-section { padding-block: var(--section-y); }
.mk-section--flush { padding-top: 0; }
/* Section kicker = the theme's serif small-caps eyebrow (base.css .eyebrow),
   so a section opener reads the same on an mk- page as everywhere else. */
.mk-eyebrow { font-family: var(--font-display); font-size: var(--step-0); font-variant: small-caps; font-weight: 500; letter-spacing: .06em; text-transform: none; color: var(--accent); display: inline-flex; align-items: center; gap: var(--sp-3); }
.mk-eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.mk-mono { font-family: var(--font-mono); font-size: .69rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.mk h1.mk-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 4.5vw, 3.25rem); line-height: 1.12; letter-spacing: -.01em; }
.mk h2 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.2; letter-spacing: -.01em; margin: .5em 0 .7em; }
.mk h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; letter-spacing: -.01em; }
.mk p { color: var(--ink-2); }
.mk a:not(.mk-btn) { color: inherit; }

/* Buttons: the theme's .btn exactly (square, sliding accent fill, --step--1). */
.mk-btn { --_bg: var(--ink); --_fg: var(--paper); display: inline-flex; align-items: center; gap: var(--sp-3); padding: .85em 1.6em; min-height: 2.75rem; background: var(--_bg); color: var(--_fg); font-size: var(--step--1); font-weight: 500; letter-spacing: .02em; border: 1px solid var(--_bg); border-radius: var(--radius); text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); isolation: isolate; }
.mk-btn::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform var(--dur-2) var(--ease-out); z-index: -1; }
.mk-btn:hover::after { transform: translateY(0); }
.mk-btn:hover { color: var(--accent-ink); border-color: var(--accent); }
.mk-btn:active { transform: translateY(1px); }
.mk-btn--solid { --_bg: var(--accent); --_fg: var(--accent-ink); }
.mk-btn--solid::after { background: var(--ink); }
.mk-btn--solid:hover { color: var(--paper); border-color: var(--ink); }
.mk-btn--cream { --_bg: var(--paper); --_fg: var(--ink); }
.mk-btn--cream::after { background: var(--ink); }
.mk-btn--cream:hover { color: var(--paper); border-color: var(--ink); }
.mk-btn--outline-dark { --_bg: transparent; --_fg: var(--ink); border-color: var(--line-strong); }
.mk-btn--outline-dark::after { background: var(--ink); }
.mk-btn--outline-dark:hover { color: var(--paper); border-color: var(--ink); }
.mk-btn--outline { --_bg: transparent; --_fg: #fff; border-color: rgba(255,255,255,.55); }
.mk-btn--outline::after { background: var(--paper); }
.mk-btn--outline:hover { color: var(--ink); border-color: var(--paper); }
.mk-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: 1.5rem; }
.mk-ctas--center { justify-content: center; }

.mk-sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(2.4rem, 4.5vw, 4.25rem); }
.mk-sechead__link { font-weight: 500; font-size: var(--step--1); color: var(--ink); text-decoration: none; white-space: nowrap; }
.mk-sechead__link:hover { color: var(--accent); }

/* bands */
.mk-band { border-radius: var(--radius-band); padding: clamp(2rem, 4vw, 3.25rem) clamp(2.25rem, 6vw, 5.5rem); color: var(--paper); }
.mk-band .mk-eyebrow { color: rgba(246,243,236,.78); }
.mk-band h2 { color: #fff; }
.mk-band p { color: #d8cfc2; }
.mk-band--acc { background: var(--accent); }
.mk-band--ink { background: var(--ink); }
.mk-band--split { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.mk-band--split img { width: 100%; display: block; background: var(--paper); padding: 12px 12px 14px; border-radius: var(--radius); box-shadow: var(--shadow-2); border-bottom: 3px solid var(--accent); }
/* .mk-band--center used to be a centred variant; two bands stacked on /about/ (ink, then accent) read as two different components, so every non-split band now shares the one left-text / right-button grid below (Erf, 2026-09-21). */
@media (max-width: 720px) { .mk-band--split { grid-template-columns: 1fr; } }

/* facts card */
.mk-facts { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.4rem); box-shadow: var(--shadow-1); }
.mk-facts__row { display: flex; gap: 18px; border-top: 1px solid var(--line); padding: 15px 0; font-size: .9rem; }
.mk-facts__row:first-of-type { border-top: none; padding-top: 0; }
.mk-facts__row b { font-family: var(--font-mono); font-weight: 600; font-size: var(--step--2); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); min-width: 92px; padding-top: 4px; }
.mk-facts__row a { color: var(--accent); }

/* polaroid */
.mk-pol { background: var(--paper); padding: 12px 12px 14px; border-radius: var(--radius); box-shadow: var(--shadow-1); position: relative; border-bottom: 3px solid var(--accent); margin: 0; }
.mk-pol img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; background: #cfc9bd; }
.mk-pol figcaption { font-size: .84rem; font-style: italic; padding: 16px 8px 6px; line-height: 1.5; }
.mk-pol__stamp { position: absolute; top: -11px; right: -6px; background: var(--paper); border: 1.5px solid var(--accent); color: var(--accent); font-family: var(--font-mono); font-weight: 500; font-size: .69rem; padding: 3px 9px; border-radius: var(--radius); transform: rotate(4deg); }

/* grids */
.mk-grid2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.mk-grid2--form-wide { grid-template-columns: .9fr 1.1fr; }
.mk-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); }
.mk-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); }
@media (max-width: 860px) { .mk-grid2, .mk-grid2--form-wide, .mk-grid3, .mk-grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mk-grid2, .mk-grid3, .mk-grid4 { grid-template-columns: 1fr; } }

/* editorial cards */
.mk-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 10px; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2); }
.mk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.mk-card__kick { font-family: var(--font-mono); font-weight: 600; font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.mk-card h3 { font-size: 1.375rem; }
.mk-card p { font-size: .9rem; color: var(--ink-2); flex: 1; }
.mk-card__go { font-family: var(--font-sans); font-weight: 500; font-size: var(--step--1); color: var(--ink); text-decoration: none; }
.mk-card__go:hover { color: var(--accent); }
.mk-card--accent { background: var(--accent); color: #fff; }
.mk-card--accent .mk-card__kick { color: rgba(255,255,255,.8); }
.mk-card--accent h3 { color: #fff; }
.mk-card--accent p { color: #f2e6cf; }
.mk-card--accent .mk-card__go { color: #fff; }

/* callout */
.mk-callout { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.mk-callout .mk-mono { color: var(--accent); }
.mk-callout h3 { font-size: 1.375rem; margin: 6px 0 4px; }

/* Virtual B'Mitzvah callout panel. This whole block (heading, rates, facts)
   sits on the Sunday School admissions page, where bare prices read as THE
   tuition. Boxing it in one bounded, tinted, accent-topped panel makes it
   unmistakably a separate program rather than the school's regular fees. */
.mk-vbm {
  background: var(--bg-tint-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg, 10px);
  padding: clamp(1.6rem, 4vw, 3rem);
  box-shadow: var(--shadow-2);
}
.mk-vbm .mk-sechead { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }

/* table */
.mk-table__label { display: block; color: var(--accent); margin-bottom: .6rem; }
.mk-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
.mk-table th { font-family: var(--font-mono); font-weight: 600; font-size: var(--step--2); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--line-strong); }
.mk-table td { padding: 14px 22px; font-size: .94rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.mk-table tr:last-child td { border-bottom: none; }
.mk-fnote { font-family: var(--font-mono); font-size: .69rem; letter-spacing: .08em; color: var(--ink-3); margin-top: 14px; text-transform: uppercase; }

/* course path ribbon */
.mk-path { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(35,21,18,.2); border-bottom: 1px solid rgba(35,21,18,.2); padding: 28px 0; }
.mk-path__p { font-family: var(--font-mono); font-weight: 600; font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.mk-path__p b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 3px; }
.mk-path__arr { color: var(--accent); font-size: 1.1rem; }
@media (max-width: 720px) { .mk-path__arr { display: none; } .mk-path { justify-content: center; gap: 1.5rem; } }

/* admissions how-it-works */
.mk-hsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); }
@media (max-width: 720px) { .mk-hsteps { grid-template-columns: 1fr; } }
.mk-hsteps__n { font-family: var(--font-mono); font-weight: 500; font-size: .8rem; color: var(--accent); }
.mk-hsteps h3 { font-size: 1.25rem; margin: 8px 0 6px; }
.mk-hsteps p { font-size: .875rem; color: var(--ink-2); }

/* about: org cards + milestone strip */
.mk-orgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); }
@media (max-width: 820px) { .mk-orgs { grid-template-columns: 1fr; } }
.mk-org { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.1rem); display: flex; flex-direction: column; gap: 10px; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2); }
.mk-org:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.mk-org__est { font-family: var(--font-mono); font-weight: 600; font-size: var(--step--2); letter-spacing: .16em; }
.mk-org h3 { font-size: 1.5rem; }
.mk-org p { font-size: .9rem; flex: 1; }
.mk-org a { font-family: var(--font-display); font-weight: 400; font-size: .84rem; color: var(--ink); text-decoration: none; display: inline-block; padding-block: .3rem; }   /* >= 24px tall target */
.mk-org a:hover { color: var(--accent); }
.mk-mile { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); border-top: 1px solid rgba(35,21,18,.18); padding-top: 44px; }
@media (max-width: 720px) { .mk-mile { grid-template-columns: 1fr 1fr; } }
.mk-mile__y { font-family: var(--font-mono); font-weight: 500; font-size: .8rem; color: var(--accent); }
.mk-mile p { font-size: .875rem; color: var(--ink-2); margin-top: 6px; }

/* contact location cards */
.mk-loc { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); }
@media (max-width: 720px) { .mk-loc { grid-template-columns: 1fr; } }
.mk-locc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mk-locc__top { height: 8px; background: var(--accent); }
.mk-locc__in { padding: clamp(1.5rem, 3vw, 2.25rem); }
.mk-locc h3 { font-size: 1.375rem; margin-bottom: 12px; }

/* the real forms engine, dressed to sit in the mockup card */
.mk-formcard { padding: clamp(1.5rem, 3vw, 2.25rem); }
.mk-formcard .winx-form { width: 100%; }
.mk-formcard .winx-form__form { max-width: none; }
.mk-formcard .winx-form label { display: block; font-weight: 600; color: var(--ink-2); margin-bottom: .35em; }
/* Let the form's submit button be the theme's .btn--accent unchanged. */

@media (prefers-reduced-motion: reduce) { .mk-btn, .mk-pol { transition: none; } }

/* Contact rows: the links must read as links. */
.mk-facts__row a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mk-facts__row a:hover { color: var(--ink); }

/* Plain bands (not split, not centred) take the theme banner's layout: copy
   left, action on the right, same padding and radius as .banner, so the
   About page reads like the org homepages instead of a half-empty box. */
.mk-band:not(.mk-band--split) { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-2) var(--sp-7); align-items: center; padding: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 5vw, 4rem); border-radius: var(--radius-band); }
.mk-band:not(.mk-band--split) .mk-ctas { margin-top: 0; justify-content: center; grid-column: 2; grid-row: 1 / span 4; align-self: center; }
.mk-band:not(.mk-band--split) > :not(.mk-ctas) { grid-column: 1; margin: 0; }
.mk-band:not(.mk-band--split) h2 { margin-top: var(--sp-2); }
.mk-band:not(.mk-band--split) p { margin-top: var(--sp-3); }
.mk-band:not(.mk-band--split) p { margin-bottom: 0 !important; }
@media (max-width: 720px) { .mk-band:not(.mk-band--split) { grid-template-columns: 1fr; } .mk-band:not(.mk-band--split) .mk-ctas { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 1.25rem; } }

/* Phone: the two-column blocks stack, and nothing (long email addresses,
   the facts rows) can push the page wider than the screen (audit 2026-09-21). */
.mk-grid2 > * { min-width: 0; }
.mk-facts__row span, .mk-facts__row a { overflow-wrap: anywhere; }
@media (max-width: 820px) { .mk-grid2, .mk-grid2--form-wide { grid-template-columns: 1fr; } }

/* Edge-strip band (option 2, Erf 2026-09-21): paper card, thick org-colour
   left edge, one line tall, text left, buttons right. */
.mk-band:not(.mk-band--split) { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-6); align-items: center; }
.mk-band:not(.mk-band--split) .mk-eyebrow { color: var(--accent); }
.mk-band:not(.mk-band--split) h2 { color: var(--ink); margin-top: var(--sp-2); }
.mk-band:not(.mk-band--split) .mk-ctas { justify-content: flex-end; }
.mk-band:not(.mk-band--split) .mk-btn--accent { --_bg: var(--accent); --_fg: #fff; border-color: var(--accent); }
.mk-band:not(.mk-band--split) .mk-btn--accent::after { background: var(--ink); }
.mk-band:not(.mk-band--split) .mk-btn--outline { --_fg: var(--ink); border-color: var(--line-strong); }
.mk-band:not(.mk-band--split) .mk-btn--outline::after { background: var(--ink); }
.mk-band:not(.mk-band--split) .mk-btn--outline:hover { color: var(--paper); border-color: var(--ink); }
@media (max-width: 720px) { .mk-band:not(.mk-band--split) { grid-template-columns: 1fr; } .mk-band:not(.mk-band--split) .mk-ctas { justify-content: flex-start; } }

/* All non-split richpage bands are edge strips now (Erf, 2026-09-21): the
   ink / accent fills and their light buttons are overridden here. */
.mk-band:not(.mk-band--split).mk-band--ink, .mk-band:not(.mk-band--split).mk-band--acc { background: var(--paper); }
.mk-band:not(.mk-band--split) p { color: var(--ink-2); }
.mk-band:not(.mk-band--split) .mk-btn--cream { --_bg: var(--accent); --_fg: #fff; border-color: var(--accent); }
.mk-band:not(.mk-band--split) .mk-btn--cream::after { background: var(--ink); }
.mk-band:not(.mk-band--split) .mk-btn--cream:hover { color: var(--paper); border-color: var(--ink); }

/* Split band (photo beside the copy), option S1 (Erf 2026-09-21): the same
   edge strip, the photo as a mounted print on the right. No ink fill. */
.mk-band.mk-band--split { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--radius); padding: var(--sp-6); }
.mk-band.mk-band--split .mk-eyebrow { color: var(--accent); }
.mk-band.mk-band--split h2 { color: var(--ink); }
.mk-band.mk-band--split p { color: var(--ink-2); }
.mk-band.mk-band--split img { background: var(--mount); padding: 10px 10px 12px; border-radius: var(--radius); border-bottom: 3px solid var(--accent); box-shadow: 0 20px 40px -24px rgba(26, 24, 20, .6); }
.mk-band.mk-band--split .mk-btn--cream { --_bg: var(--accent); --_fg: #fff; border-color: var(--accent); }
.mk-band.mk-band--split .mk-btn--cream::after { background: var(--ink); }
.mk-band.mk-band--split .mk-btn--outline { --_fg: var(--ink); border-color: var(--line-strong); }
.mk-band.mk-band--split .mk-btn--outline::after { background: var(--ink); }
.mk-band.mk-band--split .mk-btn--outline:hover { color: var(--paper); border-color: var(--ink); }