@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

  /* ==========================================================================
     LAGOS STATE COUNCILORS FORUM - design tokens
     Register: CEREMONIAL BUT DISCIPLINED.
     Gold foil is reserved for four things only: the Forum seal, executive
     cards, senior office badges, and section dividers. Everything else stays
     flat, fast and legible on a low-end Android over 3G.

     Contrast, measured (WCAG 2.2 AA needs 4.5:1 body / 3:1 large):
       LIGHT  ink-900 on white 17.4:1  | ink-700 on white 9.1:1
              emerald-700 on white 7.6:1 | gold-500 on white 2.1:1  FAILS
       DARK   ink-900 on bg 15.8:1   | ink-700 on bg 8.9:1
              emerald-400 on bg 7.2:1 | gold-300 on bg 10.4:1
     Gold therefore appears as FOIL SURFACE and BORDER, never as text on white.
     ========================================================================== */
  :root{
    /* ---- brand primitives. These ARE the mandate: #008751, #FFFFFF, #D4AF37.
       Kept exactly. What changes is how much of them is used and where. ---- */
    --emerald-50:#EAF4EF; --emerald-100:#D3E9DE; --emerald-200:#A7D3BE;
    --emerald-300:#6FB894; --emerald-400:#3E9E74; --emerald-500:#008751;
    --emerald-600:#00734A; --emerald-700:#005C3B; --emerald-800:#00432C;
    --emerald-900:#00341F; --emerald-950:#001C11;
    --gold-100:#FAF3DC; --gold-200:#F3E3A3; --gold-300:#E8D28A;
    --gold-400:#DEC15C; --gold-500:#D4AF37; --gold-700:#8A6D1F; --gold-800:#6B5417;

    /* ---- NEUTRAL ramp. Green is an ACCENT, never the ambient colour. ---- */
    --ink-0:#FFFFFF; --ink-25:#FAFBFB; --ink-50:#F4F5F6; --ink-100:#E9EBEC;
    --ink-200:#D8DCDF; --ink-300:#BCC2C7; --ink-400:#949CA2; --ink-500:#6F777E;
    --ink-600:#545C62; --ink-700:#3F464B; --ink-800:#292F34; --ink-900:#141A1E;
    --ink-950:#0A0E11;

    /* the foil. Multi-stop so it reads as metal, not as flat yellow. */
    --foil:linear-gradient(112deg,#8A6D1F 0%,#D4AF37 17%,#F3E3A3 36%,
           #FBF6E0 47%,#E8D28A 58%,#D4AF37 74%,#8A6D1F 100%);
    --foil-soft:linear-gradient(112deg,#C9A63C 0%,#E8D28A 40%,#FAF3DC 52%,
                #E8D28A 64%,#C9A63C 100%);

    --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:22px;
    --shadow-e1:0 1px 2px rgba(16,22,26,.06);
    --shadow-e2:0 2px 6px rgba(16,22,26,.06), 0 12px 28px rgba(16,22,26,.06);
    --shadow-e3:0 6px 16px rgba(16,22,26,.09), 0 24px 56px rgba(16,22,26,.09);
    --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:520ms;
    --ease-out:cubic-bezier(.22,.9,.28,1);
    --ease-inout:cubic-bezier(.5,0,.2,1);

    --z-sticky:30; --z-search:35; --z-banner:40; --z-modal:60;
  }

  /* ---------- semantic: LIGHT. THE DEFAULT, ALWAYS. ----------
     Pure White is one of the three brand colours, so white is the resting
     surface. Green is reserved for the seal, active states, small marks and
     primary actions. Nothing ambient is tinted green. */
  :root{
    --bg:#FFFFFF;
    --bg-sunken:var(--ink-25);
    --surface:var(--ink-50);
    --surface-raised:var(--ink-0);
    --line:var(--ink-100);
    --line-strong:var(--ink-200);
    --text-strong:var(--ink-900);
    --text:var(--ink-700);
    --text-muted:var(--ink-500);
    --brand:var(--emerald-700);
    --brand-hover:var(--emerald-900);
    --brand-quiet:#F1F7F4;
    --accent-text:var(--gold-800);
    --focus:var(--emerald-600);
    /* the lattice is NEUTRAL, not green, so the motif never tints the page */
    --motif:rgba(20,26,30,.032);
    --motif-strong:rgba(20,26,30,.05);
    --hatch-a:#F7F8F8; --hatch-b:#F1F3F3;
    --scrim:rgba(255,255,255,.88);
    --notice-bg:#FFF9E8; --notice-line:#E0B84C; --notice-ink:#5C4406;
    --shadow:var(--shadow-e1);
  }

  /* ---------- semantic: DARK. A NEUTRAL charcoal, not a green-black. ----------
     Applied ONLY when explicitly chosen, so the page is never dark by accident. */
  :root[data-theme="dark"]{
    --bg:#16191C; --bg-sunken:#111417; --surface:#1E2226; --surface-raised:#242930;
    --line:#333A41; --line-strong:#454D55;
    --text-strong:#F1F3F5; --text:#C2C8CE; --text-muted:#8C949B;
    --brand:#4FBF8C; --brand-hover:#6FD0A2;
    --brand-quiet:rgba(79,191,140,.10);
    --accent-text:var(--gold-300);
    --focus:#6FD0A2;
    --motif:rgba(255,255,255,.035); --motif-strong:rgba(255,255,255,.055);
    --hatch-a:#242A30; --hatch-b:#1E242A;
    --scrim:rgba(22,25,28,.85);
    --notice-bg:#2B2611; --notice-line:#8A6D1F; --notice-ink:#F3E3A3;
    --shadow:0 1px 2px rgba(0,0,0,.35);
  }

  /* ---------- base ---------- */
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;background:var(--bg);color:var(--text-strong);
    font-family:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,
                "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    transition:background var(--dur-3) var(--ease-out),color var(--dur-3) var(--ease-out);
  }
  h1,h2,h3,h4{line-height:1.15;margin:0 0 .42em;color:var(--text-strong)}
  h1{font-size:clamp(2.1rem,5.2vw,3.5rem);letter-spacing:-.028em;font-weight:800}
  h2{font-size:clamp(1.4rem,2.8vw,2rem);letter-spacing:-.02em;font-weight:750}
  h3{font-size:1.06rem;letter-spacing:-.01em;font-weight:700}
  p{margin:0 0 1em;color:var(--text)}
  a{color:var(--brand);text-underline-offset:2px}
  a:hover{color:var(--brand-hover)}
  .wrap{max-width:1140px;margin:0 auto;padding:0 22px}
  .muted{color:var(--text-muted);font-size:.84rem}
  .eyebrow{
    display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:800;
    letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:.7rem
  }
  /* the divider rule next to an eyebrow is one of the four sanctioned gold uses */
  .eyebrow::before{
    content:"";width:26px;height:3px;border-radius:2px;background:var(--foil)
  }

  /* ---------- MOTIF SYSTEM ----------
     An abstract diamond lattice. Deliberately geometric and non-specific: it
     evokes woven textile structure without claiming to be any particular
     cultural emblem. Used as low-contrast ground, never behind body text. */
  .motif{position:relative;isolation:isolate}
  .motif::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:
      repeating-linear-gradient(45deg,transparent 0 15px,var(--motif) 15px 16px),
      repeating-linear-gradient(-45deg,transparent 0 15px,var(--motif) 15px 16px);
    mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  }
  .motif-band{
    background-image:
      repeating-linear-gradient(45deg,transparent 0 11px,var(--motif-strong) 11px 12px),
      repeating-linear-gradient(-45deg,transparent 0 11px,var(--motif-strong) 11px 12px);
  }
  /* gold hairline that opens a major section, the fourth sanctioned gold use */
  .divider-foil{
    height:2px;border:0;margin:0;background:var(--foil);
    opacity:.85
  }

  /* ---------- FOIL ---------- */
  .foil-top{position:relative}
  .foil-top::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--foil);border-radius:var(--radius) var(--radius) 0 0
  }
  .foil-frame{
    position:relative;border-radius:var(--radius-lg);
    background:var(--surface-raised);
    box-shadow:var(--shadow-e2)
  }
  .foil-frame::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
    background:var(--foil);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    pointer-events:none
  }
  .foil-chip{background:var(--foil);color:#3A2C08;font-weight:800}

  /* ---------- preview bar + masthead ---------- */
  /* Both bars live in ONE sticky wrapper. That removes the hard-coded 38px
     offset which broke the moment the preview text wrapped to two lines and
     painted over the navigation. Heights now stack naturally. */
  .topbars{position:sticky;top:0;z-index:var(--z-banner)}
  /* the header and its search results sit above the page body at every width; the hero's
     layered figures and blend modes must never win this one */
  main{position:relative;z-index:0}
  .previewbar{
    background:var(--notice-bg);border-bottom:1px solid var(--notice-line);
    color:var(--notice-ink);font-size:.84rem;padding:9px 0
  }
  .previewbar .wrap{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
  .previewbar code{font-size:.8em}
  .masthead{
    background:color-mix(in srgb,var(--bg) 94%,transparent);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);
    backdrop-filter:blur(12px) saturate(1.2);
    border-bottom:1px solid var(--line)
  }
  .masthead .row1{display:flex;align-items:center;gap:16px;min-height:62px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
  /* the crest is now a real image asset (preview/assets/crest-placeholder.svg),
     so it carries its own foil ring and needs no CSS ornament behind it */
  .crest{width:40px;height:40px;flex:0 0 auto;display:block;border-radius:11px;overflow:hidden}
  .crest img{width:100%;height:100%;display:block}
  .brand b{display:block;font-size:.95rem;line-height:1.15;font-weight:750}
  .brand span{display:block;font-size:.72rem;color:var(--text-muted)}
  nav.site{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap;align-items:center}
  nav.site a{
    text-decoration:none;color:var(--text);font-size:.87rem;font-weight:600;
    padding:10px 11px;border-radius:9px;min-height:44px;display:inline-flex;
    align-items:center;transition:background var(--dur-1),color var(--dur-1)
  }
  nav.site a:hover{background:var(--brand-quiet);color:var(--brand)}
  nav.site a[aria-current="page"]{background:var(--brand-quiet);color:var(--brand)}
  .theme-toggle{
    margin-left:6px;width:44px;height:44px;border-radius:10px;cursor:pointer;
    border:1px solid var(--line);background:var(--surface-raised);color:var(--text);
    display:grid;place-items:center;font-size:1rem;
    transition:border-color var(--dur-1),background var(--dur-1)
  }
  .theme-toggle:hover{border-color:var(--brand);color:var(--brand)}

  /* ---------- persistent search ---------- */
  .searchrow{display:flex;gap:12px;align-items:center;padding:0 0 13px;position:relative}
  .searchrow .field{position:relative;flex:1}
  .searchrow input[type=search]{
    width:100%;min-height:50px;border:1.5px solid var(--line-strong);
    border-radius:var(--radius);padding:0 46px 0 44px;font:inherit;font-size:.95rem;
    background:var(--surface-raised);color:var(--text-strong);
    transition:border-color var(--dur-1),box-shadow var(--dur-1)
  }
  .searchrow input[type=search]::placeholder{color:var(--text-muted)}
  .searchrow input[type=search]:focus{
    outline:none;border-color:var(--brand);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)
  }
  .searchrow .mag{
    position:absolute;left:15px;top:50%;transform:translateY(-50%);
    color:var(--text-muted);pointer-events:none;font-size:1.05rem
  }
  .searchrow .clear{
    position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;
    background:transparent;font:inherit;font-size:1.15rem;color:var(--text-muted);
    cursor:pointer;width:36px;height:36px;border-radius:9px;display:none
  }
  .searchrow .clear:hover{background:var(--surface);color:var(--text-strong)}
  .searchhint{font-size:.77rem;color:var(--text-muted);white-space:nowrap}
  .results{
    position:absolute;left:0;right:0;top:calc(100% - 7px);
    background:var(--surface-raised);border:1px solid var(--line-strong);
    border-radius:var(--radius);box-shadow:var(--shadow-e3);
    max-height:min(62vh,480px);overflow:auto;display:none;z-index:var(--z-search);
    opacity:0;transform:translateY(-7px);
    transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)
  }
  .results.open{display:block;opacity:1;transform:translateY(0)}
  .res{
    padding:12px 15px;border-bottom:1px solid var(--line);
    display:flex;gap:12px;align-items:flex-start
  }
  .res:last-child{border-bottom:0}
  .res:hover{background:var(--surface)}
  .res .tag{
    flex:0 0 auto;font-size:.65rem;font-weight:800;letter-spacing:.07em;
    text-transform:uppercase;background:var(--brand-quiet);color:var(--brand);
    border-radius:6px;padding:3px 7px;margin-top:2px
  }
  .res .tag.c{background:var(--gold-100);color:var(--gold-800)}
  :root[data-theme="dark"] .res .tag.c{background:rgba(232,210,138,.15);color:var(--gold-300)}
  .res .tag.p{background:var(--surface);color:var(--text)}
  .res b{display:block;font-size:.94rem;color:var(--text-strong)}
  .res small{color:var(--text-muted);font-size:.79rem;display:block}
  .res .role{color:var(--brand);font-weight:700}
  .res-empty{padding:18px 15px;color:var(--text-muted);font-size:.89rem}

  /* ---------- layout ---------- */
  section{padding:40px 0}
  .hero{padding:52px 0 18px}
  .hero .lede{font-size:1.08rem;max-width:62ch}
  .cta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 8px}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    min-height:48px;padding:0 23px;border-radius:999px;font-weight:700;
    font-size:.94rem;text-decoration:none;border:1.5px solid transparent;
    cursor:pointer;transition:transform var(--dur-1) var(--ease-out),
      background var(--dur-2),border-color var(--dur-2),color var(--dur-2)
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--emerald-700);color:#fff;box-shadow:var(--shadow-e1)}
  .btn-primary:hover{background:var(--emerald-900);color:#fff}
  :root[data-theme="dark"] .btn-primary{background:var(--emerald-500);color:#04120C}
  :root[data-theme="dark"] .btn-primary:hover{background:var(--emerald-400)}
  .btn-ghost{background:transparent;color:var(--brand);border-color:var(--line-strong)}
  .btn-ghost:hover{border-color:var(--brand);background:var(--brand-quiet)}
  .btn-foil{
    background:var(--foil);color:#3A2C08;border-color:transparent;font-weight:800
  }
  .btn-foil:hover{filter:brightness(1.06);color:#3A2C08}

  /* ---------- stats ---------- */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:12px;margin-top:8px}
  .stat{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 16px 14px;position:relative;overflow:hidden
  }
  .stat::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--foil);opacity:.9
  }
  .stat b{
    display:block;font-size:1.85rem;color:var(--text-strong);letter-spacing:-.03em;
    font-weight:800;line-height:1.1
  }
  .stat span{font-size:.79rem;color:var(--text);display:block;font-weight:600}
  .stat small{font-size:.71rem;color:var(--text-muted);display:block}

  /* ---------- panels, cascade, wards ---------- */
  .panel{
    border:1px solid var(--line);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-e2);overflow:hidden;background:var(--surface-raised)
  }
  .panel-head{
    padding:15px 18px;border-bottom:1px solid var(--line);background:var(--surface);
    display:flex;gap:12px;align-items:center;flex-wrap:wrap
  }
  .panel-head h3{margin:0;font-size:1rem}
  .panel-head .hint{margin-left:auto;font-size:.77rem;color:var(--text-muted)}
  /* ---------- cascade: three bounded steps ----------
     Each column scrolls internally and carries its own sticky step header, so a
     district with 29 councils no longer stretches the whole panel to 2,000px and
     leaves the other two columns as blank space. */
  .cascade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr) minmax(0,1.6fr)}
  .col{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
  .col:last-child{border-right:0}
  .col-head{
    display:flex;align-items:center;gap:10px;padding:12px 15px;
    background:var(--surface);border-bottom:1px solid var(--line)
  }
  .col-head .step{
    width:23px;height:23px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
    font-size:.71rem;font-weight:800;background:var(--bg);color:var(--text-muted);
    border:1px solid var(--line-strong)
  }
  .col-head.active .step{background:var(--emerald-700);color:#fff;border-color:transparent}
  .col-head.done .step{background:var(--foil);color:#3A2C08;border-color:transparent}
  .col-head h4{
    margin:0;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
    color:var(--text);font-weight:800
  }
  .col-head .count{
    margin-left:auto;font-size:.69rem;font-weight:800;color:var(--text-muted);
    background:var(--bg);border:1px solid var(--line);border-radius:999px;
    padding:2px 8px;white-space:nowrap
  }
  .col-body{padding:12px 15px 15px;overflow-y:auto;max-height:372px}
  .col-note{padding:0;margin:2px 0 0;color:var(--text-muted);font-size:.85rem}

  /* the selection buttons */
  .opt{
    display:block;width:100%;text-align:left;background:var(--surface-raised);
    border:1px solid var(--line);border-left:3px solid transparent;
    border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:7px;
    cursor:pointer;font:inherit;color:var(--text-strong);min-height:44px;
    transition:border-color var(--dur-1),background var(--dur-1)
  }
  .opt:hover{border-color:var(--line-strong);border-left-color:var(--emerald-400)}
  .opt[aria-pressed="true"]{
    border-color:var(--emerald-700);border-left-color:var(--emerald-700);
    background:var(--brand-quiet)
  }
  .opt-inner{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center;width:100%}
  .opt-inner .nm{grid-column:1;font-weight:700;font-size:.91rem}
  .opt-inner .meta{grid-column:1;font-size:.74rem;color:var(--text-muted);font-weight:500}
  .opt-inner .badge{
    grid-column:2;grid-row:1 / span 2;align-self:center;
    font-size:.68rem;font-weight:800;color:var(--text-muted);white-space:nowrap;
    background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 9px
  }
  .opt[aria-pressed="true"] .badge{
    background:var(--emerald-700);color:#fff;border-color:transparent
  }
  .opt-inner .lead{
    grid-column:1 / -1;margin-top:4px;padding-top:5px;
    border-top:1px dashed var(--line);font-size:.73rem;font-weight:600;color:var(--text)
  }
  .opt-inner .lead.pending{color:var(--text-muted);font-weight:500}
  /* A five-column table cannot fit a phone. Let the table scroll inside its
     own box rather than dragging the whole page sideways. */
  .tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

  /* --- voters database ---------------------------------------------------- */
  .vdsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:6px 0 20px}
  .vdsum-item{border:1px solid var(--line);border-left:4px solid var(--emerald-600);
    border-radius:12px;background:var(--surface-raised);padding:14px 16px}
  .vdsum-item b{display:block;font-size:2.1rem;line-height:1;font-weight:800;
    letter-spacing:-.03em;color:var(--emerald-700)}
  .vdsum-item span{display:block;font-size:.83rem;font-weight:700;color:var(--text-strong);margin-top:6px}
  .vdsum-item small{display:block;font-size:.74rem;color:var(--text-muted)}
  .vdtable th:not(:first-child),.vdtable td:not(:first-child){white-space:nowrap}
  .vdtable .vdempty td{
    padding:26px 18px;text-align:left;font-size:.86rem;color:var(--text-muted);
    background:var(--ink-25);line-height:1.6
  }
  .vdtable .vdempty b{display:block;color:var(--text-strong);font-size:.95rem;margin-bottom:4px}
  .vdgov td:last-child{white-space:normal;color:var(--text);min-width:280px}
  .vdgov tr.vdrisk td{background:var(--gold-100)}
  .vdgov tr.vdrisk td:first-child{box-shadow:inset 3px 0 0 var(--gold-500)}
  .wardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px}
  .ward{
    border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;
    background:var(--surface-raised);
    transition:border-color var(--dur-2),transform var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2)
  }
  .ward:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow-e2)}
  .ward .code{
    display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.07em;
    background:var(--brand-quiet);color:var(--brand);border-radius:6px;padding:2px 7px;margin-bottom:7px
  }
  .ward .nm{font-weight:700;font-size:.92rem;color:var(--text-strong)}
  .ward .parent{font-size:.75rem;color:var(--text-muted);margin-top:3px}
  .vacant{
    border:1px dashed var(--line-strong);border-radius:var(--radius);padding:13px 14px;
    color:var(--text-muted);font-size:.86rem;background:var(--surface)
  }

  /* ---------- cards ---------- */
  .card{
    border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;
    background:var(--surface-raised);display:grid;grid-template-columns:112px 1fr;
    gap:18px;align-items:start;box-shadow:var(--shadow-e2)
  }
  .role{
    display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.07em;
    text-transform:uppercase;background:var(--brand-quiet);color:var(--brand);
    border-radius:6px;padding:3px 8px;margin-bottom:7px
  }
  /* minmax(0,1fr) rather than 1fr: a bare '1fr' has an automatic minimum of
     the content's min-content width, so one wide table inside a column forces
     that column past the container and scrolls the whole page sideways on a
     phone. minmax(0,…) lets the column shrink and the table scroll instead. */
  .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
  .modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
  .module{
    border:1px solid var(--line);border-radius:var(--radius);padding:17px;
    background:var(--surface-raised);position:relative;overflow:hidden
  }
  .module::before{
    content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--foil);opacity:.7
  }
  .module b{display:block;margin-bottom:4px;font-size:.95rem}
  .module p{margin:0;font-size:.87rem}

  /* ---------- notices, tables ---------- */
  .notice{
    border-left:4px solid var(--notice-line);background:var(--notice-bg);
    color:var(--notice-ink);border-radius:var(--radius-sm);padding:15px 17px;font-size:.89rem
  }
  .notice b{font-weight:800}
  table.data{width:100%;border-collapse:collapse;font-size:.87rem}
  table.data th,table.data td{
    padding:9px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top
  }
  table.data th{
    font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
    color:var(--text-muted);font-weight:800;width:34%
  }
  table.data tr:last-child th,table.data tr:last-child td{border-bottom:0}

  /* ---------- hierarchy ---------- */
  .rank{
    display:inline-grid;place-items:center;width:25px;height:25px;border-radius:7px;
    font-size:.73rem;font-weight:800;margin-right:9px;flex:0 0 auto;
    background:var(--surface);color:var(--text);border:1px solid var(--line-strong)
  }
  /* senior offices wear the foil; ordinary Members do not. This is the visual
     expression of the precedence order, and it is the third sanctioned gold use. */
  .rank.senior{background:var(--foil);color:#3A2C08;border-color:transparent}
  .hier{list-style:none;padding:0;margin:0}
  .hier li{
    display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)
  }
  .hier li:last-child{border-bottom:0}
  .hier .nm{font-weight:700;display:block;font-size:.92rem}
  .hier .wd{font-size:.76rem;color:var(--text-muted);display:block}
  .hier .rl{
    margin-left:auto;font-size:.75rem;font-weight:800;color:var(--brand);text-align:right
  }

  /* ---------- portrait placeholders ----------
     Stands in until a real portrait is uploaded and APPROVED. Deliberately reads
     as a placeholder, never as a photograph. */
  .ph{
    position:relative;border-radius:10px;border:1.5px dashed var(--gold-500);
    background:repeating-linear-gradient(135deg,var(--hatch-a) 0 8px,var(--hatch-b) 8px 16px);
    display:grid;place-items:center;color:var(--brand);font-weight:800;
    letter-spacing:.02em;flex:0 0 auto;overflow:hidden;text-align:center
  }
  .ph.round{border-radius:50%}
  .ph .ini{font-size:1em;line-height:1}
  .ph .cap{
    position:absolute;left:0;right:0;bottom:0;background:var(--scrim);
    font-size:.55rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:var(--text-muted);padding:2px 0;border-top:1px solid var(--line)
  }
  .ph-40{width:40px;height:40px;font-size:.78rem}
  .ph-56{width:56px;height:56px;font-size:.98rem}
  .ph-45{width:100%;aspect-ratio:4/5;font-size:2rem;border-radius:var(--radius)}
  .ph-45 .cap{font-size:.61rem;padding:5px 0}
  .phrow{display:flex;gap:11px;align-items:center}
  .phcol{display:flex;flex-direction:column;gap:8px}

  /* ---------- forum exco (page-specific, shared here) ---------- */
  .exco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px}
  .exco-card{
    border:1px solid var(--line);border-radius:var(--radius-lg);padding:19px;
    background:var(--surface-raised);display:flex;flex-direction:column;gap:12px;
    position:relative;overflow:hidden
  }
  .exco-card.is-vacant{background:var(--surface)}
  .exco-card.is-verified{border-color:var(--emerald-300);background:#fff;
    box-shadow:0 1px 2px rgba(16,24,32,.05),0 12px 30px rgba(16,24,32,.07)}
  .exco-photo{
    width:100%;aspect-ratio:4/5;border-radius:12px;overflow:hidden;
    border:2px solid var(--gold-500);background:var(--emerald-50)
  }
  .exco-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
  .exco-card.is-verified .post{background:var(--emerald-50);color:var(--emerald-700)}
  .exco-contact{display:flex;flex-direction:column;gap:3px;margin:2px 0 4px;
    border-top:1px dashed var(--line);padding-top:8px}
  .exco-contact span{font-size:.76rem;color:var(--text);display:flex;gap:7px;align-items:baseline}
  .exco-contact b{flex:0 0 46px;font-size:.63rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.07em;color:var(--text-muted)}
  .exco-contact a{color:var(--emerald-700);text-decoration:none}
  .exco-contact a:hover{text-decoration:underline}
  .exco-card .pending.ok{
    background:var(--emerald-50);color:var(--emerald-700);border-color:var(--emerald-200)
  }
  .exco-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--foil);opacity:.55
  }
  .exco-avatar{
    width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
    font-weight:800;font-size:.92rem;position:relative;overflow:hidden;flex:0 0 auto
  }
  .exco-card h3{margin:0;font-size:1rem}
  .exco-card .post{
    font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    color:var(--brand)
  }
  .exco-card p{margin:0;font-size:.85rem}
  .exco-card .pending{
    font-size:.77rem;color:var(--text-muted);border-top:1px solid var(--line);
    padding-top:11px;margin-top:auto
  }
  .precedence{display:grid;gap:10px}
  .prec-row{
    display:grid;grid-template-columns:46px 1fr;gap:13px;align-items:center;
    border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 15px;
    background:var(--surface-raised)
  }
  .prec-row .n{
    display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
    background:var(--surface);color:var(--text);font-weight:800;font-size:.84rem;
    border:1px solid var(--line-strong)
  }
  .prec-row.senior .n{background:var(--foil);color:#3A2C08;border-color:transparent}
  .prec-row b{display:block;font-size:.94rem}
  .prec-row span{font-size:.83rem;color:var(--text-muted)}

  /* ---------- footer ---------- */
  footer.site{
    border-top:1px solid var(--line);background:var(--surface);padding:30px 0;margin-top:24px
  }
  footer.site .wrap{
    display:flex;gap:16px;flex-wrap:wrap;align-items:center;
    font-size:.83rem;color:var(--text)
  }

  /* ---------- MOTION ----------
     Every one of these is disabled under prefers-reduced-motion at the bottom of
     this block. Nothing loops. Nothing animates indefinitely. */
  .reveal{opacity:0;transform:translateY(14px);
    transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
  .reveal.in{opacity:1;transform:none}
  .stagger>*{opacity:0;transform:translateY(12px);
    transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
  .stagger.in>*{opacity:1;transform:none}
  .stagger.in>*:nth-child(1){transition-delay:0ms}
  .stagger.in>*:nth-child(2){transition-delay:45ms}
  .stagger.in>*:nth-child(3){transition-delay:90ms}
  .stagger.in>*:nth-child(4){transition-delay:135ms}
  .stagger.in>*:nth-child(5){transition-delay:180ms}
  .stagger.in>*:nth-child(6){transition-delay:225ms}

  /* ---------- focus, selection, scrollbar ---------- */
  :focus-visible{
    outline:2.5px solid var(--focus);outline-offset:2px;border-radius:4px
  }
  ::selection{background:var(--emerald-200);color:var(--emerald-950)}
  :root[data-theme="dark"] ::selection{background:var(--emerald-800);color:#EAF4EF}
  *{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .cascade{grid-template-columns:minmax(0,1fr)}
    .col{border-right:0;border-bottom:1px solid var(--line);min-height:0}
    .grid2{grid-template-columns:minmax(0,1fr)}
    .card{grid-template-columns:minmax(0,1fr)}
    .searchhint{display:none}
    .previewbar{font-size:.78rem}
    .previewbar .long{display:none}
  }
  @media (max-width:520px){
    .wrap{padding:0 16px}
    .stats{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
    .wardgrid{grid-template-columns:minmax(0,1fr)}
  }

  /* ==========================================================================
     GREEN PRESENCE
     Green is the brand's dominant colour, so it is applied as a deliberate
     LAYER over neutral surfaces rather than as a tint on the neutrals
     themselves. That is the difference between "branded" and "green-washed":
     the page reads green, the paper stays neutral.
     ========================================================================== */
  .masthead{border-top:3px solid var(--emerald-600)}
  .hero{
    background:linear-gradient(180deg,var(--brand-quiet) 0%,var(--bg) 100%);
    border-bottom:1px solid var(--line)
  }
  /* alternating green band, used to give long pages rhythm */
  .band{background:var(--brand-quiet)}

  /* the headline figures are the loudest green on the page, on purpose */
  .stat b{color:var(--brand)}
  .stat{background:var(--bg);border-color:var(--line-strong)}
  .stat span{color:var(--text)}

  h1 .accent, h2 .accent{color:var(--brand)}
  .eyebrow{color:var(--brand)}

  .panel-head{background:var(--brand-quiet);border-bottom-color:var(--emerald-200)}
  .col-head{background:var(--brand-quiet);border-bottom-color:var(--emerald-200)}
  .col-head .count{background:var(--bg);border-color:var(--emerald-200)}

  /* cards and tiles carry a green spine */
  .card{border-left:4px solid var(--emerald-600)}
  .module::before{background:linear-gradient(90deg,var(--emerald-600),var(--emerald-400))}
  .ward{border-left:3px solid var(--emerald-200)}
  .ward:hover{border-left-color:var(--emerald-500)}
  .ward .code{background:var(--emerald-600);color:#fff}
  .role{background:var(--emerald-600);color:#fff}

  table.data th{background:var(--brand-quiet);color:var(--text)}
  table.data tr:hover td,table.data tr:hover th{background:color-mix(in srgb,var(--brand-quiet) 55%,transparent)}

  .notice{border-left-color:var(--emerald-600)}
  .hier .rl{color:var(--brand)}
  footer.site{background:var(--brand-quiet);border-top:3px solid var(--emerald-600)}

  /* selection buttons lean green when chosen */
  .opt[aria-pressed="true"]{
    border-color:var(--emerald-600);border-left-color:var(--emerald-600);
    background:var(--brand-quiet)
  }
  .opt[aria-pressed="true"] .badge{background:var(--emerald-600);color:#fff}

  /* placeholder imagery sits on a green ground so the page keeps its colour */
  .ph{background:var(--emerald-50);border-color:var(--gold-500)}
  .ph .cap{background:var(--emerald-50);color:var(--emerald-800)}
  :root[data-theme="dark"] .ph{background:#123024}
  :root[data-theme="dark"] .ph .cap{background:#123024;color:var(--emerald-200)}

  /* --- image placeholders (real assets in preview/assets/) --- */
  .phimg{display:block;width:100%;height:auto;border-radius:inherit}
  .phimg.round{border-radius:50%}
  /* The Forum's real logo is a detailed circular badge. At the previous 26px
     the ring text collapsed into an illegible dot; it needs real size to read
     as an emblem. The PNG is already masked to a circle, so no clipping. */
  .crest{width:44px;height:44px;border-radius:0;overflow:visible}
  .crest img{width:44px;height:44px;display:block;border-radius:0}
  .footcrest{display:block;width:34px;height:34px;flex:0 0 auto}
  .footcrest img{width:34px;height:34px;display:block}
  footer.site .wrap{gap:11px}
  .avatarbox{
    width:40px;height:40px;flex:0 0 auto;border-radius:50%;overflow:hidden;
    border:1.5px solid var(--gold-500);background:var(--emerald-50)
  }
  .avatarbox img{width:100%;height:100%;display:block}
  .avatarbox-56{width:56px;height:56px}
  .portraitbox{
    border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--gold-500);
    background:var(--emerald-50);box-shadow:var(--shadow-e1)
  }
  .mediastrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
  .mediacard{
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    background:var(--bg);box-shadow:var(--shadow-e1)
  }
  .mediacard img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
  .mediacard .mc-body{padding:12px 14px;border-top:3px solid var(--emerald-600)}
  .mediacard b{display:block;font-size:.92rem}
  .mediacard span{font-size:.77rem;color:var(--text-muted)}
  .mapframe{
    border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-strong);
    box-shadow:var(--shadow-e2);background:var(--bg)
  }
  .mapframe img{width:100%;display:block}

  /* ==========================================================================
     REFINEMENT PASS
     Applied after an external design review (Claude Sonnet 4.5, vision) was
     given screenshots of this page. Changes are grouped by what the review
     identified, so each rule can be traced back to a reason.
     ========================================================================== */

  /* (1) HERO ART. The banner placeholder was ~480px of empty green and was the
     single biggest visual problem: it pushed all real content below the fold.
     Capped hard, and on mobile it is now a thin band rather than a screenful. */
  
  /* (2) RHYTHM. The page is long and section spacing was too tight to read as
     separate blocks. 56px between sections, 8px-derived internally. */
  section{padding:56px 0}
  section[id]{scroll-margin-top:170px}
  .hero{padding:48px 0 24px}
  @media (max-width:900px){ section{padding:40px 0} }

  /* (3) STAT CARDS. The figure should lead and the label should not compete.
     Fixed min-height stops the labels wrapping and making the row uneven. */
  .stat{min-height:116px;display:flex;flex-direction:column;justify-content:flex-end}
  .stat b{font-size:2.6rem;line-height:1;margin-bottom:7px;letter-spacing:-.035em}
  .stat span{font-size:.815rem;font-weight:700}
  .stat small{font-size:.715rem;line-height:1.35}
  @media (max-width:520px){
    .stat{min-height:100px}
    .stat b{font-size:2.05rem}
  }

  /* (4) WARD TILES. A green "LGA" pill repeated 150 times is noise, not
     information. The tier is now carried by the tile's own spine, and the
     council name is plain muted text. A ward LETTER is kept, because that is
     genuinely identifying. */
  .ward .code{display:none}
  .ward .code.has-letter{display:inline-block}
  .ward .parent{font-size:.75rem}
  .ward.known{border-left:4px solid var(--emerald-600)}
  .ward.unknown{opacity:.7}
  .ward.unknown:hover{opacity:1}
  .wardnote{font-size:.73rem;color:var(--text-muted);margin-top:4px}
  .wardlegend{
    display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin:0 0 14px;
    padding:10px 14px;background:var(--bg-sunken);border:1px solid var(--line);
    border-radius:var(--radius-sm)
  }
  .wardlegend span{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text)}
  .wardlegend i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:0 0 auto}

  /* (5) DATA TABLES. Keys recede so values lead. Uppercase labels were
     competing with the content they describe. */
  table.data th{
    width:29%;font-weight:700;font-size:.79rem;letter-spacing:.01em;
    text-transform:none;color:var(--text-muted)
  }
  table.data td{font-weight:600}

  /* ==========================================================================
     MODULE C + D PREVIEW: RenewedHope DataBank (registration) and the
     registers COLLATION view.
     ========================================================================== */
  .formgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px 20px}
  @media (max-width:720px){.formgrid{grid-template-columns:minmax(0,1fr)}}
  .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
  .fld label{font-size:.78rem;font-weight:800;color:var(--text)}
  .fld .hint{font-size:.73rem;color:var(--text-muted);line-height:1.4}
  .fld input,.fld select{
    min-height:46px;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);
    padding:0 12px;font:inherit;font-size:.92rem;background:var(--bg);color:var(--text-strong);width:100%
  }
  .fld input:focus,.fld select:focus{
    outline:none;border-color:var(--brand);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)
  }
  .fld.full{grid-column:1/-1}
  .checkline{display:flex;gap:12px;align-items:flex-start}
  .checkline input{width:22px;height:22px;margin-top:2px;flex:0 0 auto}
  .checkline label{font-size:.84rem;font-weight:500;color:var(--text);line-height:1.5}
  .steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
  .steps span{
    font-size:.74rem;font-weight:800;padding:6px 12px;border-radius:999px;
    background:var(--surface);color:var(--text-muted);border:1px solid var(--line)
  }
  .steps span.on{background:var(--emerald-600);color:#fff;border-color:transparent}
  .steps span.done{background:var(--foil);color:#3A2C08;border-color:transparent}

  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
  .tile{
    border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;
    background:var(--bg);position:relative;overflow:hidden
  }
  .tile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--emerald-600)}
  .tile b{display:block;font-size:2.1rem;line-height:1;color:var(--brand);letter-spacing:-.03em}
  .tile span{display:block;font-size:.79rem;font-weight:800;margin-top:6px}
  .tile small{display:block;font-size:.71rem;color:var(--text-muted);line-height:1.35}
  .tile.zero b{color:var(--text-muted)}
  .tile.zero::after{background:var(--line-strong)}

  .filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px;align-items:end}
  .filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
  /* --- councillor registration links -------------------------------------- */
  .reflist{padding:8px 18px 14px}
  .refrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
  .refrow:last-child{border-bottom:0}
  .refwho{flex:1;min-width:0}
  .refwho .nm{display:block;font-weight:700;font-size:.88rem;color:var(--text-strong)}
  .refwho .wd{display:block;font-size:.75rem;color:var(--text-muted)}
  .reflink{
    flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;
    background:var(--emerald-50);color:var(--emerald-800);border:1px solid var(--emerald-200);
    border-radius:8px;padding:5px 10px;text-decoration:none;white-space:nowrap
  }
  .reflink:hover{background:var(--emerald-100);color:var(--emerald-900)}
  @media (max-width:640px){ .refrow{flex-wrap:wrap} .reflink{width:100%;text-align:center} }

  .chartframe{
    border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--bg-sunken);
    padding:24px 18px;text-align:center;min-height:168px;
    display:flex;flex-direction:column;justify-content:center;gap:7px
  }
  .chartframe b{font-size:.9rem;color:var(--text-strong)}
  .chartframe span{font-size:.79rem;color:var(--text-muted);line-height:1.45}
  .bars{display:grid;gap:9px;margin-top:10px}
  .bar{display:grid;grid-template-columns:112px 1fr 44px;gap:11px;align-items:center;font-size:.82rem}
  .bar .track{height:10px;border-radius:999px;background:var(--surface);overflow:hidden}
  .bar .fill{height:100%;background:var(--emerald-600);width:0}
  .bar .num{text-align:right;font-weight:800;color:var(--text-muted);font-variant-numeric:tabular-nums}

  table.grid{width:100%;border-collapse:collapse;font-size:.86rem}
  table.grid th,table.grid td{padding:9px 11px;border-bottom:1px solid var(--line);text-align:left}
  table.grid th{
    background:var(--brand-quiet);font-size:.71rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--text);font-weight:800
  }
  table.grid td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
  table.grid td.zero{color:var(--text-muted);font-weight:500}
  table.grid tbody tr:hover td{background:color-mix(in srgb,var(--brand-quiet) 50%,transparent)}

  .funnel{display:grid;gap:8px}
  .fstep{
    display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
    padding:11px 15px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg)
  }
  .fstep b{font-size:.88rem}
  .fstep em{font-style:normal;font-size:.78rem;color:var(--text-muted);display:block}
  .fstep .n{font-weight:800;color:var(--text-muted);font-size:1.05rem;font-variant-numeric:tabular-nums}

  /* ==========================================================================
     ILLUSTRATION SYSTEM
     Every asset is hand-authored SVG: no raster, no external request, and each
     one is clearly artwork rather than a fake photograph. Section-header art is
     8:1 line work that fades to TRANSPARENT, so it reads correctly on both the
     light and the dark theme.
     ========================================================================== */
  .hdrart{display:block;width:100%;height:auto;margin:2px 0 6px;opacity:.95}
  .figure-art{
    margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);
    overflow:hidden;background:var(--bg);box-shadow:var(--shadow-e2)
  }
  .figure-art img{width:100%;display:block}
  .figure-art figcaption{
    padding:11px 15px;font-size:.78rem;color:var(--text-muted);
    border-top:1px solid var(--line);background:var(--surface)
  }
  .projgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:14px}
  .projcard{
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    background:var(--bg);box-shadow:var(--shadow-e1)
  }
  .projcard img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
  .projcard .pc-body{padding:12px 14px;border-top:3px solid var(--emerald-600)}
  .projcard b{display:block;font-size:.92rem;color:var(--text-strong)}
  .projcard span{font-size:.77rem;color:var(--text-muted);display:block;margin-top:2px}
  .projcard .pc-status{
    display:inline-block;margin-top:8px;font-size:.68rem;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;background:var(--brand-quiet);color:var(--brand);
    border-radius:6px;padding:3px 8px
  }
  .figure-art.side{max-width:340px}
  @media (max-width:820px){ .figure-art.side{max-width:100%} }

  /* ==========================================================================
     RHYTHM PASS
     Diagnosis, from looking at the built page: it read as a document rather
     than a designed surface. Eleven sections shared one identical rhythm
     [eyebrow][h2][grey paragraph][white card], all on white, so nothing stood
     out and the page had no visual events. The most important moment on the
     page, the hero, was plain text on a void, with the artwork stranded below
     the stat row instead of belonging to it.

     Fix: give the page a spine. The hero becomes a deep emerald surface that
     the artwork sits inside, and two sections become deep feature bands so the
     eye gets a change of pace. Neutral paper is kept for reading surfaces, so
     this stays branded rather than green-washed.
     ========================================================================== */

  /* --- (1) HERO: a designed surface, not text on a void ------------------- */
  .hero{
    position:relative;overflow:hidden;border-bottom:0;color:#fff;
    background:
      radial-gradient(94% 130% at 86% -14%,rgba(0,164,102,.55) 0%,rgba(0,164,102,0) 60%),
      radial-gradient(72% 104% at 2% 106%,rgba(0,115,74,.62) 0%,rgba(0,115,74,0) 58%),
      linear-gradient(158deg,#012516 0%,#003C25 46%,#00512F 100%);
    padding:60px 0 34px
  }
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px),
      repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px)
  }
  .hero>.wrap{position:relative;z-index:1}
  .hero .eyebrow{color:var(--gold-300)}
  .hero .eyebrow::before{background:var(--gold-400)}
  .hero h1{color:#fff}
  .hero .lede{color:rgba(255,255,255,.84);max-width:58ch;font-size:1.1rem}
  .hero .muted{color:rgba(255,255,255,.60)}
  .hero .cta{margin:26px 0 10px}
  .hero .btn-primary{background:var(--gold-500);color:#3A2C08;box-shadow:0 8px 20px rgba(0,0,0,.24)}
  .hero .btn-primary:hover{background:var(--gold-300);color:#3A2C08}
  .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.05)}
  .hero .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.62);color:#fff}
  .hero .goldrule{background:var(--foil);opacity:.9}

  /* the figures are the loudest thing in the hero, so they sit on white cards */
  .hero .stat{background:#fff;border-color:transparent;box-shadow:0 14px 30px rgba(0,0,0,.26)}
  .hero .stat b{color:var(--emerald-700)}
  .hero .stat span{color:var(--ink-800)}
  .hero .stat small{color:var(--ink-500)}

  /* the artwork belongs to the hero instead of floating under it */
  
  /* --- (2) FEATURE BANDS: a change of pace -------------------------------- */
  .band-deep{
    position:relative;color:#fff;
    background:
      radial-gradient(80% 120% at 92% 0%,rgba(0,164,102,.40) 0%,rgba(0,164,102,0) 58%),
      linear-gradient(160deg,#01271A 0%,#003B24 52%,#004B2E 100%)
  }
  .band-deep h2,.band-deep h3,.band-deep strong{color:#fff}
  .band-deep p,.band-deep li{color:rgba(255,255,255,.80)}
  .band-deep .eyebrow{color:var(--gold-300)}
  .band-deep .eyebrow::before{background:var(--gold-400)}
  .band-deep .muted{color:rgba(255,255,255,.58)}
  /* reading surfaces stay light inside a dark band so tables keep their contrast */
  .band-deep .panel,.band-deep .card,.band-deep .mapframe,.band-deep table.data{
    background:#fff;border-color:transparent;color:var(--ink-700)
  }
  .band-deep table.data th{background:var(--emerald-50);color:var(--ink-700)}
  .band-deep table.data td{color:var(--ink-700)}
  .band-deep table.data tr:hover td{background:rgba(0,135,81,.07)}
  .band-deep .panel-head{background:var(--emerald-50);border-bottom-color:var(--emerald-200)}
  .band-deep .panel-head h3,.band-deep .card b,.band-deep .card strong{color:var(--ink-900)}
  .band-deep .hint{color:var(--ink-500)}
  .band-deep .card p{color:var(--text-muted)}
  .band-deep .projcard,.band-deep .mediacard{background:#fff;border-color:transparent}
  .band-deep .notice{
    background:rgba(255,255,255,.10);color:rgba(255,255,255,.92);border-left-color:var(--gold-500)
  }
  .band-deep .notice b{color:#fff}
  .band-deep .module{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
  .band-deep .module b{color:#fff}
  .band-deep .module p{color:rgba(255,255,255,.72)}

  /* ==========================================================================
     SCALE PASS
     With the rhythm fixed the page had structure but still read small and
     polite: 2rem headings, one size for all eleven sections, and the hero
     artwork framed like a thumbnail. This raises the typographic scale,
     numbers the sections so the page reads as a document with chapters, and
     lets the hero artwork run full-bleed as a panorama.
     ========================================================================== */

  /* --- (1) TYPE: give the page a voice ------------------------------------ */
  h1{font-size:clamp(2.5rem,6.6vw,4.4rem);letter-spacing:-.035em;line-height:1.03;font-weight:800}
  h2{font-size:clamp(1.7rem,4vw,2.8rem);letter-spacing:-.03em;line-height:1.08;font-weight:780}
  h3{font-size:1.16rem;letter-spacing:-.015em}
  h2+p{font-size:1.06rem;max-width:66ch}
  .wrap{max-width:1180px}

  /* --- (2) CHAPTERS: number the sections, so the long page has landmarks -- */
  main{counter-reset:chapter}
  section[id]{counter-increment:chapter}
  section[id] .eyebrow::before{
    content:counter(chapter,decimal-leading-zero);
    width:auto;height:auto;border-radius:0;background:none;
    font-size:.72rem;font-weight:800;letter-spacing:.02em;
    padding-right:11px;border-right:1.5px solid currentColor;opacity:.48
  }
  section[id] .eyebrow{margin-bottom:.85rem}

  /* --- (3) HERO: the artwork becomes a full-bleed panorama ---------------- */
  .hero{padding:66px 0 0}
   /* the old inset foil frame does not suit a full-bleed band */
  /* Cropping the artwork for a wide band cuts off the "illustrated artwork"
     label that is baked into the SVG. A visible caption replaces it, so the
     panorama can never be mistaken for a photograph of a real place. */
    
  /* --- (4) SURFACES: a little depth so panels do not read as flat plates -- */
  .panel{border-radius:14px;box-shadow:0 1px 2px rgba(16,24,32,.04),0 10px 28px rgba(16,24,32,.05)}
  .band-deep .panel,.band .panel{box-shadow:0 10px 30px rgba(0,0,0,.10)}

  /* ==========================================================================
     REGISTRATION
     The most important screen in the platform: the thing a field agent uses,
     on a low-end Android, in bright sunlight. It was a flat grid of fields
     under a decorative five-step strip, and every input was disabled, so the
     whole form rendered washed out and inert.

     Rebuilt as a genuine stepped form. The steps are real sections, the
     derived-and-locked hierarchy is shown rather than described, consent is
     given its own block, and the action bar has weight.
     ========================================================================== */

  /* --- step rail ---------------------------------------------------------- */
  .regsteps{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px;background:var(--brand-quiet);
    border-bottom:1px solid var(--line)}
  .rs{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;
    color:var(--text-muted);background:var(--surface-raised);border:1px solid var(--line);
    border-radius:999px;padding:6px 13px 6px 7px;letter-spacing:.01em}
  .rs i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
    background:var(--ink-200);color:var(--ink-700);font-style:normal;font-size:.7rem;font-weight:800}
  .rs em{font-style:normal;font-weight:600;font-size:.68rem;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.07em}
  .rs.done{color:var(--emerald-700);border-color:var(--emerald-200)}
  .rs.done i{background:var(--emerald-600);color:#fff}
  .rs.on{color:var(--ink-900);border-color:var(--gold-500);background:#fff;
    box-shadow:0 0 0 3px rgba(212,175,55,.16)}
  .rs.on i{background:var(--gold-500);color:#3A2C08}

  /* --- step bodies -------------------------------------------------------- */
  .regbody{padding:8px 20px 0}
  .regstep{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;padding:16px 18px 18px;
    background:var(--surface-raised)}
  .regstep>legend{display:flex;align-items:center;gap:9px;padding:0 8px;margin-left:-8px;
    font-size:.82rem;font-weight:800;color:var(--text-strong);letter-spacing:.01em}
  .regstep>legend i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
    background:var(--ink-800);color:#fff;font-style:normal;font-size:.72rem;font-weight:800}
  .regstep.is-active{border-color:var(--emerald-300);background:#fff;
    box-shadow:0 1px 2px rgba(16,24,32,.04),0 10px 26px rgba(16,24,32,.06)}
  .regstep.is-active>legend i{background:var(--emerald-600)}
  .regstep.is-gated{background:var(--ink-25);border-style:dashed}
  .regstep.is-gated>legend i{background:var(--ink-400)}
  .rstag{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
    border-radius:5px;padding:2px 7px;background:var(--ink-100);color:var(--ink-600)}
  .done-tag{background:var(--emerald-50);color:var(--emerald-700)}
  .on-tag{background:var(--gold-100);color:var(--gold-800)}
  .off-tag{background:var(--ink-200);color:var(--ink-700)}
  .reg-note{margin:6px 0 14px;font-size:.86rem;color:var(--text)}
  .reg-example{margin:12px 0 0;font-size:.78rem;color:var(--text-muted)}

  /* the derived-and-locked hierarchy, shown rather than described */
  .lockchain{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .lockchain>i{color:var(--ink-300);font-style:normal;font-size:.9rem}
  .lc{border:1px solid var(--emerald-200);background:var(--emerald-50);border-radius:10px;
    padding:8px 12px;min-width:96px}
  .lc span{display:block;font-size:.63rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.08em;color:var(--emerald-700);opacity:.85}
  .lc b{display:block;font-size:.86rem;color:var(--ink-900);margin-top:1px}

  /* --- consent gets its own block, because it is the legal basis ---------- */
  /* --- the councillor referral link ---------------------------------------- */
  .refbanner{
    display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;
    border:1px solid var(--emerald-300);background:var(--emerald-50);
    border-radius:12px;padding:13px 15px
  }
  .refbanner b{display:block;font-size:.95rem;color:var(--ink-900)}
  .refbanner .refsub{display:block;font-size:.79rem;color:var(--text);margin-top:2px;max-width:62ch}
  .refmark{
    flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    background:var(--emerald-600);color:#fff;font-size:.78rem
  }
  .fld.is-locked select{background:var(--emerald-50);border-color:var(--emerald-300);font-weight:700}
  .fld.is-locked label::after{content:" \00b7 locked";color:var(--emerald-700);font-weight:700}

  .consentbox{border:1px solid var(--gold-200);background:var(--gold-100);
    border-radius:12px;padding:14px 16px}
  .consentbox .checkline{align-items:flex-start}
  .consentbox label{font-size:.85rem;color:var(--ink-800)}

  /* --- action bar --------------------------------------------------------- */
  .regfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:16px 20px;border-top:1px solid var(--line);background:var(--ink-25);
    border-radius:0 0 var(--radius) var(--radius)}
  .regfoot .btn{min-height:44px}   /* a real tap target in the field */
  .regfoot-note{font-size:.76rem;color:var(--text-muted);flex:1;min-width:180px}

  /* A disabled input at browser-default opacity makes the whole form look
     broken. Keep the fields legible; the preview notice and the disabled
     cursor already say it is not interactive. */
  .reg input:disabled,.reg select:disabled{
    opacity:1;color:var(--ink-700);background:var(--ink-50);
    border-color:var(--line-strong);-webkit-text-fill-color:var(--ink-700)
  }
  .reg input:disabled::placeholder{color:var(--ink-400);-webkit-text-fill-color:var(--ink-400)}
  .reg .btn:disabled{opacity:.62}
  .band-deep .regstep,.band-deep .regsteps{background:var(--surface-raised)}

  /* On the device this form is actually built for, the action bar stacks and
     the buttons run full width. A content-width button is a small target on a
     phone held in one hand in sunlight. */
  @media (max-width:640px){
    .regfoot{flex-direction:column;align-items:stretch;gap:10px}
    .regfoot .btn{width:100%;justify-content:center}
    .regfoot-note{text-align:center}
    .regsteps{padding:12px 14px}
    .regbody{padding:6px 14px 0}
    .regstep{padding:14px}
    .lockchain{gap:6px}
    .lc{flex:1 1 calc(50% - 20px);min-width:0}
    .lockchain>i{display:none}
  }

  /* --- mobile ergonomics -------------------------------------------------- */
  @media (max-width:640px){
    /* the primary calls to action are thumb targets, so they run full width */
    .hero .cta{flex-direction:column;align-items:stretch}
    .hero .cta .btn{width:100%;justify-content:center}
    .figure-art.side{max-width:210px;margin:10px 0 6px}
  }

  /* ---------- reduced motion: hard stop ---------- */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      transition:none!important;animation:none!important;scroll-behavior:auto!important
    }
    .reveal,.stagger>*{opacity:1!important;transform:none!important}
    .ward:hover{transform:none}
    .btn:active{transform:none}
  }

/* ==========================================================================
   DIRECTORY (wards & councils) + COUNCILLOR RECORD — added 13 Sep 2026
   Same tokens as the rest of the system; nothing here introduces a new colour.
   ========================================================================== */
.filters{display:grid;gap:10px;grid-template-columns:1fr;padding:14px 16px}
@media (min-width:760px){.filters{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}}
.filters .field{position:relative;display:flex;align-items:center}
.sel{display:flex;flex-direction:column;gap:4px}
.sel>span{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.sel select{font:inherit;font-size:.86rem;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text)}
.wgrid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin-top:16px}
@media (min-width:900px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.council{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised);padding:16px 16px 12px;box-shadow:var(--shadow-e2)}
.council-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
.council-head h3{margin:0;font-size:1.02rem;line-height:1.25}
.council-head .muted{margin:3px 0 0;font-size:.78rem}
.wardlist{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.wardlist li{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:.86rem;padding:5px 0;border-bottom:1px dotted var(--line)}
.wardlist li:last-child{border-bottom:0}
.wardlist .nm{font-weight:650}
.wardlist .code{flex:0 0 auto;display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:6px;background:var(--bg);border:1px solid var(--line);font-size:.7rem;font-weight:800}
.wardlist .role{font-size:.78rem;color:var(--text-muted);margin-left:auto}
.wardlist .wardnote{font-size:.76rem;color:var(--text-muted);margin-left:auto;font-style:italic}
.wardlist li.known .role{color:var(--emerald-700)}
.council-note{margin:10px 0 0;font-size:.75rem;color:var(--text-muted)}
.note{font-size:.82rem;color:var(--text-muted);margin-top:14px}
.note b{color:var(--text)}
/* ---- councillor record ---- */
.record{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start;margin-top:18px}
@media (min-width:860px){.record{grid-template-columns:250px minmax(0,1fr)}}
.recportrait{margin:0 0 14px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised);text-align:center}
.recportrait img{width:100%;max-width:200px;height:auto;border-radius:var(--radius)}
.recportrait p{margin:10px 0 0;font-size:.74rem;line-height:1.5}
.picker .panel-head h3{margin:0}
.reclist{display:grid;gap:6px;padding:12px}
.recitem{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text)}
.recitem span{display:block;font-size:.75rem;color:var(--text-muted);margin-top:3px}
.recitem:hover{border-color:var(--emerald-700)}
.recitem.active{border-color:var(--emerald-700);background:var(--emerald-50)}
table.data th[scope=row]{width:38%;text-align:left;font-weight:650;color:var(--text-muted);font-size:.82rem}
table.data td{font-size:.88rem}
.missing{color:var(--text-muted);font-style:italic}
.provenance{padding:14px 16px}
.provenance p{margin:0 0 8px;font-size:.86rem;line-height:1.6}
.provenance p:last-child{margin-bottom:0}
.todo{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;font-size:.86rem;color:var(--text-muted)}

/* ==========================================================================
   MOBILE MENU — the inline nav wrapped to four rows inside a sticky header
   that took 41% of a phone screen and covered the page while scrolling
   (owner report, 13 Sep 2026). Below 900px the links live behind "Menu".
   ========================================================================== */
.menubtn{display:none;font:inherit;font-size:.82rem;font-weight:750;gap:6px;align-items:center;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer}
.menupanel{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media (max-width:900px){
  .topbars{position:relative;z-index:var(--z-banner)}
    /* relative, not static: it must not stick to the top and cover content, but it DOES need to
       keep its stacking level or the hero band paints over the open search results (owner report) */
  .menubtn{display:inline-flex}
  .menupanel{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:var(--surface-raised);border-bottom:1px solid var(--line);box-shadow:var(--shadow-e2);
    padding:6px 16px 12px;z-index:70}
  .menupanel.open{display:flex}
  .menupanel a{padding:11px 2px;border-bottom:1px solid var(--line);font-size:.95rem}
  .menupanel a:last-of-type{border-bottom:0}
  .masthead .row1{position:relative}
  .masthead{padding-block:10px 6px}
  .searchrow{padding-bottom:8px}
}

/* One row for the nav where there is room; the theme toggle rides at the end of it. */
@media (min-width:1100px){
  .menupanel a{white-space:nowrap}
  .masthead .row1{gap:18px}
}
/* ── 15 Sep 2026: the nav is six signposts, not twelve. Twelve items measured ~1354px against a
   1120px masthead column and forced a horizontal scrollbar on desktop; the six that remain fit on one
   row from 1140px, and below that the links live behind "Menu" (same drawer the phones use). ── */
@media (min-width:901px) and (max-width:1139px){
  .menubtn{display:inline-flex}
  .menupanel{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:var(--surface-raised);border-bottom:1px solid var(--line);box-shadow:var(--shadow-e2);padding:6px}
  .menupanel.open{display:flex}
  .menupanel a{padding:11px 2px;border-bottom:1px solid var(--line);font-size:.95rem}
  .menupanel a:last-of-type{border-bottom:0}
}
@media (min-width:1140px){
  .menupanel{flex-wrap:nowrap}
}

/* ==========================================================================
   HERO FIGURES — the Forum's Chairman (faint, dominant) and the 1st Vice Chairman
   (fainter, secondary) as atmosphere inside the emerald band.
   Owner: "use the chairman of the forum photo as a faint background of the
   homepage, make it beautiful and slight … the chairman's own should be more dominant".
   - Softness is BAKED in (hero-chairman-soft.webp / hero-vice-soft.webp): a live
     blur() on a full-bleed element is expensive on a low-end Android.
   - Two nested masks (outer = horizontal, inner = vertical) intersect cleanly;
     one radial mask left a visible vertical seam where it met the band.
   - `soft-light` keeps the emerald hue, so this reads as light and shadow, never
     as a picture pasted onto the page.
   ========================================================================== */
.hero{position:relative;overflow:hidden}
.hero-figures{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-figures::after{ /* scrim so the headline stays white-on-emerald */
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(1,38,26,.86) 0%,rgba(1,38,26,.58) 36%,rgba(1,38,26,.20) 62%,rgba(1,38,26,.04) 84%,rgba(1,38,26,0) 100%);
}
.hero>.wrap{position:relative;z-index:1}
.hf{margin:0;position:absolute}
.hf__f{display:block;-webkit-mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,.35) 10%,#000 30%);mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,.35) 10%,#000 30%)}
.hf img{display:block;width:100%;height:auto}
.hf--chair{
  right:-2%;top:2%;width:min(500px,36vw);opacity:.58;mix-blend-mode:soft-light;
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.88) 38%,rgba(0,0,0,.30) 70%,transparent 100%);
          mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.88) 38%,rgba(0,0,0,.30) 70%,transparent 100%);
}
.hf--vice{
  right:19%;top:18%;width:min(270px,21vw);opacity:.36;mix-blend-mode:soft-light;z-index:-1;
  -webkit-mask-image:radial-gradient(105% 92% at 52% 40%,#000 0%,rgba(0,0,0,.62) 46%,transparent 78%);
          mask-image:radial-gradient(105% 92% at 52% 40%,#000 0%,rgba(0,0,0,.62) 46%,transparent 78%);
}
@media (max-width:900px){
  .hf--chair{width:80vw;right:-12%;top:0;opacity:.60;mix-blend-mode:luminosity}
  .hf--vice{width:50vw;right:-6%;top:34%;opacity:.34;mix-blend-mode:luminosity}
  .hero-figures::after{background:linear-gradient(130deg,rgba(1,38,26,.80) 0%,rgba(1,38,26,.52) 46%,rgba(1,38,26,.12) 78%,rgba(1,38,26,0) 100%)}
}
[data-theme="dark"] .hf--chair{opacity:.46}
[data-theme="dark"] .hf--vice{opacity:.24}
@media (prefers-reduced-transparency: reduce){ .hf{display:none} }

/* ------------------------------------------------------------------ register bits (13 Sep 2026) */
.recsearch{width:100%;margin:8px 0 4px;padding:9px 11px;font:inherit;font-size:.86rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--text)}
.reclist{max-height:340px;overflow:auto;overscroll-behavior:contain}
.vmark{color:var(--emerald-600,#047857);font-weight:700;font-size:.8em}
.rownote{display:block;color:var(--text-muted);font-size:.76rem;margin-top:2px}
.res-clicks{cursor:pointer}
.res-clicks:hover{background:var(--surface-raised)}
.rostercount{margin:8px 0 0;font-size:.78rem;color:var(--text-muted)}
.rostercount b{color:var(--text)}
@media (max-width:900px){ .reclist{max-height:none} }

/* Hero caption: who the faint figures behind the band are. */
.hero-credit{display:flex;flex-wrap:wrap;gap:10px 26px;margin:22px 0 20px;padding-left:14px;
  border-left:2px solid var(--gold-500,#d5ae45);max-width:760px}
.hero-credit .hc b{display:block;font-size:.82rem;font-weight:750;color:rgba(255,255,255,.94);letter-spacing:.01em}
.hero-credit .hc i{display:block;font-style:normal;font-size:.72rem;color:rgba(255,255,255,.62);margin-top:2px}
.hero-credit .hc--2{opacity:.72}
@media (max-width:900px){ .hero-credit{gap:8px 18px} .hero-credit .hc b{font-size:.78rem} }

/* A supplied portrait, not a placeholder: keep the face in frame at the register's 4:5 crop anchor. */
.recportrait img.has-photo{width:100%;max-width:240px;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 22%;border-radius:var(--radius);border:1px solid var(--line-strong)}

/* The approved record card, carried to the homepage showcase and the council cards. */
.reccards .reccard{margin:0}
.reccard{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2)}
.reccard-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:var(--radius);border:1px solid var(--line-strong);display:block}
.reccard-body h3{margin:2px 0 4px}
.reccard-body table.data{margin-top:10px}
.reccard .vmark{color:var(--emerald-600,#047857);font-weight:700;font-size:.8em}
@media (max-width:640px){ .reccard{grid-template-columns:1fr} .reccard-photo{max-width:160px} }
/* A council's councillors, in the same language. */
.council-people{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.peoplelist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.peoplelist .pl{display:flex;align-items:center;gap:10px}
.pl-av{flex:0 0 34px;width:34px;height:34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--brand-quiet);color:var(--emerald-700,#036c4d);font-size:.72rem;font-weight:750;letter-spacing:.02em}
.pl-av img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.pl-body{flex:1 1 auto;min-width:0}
.pl-body b{display:block;font-size:.86rem;font-weight:650;line-height:1.25}
.pl-sub{display:block;font-size:.74rem;color:var(--text-muted)}
.pl-link{flex:0 0 auto;font-size:.74rem;font-weight:650;white-space:nowrap}

/* The supporter link block on a record page. */
.shareline{display:flex;gap:8px;align-items:center}
.shareline input{flex:1 1 auto;min-width:0;font:inherit;font-size:.78rem;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--text)}
.shareline button{flex:0 0 auto;padding:8px 12px;font-size:.78rem}
.shareqr{margin:12px 0 8px}
.shareqr img{width:132px;height:132px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:6px}
.reflock{font-size:.76rem}

/* How many supporters this councillor's own link has brought in (2 Oct 2026). */
.sharecount{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--brand-quiet);font-size:.8rem;line-height:1.45}
.sharecount b{font-size:1.08rem;font-weight:750;color:var(--emerald-700,#036c4d)}
.sharecount .muted{display:block;font-size:.74rem;margin-top:3px}

/* Registration result line */
.regresult{margin:12px 0 0;font-size:.85rem;line-height:1.5;color:var(--text-muted)}
.regresult.ok{color:var(--emerald-700,#036c4d);font-weight:600}
.regresult.bad{color:#a8321f;font-weight:600}


/* ==========================================================================
   A ward's named councillor is a LINK to their record.
   Owner: "On the Senatorial > Local Government > ward directory, that reveals
   councilors, let it be clickable to reveal the councilors details."
   - Inherits size/weight/colour from whatever it sits in (.nm, .role, .parent),
     so the ward boxes keep their density treatment and only the affordance is new.
   - The arrow is decorative and must never be announced as content.
   - Colour is deliberately NOT themed here: on hover the underline carries the
     affordance, which stays legible in both themes without a new accent token.
   ========================================================================== */
.wardperson{color:inherit;text-decoration:none;cursor:pointer;
  border-bottom:1px solid transparent;transition:border-color .15s ease}
.wardperson:hover,.wardperson:focus-visible{border-bottom-color:currentColor}
.wardperson::after{content:"\2192";font-weight:600;font-size:.85em;opacity:.45;
  margin-left:.32em;text-decoration:none;display:inline-block}
.wardperson:hover::after,.wardperson:focus-visible::after{opacity:.9}
@media (hover:none){.wardperson::after{opacity:.7}}


/* ==========================================================================
   RENEWEDHOPE LOCKUP — the programme a supporter actually meets.
   Owner: "Add the renewed hope branding where necessary."
   - Typographic on purpose: no official RenewedHope mark exists in the design
     package, and inventing a symbol for a political programme would misrepresent
     it. Drop the real mark in here when the Forum supplies one.
   - Emerald only. The gold foil stays reserved (Forum seal, executive cards,
     senior badges, dividers) per the design register.
   - Three parts: .rhmark (the wordmark), .rhlockup (wordmark + tagline + rule),
     .rhbadge (the compact in-line form used in panel heads and receipts).
   ========================================================================== */
.rhmark{display:inline-flex;align-items:baseline;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.rhmark .rh-a{color:var(--emerald-700)}
.rhmark .rh-b{color:var(--emerald-500)}
:root[data-theme="dark"] .rhmark .rh-a{color:#9BD9BC}
:root[data-theme="dark"] .rhmark .rh-b{color:var(--emerald-300)}
.rhlockup{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.rhlockup .rhmark{font-size:1.55rem}
.rhlockup .rhtag{font-size:.66rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted)}
.rhlockup .rhrule{height:2px;width:64px;border-radius:2px;
  background:linear-gradient(90deg,var(--emerald-500),var(--emerald-200))}
.rhbadge{display:inline-flex;align-items:center;gap:.5em;padding:.28em .62em;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface-raised);font-size:.7rem;font-weight:700;
  vertical-align:middle}
.rhbadge .rhmark{font-size:.94rem}
.rhbadge .rhsep{width:1px;height:1.05em;background:var(--line-strong)}
.rhbadge .rhsub{color:var(--text-muted);font-weight:700;letter-spacing:.02em}
.rhreceipt{display:block;margin-bottom:8px}
/* The OFFICIAL RenewedHope mark (supplied by the owner 13 Sep 2026) replaces the typographic
   wordmark. The artwork ships on white with internal white paths, so it is NEVER knocked out to
   transparency — on the dark hero band it sits inside a white pill instead. Asset: 301x165. */
.rhlogo{display:block;height:1.06em;width:auto}
.rhbadge .rhlogo{height:1.15em}
.rhlockup .rhlogo{height:2.1rem}
.rhlockup{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.rhpill{display:inline-flex;background:#fff;border-radius:14px;padding:12px 16px 10px;
  box-shadow:0 1px 2px rgba(16,22,26,.10), 0 10px 24px rgba(0,0,0,.14);width:fit-content}
.rhpill .rhtag{color:var(--ink-600)}
.rhpill .rhrule{background:linear-gradient(90deg,#61B158,rgba(97,177,88,.25))}
.hero .rhlockup .rhtag{color:var(--ink-600)}
.hero .rhlockup .rhrule{background:linear-gradient(90deg,#61B158,rgba(97,177,88,.25))}
@media (max-width:520px){.rhlockup .rhlogo{height:1.7rem}}
/* The mark needs a light surface, so on the dark band it sits in a tight white CHIP and the tagline
   stays OUTSIDE it in light text. Two traps this fixes: (1) a white pill put white tagline text on
   white, because .hero .rhlockup .rhtag outranks .rhpill .rhtag on specificity; (2) a flex column
   stretches its children, so the <img> was widened to the container and the wordmark got distorted
   and clipped — hence align-items:flex-start plus an explicit aspect-preserving width. */
.rhlockup{align-items:flex-start}
.rhlogo{height:auto;width:auto;max-width:100%;object-fit:contain}
.rhchip{background:#fff;border-radius:10px;padding:10px 14px;width:fit-content;
  box-shadow:0 1px 2px rgba(16,22,26,.10), 0 8px 20px rgba(0,0,0,.16)}
.rhchip .rhlogo{height:2.3rem;width:auto}
.hero .rhlockup .rhtag{color:rgba(255,255,255,.82)}
.hero .rhlockup .rhrule{background:linear-gradient(90deg,#7CD08F,rgba(124,208,143,.25))}
.band .rhlockup .rhtag,.band .rhchip + .rhtag{color:var(--text-muted)}
.rhbadge .rhlogo{height:1.45em}
@media (max-width:520px){.rhchip .rhlogo{height:1.5rem}}


/* The hero band is dark in BOTH themes, so the wordmark needs a light-on-dark variant:
   emerald-700 on an emerald band is legible but muted — the mark should read as branding, not as
   a smudge. Same treatment for the tagline and the rule. */
.hero .rhlockup .rhmark .rh-a{color:#CFE9DC}
.hero .rhlockup .rhmark .rh-b{color:var(--emerald-300)}
.hero .rhlockup .rhtag{color:rgba(255,255,255,.74)}
.hero .rhlockup .rhrule{background:linear-gradient(90deg,var(--emerald-300),rgba(255,255,255,.25))}
.band .rhlockup .rhmark .rh-a{color:var(--emerald-800)}

@media (max-width:520px){.rhlockup .rhmark{font-size:1.3rem}}

/* ==========================================================================
   HERO COLLAGE — forum-exco.html
   The hero carries the executive itself: one tile per verified officer, every
   tile taken from that officer's OWN record (pairing asserted in
   /programmer/work/lc_exco_collage.py). Replaces the previous ghosted collage
   (opacity .16, effectively invisible) and the two soft hero figures, and it
   sits BESIDE the copy — not under it — so the cabinet starts ~800px from the
   top instead of ~1600px.
   ========================================================================== */
.hero--exco { padding: 54px 0 42px }
.hero--exco h1 { margin: 6px 0 12px }
.hero--exco .hero-credit { margin: 18px 0 16px }
.hero--exco .hero__copy > *:first-child { margin-top: 0 }
.hero-note {
  font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.76);
  border-left: 3px solid var(--gold-500); padding: 2px 0 2px 14px;
  max-width: 62ch; margin: 0;
}
.hero-note b { color: #fff }
.hero-collage { margin: 0; min-width: 0 }
.hero-collage img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: var(--radius-lg); border: 1px solid rgba(212,175,55,.45);
  background: var(--emerald-950); box-shadow: 0 22px 50px rgba(0,0,0,.38);
}
.hero-collage__cap {
  margin-top: 11px; font-size: .8rem; line-height: 1.5;
  color: rgba(255,255,255,.68); max-width: 96ch;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 30px 44px }
  .hero__side { grid-column: 1 / -1; margin-top: 2px }
  .hero__side .stats { grid-template-columns: repeat(4, minmax(0,1fr)) }
}
@media (max-width: 700px) {
  .hero--exco { padding: 34px 0 26px }
  .hero-collage__cap { font-size: .76rem }
}

.hero__copy, .hero__side, .hero-collage { min-width: 0 }

.hero__grid { display: grid; align-items: start; min-width: 0 }


/* ==========================================================================
   THE RENEWED HOPE SEAL — the mark a councillor's supporter should meet first.
   Owner (14 Sep 2026): "This logo should be very visible on the form that
   councillors will be sharing to their supporters." So it leads the
   registration panel, and it rides in the referral banner a shared link opens.
   The artwork is the transparent cut (assets/renewedhope-seal.webp).
   ========================================================================== */
.regseal{
  display:flex;align-items:center;gap:18px;
  padding:20px 20px 18px;
  background:linear-gradient(180deg,var(--emerald-50),var(--ink-0));
  border-bottom:1px solid var(--line);
}
.regseal img{flex:0 0 auto;width:132px;height:132px;display:block;
  filter:drop-shadow(0 6px 16px rgba(0,64,38,.18))}
.regseal-txt{min-width:0}
.regseal-txt b{display:block;font-size:1.12rem;line-height:1.25;color:var(--emerald-800);
  letter-spacing:-.01em;max-width:26ch}
.regseal-txt span{display:block;margin-top:6px;font-size:.82rem;color:var(--text);max-width:46ch}
.refbanner .refseal{flex:0 0 auto;width:52px;height:52px;display:block}
:root[data-theme="dark"] .regseal{background:linear-gradient(180deg,rgba(79,191,140,.12),transparent);
  border-bottom-color:var(--line)}
:root[data-theme="dark"] .regseal-txt b{color:var(--emerald-200)}
@media (max-width:560px){
  .regseal{flex-direction:column;align-items:center;text-align:center;gap:12px;padding:18px 16px 16px}
  .regseal img{width:112px;height:112px}
  .regseal-txt b{max-width:none}
  .regseal-txt span{max-width:none}
  .refbanner .refseal{width:44px;height:44px}
}

/* The referral banner carries a `hidden` attribute until a real ?ref= link is opened,
   but `.refbanner{display:flex}` was winning over the attribute — so every visitor,
   link or no link, was told "This link was issued to them". Keep the attribute honest. */
.refbanner[hidden]{display:none}


/* ==========================================================================
   HERO — the executive slider, 15 Sep 2026
   Owner: "instead of just the chairman and vice chairman 1 on the hero, just leave them as the
   first two while one can slide horizontally to reveal the rest of the executives and it should
   come bolder and closer as it gains view."
   So every executive is a card on a scroll-snap track, and each card scales up, brightens and
   sharpens as it reaches the focus point (--p = distance from focus, 0 = in focus, 1 = at the
   edge). The markup is static, so it renders and scrolls with JS off; assets/exco-slider.js only
   drives the focus mapping, the arrows and the progress rail.
   ========================================================================== */
.hero--lead{padding:40px 0 24px}
.hero--lead .hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:26px 40px;align-items:start}
.hero--lead .hero__copy{min-width:0}
.hero--lead h1{font-size:clamp(2rem,3.2vw,2.95rem);line-height:1.07;letter-spacing:-.012em;margin:10px 0 14px}
.hero--lead .lede{font-size:.99rem;max-width:56ch;margin-bottom:0}
.hero--lead .cta{margin:20px 0 6px}
.hero--lead .hero__side{grid-column:auto;min-width:0;max-width:100%}
.hero--lead .hero-note{margin:16px 0 0;max-width:52ch;font-size:.82rem}
.hero--lead .goldrule{margin-top:26px}

/* the track */
.exco-slider{min-width:0;max-width:100%}
.exco-track{display:flex;gap:13px;align-items:flex-start;min-width:0;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:16px 2px 6px;margin:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.exco-track{cursor:grab}
.exco-track.is-drag{cursor:grabbing;scroll-snap-type:none}
.exco-track::-webkit-scrollbar{display:none}
.exco-track:focus-visible{outline:2px solid var(--gold-500);outline-offset:4px;border-radius:18px}

/* the card — --p 0 = in focus (bold and close), 1 = at the edge (small and quiet) */
.pcard{--p:0;position:relative;display:block;flex:0 0 clamp(146px,44%,190px);scroll-snap-align:start;
  text-decoration:none;border-radius:var(--radius-lg);overflow:hidden;background:rgba(255,255,255,.05);
  border:1px solid rgba(212,175,55,calc(.18 + .34 * (1 - var(--p))));
  box-shadow:0 calc(8px + 12px * (1 - var(--p))) calc(18px + 22px * (1 - var(--p))) rgba(0,0,0,calc(.18 + .24 * (1 - var(--p))));
  transform:scale(calc(1 - .15 * var(--p)));transform-origin:50% 42%;
  filter:brightness(calc(1 - .21 * var(--p))) saturate(calc(1 - .32 * var(--p)));
  transition:transform .24s ease,filter .24s ease,box-shadow .24s ease,border-color .24s ease}
.pcard__f{display:block}
.pcard__f img{display:block;width:100%;height:auto}
.pcard__cap{display:block;padding:9px 11px 11px;border-top:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(1,38,26,calc(.48 + .20 * (1 - var(--p)))),rgba(1,38,26,.90))}
.pcard__office{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#0b241b;background:var(--gold-400);padding:3px 7px;border-radius:999px;margin-bottom:6px;
  opacity:calc(.70 + .30 * (1 - var(--p)))}
.pcard b{display:block;font-size:.79rem;line-height:1.28;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.pcard i{display:block;font-style:normal;font-size:.66rem;line-height:1.4;margin-top:3px;
  color:rgba(255,255,255,calc(.50 + .32 * (1 - var(--p))))}
.pcard:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}

/* a seat with no verified holder yet — keeps the same box as a portrait card so the row stays even */
.pcard.is-vacant{border-style:dashed;border-color:rgba(255,255,255,.22)}
.pcard.is-vacant .pcard__f{aspect-ratio:4/5;display:grid;place-items:center;background:rgba(0,0,0,.24)}
.pcard.is-vacant .pcard__f img{width:42%;height:auto;opacity:.40}
.pcard.is-vacant .pcard__office{background:rgba(255,255,255,.16);color:rgba(255,255,255,.88)}
.pcard.is-vacant b{color:rgba(255,255,255,.74);font-weight:700;text-shadow:none}
.pcard.is-vacant i{color:rgba(255,255,255,.50)}

/* rail + arrows */
.exco-foot{display:flex;align-items:center;gap:12px;margin-top:6px}
.exco-rail{flex:1 1 auto;height:3px;min-width:40px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.exco-rail i{display:block;height:100%;width:30%;border-radius:99px;background:var(--gold-400);
  transition:transform .18s linear,width .18s linear}
.exco-btns{display:flex;gap:7px;flex:0 0 auto}
.exco-btn{width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);color:#fff;font-size:1.15rem;line-height:1}
.exco-btn:hover{border-color:var(--gold-400);color:var(--gold-300)}
.exco-btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.exco-btn[disabled]{opacity:.32;cursor:default}
.exco-note{margin:9px 0 0;font-size:.74rem;line-height:1.5;color:rgba(255,255,255,.62);max-width:44ch}
.exco-note a{color:var(--gold-300);text-decoration:none;border-bottom:1px solid rgba(212,175,55,.45)}
.exco-note a:hover{color:#fff}

@media (max-width:980px){
  .hero--lead .hero__grid{grid-template-columns:1fr;gap:22px}
  .hero--lead .hero-note{margin-top:16px}
  /* run the track to the page edge: the next card must be visibly waiting off-screen */
  .exco-track{margin:0 -22px;padding-left:22px;padding-right:22px;scroll-padding-left:22px}
  .pcard{flex:0 0 clamp(140px,42vw,182px)}
}
@media (max-width:560px){
  .hero--lead{padding:26px 0 20px}
  .hero--lead h1{font-size:clamp(1.72rem,7.4vw,2.1rem)}
  .hero--lead .lede{font-size:.94rem}
  /* the provenance sentence lives in the Data integrity section too — drop it here so the
     executive cards reach the first screen, and put the three CTAs on two rows instead of three */
  .hero--lead .hero-note{display:none}
  .hero--lead .cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero--lead .cta .btn{width:auto;font-size:.88rem;padding:12px 13px}
  .hero--lead .cta .btn:first-child{grid-column:1 / -1}
  .pcard__cap{padding:8px 10px 10px}
  .pcard b{font-size:.75rem}
}
@media (max-width:520px){
  .exco-track{margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding-left:16px}
}
@media (prefers-reduced-motion:reduce){
  .pcard,.exco-rail i{transition:none}
}

/* "On this page" — the home page's own sections, moved out of the global nav */
.onpage{background:var(--bg);border-bottom:1px solid var(--line)}
.onpage .wrap{display:flex;align-items:center;gap:8px 9px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
.onpage__label{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:750;color:var(--ink-500);margin-right:3px}
.onpage a{font-size:.79rem;line-height:1;padding:6px 11px;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-700);text-decoration:none;background:var(--bg)}
.onpage a:hover{border-color:var(--emerald-500);color:var(--emerald-700)}
.onpage a:focus-visible{outline:2px solid var(--emerald-500);outline-offset:2px}
@media (max-width:560px){ .onpage__label{display:none} }

/* the theme switch is a control, not an ornament: at 1rem the crescent read as an empty box */
.theme-toggle{min-width:42px;min-height:38px;font-size:1.15rem;line-height:1;color:var(--emerald-700)}

/* 15 Sep 2026 — the multimedia hub now carries real films and real posters, and a project card can
   carry a real photograph. The play badge sits on the poster; a left click opens the film in a
   YouTube no-cookie overlay so the reader never leaves the register, and with JS off the card is
   an ordinary link to the film's own page. Every card and poster is credited underneath. */
.mclink{position:relative;display:block;text-decoration:none;background:#070d22}
.mclink img{display:block;transition:transform .35s var(--ease-out,ease)}
.mclink:hover img,.mclink:focus-visible img{transform:scale(1.03)}
.mcplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(7,13,34,.02),rgba(7,13,34,.42))}
.mcplay::after{content:"";width:58px;height:58px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23070d22' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px 26px no-repeat;
  box-shadow:0 8px 22px rgba(0,0,0,.4)}
.mclink:hover .mcplay::after,.mclink:focus-visible .mcplay::after{transform:scale(1.06)}
.mc-src{display:block;margin-top:7px;font-size:.7rem;line-height:1.45;color:var(--text-muted)}
.mc-src a{color:var(--brand);text-decoration:none;border-bottom:1px solid var(--brand-quiet)}
.pc-src{display:block;margin-top:7px;font-size:.68rem;line-height:1.4;color:var(--text-muted)}
.pc-src a{color:var(--brand);text-decoration:none;border-bottom:1px solid var(--brand-quiet)}
.mcplayer{position:fixed;inset:0;z-index:var(--z-modal,400);background:rgba(4,8,20,.9);
  display:flex;align-items:center;justify-content:center;padding:20px}
.mcplayer__inner{position:relative;width:min(1020px,96vw)}
.mcplayer__frame{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.6)}
.mcplayer__frame iframe{width:100%;height:100%;border:0;display:block}
.mcplayer__cap{margin:10px 2px 0;color:#fff;font-size:.82rem;line-height:1.5}
.mcplayer__cap span{color:rgba(255,255,255,.72)}
.mcplayer__x{position:absolute;right:0;top:-44px;background:none;border:0;color:#fff;
  font-size:30px;line-height:1;cursor:pointer;padding:0 4px}
.mcplayer__x:hover{color:var(--gold-400,#d5ae45)}
@media (max-width:560px){.mcplay::after{width:46px;height:46px;background-size:22px 22px}}

/* 15 Sep 2026 — the constituency projects section stops using category illustrations: the three cards
   now carry openly licensed photographs with the credit on the card, and below them sits a record
   list where every line names the project, the council and the source it came from. */
.pc-src{display:block;margin-top:6px;font-size:.72rem;line-height:1.5;color:var(--text-muted)}
.pc-src a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}
.rec__h{margin:34px 0 6px;font-size:1.05rem}
.rec__lede{margin:0 0 14px;font-size:.86rem;line-height:1.6;color:var(--text-muted);max-width:72ch}
.rec{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rec li{padding:13px 15px 13px 17px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--gold-400);border-radius:var(--radius);box-shadow:var(--shadow-e1)}
.rec li b{display:block;font-size:.94rem;line-height:1.35}
.rec__meta{display:block;margin-top:5px;font-size:.75rem;color:var(--text-muted)}
.rec__meta a{color:var(--brand);font-weight:600;text-decoration:none}
.rec__meta a:hover{text-decoration:underline}
.rec__who{margin-left:6px;font-style:italic}
.rec__src{display:block;margin-top:5px;font-size:.73rem;line-height:1.5;color:var(--text-muted)}
.rec__src a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}
@media (min-width:900px){.rec{grid-template-columns:1fr 1fr}}