/* ===========================================================================
   MMFBS — "Registered Society"
   Mauritian Muslim Funeral Fund and Bereavement Society Limited

   Two inks on paper. Rules, not cards. Near-square corners. No shadows.
   Drawn from British friendly-society and co-operative print: ruled ledgers,
   membership books, numbered clauses. The Society is a registered
   co-operative under the Co-operative and Community Benefit Societies Act
   2014, and the design says so.

   ONE FILE, DELIBERATELY. Tokens must never be split into a separate
   @import: asset() cache-busts by filemtime on the file it links, and an
   @import carries no version query while .htaccess caches CSS for 7 days.
   A split would ship new component CSS against week-old token values.

   Contrast, against --paper: ink 16.1, oxblood 8.3, slate 8.5 (all AAA).
   --rule is decorative only at 1.5 and must never carry meaning; anything a
   reader has to perceive uses --rule-mid at 3.3, satisfying WCAG 1.4.11.
   =========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/spectral-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/spectral-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/spectral-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/spectral-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/spectral-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/spectral-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   1. Tokens
   =========================================================================== */
:root {
  /* --- Paper and ink ---------------------------------------------------- */
  --paper:        #F4F1EA;
  --paper-2:      #EDE9DE;   /* toned band */
  --paper-3:      #FFFFFF;   /* form fields */

  --ink:          #171514;   /* 16.1:1  body and headings */
  --ink-2:        #4A443E;   /*  8.5:1  secondary text */
  --ink-3:        #6E675E;   /*  4.9:1  captions; never below --fs-small */

  --oxblood:      #7A2E2E;   /*  8.3:1  urgent, bereavement, section marks */
  --oxblood-deep: #5C2222;
  --oxblood-tint: #F0E4E0;

  --slate:        #3A4750;   /*  8.5:1  second dark band, never a brand colour */
  --slate-deep:   #29333A;
  --slate-tint:   #E5E7E7;

  --assent:       #3E5233;   /*  7.6:1  form success */
  --assent-tint:  #E6EADF;

  /* --- Rules ------------------------------------------------------------ */
  --rule-hair:    #DCD5C6;
  --rule:         #CFC8B8;   /* 1.5:1 decorative separation ONLY */
  --rule-mid:     #8C8474;   /* 3.3:1 field and panel borders */
  --rw-hair:      1px;
  --rw-mid:       2px;
  --rw-heavy:     3px;

  /* --- Type -------------------------------------------------------------
     Spectral carries headings and every figure (it ships tabular numerals).
     Atkinson Hyperlegible carries body text: designed for low-vision
     readers, which matters for an audience reading under stress.
     Atkinson ships 400 and 700 ONLY. Never author 500 or 600 on it. */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body:    'Atkinson Hyperlegible', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-figure:  var(--font-display);

  --fw-body:      400;
  --fw-bold:      700;
  --fw-display:   300;
  --fw-head:      600;

  --fs-display: clamp(3.4rem, 1.4rem + 8vw, 7rem);
  --fs-h1:      clamp(2rem, 1.5rem + 2.2vw, 2.9rem);
  --fs-h2:      clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-h3:      1.25rem;
  --fs-h4:      1.0625rem;
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;

  --lh-display: 0.92;
  --lh-head:    1.15;
  --lh-lead:    1.45;
  --lh-body:    1.65;

  --tr-mark:    0.14em;
  --tr-head:    -0.005em;
  --tr-display: -0.02em;

  /* --- Space (4px base) -------------------------------------------------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* --- Structure --------------------------------------------------------- */
  --maxw:          1120px;
  --maxw-wide:     1320px;
  --maxw-narrow:   720px;
  --gutter:        clamp(1rem, 4vw, 2rem);
  --measure:       64ch;
  --radius:        2px;

  --dur:  160ms;
  --ease: cubic-bezier(.2,.6,.2,1);

  /* --- Semantic aliases: components reference only these ----------------- */
  --bg:              var(--paper);
  --bg-toned:        var(--paper-2);
  --bg-field:        var(--paper-3);
  --bg-invert:       var(--ink);
  --bg-invert-alt:   var(--slate);

  --fg:              var(--ink);
  --fg-muted:        var(--ink-2);
  --fg-faint:        var(--ink-3);
  --fg-invert:       var(--paper);
  --fg-invert-muted: #BDB7AC;   /* 9.1:1 on --ink */

  --accent:          var(--oxblood);
  --accent-fg:       var(--paper);

  --focus-width:  2px;
  --focus-offset: 2px;

  /* --- Spacing aliases --------------------------------------------------
     The pages still carry ~50 inline style= attributes using the old
     --space-N scale. These map it onto the current scale so the markup keeps
     resolving; an unresolvable var() drops the declaration silently, with no
     console error, so removing them without sweeping the markup would give
     wrong spacing rather than a visible failure.
     The colour half of this bridge has been removed: no markup or script
     references the retired palette any more.
     -------------------------------------------------------------------- */
  --space-2: var(--sp-3); --space-3: var(--sp-4); --space-4: var(--sp-5);
  --space-5: var(--sp-6); --space-6: var(--sp-7);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   2. Reset and base
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-head);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Scoped, not global: a global p{max-width} silently caps paragraphs inside
   the ruled tables (ledger, price lines, contact rows, pool figure). */
.prose p, .measure p, .stack > p, .lead { max-width: var(--measure); }

