/* ===========================================================================
   Atkinson Hyperlegible — Braille Institute of America, SIL Open Font License.
   Designed to increase legibility for readers with low vision by making
   commonly-confused letterforms (I l 1, O 0, b d) distinguishable.

   Self-hosted: no third-party request, nothing leaked to a font CDN about who
   is reading the Foundation's board papers, and no outage when someone else's
   CDN is down. Only the subset a page needs is fetched — about 34 KB for
   English text, and nothing at all unless a reader turns it on.

   font-display: swap means text is readable in the fallback face immediately
   and reflows when the webfont arrives; it never blocks on the font.

   See public/fonts/LICENSE.txt
   =========================================================================== */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/atkinson-400i-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;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/atkinson-400i-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;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/atkinson-700i-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;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/atkinson-700i-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;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/atkinson-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;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/atkinson-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;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/atkinson-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;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/atkinson-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;
}

/* ===========================================================================
   hfblind.org — Hawaii Foundation for the Blind

   BRAND LOGIC
   -----------
   Three roles, held consistently. If you add a colour, give it a role first.

     Navy / sky blue   STRUCTURE.  Masthead, card rules, links, primary buttons.
     Gold              ATTENTION.  Focus rings, highlight fills, "act on this".
     Cream / near-black  SURFACE.

   Gold is never structure and navy is never attention. That separation is what
   keeps a three-colour kit from turning into decoration — and it is measured,
   not assumed: navy and gold stay 7.28:1 apart under deuteranopia, so a reader
   with red-green colour blindness can still tell structure from attention.

   Light and dark are the same hue family on purpose. Navy and #4DA6FF are one
   brand seen at two lightnesses; a different hue per theme reads as two brands.

   THE RULES THAT ARE EASY TO UNDO BY ACCIDENT
   -------------------------------------------
   1. Gold is a FILL in light mode, never a foreground. #F2A900 on cream is
      1.90:1 — it fails as text and fails even as a border. Use --gold-fg
      (#946A00, 4.59:1) when gold has to be a foreground on a light surface.
   2. Underlines on links are structural. Purple vs brown body text is 1.20:1
      and blue vs white is 2.94:1, both under the 3:1 that WCAG 1.4.1 wants
      when colour is the only cue. The underline carries it. Never remove it,
      including on hover.
   3. The focus ring is two-tone on purpose. A single colour cannot clear 3:1
      against both cream and near-black; every surface in this file was checked
      and at least one of the two rings always clears it.
   4. Colour is never the only carrier of meaning. Every status shows a symbol
      and a word as well as a hue.
   5. Two border tokens, and the difference matters. --border is decorative and
      may be subtle. --border-firm carries meaning (inputs, card edges, state)
      and is held at 3:1 or better.

   Every value below was measured, not chosen by eye. Ratios in the comments
   are against that theme's --page unless stated.
   =========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Surfaces --- */
  --page:        #FFF8E7;   /* Cream, as specified */
  --surface:     #FBF3DF;   /* Card. A whisper of lift — the BORDER delimits it,
                                 the way dark mode already works. Deep tan filled
                                 too much of the page: cards, table heads, the
                                 signed-in strip and the footer all at once read
                                 heavy and dated. */
  --surface-2:   #F2E7C9;   /* Table heads and the signed-in strip only */
  --border:      #C9B792;   /* Decorative hairline only */
  --border-firm: #8A7A5A;   /* Meaningful. 3.96 vs page, 3.75 vs surface */

  /* --- Text --- */
  --ink:         #4A3728;   /* 10.62 — AAA */
  --accent-fg:   #6A4A00;   /* 7.65 — the only way gold can be a FOREGROUND on a
                                 light ground. #F2A900 is 1.90 on cream: it fails
                                 as text and fails even as a 3:1 border. Used for
                                 eyebrow labels, where gold earns its third voice
                                 without breaking contrast. */
  --ink-muted:   #4F3B2C;   /*  9.94 page / 8.41 card — AAA on every surface.
                                 At AAA a muted tier nearly collapses into the
                                 body colour, so hierarchy is carried by size
                                 and weight instead. That is better practice
                                 anyway: see rule 4. */

  /* --- Structure --- */
  --brand:       #16324F;   /* Navy. 12.37 on page, 10.46 worst case — AAA with
                                 real headroom, and 7.28 from the gold under
                                 deuteranopia (the purple managed 4.77). Gold is
                                 the attention colour; the two must never be
                                 confusable. */
  --brand-deep:  #0D2036;   /* Hover. 15.53 */
  --brand-wash:  #E4EAF2;   /* Navy sits at 10.82 inside it */
  --visited:     #45305A;   /* 8.39 worst case. Matters in a document library:
                                 a director wants to see which minutes they have
                                 already opened. Browsers restrict :visited to
                                 COLOUR properties only, as a history-sniffing
                                 defence — an icon or a different underline is
                                 not available to us. */
  --on-brand:    #FFF8E7;   /* Cream on navy, 12.37 */

  /* --- Attention --- */
  --gold:        #F2A900;   /* FILL ONLY on light. See rule 1 */
  --gold-fg:     #946A00;   /* 4.59 — gold as a foreground */
  --on-gold:     #2B1F17;   /* 7.97 on gold — AAA */

  /* --- Focus, two-tone --- */
  --focus-inner: #2B1F17;   /* Carries it on cream (15.13) and gold (7.97) */
  --focus-outer: #FFCC00;   /* Carries it on purple (6.20) */

  /* --- Semantic state ---
     No red-green pairing anywhere: success leans blue-green, error leans
     orange-red, and each is always accompanied by a symbol and a word. */
  --ok:          #1F5214;   /* 8.01 on its own wash — AAA */
  --warn:        #6B4600;   /* 7.42 on its own wash — AAA */
  --stop:        #8C1D16;   /* 7.66 on its own wash — AAA */
  --ok-wash:     #E8F2E2;
  --warn-wash:   #FBF0D9;
  --stop-wash:   #FAE7E5;

  /* --- Masthead --- */
  --masthead-bg:   #16324F;
  --masthead-ink:  #FFF8E7;   /* 12.37 */
  --masthead-rule: #F2A900;   /* 6.52 on the navy — a rule needs 3:1 */

  /* --- Scrolling shadow ---
     The cue that a table continues past its frame. Decorative reinforcement
     only: the columns it points at are reachable by scroll and keyboard and
     are read in full by a screen reader, so nothing is carried by it alone. */
  --scroll-shadow: rgba(43, 31, 23, 0.34);

  --radius: 4px;
  --measure: 68ch;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
   DARK — "High contrast", softened from true black.

   #0A0A0A / #F5F5F5 is 18.16:1, still far above AAA. Pure #FFF on pure #000 is
   21:1, the maximum achievable, and for a large share of low-vision readers it
   is harder to read rather than easier: the light text haloes into the
   background. It is most reported by people with astigmatism. Softening by
   this much costs nothing measurable and removes the halation.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:        #0A0A0A;
    /* Dark cards cannot lift AND hold #4DA6FF at AAA — every step up in fill
       costs link contrast. The lift comes from the BORDER instead, which is
       also the more legible choice at low vision. */
    --surface:     #101113;   /* 1.05 vs page, link at 7.33 */
    --surface-2:   #141517;   /* 1.08 vs page, link at 7.15 */
    --border:      #34383D;
    --border-firm: #7A8088;   /* 4.72 vs page, 4.48 vs surface */

    --ink:         #F5F5F5;   /* 18.16 — AAA */
    --ink-muted:   #C2C6CD;   /* 11.55 page / 10.9 card — AAA everywhere */
    --accent-fg:   #FFCC00;   /* Gold IS safe as a foreground here (13.09) */

    --brand:       #4DA6FF;   /* 7.74 — AAA, and holds AAA on a raised card
                                 (7.33) where #3399FF would drop to 6.37 */
    --brand-deep:  #85C2FF;   /* 10.52 */
    --brand-wash:  #09131F;   /* blue clears 7.30 on it */
    --visited:     #D9BCFF;   /* 8.19 worst case — AAA */
    --on-brand:    #0A0A0A;   /* 7.74 on blue */

    --gold:        #FFCC00;   /* 13.09 — safe as fill AND foreground here */
    --gold-fg:     #FFCC00;
    --on-gold:     #0A0A0A;   /* 13.09 */

    --focus-inner: #FFCC00;   /* Carries it on page (13.09) and card (10.43) */
    --focus-outer: #0A0A0A;   /* Carries it on gold (13.09) and blue (7.74) */

    --ok:          #6FD08C;   /* 10.44 */
    --warn:        #F0C060;   /* 11.70 */
    --stop:        #FF9A93;   /*  9.71 */
    /* Tuned so a LINK clears 7:1 inside any notice, not just body text —
       links appear inside these. */
    --ok-wash:     #0B1A0A;
    --warn-wash:   #1C1605;
    --stop-wash:   #1E0D0B;

    --masthead-bg:   #14161A;
    --masthead-ink:  #F5F5F5;
    --masthead-rule: #FFCC00;

    /* Inverted: on a near-black page the cue has to be a light halo. */
    --scroll-shadow: rgba(245, 245, 245, 0.30);
  }
}

