/* ============================================================
   Mangala Vihara — "Plaster & Pigment" design system
   The website is the lime-plastered wall the murals hang on.
   Every colour is sampled from Semage's 1994 shrine-hall murals.
   ============================================================ */

:root {
  color-scheme: light;            /* light-only design; opt out of browser auto-dark inversion */
  --plaster:      #F5EFE3;
  --plaster-deep: #EDE3D0;
  --plaster-94:   rgba(245, 239, 227, 0.94);
  --ink:          #2B2118;
  --ink-soft:     #4A4032;  /* darkened from #5C5245 for senior readability (2026-07-18 review) */
  --mural-red:    #9E3320;  /* display / hero band only */
  --mural-red-dk: #8A2B1A;  /* primary CTA resting fill — clears 7:1 */
  --saffron:      #C2651F;  /* motif strokes, 28px+ accents */
  --saffron-ink:  #A04E12;  /* text-safe saffron — eyebrows */
  --ochre-gold:   #C99A3C;  /* frames & rules ONLY — never text, never focus */
  --leaf:         #2F5233;
  --river:        #8A2B1A;  /* links, kickers, focus rings — retinted from #24586E river-blue to maroon (2026-07-18 review) */

  --serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:   "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* the hero mural's natural aspect. Every carousel image is bound to this so their
     heights track together at ANY viewport - never hard-code a pixel height. */
  --hero-media-ratio: 2000 / 1019;
  --max: 1240px;
  --measure: 62ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(194, 101, 31, 0.22); }

/* Focus — river ring on plaster (6.8:1). Ochre-gold demoted to frames only. */
:focus-visible {
  outline: 2px solid var(--river);
  outline-offset: 3px;
  border-radius: 2px;
}
/* on red / dark surfaces the ring switches to plaster so it stays visible */
.on-dark :focus-visible,
.btn-red:focus-visible { outline-color: var(--plaster); }

img { max-width: 100%; display: block; }

a { color: var(--river); }

/* Fine-print / sub-labels — enlarged & strengthened for older readers (2026-07-18 review) */
small { font-size: 0.9em; font-weight: 500; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
p { text-wrap: pretty; }
/* Pāli terms carry lang="pi-Latn" for screen readers but are NOT italicised (Keon, 2026-07-24). */
em[lang="pi-Latn"] { font-style: normal; }

/* ---- layout ---- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
main { display: block; }
section { padding: clamp(64px, 9vw, 120px) 0; }
/* Content sections carry the .wrap class, whose `padding: 0 …` zeroes the section's vertical
   rhythm — restore breathing room ABOVE each one (top only, so adjacent sections don't double-space). */
section.wrap:not(.page-hero) { padding-top: clamp(56px, 6vw, 88px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--mural-red-dk); color: var(--plaster);
  font-family: var(--sans); font-weight: 600;
  padding: 14px 20px; text-decoration: none;
}
.skip:focus { left: 16px; top: 16px; }

/* ---- micro-label voices (three, never mixed) ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--saffron-ink);
}
.eyebrow svg { width: 13px; height: 16px; color: var(--saffron); flex: none; }
.kicker {
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  color: var(--river); margin-bottom: 12px;
}
.datalabel {
  font-family: var(--sans); font-size: 16px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}

/* ---- motif dividers ---- */
.liyavela { color: var(--ochre-gold); overflow: hidden; }
.liyavela svg { width: 100%; height: 22px; display: block; }
.threshold { display: flex; justify-content: center; color: var(--ochre-gold); }
.threshold svg { width: 96px; height: 40px; }
/* the homepage carousel-cap arch already separates hero from content, so the section after it needs far less top padding than the global section rhythm (2026-07-19 review) */
.hero-carousel + .threshold + section.wrap { padding-top: clamp(8px, 2.4vw, 32px); }

/* section head: eyebrow + running liya-vela vine (replaces the old drumbeat) */
.reg-head { display: flex; align-items: baseline; gap: 28px; margin-bottom: 40px; flex-wrap: wrap; }
.reg-head .liyavela { flex: 1; min-width: 80px; }
.reg-head h2:not(.eyebrow) { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; font-variation-settings: "opsz" 60; }
h2.eyebrow { font-weight: 600; } /* section-title eyebrows are real headings but keep the small label look */
.reg-head .more {
  font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--river);
  text-decoration: underline; text-underline-offset: 5px; white-space: nowrap;
}

/* ---- buttons & links ---- */
.btn-red, .btn-quiet, .link-river {
  font-family: var(--sans); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 47px;
}
.btn-red {
  font-size: 17px; letter-spacing: 0.01em;
  color: var(--plaster); background: var(--mural-red-dk);
  text-decoration: none; padding: 13px 32px; border-radius: 2px;
  border: 1.5px solid var(--mural-red-dk); cursor: pointer;
  transition: background 0.15s ease;
}
.btn-red:hover { background: #741f12; }
.btn-quiet {
  font-size: 16px; color: var(--ink); background: transparent;
  text-decoration: none; border: 1.5px solid var(--ink);
  padding: 11px 22px; border-radius: 2px; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease;
}
.btn-quiet:hover { background: var(--plaster-deep); }
.link-river {
  font-family: var(--serif); font-size: 18px; color: var(--river);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  min-height: 44px; padding: 6px 0;
}
.link-river:hover { color: var(--ink); }

/* ---- containment: TONAL card (default), FRAMED (one per page) ---- */
.card {
  background: var(--plaster-deep); border: 0; padding: 30px;
  box-shadow: 0 1px 2px rgba(43, 33, 24, 0.18);
  display: flex; flex-direction: column;
}
.card h3 { font-family: var(--display); font-size: 25px; line-height: 1.15; font-variation-settings: "opsz" 40; margin-bottom: 8px; }
.card p { font-size: 16px; color: var(--ink); }

.framed {
  border: 1px solid var(--ochre-gold);
  outline: 1px solid var(--ochre-gold);
  outline-offset: 6px;
  background: var(--plaster-deep);
}

/* ---- museum wall-label / plate caption (graft) ---- */
.platecap { padding-top: 12px; }
.platecap .rule { color: var(--ochre-gold); height: 14px; overflow: hidden; margin-bottom: 8px; }
.platecap .rule svg { width: 100%; height: 14px; display: block; }
.platecap .meta {
  font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
}
.platecap .plateno { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--saffron-ink); }
.platecap .title { font-style: italic; }
.platecap .credit { margin-left: auto; }
@media (max-width: 560px) { .platecap .meta { column-gap: 10px; } .platecap .credit { margin-left: 0; flex-basis: 100%; margin-top: 1px; } }
.art-label {
  background: var(--plaster-94); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  padding: 10px 16px; max-width: 360px;
}
.art-label strong { font-weight: 600; } .art-label em { font-style: italic; }

