@port60/template-kit 0.8.0 → 0.10.0

package/src/vendor/validator/platform-base.css

@@ -0,0 +1,4250 @@
+/* GENERATED by scripts/build-preview-base.mjs from src/styles/global.css — do not edit. */
+/* ---- PLATFORM BASE (the base/skin split, 2026-07-14) ----
+   This stylesheet is the platform's base layer: reset, CSS-variable DECLARATIONS (the theming
+   contract — values here are the platform defaults a template overrides via :root:root), chrome
+   mechanics (header/nav/burger/footer/auth), and ALL functional-island styling (donation widget,
+   donate page, events/tickets, services, articles, members area, consent, address lookup). A
+   template's LOOK does not live here — Classic's is src/templates/default/theme.ts, and every
+   template ships a themeCss injected at body-end. Fonts load from the layout <head> (preconnect +
+   stylesheet link) instead of a CSS @import — an @import chains render-blocking requests. */
+
+:root {
+  --bg: #fbf6ef;
+  --bg-tint: #f4ece1;
+  --surface: #ffffff;
+  --ink: #1f2a33;
+  --muted: #5d6b78;
+  --primary: #12877a;
+  --primary-strong: #0c6d62;
+  --primary-soft: rgba(18, 135, 122, 0.1);
+  --accent: #ef6044;
+  --accent-strong: #d94d33;
+  --gold: #f3b13b;
+  --line: rgba(31, 42, 51, 0.1);
+  --line-strong: rgba(18, 135, 122, 0.28);
+  --danger: #c0392b;
+  /* Donate/primary CTA hover — a clear GREEN "go" cue, shared by every template (a template may
+     override the token, but by default hovering a donate button turns green, not just lighter). */
+  --cta-hover: #16a34a;
+  --cta-hover-strong: #128a3f;
+  --shadow-sm: 0 8px 24px rgba(31, 42, 51, 0.06);
+  --shadow: 0 24px 60px rgba(31, 42, 51, 0.12);
+  --radius: 22px;
+  --radius-sm: 14px;
+  --container: 1100px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Arabic-script text (Arabic, Persian, Urdu…) rendered by a proper webfont, sized to match Latin.
+   unicode-range scopes it to Arabic codepoints only — Latin keeps Inter/Fraunces, and the font is
+   downloaded only when an Arabic glyph appears. size-adjust enlarges it so mixed text reads evenly.
+   To use a different (or licensed, e.g. King Saud) font, swap src + keep everything else. */
+@font-face {
+  font-family: 'IBM Plex Sans Arabic';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  size-adjust: 110%;
+  src: url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-arabic@5/files/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
+}
+@font-face {
+  font-family: 'IBM Plex Sans Arabic';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  size-adjust: 110%;
+  src: url('https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-arabic@5/files/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  font-family: 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: var(--ink);
+  background: var(--bg); /* decoration (Classic's radial washes) is the template theme's job */
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Typography (heading scale/family, paragraph rhythm) is TEMPLATE territory — see
+   templates/default/theme.ts for Classic's. The base deliberately styles no bare h1–h4/p. */
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+input {
+  width: 100%;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--ink);
+  padding: 0.85rem 0.95rem;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+input::placeholder {
+  color: rgba(31, 42, 51, 0.4);
+}
+
+input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 0.2rem var(--primary-soft);
+}
+
+/* ---------- layout shell ---------- */
+
+/* THE CONTENT SEAM. `.container` (contained) and `.full` (edge-to-edge) are the layout intents every
+   platform page renders through, and the contract a template fills to place content its way: a template
+   STYLES these — and overrides `--container` for width — to match its own sections. A template must
+   NEVER build a parallel content container (a class sized off `--container`); platform pages stay on
+   `.container`, so a second container makes them drift from the template's sections. The publish-time
+   validator enforces this. A template that leaves the seam alone inherits these platform defaults. */
+.container {
+  width: min(var(--container), calc(100% - 2.5rem));
+  margin: 0 auto;
+}
+
+/* Full-bleed intent — edge-to-edge regardless of the container it sits in (a hero image, a colour
+   band). Templates restyle it freely; the default breaks out to the viewport width. */
+.full {
+  width: 100vw;
+  margin-inline: calc(50% - 50vw);
+}
+
+.section {
+  padding: 4.5rem 0;
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  border-bottom: 1px solid var(--line);
+  background: rgba(251, 246, 239, 0.82);
+  backdrop-filter: blur(14px);
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-height: 76px;
+}
+
+.brand-lockup {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.brand-mark {
+  display: grid;
+  place-items: center;
+  width: 2.9rem;
+  height: 2.9rem;
+  border-radius: 16px;
+  color: #fff;
+  font-size: 1.3rem;
+  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
+  box-shadow: 0 12px 26px rgba(18, 135, 122, 0.26);
+}
+
+/* Optional tenant logo in the header (set in Appearance → Logo). Height-constrained + width auto so any
+   shape fits: a full wordmark takes more width, an icon less; object-fit avoids distortion. The vw cap
+   keeps a wide logo from crowding the nav on narrow screens. */
+.brand-logo {
+  height: 44px;
+  width: auto;
+  max-width: min(260px, 50vw);
+  object-fit: contain;
+  display: block;
+}
+.brand-logo-icon {
+  height: 44px;
+  width: auto;
+  max-width: 56px;
+  object-fit: contain;
+  display: block;
+}
+
+.brand-lockup strong {
+  display: block;
+  font-family: 'Fraunces', serif;
+  font-size: 1.15rem;
+}
+
+.brand-lockup small {
+  display: block;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.site-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-wrap: nowrap; /* never let items drop to a second line — compact (below) then burger */
+}
+
+.site-nav a {
+  padding: 0.6rem 0.95rem;
+  border-radius: 999px;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.site-nav a:hover {
+  background: rgba(31, 42, 51, 0.05);
+  color: var(--ink);
+}
+
+.site-nav .nav-cta {
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+  box-shadow: 0 10px 22px rgba(239, 96, 68, 0.26);
+}
+
+/* Donate, the Port60 ID sign-in, and the account pill share one exact size — they sit side by
+   side, so any height/padding drift between them reads as misalignment. The sign-in/account pair
+   is UNSCOPED: they are the member_menu ISLAND's chrome, which must look right inside ANY
+   template's nav (artifact layouts don't use .site-nav). */
+.site-nav .nav-cta,
+.nav-p60-signin.nav-p60-signin,
+.nav-account-toggle.nav-account-toggle.nav-account-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 1.05rem;
+  padding-right: 1.05rem;
+}
+
+.site-nav .nav-cta:hover {
+  color: #fff;
+  background: linear-gradient(135deg, var(--cta-hover), var(--cta-hover-strong));
+  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.3);
+}
+
+/* Services dropdown — populated client-side from the published services. */
+.site-nav .nav-dropdown {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.site-nav .nav-dropdown[hidden] {
+  display: none; /* beats the display rule above so it stays hidden until revealed */
+}
+.nav-dropdown-toggle {
+  cursor: pointer;
+}
+.nav-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  display: none;
+  flex-direction: column;
+  min-width: 210px;
+  padding: 0.4rem;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  box-shadow: var(--shadow);
+  z-index: 60;
+}
+.nav-dropdown:hover .nav-dropdown-menu,
+.nav-dropdown:focus-within .nav-dropdown-menu {
+  display: flex;
+}
+.site-nav .nav-dropdown-menu a {
+  padding: 0.5rem 0.7rem;
+  border-radius: 8px;
+  color: var(--ink);
+  font-weight: 500;
+  white-space: nowrap;
+}
+.site-nav .nav-dropdown-menu a:hover {
+  background: var(--bg-tint);
+}
+
+/* The port60 ID sign-in button — the PLATFORM identity brand, deliberately constant across every
+   tenant site and template (the "Sign in with Google" pattern): port60 navy + cyan, independent
+   of the site palette. The hosted widget it opens offers both sign-in and register. Unscoped —
+   island chrome, identical in any template's nav. */
+.nav-p60-signin.nav-p60-signin {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.5rem 1rem;
+  border-radius: 999px;
+  background: #07101d;
+  color: #edf3ff;
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.nav-p60-signin.nav-p60-signin[hidden] {
+  display: none;
+}
+.nav-p60-signin.nav-p60-signin:hover {
+  background: #10203c;
+  color: #edf3ff;
+}
+.p60-mark {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  opacity: 0.95;
+  white-space: nowrap; /* the brand never wraps: "Port60 ID" stays on one line */
+}
+.p60-mark b {
+  color: #61dafb;
+  font-weight: 800;
+}
+
+/* Members account pill (signed in) — a clear "this is your account" affordance, weighted between
+   plain nav links and the Donate CTA. The menu anchors right (it's the last nav item).
+   `.open` mirrors hover/focus for touch. Unscoped — island chrome, identical in any template's
+   nav: the wrapper carries its own positioning anchor and menu-link styling so the dropdown works
+   without .site-nav around it. */
+.nav-account {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.nav-account-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.45rem 0.95rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--ink);
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+.nav-account-toggle.nav-account-toggle:hover {
+  background: var(--bg-tint);
+}
+.nav-account-icon {
+  width: 1.05rem;
+  height: 1.05rem;
+}
+.nav-account .nav-dropdown-menu {
+  left: auto;
+  right: 0;
+}
+.nav-account .nav-dropdown-menu a {
+  padding: 0.5rem 0.7rem;
+  border-radius: 8px;
+  color: var(--ink);
+  font-weight: 500;
+  white-space: nowrap;
+  text-decoration: none;
+}
+.nav-account .nav-dropdown-menu a:hover {
+  background: var(--bg-tint);
+}
+.nav-account.open .nav-dropdown-menu {
+  display: flex;
+}
+/* Artifact-template mobile panels (the layout behaviour API: #site-nav gains .open): the account
+   menu flows INLINE like any expanded nav group — never a floating card half off the screen.
+   Keyed on the .open state the burger sets, so desktop hover/dropdowns are untouched. */
+#site-nav.open .nav-account {
+  display: block;
+  width: 100%;
+}
+#site-nav.open .nav-account .nav-dropdown-menu {
+  position: static;
+  box-shadow: none;
+  border: 0;
+  background: transparent;
+  padding: 0.45rem 0 0 1.1rem;
+  min-width: 0;
+}
+
+/* Dim-behind overlay while sign-in happens in the Port60 ID popup window. */
+.auth-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(31, 42, 51, 0.55);
+}
+.auth-overlay[hidden] {
+  display: none;
+}
+.auth-overlay-card {
+  background: var(--surface);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow);
+  padding: 1.6rem 2rem;
+  max-width: 24rem;
+  text-align: center;
+}
+.auth-overlay-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+.auth-overlay-card .p60-mark b {
+  color: #0b6e99;
+}
+.auth-overlay-card button {
+  margin-top: 0.4rem;
+  padding: 0.45rem 1.2rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  cursor: pointer;
+}
+.auth-overlay-card button:hover {
+  background: var(--bg-tint);
+}
+
+/* Optional tenant footer mark (branding.footerLogoUrl) — height-constrained like the header logo. */
+.footer-logo { display: block; height: 46px; width: auto; max-width: 220px; object-fit: contain; margin-bottom: 0.9rem; }
+
+.site-footer {
+  margin-top: 2rem;
+  padding: 2.5rem 0 3rem;
+  border-top: 1px solid var(--line);
+  background: var(--bg-tint);
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: 1.3fr 0.7fr;
+  gap: 1.5rem;
+  align-items: start;
+}
+
+.footer-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+}
+
+.footer-links a {
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.footer-links a:hover {
+  color: var(--primary);
+}
+
+.footer-note {
+  margin-top: 1.5rem;
+  font-size: 0.85rem;
+  color: rgba(93, 107, 120, 0.8);
+}
+
+/* Footer socials — tenant's social links, rendered by the template (ours: here). Variable-driven so
+   each theme tints them. */
+.footer-socials {
+  display: flex;
+  gap: 0.6rem;
+  margin-top: 1.25rem;
+}
+.footer-socials a {
+  display: grid;
+  place-items: center;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--muted);
+  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+}
+.footer-socials a:hover {
+  color: var(--primary);
+  border-color: var(--primary);
+  transform: translateY(-2px);
+}
+.footer-socials svg {
+  width: 1.15rem;
+  height: 1.15rem;
+}
+
+/* ---------- shared bits (.eyebrow/.card/.section-heading are template-owned — Classic's live in
+   templates/default/theme.ts; .button stays here because the islands depend on it) ---------- */
+
+/* A kicker may BE a link (the archive's section kicker doubles as the way back) — it keeps the
+   kicker type treatment whatever the template; hover reveals the affordance. */
+a.eyebrow {
+  text-decoration: none;
+}
+a.eyebrow:hover {
+  text-decoration: underline;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  padding: 0.9rem 1.4rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 0.16s ease, filter 0.16s ease, background 0.16s ease;
+}
+
+.button:hover {
+  transform: translateY(-1px);
+}
+
+.button-primary:hover {
+  background: linear-gradient(135deg, var(--cta-hover), var(--cta-hover-strong));
+  box-shadow: 0 14px 28px rgba(22, 163, 74, 0.28);
+}
+
+.button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.button-primary {
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+  box-shadow: 0 14px 28px rgba(239, 96, 68, 0.24);
+}
+
+.button-secondary {
+  color: var(--primary-strong);
+  background: var(--surface);
+  border-color: var(--line-strong);
+}
+
+.button-ghost {
+  color: var(--ink);
+  background: rgba(31, 42, 51, 0.04);
+  border-color: var(--line);
+}
+
+/* ---------- Forms (schema-driven form renderer — components/FormRenderer + DateField) ----------
+   Themed entirely from the site tokens so a form looks native on any template. The one thing the base
+   input{} rule gets wrong for us is the checkbox (it forces width:100%, stretching the box across the
+   row) — pinned below, which is what fixes the check-box alignment. */
+
+.p60-form {
+  max-width: 640px;
+}
+
+.p60-form-intro {
+  color: var(--muted);
+  margin: 0 0 1.5rem;
+}
+
+.p60-form-note {
+  color: var(--muted);
+}
+
+.p60-form-field {
+  margin-bottom: 1.15rem;
+}
+
+.p60-form-label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+
+.p60-form-req {
+  color: var(--accent, var(--danger));
+}
+
+.p60-form-help {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--muted);
+  margin-bottom: 0.4rem;
+}
+
+.p60-form-heading {
+  margin: 1.9rem 0 0.75rem;
+}
+
+.p60-form-control {
+  width: 100%;
+  padding: 0.85rem 0.95rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm, 12px);
+  background: var(--surface);
+  color: var(--ink);
+  font: inherit;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+textarea.p60-form-control {
+  resize: vertical;
+  min-height: 3.2rem;
+}
+
+.p60-form-control:focus,
+.p60-form-control:focus-visible {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 0.2rem var(--primary-soft);
+}
+
+.p60-form-field.has-error .p60-form-control {
+  border-color: var(--danger);
+}
+
+.p60-form-field.has-error .p60-form-control:focus {
+  box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.14);
+}
+
+.p60-form-error {
+  margin: 0.4rem 0 0;
+  font-size: 0.85rem;
+  color: var(--danger);
+}
+
+.p60-form-alert {
+  margin: 0 0 1rem;
+  padding: 0.7rem 0.9rem;
+  border-radius: var(--radius-sm, 12px);
+  background: rgba(192, 57, 43, 0.08);
+  color: var(--danger);
+  font-size: 0.9rem;
+}
+
+/* Checkbox rows — pin the box small and top-align it with the first line of the label text. */
+.p60-form-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  margin-bottom: 1.15rem;
+  cursor: pointer;
+}
+
+.p60-form-check input[type='checkbox'],
+.p60-form-check input[type='radio'] {
+  width: 1.05rem;
+  height: 1.05rem;
+  flex: 0 0 auto;
+  margin: 0.15rem 0 0;
+  accent-color: var(--primary);
+  cursor: pointer;
+}
+
+.p60-form-check.has-error span {
+  color: var(--danger);
+}
+
+.p60-form-check-help {
+  color: var(--muted);
+  font-style: italic;
+}
+
+/* MULTISELECT checkbox list / CHOICE radio list — vertical lists reusing the aligned check-row. */
+.p60-form-checklist,
+.p60-form-radios {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  padding: 0.15rem 0;
+}
+
+.p60-form-checklist .p60-form-check,
+.p60-form-radios .p60-form-check {
+  margin-bottom: 0;
+}
+
+/* Searchable multi-select dropdown (MultiSelectDropdown) — the "pick many from a long list" widget. */
+.p60-ms {
+  position: relative;
+}
+
+.p60-ms-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.p60-ms-trigger svg {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.p60-ms-ph {
+  color: rgba(31, 42, 51, 0.42);
+}
+
+/* Selected options shown as removable chips inside the control. */
+.p60-ms-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.p60-ms-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.1rem 0.25rem 0.1rem 0.55rem;
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+  border-radius: 999px;
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.p60-ms-chip-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.p60-ms-chip-x:hover {
+  background: rgba(31, 42, 51, 0.12);
+}
+
+.p60-ms-pop {
+  position: absolute;
+  z-index: 60;
+  top: calc(100% + 6px);
+  left: 0;
+  width: 100%;
+  padding: 0.4rem;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm, 12px);
+  box-shadow: var(--shadow, 0 24px 60px rgba(31, 42, 51, 0.12));
+}
+
+.p60-ms-search {
+  width: 100%;
+  margin-bottom: 0.4rem;
+  padding: 0.5rem 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: 0.5rem;
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.p60-ms-list {
+  max-height: 15rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.p60-ms-row {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.4rem 0.5rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.p60-ms-row:hover {
+  background: var(--primary-soft);
+}
+
+.p60-ms-row input[type='checkbox'] {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  accent-color: var(--primary);
+  cursor: pointer;
+}
+
+.p60-ms-empty {
+  padding: 0.5rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+/* ---- Custom desktop date picker (DateField) — native <input type=date> is used on touch ---- */
+.p60-date {
+  position: relative;
+}
+
+.p60-date-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.p60-date-trigger svg {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.p60-date-ph {
+  color: rgba(31, 42, 51, 0.42);
+}
+
+.p60-date-pop {
+  position: absolute;
+  z-index: 60;
+  top: calc(100% + 6px);
+  left: 0;
+  width: 17.5rem;
+  max-width: calc(100vw - 2rem);
+  padding: 0.75rem;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm, 12px);
+  box-shadow: var(--shadow, 0 24px 60px rgba(31, 42, 51, 0.12));
+}
+
+.p60-date-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.p60-date-title {
+  font-weight: 600;
+}
+
+.p60-date-nav {
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.p60-date-nav:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+.p60-date-dow {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.15rem;
+  margin-bottom: 0.25rem;
+}
+
+.p60-date-dow span {
+  text-align: center;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--muted);
+  padding: 0.2rem 0;
+}
+
+.p60-date-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.15rem;
+}
+
+.p60-date-day {
+  aspect-ratio: 1 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.p60-date-day:hover {
+  background: var(--primary-soft);
+}
+
+.p60-date-day:focus-visible {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 0.15rem var(--primary-soft);
+}
+
+.p60-date-day.is-outside {
+  color: rgba(31, 42, 51, 0.35);
+}
+
+.p60-date-day.is-today {
+  border-color: var(--line-strong);
+  font-weight: 700;
+}
+
+.p60-date-day.is-selected {
+  background: var(--primary);
+  color: #fff;
+}
+
+.p60-date-day:disabled {
+  color: rgba(31, 42, 51, 0.25);
+  cursor: not-allowed;
+  background: transparent;
+}
+
+/* (hero / impact / band — the home page's Classic presentation — live in templates/default/theme.ts) */
+
+/* ---------- donation widget ---------- */
+
+.donate-card {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 1.7rem;
+  display: grid;
+  gap: 1rem;
+}
+
+/* Optional cause image banner at the top of the widget (set per-cause in tenant-admin). */
+.donate-cause-img {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+}
+
+.donate-head h2 {
+  margin: 0 0 0.35rem;
+  font-size: 1.75rem;
+}
+
+.donate-sub {
+  margin: 0;
+  font-size: 0.96rem;
+}
+
+.donate-change {
+  color: var(--primary);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.donate-change:hover {
+  text-decoration: underline;
+}
+
+/* once / monthly / annual frequency selector (shown only for recurring-enabled causes) */
+.freq-tabs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.35rem;
+  padding: 0.3rem;
+  background: var(--primary-soft);
+  border-radius: 999px;
+}
+
+.freq-tab {
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  border-radius: 999px;
+  padding: 0.55rem 0.4rem;
+  font: inherit;
+  font-weight: 700;
+  font-size: 0.92rem;
+  cursor: pointer;
+  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.freq-tab:hover {
+  color: var(--primary-strong);
+}
+
+.freq-tab.selected {
+  background: var(--surface);
+  color: var(--primary-strong);
+  box-shadow: 0 1px 3px rgba(31, 42, 51, 0.12);
+}
+
+/* ---------- donate page (cause selection) ---------- */
+
+.donate-layout {
+  display: grid;
+  grid-template-columns: 1fr 0.9fr;
+  gap: 2rem;
+  align-items: start;
+}
+
+.cause-options {
+  display: grid;
+  gap: 0.8rem;
+  margin-top: 1.2rem;
+}
+
+.cause-option {
+  text-align: left;
+  background: var(--surface);
+  border: 1.5px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: 1rem 1.1rem;
+  cursor: pointer;
+  display: grid;
+  gap: 0.3rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cause-option:hover {
+  border-color: var(--primary);
+}
+
+.cause-option.selected {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-soft);
+}
+
+.cause-option-img {
+  width: 100%;
+  height: 120px;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+  margin-bottom: 0.2rem;
+}
+
+.cause-option-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.cause-option-head strong {
+  font-size: 1.05rem;
+}
+
+.cause-tag {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--primary-strong);
+  background: var(--primary-soft);
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+}
+
+.cause-option-desc {
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.cause-option-dates {
+  color: var(--accent-strong);
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+.cause-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-top: 0.55rem;
+}
+
+.cause-progress-track {
+  height: 7px;
+  border-radius: 999px;
+  background: var(--primary-soft);
+  overflow: hidden;
+}
+
+.cause-progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--primary);
+  transition: width 0.4s ease;
+}
+
+.cause-progress-text {
+  font-size: 0.82rem;
+  color: var(--muted);
+}
+
+.cause-progress-text strong {
+  color: var(--primary-strong);
+}
+
+@media (max-width: 900px) {
+  .donate-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+.amount-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.6rem;
+}
+
+.amount-option {
+  border: 1.5px solid var(--line);
+  background: var(--surface);
+  color: var(--ink);
+  border-radius: 12px;
+  padding: 0.85rem 0.4rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
+}
+
+.amount-option:hover {
+  border-color: var(--line-strong);
+}
+
+.amount-option.selected {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+}
+
+/* Named suggested amounts — a vertical list with the amount + its label (e.g. "Feeds a family"). */
+.amount-list {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.amount-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  width: 100%;
+  text-align: left;
+  border: 1.5px solid var(--line);
+  background: var(--surface);
+  color: var(--ink);
+  border-radius: 12px;
+  padding: 0.85rem 1rem;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
+}
+
+.amount-row:hover {
+  border-color: var(--line-strong);
+}
+
+.amount-row.selected {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+}
+
+.amount-row-value {
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.amount-row-label {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.amount-row.selected .amount-row-label {
+  color: var(--primary-strong);
+}
+
+.field {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.field span {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--ink);
+}
+
+.amount-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.amount-input .currency {
+  position: absolute;
+  left: 0.85rem;
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.amount-input input {
+  padding-left: 1.8rem;
+}
+
+.donor-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.8rem;
+}
+
+/* UK Gift Aid opt-in */
+.giftaid-box {
+  border: 1px solid var(--line-strong);
+  background: var(--primary-soft);
+  border-radius: 12px;
+  padding: 0.85rem 0.9rem;
+  display: grid;
+  gap: 0.75rem;
+}
+.giftaid-optin {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  cursor: pointer;
+  font-size: 0.92rem;
+  line-height: 1.4;
+}
+.giftaid-optin input {
+  margin-top: 0.2rem;
+  width: 1.1rem;
+  height: 1.1rem;
+  flex: none;
+}
+.giftaid-fields {
+  display: grid;
+  gap: 0.7rem;
+}
+.giftaid-declaration {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--muted);
+  line-height: 1.45;
+}
+.giftaid-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.8rem;
+}
+.donate-giftaid-note {
+  margin: 0.4rem 0 0;
+  font-size: 0.9rem;
+  color: var(--primary-strong);
+}
+
+.card-host {
+  min-height: 2.5rem;
+  margin: 0.25rem 0 0.5rem;
+}
+
+.donate-payline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  font-size: 0.95rem;
+  margin-bottom: 0.25rem;
+}
+.donate-change-amount {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--primary-strong);
+  cursor: pointer;
+  font: inherit;
+}
+.donate-change-amount:hover {
+  text-decoration: underline;
+}
+
+.donate-note {
+  border-radius: 12px;
+  padding: 0.8rem 0.9rem;
+  font-size: 0.9rem;
+  background: var(--primary-soft);
+  border: 1px solid var(--line-strong);
+  color: var(--primary-strong);
+}
+
+.donate-note.warn {
+  background: rgba(243, 177, 59, 0.12);
+  border-color: rgba(243, 177, 59, 0.4);
+  color: #8a6310;
+}
+
+.donate-note.error {
+  background: rgba(192, 57, 43, 0.08);
+  border-color: rgba(192, 57, 43, 0.3);
+  color: var(--danger);
+}
+
+.donate-submit {
+  width: 100%;
+  font-size: 1.05rem;
+  padding: 1rem;
+}
+
+.donate-status {
+  color: var(--muted);
+  margin: 0;
+}
+
+.donate-trust {
+  margin: 0;
+  text-align: center;
+  font-size: 0.82rem;
+  color: var(--muted);
+}
+
+.donate-success {
+  display: grid;
+  gap: 0.6rem;
+  text-align: center;
+  padding: 0.8rem 0;
+}
+
+.success-mark {
+  justify-self: center;
+  width: 3.4rem;
+  height: 3.4rem;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  font-size: 1.7rem;
+  color: #fff;
+  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
+  box-shadow: 0 12px 26px rgba(18, 135, 122, 0.3);
+}
+
+.donate-success h3 {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.donate-success .ref {
+  font-size: 0.8rem;
+  color: var(--muted);
+  word-break: break-all;
+  margin: 0;
+}
+
+.donate-success .button {
+  justify-self: center;
+  margin-top: 0.4rem;
+}
+
+/* (about-page .prose/.value-grid — Classic's section presentation — live in templates/default/theme.ts) */
+
+/* ---------- responsive ---------- */
+
+@media (max-width: 980px) {
+  .footer-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 620px) {
+  .section {
+    padding: 3.2rem 0;
+  }
+
+  .header-inner {
+    min-height: auto;
+    padding: 0.7rem 0;
+  }
+
+  .amount-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .donor-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .giftaid-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* --- Services (public CMS pages) --- */
+.services-title {
+  font-size: clamp(1.8rem, 4vw, 2.6rem);
+  margin: 0.25rem 0 0.5rem;
+  color: var(--ink);
+}
+.services-lead {
+  color: var(--muted);
+  margin: 0 0 2rem;
+  max-width: 46ch;
+}
+.services-empty {
+  color: var(--muted);
+  padding: 2rem 0;
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1.25rem;
+}
+.service-card {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+  padding: 0;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+.service-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow);
+}
+.service-card-img {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  display: block;
+  background: var(--bg-tint);
+}
+.service-card-img--empty {
+  background: linear-gradient(135deg, var(--primary-soft), var(--bg-tint));
+}
+.service-card-name {
+  font-weight: 600;
+  color: var(--ink);
+  padding: 0.9rem 1.1rem 1.1rem;
+  font-size: 1.05rem;
+}
+
+.services-back {
+  background: none;
+  border: 0;
+  color: var(--primary-strong);
+  cursor: pointer;
+  padding: 0;
+  margin-bottom: 1.25rem;
+  font-size: 0.95rem;
+}
+.services-back:hover {
+  text-decoration: underline;
+}
+
+.service-article {
+  /* Fills the container. (Was capped at 720px for line-length readability; widened by preference.
+     If prose lines feel too long on very wide monitors, cap .service-body at ~70ch instead.) */
+  max-width: none;
+}
+.service-hero {
+  width: 100%;
+  max-height: 360px;
+  object-fit: cover;
+  border-radius: var(--radius);
+  margin-bottom: 1.5rem;
+}
+.service-article h1 {
+  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
+  color: var(--ink);
+  margin: 0 0 1rem;
+}
+.service-body {
+  color: var(--ink);
+  line-height: 1.7;
+}
+.service-body h2,
+.service-body h3,
+.service-body h4 {
+  color: var(--ink);
+  margin: 1.6rem 0 0.6rem;
+}
+.service-body p {
+  margin: 0 0 1rem;
+}
+.service-body ul,
+.service-body ol {
+  margin: 0 0 1rem 1.25rem;
+}
+.service-body img {
+  /* Cap both axes so an image stays relative to the page: max-width for wide images, max-height
+     for tall/portrait ones (which max-width alone never constrains). Aspect ratio is preserved. */
+  max-width: 100%;
+  max-height: 70vh;
+  height: auto;
+  border-radius: var(--radius);
+  margin: 0.75rem 0;
+}
+.service-body img.align-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.service-body img.align-left {
+  float: left;
+  margin: 0.25rem 1.25rem 0.75rem 0;
+  max-width: 50%;
+}
+.service-body img.align-right {
+  float: right;
+  margin: 0.25rem 0 0.75rem 1.25rem;
+  max-width: 50%;
+}
+/* Size presets chosen in the admin editor; after the align rules so an explicit size overrides the
+   align-left/right default 50% when an image carries both classes. */
+.service-body img.size-sm {
+  max-width: 33%;
+}
+.service-body img.size-md {
+  max-width: 66%;
+}
+.service-body img.size-full {
+  max-width: 100%;
+}
+.service-body::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+.service-body a {
+  color: var(--primary-strong);
+}
+.service-body blockquote {
+  border-left: 3px solid var(--line-strong);
+  margin: 1rem 0;
+  padding: 0.25rem 0 0.25rem 1rem;
+  color: var(--muted);
+}
+
+/* --- Articles (public) --- */
+/* The blog is long-form READING (unlike the full-width marketing Services pages): the article body
+   sits in a ~70ch measure with article chrome (byline, reading time), and the theme owns all
+   typography — content only carries semantic structure (mark, pull quotes, captions, tables,
+   embeds), styled here. */
+.article-article {
+  /* The page FRAME matches every other page's container (hero image, engagement bar span it);
+     the running text keeps its own readable measure via .article-body/.article-article-head —
+     so navigating article ↔ other pages no longer visibly narrows the page. */
+  max-width: var(--container);
+  margin: 0 auto;
+}
+.article-hero {
+  width: 100%;
+  max-height: 420px;
+  object-fit: cover;
+  border-radius: var(--radius);
+  margin-bottom: 1.5rem;
+}
+.article-article-head {
+  margin: 0 0 1.25rem;
+}
+.article-article-head h1 {
+  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
+  color: var(--ink);
+  margin: 0.5rem 0;
+  line-height: 1.15;
+}
+.article-byline {
+  color: var(--muted);
+  font-size: 0.95rem;
+  margin: 0;
+}
+.article-byline-author {
+  color: var(--ink);
+  font-weight: 600;
+}
+.article-byline-role {
+  color: var(--muted);
+  font-weight: 400;
+}
+.article-chip {
+  display: inline-block;
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+  border-radius: 999px;
+  padding: 0.15rem 0.7rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+.article-chip-link {
+  text-decoration: none;
+  margin-inline-end: 0.4rem;
+}
+.article-chip-link:hover {
+  background: var(--primary);
+  color: #fff;
+}
+
+.article-body {
+  /* Fills the container — same call as .service-body ("widened by preference"): the page reads as
+     one full-width surface; line-height carries the readability. */
+  margin: 0;
+  color: var(--ink);
+  line-height: 1.75;
+  font-size: 1.05rem;
+}
+.article-body h2,
+.article-body h3,
+.article-body h4 {
+  color: var(--ink);
+  margin: 1.7rem 0 0.6rem;
+  line-height: 1.25;
+}
+.article-body p {
+  margin: 0 0 1rem;
+}
+.article-body ul,
+.article-body ol {
+  margin: 0 0 1rem 1.25rem;
+}
+.article-body a {
+  color: var(--primary-strong);
+}
+.article-body img {
+  max-width: 100%;
+  max-height: 70vh;
+  height: auto;
+  border-radius: var(--radius-sm);
+  margin: 0.75rem 0;
+}
+.article-body img.align-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.article-body img.align-left {
+  float: left;
+  margin: 0.25rem 1.25rem 0.75rem 0;
+  max-width: 50%;
+}
+.article-body img.align-right {
+  float: right;
+  margin: 0.25rem 0 0.75rem 1.25rem;
+  max-width: 50%;
+}
+.article-body img.size-sm {
+  max-width: 33%;
+}
+.article-body img.size-md {
+  max-width: 66%;
+}
+.article-body img.size-full {
+  max-width: 100%;
+}
+/* The semantic highlight — theme-tinted, never an author-picked colour. */
+.article-body mark {
+  background: color-mix(in srgb, var(--gold) 38%, transparent);
+  color: inherit;
+  padding: 0 0.15em;
+  border-radius: 0.2em;
+}
+.article-body blockquote {
+  border-inline-start: 3px solid var(--line-strong);
+  margin: 1.25rem 0;
+  padding: 0.25rem 1rem;
+  color: var(--muted);
+}
+/* The pull quote — a stand-out breath in the reading flow. */
+.article-body blockquote.pull {
+  border-inline-start: none;
+  border-top: 2px solid var(--line-strong);
+  border-bottom: 2px solid var(--line-strong);
+  margin: 2rem auto;
+  padding: 1.1rem 0.75rem;
+  max-width: 90%;
+  text-align: center;
+  color: var(--ink);
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 1.35rem;
+  font-style: italic;
+  line-height: 1.45;
+}
+.article-body hr {
+  border: none;
+  border-top: 1px solid var(--line);
+  margin: 2rem auto;
+  max-width: 8rem;
+}
+/* Captioned images: the figure carries the align/size classes so the unit floats/scales together. */
+.article-body figure {
+  margin: 1rem 0;
+}
+.article-body figure img {
+  width: 100%;
+  margin: 0;
+}
+.article-body figure.align-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+.article-body figure.align-left {
+  float: left;
+  margin: 0.25rem 1.25rem 0.75rem 0;
+  max-width: 50%;
+}
+.article-body figure.align-right {
+  float: right;
+  margin: 0.25rem 0 0.75rem 1.25rem;
+  max-width: 50%;
+}
+.article-body figure.size-sm {
+  max-width: 33%;
+}
+.article-body figure.size-md {
+  max-width: 66%;
+}
+.article-body figure.size-full {
+  max-width: 100%;
+}
+.article-body figcaption {
+  color: var(--muted);
+  font-size: 0.85rem;
+  text-align: center;
+  margin-top: 0.4rem;
+}
+.article-body table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1.25rem 0;
+  font-size: 0.95rem;
+}
+.article-body th,
+.article-body td {
+  border: 1px solid var(--line);
+  padding: 0.5rem 0.7rem;
+  text-align: start;
+  vertical-align: top;
+}
+.article-body th {
+  background: var(--bg-tint);
+  color: var(--ink);
+}
+/* Video embeds: responsive 16:9, full measure. */
+.article-body iframe.embed {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border: 0;
+  border-radius: var(--radius-sm);
+  margin: 1.25rem 0;
+}
+.article-body::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+.article-tags {
+  margin: 1.5rem 0 0;
+}
+
+/* Engagement bar under the article. Wraps — never scrolls sideways. */
+.article-engage {
+  margin: 1.5rem 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  padding: 0.8rem 0;
+}
+.article-like {
+  border: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--ink);
+  border-radius: 999px;
+  padding: 0.4rem 1rem;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
+}
+.article-like:hover {
+  border-color: var(--accent);
+  color: var(--accent-strong);
+}
+.article-like--on {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
+  color: var(--accent-strong);
+  font-weight: 600;
+}
+.article-views {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+/* The share row — plain share-intent buttons (no network SDKs). Wraps with the bar. */
+.article-share-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-inline-start: auto;
+}
+.article-share-word {
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin-inline-end: 0.15rem;
+}
+.article-share-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--muted);
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
+}
+.article-share-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent-strong);
+}
+/* Brand tints on hover — recognisable without shouting at rest (and dark-theme safe: the
+   at-rest button is theme ink on theme surface). */
+.article-share-btn--facebook:hover { color: #1877f2; border-color: #1877f2; }
+.article-share-btn--x:hover { color: var(--ink); border-color: var(--ink); }
+.article-share-btn--whatsapp:hover { color: #25d366; border-color: #25d366; }
+.article-share-btn--linkedin:hover { color: #0a66c2; border-color: #0a66c2; }
+.article-share-copied {
+  color: var(--accent-strong);
+  font-size: 0.85rem;
+}
+
+/* Comments. */
+.article-comments {
+  margin: 1.5rem 0 0;
+}
+.article-comments h2 {
+  font-size: 1.3rem;
+  color: var(--ink);
+}
+.article-comment-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.article-comment {
+  border-bottom: 1px solid var(--line);
+  padding: 0.9rem 0;
+}
+.article-comment-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.25rem;
+}
+.article-comment p {
+  margin: 0;
+  white-space: pre-wrap;
+}
+.article-comments-more {
+  margin-top: 0.75rem;
+}
+.article-comment-form {
+  margin-top: 1.25rem;
+}
+.article-comment-form label {
+  display: block;
+  font-weight: 600;
+  color: var(--ink);
+  margin-bottom: 0.4rem;
+}
+.article-comment-form textarea {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: 0.7rem 0.9rem;
+  font: inherit;
+  color: var(--ink);
+  background: var(--surface);
+  resize: vertical;
+}
+.article-comment-form textarea:focus {
+  outline: 2px solid var(--line-strong);
+}
+.article-comment-form-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.5rem;
+}
+.article-comment-error {
+  color: var(--danger);
+  font-size: 0.9rem;
+}
+.article-comments-gate {
+  background: var(--bg-tint);
+  border-radius: var(--radius-sm);
+  padding: 1rem 1.25rem;
+  margin-top: 1.25rem;
+}
+.article-comments-gate p {
+  margin: 0 0 0.6rem;
+}
+.article-comments-note {
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin-top: 1rem;
+}
+
+/* Feed: featured card + grid. */
+.article-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+.article-pill {
+  border: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--ink);
+  border-radius: 999px;
+  padding: 0.35rem 0.95rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+.article-pill--on {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #fff;
+}
+.article-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1.5rem;
+}
+.article-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--surface);
+  text-decoration: none;
+  color: inherit;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.article-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-sm);
+}
+.article-card-image {
+  width: 100%;
+  height: 170px;
+  object-fit: cover;
+  display: block;
+}
+.article-card-image--empty {
+  background: linear-gradient(135deg, var(--bg-tint), var(--primary-soft));
+}
+.article-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  padding: 1rem 1.1rem 1.2rem;
+}
+.article-card-body strong {
+  color: var(--ink);
+  font-size: 1.05rem;
+  line-height: 1.3;
+}
+.article-card-tags {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.article-card-excerpt {
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.article-card-meta {
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+.article-card-counts {
+  margin-inline-start: 0.6rem;
+}
+/* The featured (newest) card: a magazine lead — image beside copy on wide screens. */
+.article-card--featured {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  margin-bottom: 1.5rem;
+}
+.article-card--featured .article-card-image {
+  height: 100%;
+  min-height: 260px;
+}
+.article-card--featured .article-card-body {
+  padding: 1.5rem;
+  justify-content: center;
+}
+.article-card--featured .article-card-body strong {
+  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
+}
+@media (max-width: 720px) {
+  .article-card--featured {
+    grid-template-columns: 1fr;
+  }
+  .article-card--featured .article-card-image {
+    min-height: 0;
+    height: 200px;
+  }
+}
+.article-load-more {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 1.75rem;
+}
+.article-empty {
+  color: var(--muted);
+}
+.article-more {
+  /* Spans the page frame like the hero + back-link (the reading column stays 70ch) — one frame
+     edge + one reading edge, nothing floating at a third width. Grid auto-fills the row. */
+  max-width: var(--container);
+  margin: 2.5rem auto 0;
+  border-top: 1px solid var(--line);
+  padding-top: 1.5rem;
+}
+.article-more h2 {
+  font-size: 1.3rem;
+  color: var(--ink);
+  margin: 0 0 1rem;
+}
+.article-strip-cta {
+  text-align: center;
+  margin-top: 1.5rem;
+}
+
+/* --- Events (public) --- */
+.event-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1.5rem;
+}
+.event-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--line-strong);
+  border-radius: 16px;
+  overflow: hidden;
+  background: #fff;
+  text-decoration: none;
+  color: inherit;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.event-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
+}
+.event-card-image {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+}
+.event-card-image-placeholder {
+  display: grid;
+  place-items: center;
+  /* Same fallback-tint convention as course cards — see .course-card-tint. */
+  background: var(--media-tint, hsl(210 34% 33%));
+}
+.event-card-image-placeholder span {
+  font-size: 3rem;
+  font-weight: 800;
+  color: rgb(255 255 255 / 0.35);
+}
+.event-card-body {
+  padding: 1rem 1.1rem 1.2rem;
+  display: grid;
+  gap: 0.4rem;
+}
+.event-card-mode {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: var(--primary-strong);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.event-card-body h3 {
+  margin: 0;
+  font-size: 1.15rem;
+}
+.event-card-when {
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin: 0;
+}
+.event-card-btn {
+  margin-top: 0.5rem;
+  align-self: start;
+}
+
+/* .event-detail carries NO max-width — page bodies fill var(--container) (the standing
+   full-width rule; the 760px reading measure was removed 2026-07-24, as on courses). */
+.event-detail-image {
+  width: 100%;
+  max-height: 360px;
+  object-fit: cover;
+  border-radius: 16px;
+  margin: 0.5rem 0 1rem;
+}
+.event-detail-meta {
+  color: var(--muted);
+  line-height: 1.5;
+}
+.event-detail-desc {
+  white-space: pre-line;
+  line-height: 1.7;
+  font-size: 1.05rem;
+}
+.event-tags {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  margin: 0.25rem 0 0.75rem;
+}
+.event-tag {
+  font-size: 0.75rem;
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+}
+.event-schedule {
+  margin: 1.5rem 0;
+}
+.event-schedule h3 {
+  margin-bottom: 0.5rem;
+}
+.event-schedule ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.4rem;
+}
+.event-schedule li {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+}
+.event-schedule-time {
+  font-weight: 700;
+  min-width: 4rem;
+  color: var(--primary-strong);
+}
+.event-action {
+  margin-top: 1.5rem;
+}
+.event-register-card {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 1.25rem;
+  display: grid;
+  gap: 0.85rem;
+  background: var(--surface);
+  max-width: 460px;
+}
+.event-register-card h3 {
+  margin: 0;
+}
+.event-price-line {
+  color: var(--muted);
+  margin: 0;
+}
+
+/* Ticket-type picker (charity-site purchase widget) */
+.ticket-types {
+  display: grid;
+  gap: 0.6rem;
+}
+.ticket-type {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 0.85rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm, 12px);
+  background: var(--bg-tint);
+}
+.ticket-type.is-soldout {
+  opacity: 0.6;
+}
+.ticket-type .tt-main {
+  min-width: 0;
+}
+.ticket-type .tt-title {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+.ticket-type .tt-name {
+  font-weight: 600;
+}
+.ticket-type .tt-tier {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+}
+.ticket-type .tt-info {
+  width: 1.15rem;
+  height: 1.15rem;
+  line-height: 1;
+  border-radius: 50%;
+  border: 1px solid var(--primary-strong);
+  background: transparent;
+  color: var(--primary-strong);
+  font-size: 0.72rem;
+  font-style: italic;
+  font-weight: 700;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ticket-type .tt-info:hover {
+  background: var(--primary-strong);
+  color: #fff;
+}
+.ticket-type .tt-sub {
+  color: var(--muted);
+  font-size: 0.85rem;
+  margin-top: 0.1rem;
+}
+.ticket-type .tt-desc {
+  margin-top: 0.35rem;
+  padding: 0.5rem 0.6rem;
+  border-left: 3px solid var(--primary-strong);
+  background: var(--surface);
+  border-radius: var(--radius-sm, 6px);
+  font-size: 0.85rem;
+  color: var(--ink);
+}
+.ticket-type .tt-price {
+  margin-top: 0.2rem;
+  font-size: 0.9rem;
+  color: var(--ink);
+}
+.ticket-type .tt-soldout {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--danger);
+  white-space: nowrap;
+}
+.tt-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: none;
+}
+.tt-stepper button {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: 1px solid var(--line-strong);
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.tt-stepper button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.tt-stepper .tt-qty {
+  min-width: 1.4rem;
+  text-align: center;
+  font-weight: 600;
+}
+.ticket-order-summary {
+  display: grid;
+  gap: 0.35rem;
+  padding: 0.85rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm, 12px);
+  background: var(--bg-tint);
+}
+.ticket-order-summary .tos-line {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  font-size: 0.9rem;
+}
+.ticket-order-summary .tos-total {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-top: 0.4rem;
+  border-top: 1px solid var(--line);
+}
+
+/* Home-page events carousel */
+.events-carousel {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.carousel-slide {
+  position: relative;
+  flex: 1;
+  display: block;
+  border-radius: 18px;
+  overflow: hidden;
+  text-decoration: none;
+  color: #fff;
+  background: var(--primary-strong);
+}
+.carousel-image {
+  width: 100%;
+  height: 340px;
+  object-fit: cover;
+  display: block;
+  filter: brightness(0.72);
+}
+.carousel-image-placeholder {
+  display: grid;
+  place-items: center;
+  height: 340px;
+  /* Same fallback-tint convention as course/event cards. */
+  background: var(--media-tint, hsl(210 34% 33%));
+  filter: none;
+}
+.carousel-image-placeholder span {
+  font-size: 5rem;
+  font-weight: 800;
+  color: rgb(255 255 255 / 0.35);
+}
+.carousel-caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 1.5rem 1.75rem;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
+}
+.carousel-caption h3 {
+  margin: 0 0 0.25rem;
+  font-size: 1.6rem;
+}
+.carousel-caption p {
+  margin: 0 0 0.85rem;
+  opacity: 0.92;
+}
+.carousel-arrow {
+  flex: none;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  border: 1px solid var(--line-strong);
+  background: var(--surface);
+  font-size: 1.4rem;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--ink);
+}
+.carousel-arrow:hover {
+  background: var(--primary-soft);
+}
+.carousel-dots {
+  display: flex;
+  justify-content: center;
+  gap: 0.4rem;
+  margin-top: 0.85rem;
+}
+.carousel-dot {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  border: 0;
+  background: var(--line-strong);
+  cursor: pointer;
+  padding: 0;
+}
+.carousel-dot.active {
+  background: var(--primary-strong);
+}
+
+@media (max-width: 640px) {
+  .carousel-image,
+  .carousel-image-placeholder {
+    height: 240px;
+  }
+}
+
+/* Home "what's on" strip (info events, above the hero) */
+.info-events-bar {
+  background: var(--primary-soft);
+  border-bottom: 1px solid var(--line-strong);
+}
+.info-events-inner {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.6rem 0;
+  flex-wrap: wrap;
+}
+.info-events-label {
+  font-weight: 700;
+  color: var(--primary-strong);
+  white-space: nowrap;
+  font-size: 0.9rem;
+}
+.info-events-list {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+.info-event-chip {
+  display: inline-flex;
+  flex-direction: column;
+  background: var(--surface);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius, 14px);
+  padding: 0.3rem 0.9rem;
+  text-decoration: none;
+  color: var(--ink);
+  line-height: 1.25;
+}
+.info-event-chip strong {
+  font-size: 0.88rem;
+}
+.info-event-chip span {
+  font-size: 0.72rem;
+  color: var(--muted);
+}
+.info-event-chip:hover {
+  border-color: var(--primary-strong);
+}
+
+/* ---- Members area (shell + sections; see components/members/) ----
+   Desktop: left rail + content. Small screens: the rail becomes a horizontal, scrollable pill
+   strip above the content — same registry, no separate mobile markup. */
+.members-head {
+  margin-bottom: 1.6rem;
+}
+.members-sub {
+  color: var(--muted);
+}
+.members-shell {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  gap: 2.2rem;
+  align-items: start;
+}
+.members-rail-wrap {
+  position: sticky;
+  top: 5.5rem;
+  align-self: start;
+}
+.members-rail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.members-rail-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.55rem 0.85rem;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  font: inherit;
+  color: var(--ink);
+  text-align: left;
+  cursor: pointer;
+  /* Labels WRAP inside the pill (never overflow it) — long names and translations both fit. */
+  line-height: 1.25;
+}
+.members-rail-item .members-rail-icon { flex: 0 0 auto; }
+.members-rail-item:hover {
+  background: var(--primary-soft);
+}
+.members-rail-item.is-active {
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+  font-weight: 600;
+}
+.members-rail-icon {
+  width: 1.3rem;
+  text-align: center;
+}
+.members-content {
+  min-width: 0;
+}
+.members-section-title {
+  margin: 0 0 0.4rem;
+}
+.members-panel {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 1.1rem 1.3rem;
+  margin-top: 1.1rem;
+  box-shadow: var(--shadow-sm);
+}
+.members-panel h3 {
+  margin: 0 0 0.6rem;
+  font-size: 1.02rem;
+}
+.members-line {
+  margin: 0.25rem 0;
+}
+.members-muted {
+  color: var(--muted);
+}
+.members-link {
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: var(--primary-strong);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+}
+.members-badge {
+  display: inline-block;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  padding: 0.12rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  margin-left: 0.45rem;
+}
+.members-badge.is-good {
+  color: var(--primary-strong);
+  border-color: var(--line-strong);
+}
+.members-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.members-table td {
+  padding: 0.45rem 0.6rem 0.45rem 0;
+  border-bottom: 1px solid var(--line);
+  vertical-align: top;
+}
+.members-table tr:last-child td {
+  border-bottom: 0;
+}
+.members-table tr.is-muted {
+  opacity: 0.55;
+}
+.member-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 0.9rem;
+  margin-top: 0.9rem;
+}
+.member-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 1.05rem 1.15rem;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  box-shadow: var(--shadow-sm);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.member-tile:hover {
+  border-color: var(--line-strong);
+}
+.member-tile-value {
+  font-size: 1.55rem;
+  font-weight: 700;
+  color: var(--primary-strong);
+}
+.member-tile-label {
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+.members-giftaid-hero {
+  border-color: var(--line-strong);
+}
+.members-leave-panel {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 1rem 1.2rem;
+  margin-top: 0.7rem;
+}
+.members-danger-btn {
+  border: 1px solid var(--danger);
+  color: var(--danger);
+  background: transparent;
+  border-radius: 999px;
+  padding: 0.45rem 1.1rem;
+  font: inherit;
+  cursor: pointer;
+}
+@media (max-width: 760px) {
+  .members-shell {
+    grid-template-columns: 1fr;
+    gap: 1.1rem;
+  }
+  .members-rail-wrap {
+    position: static;
+  }
+}
+
+/* Just above the burger point the full-size nav is tight — compact spacing spreads it cleanly
+   instead of letting anything drop. */
+@media (min-width: 961px) and (max-width: 1120px) {
+  .site-nav {
+    gap: 0.15rem;
+  }
+  .site-nav a {
+    padding-left: 0.65rem;
+    padding-right: 0.65rem;
+  }
+  .site-nav .nav-cta,
+  .site-nav .nav-p60-signin,
+  .site-nav .nav-account-toggle {
+    padding-left: 0.85rem;
+    padding-right: 0.85rem;
+  }
+  .brand-lockup strong {
+    font-size: 1.02rem;
+  }
+}
+
+/* ---- Mobile navigation: burger + collapsible primary nav ----
+   Desktop keeps the inline nav; under the breakpoint the nav collapses behind the burger into a
+   full-width panel that drops from the sticky header. Dropdown submenus (Services, Account) render
+   statically indented inside the panel. */
+.nav-burger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 44px;
+  height: 44px;
+  padding: 0 10px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--surface);
+  cursor: pointer;
+}
+.nav-burger span {
+  display: block;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--ink);
+  transition: transform 0.18s ease, opacity 0.18s ease;
+}
+.nav-burger.open span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+.nav-burger.open span:nth-child(2) {
+  opacity: 0;
+}
+.nav-burger.open span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+@media (max-width: 960px) {
+  .nav-burger {
+    display: flex;
+  }
+  .site-nav {
+    display: none;
+  }
+  .site-nav.open {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.4rem;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    padding: 0.7rem 1rem 1rem;
+    background: var(--surface);
+    border-bottom: 1px solid var(--line);
+    box-shadow: var(--shadow);
+  }
+  .site-header {
+    position: sticky; /* the panel anchors to the header */
+  }
+  .header-inner {
+    position: relative;
+  }
+  .site-nav.open a,
+  .site-nav.open .nav-account-toggle {
+    width: 100%;
+    justify-content: flex-start;
+    text-align: left;
+  }
+  .site-nav.open .nav-cta,
+  .site-nav.open .nav-p60-signin {
+    justify-content: center;
+    text-align: center;
+  }
+  /* The members-auth wrapper dissolves into the column so Donate / Sign-in / Account share the
+     panel's one even gap (a wrapper span would otherwise collapse the spacing). */
+  .site-nav.open [data-members-nav]:not([hidden]) {
+    display: contents;
+  }
+  .site-nav.open .nav-account-toggle {
+    width: 100%;
+    justify-content: center;
+  }
+  .site-nav.open .nav-dropdown {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .site-nav.open .nav-dropdown[hidden],
+  .site-nav.open [data-members-nav][hidden] {
+    display: none;
+  }
+  .site-nav.open .nav-dropdown-menu {
+    position: static;
+    box-shadow: none;
+    border: 0;
+    padding: 0 0 0 1.1rem;
+    min-width: 0;
+  }
+}
+
+/* ---- Members rail on mobile: a LEFT SLIDE-IN DRAWER behind a round user-icon button ----
+   The rail itself becomes the drawer (same items, same markup): fixed full-height panel translated
+   off-canvas, sliding in over a scrim. The trigger is a slim bar — round user-icon button + the
+   current section name. Desktop hides all of this and shows the rail inline. */
+.members-mobile-bar {
+  display: none;
+  align-items: center;
+  gap: 0.75rem;
+}
+.members-avatar-btn {
+  display: grid;
+  place-items: center;
+  width: 46px;
+  height: 46px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--primary-strong);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+}
+.members-avatar-btn .nav-account-icon {
+  width: 1.35rem;
+  height: 1.35rem;
+}
+.members-mobile-title {
+  font-weight: 700;
+  font-size: 1.05rem;
+}
+.members-scrim {
+  display: none;
+}
+.members-drawer-head {
+  display: none;
+}
+@media (max-width: 760px) {
+  .members-mobile-bar {
+    display: flex;
+  }
+  .members-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 70;
+    background: rgba(31, 42, 51, 0.4);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+  .members-scrim.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .members-rail {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 80;
+    width: min(78vw, 320px);
+    padding: 1.1rem 0.9rem;
+    gap: 0.35rem;
+    background: var(--surface);
+    border-right: 1px solid var(--line);
+    box-shadow: var(--shadow);
+    transform: translateX(-104%);
+    transition: transform 0.22s ease;
+    overflow-y: auto;
+  }
+  .members-rail.open {
+    transform: translateX(0);
+  }
+  .members-rail .members-rail-item {
+    padding: 0.8rem 0.95rem;
+    font-size: 1.02rem;
+  }
+  .members-drawer-head {
+    display: flex;
+    align-items: center;
+    gap: 0.7rem;
+    padding: 0.4rem 0.6rem 1rem;
+    margin-bottom: 0.5rem;
+    border-bottom: 1px solid var(--line);
+    color: var(--primary-strong);
+  }
+  .members-drawer-head .nav-account-icon {
+    width: 1.6rem;
+    height: 1.6rem;
+    flex: 0 0 auto;
+  }
+  .members-drawer-who {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+  .members-drawer-who strong {
+    color: var(--ink);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .members-drawer-who small {
+    color: var(--muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+/* ---- Articles front page: the newest article in full + a right sidebar (recent, topics,
+   view-all). Newspaper-style — the sidebar stacks below the article on small screens. ---- */
+.article-front {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 2.5rem;
+  align-items: start;
+}
+.article-front-main {
+  min-width: 0;
+}
+.article-front-title a {
+  color: inherit;
+  text-decoration: none;
+}
+.article-front-title a:hover {
+  text-decoration: underline;
+}
+.article-front-comments {
+  margin-top: 1rem;
+  font-weight: 600;
+}
+.article-front-side {
+  display: grid;
+  gap: 1.75rem;
+  position: sticky;
+  top: 90px;
+}
+.article-side-block {
+  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
+  border-radius: 14px;
+  padding: 1.1rem 1.2rem;
+  background: var(--surface, #fff);
+}
+.article-side-title {
+  margin: 0 0 0.75rem;
+  font-size: 0.8rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  opacity: 0.65;
+}
+.article-side-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.85rem;
+}
+.article-side-item {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 0.7rem;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+.article-side-item strong {
+  display: block;
+  font-size: 0.92rem;
+  line-height: 1.3;
+}
+.article-side-item:hover strong {
+  text-decoration: underline;
+}
+.article-side-thumb {
+  width: 64px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 8px;
+}
+.article-side-thumb--empty {
+  display: block;
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12));
+}
+.article-side-topics {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.4rem;
+}
+.article-side-topics a {
+  text-decoration: none;
+  color: inherit;
+}
+.article-side-topics a:hover {
+  text-decoration: underline;
+}
+.article-topic-count {
+  opacity: 0.55;
+  font-size: 0.85em;
+}
+.article-side-all {
+  justify-self: start;
+}
+@media (max-width: 900px) {
+  .article-front {
+    grid-template-columns: 1fr;
+  }
+  .article-front-side {
+    position: static;
+  }
+}
+
+/* ---- Consent banner + preference centre (platform-level, always on — compliance is
+   platform-owned). Fixed bottom layer; the preference centre grows out of the same layer. ---- */
+.consent-layer {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 200;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+.consent-banner,
+.consent-prefs {
+  pointer-events: auto;
+  background: var(--surface, #fff);
+  color: inherit;
+  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
+  border-radius: 16px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
+  padding: 1.1rem 1.3rem;
+  max-width: 860px;
+  width: 100%;
+}
+.consent-text {
+  margin: 0 0 0.85rem;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+.consent-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  align-items: center;
+}
+.consent-choose,
+.footer-linklike,
+.linklike {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+  font: inherit;
+}
+.consent-prefs-title {
+  margin: 0 0 0.75rem;
+  font-size: 1.15rem;
+}
+.consent-category {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 1rem;
+  align-items: center;
+  padding: 0.7rem 0;
+  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
+}
+.consent-category p {
+  margin: 0.15rem 0 0;
+  font-size: 0.85rem;
+  opacity: 0.75;
+}
+.consent-category input[type='checkbox'] {
+  width: 1.35rem;
+  height: 1.35rem;
+  accent-color: var(--accent, #0a7d5c);
+}
+.consent-always {
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0.6;
+}
+.consent-policy-note {
+  font-size: 0.85rem;
+  margin: 0.6rem 0 0.9rem;
+}
+.footer-legal-links {
+  white-space: nowrap;
+}
+@media (max-width: 640px) {
+  .consent-layer {
+    padding: 0;
+  }
+  .consent-banner,
+  .consent-prefs {
+    border-radius: 16px 16px 0 0;
+    max-height: 85vh;
+    overflow: auto;
+  }
+}
+
+/* ---- Legal pages (cookie policy) ---- */
+.legal-page h2 {
+  margin-top: 2.2rem;
+}
+.legal-table-wrap {
+  overflow-x: auto;
+}
+.legal-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  margin: 0.8rem 0 1rem;
+}
+.legal-table th,
+.legal-table td {
+  text-align: start;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
+  vertical-align: top;
+}
+.legal-table th {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+/* ---- Click-to-load embed placeholder (cookie-free stand-in for video iframes) ---- */
+.embed-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 0.5rem;
+  margin: 0.75rem 0;
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.55));
+  color: #fff;
+  text-align: center;
+  padding: 1rem;
+}
+.embed-play {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.92);
+  color: #111;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+.embed-play:hover {
+  transform: scale(1.06);
+}
+.embed-note {
+  font-size: 0.85rem;
+  max-width: 40ch;
+  opacity: 0.9;
+}
+.embed-note a {
+  color: inherit;
+}
+
+/* ---- Marketing opt-in checkbox (the explicit reg-22 consent — deliberately quiet, never
+   pre-ticked) + the members contact toggle. ---- */
+.marketing-optin {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.55rem;
+  margin-top: 0.6rem;
+  font-size: 0.85rem;
+  opacity: 0.9;
+  cursor: pointer;
+}
+.marketing-optin input[type='checkbox'] {
+  margin-top: 0.15rem;
+  width: 1.05rem;
+  height: 1.05rem;
+  flex: none;
+  accent-color: var(--accent, #0a7d5c);
+}
+.members-contact-toggle {
+  font-size: 1rem;
+  margin: 1rem 0;
+}
+.members-contact-note {
+  font-size: 0.85rem;
+}
+
+/* ---- Address lookup (Phase-3): typeahead above manual fields; suggestions dropdown. ---- */
+.addr-lookup {
+  position: relative;
+  margin-bottom: 0.35rem;
+}
+.addr-suggestions {
+  position: absolute;
+  z-index: 30;
+  left: 0;
+  right: 0;
+  margin: 0.15rem 0 0;
+  padding: 0.25rem;
+  list-style: none;
+  background: var(--surface, #fff);
+  border: 1px solid rgba(0, 0, 0, 0.14);
+  border-radius: 10px;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
+  max-height: 260px;
+  overflow-y: auto;
+}
+.addr-suggestions li button {
+  display: block;
+  width: 100%;
+  text-align: start;
+  padding: 0.5rem 0.65rem;
+  border: 0;
+  background: none;
+  border-radius: 7px;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+.addr-suggestions li button:hover,
+.addr-suggestions li button:focus {
+  background: rgba(0, 0, 0, 0.06);
+}
+.addr-manual-hint {
+  margin: 0.3rem 0 0;
+  font-size: 0.78rem;
+  opacity: 0.65;
+}
+
+/* ---- Cross-document view transitions (MPA soft-feel) ----
+   Every nav click is a full document navigation (Astro MPA — no client router). This asks the
+   browser to HOLD the old frame and cross-fade to the new page once it's ready (Chrome 126+,
+   Safari 18+; others keep the instant swap): no blank frame between pages, and unchanged chrome
+   (masthead/nav) cross-fades between identical pixels — i.e. visually persists. True soft-nav
+   with persistent island state would be Astro's ClientRouter — a later, bigger step. */
+@view-transition {
+  navigation: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
+/* The article page's back-link needs air before the chips/title (detail page only — the front
+   page's grid must keep its own alignment). */
+.services-back + .article-article {
+  margin-top: 1.75rem;
+}
+
+/* ---- Household (members area, C0): dependent cards + the consent-first add-a-child form ---- */
+.household-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 1rem 0;
+}
+.household-dependent {
+  border: 1px solid var(--border, #e3e6ea);
+  border-radius: 0.6rem;
+  padding: 0.9rem 1rem;
+}
+.household-dependent-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+.household-dependent-actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.35rem;
+  flex-wrap: wrap;
+}
+.household-danger {
+  color: #b3402a;
+}
+.household-invite-form,
+.household-add-form {
+  margin-top: 0.75rem;
+  border-top: 1px dashed var(--border, #e3e6ea);
+  padding-top: 0.75rem;
+}
+.household-invite-form input[type='email'] {
+  display: block;
+  width: min(22rem, 100%);
+  margin: 0.5rem 0;
+  padding: 0.5rem 0.65rem;
+  border: 1px solid var(--border, #ccd2d8);
+  border-radius: 0.4rem;
+}
+.household-invite-form .nav-cta {
+  margin-right: 0.75rem;
+}
+.household-add-form {
+  border: 1px solid var(--border, #e3e6ea);
+  border-radius: 0.6rem;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+.household-add-fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+.household-add-fields label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  font-size: 0.9rem;
+}
+.household-add-fields input {
+  padding: 0.5rem 0.65rem;
+  border: 1px solid var(--border, #ccd2d8);
+  border-radius: 0.4rem;
+}
+.household-consent {
+  margin: 0.75rem 0;
+}
+.household-add-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.household-add-btn {
+  margin-top: 1rem;
+}
+
+/* ---- Courses (Phase 10 C1.6): catalogue, enrol journey, members "My courses" ---- */
+.course-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1.25rem;
+}
+.course-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.course-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
+}
+.course-card img {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+}
+/* Imageless courses: the media block stays (same 16:9 box) with a per-course tint + monogram, so
+   mixed grids keep one card anatomy. The tint arrives as a CSS VARIABLE, not an inline background,
+   so a template whose palette collides with the green→indigo band can override this rule and
+   restyle the fallback its own way (the templates-conform contract). */
+/* Admin-entered prose can contain unbroken tokens (URLs, pasted refs) — never let one push a
+   container wide. Applies to every surface that renders tenant summaries/bodies. */
+.event-detail-desc,
+.event-about,
+.course-description,
+.service-body,
+.event-card-body,
+.course-card-body {
+  overflow-wrap: anywhere;
+}
+
+.course-card-tint {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  display: grid;
+  place-items: center;
+  background: var(--media-tint, hsl(210 34% 33%));
+}
+.course-card-tint span {
+  font-size: 3rem;
+  font-weight: 800;
+  color: rgb(255 255 255 / 0.35);
+}
+.course-card-body {
+  padding: 1rem 1.1rem 1.1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.course-card-body h3 {
+  margin: 0;
+}
+.course-card-meta,
+.course-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 1rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin: 0;
+}
+.course-card-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin: 0.35rem 0 0;
+}
+.course-card-price {
+  font-weight: 700;
+}
+.course-card-soldout {
+  color: var(--danger);
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.course-card-cta {
+  color: var(--primary);
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.course-detail .course-back {
+  display: inline-block;
+  margin-bottom: 0.75rem;
+}
+.course-image {
+  max-width: 100%;
+  border-radius: 14px;
+  margin: 0.75rem 0;
+}
+.course-billing-badge {
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+  border-radius: 999px;
+  padding: 0.1rem 0.6rem;
+  font-weight: 600;
+}
+.course-soldout-note {
+  background: var(--bg-tint);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.8rem 1rem;
+  color: var(--muted);
+}
+.course-enrol-form,
+.course-enrol-pay,
+.course-enrol-done,
+.course-enrol-gate {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 1.25rem;
+  margin-top: 1rem;
+  max-width: 40rem;
+}
+.course-fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0 0 1.1rem;
+}
+.course-fieldset legend {
+  font-weight: 700;
+  margin-bottom: 0.6rem;
+  padding: 0;
+}
+.course-variant-list,
+.course-subject-list,
+.course-plan-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.course-variant-card,
+.course-subject-card,
+.course-plan-card {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.65rem 0.85rem;
+  cursor: pointer;
+  background: var(--surface);
+}
+.course-variant-card.is-selected,
+.course-plan-card.is-selected {
+  border-color: var(--line-strong);
+  background: var(--primary-soft);
+}
+.course-variant-card.is-soldout,
+.course-subject-card.is-enrolled {
+  opacity: 0.6;
+  cursor: default;
+}
+.course-variant-name,
+.course-subject-name {
+  font-weight: 600;
+}
+.course-variant-note {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+.course-variant-price,
+.course-plan-price {
+  margin-left: auto;
+  font-weight: 700;
+}
+.course-variant-spots {
+  width: 100%;
+  color: var(--accent-strong);
+  font-size: 0.85rem;
+}
+.course-subject-age {
+  color: var(--muted);
+  font-weight: 400;
+  margin-left: 0.35rem;
+  font-size: 0.9rem;
+}
+.course-subject-badge {
+  margin-left: auto;
+  background: var(--bg-tint);
+  border-radius: 999px;
+  padding: 0.1rem 0.6rem;
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+.course-subject-add {
+  border: 1px dashed var(--line-strong);
+  border-radius: 10px;
+  padding: 0.65rem 0.85rem;
+  background: none;
+  color: var(--primary-strong);
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+.course-subject-add:hover {
+  background: var(--primary-soft);
+}
+.course-enrol-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  border-top: 1px solid var(--line);
+  padding-top: 1rem;
+}
+.course-enrol-total {
+  font-weight: 700;
+}
+.course-pay-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 1rem;
+  align-items: baseline;
+  margin-bottom: 0.75rem;
+}
+.course-hold-timer {
+  margin-left: auto;
+  background: var(--bg-tint);
+  border-radius: 999px;
+  padding: 0.15rem 0.7rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+.course-commit-note {
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin: 0.5rem 0;
+}
+.course-card-host {
+  margin: 0.75rem 0;
+  min-height: 1px;
+}
+.course-pay-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 0.75rem;
+}
+.course-done-list {
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.member-courses {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.member-course-card {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 1rem 1.1rem;
+  background: var(--surface);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.member-course-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+.member-course-sub {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+.member-course-status {
+  border-radius: 999px;
+  padding: 0.15rem 0.7rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+  white-space: nowrap;
+}
+.member-course-status.status-past_due {
+  background: rgba(243, 177, 59, 0.18);
+  color: #8a6100;
+}
+.member-course-status.status-cancelled,
+.member-course-status.status-refunded {
+  background: var(--bg-tint);
+  color: var(--muted);
+}
+.member-course-venue {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.92rem;
+}
+.member-course-notes {
+  color: var(--muted);
+  white-space: pre-line;
+}
+/* The members-area PILL BUTTON (user, 2026-07-22) — the one action idiom across member surfaces
+   (directions, household invite/remove, …): bordered pill, hover fill, danger modifier. */
+.member-pill-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.42rem 0.85rem;
+  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-radius: 999px;
+  background: none;
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.92rem;
+  color: inherit;
+  cursor: pointer;
+}
+.member-pill-btn:hover:not(:disabled) {
+  border-color: currentColor;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+.member-pill-btn:disabled { opacity: 0.5; cursor: default; }
+.member-pill-btn-danger { color: #c4462e; }
+
+/* Get directions = a proper pill button (user, 2026-07-22) — the resource-chip idiom, so it
+   reads as an action rather than text among the venue lines. */
+.member-course-directions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  align-self: flex-start;
+  margin-top: 0.35rem;
+  padding: 0.42rem 0.85rem;
+  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 0.92rem;
+  text-decoration: none;
+  color: inherit;
+}
+.member-course-directions:hover {
+  border-color: currentColor;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  text-decoration: none;
+}
+/* The feedback-loop accordion (2026-07-21): latest note + attendance history — renders only when
+   a course runner actually recorded something. */
+.member-course-feedback {
+  margin-top: 0.6rem;
+  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+  padding-top: 0.5rem;
+}
+.member-course-feedback-toggle {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  font-weight: 600;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.9;
+}
+.member-course-feedback-toggle:hover { opacity: 1; text-decoration: underline; }
+.member-course-feedback-body { margin-top: 0.6rem; display: grid; gap: 0.75rem; }
+.member-course-feedback-note {
+  border-left: 3px solid currentColor;
+  padding: 0.35rem 0 0.35rem 0.75rem;
+  opacity: 0.95;
+}
+.member-course-feedback-note p { margin: 0.25rem 0 0; }
+.member-course-feedback-note-head {
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  opacity: 0.7;
+}
+/* The report card (C1.5): headline block + the glanceable progress chip. */
+.member-course-report {
+  border-left: 3px solid currentColor;
+  padding: 0.35rem 0 0.35rem 0.75rem;
+}
+.member-course-report p { margin: 0.35rem 0 0; white-space: pre-line; }
+.member-course-progress {
+  display: inline-block;
+  margin-left: 0.6rem;
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+.member-course-progress.is-excelling { background: rgba(46, 160, 67, 0.18); color: #4bc26a; }
+.member-course-progress.is-on_track { background: color-mix(in srgb, currentColor 12%, transparent); }
+.member-course-progress.is-needs_support { background: rgba(216, 148, 42, 0.18); color: #e0a63f; }
+
+.member-course-attendance ul { list-style: none; margin: 0.35rem 0 0; padding: 0; }
+.member-course-attendance li {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.2rem 0;
+  font-size: 0.95rem;
+  border-bottom: 1px dashed color-mix(in srgb, currentColor 12%, transparent);
+}
+.member-course-attendance li:last-child { border-bottom: none; }
+.member-course-attendance li.is-absent { opacity: 0.7; }
+
+/* C1.9 breaks (informational) + C1.8 course materials (presigned downloads). */
+.member-course-breaks {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  margin-top: 0.5rem;
+  font-size: 0.95rem;
+  opacity: 0.85;
+}
+.member-course-materials { margin-top: 0.6rem; }
+.member-course-materials-head {
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  opacity: 0.7;
+}
+/* Download CHIPS (user, 2026-07-22): the whole pill is the button — unmistakably tappable. */
+.member-resource-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.45rem; }
+.member-resource-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.45rem 0.8rem;
+  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  color: inherit;
+}
+.member-resource-chip:hover {
+  border-color: currentColor;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+.member-resource-chip-size { font-weight: 400; opacity: 0.65; font-size: 0.85rem; }
+
+/* "Billing & payment methods" (user, 2026-07-22): the billing half — one line per ongoing
+   commitment (a family subscription = ONE line: total + who it covers). */
+.members-subsection-title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  margin: 1.1rem 0 0.35rem;
+}
+.member-billing-methods-title { margin-top: 1.8rem; }
+.member-billing-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.member-billing-line {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.65rem 0.85rem;
+  background: var(--surface);
+}
+.member-billing-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.member-billing-amount { font-weight: 700; white-space: nowrap; }
+.member-billing-detail { font-size: 0.9rem; margin-top: 0.15rem; }
+.member-billing-pastdue { color: var(--accent, #d33); font-weight: 600; }
+
+/* The course TITLE BAR (user, 2026-07-22): a distinct full-width band at the top of the card —
+   bleeds to the card edges via negative margins, slightly larger type. */
+.member-course-title-bar {
+  margin: -1rem -1.1rem 0.35rem;
+  padding: 0.75rem 1.1rem;
+  background: color-mix(in srgb, currentColor 7%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+  border-radius: 12px 12px 0 0;
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+/* Grouped course card (2026-07-22): the course owns venue/breaks/materials once; each PERSON is
+   an ACCORDION row — a full-width, obviously-tappable bar (chevron + hover), default collapsed,
+   one open at a time. */
+.member-course-people {
+  margin-top: 0.85rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.member-course-person {
+  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+  border-radius: 0.6rem;
+  overflow: hidden;
+}
+.member-course-person.is-open {
+  border-color: color-mix(in srgb, currentColor 32%, transparent);
+}
+.member-course-person-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.65rem 0.85rem;
+  background: none;
+  border: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.member-course-person-toggle:hover {
+  background: color-mix(in srgb, currentColor 6%, transparent);
+}
+/* The chevron sits on the RIGHT and reads as a control, not a bullet (user, 2026-07-22). */
+.member-course-person-chevron {
+  flex: 0 0 auto;
+  opacity: 0.65;
+  font-size: 1.35rem;
+  line-height: 1;
+  font-weight: 700;
+}
+.member-course-person-toggle:hover .member-course-person-chevron { opacity: 1; }
+.member-course-person-line { flex: 1 1 auto; min-width: 0; }
+.member-course-person-body {
+  padding: 0.15rem 0.85rem 0.8rem 0.85rem;
+  display: grid;
+  gap: 0.5rem;
+}
+.member-course-past { margin-top: 0.75rem; }
+.member-course-past-toggle {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  font-size: 0.95rem;
+  color: inherit;
+  opacity: 0.75;
+  cursor: pointer;
+}
+.member-course-past-toggle:hover { opacity: 1; text-decoration: underline; }
+.member-course-past-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
+.member-course-past-list li {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.35rem 0;
+  font-size: 0.95rem;
+  opacity: 0.8;
+  border-bottom: 1px dashed color-mix(in srgb, currentColor 10%, transparent);
+}
+.member-course-past-list li:last-child { border-bottom: none; }
+
+.member-course-cancel-link {
+  align-self: flex-start;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--muted);
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.member-course-cancel-link:hover {
+  color: var(--danger);
+}
+.course-cancel-panel {
+  border: 1px solid var(--line-strong);
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+  background: var(--bg-tint);
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.course-cancel-recalc {
+  font-weight: 600;
+  margin: 0;
+}
+.course-cancel-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.4rem;
+  flex-wrap: wrap;
+}
+
+/* Courses picker refinement (2026-07-19): tap-to-select cards — the native checkbox/radio is
+   visually hidden (kept in the DOM for keyboard + screen-reader semantics); selection reads as
+   the highlighted card. The footer is an itemised order summary instead of a one-line count. */
+.course-variant-card,
+.course-subject-card,
+.course-plan-card {
+  position: relative;
+  user-select: none;
+}
+.course-variant-card input,
+.course-subject-card input,
+.course-plan-card input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  pointer-events: none;
+}
+.course-variant-card.is-selected,
+.course-subject-card.is-selected,
+.course-plan-card.is-selected {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+  box-shadow: inset 0 0 0 1px var(--primary);
+}
+.course-variant-card:focus-within,
+.course-subject-card:focus-within,
+.course-plan-card:focus-within {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+.course-summary {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.course-summary-course {
+  font-weight: 700;
+}
+.course-summary-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  color: var(--muted);
+}
+.course-summary-total {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  border-top: 1px solid var(--line);
+  padding-top: 0.5rem;
+  margin-top: 0.25rem;
+  font-weight: 700;
+}
+.course-enrol-footer {
+  flex-direction: column;
+  align-items: stretch;
+}
+.course-enrol-hint {
+  color: var(--muted);
+}
+.course-enrol-continue {
+  align-self: flex-end;
+}
+.course-pay-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
+  margin-bottom: 0.6rem;
+}
+
+/* Courses: schedule strip + family-payment join (2026-07-19). People cards get more air; the
+   pay-schedule choice sits at the TOP as pills (hidden when only a one-off exists). */
+.course-subject-list {
+  gap: 0.75rem;
+}
+.course-schedule-strip {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+.course-schedule-strip .course-plan-card {
+  flex: 1 1 0;
+  min-width: 8.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+}
+.course-schedule-strip .course-plan-price {
+  margin-left: 0;
+}
+.course-plan-name {
+  font-weight: 700;
+}
+.course-plan-per {
+  color: var(--muted);
+  font-weight: 400;
+  font-size: 0.8rem;
+}
+.course-plan-join {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--primary-strong);
+}
+.course-summary-join {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+.course-summary-vat {
+  color: var(--muted);
+  font-size: 0.8rem;
+  margin-top: 0.35rem;
+}
+.course-join-note {
+  font-weight: 600;
+}
+
+/* ---- Prayer timetable page (worship WP5) — theme-neutral: borders/highlights derive from
+   currentColor so every template's palette carries through. ---- */
+.pt-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+.pt-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  white-space: nowrap;
+}
+.pt-month {
+  font-weight: 700;
+}
+.pt-note {
+  opacity: 0.75;
+  margin: 0 0 1rem;
+}
+.pt-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.pt-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.92rem;
+  min-width: 720px;
+}
+.pt-table th,
+.pt-table td {
+  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+  padding: 0.35rem 0.55rem;
+  text-align: center;
+}
+.pt-table thead th {
+  background: color-mix(in srgb, currentColor 7%, transparent);
+}
+.pt-table .pt-sub {
+  font-size: 0.78rem;
+  font-weight: 600;
+  opacity: 0.75;
+}
+.pt-date-col {
+  text-align: left;
+  white-space: nowrap;
+}
+.pt-day {
+  font-weight: 600;
+}
+.pt-jumah {
+  display: block;
+  font-size: 0.78rem;
+  opacity: 0.8;
+}
+.pt-hijri-col {
+  white-space: nowrap;
+  font-size: 0.85rem;
+}
+.pt-jamaat {
+  font-weight: 600;
+}
+.pt-today {
+  background: color-mix(in srgb, currentColor 9%, transparent);
+}
+.pt-today .pt-day::after {
+  content: ' · today';
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+/* Small screens: the month table becomes stacked day cards — no horizontal scrolling. */
+.pt-cards {
+  display: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+@media (max-width: 860px) {
+  .pt-scroll {
+    display: none;
+  }
+  .pt-cards {
+    display: grid;
+    gap: 0.55rem;
+  }
+  .pt-card {
+    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+    border-radius: 10px;
+    padding: 0.55rem 0.7rem;
+  }
+  .pt-card-head {
+    display: flex;
+    align-items: baseline;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+    margin-bottom: 0.35rem;
+  }
+  .pt-card-head .pt-jumah {
+    display: inline;
+    margin-left: auto;
+  }
+  .pt-card-hijri {
+    font-size: 0.8rem;
+    opacity: 0.75;
+  }
+  .pt-card-times {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
+    gap: 0.35rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .pt-card-times li {
+    display: flex;
+    flex-direction: column;
+    gap: 0.05rem;
+    text-align: center;
+    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+    border-radius: 8px;
+    padding: 0.25rem 0.15rem;
+  }
+  .pt-card-name {
+    font-size: 0.62rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    opacity: 0.7;
+  }
+  .pt-card-main {
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+  .pt-card-sub {
+    font-size: 0.66rem;
+    opacity: 0.7;
+  }
+}
+
+/* Appeal deep link on the donate page's cause cards. */
+.cause-option { cursor: pointer; }
+.cause-option-more {
+  display: inline-block;
+  margin-top: 0.5rem;
+  font-weight: 600;
+  font-size: 0.92rem;
+}
+
+/* ── People / team cards — desktop grid, single column on phones ───────────────────────────── */
+.people-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 1.2rem;
+}
+.people-card { text-align: center; }
+.people-photo {
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin: 0 auto 0.8rem;
+  display: block;
+}
+.people-name { margin: 0; }
+.people-role {
+  margin: 0.15rem 0 0;
+  font-size: 0.92rem;
+  opacity: 0.75;
+}
+.people-statement {
+  margin: 0.7rem 0 0;
+  font-style: italic;
+  font-size: 0.95rem;
+  opacity: 0.85;
+}
+@media (max-width: 640px) {
+  .people-grid { grid-template-columns: 1fr; }
+}
+
+/* ── Impact map island (WP4) — baseline look; templates restyle via the styling API. Colours ride
+   currentColor and the theme's tokens so the island wears the template's clothes. */
+.impact-map { margin: 24px 0; }
+.impact-map-head h2 { margin: 0 0 6px; }
+.impact-map-intro { margin: 0 0 14px; opacity: 0.85; }
+.impact-map-canvas { position: relative; min-height: 340px; border-radius: 14px; overflow: hidden;
+  background: linear-gradient(160deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.55)), currentColor; }
+.impact-map-pin { position: absolute; width: 16px; height: 16px; border-radius: 50%;
+  transform: translate(-50%, -50%); border: 2px solid #fff; background: currentColor;
+  cursor: pointer; padding: 0; transition: transform 120ms ease; }
+.impact-map-pin:hover, .impact-map-pin:focus-visible { transform: translate(-50%, -50%) scale(1.35); }
+.impact-map-pin--active { box-shadow: 0 0 0 5px rgb(255 255 255 / 28%); }
+.impact-map-card { margin-top: 14px; border: 1px solid rgb(127 127 127 / 30%); border-radius: 12px;
+  padding: 16px 18px; max-width: 34rem; }
+.impact-map-card-kind { display: inline-block; font-size: 11px; font-weight: 700;
+  letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; margin-bottom: 4px; }
+.impact-map-card-title { margin: 0 0 6px; }
+.impact-map-card-summary { margin: 0 0 10px; opacity: 0.9; }
+.impact-map-card-cta { font-weight: 600; }
+.impact-map-empty { opacity: 0.7; }