/* The same values for an explicit choice, so the toggle works on a machine set
   to light. Kept in sync by hand — change one, change both. */
:root[data-theme="dark"] {
  --page: #0A0A0A; --surface: #101113; --surface-2: #141517;
  --border: #34383D; --border-firm: #7A8088;
  --ink: #F5F5F5; --ink-muted: #C2C6CD; --accent-fg: #FFCC00;
  --brand: #4DA6FF; --brand-deep: #85C2FF; --brand-wash: #09131F;
  --visited: #D9BCFF; --on-brand: #0A0A0A;
  --gold: #FFCC00; --gold-fg: #FFCC00; --on-gold: #0A0A0A;
  --focus-inner: #FFCC00; --focus-outer: #0A0A0A;
  --ok: #6FD08C; --warn: #F0C060; --stop: #FF9A93;
  --ok-wash: #0B1A0A; --warn-wash: #1C1605; --stop-wash: #1E0D0B;
  --masthead-bg: #14161A; --masthead-ink: #F5F5F5; --masthead-rule: #FFCC00;
  --scroll-shadow: rgba(245, 245, 245, 0.30);
}

/* ---------------------------------------------------------------------------
   Forced colours (Windows High Contrast). The user's own palette replaces
   ours wholesale. This is the setting many low-vision readers actually use,
   and the job is to not fight it — anything that was carrying meaning through
   colour needs a real border, and focus follows the system highlight.
   --------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .status, .card, .notice, .doclist > li, .record, .sections__item,
  .alerts__item, .agenda__item, .meetinglist__item, .resolution, .tablewrap, progress {
    border: 1px solid CanvasText;
  }
  .notice { border-left-width: 6px; }
  .doclist > li, .record, .agenda__item { border-left-width: 5px; }
  .alerts__item, .resolution { border-left-width: 6px; }
  .ways__item { border-left: 3px solid CanvasText; }
  /* box-shadow is not rendered in forced-colors, so the two-tone ring has to
     fall back to a real outline. */
  :focus-visible { outline: 3px solid Highlight !important; box-shadow: none !important; }
}

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

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); margin-top: 2.25rem; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; margin-top: 1.75rem; }
h4 { font-size: 1.0625rem; margin-top: 1.25rem; }

p, ul, ol, table, figure, blockquote { margin: 0 0 1rem; }
p, li { max-width: var(--measure); }

ul, ol { padding-left: 1.5rem; }
li { margin-bottom: 0.35rem; }

/* Rule 2: the underline is structural. */
a { color: var(--brand); text-underline-offset: 0.18em; text-decoration-thickness: max(1px, 0.06em); }
a:hover { color: var(--brand-deep); text-decoration-thickness: max(2px, 0.12em); }
a:visited { color: var(--visited); }

/* Rule 3: two-tone. The transparent outline is the forced-colors anchor. */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--focus-inner), 0 0 0 6px var(--focus-outer);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--gold); color: var(--on-gold); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--page); color: var(--brand);
  padding: 0.75rem 1.25rem; font-weight: 700;
  border: 3px solid var(--brand); border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.shell { width: min(72rem, 100% - 3rem); margin-inline: auto; }
@media (max-width: 30rem) { .shell { width: calc(100% - 2rem); } }

main { padding: 2.25rem 0 4rem; }
/* Reached only by the skip link. A ring around the whole page would say
   nothing useful; the next Tab lands on the first control in the page. */
main:focus { outline: none; }
.prose { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   Masthead — structure colour, with a gold rule beneath it
   -------------------------------------------------------------------------- */

.masthead {
  background: var(--masthead-bg);
  color: var(--masthead-ink);
  border-bottom: 4px solid var(--masthead-rule);
}

.masthead__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 1rem 0;
}

.wordmark {
  color: var(--masthead-ink); text-decoration: none;
  font-weight: 700; font-size: 1.15rem; line-height: 1.2;
  display: block; letter-spacing: -0.01em;
}
.wordmark:visited { color: var(--masthead-ink); }
.wordmark:hover { color: var(--masthead-ink); text-decoration: underline; }
.wordmark span { display: block; }
.wordmark__sub { font-weight: 400; font-size: 0.9375rem; opacity: 0.92; }

.navtoggle {
  display: none; background: transparent; color: var(--masthead-ink);
  border: 2px solid currentColor; border-radius: var(--radius);
  font: inherit; font-weight: 700; padding: 0.5rem 0.9rem;
  cursor: pointer; min-height: 44px;
}