/* ---- schedule table (hairlines legal in true tabular data) ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.schedule-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.schedule-table caption { text-align: left; }
.schedule-table th, .schedule-table td {
  text-align: left; padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--plaster-deep); vertical-align: baseline;
}
.schedule-table thead th {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--saffron-ink);
  border-bottom: 1.5px solid var(--ochre-gold);
}
.schedule-table td.time { font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.schedule-table td.event { font-weight: 600; }

/* ---- breadcrumbs ---- */
.crumbs { font-family: var(--sans); font-size: 15px; color: var(--ink-soft); padding-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--river); text-decoration: underline; }
.crumbs .sep { color: var(--ink-soft); }
.crumbs [aria-current] { color: var(--ink); }

/* "coming soon" — dead-link policy: never href="#" */
.soon {
  color: var(--ink-soft); cursor: default;
  border-bottom: 1px dotted var(--ink-soft);
}
.soon::after { content: " · soon"; font-family: var(--sans); font-size: 0.7em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--saffron-ink); }
/* a coming-soon item that also carries .more must not read as a live river link */
.reg-head .more.soon { color: var(--ink-soft); text-decoration: none; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header { padding-top: 22px; padding-bottom: 18px; position: relative; z-index: 50; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
/* brand may shrink (its tagline re-wraps); the nav/Menu button must never be squashed off-screen */
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand > span { min-width: 0; }
.brand > svg { width: 26px; height: 32px; color: var(--saffron); flex: none; }
.brand-seal { width: 56px; height: 56px; flex: none; }
/* Canonical interior hero heading — keeps line-height tight across all pages (prevents per-page drift) */
.page-hero h1 { line-height: 1.04; }

/* Events (CPT-driven: /events/ archive list + homepage strip) */
.event-list { list-style: none; margin: 8px 0 0; padding: 0; }
.event-list > li { display: grid; grid-template-columns: 120px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--plaster-deep); align-items: start; }
.event-list > li:first-child { border-top: 1px solid var(--plaster-deep); }
.event-thumb { display: block; margin: 0; }
.event-thumb-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; border: 1px solid var(--ochre-gold); box-shadow: 0 1px 2px rgba(43,33,24,.14); }
.event-date-badge { text-align: center; line-height: 1; padding-top: 4px; }
.event-date-badge .d { display: block; font-family: var(--display); font-size: 42px; font-variation-settings: "opsz" 60; color: var(--ink); }
.event-date-badge .mo { display: block; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--saffron-ink); margin-top: 4px; }
.event-info h2, .event-info h3 { font-family: var(--display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.12; margin: 0 0 6px; font-variation-settings: "opsz" 48; }
.event-info h2 a, .event-info h3 a { text-decoration: none; color: var(--ink); }
.event-info h2 a:hover, .event-info h3 a:hover { color: var(--saffron-ink); text-decoration: underline; text-underline-offset: 4px; }
.event-when { font-size: 16px; color: var(--ink-soft); margin: 0 0 8px; }
.event-single-body { font-size: 18px; line-height: 1.7; }
.event-single-body > * { max-width: 68ch; }
@media (max-width: 560px) { .event-list > li { grid-template-columns: 92px 1fr; gap: 14px; } }
/* Homepage 'more upcoming' compact grid */
.upcoming-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 46px; }
.upcoming-more { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.upcoming-more > li { margin: 0; }
.upcoming-more a.card-link { display: block; text-decoration: none; color: var(--ink); }
.upcoming-more .u-when { font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--saffron-ink); margin: 12px 0 4px; }
.upcoming-more h3 { font-family: var(--display); font-size: 21px; line-height: 1.15; margin: 0; font-variation-settings: "opsz" 40; color: var(--ink); }
.upcoming-more a.card-link:hover h3 { color: var(--saffron-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .upcoming-more { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 440px) { .upcoming-more { grid-template-columns: 1fr; } }
/* Announcements (native Posts) homepage strip */
.announce-list { list-style: none; margin: 8px 0 0; padding: 0; }
.announce-list > li { display: grid; grid-template-columns: 128px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--plaster-deep); align-items: baseline; }
.announce-list > li:first-child { border-top: 1px solid var(--plaster-deep); }
.announce-list .a-date { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--saffron-ink); }
.announce-list h3 { font-family: var(--display); font-size: 22px; line-height: 1.2; margin: 0 0 4px; font-variation-settings: "opsz" 40; }
.announce-list h3 a { text-decoration: none; color: var(--ink); }
.announce-list h3 a:hover { color: var(--saffron-ink); text-decoration: underline; text-underline-offset: 3px; }
.announce-list .a-body p { font-size: 16px; color: var(--ink-soft); margin: 0; max-width: 62ch; }
@media (max-width: 560px) { .announce-list > li { grid-template-columns: 1fr; gap: 3px; } }