a { color: var(--fg); text-decoration: underline;
    text-decoration-color: var(--rule-mid); text-decoration-thickness: 1px;
    text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* currentColor works on paper AND on the ink and slate bands. */
:focus-visible {
  outline: var(--focus-width) solid currentColor;
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

/* A date field is the exception. Tab lands on the field itself, which Chromium
   does not treat as :focus-visible because it then hands focus to the day and
   month segments inside, so the shared ring above never drew on the one field
   type where a keyboard user most needs to know where they are. */
input[type="date"]:focus {
  outline: var(--focus-width) solid currentColor;
  outline-offset: var(--focus-offset);
}

/* Figures: every money value and count. Column alignment never depends on
   tnum; the grid does that, tabular numerals only refine it. */
.num, .tenner, .price-total, .stat-big, .pool-total, .pool-count,
.ledger-table td, .price-lines b { font-family: var(--font-figure);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1; }

/* Skip link: previously invisible because .visually-hidden had no :focus
   reveal, so keyboard users could not use it at all. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.visually-hidden:focus, .visually-hidden:focus-visible {
  position: fixed; top: var(--sp-3); left: var(--sp-3);
  width: auto; height: auto; clip: auto; clip-path: none;
  z-index: 100; padding: var(--sp-3) var(--sp-4);
  background: var(--ink); color: var(--paper);
  border: var(--rw-mid) solid var(--ink); text-decoration: none;
}

/* ===========================================================================
   3. Layout
   =========================================================================== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--dim, .section--surface { background: var(--bg-toned); }

/* Inverted bands, kept but re-pitched into the new palette. */
.section--deep    { background: var(--bg-invert); color: var(--fg-invert); }
.section--deepest { background: var(--bg-invert-alt); color: var(--fg-invert); }
.section--deep h1, .section--deep h2, .section--deep h3,
.section--deepest h1, .section--deepest h2, .section--deepest h3 { color: var(--fg-invert); }
.section--deep p, .section--deepest p { color: var(--fg-invert-muted); }
.section--deep a, .section--deepest a { color: var(--fg-invert); text-decoration-color: var(--fg-invert-muted); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-5); }
.measure { max-width: var(--measure); }

/* Centring is reserved for genuine set-pieces, not the default. */
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }
/* .measure caps the width but does not centre itself, so a centred section
   would sit its text block against the left edge of the container. */
.center .measure { margin-inline: auto; }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ===========================================================================
   4. Marks and rules
   =========================================================================== */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-mark);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.section--deep .eyebrow, .section--deepest .eyebrow { color: var(--fg-invert-muted); }

.mark { display: flex; align-items: baseline; gap: var(--sp-3);
        font-size: var(--fs-micro); font-weight: var(--fw-bold);
        letter-spacing: var(--tr-mark); text-transform: uppercase;
        color: var(--fg-muted); margin-bottom: var(--sp-4);
        border-bottom: var(--rw-hair) solid var(--rule); padding-bottom: var(--sp-2); }
.mark-num { color: var(--accent); font-variant-numeric: tabular-nums; }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
.section--deep .lead, .section--deepest .lead { color: var(--fg-invert-muted); }

/* The letterpress double rule replaces the eight-point-star divider. */
.rule, .rule-geo { border: 0; height: 0; background: none;
  border-top: var(--rw-mid) solid var(--ink);
  border-bottom: var(--rw-hair) solid var(--ink);
  padding-top: 3px; margin-block: var(--sp-6); }
.rule--short, .rule-geo--center { max-width: 96px; }
.rule--center, .rule-geo--center { margin-inline: auto; }
.section--deep .rule, .section--deep .rule-geo,
.section--deepest .rule, .section--deepest .rule-geo {
  border-color: var(--fg-invert-muted); }

/* ===========================================================================
   5. Buttons — squared, 2px, no lift
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-bold);
  letter-spacing: .04em; text-transform: uppercase;
  padding: .8rem 1.4rem; border: var(--rw-mid) solid var(--ink);
  border-radius: var(--radius); background: none; color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; }

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--paper); color: var(--ink); }

.btn-urgent { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }
.btn-urgent:hover { background: var(--paper); color: var(--oxblood); }

.btn-outline { background: none; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* Defaults to the outline treatment: several pages carry .btn-ghost-light on
   bands that are no longer dark, where paper-on-paper would be invisible.
   The light variant is scoped to the inverted bands below. */
.btn-ghost-light { background: none; border-color: var(--ink); color: var(--ink); }
.btn-ghost-light:hover { background: var(--ink); color: var(--paper); }

.btn-lg { padding: 1rem 1.8rem; font-size: var(--fs-body); }
.btn-block { width: 100%; }
/* A button that is a direct grid or flex child would otherwise stretch to
   fill its track. .btn-block still opts back in. */
.btn:not(.btn-block) { justify-self: start; align-self: start; }

.btn:disabled, .btn[disabled] { opacity: .4; cursor: default; }
.btn:disabled:hover, .btn[disabled]:hover { background: none; color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.btn-row--center { justify-content: center; }

.section--deep .btn-outline, .section--deepest .btn-outline {
  border-color: var(--fg-invert); color: var(--fg-invert); }
.section--deep .btn-outline:hover, .section--deepest .btn-outline:hover {
  background: var(--fg-invert); color: var(--ink); }
.section--deep .btn-primary, .section--deepest .btn-primary {
  background: var(--paper); color: var(--ink); border-color: var(--paper); }
.section--deep .btn-ghost-light, .section--deepest .btn-ghost-light {
  border-color: var(--fg-invert); color: var(--fg-invert); }
.section--deep .btn-ghost-light:hover, .section--deepest .btn-ghost-light:hover {
  background: var(--fg-invert); color: var(--ink); }

/* ===========================================================================
   6. Masthead, utility bar, navigation
   =========================================================================== */
.util-bar { background: var(--ink); color: var(--fg-invert-muted); font-size: var(--fs-micro); }
.util-inner { display: flex; align-items: center; justify-content: space-between;
              gap: var(--sp-4); padding-block: .45rem; max-width: var(--maxw-wide); }
.util-msg { color: var(--fg-invert-muted); }
.util-msg a { color: var(--fg-invert); text-decoration-color: var(--fg-invert-muted); }
.util-report { display: inline-flex; align-items: center; gap: .45rem;
               color: var(--fg-invert); font-weight: var(--fw-bold);
               letter-spacing: .06em; text-transform: uppercase;
               text-decoration: none; border-bottom: var(--rw-mid) solid var(--oxblood);
               padding-bottom: 1px; }
.util-report svg { width: 1em; height: 1em; }

.site-header { background: var(--paper); border-bottom: var(--rw-mid) solid var(--ink); }

/* The registration notice, on every page until REGISTERED_NUMBER is set.
   Oxblood tint so it reads as a standing caution rather than an alarm, one
   sentence deep, inside the header so it belongs to a landmark. */
.site-notice { background: var(--oxblood-tint); color: var(--ink);
               border-top: var(--rw-hair) solid var(--rule-mid);
               font-size: var(--fs-small); line-height: 1.5; }
.site-notice-inner { padding-block: var(--sp-3); max-width: var(--maxw-wide);
                     border-left: var(--rw-heavy) solid var(--oxblood);
                     padding-left: var(--sp-4); }
.site-notice p { margin: 0; max-width: none; }
.site-notice strong { color: var(--oxblood); }
.site-notice a { color: var(--ink); font-weight: var(--fw-bold);
                 text-decoration-color: var(--oxblood); white-space: nowrap; }
.header-inner { display: flex; align-items: center; gap: var(--sp-4);
                padding-block: var(--sp-4); max-width: var(--maxw-wide); }
.nav-only-urgent { display: none; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand:hover { color: inherit; }
.brand-mark { width: 44px; height: 44px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-weight: var(--fw-head);
              font-size: 1.05rem; color: var(--ink); white-space: nowrap; }
.brand-sub { font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
             color: var(--fg-muted); white-space: nowrap; }

.nav-collapse { display: contents; }
.primary-nav { display: flex; align-items: center; gap: var(--sp-4);
               margin-left: auto; flex-wrap: nowrap; }
.primary-nav a { font-size: var(--fs-small); color: var(--fg-muted);
                 text-decoration: none; padding-block: .3rem;
                 border-bottom: var(--rw-mid) solid transparent; white-space: nowrap; }
.primary-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-mid); }
.primary-nav a.is-active { color: var(--ink); font-weight: var(--fw-bold);
                           border-bottom-color: var(--ink); }