.nav { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.nav a {
  color: var(--masthead-ink); text-decoration: none;
  padding: 0.5rem 0.75rem; border-radius: var(--radius);
  border: 2px solid transparent; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav a:visited { color: var(--masthead-ink); }
.nav a:hover { background: rgba(127,127,127,0.3); text-decoration: underline; }
/* Current page carries a rule as well as a tint — a tint alone is colour-only
   information. aria-current carries it for assistive technology. */
.nav a[aria-current="page"] {
  background: rgba(127,127,127,0.32);
  border-color: var(--masthead-rule);
}

@media (max-width: 52rem) {
  .nav { width: 100%; flex-direction: column; }
  .nav a { width: 100%; }

  .navtoggle { display: inline-flex; align-items: center; gap: 0.5rem; }
  /* `.navtoggle { display }` outranks the user agent's `[hidden]`, so without
     this the button appears before JS has wired it up — and stays if JS never
     runs. A visible control that does nothing is worse than no control. */
  .navtoggle[hidden] { display: none; }

  /* The menu only collapses once JS has set data-collapsible, which it does in
     the same breath as revealing the toggle. Hiding it by default and relying
     on JS to reveal it is how a no-JS visitor loses the site. */
  .nav[data-collapsible="true"] { display: none; }
  .nav[data-collapsible="true"][data-open="true"] { display: flex; }
}

.whoami {
  /* Inside the header landmark, so it inherits the masthead's light ink
     unless told otherwise. */
  color: var(--ink);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-firm);
  font-size: 0.9375rem;
}
.whoami__inner {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
  align-items: center; justify-content: space-between; padding: 0.6rem 0;
}

/* --------------------------------------------------------------------------
   Buttons and forms
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; min-height: 44px; padding: 0.625rem 1.35rem;
  font: inherit; font-weight: 700; border-radius: var(--radius);
  border: 2px solid var(--brand); background: var(--brand);
  color: var(--on-brand); text-decoration: none; cursor: pointer;
}
.btn:visited { color: var(--on-brand); }
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); }
.btn--quiet { background: transparent; color: var(--brand); }
.btn--quiet:visited { color: var(--brand); }
.btn--quiet:hover { background: var(--brand-wash); color: var(--brand-deep); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.linkbtn {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--brand); text-decoration: underline;
  text-underline-offset: 0.18em; cursor: pointer; min-height: 44px;
}

.field { margin-bottom: 1.25rem; max-width: 34rem; }
.field > label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.field__hint {
  display: block; color: var(--ink-muted);
  font-size: 0.9375rem; margin-bottom: 0.4rem;
}
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
input[type="date"], select, textarea {
  width: 100%; min-height: 44px; padding: 0.55rem 0.7rem;
  font: inherit; color: var(--ink); background: var(--page);
  border: 2px solid var(--border-firm); border-radius: var(--radius);
}
textarea { min-height: 8rem; line-height: 1.5; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }

/* Named by element so it outranks the input[type=…] rule above, which it did
   not before 6 October 2026: an invalid text box kept its ordinary border. */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"],
[aria-invalid="true"] { border-color: var(--stop); border-width: 3px; }
.field__error { display: block; color: var(--stop); font-weight: 700; margin-top: 0.35rem; }

.errorsummary {
  border: 3px solid var(--stop); background: var(--stop-wash);
  border-radius: var(--radius); padding: 1rem 1.25rem;
  margin-bottom: 1.5rem; max-width: var(--measure);
}
.errorsummary h2 { margin-top: 0; font-size: 1.125rem; color: var(--stop); }
.errorsummary ul { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.notice {
  border: 1px solid var(--border-firm);
  border-left: 6px solid var(--border-firm);
  background: var(--surface);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.5rem; max-width: var(--measure);
}
.notice > :last-child { margin-bottom: 0; }
.notice__label {
  display: block; font-weight: 700; font-size: 0.875rem;
  letter-spacing: 0.06em; margin-bottom: 0.25rem;
}
.notice--ok   { border-color: var(--ok);    background: var(--ok-wash); }
.notice--ok   .notice__label { color: var(--ok); }
.notice--warn { border-color: var(--warn);  background: var(--warn-wash); }
.notice--warn .notice__label { color: var(--warn); }
.notice--stop { border-color: var(--stop);  background: var(--stop-wash); }
.notice--stop .notice__label { color: var(--stop); }
.notice--info { border-color: var(--brand); background: var(--brand-wash); }
.notice--info .notice__label { color: var(--brand); }

/* --------------------------------------------------------------------------
   Cards and grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
/* min(…, 100%): a column's minimum is in rem, so at enlarged text on a narrow
   screen 19rem is wider than the screen and the page scrolls sideways. Capped at
   the container's width, a column can never be wider than the screen. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-top: 4px solid var(--brand);   /* structure colour */
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card h2, .card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card p, .card li { max-width: none; }

.stat__label {
  display: block; font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 0.2rem;
}
.stat__value { display: block; font-size: 2.35rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.stat__note { display: block; color: var(--ink-muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Progress — a real <progress> so assistive tech reads the value, with the
   numbers written out beside it for everyone else.
   -------------------------------------------------------------------------- */

progress {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 0.8rem;
  border: 1px solid var(--border-firm); border-radius: 999px;
  background: var(--surface-2); overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--surface-2); }
progress::-webkit-progress-value { background: var(--brand); }
progress::-moz-progress-bar { background: var(--brand); }

/* --------------------------------------------------------------------------
   Status — symbol, then word, then colour, in that order of importance
   -------------------------------------------------------------------------- */

.status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9375rem; font-weight: 700;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  border: 2px solid var(--border-firm);
  background: var(--page); color: var(--ink); white-space: nowrap;
}
.status__symbol { font-size: 1rem; line-height: 1; }
.status--done        { border-color: var(--ok);    background: var(--ok-wash);    color: var(--ok); }
.status--in_progress { border-color: var(--brand); background: var(--brand-wash); color: var(--brand); }
.status--blocked     { border-color: var(--stop);  background: var(--stop-wash);  color: var(--stop); }
.status--not_started { border-color: var(--border-firm); background: var(--page); color: var(--ink-muted); }
.status--deferred    { border-color: var(--warn);  background: var(--warn-wash);  color: var(--warn); }

.tag {
  display: inline-block; font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.04em; padding: 0.15rem 0.5rem;
  border: 1px solid var(--border-firm); border-radius: var(--radius);
  color: var(--ink-muted); background: var(--page);
}
.code { font-family: var(--mono); font-size: 0.875rem; font-weight: 700; color: var(--ink-muted); }

/* An address is a single unbreakable token, so it sets a floor under its
   column — one 27-character address was holding the members table 225px wide
   on a phone. `anywhere` lets it fold. Addresses are not read aloud
   character-by-character from a visual line break, so this costs a screen
   reader nothing, and the cell still holds the exact string. */
.email { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Tables. Every one carries a <caption> and <th scope>. On a narrow screen it
   scrolls inside a focusable region rather than reflowing into unlabelled
   fragments — a scrollable region must be keyboard reachable (WCAG 2.1.1),
   hence tabindex="0" and the role/aria-label in the markup.
   -------------------------------------------------------------------------- */

.tablewrap {
  overflow-x: auto; margin-bottom: 1.5rem;
  border: 1px solid var(--border-firm); border-radius: var(--radius);

  /* Scrolling shadows. Two cover gradients painted in the page colour sit on
     top of two shadow gradients. `local` pins the covers to the scrolled
     content while the shadows stay fixed to the frame, so a shadow is revealed
     on whichever side still has columns out of view and hides itself when
     there is nothing to scroll to. Geometry drives it, so it cannot claim a
     table scrolls when it does not — and being CSS, it is still right with
     scripting off. */
  background:
    linear-gradient(to right, var(--page) 30%, transparent) 0 0 / 2.5rem 100% no-repeat local,
    linear-gradient(to left,  var(--page) 30%, transparent) 100% 0 / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) 0 0 / 0.85rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) 100% 0 / 0.85rem 100% no-repeat scroll;
  background-color: var(--page);
}

table { border-collapse: collapse; width: 100%; font-size: 1rem; }
caption {
  text-align: left; font-weight: 700; padding: 0.75rem 1rem;
  background: var(--surface-2); border-bottom: 1px solid var(--border-firm);
}
th, td {
  text-align: left; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
thead th { background: var(--surface); font-size: 0.9375rem; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface); }

/* On a phone the 1rem side padding is costing ~80px across a five-column
   table — more than a third of what overflows. Tightening it buys back real
   columns; 0.5rem still clears the 3px minimum gap that keeps adjacent cells
   from reading as one run of text. The vertical padding is left alone: it is
   what keeps the row a comfortable touch target. */
@media (max-width: 40rem) {
  th, td { padding-left: 0.5rem; padding-right: 0.5rem; }
  caption { padding-left: 0.65rem; padding-right: 0.65rem; }
}

/* --------------------------------------------------------------------------
   Document list
   -------------------------------------------------------------------------- */

.doclist { list-style: none; padding: 0; margin: 0 0 2rem; }
.doclist > li {
  border: 1px solid var(--border-firm);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-bottom: 0.75rem;
  background: var(--surface); max-width: none;
}
.doclist h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; }
.doclist__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  color: var(--ink-muted); font-size: 0.9375rem;
  margin: 0.4rem 0 0; max-width: none;
}
/* A document a screen reader cannot read is marked on the record, not hidden.
   Gold as attention — and the word is in the markup, so this is reinforcement,
   not the message. */