/* ---- Hero carousel (WP homepage) ---- */
/* the carousel is a <section>, so it inherits the global 64-120px vertical rhythm.
   It should hug the header instead, and give the next section room to peek above the fold. */
.hero-carousel { position: relative; margin-top: 6px; padding-top: 0; padding-bottom: clamp(12px, 1.6vw, 24px); }
.hc-viewport { overflow: hidden; }
.hc-track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform .5s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .hc-track { transition: none; } }
.hc-slide { flex: 0 0 100%; min-width: 100%; position: relative; min-height: clamp(400px, 52vh, 520px); overflow: hidden; }
.hc-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center 28%; }
.hc-hero-panel { position: absolute; left: clamp(0px, 4vw, 72px); bottom: 0; max-width: 600px; background: rgba(245, 239, 227, 0.94); padding: 26px clamp(24px, 4vw, 48px); }
.hc-hero-panel .eyebrow { margin-bottom: 6px; }
.hc-hero-panel .pre-h1 { font-family: var(--serif); font-size: 18px; color: var(--ink-soft); margin-bottom: 4px; }
.hc-hero-panel .pre-h1 em { color: var(--saffron-ink); font-weight: 600; }
.hc-hero-panel h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; font-variation-settings: "opsz" 60; max-width: 40ch; }
.hc-hero-panel .hero-lead { margin-top: 12px; font-size: 17px; line-height: 1.55; max-width: 52ch; color: var(--ink); }
.hc-hero-panel .hero-actions { margin-top: 18px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* announcement slides reuse the .hc-event two-column media+text layout */
.hc-event { display: grid; grid-template-columns: 1.1fr 1fr; }
.hc-event-media { position: relative; }
.hc-event-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-event .hc-inner { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 64px); background: var(--plaster-deep); }
.hc-kicker { display: inline-block; font-family: var(--sans); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--saffron-ink); margin-bottom: 8px; }
.hc-slide h2 { font-family: var(--display); font-size: clamp(28px, 3.6vw, 46px); line-height: 1.07; font-variation-settings: "opsz" 60; margin: 0 0 12px; max-width: 40ch; }
.hc-note-text { font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 44ch; margin-bottom: 4px; }
.hc-when { font-size: 16px; color: var(--ink-soft); }
.hc-slide .hc-inner .btn-red { margin-top: 18px; align-self: flex-start; }
.hc-arrow { position: absolute; top: clamp(180px, 24vh, 240px); transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; min-height: 46px; border-radius: 999px; border: 1.5px solid var(--ochre-gold); background: rgba(245,239,227,.9); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.hc-arrow:hover { background: var(--plaster); }
.hc-prev { left: 14px; } .hc-next { right: 14px; }
.hc-bar { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 10px 0 2px; }
.hc-dots { display: flex; gap: 10px; }
.hc-dot { width: 11px; height: 11px; min-height: 11px; padding: 0; border-radius: 999px; border: 1.5px solid var(--saffron-ink); background: transparent; cursor: pointer; }
.hc-dot[aria-current="true"] { background: var(--saffron-ink); }
.hc-pause { font-family: var(--sans); font-size: 14px; min-height: 44px; padding: 6px 14px; border: 1.5px solid var(--plaster-deep); background: transparent; color: var(--ink-soft); border-radius: 3px; cursor: pointer; }
@media (max-width: 700px) {
  /* compact: let each slide be content-sized so the next section peeks above the fold */
  .hc-slide { height: auto; min-height: 0; }
  .hc-slide.hc-hero { display: flex; flex-direction: column; }
  .hc-hero-img { position: static; inset: auto; width: 100%; aspect-ratio: var(--hero-media-ratio); background-position: center; flex: none; }
  .hc-hero-panel { position: static; inset: auto; left: 0; right: 0; max-width: none; background: var(--plaster); flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px clamp(20px, 5vw, 44px) 18px; }
  /* The hero slide sets the whole carousel's height on phones (every slide stretches to the
     tallest), so trimming this panel is what removes the dead space on event slides AND lets
     "Upcoming events" peek above the fold. Mural height deliberately untouched. (Keon, 2026-07-24) */
  .hero-carousel { margin-top: 2px; padding-bottom: 8px; }
  .hc-hero-panel { padding: 12px clamp(20px, 5vw, 44px) 14px; }
  .hc-hero-panel .eyebrow { margin-bottom: 0; }
  .hc-hero-panel .pre-h1 { font-size: 15px; margin-bottom: 1px; }
  /* match the 'Upcoming' section lead (26px) and let the short headline sit on ONE line:
     the base rule's max-width: 40ch was what forced it to wrap. (Keon, 2026-07-24) */
  .hc-hero-panel h1 { font-size: 26px; max-width: none; line-height: 1.12; }
  .hc-hero-panel .hero-lead { margin-top: 6px; font-size: 17px; line-height: 1.45; }
  /* keep both calls-to-action on ONE row instead of wrapping to two (~58px saved) */
  .hc-hero-panel .hero-actions { margin-top: 10px; gap: 10px; flex-wrap: nowrap; }
  /* one CTA spec for the whole carousel: the slide buttons had never received this
     compaction, so they rendered 55.2px tall against the hero's 46. 16px/44px rather
     than the 15px/42px this rule used to carry - both sat under the senior floors. */
  .hc-hero-panel .hero-actions .btn-red,
  .hc-slide .hc-inner .btn-red { padding: 10px 16px; font-size: 16px; min-height: 44px; white-space: nowrap; }
  .hc-hero-panel .hero-actions .link-river { font-size: 15px; min-height: 38px; padding: 2px 0; white-space: nowrap; }
  /* event/highlight slides: image fills the top, plaster fills the rest (no dead cream) */
  .hc-event { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* same ratio as the hero, so image heights match at every viewport (Keon, 2026-07-24) */
  .hc-event-media { aspect-ratio: var(--hero-media-ratio); }
  /* top-align the panel: centring left a measured 52-59px dead gap above the kicker on phones,
     and the height it wasted pushed "Upcoming events" below the fold (Keon, 2026-07-24). */
  .hc-event .hc-inner { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; padding: 14px clamp(20px, 5vw, 44px) 18px; }
  .hc-slide h2 { font-size: clamp(23px, 6vw, 32px); margin-bottom: 4px; }
  .hc-slide .hc-inner .btn-red { margin-top: 12px; }
  /* slimmer arch divider on phones: it cost 54px between the carousel and the next section */
  .threshold svg { width: 68px; height: 20px; }
  .hc-arrow { top: 100px; width: 40px; height: 40px; font-size: 22px; }
}

/* ---- Homepage upcoming-events 3-column grid ---- */
.events-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 34px); }
.events-grid > li { margin: 0; }
.eg-card { display: block; text-decoration: none; color: var(--ink); }
.eg-thumb { display: block; margin-bottom: 12px; }
.eg-when { display: block; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--saffron-ink); margin-bottom: 4px; }
.eg-title { display: block; font-family: var(--display); font-size: 21px; line-height: 1.15; font-variation-settings: "opsz" 40; }
.eg-card:hover .eg-title { color: var(--saffron-ink); text-decoration: underline; text-underline-offset: 3px; }
.eg-where { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.events-grid-foot { margin-top: 30px; }
.events-grid--archive { margin-top: 4px; row-gap: clamp(28px, 4vw, 42px); }
/* portrait event posters: keep the title/top visible instead of centre-cropping it away */
.event-thumb-img.is-portrait { object-position: top center; }
.hc-event-img.is-portrait { object-fit: contain; background: var(--plaster-deep); }
/* single event page: show the whole poster/photo, uncropped */
.event-poster { padding-top: 6px; padding-bottom: 2px; }
.event-poster-img { display: block; width: auto; max-width: min(100%, 680px); height: auto; margin: 0; border-radius: 4px; border: 1px solid var(--ochre-gold); box-shadow: 0 2px 10px rgba(43,33,24,.14); }
.event-poster-img.is-portrait { max-width: min(100%, 420px); }
@media (max-width: 780px) { .events-grid { grid-template-columns: 1fr 1fr; } }
/* keep 2 columns on phones so more events fit in one fold (tighter gap + title to suit the narrower card) */
@media (max-width: 460px) {
  .events-grid { gap: 16px 12px; }
  .eg-title { font-size: 18px; line-height: 1.18; }
  .eg-when { font-size: 13px; letter-spacing: .03em; }
  .eg-where { font-size: 13px; }
}

/* ---- Homepage slim support CTA ---- */
.give-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px 30px; flex-wrap: wrap; margin-top: clamp(44px, 7vw, 72px); }
.give-cta-line { font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 62ch; margin: 0; }
.brand-name { font-family: var(--display); font-size: 26px; font-weight: 580; line-height: 1; font-variation-settings: "opsz" 40; display: block; }
.brand-sub { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0.02em; margin-top: 5px; }
/* desktop: the tagline is a single line by design; never let it break the header onto two rows */
@media (min-width: 1154px) { .brand-sub { white-space: nowrap; } }