.header-cta { display: flex; gap: var(--sp-3); flex-shrink: 0; }
.header-cta .btn { padding: .55rem 1rem; font-size: var(--fs-micro); }

.nav-toggle { display: none; background: none; border: var(--rw-mid) solid var(--ink);
              border-radius: var(--radius); color: var(--ink); cursor: pointer;
              padding: .45rem; margin-left: auto; }
.nav-toggle svg { width: 22px; height: 22px; }

/* The full menu, eight items plus the brand and the button, needs 1300px. It
   used to collapse below 1220, so every window between the two gave the whole
   site a horizontal scrollbar, worst on Report a Bereavement, where the active
   item is the longest label and is set bold. Measured, not guessed, and left
   at 1320 so a different button label or a fallback font has room. */
@media (max-width: 1320px) {
  .util-bar { display: none; }
  .nav-toggle { display: block; }
  .nav-collapse { display: none; flex-basis: 100%; }
  .site-header.open .nav-collapse { display: block; padding-bottom: var(--sp-5); }
  .site-header.open .header-inner { flex-wrap: wrap; }
  .primary-nav { flex-direction: column; align-items: stretch; gap: 0;
                 margin-left: 0; border-top: var(--rw-hair) solid var(--rule); }
  .primary-nav a { padding: var(--sp-4) 0; border-bottom: var(--rw-hair) solid var(--rule); }
  .primary-nav a.is-active { border-bottom-color: var(--rule); border-left: var(--rw-heavy) solid var(--ink); padding-left: var(--sp-3); }
  .header-cta { flex-direction: column; margin-top: var(--sp-5); }
  .nav-only-urgent { display: inline-flex; }
}

/* On a very narrow screen the nowrap brand text would otherwise push the
   menu button off the edge, giving every page a horizontal scrollbar. */
@media (max-width: 400px) {
  .header-inner { gap: var(--sp-3); }
  .brand { min-width: 0; flex-shrink: 1; }   /* it is flex-shrink: 0 by default */
  .brand-text { min-width: 0; }
  .nav-toggle { flex-shrink: 0; }
  .brand-name, .brand-sub { white-space: normal; }
  .brand-name { font-size: 0.95rem; }
  .brand-sub { letter-spacing: .06em; }
  .brand-mark { width: 32px; height: 32px; }
}

/* ===========================================================================
   7. Page head and hero — paper mastheads, not coloured bands
   =========================================================================== */
.page-head { background: var(--paper); border-bottom: var(--rw-heavy) solid var(--ink);
             padding-block: var(--sp-7) var(--sp-6); }
.page-head h1 { color: var(--ink); }
.page-head .lead { margin-top: var(--sp-4); }
.page-head .eyebrow { color: var(--accent); }

.hero { background: var(--paper); border-bottom: var(--rw-heavy) solid var(--ink); }
.hero-inner { padding-block: var(--sp-9) var(--sp-8); max-width: 46rem; }
.hero h1 { color: var(--ink); font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4rem);
           font-weight: var(--fw-display); letter-spacing: var(--tr-display);
           line-height: 1.04; max-width: 16ch; text-wrap: balance; }
.hero .lead { margin-top: var(--sp-5); max-width: 46ch; }
.hero .btn-row { margin-top: var(--sp-6); }

/* The full lockup beside the hero text. It is set aside below 900px rather
   than shrunk: its wordmark stops being readable long before it would fit
   next to the heading on a phone, and the emblem is already in the header. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto;
             align-items: center; gap: var(--sp-8); }
.hero-logo { width: clamp(220px, 26vw, 380px); height: auto; justify-self: end; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-logo { display: none; }
}

/* ===========================================================================
   7b. A statement from the Society, published in its own words
   =========================================================================== */
.statement { display: grid; gap: var(--sp-4); max-width: var(--measure);
             margin-top: var(--sp-5); }
.statement p { color: var(--fg-muted); }
.statement .note { margin-block: var(--sp-2); }
.statement .note p { color: var(--fg); }
.statement .hint { border-top: var(--rw-hair) solid var(--rule);
                   padding-top: var(--sp-4); margin-top: var(--sp-2); }

/* ===========================================================================
   8. The £10 treatment
   =========================================================================== */
.tenner-band { border-top: var(--rw-heavy) solid currentColor;
               border-bottom: var(--rw-heavy) solid currentColor;
               padding-block: var(--sp-5); }
.tenner { font-family: var(--font-figure); font-size: var(--fs-display);
          font-weight: var(--fw-display); line-height: var(--lh-display);
          letter-spacing: var(--tr-display); color: inherit; }
.tenner-label { font-size: var(--fs-lead); color: var(--fg-muted); margin-top: var(--sp-4); }
.section--deep .tenner-label, .section--deepest .tenner-label { color: var(--fg-invert-muted); }

/* ===========================================================================
   9. Panels and ruled index rows (replacing card grids)
   =========================================================================== */
.card, .panel { background: none; border: var(--rw-hair) solid var(--rule-mid);
                border-radius: var(--radius); padding: var(--sp-5); }