.doclist > li[data-readable="no"] { border-left-color: var(--gold-fg); }

/* --------------------------------------------------------------------------
   The record card — DOCUMENTS-PLAN.md section 5

   One shape, used in section lists, meeting papers and search results. Fixed
   order: title, date, one sentence, ways to read it, about. Position carries
   meaning, so a reader who has met one card can skip through a list of forty.
   -------------------------------------------------------------------------- */

.records { list-style: none; padding: 0; margin: 0 0 2.5rem; }

.record {
  border: 1px solid var(--border-firm);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--surface);
  max-width: none;
}
.record__title { margin: 0 0 0.2rem; font-size: 1.125rem; }
.record__date {
  margin: 0 0 0.6rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}
.record__summary { margin: 0 0 1rem; max-width: var(--measure); }
.record__see, .record__about { margin: 0.75rem 0 0; font-size: 0.9375rem; max-width: none; }

/* A record a screen reader cannot read is marked on the record, not hidden.
   Gold as attention — and the words are in the markup beside every version, so
   this is reinforcement, not the message. */
.record[data-readable="no"] { border-left-color: var(--gold-fg); }

/* The original leads the card, on one line: the link, what it is, and a tag
   only when a screen reader cannot read it. */
.record__original { margin: 0 0 1rem; max-width: none; }
/* After the Ways to read it list, the original closes the card (5 October 2026). */
.record__original--after { margin: 0.9rem 0 0; }
.record__original .ways__meta { display: inline; margin-left: 0.4rem; }
.record__original .tag { margin-left: 0.4rem; }

/* --- Ways to read it --- */

.ways__label {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 0.9375rem;
  max-width: none;
}
.ways { list-style: none; padding: 0; margin: 0; }
.ways__item {
  padding: 0.5rem 0 0.5rem 0.9rem;
  border-left: 3px solid var(--border);
  margin-bottom: 0.35rem;
  max-width: none;
}
.ways__item--absent { border-left-style: dashed; }
.ways__link { font-weight: 700; }
.ways__name { font-weight: 700; color: var(--ink-muted); }
.ways__meta {
  display: block;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  max-width: var(--measure);
}
/* Marked by the words first. The dotted rule is reinforcement for a sighted
   reader scanning a list, never the message itself. */
.ways__meta--unchecked {
  border-left: 3px dotted var(--gold-fg);
  padding-left: 0.6rem;
  margin-top: 0.2rem;
}

.ways__note {
  display: block;
  margin-top: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  max-width: var(--measure);
}

/* --- The section hub --- */