.primary-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.primary-nav > a, .primary-nav .navtrigger {
  font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink);
  text-decoration: none; padding: 12px 9px; border-radius: 2px; display: inline-flex; align-items: center;
  min-height: 44px; background: transparent; border: 0; cursor: pointer; white-space: nowrap;
}
.primary-nav a:hover, .primary-nav .navtrigger:hover { color: var(--saffron-ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.primary-nav .btn-quiet { margin-left: 10px; }
.primary-nav .btn-donate { margin-left: 12px; padding: 8px 18px; border-radius: 999px; background: var(--mural-red-dk); color: var(--plaster); font-weight: 600; border: 1.5px solid var(--mural-red-dk); }
.primary-nav .btn-donate:hover { background: #741f12; color: var(--plaster); text-decoration: none; }

/* lightweight dropdown for the 5 sections */
.navitem { position: relative; }
.navitem .navtrigger .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 6px; transition: transform 0.15s; }
.navitem[data-open="true"] .navtrigger .caret { transform: translateY(1px) rotate(225deg); }
.subnav {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: var(--plaster); border: 1px solid var(--plaster-deep);
  border-top: 2px solid var(--ochre-gold);
  box-shadow: 0 18px 40px -22px rgba(43, 33, 24, 0.4);
  padding: 12px; display: none; z-index: 60;
}
.navitem[data-open="true"] .subnav { display: block; }
.subnav a, .subnav span.soon { display: block; padding: 9px 12px; font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; border-radius: 2px; min-height: 44px; }
.subnav a:hover { background: var(--plaster-deep); color: var(--saffron-ink); }
.subnav .gloss { display: block; font-size: 15px; font-weight: 400; color: var(--ink-soft); }

/* icon-only trigger (Keon, 2026-07-24): the "Menu" word is gone, so the accessible
   name now comes from aria-label in header.php - do not remove it. The outlined
   container is deliberately KEPT: dropping the label and the box together would
   remove both affordance cues at once for the senior audience. Square at every
   viewport, so the old per-breakpoint padding overrides are no longer needed. */
.hamburger { display: none; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--ink); border-radius: 2px;
  width: 44px; height: 44px; min-height: 44px; padding: 0; color: var(--ink); cursor: pointer; }
.hamburger .bars { width: 20px; height: 12px; position: relative; display: inline-block; }
.hamburger .bars::before, .hamburger .bars::after, .hamburger .bars span { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); }
.hamburger .bars::before { top: 0; } .hamburger .bars span { top: 5px; } .hamburger .bars::after { bottom: 0; }