.card h2, .panel h2,
.card h3, .panel h3 { margin-bottom: var(--sp-3); }
.card p, .panel p { color: var(--fg-muted); }
.card--plain { border: 0; padding: 0; }
.card--accent { border: var(--rw-hair) solid var(--rule-mid);
                border-top: var(--rw-heavy) solid var(--oxblood); }
.section--deep .card, .section--deep .panel,
.section--deepest .card, .section--deepest .panel { border-color: var(--fg-invert-muted); }

/* A numbered ruled index: the co-operative annual-return look. */
.index { list-style: none; padding: 0; margin: 0;
         border-top: var(--rw-mid) solid var(--ink); }
.index > li { display: grid; grid-template-columns: 3.5rem 1fr;
              grid-auto-rows: min-content;
              column-gap: var(--sp-4); row-gap: var(--sp-2); align-items: baseline;
              padding-block: var(--sp-5);
              border-bottom: var(--rw-hair) solid var(--rule); }
.index > li > *:not(.index-num) { grid-column: 2; }
.index-num { grid-column: 1; grid-row: 1;
             font-family: var(--font-figure); font-variant-numeric: tabular-nums;
             font-size: var(--fs-small); color: var(--accent);
             font-weight: var(--fw-head); }
.index h3 { margin-bottom: var(--sp-2); }
.index p { color: var(--fg-muted); max-width: var(--measure); }
/* The numbers are <p class="index-num">, so ".index p" above outranked
   ".index-num" on specificity and every index number was rendering muted grey
   instead of oxblood. This puts the accent back. */
.index > li > .index-num { color: var(--accent); }
@media (max-width: 560px) { .index > li { grid-template-columns: 2.5rem 1fr; gap: var(--sp-3); } }

/* An index on one of the dark bands inherited the light-background greys:
   #4A443E body text on #171514 is 1.9:1, well under the 4.5:1 floor, and the
   oxblood numbers fared no better. About Us, Membership and Governance all
   carry one. The ink rules bounding the list were invisible there too. */
.section--deep .index, .section--deepest .index { border-top-color: var(--fg-invert); }
.section--deep .index > li, .section--deepest .index > li { border-bottom-color: var(--fg-invert-muted); }
.section--deep .index p, .section--deepest .index p { color: var(--fg-invert-muted); }
.section--deep .index > li > .index-num,
.section--deepest .index > li > .index-num { color: var(--fg-invert); }

/* The home page's section index. Each row is a destination, so the heading
   carries the link and the whole row responds, without nesting a block of
   text inside an anchor. */
.index--links > li { transition: background-color .12s ease; }
.index--links > li:hover { background: var(--paper-2); }
.index--links h3 a { color: var(--ink); text-decoration: none;
                     display: inline-flex; align-items: baseline; gap: var(--sp-3);
                     padding-block: .15rem; }
.index--links h3 a::after { content: "\2192"; color: var(--accent);
                            font-size: var(--fs-small); transition: transform .12s ease; }
.index--links > li:hover h3 a::after { transform: translateX(0.2em); }
.index--links h3 a:hover, .index--links h3 a:focus-visible { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .index--links > li, .index--links h3 a::after { transition: none; }
  .index--links > li:hover h3 a::after { transform: none; }
}

/* Home page bereavement strip: the route out, kept short. Contact detail
   belongs on the bereavement and contact pages, not here. */
.urgent-strip { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6);
                align-items: center; }
.urgent-lines { display: grid; gap: var(--sp-3); justify-items: stretch; }
.urgent-tel { font-family: var(--font-figure); font-variant-numeric: tabular-nums;
              font-size: var(--fs-h3); font-weight: var(--fw-head);
              color: var(--fg-invert); text-decoration: none;
              padding-block: var(--sp-2);
              border-bottom: var(--rw-hair) solid var(--fg-invert-muted); }
.urgent-tel:hover, .urgent-tel:focus-visible { color: var(--fg-invert);
              border-bottom-color: var(--fg-invert); }
@media (max-width: 760px) {
  .urgent-strip { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* Figures band: a horizontal row divided by vertical hairlines. */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
           border-top: var(--rw-heavy) solid currentColor;
           border-bottom: var(--rw-hair) solid currentColor; }
.figures > * { padding: var(--sp-5) var(--sp-4);
               border-left: var(--rw-hair) solid var(--rule); }
.figures > *:first-child { border-left: 0; padding-left: 0; }
.section--deep .figures > *, .section--deepest .figures > * { border-left-color: var(--fg-invert-muted); }

.stat { text-align: left; }
.stat-big { display: block; font-family: var(--font-figure);
            font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
            font-weight: var(--fw-display); line-height: 1; color: inherit; }
.stat-label { display: block; margin-top: var(--sp-3); font-size: var(--fs-small);
              color: var(--fg-muted); }
.section--deep .stat-label, .section--deepest .stat-label { color: var(--fg-invert-muted); }

/* ===========================================================================
   10. Process — a real ordered list, numbered and ruled
   =========================================================================== */
.steps, .process { list-style: none; padding: 0; margin: 0;
                   display: grid; gap: 0;
                   border-top: var(--rw-mid) solid var(--ink); }
.steps--4, .steps--5 { grid-template-columns: 1fr; }
.step, .process > li { display: grid; grid-template-columns: 4rem 1fr;
                       grid-auto-rows: min-content;
                       column-gap: var(--sp-5); row-gap: var(--sp-3); align-items: start;
                       padding-block: var(--sp-5);
                       border-bottom: var(--rw-hair) solid var(--rule);
                       background: none; border-radius: 0; }
.step h3, .process h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.step p, .process p { color: var(--fg-muted); max-width: var(--measure); }
.step > *:not(.step-num), .process > li > *:not(.process-num) { grid-column: 2; }
/* Row 1 only. `1 / span 99` generates 99 empty implicit rows and blows the
   list open to several screens tall. */
.step-num, .process-num { grid-column: 1; grid-row: 1;
                          font-family: var(--font-figure); font-variant-numeric: tabular-nums;
                          font-size: var(--fs-h3); font-weight: var(--fw-head);
                          color: var(--accent); line-height: var(--lh-head); }
.steps { counter-reset: step; }
.step-num::before { counter-increment: step; content: "0" counter(step); }
@media (max-width: 560px) { .step, .process > li { grid-template-columns: 2.5rem 1fr; gap: var(--sp-3); } }

/* ===========================================================================
   11. Lists
   =========================================================================== */
.checklist { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.checklist li { position: relative; padding-left: 1.9rem; color: var(--fg-muted); }
/* currentColor box, so it needs no re-encoding when the palette moves. */
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .45em; height: .8em; border: var(--rw-mid) solid currentColor;
  border-left: 0; border-top: 0; transform: rotate(40deg) translate(.15em, -.15em);
  color: var(--accent);
}
.checklist--gold li::before { color: var(--ink); }
.section--deep .checklist li, .section--deepest .checklist li { color: var(--fg-invert-muted); }
.section--deep .checklist li::before, .section--deepest .checklist li::before { color: var(--fg-invert); }

.deflist { display: grid; gap: 0; border-top: var(--rw-mid) solid var(--ink); }
.deflist > div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr;
                 gap: var(--sp-5); padding-block: var(--sp-4);
                 border-bottom: var(--rw-hair) solid var(--rule); }