.sections { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.sections__item {
  border: 1px solid var(--border-firm);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  max-width: none;
}
.sections__title { margin: 0 0 0.35rem; font-size: 1.0625rem; }
.sections__blurb { margin: 0 0 0.35rem; max-width: var(--measure); }
.sections__holds, .sections__count {
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  max-width: var(--measure);
}
.sections--compact .sections__item { border-top-width: 1px; padding: 0.75rem 1rem; }

@media (min-width: 52rem) {
  .sections { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .sections__item { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   What needs you now, the agenda, and the meeting list — Phase 1
   -------------------------------------------------------------------------- */

.alerts { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.alerts__item {
  border: 1px solid var(--border-firm);
  border-left: 6px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  max-width: none;
}
.alerts__item--warn { border-left-color: var(--gold-fg); }
.alerts__label {
  display: block; font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--accent-fg); margin-bottom: 0.2rem;
}
.alerts__text { margin: 0; max-width: var(--measure); }
.alerts__action { margin: 0.5rem 0 0; font-size: 0.9375rem; max-width: none; }

.agenda { list-style: none; padding: 0; margin: 0 0 2.5rem; counter-reset: none; }
.agenda__item {
  border: 1px solid var(--border-firm);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  max-width: none;
}
.agenda__title { margin: 0 0 0.35rem; font-size: 1.125rem; }
.agenda__meta {
  display: flex; flex-wrap: wrap; gap: 0.2rem 1rem;
  margin: 0 0 0.75rem; color: var(--ink-muted); font-size: 0.9375rem;
  max-width: none;
}
.agenda__plain { margin: 0 0 0.75rem; max-width: var(--measure); }
.agenda__body { margin: 0 0 0.75rem; }
.agenda__body p, .agenda__body li { max-width: var(--measure); }
.agenda__label {
  margin: 0.75rem 0 0.3rem; font-weight: 700; font-size: 0.9375rem;
  max-width: none;
}
/* Papers under an item are full record cards (class "records" as well). */
.agenda__papers { margin: 0 0 0.75rem; padding: 0; }
.agenda__paper-note { max-width: var(--measure); padding: 0.4rem 0; }
.agenda__advances, .agenda__resolution {
  margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--ink-muted);
  max-width: var(--measure);
}
.agenda__item:has(.agenda__resolution) { border-left-color: var(--gold-fg); }

.meetinglist { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.meetinglist__item {
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.9rem 1.25rem;
  margin-bottom: 0.75rem;
  max-width: none;
}
.meetinglist__item h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; }
.meetinglist__summary { margin: 0 0 0.35rem; max-width: var(--measure); }
.meetinglist__meta {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0;
  color: var(--ink-muted); font-size: 0.9375rem; max-width: none;
}

audio { width: 100%; max-width: var(--measure); margin: 0.5rem 0 1rem; }

/* The date under a meeting's title. Sized as a subtitle rather than marked up
   as a heading, because it is part of the title's meaning and not a section a
   reader would ever want to jump to. */
.page__subtitle {
  margin: -0.4rem 0 1.5rem;
  font-size: 1.125rem;
  color: var(--ink-muted);
  max-width: none;
}

.record__admin { margin: 0 0 1.5rem; max-width: none; }

/* The reconciliation report is model output rendered as markup. It is the one
   place in the portal that renders HTML it did not generate itself, so it is
   fenced visually and the text above it says what it is. */
.ocr-review { border-left: 4px solid var(--gold-fg); padding-left: 1rem; margin: 1rem 0 2rem; }
.ocr-review h2 { font-size: 1.0625rem; margin-top: 1.25rem; }

input[type="file"] {
  display: block;
  width: 100%;
  max-width: var(--measure);
  padding: 0.5rem;
  border: 2px solid var(--border-firm);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}
input[type="file"]:focus-visible { outline: 3px solid var(--focus-inner); outline-offset: 2px; }

.pager { margin: 0 0 2.5rem; color: var(--ink-muted); font-size: 0.9375rem; max-width: none; }
.pager__more { margin-left: 0.5rem; font-weight: 700; }

/* --------------------------------------------------------------------------
   Resolutions — Phase 2, the adoption chain

   These get weight deliberately. A resolution is the only thing on a meeting
   page that changed anything, and on a board that has spent a decade without a
   written record of its decisions, finding them should take no searching.
   -------------------------------------------------------------------------- */

.resolutions { list-style: none; padding: 0; margin: 0 0 2.5rem; }

.resolution {
  border: 1px solid var(--border-firm);
  border-left: 6px solid var(--gold-fg);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  max-width: none;
}
.resolution__title { margin: 0 0 0.5rem; font-size: 1.125rem; }
.resolution__number {
  display: block; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--accent-fg); margin-bottom: 0.15rem;
}
.resolution__text {
  margin: 0 0 0.75rem; padding: 0.5rem 0 0.5rem 1rem;
  border-left: 3px solid var(--border-firm);
}
.resolution__text p { margin: 0; max-width: var(--measure); }
/* Proposed wording runs to several clauses; each is its own paragraph and
   needs the space a reader expects between them. */
.agenda__proposed { margin: 0.75rem 0 0; }
.agenda__proposed .agenda__label { font-weight: 400; }
.resolution__text p + p { margin-top: 0.75rem; }
.resolution__outcome { margin: 0 0 0.4rem; max-width: var(--measure); }
.resolution__meta {
  display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0;
  color: var(--ink-muted); font-size: 0.9375rem; max-width: none;
}
.resolution__recused, .resolution__adopts {
  margin: 0.5rem 0 0; font-size: 0.9375rem; max-width: var(--measure);
}
/* A resolution that failed is part of the record too: the board considered it
   and said no. Marked by a word and a muted rule, never by colour alone. */
.resolution--lost { border-left-color: var(--border-firm); }

.record__adoption {
  margin: -0.35rem 0 0.6rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   Resolutions: the Library section and one page each
   -------------------------------------------------------------------------- */
/* The status is a sentence with the word "Status" in it, in a firm box. The
   box is emphasis only; the meaning is in the words. */
.resolution__status {
  margin: 0 0 1rem; padding: 0.6rem 0.9rem; max-width: var(--measure);
  border: 2px solid var(--border-firm); border-radius: var(--radius);
}
.resolution__status--in_force { border-left-width: 6px; border-left-color: var(--accent-fg); }
/* A citation is never split: "2026-" at the end of a line and "03" on the next
   reads as two things. */
.nowrap { white-space: nowrap; }
/* A 64-character fingerprint has no spaces; let it wrap anywhere rather than
   push the page sideways at 320px. */
.fingerprint { word-break: break-all; font-weight: 400; }
.resolution__text--page { margin: 0 0 1.5rem; }
.resolution__text--page p { font-size: 1.0625rem; }
.resolutions__showing { margin: 1rem 0 0.25rem; max-width: var(--measure); }
.resolutions__filters { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.resolutions__filters li { max-width: var(--measure); margin-bottom: 0.3rem; }
.decided { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.decided li { max-width: var(--measure); margin-bottom: 0.4rem; }
.signers { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.signers li { max-width: var(--measure); margin-bottom: 0.3rem; }
.certify-links { list-style: none; padding: 0; }
.signer-email { margin: 0 0 1rem; max-width: var(--measure); }
.signer-email summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }
.signer-email form { margin-top: 0.75rem; }
.certificate p { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   Demonstration records

   Marked by words first and colour second. Every one of these carries the word
   "demonstration" in the markup, so a screen reader announces it whether or not
   any of this renders.
   -------------------------------------------------------------------------- */

.tag--demo { border-color: var(--stop); color: var(--stop); font-weight: 700; }

.record__demo, .meetinglist__demo {
  margin: 0 0 0.6rem;
  padding: 0.4rem 0.7rem;
  border-left: 4px solid var(--stop);
  background: var(--stop-wash);
  font-size: 0.9375rem;
  max-width: var(--measure);
}

.record:has(.record__demo) { border-left-color: var(--stop); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot {
  background: var(--surface); border-top: 4px solid var(--brand);
  padding: 2rem 0; font-size: 0.9375rem; color: var(--ink-muted);
}
.foot a { color: var(--brand); }
.foot a:visited { color: var(--visited); }
.foot h2 { font-size: 1rem; margin-top: 0; color: var(--ink); }
.foot ul { list-style: none; padding: 0; }

.themetoggle {
  background: var(--page); border: 2px solid var(--border-firm);
  border-radius: var(--radius); color: var(--ink);
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  padding: 0.4rem 0.8rem; min-height: 44px; cursor: pointer;
}
.themetoggle:hover { border-color: var(--brand); color: var(--brand); }

/* Print: the board prints packets. Keep the text, drop the furniture. */
.print-only { display: none; }
.print-button { margin: 0 0 1rem; }
@media print {
  .masthead, .nav, .navtoggle, .skip, .whoami, .themetoggle, .foot { display: none !important; }
  /* Keep the text, drop the furniture: the crumbs, the print button, and the
     forms that only make sense on screen. */
  .crumbs, .print-button, .record__admin, .screen-only, form { display: none !important; }
  .print-only { display: block; font-size: 9pt; margin: 1.5rem 0 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .card, .notice, .doclist > li { border: 1px solid #999; }
  .resolution__text, .agenda__item, .facts > li { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}
/* Page numbers where the browser supports margin boxes; elsewhere, none, and
   nothing breaks. */
@page { margin: 18mm 16mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 9pt; } }

/* ===========================================================================
   READING PREFERENCES

   Driven by data-attributes the SERVER puts on <html> from a cookie, so the
   page is correct on the very first paint and works with scripting off.
   JavaScript only adds instant preview on the settings page.

   Each block is additive: a reader who changes nothing gets none of them.
   =========================================================================== */

/* --- Typeface ------------------------------------------------------------ */
:root[data-font="atkinson"] {
  --font: 'Atkinson Hyperlegible', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Text size -----------------------------------------------------------
   Set on <html>, so every rem in this file scales with it. Media-query
   breakpoints are intentionally unaffected: they resolve against the initial
   font size, so enlarging text does not also trigger the mobile layout.
   This compounds correctly with the browser's own zoom rather than fighting it.
   ------------------------------------------------------------------------- */
:root[data-textsize="115"] { font-size: 115%; }
:root[data-textsize="130"] { font-size: 130%; }
:root[data-textsize="150"] { font-size: 150%; }

/* --- Line spacing --------------------------------------------------------
   The values are WCAG 1.4.12 Text Spacing: line height at least 1.5x the font
   size, paragraph spacing at least 2x, letter spacing 0.12em, word spacing
   0.16em. 1.4.12 asks that a page not BREAK when a reader forces these; this
   offers them directly, for readers who cannot install a browser extension.
   ------------------------------------------------------------------------- */
:root[data-spacing="roomy"] body { line-height: 1.9; letter-spacing: 0.012em; word-spacing: 0.06em; }
:root[data-spacing="roomy"] p,
:root[data-spacing="roomy"] ul,
:root[data-spacing="roomy"] ol { margin-bottom: 1.75rem; }
:root[data-spacing="roomy"] li { margin-bottom: 0.7rem; }
:root[data-spacing="roomy"] h2,
:root[data-spacing="roomy"] h3 { margin-top: 2.75rem; }

/* --- Maximum contrast ----------------------------------------------------
   Pure black and white, 21:1 — the ceiling. This is deliberately NOT the
   default: at 21:1 light text on a dark ground haloes for many readers with
   astigmatism, which is why the standard dark theme is softened to 18.16:1.
   But some readers, particularly with photophobia or severe low vision, want
   the ceiling. Offering it as a choice beats deciding for everyone.

   Surfaces flatten to a single colour and every boundary becomes a hard rule,
   because at maximum contrast a tinted panel is noise.
   ------------------------------------------------------------------------- */
:root[data-contrast="max"] {
  --page: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF;
  --border: #000000; --border-firm: #000000;
  --ink: #000000; --ink-muted: #000000;
  --brand: #0A1A2B; --brand-deep: #000000; --brand-wash: #FFFFFF;
  --visited: #2E1F3D; --on-brand: #FFFFFF; --accent-fg: #000000;
  --gold: #FFCC00; --gold-fg: #000000; --on-gold: #000000;
  --focus-inner: #000000; --focus-outer: #FFCC00;
  --ok: #000000; --warn: #000000; --stop: #000000;
  --ok-wash: #FFFFFF; --warn-wash: #FFFFFF; --stop-wash: #FFFFFF;
  --masthead-bg: #000000; --masthead-ink: #FFFFFF; --masthead-rule: #FFCC00;
}

@media (prefers-color-scheme: dark) {
  :root[data-contrast="max"]:not([data-theme="light"]) {
    --page: #000000; --surface: #000000; --surface-2: #000000;
    --border: #FFFFFF; --border-firm: #FFFFFF;
    --ink: #FFFFFF; --ink-muted: #FFFFFF;
    --brand: #8CC6FF; --brand-deep: #FFFFFF; --brand-wash: #000000;
    --visited: #E0C8FF; --on-brand: #000000;
    --gold: #FFCC00; --gold-fg: #FFCC00; --on-gold: #000000; --accent-fg: #FFFFFF;
    --focus-inner: #FFCC00; --focus-outer: #FFFFFF;
    --ok: #FFFFFF; --warn: #FFFFFF; --stop: #FFFFFF;
    --ok-wash: #000000; --warn-wash: #000000; --stop-wash: #000000;
    --masthead-bg: #000000; --masthead-ink: #FFFFFF; --masthead-rule: #FFCC00;
  }
}
:root[data-contrast="max"][data-theme="dark"] {
  --page: #000000; --surface: #000000; --surface-2: #000000;
  --border: #FFFFFF; --border-firm: #FFFFFF;
  --ink: #FFFFFF; --ink-muted: #FFFFFF;
  /* Must be restated. Without it this block inherits --accent-fg: #000000 from
     the light max-contrast block above and the eyebrow renders black on black
     — 1:1. Every token the light max block sets has to be answered here. */
  --accent-fg: #FFFFFF;
  --brand: #8CC6FF; --brand-deep: #FFFFFF; --brand-wash: #000000;
  --visited: #E0C8FF; --on-brand: #000000;
  --gold: #FFCC00; --gold-fg: #FFCC00; --on-gold: #000000;
  --focus-inner: #FFCC00; --focus-outer: #FFFFFF;
  --ok: #FFFFFF; --warn: #FFFFFF; --stop: #FFFFFF;
  --ok-wash: #000000; --warn-wash: #000000; --stop-wash: #000000;
  --masthead-bg: #000000; --masthead-ink: #FFFFFF; --masthead-rule: #FFCC00;
}
/* At maximum contrast the semantic colours are gone, so the border weight and
   the symbol carry the distinction instead. Rule 4 holds either way. */
:root[data-contrast="max"] .notice { border-width: 3px; border-left-width: 8px; }
:root[data-contrast="max"] .status { border-width: 3px; }
:root[data-contrast="max"] .card { border-width: 2px; border-top-width: 6px; }

/* --- The settings page --------------------------------------------------- */
.settings fieldset, .contactform fieldset {
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1.75rem;
  max-width: var(--measure);
  background: var(--surface);
}
.settings legend, .contactform legend { font-weight: 700; font-size: 1.125rem; padding: 0 0.4rem; }
.settings .choice, .contactform .choice { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.85rem; }
.settings .choice:last-child { margin-bottom: 0; }
.settings .choice input, .contactform .choice input { width: 1.25rem; height: 1.25rem; margin: 0.2rem 0 0; flex: none; accent-color: var(--brand); }
.settings .choice label, .contactform .choice label { font-weight: 600; }
.settings .choice__text, .contactform .choice__text { flex: 1 1 auto; min-width: 0; }
.settings .choice .why { display: block; font-weight: 400; color: var(--ink-muted); font-size: 0.9375rem; }
.contactform__value { margin: 0 0 0.35rem; }
.contactform .field { margin-bottom: 0.85rem; }
/* Where a detail stands (confirmed number, address waiting for its link):
   ordinary text, read after the control it belongs to. */
.contactform__state { margin: 0.5rem 0 0; }
/* A message as it will be sent, on the Reminders page: wrapped, not scrolled. */
.mailpreview { white-space: pre-wrap; font: inherit; background: var(--surface); border: 1px solid var(--border-firm); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
table .why { display: block; font-weight: 400; color: var(--ink-muted); font-size: 0.9375rem; }
.contactform__state .linkbtn { margin-left: 0.5rem; }
/* The last field's share box and the Save button want more air than the
   fields between them. */
.contactform .choice { margin-bottom: 1.5rem; }
/* A hint under a checkbox sits with its box, not in the gap after it. */
.contactform .choice + .field__hint { margin-top: -1.1rem; margin-bottom: 1.5rem; }
.contactform .choice + .field__hint + .field__error { margin-top: -1.1rem; margin-bottom: 1.5rem; }
.settings__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ===========================================================================
   COMPOSITION

   Every page starts its content at the same left edge, under the site name,
   on the public site and in the portal alike. A reader using a screen
   magnifier finds the start of a page by panning to the top left; a column
   that is centred on some pages and not others moves that point from page to
   page. (Prose pages used to centre their column, to avoid empty space on the
   right at 1920px. September 22, 2026: dropped in favor of one start point.)
   Prose still stops at the measure, and pages with tables use the full shell.
   =========================================================================== */

/* A prose page: one column, capped at a readable line length. */
.page--text { max-width: var(--measure); }
.page--text .prose,
.page--text .notice,
.page--text fieldset { max-width: none; }

/* A portal page with a rail: content plus contextual material, so the width is
   composed rather than abandoned. Collapses to one column before it gets tight,
   and the rail follows the content in source order so it is read last. */
.page--rail { display: grid; gap: 2.5rem 3rem; grid-template-columns: minmax(0, 1fr) 19rem; }
@media (max-width: 62rem) { .page--rail { grid-template-columns: minmax(0, 1fr); } }

.rail > * + * { margin-top: 1.5rem; }
.rail__card {
  border: 1px solid var(--border-firm);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem 1.15rem;
}
.rail__card h2 { font-size: 1rem; margin: 0 0 0.6rem; letter-spacing: 0; }
.rail__card ul { list-style: none; padding: 0; margin: 0; }
.rail__card li { margin-bottom: 0.5rem; }
.rail__card li:last-child { margin-bottom: 0; }
.rail__card p { max-width: none; }
.rail__figure { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; }
.rail__figure b { font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   TYPOGRAPHY

   The hierarchy was flat: one weight for every heading, body-sized statistics,
   no lead, and gold used almost nowhere. These give the page a top and a
   bottom without adding a single new colour.
   =========================================================================== */

/* An eyebrow: a short label above a heading. This is where gold finally earns
   its third voice on a light ground — as --accent-fg, which is the darkened
   form. Raw #F2A900 cannot be text on cream at any size. */
.eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-fg);
  margin-bottom: 0.3rem;
}
/* Uppercase is used ONLY here, on two or three words at a time. Some screen
   readers spell out longer runs of capitals letter by letter, so this never
   wraps a sentence. */

.lead {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
}
:root[data-textsize] .lead { font-size: 1.1875rem; }

/* Statistics read as figures, not as body copy that happens to be a number. */
.stat__value {
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3.1rem);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   COMPONENT CORRECTIONS
   =========================================================================== */

/* Tables stacked two tan bands — the caption directly above the header row.
   One band now, with the header row carried by weight and a firm rule. */
thead th { background: transparent; border-bottom: 2px solid var(--border-firm); }
caption { border-bottom: none; }

/* The progress bar spanned the full shell as a thin line and read as a stray
   rule. Constrained, thickened, and tied to its own number. */
.progress { max-width: 34rem; margin-bottom: 1.25rem; }
.progress progress { height: 1rem; }
.progress__row { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.3rem; }
.progress__pct { font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

/* The document list was sixteen identical cards stacked — the strongest element
   on the page repeated sixteen times, so nothing stood out. It is a list: rows
   with a rule between them, and the readability state as the only strong mark. */
.doclist { border-top: 1px solid var(--border); }
.doclist > li {
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  margin-bottom: 0;
}
.doclist > li:hover { background: var(--surface); }
.doclist > li[data-readable="no"] { border-left-color: var(--gold-fg); background: transparent; }
.doclist > li[data-readable="no"]:hover { background: var(--surface); }

/* The footer ran four columns with one link in the last. Three, evenly
   weighted, and pinned to three rather than auto-fitting back to four. */
.foot .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 52rem) { .foot .grid--3 { grid-template-columns: 1fr; } }

/* --- The wordmark --------------------------------------------------------
   The Foundation's name, in text. There is no logo mark: removed by the
   board's decision in September 2026.
   ------------------------------------------------------------------------- */
.wordmark { display: flex; align-items: center; gap: 0.7rem; }
.wordmark__text { display: block; }

/* An eyebrow belongs to the heading under it. Without this the heading keeps
   its own top margin and the label floats midway between two sections, which
   groups it with the wrong one. The margin moves to the eyebrow. */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 0; }
h1 + .eyebrow, h2 + .eyebrow, h3 + .eyebrow, p + .eyebrow, div + .eyebrow,
.prose + .eyebrow, .grid + .eyebrow { margin-top: 2.5rem; }

/* ===========================================================================
   STATEMENT — large type doing the work a hero image would do elsewhere.

   The charter language is the most important sentence on the site. Setting it
   large is a better use of the space than a photograph would be, and it is the
   anchor the home page opens on.
   =========================================================================== */
.statement {
  margin: 2.5rem 0;
  padding: 1.75rem 0 1.75rem 1.75rem;
  border-left: 5px solid var(--gold);
  max-width: var(--measure);
}
.statement p {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
  max-width: none;
  text-wrap: balance;
}
.statement cite {
  display: block;
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-fg);
}

/* ===========================================================================
   FORM CONTROLS — drawn by us, not by the platform

   Native radios and checkboxes are rendered by the operating system, and
   `accent-color` is honoured inconsistently: on some platforms an UNCHECKED
   control on a tinted ground renders as a solid dark dot, which reads as
   checked. Getting that backwards on a settings page is worse than plain.

   The input element itself is kept — this restyles it, it does not replace it
   with a div. Keyboard behaviour, arrow-key group navigation and the
   accessibility tree are all untouched.
   =========================================================================== */
.settings input[type="radio"],
.settings input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.15rem 0 0;
  flex: none;
  border: 2px solid var(--border-firm);
  background: var(--page);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.settings input[type="radio"] { border-radius: 50%; }
.settings input[type="checkbox"] { border-radius: 3px; }

.settings input[type="radio"]::before,
.settings input[type="checkbox"]::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  transform: scale(0);
  background: var(--on-brand);
}
.settings input[type="radio"]::before { border-radius: 50%; }

.settings input[type="radio"]:checked,
.settings input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.settings input[type="radio"]:checked::before,
.settings input[type="checkbox"]:checked::before { transform: scale(1); }

.settings input[type="radio"]:hover,
.settings input[type="checkbox"]:hover { border-color: var(--ink); }

/* Forced colours paints its own palette and ignores ours, so hand the controls
   back to the platform there — the system's own checked state is correct and
   is what that user already recognises. */
@media (forced-colors: active) {
  .settings input[type="radio"],
  .settings input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; }
}

/* ===========================================================================
   TEXT-ONLY DEVICES

   This site has no photographs and is not waiting for any. A page of unbroken
   prose is the failure mode that replaces "holes where images should be" — so
   the work is to give a text page more than one kind of block, and a reason for
   the eye to move.

   Three devices, each earning its place by doing something a paragraph cannot:
   a numbered sequence where order matters, a two-column list where the pairing
   matters, and a rule where a section genuinely ends.
   =========================================================================== */

/* --- Numbered sequence ---------------------------------------------------
   For rules and steps where the count itself is the point — "four rules govern
   who may sit on this board" is a stronger statement when you can see four.
   Built on a real <ol>, so the numbering is in the document, not painted on:
   a screen reader announces "list of 4 items" either way.
   ------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 1.5rem 0 2rem; counter-reset: step; }
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  max-width: none;
  margin: 0;
}
.steps > li:last-child { border-bottom: 1px solid var(--border); }
.steps > li::before {
  content: counter(step);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-fg);
  font-variant-numeric: tabular-nums;
  /* The numeral is decorative reinforcement — the <ol> already carries the
     sequence, so this must not be read out a second time. */
  speak: none;
}
.steps > li > :first-child { margin-top: 0; }
.steps > li > :last-child { margin-bottom: 0; }
.steps strong { display: block; }

/* --- Facts list ----------------------------------------------------------
   A label and its value, one pair per list item. A plain list, not a <dl>:
   VoiceOver announced every description list on the site as "empty term"
   (tester report, September 2026), and a plain list announces its count and
   then "When: October 1" with nothing appended. role="list" in the markup,
   because WebKit drops list semantics from a list with list-style: none.
   Label text ends in a colon so the pair reads as one sentence.
   ------------------------------------------------------------------------- */
.facts { list-style: none; padding: 0; margin: 1.5rem 0 2rem; max-width: var(--measure); }
.facts > li {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 0.25rem 1.5rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--border);
}
.facts > li:last-child { border-bottom: 1px solid var(--border); }
.facts__label { font-weight: 700; }
.facts__value { margin: 0; }
.facts__value > :last-child { margin-bottom: 0; }
@media (max-width: 40rem) {
  .facts > li { grid-template-columns: 1fr; }
}

/* --- Section break -------------------------------------------------------
   A rule with the mark's gold in it, for where a page genuinely changes
   subject. Decorative, so hidden from assistive technology — the heading that
   follows already says a new section has started.
   ------------------------------------------------------------------------- */
.sectionbreak {
  border: 0;
  height: 3px;
  width: 4rem;
  background: var(--gold);
  margin: 3rem 0 2.5rem;
}
:root[data-contrast="max"] .sectionbreak { background: var(--ink); }

/* --- Reading a summary or transcript inside the portal ----------------------
   The document's own stylesheet is dropped (lib/reader.js), so these rules
   carry the few structures the documents use, in the site's tokens. They
   follow the reader's colours, text size and typeface like every other page.
   ------------------------------------------------------------------------- */
/* Breadcrumb. The separator is drawn in CSS with empty alt text, so a screen
   reader announces a list of links, not a string of slashes. */
/* Between the header and main, so the skip link lands past it. */
.crumbs { margin: 1.25rem auto 0; font-size: 0.9375rem; }
.crumbs + main { padding-top: 1.25rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0; }
.crumbs li { max-width: none; }
.crumbs li + li::before { content: "\203A" / ""; margin: 0 0.5rem; color: var(--ink-muted); }
.crumbs [aria-current="page"] { color: var(--ink-muted); }
.reader { max-width: var(--measure); }
.reader .doc-sub, .reader .sub, .reader .letterhead { color: var(--ink-muted); font-size: 0.9375rem; margin: 0 0 1.5rem; }
.reader h3 .artnum { font-weight: 400; font-size: 1rem; }
.reader ol.alpha, .reader ol.lettered { list-style: none; padding-left: 2.6rem; margin: 0 0 1rem; }
.reader ol.alpha li, .reader ol.lettered li { position: relative; margin-bottom: 0.9rem; }
.reader .lbl { position: absolute; left: -2.6rem; width: 2.2rem; text-align: right; }
.reader .pb { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-muted); white-space: nowrap; }
.reader .dateline { margin-top: 2rem; }
.reader figure.signature { margin: 1rem 0 2.5rem; }
.reader figure.signature img { display: block; max-width: 100%; height: auto; background: #fff; padding: 0.4rem; }
.reader .note, .reader .preface { border-left: 4px solid var(--border-firm); padding: 0.25rem 0 0.25rem 1.1rem; margin: 2rem 0; }
.reader .gap { border-left: 5px solid var(--warn); padding: 0.4rem 0 0.4rem 1rem; margin: 1.25rem 0; }
.reader .exact { font-size: 0.9375rem; margin: 0.25rem 0 1.25rem; }
.reader .struck { text-decoration: line-through; }
/* Handwritten entries are said in words, [written by hand], beside them. No
   underline: on a web page an underline reads as a link. */
.reader .ins { font-style: normal; text-decoration: none; }
.reader .sigblock { margin: 1.5rem 0; padding-left: 1.1rem; border-left: 3px solid var(--border); }
.reader blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 4px solid var(--border-firm); }
.reader nav.toc ol { padding-left: 1.4rem; margin: 0.25rem 0; }
/* The other ways to read it, just under the document's opening notice. */
.reader__ways { margin: 0 0 2rem; padding: 0.85rem 1.1rem; border: 1px solid var(--border-firm); border-radius: var(--radius); background: var(--surface); }
.reader__ways-label { margin: 0 0 0.4rem; font-weight: 700; }
.reader__ways ul { list-style: none; margin: 0; padding: 0; }
.reader__ways li { margin: 0.35rem 0; max-width: none; }
.reader__ways a { font-weight: 700; }
.reader__ways .ways__meta { display: inline; margin-left: 0.4rem; }
.record__original .ways__download { margin-left: 0.6rem; }
.tag--staff { border-style: dashed; }

/* --- Annual forms -------------------------------------------------------- */
/* The form pages borrow the settings page's controls (class "settings") and
   add their own spacing. One question per block, its prompt in ordinary text
   size: the prompt is part of the question, not small print. */
.formpage__due { color: var(--ink-muted); margin: -0.5rem 0 1.5rem; }
.formpage__part { margin: 0 0 2.25rem; }
.formpage .field { max-width: none; }
.formq { margin-bottom: 1.75rem; }
.formq__title { font-size: 1.125rem; margin: 0 0 0.35rem; }
.formq__title label, .formq > label { display: block; font-weight: 700; }
.formq__optional { font-weight: 400; color: var(--ink-muted); }
.formq__prompt { font-size: 1rem; color: var(--ink); }
.formq__prompt > :last-child { margin-bottom: 0.5rem; }
.formpage textarea { min-height: 0; }
.formpage__statements ol { padding-left: 1.6rem; }
.formpage__statements li { margin-bottom: 0.6rem; }
.formpage__actions { margin-top: 1rem; }
.formpage fieldset/* Named by element so it outranks the input[type=…] rule above, which it did
   not before 6 October 2026: an invalid text box kept its ordinary border. */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"],
[aria-invalid="true"] { border-color: var(--stop); border-width: 3px; }

/* Answers read back: the question, then what was written, keeping its line
   breaks exactly as typed. */
.answers { list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: var(--measure); }
.answers__row { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.answers__label { font-weight: 700; display: block; }
.answers__value { margin: 0.25rem 0 0; }
.answers__text { white-space: pre-wrap; margin: 0; }
.answers__none { color: var(--stop); font-weight: 700; margin: 0; }
.answers__change { margin: 0.35rem 0 0; font-size: 0.9375rem; }
.answers--facts .answers__row { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.25rem 1rem; }
.answers--facts .answers__label { display: inline; }
.answers--facts .answers__value { margin: 0; }

/* Where a director stands with a form, under its card. */
.formstatus { margin: 0 0 1rem; padding: 0.85rem 1.1rem; border: 1px solid var(--border-firm); border-left: 6px solid var(--border-firm); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); max-width: var(--measure); }
.formstatus p { margin: 0 0 0.5rem; }
.formstatus > :last-child { margin-bottom: 0; }
.formstatus--waiting { border-left-color: var(--gold-fg); }
.formstatus--returned { border-left-color: var(--ok); }
.formstatus--closed { border-left-color: var(--stop); }
.formstatus__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.inlineform { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0 0.5rem; }
td .inlineform { margin: 0; }
td .inlineform select { width: auto; }