/* ---- mobile drawer ---- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(43, 33, 24, 0.45); display: none; z-index: 150; }
.drawer-backdrop[data-open="true"] { display: block; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: var(--plaster); z-index: 160; display: none; flex-direction: column; overflow-y: auto; }
.drawer[data-open="true"] { display: flex; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--plaster-deep); }
.drawer-head .t { font-family: var(--display); font-size: 22px; }
.drawer-close { min-width: 44px; min-height: 44px; border: 1.5px solid var(--ink); background: transparent; border-radius: 2px; font-size: 20px; color: var(--ink); cursor: pointer; }
.drawer-quick { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--plaster-deep); }
.drawer-quick .btn-red, .drawer-quick .btn-quiet { width: 100%; }
.drawer-acc { padding: 8px 20px 40px; }
.drawer-sec { border-bottom: 1px solid var(--plaster-deep); }
.drawer-sec > button { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; padding: 16px 0; font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; min-height: 44px; }
.drawer-sec > button .caret { width: 8px; height: 8px; border-right: 1.5px solid var(--saffron); border-bottom: 1.5px solid var(--saffron); transform: rotate(45deg); transition: transform 0.15s; }
.drawer-sec[data-open="true"] > button .caret { transform: rotate(225deg); }
.drawer-sec .panel { display: none; padding: 0 0 14px; }
.drawer-sec[data-open="true"] .panel { display: block; }
.drawer-sec .panel a, .drawer-sec .panel span.soon { display: block; padding: 10px 0 10px 14px; font-family: var(--sans); font-size: 16px; color: var(--ink); text-decoration: none; min-height: 44px; }
.drawer-sec .panel a:hover { color: var(--saffron-ink); }
.drawer-sec .panel .gloss { display: block; font-size: 15px; color: var(--ink-soft); }
/* the Contact utility row is a plain link, not a section toggle */
.drawer-sec > a.drawer-sec-link { display: flex; align-items: center; padding: 16px 0; font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; min-height: 44px; }
.drawer-sec > a.drawer-sec-link:hover { color: var(--saffron-ink); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--ink); color: var(--plaster); padding: 84px 0 36px; margin-top: 40px; }
.site-footer a { color: var(--plaster); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.footer-brand .fname { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand .fname-name { display: block; font-family: var(--display); font-size: 26px; font-weight: 580; line-height: 1; font-variation-settings: "opsz" 40; white-space: nowrap; }
.footer-brand .fname-sub { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: #C9BEA9; letter-spacing: 0.02em; margin-top: 5px; }
.footer-brand .fname svg { width: 24px; height: 30px; color: var(--saffron); }
.footer-brand .fname img { width: 52px; height: 52px; flex: none; }
.footer-brand p { font-size: 16px; color: #C9BEA9; max-width: 34ch; }
.footer-grid h4 { font-family: var(--sans); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ochre-gold); margin-bottom: 16px; }
.footer-grid ul { list-style: none; font-size: 16px; font-family: var(--sans); }
.footer-grid li { margin: 9px 0; color: #C9BEA9; }
.footer-bottom { border-top: 1px solid rgba(245, 239, 227, 0.16); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-family: var(--sans); font-size: 15px; color: #A99E88; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Six-section nav with shortened labels (Events / Ceremonies) and no "Plan a visit" button measures
   ~570–640px — back within the original budget, so the desktop bar shows again >=1154px; below that,
   use the drawer (which lists all six sections identically). */
@media (max-width: 1153px) {
  .primary-nav .navitem, .primary-nav > a { display: none; }
  .hamburger { display: inline-flex; }
  .primary-nav .btn-quiet { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 840px) {
  body { font-size: 18px; }
  section { padding: 64px 0; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* Phone brand lockup — both lines must sit on ONE line each down to 320px (Keon, 2026-07-24).
     Measured budget at 320px: 40 pad + 70 logo/gap + 98 menu left only 112px, but the name needed
     192px and the sub 158px, so both wrapped. Scaling the type + seal frees the room AND cuts
     ~50px of header height, which is what lets "Upcoming" peek above the fold. */
  .site-header { padding-top: 14px; padding-bottom: 12px; }
  .header-row { gap: 12px; }
  .brand { gap: 10px; }
  .brand-seal { width: 40px; height: 40px; }
  .brand-name { font-size: 19px; }
  .brand-sub { font-size: 11px; margin-top: 2px; }
  /* narrow phones: 3-column fixed layout that wraps cleanly, no clipping, no h-scroll */
  .schedule-table { font-size: 16px; table-layout: fixed; }
  .schedule-table th, .schedule-table td { padding-right: 10px; overflow-wrap: anywhere; }
  .schedule-table th:last-child, .schedule-table td:last-child { display: none; } /* drop secondary "Where" */
  .schedule-table th:nth-child(1), .schedule-table td:nth-child(1) { width: 20%; }
  .schedule-table th:nth-child(2), .schedule-table td:nth-child(2) { width: 22%; }
  .schedule-table th:nth-child(3), .schedule-table td:nth-child(3) { width: 58%; }
}
@media (max-width: 360px) {
  /* 320px is the tightest case: header-row gap + menu button left only ~132px for text.
     One more notch down keeps both brand lines on a single line each. */
  .header-row { gap: 8px; }
  .brand { gap: 8px; }
  .brand-seal { width: 36px; height: 36px; }
  .brand-name { font-size: 18px; }
  .brand-sub { font-size: 10.5px; }
  /* <=375px cannot fit both hero CTAs on one row - forcing nowrap clipped the secondary
     link past the viewport edge (caught by the sweep). Allow it to wrap here. */
  .hc-hero-panel .hero-actions { flex-wrap: wrap; gap: 8px; }
  .hc-hero-panel .hero-actions .link-river { min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* hero CTAs need two rows on the narrowest phones (sweep: link clipped past edge) */
@media (max-width: 375px) {
  .hc-hero-panel .hero-actions { flex-wrap: wrap; gap: 8px; }
  .hc-hero-panel .hero-actions .link-river { min-height: 32px; }
}

/* ---- back to top ----------------------------------------------------------
   Mobile pages run long (measured median 8.1 screens at 390x844, worst 15.9),
   so give readers a way back without spending header height on a sticky bar. */
.to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 48px; height: 48px; min-height: 48px;
  align-items: center; justify-content: center;
  /* solid ink, NOT plaster: a plaster fill is the same colour as the page and the control
     effectively disappeared. Ink reads as a neutral utility and stays clear of the maroon
     Donate CTA's meaning. */
  background: var(--ink); color: var(--plaster);
  border: 1.5px solid var(--ink); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(43, 33, 24, 0.28);
  cursor: pointer; z-index: 90; padding: 0;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.to-top[hidden] { display: none; }
.to-top:not([hidden]) { display: inline-flex; }
.to-top.is-visible { opacity: 1; transform: none; }
.to-top svg { width: 22px; height: 22px; }
.to-top:hover { background: #12100c; border-color: #12100c; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---- Temple & Heritage: hub index + object pages (2026-07-25) ------------------
   The single page had reached 16 screens; splitting it into a hub plus one page
   per object keeps each read to 2-4 screens and makes every object deep-linkable
   for someone standing in front of it. */
/* No padding-top here on purpose: the global `section.wrap:not(.page-hero)` rhythm is the
   right spacing for this section break, and a single-class rule would lose to it anyway. */
.hx-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.hx-card a { display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--plaster-deep); height: 100%; border: 1px solid transparent;
  transition: border-color .15s ease, transform .15s ease; }
.hx-card a:hover { border-color: var(--ochre-gold); transform: translateY(-2px); }
.hx-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--plaster); }
.hx-media img { width: 100%; height: 100%; object-fit: cover; }
.hx-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ochre-gold); }
.hx-noimg svg { width: 34px; height: 42px; }
.hx-no { display: block; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .1em;
  color: var(--saffron-ink); padding: 16px 18px 0; }
.hx-name { display: block; font-family: var(--display); font-size: 24px; line-height: 1.15;
  font-variation-settings: "opsz" 40; padding: 4px 18px 0; }
.hx-blurb { display: block; font-size: 16px; line-height: 1.5; color: var(--ink-soft); padding: 8px 18px 20px; }
.hx-note { margin-top: 30px; font-family: var(--sans); font-size: 15px; color: var(--ink-soft); }

.hx-hero .lede { max-width: 58ch; }
/* These MUST out-specify the global `section.wrap:not(.page-hero)` rhythm rule (0,2,1),
   which is authored for full content sections and applies 86.4px at 1440. A single-class
   selector loses to it silently: the lead image sat 126px below the lede (86.4 of section
   padding + the figure's own 40px margin) instead of the ~24px intended. */
section.wrap.hx-lead-media { padding-top: clamp(12px, 1.6vw, 20px); }
section.wrap.hx-body { padding-top: clamp(22px, 2.8vw, 34px); }
/* after a lead image the body needs less again - the picture already separated them */
section.wrap.hx-lead-media + section.wrap.hx-body { padding-top: clamp(16px, 2vw, 26px); }
.hx-lead-media .hx-fig { margin-top: 0; }
.hx-body > *:first-child { margin-top: 0; }
.hx-body h2 { font-size: clamp(25px, 2.8vw, 34px); font-variation-settings: "opsz" 60;
  margin: clamp(32px, 4vw, 48px) 0 12px; max-width: 40ch; }
.hx-body h2:first-child { margin-top: 0; }
.hx-body p { max-width: 64ch; margin-bottom: 1em; }
.hx-list { max-width: 64ch; margin: 0 0 1em 1.1em; }
.hx-list li { margin-bottom: .4em; }
/* Figures sit WITH the text, not across the page. --fig-max is emitted per image from
   its real pixel width, so nothing is ever upscaled: six of these came off the legacy
   site as thumbnails and a 250px file was being stretched to 1096px. */
.hx-fig { margin: clamp(26px, 3.2vw, 40px) 0; max-width: min(64ch, var(--fig-max, 100%)); }
.hx-fig img { width: 100%; height: auto; border: 1px solid var(--ochre-gold); }
/* Portraits are held narrower still and set beside the measure, not filling it. */
.hx-fig.is-portrait { max-width: min(380px, var(--fig-max, 380px)); }
/* One deliberate accent per page: the lead image may exceed the measure. */
.hx-fig.is-lead { max-width: min(860px, var(--fig-max, 860px)); }
.hx-fig.is-lead.is-portrait { max-width: min(460px, var(--fig-max, 460px)); }

/* Seven mural photographs read as one work, not seven full-width slides. */
/* The murals ARE the page - the gallery gets the same accent width as a lead image. */
.hx-gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr);
  max-width: 860px; margin: clamp(26px, 3.2vw, 40px) 0; }
.hx-gallery .hx-fig { margin: 0; max-width: none; }
.hx-gallery .hx-fig img { aspect-ratio: 3 / 2; object-fit: cover; }
.hx-gallery .platecap { display: none; }   /* seven identical captions is noise */
@media (max-width: 560px) { .hx-gallery { grid-template-columns: 1fr; } }
.hx-credit { font-family: var(--sans); font-size: 15px; color: var(--ink-soft);
  border-top: 1px solid var(--plaster-deep); padding-top: 14px; margin-top: 34px; max-width: 64ch; }

.hx-pager { display: flex; align-items: stretch; gap: 14px; justify-content: space-between;
  margin: clamp(40px, 5vw, 64px) auto clamp(20px, 3vw, 32px); }
.hx-pg { display: flex; flex-direction: column; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--ink); border: 1.5px solid var(--ink);
  padding: 12px 18px; min-height: 44px; flex: 1; max-width: 46%;
  transition: background .15s ease; }
.hx-pg:hover { background: var(--plaster-deep); }
.hx-next { text-align: right; align-items: flex-end; }
.hx-dir { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--saffron-ink); }
.hx-nm { font-family: var(--display); font-size: 19px; line-height: 1.15; }
.hx-all { align-self: center; font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--river); white-space: nowrap; min-height: 44px; display: flex; align-items: center; }

