/* =========================================================================
   GB Politics — "Sovereign Data" design system
   Hand-written, no framework. Tokens from downloads/…/sovereign_data/DESIGN.md.
   Aesthetic: institutional transparency — flat digital record, 1px outlines,
   restrained palette, tabular data. Colour-blind-safe vote colours (not R/G).
   ========================================================================= */

/* ---- Fonts (self-hosted, latin subset, OFL) ---------------------------- */
@font-face { font-family:'Hanken Grotesk'; font-weight:600; font-style:normal;
  font-display:swap; src:url('/fonts/hanken-600.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-weight:700; font-style:normal;
  font-display:swap; src:url('/fonts/hanken-700.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-weight:900; font-style:normal;
  font-display:swap; src:url('/fonts/hanken-900.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:400; font-style:normal;
  font-display:swap; src:url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal;
  font-display:swap; src:url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal;
  font-display:swap; src:url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:500; font-style:normal;
  font-display:swap; src:url('/fonts/jetbrains-500.woff2') format('woff2'); }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Brand */
  --navy:#0d1b2a;        /* institutional authority (primary ink / dark surfaces) */
  --navy-soft:#3a4859;   /* on-primary-fixed-variant */
  --green:#0f6b4e;       /* Commons / secondary — links & accents */
  --green-bright:#85d7b2;/* secondary-fixed-dim */
  --red:#770022;         /* Lords provenance (NOT an error state) */
  /* Vote indicators — colour-blind-safe, politically neutral (per DESIGN.md) */
  --aye:#4338ca;         /* indigo */
  --no:#d97706;          /* amber */
  --abstain:#9aa0a6;
  /* Surfaces (cool grey scaffolding) */
  --bg:#f8f9fa;
  --surface:#ffffff;
  --surface-low:#f3f4f5;
  --surface-container:#edeeef;
  --surface-high:#e7e8e9;
  --ink:#191c1d;
  --ink-soft:#44474c;
  --outline:#74777d;
  --line:#e2e8f0;        /* standard 1px card border */
  --line-strong:#c4c6cc;
  --error:#ba1a1a;
  /* Type */
  --font-head:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* Layout */
  --maxw:1440px;
  --gutter:24px;
  --margin:64px;
  /* Radius */
  --r-sm:2px; --r:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
}

/* ---- Reset / base ------------------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:24px;
  font-feature-settings:'tnum' 1;   /* tabular figures everywhere */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { font-family:var(--font-head); margin:0; color:var(--ink); }
a { color:var(--green); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }
::selection { background:var(--green-bright); }
:focus-visible { outline:2px solid var(--navy); outline-offset:2px; border-radius:var(--r); }
hr { border:0; border-top:1px solid var(--line); margin:0; }

/* ---- Type utilities ---------------------------------------------------- */
.kicker {           /* label-sm mono uppercase — the "raw data" signal */
  font-family:var(--font-body); font-weight:500; font-size:13px; line-height:16px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--green);
}
.kicker--muted { color:var(--ink-soft); }
.mono { font-family:var(--font-body); font-size:13px; letter-spacing:.02em; }
.h1 { font-size:48px; line-height:56px; font-weight:700; letter-spacing:-.02em; }
.h2 { font-size:32px; line-height:40px; font-weight:600; letter-spacing:-.01em; }
.h3 { font-size:20px; line-height:28px; font-weight:600; }
.lead { font-size:18px; line-height:28px; color:var(--ink-soft); }
.data-num { font-family:var(--font-head); font-weight:700; font-size:24px;
  line-height:24px; font-feature-settings:'tnum' 1; }
.muted { color:var(--ink-soft); }
@media (max-width:768px){ .h1{font-size:32px;line-height:38px;} .h2{font-size:24px;line-height:32px;} }

/* ---- Layout ------------------------------------------------------------ */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--margin); }
@media (max-width:768px){ .container{ padding-inline:16px; } :root{ --margin:16px; } }
.section { padding-block:80px; }
.section--tight { padding-block:48px; }
/* Content sections sit in a centred column narrower than the 1440px chrome,
   so pages read centred instead of stranding content on the left. */
.section, .section--tight { max-width:1160px; }

/* ---- Masthead ---------------------------------------------------------- */
.masthead {
  position:sticky; top:0; z-index:50; background:var(--bg);
  border-bottom:1px solid var(--line-strong);
}
.masthead__row { display:flex; align-items:center; justify-content:space-between; height:64px; gap:24px; }
.masthead__left { display:flex; align-items:center; gap:28px; min-width:0; }
.brand { display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; }   /* never let the logo get squeezed */
.brand__logo { height:30px; width:auto; max-width:none; display:block; flex:none; }
@media (max-width:600px){ .brand__logo{ height:26px; } }
.footer .brand__logo { height:34px; }
.brand:hover { text-decoration:none; }
.brand__mark { display:inline-flex; }
.brand__word { font-family:var(--font-head); font-weight:400; font-size:20px;
  color:var(--green); letter-spacing:-.01em; }