.deflist dt { font-family: var(--font-display); font-size: var(--fs-h4);
              font-weight: var(--fw-head); color: var(--ink); }
.deflist dd { color: var(--fg-muted); margin: 0; }
.section--deep .deflist dt, .section--deepest .deflist dt { color: var(--fg-invert); }
.section--deep .deflist dd, .section--deepest .deflist dd { color: var(--fg-invert-muted); }
.section--deep .deflist, .section--deepest .deflist { border-top-color: var(--fg-invert); }
.section--deep .deflist > div, .section--deepest .deflist > div { border-bottom-color: var(--fg-invert-muted); }
@media (max-width: 560px) { .deflist > div { grid-template-columns: 1fr; gap: var(--sp-2); } }

.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose p, .prose li { color: var(--fg-muted); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: var(--sp-3); }
.prose > * + * { margin-top: var(--sp-4); }

/* ===========================================================================
   12. Statement of account (the joining cost)
   =========================================================================== */
.price-card { border-top: var(--rw-heavy) solid var(--ink);
              border-bottom: var(--rw-heavy) solid var(--ink);
              padding-block: var(--sp-5); }
.price-total { display: block; font-family: var(--font-figure);
               font-size: clamp(2.6rem, 1.8rem + 3vw, 3.6rem);
               font-weight: var(--fw-display); line-height: 1; color: var(--ink); }
.price-sub { color: var(--fg-muted); font-size: var(--fs-small); }
.price-lines { list-style: none; padding: 0; margin-top: var(--sp-5); display: grid; }
.price-lines li { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4);
                  padding-block: var(--sp-3); color: var(--fg-muted);
                  border-bottom: var(--rw-hair) solid var(--rule); }
.price-lines li:last-child { border-bottom: 0; }
.price-lines b { color: var(--ink); font-weight: var(--fw-bold); text-align: right; }

/* ===========================================================================
   13. FAQ accordion
   =========================================================================== */
.faq { border-top: var(--rw-mid) solid var(--ink); }
.faq details { border-bottom: var(--rw-hair) solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline;
               gap: var(--sp-4); cursor: pointer; list-style: none;
               padding-block: var(--sp-5); font-family: var(--font-display);
               font-size: var(--fs-h4); font-weight: var(--fw-head); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-figure);
                      font-size: 1.4rem; color: var(--accent); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding-bottom: var(--sp-5); color: var(--fg-muted); max-width: var(--measure); }

/* ===========================================================================
   14. Contact directory
   =========================================================================== */
.contact-panel { background: var(--ink); color: var(--fg-invert);
                 border-radius: var(--radius); padding: var(--sp-6); }
.contact-panel h2 { color: var(--fg-invert); }
.contact-rows { display: grid; margin-top: var(--sp-5); }
.contact-rows a { color: var(--fg-invert); }
.contact-row { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr;
               gap: var(--sp-4); padding-block: var(--sp-3);
               border-bottom: var(--rw-hair) solid var(--fg-invert-muted);
               color: var(--fg-invert-muted); }
.contact-row:last-child { border-bottom: 0; }
.contact-row b { color: var(--fg-invert); font-weight: var(--fw-bold); }
/* apply.js emits .contact-row for the review summary, on paper not ink. */
.form-card .contact-row, #applySummary .contact-row {
  border-bottom-color: var(--rule); color: var(--fg-muted); }
.form-card .contact-row b, #applySummary .contact-row b { color: var(--ink); }
/* Same rows on paper: contact.php lists the Society's details inside a light
   .card, where the inverted link and rule colours would be near-invisible. */
.card .contact-row { border-bottom-color: var(--rule); color: var(--fg-muted); }
.card .contact-row b { color: var(--ink); }
.card .contact-rows a { color: var(--accent); }
/* Separates two equally valid numbers on one row. Both numbers, the separator
   and the aside live in ONE span: .contact-row is a two-column grid, so a bare
   second element in the value would be laid out as a new grid cell. */
.contact-row .sep { color: var(--fg-faint); padding-inline: 0.15em; }
.contact-row .contact-aside { white-space: nowrap; color: inherit; opacity: 0.85; }
@media (max-width: 560px) { .contact-row { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* ===========================================================================
   15. Quotation with its source
   =========================================================================== */
.ayah { font-family: var(--font-display); font-size: var(--fs-lead);
        font-style: italic; line-height: var(--lh-lead); color: var(--ink);
        border-left: var(--rw-heavy) solid var(--oxblood);
        padding: var(--sp-4) 0 var(--sp-4) var(--sp-5); margin: 0; }
.ayah p { margin: 0; max-width: 46ch; }
.ayah cite { display: block; margin-top: var(--sp-4); font-family: var(--font-body);
             font-style: normal; font-size: var(--fs-micro); letter-spacing: .08em;
             text-transform: uppercase; color: var(--fg-faint); }
.section--deep .ayah, .section--deepest .ayah {
  color: var(--fg-invert); border-left-color: var(--fg-invert); }
.section--deep .ayah cite, .section--deepest .ayah cite { color: var(--fg-invert-muted); }

/* ===========================================================================
   16. Notes and asides
   =========================================================================== */
.note { background: none; border-left: var(--rw-mid) solid var(--oxblood);
        border-radius: 0; padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); }
.note p { color: var(--fg-muted); }
.note h3 { margin-bottom: var(--sp-3); }
.section--deep .note, .section--deepest .note { border-left-color: var(--fg-invert); }

.tbc { color: var(--fg-faint); font-style: italic; }
.hint { font-size: var(--fs-small); color: var(--fg-muted); }
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }

/* ===========================================================================
   17. Forms
   =========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field label { font-weight: var(--fw-bold); font-size: var(--fs-small); color: var(--ink); }
.field .hint { font-weight: var(--fw-body); }
.field .req { color: var(--oxblood); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

input, select, textarea {
  font-family: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--bg-field);
  border: var(--rw-mid) solid var(--rule-mid);   /* 3.3:1, meaningful boundary */
  border-radius: var(--radius); padding: .7rem .8rem; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: var(--focus-width) solid var(--ink); outline-offset: 1px;
  border-color: var(--ink);
}
textarea { min-height: 140px; resize: vertical; }

/* Radios and checkboxes were left at the browser default, 13px square. The
   Society's readers are often older, and a 13px target beside a one-word label
   is a hard thing to hit. The box is enlarged and the label given enough
   height that the row itself clears the 24px target-size guideline. */
.check { display: flex; gap: var(--sp-3); align-items: flex-start; }
.check input { width: 1.25rem; height: 1.25rem; flex-shrink: 0;
               margin-top: .15rem; accent-color: var(--ink); }
.check label { font-weight: var(--fw-body); color: var(--fg-muted);
               min-height: 1.5rem; display: flex; align-items: center; }

.form-card { background: none; border: var(--rw-mid) solid var(--ink);
             border-radius: var(--radius); padding: var(--sp-6); }

/* Wizard. apply.js depends on .wizard-step, .wizard-progress, .is-current,
   .is-done, [data-next] and [data-prev]; the names must not move. */
.wizard-progress { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-6);
                   flex-wrap: wrap; padding: 0; }
.wizard-progress li { list-style: none; flex: 1; min-width: 120px;
                      font-size: var(--fs-micro); letter-spacing: .06em;
                      text-transform: uppercase; color: var(--fg-faint);
                      padding-top: var(--sp-3);
                      border-top: var(--rw-heavy) solid var(--rule); }
.wizard-progress li.is-current { color: var(--ink); font-weight: var(--fw-bold);
                                 border-top-color: var(--oxblood); }
.wizard-progress li.is-done { color: var(--fg-muted); border-top-color: var(--ink); }
.wizard-step { display: none; }
.wizard-step.is-current { display: block; }
.wizard-nav { display: flex; justify-content: space-between; gap: var(--sp-4);
              margin-top: var(--sp-6); }

.dependant-row, .repeat-row { border: var(--rw-hair) solid var(--rule-mid);
                              border-radius: var(--radius); padding: var(--sp-4);
                              position: relative; }
.dependant-row + .dependant-row { margin-top: var(--sp-4); }
.remove-row { position: absolute; top: var(--sp-3); right: var(--sp-3);
              background: none; border: 0; color: var(--oxblood); cursor: pointer;
              font-size: var(--fs-small); text-decoration: underline; }
.dep-err { color: var(--oxblood) !important; }

.form-status { border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
               font-size: var(--fs-small); border-left: var(--rw-heavy) solid var(--rule-mid);
               background: var(--paper-2); color: var(--ink); }
.form-status[hidden] { display: none; }
.form-status.is-success { background: var(--assent-tint); border-left-color: var(--assent); }
.form-status.is-error { background: var(--oxblood-tint); border-left-color: var(--oxblood); }
.form-status h3 { margin-bottom: var(--sp-2); }

/* ===========================================================================
   18. Eligibility checker
   =========================================================================== */
.quiz-count { font-size: var(--fs-micro); letter-spacing: var(--tr-mark);
              text-transform: uppercase; color: var(--fg-faint);
              border-bottom: var(--rw-hair) solid var(--rule);
              padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); }
.quiz-q[hidden] { display: none; }
.quiz-q.is-current > label:first-child { color: var(--ink); }

.outcome { border-left: var(--rw-heavy) solid var(--rule-mid);
           padding: var(--sp-5); margin-top: var(--sp-6); background: var(--paper-2); }
.outcome h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.outcome p { margin-bottom: var(--sp-5); color: var(--fg-muted); max-width: var(--measure); }
.outcome--yes  { border-left-color: var(--assent);  background: var(--assent-tint); }
.outcome--talk { border-left-color: var(--slate);   background: var(--slate-tint); }
.outcome--no   { border-left-color: var(--oxblood); background: var(--oxblood-tint); }

/* ===========================================================================
   19. Advance-balance ledger (how-it-works)
   =========================================================================== */