@media (max-width: 640px) {
  .hx-pager { flex-wrap: wrap; }
  .hx-pg { max-width: none; flex-basis: 100%; }
  .hx-all { order: 3; margin: 2px auto 0; }
  .hx-fig.is-lead img { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-card a, .hx-pg { transition: none; }
  .hx-card a:hover { transform: none; }
}

/* Madam Chew Quee Neo on the history page — the donor of the land (2026-07-25).
   She is a person, not a heritage object, so she lives here and not in the temple tour. */
.hist-donor-grid { display: grid; grid-template-columns: 1fr 269px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.hist-donor-grid p { max-width: 64ch; margin-bottom: 1em; }
.hist-donor-note { font-family: var(--sans); font-size: 16px; color: var(--ink-soft); }
.hist-donor-fig img { width: 100%; height: auto; border: 1px solid var(--ochre-gold); }
@media (max-width: 760px) { .hist-donor-grid { grid-template-columns: 1fr; } .hist-donor-fig { max-width: 269px; } }

/* Burmese (MDS class list). Neither Source Serif 4 nor Source Sans 3 covers Myanmar,
   so name the system faces explicitly rather than leave it to chance, and give the
   script the extra leading its stacked diacritics need. */
[lang="my"] { font-family: "Noto Sans Myanmar", "Myanmar Text", "Myanmar Sangam MN", "Padauk", var(--sans); line-height: 1.9; }

/* MDS class list (2026-07-25, from the temple's own legacy MDS page) */
.mds-classes { display: grid; gap: 2px; border-top: 1.5px solid var(--ochre-gold); margin-top: 8px; }
.mds-class { background: var(--plaster-deep); padding: 20px 22px; }
.mds-class h3 { font-family: var(--display); font-size: 21px; font-variation-settings: "opsz" 40; margin-bottom: 2px; }
.mds-class .my-name { display: block; font-size: 16px; color: var(--ink-soft); margin-bottom: 10px; }
.mds-class dl { display: grid; grid-template-columns: 92px 1fr; gap: 4px 18px; margin: 0; }
.mds-class dt { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--saffron-ink); }
.mds-class dd { margin: 0; font-size: 16.5px; }
@media (max-width: 560px) { .mds-class dl { grid-template-columns: 1fr; gap: 1px; } .mds-class dd { margin-bottom: 8px; } }

/* ============================================================
   Forms (2026-07-29) — shared across Contact, Volunteer,
   Registration and Donation-receipt. Rebuilt from the legacy
   site's four Contact Form 7 forms (doc/CONTACT-FORMS-SPEC.md).
   Markup is hand-written rather than builder-generated so every
   control keeps a real <label for>, groups keep fieldset/legend,
   and inputs stay at/above the 16px senior-readability floor.
   ============================================================ */
.mv-form { max-width: 680px; }
.mv-form-wide { max-width: 900px; }

.mv-field { margin-bottom: 26px; }
.mv-field label,
.mv-form legend {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  margin-bottom: 7px;
}
.mv-form legend { margin-bottom: 12px; }
.mv-hint {
  display: block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 2px;
}
/* "required" is spelled out, not a bare asterisk — an asterisk alone
   is unreadable to screen readers and unclear to older visitors. */
.mv-req {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--saffron-ink);
  margin-left: 8px;
}
.mv-optional {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: 8px;
}