.brand__word b { font-weight:900; color:var(--navy); }
.nav { display:flex; align-items:center; gap:24px; }
.nav a {
  font-family:var(--font-body); font-size:15px; font-weight:500; color:var(--ink-soft);
  padding:6px 0 4px; border-bottom:2px solid transparent;   /* top pad balances pad+border below so text centres on the logo */
}
.nav a:hover { color:var(--navy); text-decoration:none; }
.nav a[aria-current="page"] { color:var(--navy); border-bottom-color:var(--navy); }
.masthead__right { display:flex; align-items:center; gap:16px; }
.masthead__auth { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; color:var(--navy); font-weight:500; }
.masthead__auth svg { color:var(--outline); }
.masthead__auth:hover { text-decoration:none; color:var(--navy); }
.btn--sm { padding:7px 14px; font-size:12px; }
@media (max-width:900px){ .nav{ display:none; } .masthead__right .masthead__auth{ display:none; } }

/* Mobile disclosure menu (no JS) */
.mnav { display:none; position:relative; }
.mnav > summary { list-style:none; cursor:pointer; font-size:24px; line-height:1; padding:6px 8px; color:var(--navy); }
.mnav > summary::-webkit-details-marker { display:none; }
.mnav__panel { position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line-strong);
  border-radius:var(--r-md); padding:6px; display:flex; flex-direction:column; min-width:190px;
  box-shadow:0 10px 30px rgba(13,27,42,.14); z-index:60; }
.mnav__panel a { font-family:var(--font-body); font-weight:500; font-size:15px; padding:11px 12px; color:var(--ink); border-radius:var(--r); }
.mnav__panel a:hover { background:var(--surface-low); text-decoration:none; }
@media (max-width:900px){ .mnav{ display:block; } }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:13px; letter-spacing:.02em;
  padding:10px 18px; border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; transition:background .15s,opacity .15s,border-color .15s; white-space:nowrap;
}
.btn--primary { background:var(--navy); color:#fff; }
.btn--primary:hover { background:#16283d; text-decoration:none; }
.btn--outline { background:transparent; color:var(--navy); border-color:var(--navy); }
.btn--outline:hover { background:rgba(13,27,42,.06); text-decoration:none; }
.btn--ghost { background:transparent; color:var(--ink-soft); }
.btn--lg { font-family:var(--font-head); font-size:16px; font-weight:600; padding:14px 28px; border-radius:var(--r-md); }

/* ---- Search input ------------------------------------------------------ */
.searchbox { position:relative; }
.searchbox input {
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  background:var(--surface-container); border:none; border-radius:var(--r-md);
  padding:9px 16px 9px 40px; width:16rem; max-width:100%;
}
.searchbox svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--outline); }
.searchbox input:focus { outline:2px solid var(--navy); }
@media (max-width:600px){ .searchbox{ display:none; } }