.ledger { display: grid; gap: var(--sp-5); }
.ledger-meter { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.ledger-chit { display: grid; place-items: center; min-width: 4.5rem;
               padding: var(--sp-4) var(--sp-3); font-family: var(--font-figure);
               font-variant-numeric: tabular-nums; font-size: var(--fs-h3);
               border: var(--rw-mid) solid var(--ink); border-radius: var(--radius);
               background: var(--ink); color: var(--paper); }
.ledger-chit.is-drawn { background: none; color: var(--fg-faint);
                        border-style: dashed; border-color: var(--rule-mid);
                        text-decoration: line-through; }
.ledger-caption { font-size: var(--fs-lead); color: var(--fg-muted); min-height: 2.6em; }

/* Wide content scrolls inside its own box; the page body must never scroll
   sideways. The four-column ledger does not fit a 360px screen. */
.table-scroll { overflow-x: auto; }
.ledger-table { width: 100%; min-width: 26rem; border-collapse: collapse; }
.ledger-table caption { text-align: left; }
.ledger-table th, .ledger-table td { padding: var(--sp-3) var(--sp-3);
                                     border-bottom: var(--rw-hair) solid var(--rule);
                                     text-align: left; }
.ledger-table thead th { font-family: var(--font-body); font-size: var(--fs-micro);
                         letter-spacing: var(--tr-mark); text-transform: uppercase;
                         color: var(--fg-faint); font-weight: var(--fw-bold);
                         border-bottom: var(--rw-mid) solid var(--ink); }
.ledger-table tbody th { font-weight: var(--fw-body); color: var(--fg-muted); }
.ledger-table .num, .ledger-table th.num { text-align: right; }
.ledger-table tr.is-current { background: var(--paper-2); }
.ledger-table tr.is-current th[scope="row"] { font-weight: var(--fw-bold); color: var(--ink);
                                              box-shadow: inset var(--rw-heavy) 0 0 var(--oxblood); }
.ledger-controls { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.ledger-controls[hidden] { display: none; }
.ledger-dots { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.ledger-dot { width: .7rem; height: .7rem; border: var(--rw-mid) solid var(--rule-mid);
              border-radius: var(--radius); }
.ledger-dot.is-on { background: var(--oxblood); border-color: var(--oxblood); }

/* ===========================================================================
   20. Assistance pool
   =========================================================================== */
.pool { margin: 0; display: grid; gap: var(--sp-5); }
.pool-figure { display: grid; gap: var(--sp-2);
               border-top: var(--rw-heavy) solid currentColor;
               border-bottom: var(--rw-hair) solid currentColor;
               padding-block: var(--sp-5); }
.pool-count, .pool-total { font-family: var(--font-figure);
                           font-variant-numeric: tabular-nums lining-nums;
                           font-weight: var(--fw-display); line-height: 1; }
.pool-count { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.pool-total { font-size: var(--fs-display); letter-spacing: var(--tr-display); }
.pool-conj { font-size: var(--fs-small); letter-spacing: .06em;
             text-transform: uppercase; color: var(--fg-muted); }
.section--deep .pool-conj, .section--deepest .pool-conj { color: var(--fg-invert-muted); }
.pool-caption { font-size: var(--fs-small); color: var(--fg-muted); max-width: var(--measure); }
/* The pool sits on a dark band, where this grey was 1.9:1. The illustrative
   state below was already handled; the resting state was not, so the caption
   that is on screen most of the time was the unreadable one. */
.section--deep .pool-caption, .section--deepest .pool-caption { color: var(--fg-invert-muted); }
.pool.is-illustrative .pool-caption { color: var(--oxblood); font-weight: var(--fw-bold); }
/* Shown while ACTIVE_MEMBERS is the content pack's worked example rather than
   a real count, so the figures above are never read as the Society's position. */
.pool-flag { font-size: var(--fs-small); color: var(--oxblood);
             font-weight: var(--fw-bold); max-width: 52ch;
             border-left: var(--rw-mid) solid var(--oxblood);
             padding-left: var(--sp-4); margin-top: var(--sp-4); }
.section--deep .pool-flag, .section--deepest .pool-flag {
             color: var(--fg-invert); border-left-color: var(--fg-invert); }
.section--deep .pool.is-illustrative .pool-caption,
.section--deepest .pool.is-illustrative .pool-caption { color: var(--fg-invert); }

.pool-control { display: grid; gap: var(--sp-3); }
.pool-control[hidden] { display: none; }
.pool-control label { font-size: var(--fs-small); color: var(--fg-muted); }
.pool-control .btn { justify-self: start; }
.pool-control output { font-family: var(--font-figure); font-variant-numeric: tabular-nums;
                       font-size: var(--fs-small); color: var(--fg-muted); }

/* Range: each vendor pseudo-element needs its OWN rule. One unknown
   pseudo-element in a selector list invalidates the whole rule. */
/* The height matters. With appearance:none and only a 2px track, the input's
   own box was 2px tall: the thumb overhung a control you could barely hit with
   a finger, and the focus ring drew as a hairline sliver. The track stays 2px
   and is centred inside the taller box, so nothing looks different. */
.pool-control input[type="range"] { -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.75rem; background: none; padding: 0; border: 0; }
.pool-control input[type="range"]::-webkit-slider-runnable-track {
  height: var(--rw-mid); background: var(--rule-mid); }
.pool-control input[type="range"]::-moz-range-track {
  height: var(--rw-mid); background: var(--rule-mid); }
.pool-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none;
  width: 1.1rem; height: 1.1rem; margin-top: -.5rem; border-radius: var(--radius);
  background: var(--ink); border: var(--rw-mid) solid var(--ink); cursor: pointer; }
.pool-control input[type="range"]::-moz-range-thumb {
  width: 1.1rem; height: 1.1rem; border-radius: var(--radius);
  background: var(--ink); border: var(--rw-mid) solid var(--ink); cursor: pointer; }

/* On an inverted band an ink thumb on an ink ground is invisible. Each
   vendor pseudo-element still needs its own rule. */
.section--deep .pool-control input[type="range"]::-webkit-slider-runnable-track,
.section--deepest .pool-control input[type="range"]::-webkit-slider-runnable-track {
  background: var(--fg-invert-muted); }
.section--deep .pool-control input[type="range"]::-moz-range-track,
.section--deepest .pool-control input[type="range"]::-moz-range-track {
  background: var(--fg-invert-muted); }
.section--deep .pool-control input[type="range"]::-webkit-slider-thumb,
.section--deepest .pool-control input[type="range"]::-webkit-slider-thumb {
  background: var(--paper); border-color: var(--paper); }
.section--deep .pool-control input[type="range"]::-moz-range-thumb,
.section--deepest .pool-control input[type="range"]::-moz-range-thumb {
  background: var(--paper); border-color: var(--paper); }
.section--deep .pool-control label, .section--deepest .pool-control label,
.section--deep .pool-control output, .section--deepest .pool-control output {
  color: var(--fg-invert-muted); }

/* ===========================================================================
   21. Bereavement pathway
   =========================================================================== */
.callbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
           gap: 0; border-top: var(--rw-mid) solid var(--ink);
           border-bottom: var(--rw-mid) solid var(--ink); }
.callbar-action { display: flex; flex-direction: column; gap: var(--sp-1);
                  padding: var(--sp-5) var(--sp-4); text-decoration: none;
                  border-left: var(--rw-hair) solid var(--rule); color: var(--ink); }
.callbar-action:first-child { border-left: 0; }
.callbar-action:hover { background: var(--paper-2); color: var(--ink); }
.callbar-label { font-size: var(--fs-micro); letter-spacing: var(--tr-mark);
                 text-transform: uppercase; color: var(--accent); font-weight: var(--fw-bold); }
.callbar-value { font-family: var(--font-display); font-size: var(--fs-h3);
                 font-weight: var(--fw-head); }
.callbar-none { padding: var(--sp-5) var(--sp-4); color: var(--fg-faint); font-style: italic;
                border-left: var(--rw-hair) solid var(--rule); }
.callbar-none:first-child { border-left: 0; }

/* Two by two, not four across. The bar lives inside the narrow measure, so it
   is 656px wide however large the window, and auto-fit put three items on one
   row and stranded the email on a second. Four equal tracks would be 164px,
   which clips the email address at 187px. Two rows of two are even, and every
   value has room. */
@media (min-width: 701px) {
  .callbar { grid-template-columns: repeat(2, 1fr); }
  .callbar-action:nth-child(odd), .callbar-none:nth-child(odd) { border-left: 0; }
  .callbar-action:nth-child(n+3), .callbar-none:nth-child(n+3) {
    border-top: var(--rw-hair) solid var(--rule); }
}

/* On a phone the bar is pinned to the bottom, within thumb reach, so a
   family reading the documents list further down can still call in one tap.
   position:sticky would not do it here: the bar sits near the top of the
   page, so it would scroll away with its container. */
@media (max-width: 700px) {
  .callbar { position: fixed; inset: auto 0 0 0; z-index: 30;
             background: var(--paper); border-top: var(--rw-mid) solid var(--ink);
             border-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
             padding-bottom: env(safe-area-inset-bottom, 0); }
  .callbar-action, .callbar-none { padding: var(--sp-3) var(--sp-2); text-align: center;
                                   align-items: center; justify-content: center;
                                   min-width: 0; }
  /* Four columns at 320px leaves ~60px of content width, narrower than an
     email address or the word WHATSAPP, so both must be free to break rather
     than spill over the hairline into the next action. */
  .callbar-label { font-size: 0.58rem; letter-spacing: 0.02em; }
  .callbar-value { font-size: var(--fs-micro); line-height: 1.25; }
  .callbar-label, .callbar-value { overflow-wrap: anywhere; max-width: 100%; }
  .callbar-none { font-size: var(--fs-micro); }
  /* Clear the bar so it never covers the end of the page. The bar now carries
     four actions, and at 320px the phone numbers wrap onto a second line, so
     it stands ~122px tall: 9rem leaves headroom without a visible gap. */
  body.has-callbar { padding-bottom: 9rem; }
}

.tasklist { list-style: none; padding: 0; margin: 0;
            border-top: var(--rw-mid) solid var(--ink); }
.tasklist li { border-bottom: var(--rw-hair) solid var(--rule); }
.tasklist label { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
                  align-items: start; padding-block: var(--sp-4);
                  cursor: pointer; color: var(--fg-muted); font-weight: var(--fw-body); }
.tasklist input { width: 1.5rem; height: 1.5rem; margin-top: .05rem;
                  accent-color: var(--ink); flex-shrink: 0; }
.tasklist li.is-done label { color: var(--fg-faint); text-decoration: line-through; }
.tally { font-size: var(--fs-small); color: var(--fg-muted); margin-top: var(--sp-4); }
.tasklist-note { font-size: var(--fs-micro); color: var(--fg-faint); }

.print-only { display: none; }
.sheet { display: grid; gap: var(--sp-6); }

/* ===========================================================================
   22. Footer
   =========================================================================== */
.site-footer { background: var(--ink); color: var(--fg-invert-muted);
               padding-block: var(--sp-7) var(--sp-6); margin-top: auto;
               border-top: var(--rw-heavy) solid var(--ink); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-7); }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.site-footer h2 { color: var(--fg-invert); font-size: var(--fs-micro);
                  letter-spacing: var(--tr-mark); text-transform: uppercase;
                  font-family: var(--font-body); font-weight: var(--fw-bold);
                  border-bottom: var(--rw-hair) solid var(--fg-invert-muted);
                  padding-bottom: var(--sp-2); margin-bottom: var(--sp-4); }
.footer-brand-name { font-family: var(--font-display); font-size: var(--fs-h4);
                     font-weight: var(--fw-head); color: var(--fg-invert);
                     line-height: var(--lh-head); margin-bottom: var(--sp-4); }
.footer-note { font-size: var(--fs-small); color: var(--fg-invert-muted);
               max-width: 46ch; }
.footer-note + .footer-note { margin-top: var(--sp-4); }
/* The links were 18px tall on a phone. The row keeps its rhythm, but each
   link now presents a target a thumb can find. */
.footer-links { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.footer-links a { color: var(--fg-invert-muted); font-size: var(--fs-small);
                  text-decoration: none; display: inline-block;
                  padding-block: .2rem; }
.footer-links a:hover { color: var(--fg-invert); text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--sp-5);
                 flex-wrap: wrap; margin-top: var(--sp-7); padding-top: var(--sp-5);
                 border-top: var(--rw-hair) solid var(--fg-invert-muted);
                 font-size: var(--fs-micro); color: var(--fg-invert-muted); }

/* ===========================================================================
   23. Print — the bereavement one-pager
   =========================================================================== */
@media print {
  @page { margin: 18mm; }
  html { scroll-behavior: auto; }
  body { background: #fff; color: #000; font-size: 11pt; display: block; }
  .util-bar, .site-header, .site-footer, .callbar, .form-card, .btn, .btn-row,
  .ledger-controls, .pool-control, .no-print, .nav-toggle, .tasklist-note,
  .faq summary::after { display: none !important; }
  body.has-callbar { padding-bottom: 0 !important; }
  .print-only { display: block !important; }
  a { color: #000; text-decoration: none; }
  .section { padding-block: 0; }
  .page-head { border-bottom: 2pt solid #000; padding-block: 0 8pt; margin-bottom: 12pt; }
  .tasklist, .index, .process, .steps, .deflist, .ledger-table, .faq { border-top-color: #000; }
  .tasklist li, .index > li, .step, .process > li { break-inside: avoid; }
  /* Printable checkboxes: the browser will not print an unchecked native box. */
  .tasklist input { -webkit-appearance: none; appearance: none;
    width: 1em; height: 1em; border: 1pt solid #000; border-radius: 0;
    print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .tasklist input:checked::after { content: "\2713"; display: block;
    line-height: 1; font-size: .9em; text-align: center; }
  .tasklist li.is-done label { text-decoration: none; color: #000; }
  .ayah { border-left: 2pt solid #000; }
  details { display: block; }
  details > div { display: block !important; }
}