.mv-form input[type="text"],
.mv-form input[type="email"],
.mv-form input[type="tel"],
.mv-form input[type="date"],
.mv-form select,
.mv-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: #FFFDF8;
  border: 1px solid var(--plaster-deep);
  border-bottom: 2px solid #D8CBB2;
  border-radius: 2px;
  padding: 13px 15px;
  transition: border-color .15s ease, background .15s ease;
}
.mv-form textarea { min-height: 160px; resize: vertical; }
.mv-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234A4032' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 42px;
}
.mv-form input:hover,
.mv-form select:hover,
.mv-form textarea:hover { border-color: #CFC0A4; }
.mv-form input:focus,
.mv-form select:focus,
.mv-form textarea:focus {
  outline: 2px solid var(--river);
  outline-offset: 2px;
  border-bottom-color: var(--river);
  background: #fff;
}

/* Checkbox / radio groups — fieldset keeps the group name announced once,
   which is why the group wrappers are not left as bare divs. */
.mv-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
}
.mv-group {
  border: 1px solid var(--plaster-deep);
  border-top: 1.5px solid var(--ochre-gold);
  background: var(--plaster-deep);
  padding: 20px 22px 14px;
}
.mv-group + .mv-group { margin-top: 14px; }
.mv-group-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--saffron-ink);
  margin-bottom: 12px;
}
.mv-form .wpcf7-checkbox,
.mv-form .wpcf7-radio { display: grid; gap: 2px; }
.mv-cols-2 .wpcf7-checkbox,
.mv-cols-2 .wpcf7-radio { grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.mv-form .wpcf7-list-item { margin: 0; }
.mv-form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink);
  padding: 9px 6px 9px 2px;   /* keeps the tap target ≥44px tall */
  cursor: pointer;
  border-radius: 2px;
}
.mv-form .wpcf7-list-item label:hover { background: rgba(255,253,248,.7); }
.mv-form input[type="checkbox"],
.mv-form input[type="radio"] {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  margin-top: 1px;
  accent-color: var(--mural-red-dk);
  cursor: pointer;
}
.mv-form .wpcf7-list-item-label { padding-top: 1px; }