/* ---- Hero -------------------------------------------------------------- */
.hero { position:relative; overflow:hidden; background:var(--navy); color:#fff; }
.hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.hero__scrim { position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,rgba(13,27,42,.82),rgba(13,27,42,.94)); }
.hero__inner { position:relative; z-index:2; padding-block:88px; max-width:640px; }
.hero h1 { color:#fff; }
.hero__sub { color:#c9d2dc; margin:16px 0 32px; font-size:18px; line-height:28px; }
.hero__meta { display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; }
.hero__meta span { display:inline-flex; align-items:center; gap:6px; color:#aeb8c4;
  font-family:var(--font-body); font-size:13px; letter-spacing:.02em; }
@media (max-width:768px){ .hero__inner{ padding-block:56px; } }

/* ---- Lookup (postcode / MP front door) --------------------------------- */
.lookup { display:flex; gap:8px; background:#fff; padding:8px; border-radius:var(--r-lg);
  box-shadow:0 12px 40px rgba(13,27,42,.35); max-width:34rem; }
.lookup .field { flex:1; position:relative; display:flex; align-items:center; }
.lookup .field svg { position:absolute; left:16px; color:var(--outline); }
.lookup input { flex:1; border:none; background:transparent; font-family:var(--font-body);
  font-size:16px; color:var(--ink); padding:16px 16px 16px 44px; border-radius:var(--r-md); }
.lookup input:focus { outline:none; }
.lookup:focus-within { box-shadow:0 12px 40px rgba(13,27,42,.35),0 0 0 3px rgba(13,27,42,.25); }
@media (max-width:560px){ .lookup{ flex-direction:column; } .lookup .btn{ width:100%; } }

/* ---- Cards / bento ----------------------------------------------------- */
.bento { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); }
.col-4{grid-column:span 4;} .col-5{grid-column:span 5;} .col-6{grid-column:span 6;}
.col-7{grid-column:span 7;} .col-8{grid-column:span 8;} .col-12{grid-column:span 12;}
@media (max-width:900px){ .bento{ grid-template-columns:1fr; }
  .col-4,.col-5,.col-6,.col-7,.col-8{ grid-column:1/-1; } }
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:32px; transition:border-color .15s,box-shadow .15s;
  color:inherit; text-decoration:none; display:block;
}
.card:hover { text-decoration:none; }
.card--low { background:var(--surface-low); }
.card--tint { background:var(--surface-container); }
.card--dark { background:var(--navy); color:#fff; border-color:var(--navy); }
.card--dark h3, .card--dark .h3 { color:#fff; }
.card:hover { box-shadow:0 4px 16px rgba(13,27,42,.06); }
.card .icon { width:48px; height:48px; border-radius:var(--r-md); background:#fff;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--navy); margin-bottom:20px; }
.card--dark .icon { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#fff; }
.card__link { font-family:var(--font-body); font-size:13px; letter-spacing:.02em; font-weight:500;
  color:var(--navy); display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; }
.card--dark .card__link { color:#fff; }

/* ---- Chips ------------------------------------------------------------- */
.chip { display:inline-flex; align-items:center; font-family:var(--font-body); font-size:13px;
  letter-spacing:.02em; padding:3px 8px; border-radius:var(--r-sm);
  background:var(--surface-container); color:var(--ink-soft); }
.chip--topic { background:#fef2f2; color:#7f1d1d; }  /* topic tag (tertiary-fixed family) */
.chip--former { background:#f1f0ec; color:#6b6255; }  /* former-member tag */
.chip--rebel { background:transparent; border:1px solid var(--no); color:var(--no); }  /* rebellion flag */

/* ---- Stat cells (elected / majority / attendance …) -------------------- */
.statgrid { display:flex; flex-wrap:wrap; gap:12px; }
.stat { flex:1; min-width:120px; border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px; background:var(--surface); }
.stat .label { display:block; font-family:var(--font-body); font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); }
.stat .val { display:block; font-family:var(--font-head); font-weight:700; font-size:20px; margin-top:4px; }

/* ---- Division tally bar (aye / no) ------------------------------------- */
.tally { display:flex; height:24px; border-radius:var(--r-pill); overflow:hidden; background:var(--surface-container); }
.tally .aye { background:var(--aye); }
.tally .no  { background:var(--no); }
.tally .abstain { background:var(--abstain); }
.legend { display:flex; gap:16px; margin-top:8px; font-family:var(--font-body); font-size:13px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.swatch { width:12px; height:12px; border-radius:var(--r-sm); display:inline-block; }

/* ---- Vote badges ------------------------------------------------------- */
.vote { font-family:var(--font-body); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-sm); font-weight:500; }
.vote--aye { background:#e8e7fb; color:#332bb0; }
.vote--no { background:#fdf0dd; color:#8a4b04; }
.vote--abstain { background:var(--surface-container); color:var(--ink-soft); }

/* ---- Waffle (party vote map) — 10×10 grid ------------------------------ */
.waffle { display:grid; grid-template-columns:repeat(10,1fr); gap:2px; max-width:220px; }
.waffle i { aspect-ratio:1; border-radius:1px; background:var(--surface-high); display:block; }
.waffle i.on { background:var(--green); }
.waffle i.rebel { background:var(--red); }

/* ---- Dark band (CTA / transparency statement) -------------------------- */
.band { background:var(--navy); color:#fff; }
.band h2, .band .h2 { color:#fff; }
.band .lead { color:#c9d2dc; }

/* ---- Footer ------------------------------------------------------------ */
.footer { background:var(--surface); border-top:1px solid var(--line-strong); padding-block:48px; }
.footer__grid { display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; }
.footer__cols { display:flex; flex-wrap:wrap; gap:56px; }
.footer h4 { font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--navy); margin-bottom:12px; }
.footer a { display:block; font-family:var(--font-body); font-size:14px;
  color:var(--ink-soft); padding:4px 0; }
.footer a:hover { color:var(--navy); }
.footer__legal { border-top:1px solid var(--line); margin-top:40px; padding-top:24px;
  font-family:var(--font-body); font-size:12px; color:var(--ink-soft); }

/* ---- Prose (trust / content pages) ------------------------------------- */
.prose { max-width:720px; }
.prose h2 { font-size:24px; line-height:32px; margin:40px 0 12px; }
.prose h3 { margin:28px 0 8px; }
.prose p, .prose li { font-size:17px; line-height:28px; color:#2b2e30; }
.prose ul { padding-left:20px; }
.prose li { margin:6px 0; }
.prose a { text-decoration:underline; }
.source { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body);
  font-size:12px; color:var(--ink-soft); }

/* ---- Avatars ----------------------------------------------------------- */
.avatar { border-radius:var(--r-pill); object-fit:cover; background:var(--surface-container);
  border:1px solid var(--line); display:block; flex:none; }
.avatar--sm { width:40px; height:40px; }
.avatar--md { width:56px; height:56px; }

/* ---- Data tables (MP list etc.) ---------------------------------------- */
.table { width:100%; border-collapse:collapse; font-size:15px; }
.table th { text-align:left; font-family:var(--font-body); font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:500;
  padding:10px 12px; border-bottom:1px solid var(--line-strong); white-space:nowrap; }
.table th.sortable { cursor:pointer; user-select:none; }
.table th.sortable:hover { color:var(--navy); }
.table th[aria-sort="ascending"]::after  { content:" \2191"; color:var(--navy); }
.table th[aria-sort="descending"]::after { content:" \2193"; color:var(--navy); }
.table td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tbody tr:hover { background:var(--surface-low); }
.mp-cell { display:flex; align-items:center; gap:12px; }
.pdot { display:inline-block; width:9px; height:9px; border-radius:var(--r-pill);
  margin-right:6px; vertical-align:middle; }

/* ---- Toolbar (search / filter) ----------------------------------------- */
.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
.toolbar input[type="search"], .toolbar select {
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:11px 14px; background:var(--surface); }
.toolbar input[type="search"] { flex:1 1 240px; min-width:0; }
.toolbar input[type="search"]:focus, .toolbar select:focus { outline:2px solid var(--navy); border-color:var(--navy); }
.toolbar .count { font-family:var(--font-body); font-size:13px; color:var(--ink-soft); margin-left:auto; }
.no-results td { padding:24px 12px; color:var(--ink-soft); text-align:center; }

/* ---- MP profile header ------------------------------------------------- */
.mp-head { display:flex; gap:32px; align-items:flex-start; }
.mp-photo img { width:200px; height:200px; object-fit:cover; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface-container); }
.mp-id { flex:1; min-width:0; }
@media (max-width:640px){ .mp-head{ flex-direction:column; gap:20px; }
  .mp-photo img{ width:140px; height:140px; } }
.contact-row { display:flex; align-items:center; gap:8px; margin:0 0 8px; word-break:break-word; }
.mp-current-posts { font-size:15px; line-height:23px; }
.mp-current-posts .sep { color:var(--outline); }
.role-list { list-style:none; margin:0; padding:0; }
.role-list li { display:flex; flex-wrap:wrap; gap:2px 14px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line); }
.role-list li:last-child { border-bottom:0; }
.role-list .role-main { flex:1 1 62%; }
.role-list .role-dates { margin-left:auto; font-size:12px; white-space:nowrap; }
.mp-photo img { border-radius:12px; background:var(--surface-low); object-fit:cover; }
.mp-posts { margin-top:10px; font-size:15px; line-height:23px; color:var(--navy); font-weight:600; }
.mp-posts .sep { color:var(--outline); font-weight:400; margin:0 9px; }

/* ---- Pager -------------------------------------------------------------- */
.pager { display:flex; align-items:center; gap:16px; margin-top:24px; flex-wrap:wrap; }
.pager__btn { font-family:var(--font-body); font-size:13px; padding:9px 16px;
  border:1px solid var(--line-strong); border-radius:var(--r-md); color:var(--navy); }
.pager__btn:hover { background:var(--surface-low); text-decoration:none; }
.pager__btn--off { color:var(--outline); border-color:var(--line); }
.pager__pos { font-family:var(--font-body); font-size:13px; color:var(--ink-soft); }
.pager[hidden] { display:none; }   /* .pager display:flex would otherwise beat the [hidden] UA rule (no-JS + single page) */
/* client pager uses <button>; match the server <a> look */
button.pager__btn { background:none; cursor:pointer; }
button.pager__btn:disabled { cursor:default; }
button.pager__btn:disabled:hover { background:none; }

/* ---- Segmented toggle (e.g. current / former) -------------------------- */
.segmented { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden; }
.segmented__btn { padding:8px 15px; font-family:var(--font-body); font-size:14px; color:var(--ink-soft);
  background:none; border:0; border-left:1px solid var(--line-strong); cursor:pointer; }
.segmented__btn:first-child { border-left:0; }
.segmented__btn.is-active { background:var(--navy); color:#fff; }
.segmented__btn:not(.is-active):hover { background:var(--surface-low); }
.segmented__n { opacity:.65; font-size:12px; margin-left:2px; }
/* Mobile menu group headers */
.mnav__h { display:block; margin:10px 0 2px; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.mnav__h:first-child { margin-top:0; }

/* ---- Forms (sign-in / contact) ----------------------------------------- */
.form { display:flex; flex-direction:column; gap:18px; }
.form label { display:flex; flex-direction:column; gap:7px;
  font-family:var(--font-body); font-weight:500; font-size:14px; color:var(--ink); }
.form input, .form textarea, .form select {
  font-family:var(--font-body); font-size:16px; color:var(--ink); width:100%;
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:11px 14px; background:var(--surface); }
.form textarea { resize:vertical; min-height:120px; line-height:24px; }
.form input:focus, .form textarea:focus, .form select:focus {
  outline:2px solid var(--navy); border-color:var(--navy); }
.form input::placeholder, .form textarea::placeholder { color:var(--outline); }

/* ---- Utilities --------------------------------------------------------- */
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:16px; top:8px; z-index:100; background:#fff; padding:8px 12px;
  border:2px solid var(--navy); border-radius:var(--r); }
.stack > * + * { margin-top:16px; }
.flex { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
/* MP written-question Q&A (expandable) */
.qa-list { border-top:1px solid var(--line); }
.qa { border-bottom:1px solid var(--line); }
.qa > summary { list-style:none; cursor:pointer; padding:12px 0; display:flex; flex-wrap:wrap; gap:2px 14px; align-items:baseline; }
.qa > summary::-webkit-details-marker { display:none; }
.qa-head { flex:1 1 58%; font-weight:500; }
.qa > summary .qa-meta { margin-left:auto; font-size:12px; white-space:nowrap; }
.qa-q { margin:2px 0 0; font-size:15px; line-height:23px; }
.qa-a { margin:12px 0 14px; padding:12px 14px; background:var(--surface-low); border-radius:var(--r); font-size:15px; line-height:23px; }
.qa[open] > summary .qa-head { color:var(--navy); }

/* ---- seo / faq / breadcrumb ------------------------------------------- */
.crumbs { font-family:var(--font-body); font-size:12px; color:var(--ink-soft);
  margin:0 0 18px; display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }
.crumbs a { color:var(--green); }
.crumbs span[aria-hidden] { color:var(--outline); }
.crumbs [aria-current] { color:var(--ink); }
.at-a-glance { font-size:17px; line-height:27px; margin:0 0 20px; max-width:760px; }
.at-a-glance .kicker { display:block; margin-bottom:6px; }
.faq { max-width:760px; }

/* ---- games ------------------------------------------------------------- */
.games-hub { align-items:start; }
.game-tile { display:flex; flex-direction:column; }
.game-side { display:flex; flex-direction:column; gap:var(--gutter); }
.game-tile--soon { opacity:.85; }
.game-setup { display:flex; flex-direction:column; gap:14px; margin-top:auto; }
.game-field { display:flex; flex-direction:column; gap:6px; }
.game-field > span { font-family:var(--font-body); font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); }
.game-field select {
  font:inherit; padding:10px 12px; border:1px solid var(--line-strong);
  border-radius:var(--r); background:var(--surface); color:var(--ink); width:100%;
}
.game-field select:focus { outline:2px solid var(--navy); border-color:var(--navy); }
.game-start { margin-top:6px; text-align:center; }

/* Play surface */
.game { max-width:620px; margin:8px auto 0; }
.game__bar { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.game__progress { color:var(--navy); font-weight:500; }
.game__score { color:var(--ink-soft); }
.game__track { height:6px; background:var(--surface-container); border-radius:var(--r-pill); overflow:hidden; }
.game__fill { display:block; height:100%; background:var(--green); border-radius:var(--r-pill);
  transition:width .25s ease; }
.game__portrait { margin:24px 0; display:flex; justify-content:center; }
.game__portrait img { width:220px; height:220px; border-radius:var(--r-xl); object-fit:cover;
  border:1px solid var(--line); background:var(--surface-container); }
.game__choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .game__choices{ grid-template-columns:1fr; } .game__portrait img{ width:180px; height:180px; } }
.game__choice {
  font:inherit; text-align:left; padding:14px 16px; cursor:pointer;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r-md);
}
.game__choice:hover:not(:disabled) { border-color:var(--navy); background:var(--surface-low); }
.game__choice:disabled { cursor:default; }
.game__choice.is-correct { border-color:var(--green); background:#e7f4ee; color:#0b4d38; font-weight:600; }
.game__choice.is-wrong   { border-color:var(--no); background:#fdf1e3; color:#8a4a06; }
.game__next { margin-top:20px; }
.game__result { margin-top:12px; }
.game__final { font-family:var(--font-head); font-weight:700; font-size:48px; line-height:1;
  color:var(--navy); margin:6px 0 10px; font-feature-settings:'tnum' 1; }
/* ---- search hits (smart search grouped results) ----------------------- */
.sr-hit { display:flex; align-items:center; gap:16px; }
.sr-hit__title { display:block; font-family:var(--font-head); font-weight:600; font-size:17px; color:var(--navy); }
.sr-hit__sub { display:block; margin-top:3px; font-size:14px; }
.sr-hit .pdot { margin-right:7px; }

/* ---- share ------------------------------------------------------------ */
.btn--share { gap:7px; }
.btn--share svg { flex:none; }
.btn--share.is-copied { color:var(--green); border-color:currentColor; }
.btn--share.is-copied svg { color:inherit; }

/* ---- constituency boundary map (server-rendered SVG, no tiles) --------- */
.cons-map-card { margin:0; }
.cons-map { height:360px; overflow:hidden; background:var(--surface-low);
  border:1px solid var(--line); border-radius:var(--r-md); }
.cons-map > svg { width:100%; height:100%; padding:14px; }   /* no-JS fallback silhouette */
.cons-map path { fill:var(--green); fill-opacity:.16; stroke:var(--green); stroke-width:2;
  stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.leaflet-container { border-radius:var(--r-md); font:inherit; background:var(--surface-low); }

/* ---- MPs national map --------------------------------------------------- */
.mps-map { height:72vh; min-height:480px; background:var(--surface-low);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.map-legend { list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; }
.map-legend li { display:flex; align-items:center; gap:6px; }

/* ---- centered content column + constituency hero ---------------------- */
.container--narrow { max-width:880px; }
.cons-hero { display:grid; grid-template-columns:320px 1fr; gap:28px; align-items:start; margin-bottom:32px; }
.cons-hero .cons-map-card { max-width:none; margin:0; }
.cons-hero__facts { display:flex; flex-direction:column; gap:16px; }
.cons-hero__facts .card { margin:0; }
@media (max-width:640px){ .cons-hero{ grid-template-columns:1fr; gap:20px; } }

/* ---- bill progress: horizontal track ---------------------------------- */
.track-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:6px 4px 4px; }
.track { list-style:none; margin:0; padding:10px 0 14px; display:flex; }
.track__step { flex:1 1 0; min-width:0; position:relative; padding-top:24px; text-align:center;
  display:flex; flex-direction:column; }
/* narrow screens: fixed width + sideways scroll rather than crushing labels */
@media (max-width:720px){ .track { overflow-x:auto; } .track__step { flex:0 0 auto; width:118px; } }
/* long journeys (ping-pong bills can log 20+ stages): scroll instead of squeeze */
.track--long { overflow-x:auto; }
.track--long .track__step { flex:0 0 auto; width:118px; }
.track__step::before { content:''; position:absolute; top:8px; left:0; right:0; height:2px; background:var(--line-strong); }
.track__step:first-child::before { left:50%; }
.track__step:last-child::before { right:50%; }
.track__step.done::before { background:#8fc4ac; }   /* completed rail segment */
.track__dot { position:absolute; top:2px; left:50%; transform:translateX(-50%); width:13px; height:13px;
  border-radius:50%; border:2px solid var(--line-strong); background:var(--surface); }
.track__step.done .track__dot { background:var(--green); border-color:var(--green); }
.track__step.now  .track__dot { border-color:#b7620f; box-shadow:0 0 0 4px #f8ead6; }   /* current stage */
.track__name { display:block; font-size:12.5px; font-weight:600; line-height:1.25; padding:0 8px; }
.track__step.future .track__name { color:var(--ink-soft); font-weight:500; }
.track__house { display:block; font-family:var(--font-body); font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--green); margin-top:auto; padding-top:4px; }
.track__step.future .track__house { color:var(--ink-soft); }
.track__step.now .track__house { color:#b7620f; }
.track__date { display:block; font-family:var(--font-body); font-size:10.5px; color:var(--outline); margin-top:3px; }

/* ---- government / opposition ------------------------------------------- */
/* Cabinet grid: responsive cards; department/junior rosters: stacked rows.  */
.gov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--gutter); }
.gov-card { padding:20px; }
/* Government / Opposition — centred portrait wall + collapsible department folds.
   Fixed caption slots (2-line name, 3-line office) keep every tile the same
   height so rows align; clipped offices carry the full text in title=. */
.gov-page { max-width:1200px; margin-inline:auto; }
.gov-wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:24px 18px; margin:0 0 44px; }
.gov-wall figure { margin:0; }
.gov-wall img, .gov-wall__noimg { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface-container); display:block; }
.gov-wall figcaption { margin-top:8px; }
.gov-wall__name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-weight:600; font-size:15px; line-height:20px; min-height:40px; }
.gov-wall__name a { color:var(--navy); }
.gov-wall__office { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  font-size:12.5px; line-height:17px; min-height:51px; margin-top:2px; color:var(--ink-soft); }
.gov-wall__party, .gov-fold summary span { color:var(--ink-soft); font-size:12px; }
.gov-wall__party { display:inline-flex; align-items:center; margin-top:4px; }
.gov-fold { border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); margin:0 0 8px; }
.gov-fold summary { display:flex; gap:14px; align-items:baseline; padding:12px 18px; cursor:pointer;
  font-family:var(--font-head); font-weight:600; font-size:15px; list-style:none; }
.gov-fold summary::-webkit-details-marker { display:none; }
.gov-fold summary span { margin-left:auto; font-size:13px; font-weight:400; font-family:var(--font-body); }
.gov-fold summary::after { content:"+"; color:var(--outline); font-weight:400; }
.gov-fold[open] summary::after { content:"\2212"; }
.gov-fold__body { padding:2px 18px 14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px 24px; }
.gov-fold__row { display:flex; gap:12px; align-items:center; }
.gov-fold__text { min-width:0; }
.gov-fold__office { display:block; font-size:12.5px; line-height:17px; color:var(--ink-soft); }
.gov-fold__name { font-weight:600; font-size:14.5px; }
.gov-fold__name a { color:var(--navy); }

.gov-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px 24px; }
.gov-dept { margin-bottom:28px; }
.gov-post { display:flex; align-items:center; gap:12px; }
.gov-post__text { display:flex; flex-direction:column; min-width:0; }
.gov-post__role { font-weight:600; font-size:15px; line-height:20px; }
.gov-post__holder { font-size:15px; }
.gov-post__party { font-size:13px; margin-top:2px; }

/* ---- Org chart (Cabinet / Shadow Cabinet) ------------------------------ */
.org-chart { margin:0 0 40px; }
.org-tier { position:relative; }
.org-tier--lead, .org-tier--senior { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.org-tier--rest { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.org-tier + .org-tier { margin-top:30px; }
/* subtle central connector between tiers, for the "chart" feel */
.org-tier--senior::before, .org-tier--rest::before {
  content:""; position:absolute; top:-30px; left:50%; width:2px; height:30px; background:var(--line-strong); }
.org-node { display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 14px; width:200px; }
.org-node--lg { width:250px; padding:26px 22px; border-color:var(--navy); box-shadow:0 2px 12px rgba(13,27,42,.09); }
.org-node__img { width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--surface-container); }
.org-node--lg .org-node__img { width:80px; height:80px; }
.org-node__img--empty { display:block; }
.org-node__role { font-size:13px; line-height:1.35; color:var(--ink-soft); }
.org-node--lg .org-node__role { font-size:14px; font-weight:500; color:var(--ink); }
.org-node__holder { font-weight:600; font-size:15px; }
.org-node--lg .org-node__holder { font-size:18px; }
.org-node__party { display:inline-flex; align-items:center; gap:5px; font-size:12px; }
@media (max-width:560px){ .org-node, .org-node--lg { width:100%; max-width:320px; } }

/* ---- Parties ----------------------------------------------------------- */
.party-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.party-card { display:flex; flex-direction:column; }
.party-card__top { display:flex; align-items:center; gap:12px; min-height:40px; margin-bottom:12px; }
.party-badge { flex:none; width:48px; height:48px; border-radius:11px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 4px;
  font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.01em; }
.party-badge--lg { width:64px; height:64px; border-radius:15px; font-size:17px; }
/* Self-hosted party logo: shown at a fixed HEIGHT with its natural width, so no logo
   is ever stretched or cropped whatever its aspect ratio (emblems stay compact, wide
   wordmarks get their width). No box: every current party logo reads on the light card. */
.party-logo { flex:none; display:inline-flex; align-items:center; justify-content:flex-start; height:38px; }
.party-logo img { max-height:38px; max-width:124px; width:auto; height:auto; object-fit:contain; display:block; }
.party-logo--lg { height:54px; }
.party-logo--lg img { max-height:54px; max-width:200px; }
.party-head { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.party-card__name { font-size:18px; line-height:1.25; margin:0; }
.party-card__role { margin-left:auto; flex:none; white-space:nowrap; }

/* ---- committees ------------------------------------------------------- */
.cmte-list { list-style:none; margin:0 0 8px; padding:0; }
.cmte-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 4px; border-bottom:1px solid var(--line); }
.cmte-row__name { font-weight:600; }
.cmte-row__meta { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
@media (max-width:520px){ .cmte-row{ flex-direction:column; align-items:flex-start; gap:6px; } }

.cmte-members { list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.cmte-member { display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.cmte-member.is-chair { border-color:var(--line-strong); background:var(--surface-low); }
.cmte-member__noimg { display:inline-block; }
.cmte-member__id { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cmte-member__name { font-weight:600; }
.cmte-member__party { font-size:13px; color:var(--ink-soft); }
.cmte-member__role { align-self:flex-start; margin-top:2px; }

.cmte-outputs { list-style:none; margin:0; padding:0; }
.cmte-output { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:12px 4px; border-bottom:1px solid var(--line); }
.cmte-output__title { font-weight:600; flex:1 1 320px; min-width:0; overflow-wrap:anywhere; }
.cmte-output__date { flex:0 0 auto; }

/* ---- nav dropdowns ----------------------------------------------------- */
.nav__group { position:relative; }
.nav__top { font:inherit; font-size:15px; font-weight:500; color:var(--ink-soft); cursor:pointer;
  background:none; border:0; border-bottom:2px solid transparent; padding:6px 0 4px;
  display:inline-flex; align-items:center; gap:5px; }
.nav__top:hover, .nav__group:hover .nav__top, .nav__group:focus-within .nav__top { color:var(--navy); }
.nav__top.is-active { color:var(--navy); border-bottom-color:var(--navy); }
.nav__caret { font-size:9px; line-height:1; opacity:.7; }
.nav__menu { position:absolute; top:100%; left:-14px; min-width:194px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:6px; box-shadow:0 12px 30px rgba(13,27,42,.13); z-index:60;
  display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease; }
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu { opacity:1; visibility:visible; transform:none; }
.nav__menu a { font-size:15px; font-weight:500; color:var(--ink); padding:9px 12px;
  border-radius:var(--r); border-bottom:0; white-space:nowrap; }
.nav__menu a:hover { background:var(--surface-low); text-decoration:none; }
.nav__menu a[aria-current="page"] { color:var(--navy); background:var(--surface-low); }
@media (prefers-reduced-motion:reduce){ .nav__menu { transition:none; } }

/* ---- cookie consent banner -------------------------------------------- */
.cookie-banner { position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  background:var(--navy); color:#fff; border-radius:var(--r-md);
  box-shadow:0 14px 44px rgba(13,27,42,.4); animation:cookie-in .18s ease; }
@keyframes cookie-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .cookie-banner { animation:none; } }
.cookie-banner__inner { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  gap:24px; padding:16px 20px; flex-wrap:wrap; }
.cookie-banner__text { margin:0; font-size:14px; line-height:21px; flex:1 1 340px; color:#dfe4e8; }
.cookie-banner__text a { color:var(--green-bright); }
.cookie-banner__actions { display:flex; gap:10px; flex:0 0 auto; }
.cookie-banner .btn { border:1px solid rgba(255,255,255,.45); background:transparent; color:#fff; }
.cookie-banner .btn:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.cookie-banner .btn--primary { background:#fff; color:var(--navy); border-color:#fff; }
.cookie-banner .btn--primary:hover { background:var(--green-bright); border-color:var(--green-bright); color:var(--navy); }

/* ---- home hero (command bar) ---------------------------------------- */
.home-hero { padding:clamp(56px,10vw,104px) 0 clamp(48px,8vw,88px); }
.home-hero__wrap { position:relative; z-index:2; max-width:760px; margin-inline:auto; text-align:center; }
.home-hero__h1 { color:#fff; margin:0; letter-spacing:-.02em; }
.home-hero__sub { margin:18px auto 30px; max-width:46rem; }
.home-hero__bar { max-width:640px; margin-inline:auto; box-shadow:0 20px 60px rgba(13,27,42,.45); }
.home-hero__bar input { font-family:var(--font-body); font-size:17px; }
.home-hero__chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; }
.home-hero__chip { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff;
  opacity:0; transform:translateY(6px); animation:home-hero-rise .5s ease forwards; }
.home-hero__chip:nth-child(1){ animation-delay:.15s; }
.home-hero__chip:nth-child(2){ animation-delay:.30s; }
.home-hero__chip:nth-child(3){ animation-delay:.45s; }
.home-hero__chip:nth-child(4){ animation-delay:.60s; }
.home-hero__meta { justify-content:center; }
@keyframes home-hero-rise { to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .home-hero__chip { opacity:1; transform:none; animation:none; }
}

/* ---- Votes & member chips (division per-member lists, sponsor/signatory avatars) --
   Added for the votes/bills enrichment: 28px avatar size, grouped vote lists with a
   shared live search, and avatar alignment for the .role-list sponsor/signatory rows. */
.avatar--xs { width:28px; height:28px; }
.vote-group { margin:0 0 22px; }
.vote-group > .kicker { margin:0 0 10px; }
.vote-members { list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px 16px; }
.vote-member { display:flex; align-items:center; gap:10px; min-width:0; }
.vote-member__id { min-width:0; }
.vote-member__name { font-weight:600; font-size:15px; }
.vote-member__name a { color:var(--navy); }
.vote-member__sub { display:block; font-size:12px; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.role-list--avatars li { align-items:center; }

/* ---- MP profile density: native <details> section folds --------------------
   Replaces the JS tab panels with one scannable column. .mp-sec is a top-level
   section disclosure; its summary shows the name + a count/teaser so a closed
   section still informs. .mp-cat is the lighter nested fold used per interest
   category. Q&A items reuse the existing .qa style. Expenses subtotals use
   .exp-subtotals. No JS: <details> is native. */
.mp-body { max-width:900px; margin-top:22px; }
.mp-body > .at-a-glance { margin-bottom:16px; }
.mp-sec { border-bottom:1px solid var(--line); }
.mp-sec > summary { list-style:none; cursor:pointer; padding:16px 0; display:flex;
  flex-wrap:wrap; gap:2px 14px; align-items:baseline; }
.mp-sec > summary::-webkit-details-marker { display:none; }
.mp-sec > summary::after { content:'+'; margin-left:6px; color:var(--ink-soft);
  font-family:var(--font-mono); font-size:16px; line-height:1.4; }
.mp-sec[open] > summary::after { content:'\2013'; }
.mp-sec__name { flex:1 1 auto; font-family:var(--font-head); font-weight:600;
  font-size:17px; color:var(--navy); }
.mp-sec > summary:hover .mp-sec__name { color:var(--green); }
.mp-sec__meta { color:var(--ink-soft); font-size:13px; }
.mp-sec__body { padding:2px 0 20px; }
.mp-sec__note { margin:0 0 12px; font-size:14px; }
.mp-cat { border-top:1px solid var(--line); }
.mp-cat:first-of-type { border-top:0; }
.mp-cat > summary { list-style:none; cursor:pointer; padding:11px 0; display:flex;
  gap:14px; align-items:baseline; }
.mp-cat > summary::-webkit-details-marker { display:none; }
.mp-cat > summary::after { content:'+'; color:var(--ink-soft); font-family:var(--font-mono); font-size:14px; }
.mp-cat[open] > summary::after { content:'\2013'; }
.mp-cat__name { flex:1 1 auto; font-weight:600; font-size:15px; }
.mp-cat__list { margin:0 0 12px; padding-left:18px; }
.mp-cat__list li { margin:6px 0; font-size:15px; }

/* Expenses: per-category subtotals for the year + non-Paid status flag */
.exp-subtotals { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px; margin:0 0 22px; }
.exp-subtotal { border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px;
  display:flex; flex-direction:column; gap:2px; }
.exp-subtotal--total { border-color:var(--navy); }
.exp-subtotal__cat { font-size:13px; color:var(--ink-soft); }
.exp-subtotal__val { font-family:var(--font-head); font-weight:700; font-size:20px; }
.exp-subtotal__val.data-num { font-size:24px; }
.exp-subtotal__n { font-size:12px; }
.exp-status { font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;
  background:var(--surface-low); border-radius:var(--r-sm); padding:2px 6px; }

/* ---- Intro band: split header for member-index pages (/mps, /lords, /msps) ----
   Heading + live counts on the left, page actions (status toggle, postcode) on
   the right, one hairline rule underneath. */
.intro-band { margin-bottom:22px; border-bottom:1px solid var(--line-strong); padding-bottom:18px;
  animation:intro-band-in .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes intro-band-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .intro-band { animation:none; } }
.intro-band__row { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:4px; }
.intro-band__ctx { margin:0; font-size:15px; color:var(--ink-soft); }
.intro-band__r { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.intro-band__lookup { display:flex; gap:6px; }
.intro-band__lookup input { border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface);
  font-family:var(--font-body); font-size:14px; color:var(--ink); padding:8px 12px; width:8.5rem; }
.intro-band__lookup input:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(13,27,42,.12); }