/* Consent line (PDPA) sits apart from the ordinary fields. */
.mv-consent {
  border-top: 1px solid var(--plaster-deep);
  padding-top: 20px;
  margin-bottom: 24px;
}
.mv-consent .wpcf7-list-item label { font-size: 16px; }
.mv-consent p {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 6px;
  max-width: 62ch;
}

.mv-form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.mv-form input[type="submit"] {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--plaster);
  background: var(--mural-red-dk);
  border: 0;
  border-radius: 2px;
  padding: 15px 34px;
  cursor: pointer;
  transition: background .15s ease;
}
.mv-form input[type="submit"]:hover { background: var(--mural-red); }
.mv-form input[type="submit"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mv-form .wpcf7-spinner { margin: 0; }

/* Validation + response. CF7 emits these; they are restyled rather
   than hidden so errors stay visible, high-contrast and announced. */
.mv-form .wpcf7-not-valid-tip {
  display: block;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  color: #A3231A;
  margin-top: 7px;
}
.mv-form .wpcf7-not-valid { border-color: #A3231A; border-bottom-color: #A3231A; }
.mv-form .wpcf7-response-output {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  margin: 26px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--plaster-deep);
  border-left: 4px solid var(--ink-soft);
  background: #FFFDF8;
  border-radius: 2px;
}
.mv-form .wpcf7-form.sent .wpcf7-response-output { border-left-color: var(--leaf); }
.mv-form .wpcf7-form.invalid .wpcf7-response-output,
.mv-form .wpcf7-form.unaccepted .wpcf7-response-output,
.mv-form .wpcf7-form.failed .wpcf7-response-output { border-left-color: #A3231A; }

/* Honeypot — hidden from sight and from assistive tech, never from bots. */
.mv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Side note beside a form: who reads this, how long we keep it. */
.mv-form-aside {
  background: var(--plaster-deep);
  border-top: 1.5px solid var(--ochre-gold);
  padding: 26px 28px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.mv-form-aside h2 {
  font-family: var(--display);
  font-size: 22px;
  font-variation-settings: "opsz" 40;
  color: var(--ink);
  margin-bottom: 10px;
}
.mv-form-aside p + p { margin-top: 12px; }
.mv-form-aside a { color: var(--river); font-weight: 600; }
.mv-form-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px; align-items: start; }

@media (max-width: 900px) {
  .mv-form-layout { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  .mv-cols-2 .wpcf7-checkbox,
  .mv-cols-2 .wpcf7-radio { grid-template-columns: 1fr; }
  .mv-group { padding: 18px 16px 12px; }
  .mv-form input[type="submit"] { width: 100%; }
}

/* Links inside footer text blocks were the same colour as the surrounding text with
   no underline (axe: link-in-text-block, 2.31:1 against neighbouring text — needs 3:1).
   Underlining is the fix that does not depend on colour at all. 2026-07-31 */
.footer-bottom a { color: var(--plaster); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.footer-bottom a:hover { text-decoration-thickness: 2px; }

/* A phone link sitting inside a <dd> alongside plain text was distinguished only by
   its maroon colour (axe: link-in-text-block, 1.83:1 against the neighbouring text).
   Underline it so the link does not depend on colour perception. 2026-07-31 */
dd a[href^="tel:"], dd a[href^="mailto:"] { text-decoration: underline; text-underline-offset: 3px; }

/* Event poster: opens full size via the shared lightbox (2026-08-01). A poster is a
   picture of text, so it is the secondary route — the words are written out on the page
   below it. The hint exists because an older visitor has no reason to guess an image
   is tappable, and the pointer/focus styles make the affordance visible either way. */
.event-poster-img[data-full] { cursor: zoom-in; }
.event-poster-img[data-full]:hover { box-shadow: 0 3px 16px rgba(43,33,24,.26); }
.event-poster-img[data-full]:focus-visible { outline: 3px solid var(--river); outline-offset: 4px; }
.event-poster-hint {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 15.5px; color: var(--ink-soft);
  margin-top: 10px; max-width: 46ch;
}
.event-poster-hint svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--saffron-ink); }