/* THE PUBLIC FRONT DOOR on the Illouz brand, September 2026. One stylesheet for
   every public page: the petition (direction B, approved 3 September, "finally
   a good direction") set the system, and the inquiry, the join pages, the status
   feed, the links hub, the action page and the privacy page are built from the
   same parts. Built on brand.css and the illouz-brand skill; nothing here names
   a colour or a font directly.

   The parts: a navy header with his mark and the party's; a split hero where
   the copy and the form sit on navy and the photograph keeps its own column; a
   white band for reading; a sunk footer with the legal line.

   Logical properties only. Hebrew is the design; en/fr/ru mirror it whole. */

*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis: none; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-block-size: 100dvh; background: var(--ground); }
h1, h2, h3, p, ul, ol { margin: 0; }
img { display: block; max-inline-size: 100%; }
a { color: inherit; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.skip { position: absolute; inset-block-start: -100px; inset-inline-start: var(--s-4); background: var(--white); color: var(--navy); padding: var(--s-2) var(--s-4); border-radius: var(--radius); z-index: 10; }
.skip:focus-visible { inset-block-start: var(--s-4); }

/* ---------------------------------------------------------------- header */
.site-head { background: var(--navy); color: var(--white); }
.site-head .row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: nowrap; padding: var(--s-3) var(--s-4); }
.brands { display: flex; align-items: center; gap: var(--s-4); min-inline-size: 0; }
.brands .logo { block-size: 32px; inline-size: auto; object-fit: contain; }
.brands .logo.en { block-size: 22px; }
.brands .sep { inline-size: 1px; block-size: 28px; background: rgba(255,255,255,.28); flex: none; }
.brands .party { block-size: 34px; inline-size: auto; object-fit: contain; }
.lang { display: flex; gap: var(--s-3); list-style: none; margin: 0; padding: 0; font-size: var(--t-15); font-weight: 500; white-space: nowrap; }
.lang a { text-decoration: none; padding-block: var(--s-3); display: inline-block; }
.lang .full { display: none; }
.lang a[aria-current] { font-weight: 900; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.lang a:hover { text-decoration: underline; text-underline-offset: 6px; }
.site-head :focus-visible, .hero :focus-visible { outline-color: var(--white); }

/* ------------------------------------------------------------ hero: split */
.hero { display: grid; grid-template-columns: 1fr; background: var(--navy); }
.hero-photo { grid-row: 1; inline-size: 100%; }
.hero-photo img { inline-size: 100%; block-size: 42vh; min-block-size: 280px; object-fit: cover; object-position: 53% 0; }
.panel { grid-row: 2; color: var(--white); padding: var(--s-6) var(--s-5) var(--s-7); }
.panel-inner { max-inline-size: 34rem; }
.eyebrow { font-size: var(--t-15); font-weight: 700; color: var(--ink-mid); }
.hero h1 { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 3.5rem); line-height: 1.1; margin-block-start: var(--s-3); font-weight: 900; }
.hero h1 em { font-style: normal; color: var(--accent); }

/* the count and the meter */
.count { margin-block-start: var(--s-6); }
.count-line { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.count-num { font-size: var(--t-44); line-height: 1; font-weight: 900; color: var(--white); font-variant-numeric: tabular-nums; }
.count-label { font-size: var(--t-17); font-weight: 500; }
.meter { margin-block-start: var(--s-3); block-size: 12px; background: var(--rule-strong); overflow: hidden; }
.meter > span { display: block; block-size: 100%; background: var(--white); }
.count-rest { margin-block-start: var(--s-2); font-size: var(--t-15); color: var(--ink-mid); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ form */
.sign { margin-block-start: var(--s-6); }
.stack > * + * { margin-block-start: var(--s-3); }
.field { position: relative; }
.field input, .field textarea { inline-size: 100%; block-size: 60px; padding: 24px 14px 8px; font: inherit; font-size: var(--t-17); font-weight: 500; color: var(--navy); background: var(--white); border: 0; border-radius: var(--radius); appearance: none; }
.field textarea { block-size: auto; min-block-size: 140px; padding-block-start: 30px; resize: vertical; line-height: 1.45; }
.field.area label { inset-block-start: 18px; transform: none; }
[dir="rtl"] .field input[dir="ltr"] { text-align: end; }
.field label { position: absolute; inset-inline-start: 14px; inset-block-start: 50%; transform: translateY(-50%); font-size: var(--t-17); font-weight: 500; color: #5F6A8C; pointer-events: none; transition: inset-block-start .12s, font-size .12s, transform .12s; }
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { inset-block-start: 9px; transform: none; font-size: var(--t-13); font-weight: 700; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.field input:user-invalid, .field textarea:user-invalid { box-shadow: inset 0 0 0 3px var(--crit); }
.field .opt { font-size: .82em; opacity: .75; }
.hint { font-size: var(--t-15); color: var(--ink-mid); margin-block-start: var(--s-2); }
.err { font-size: var(--t-15); font-weight: 700; color: var(--white); background: var(--crit-soft); border-inline-start: 4px solid var(--crit); padding: var(--s-2) var(--s-3); margin-block-end: var(--s-3); }

.consent { display: flex; gap: var(--s-3); align-items: center; font-size: var(--t-15); line-height: 1.5; margin-block-start: var(--s-4); padding-block: var(--s-3); min-block-size: 48px; cursor: pointer; }
.consent input { flex: 0 0 auto; inline-size: 24px; block-size: 24px; margin: 0; appearance: none; background: var(--white); border: 0; border-radius: var(--radius); display: grid; place-content: center; cursor: pointer; }
.consent input::before { content: ""; inline-size: 7px; block-size: 13px; border-inline-end: 3px solid var(--navy); border-block-end: 3px solid var(--navy); transform: rotate(45deg) translate(-1px, -2px); opacity: 0; }
.consent input:checked::before { opacity: 1; }
.consent input:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.sign .btn, .thanks .btn { display: block; inline-size: 100%; margin-block-start: var(--s-4); font-size: var(--t-20); padding: 17px 24px; text-align: center; }
.sign .btn:focus-visible, .thanks .btn:focus-visible { outline-color: var(--white); }
.btn:hover { background: #F5BE0F; }
.lock { display: flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-3); font-size: var(--t-15); color: var(--ink-mid); }
.lock svg { flex: 0 0 auto; inline-size: 16px; block-size: 16px; }

/* --------------------------------------------------------- after signing */
.thanks { margin-block-start: var(--s-6); }
.thanks:focus { outline: none; }
.thanks h2 { font-size: var(--t-26); line-height: 1.2; font-weight: 900; }
.thanks p { margin-block-start: var(--s-3); font-size: var(--t-17); max-inline-size: 36ch; }
.thanks .share { margin-block-start: var(--s-5); }
.thanks .btn { margin-block-start: var(--s-4); }
.verify { margin-block-start: var(--s-5); padding-block-start: var(--s-5); border-block-start: 1px solid rgba(255,255,255,.18); }
.verify h3 { font-size: var(--t-20); font-weight: 900; margin: 0 0 var(--s-2); }
.verify p { font-size: var(--t-15); margin: 0 0 var(--s-4); max-inline-size: 40ch; opacity: .9; }
.verify .btn2 { display: inline-block; background: transparent; color: var(--white); border: 2px solid var(--white); font: inherit; font-weight: 700; font-size: var(--t-15); padding: 12px 22px; border-radius: var(--radius); cursor: pointer; margin-block-start: var(--s-3); }
.verify .btn2:focus-visible { outline: 3px solid var(--turq); outline-offset: 3px; }
.verify .skip2 { margin-inline-start: var(--s-3); font-size: var(--t-15); opacity: .75; }

/* -------------------------------------------------------------- why band */
.why { background: var(--ground); color: var(--ink); padding: var(--s-7) var(--s-5); }
.why-inner { max-inline-size: 64rem; margin-inline: auto; }
.why h2 { font-size: var(--t-34); line-height: 1.15; font-weight: 900; }
.why .lead { margin-block-start: var(--s-4); font-size: var(--t-20); line-height: 1.5; max-inline-size: 44ch; }
.points { list-style: none; padding: 0; margin-block-start: var(--s-6); counter-reset: pt; }
.points li { counter-increment: pt; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-3); }
.points li + li { margin-block-start: var(--s-6); }
.points li::before { content: counter(pt); grid-column: 1; grid-row: 1 / span 2; font-size: var(--t-26); font-weight: 900; line-height: 1; color: var(--ink); }
.points li > * { grid-column: 2; }
.points b { display: block; font-weight: 700; }
.points span { display: block; color: var(--ink-mid); max-inline-size: 44ch; margin-block-start: var(--s-1); }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--surface-sunk); color: var(--ink); padding: var(--s-6) var(--s-5) var(--s-7); }
.foot-inner { max-inline-size: 64rem; margin-inline: auto; display: grid; gap: var(--s-4); }
.site-foot .logo { block-size: 28px; inline-size: auto; object-fit: contain; }
.site-foot .logo.en { block-size: 20px; }
.office { font-size: var(--t-15); font-weight: 700; }
.office a { font-weight: 500; }
.legal { font-size: var(--t-13); color: var(--ink-muted); }

/* ------------------------------------------------------- state pages
   404, 429, "join on WhatsApp": one title, one line, one action, on navy. */
.state { background: var(--navy); color: var(--white); padding: var(--s-9) var(--s-5); min-block-size: 52vh; display: grid; place-items: center; }
.state-inner { max-inline-size: 34rem; text-align: center; }
.state h1 { font-size: var(--t-34); line-height: 1.15; font-weight: 900; }
.state p { margin-block-start: var(--s-3); font-size: var(--t-17); color: var(--ink-mid); }
.state .btn, .state .btn2 { display: inline-block; margin-block-start: var(--s-5); font-size: var(--t-17); padding: 15px 28px; }
.btn2 { background: transparent; color: var(--white); border: 2px solid var(--white); font: inherit; font-weight: 700; font-size: var(--t-15); padding: 12px 22px; border-radius: var(--radius); cursor: pointer; text-decoration: none; display: inline-block; }
.btn2:focus-visible { outline: 3px solid var(--turq); outline-offset: 3px; }

/* ------------------------------------------------------- check cards
   "How would you like to help?" on the join page: white boxes on navy. */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-block-start: var(--s-4); }
.checks legend { font-weight: 700; padding: 0; margin-block-end: var(--s-2); grid-column: 1 / -1; }
.checks .opt { font-weight: 500; opacity: .75; font-size: .9em; }
.check-card { display: flex; align-items: center; gap: var(--s-2); background: var(--white); color: var(--navy); border-radius: var(--radius); padding: 12px 12px; min-block-size: 48px; font-size: var(--t-15); font-weight: 500; cursor: pointer; }
.check-card input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--navy); flex: none; }
.check-card:has(input:checked) { box-shadow: inset 0 0 0 3px var(--turq); }
.check-card input:focus-visible { outline: 3px solid var(--turq); outline-offset: 2px; }

/* --------------------------------------------------------- the phone line
   "Prefer to talk?" inside the inquiry hero. */
.talk { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-block-start: var(--s-6); padding-block-start: var(--s-5); border-block-start: 1px solid rgba(255,255,255,.18); }
.talk b { display: block; font-size: var(--t-17); }
.talk span { font-size: var(--t-15); color: var(--ink-mid); }
.talk a { font-size: var(--t-20); font-weight: 900; text-decoration: none; white-space: nowrap; }
.talk a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ------------------------------------------------------------- doc pages
   Status feed, privacy: a light reading column under the navy header. */
.doc { background: var(--ground); color: var(--ink); padding: var(--s-7) var(--s-5) var(--s-8); }
.doc-inner { max-inline-size: 42rem; margin-inline: auto; }
.doc h1 { font-size: var(--t-34); line-height: 1.15; font-weight: 900; }
.doc h1 em { font-style: normal; color: var(--accent); }
.doc .lead { margin-block-start: var(--s-4); font-size: var(--t-20); line-height: 1.5; }
.doc h2 { font-size: var(--t-20); font-weight: 900; margin-block-start: var(--s-7); }
.doc p + p { margin-block-start: var(--s-4); }
.doc .prose { margin-block-start: var(--s-5); font-size: var(--t-17); line-height: 1.6; }
.doc .prose p + p { margin-block-start: var(--s-4); }
.doc .prose h2 { margin-block-start: var(--s-6); }
.doc .btn2 { color: var(--navy); border-color: var(--navy); margin-block-start: var(--s-6); }
.doc .btn2:focus-visible { outline-color: var(--accent); }

.case { margin-block-start: var(--s-6); background: var(--navy); color: var(--white); padding: var(--s-5); border-radius: var(--radius-lg); display: grid; gap: var(--s-1); }
.case .lbl { font-size: var(--t-15); font-weight: 700; color: var(--ink-mid); }
.ctx-product .case .lbl { color: #C4CCE6; }
.case .num { font-size: var(--t-34); font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.case .subj { font-size: var(--t-15); }

.feed { list-style: none; padding: 0; margin-block-start: var(--s-4); }
.feed li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-4); padding-block: var(--s-4); border-block-start: 1px solid var(--rule); }
.feed li:first-child { border-block-start: 0; }
.feed .when { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-15); line-height: 1.4; }
.feed .when small { display: block; font-weight: 400; color: var(--ink-muted); }
.feed .what b { display: block; font-weight: 700; }
.feed .what p { margin-block-start: var(--s-1); color: var(--ink-mid); }
.feed-none { margin-block-start: var(--s-4); color: var(--ink-mid); }
.last-upd { margin-block-start: var(--s-4); font-size: var(--t-13); color: var(--ink-muted); }

/* -------------------------------------------------------------- the hub
   danillouz.com/links: the split hero carries the identity (tagline as the
   headline, the channels), then a white band lists the things worth doing as
   a numbered editorial list. Not a linktree: no pills, no icons, type does
   the work and the first item leads. */
.socials { display: flex; gap: var(--s-3); margin-block-start: var(--s-3); }
.socials a { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--white); }
.socials a:hover { background: rgba(255,255,255,.18); }
.socials svg { inline-size: 22px; block-size: 22px; fill: currentColor; }
.socials.big { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-block-start: var(--s-4); max-inline-size: 26rem; }
.socials.big a { display: grid; justify-items: center; gap: var(--s-2); inline-size: auto; block-size: auto; border-radius: var(--radius-lg); background: var(--white); color: var(--navy); padding: var(--s-4) var(--s-2); font-size: var(--t-13); font-weight: 700; text-decoration: none; }
.socials.big a:hover { background: var(--turq); }
.socials.big svg { inline-size: 32px; block-size: 32px; }
.todo { background: var(--ground); color: var(--ink); padding: var(--s-7) var(--s-5) var(--s-8); }
.todo-inner { max-inline-size: 64rem; margin-inline: auto; }
.todo h2 { font-size: var(--t-34); line-height: 1.15; font-weight: 900; }
.todo-list { list-style: none; padding: 0; margin-block-start: var(--s-5); display: grid; gap: var(--s-3); }
.todo-list a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-5); text-decoration: none; color: var(--navy); background: var(--white); border: 2px solid var(--navy); border-radius: var(--radius-lg); }
.todo-list .n { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius); background: var(--navy); color: var(--white); font-size: var(--t-15); font-weight: 900; font-variant-numeric: tabular-nums; }
.todo-list b { display: block; font-size: var(--t-26); font-weight: 900; line-height: 1.2; }
.todo-list small { display: block; font-size: var(--t-17); color: var(--ink-mid); margin-block-start: var(--s-1); }
.todo-list .go { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--yellow); color: var(--navy); }
.todo-list .go svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; }
[dir="ltr"] .todo-list .go svg { transform: scaleX(-1); }
.todo-list a:hover { background: var(--turq); border-color: var(--turq); }
.todo-list .lead-row a { background: var(--navy); color: var(--white); }
.todo-list .lead-row .n { background: var(--turq); color: var(--navy); }
.todo-list .lead-row small { color: #C4CCE6; }
.todo-list .lead-row a:hover { background: var(--turq); color: var(--navy); }
.todo-list .lead-row a:hover small { color: var(--navy); }

/* --------------------------------------------------------- action page
   One tap to call, one to write. */
.acts { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); }
.acts .btn, .acts .btn2 { display: block; inline-size: 100%; text-align: center; font-size: var(--t-20); padding: 17px 24px; }
.acts .btn2 { border-color: var(--white); color: var(--white); }
.letter { margin-block-start: var(--s-5); border-block-start: 1px solid rgba(255,255,255,.18); padding-block-start: var(--s-4); }
.letter summary { cursor: pointer; font-weight: 700; font-size: var(--t-15); list-style: none; display: flex; align-items: center; gap: var(--s-2); }
.letter summary::-webkit-details-marker { display: none; }
.letter summary::before { content: ""; inline-size: 10px; block-size: 10px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.letter[open] summary::before { transform: rotate(225deg) translateY(-2px); }
.letter p { white-space: pre-wrap; margin-block-start: var(--s-3); font-size: var(--t-15); line-height: 1.6; color: var(--ink-mid); }
.target { margin-block-start: var(--s-4); font-size: var(--t-17); }
.target b { font-weight: 700; }

/* ------------------------------------------------------- the done state
   Join and inquiry after submit: same block as the petition's thanks. */
.thanks .case { margin-block-start: var(--s-4); background: rgba(255,255,255,.08); }

/* --------------------------------------------------------------- desktop */
@media (min-width: 768px) {
  .site-head .row { padding: var(--s-5) var(--s-7); }
  .brands .logo { block-size: 40px; }
  .brands .logo.en { block-size: 28px; }
  .brands .party { block-size: 44px; }
  .brands .sep { block-size: 36px; }
  .lang { gap: var(--s-4); }
  .lang .full { display: inline; } .lang .abbr { display: none; }
  .hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .hero.no-photo { grid-template-columns: 1fr; }
  .panel { grid-row: 1; grid-column: 1; padding: var(--s-8) var(--s-7) var(--s-9); }
  .hero-photo { grid-row: 1; grid-column: 2; position: relative; min-block-size: 100%; }
  .hero-photo img { position: absolute; inset: 0; block-size: 100%; min-block-size: 0; object-position: 53% 0; }
  .count { margin-block-start: var(--s-7); }
  .count-num { font-size: var(--t-56); }
  .sign { margin-block-start: var(--s-7); }
  .why { padding: var(--s-9) var(--s-7); }
  .why-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-9); align-items: start; }
  .points { margin-block-start: 0; }
  .doc { padding: var(--s-9) var(--s-7); }
  .todo { padding: var(--s-9) var(--s-7); }
  .todo-list a { padding: var(--s-6); }
  .todo-list b { font-size: var(--t-34); }
  .todo-list .lead-row b { font-size: var(--t-44); }
  .todo-list .go { inline-size: 56px; block-size: 56px; }
  .socials.big svg { inline-size: 40px; block-size: 40px; }
  .socials.big a { font-size: var(--t-15); padding: var(--s-5) var(--s-3); }
  .state { padding-block: 128px; }
  .site-foot { padding: var(--s-7); }
  .foot-inner { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-7); }
  .site-foot .logo { grid-row: 1 / span 3; }
}
@media (prefers-reduced-motion: reduce) { .field label { transition: none; } }

.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero .lead { margin-block-start: var(--s-4); font-size: var(--t-17); line-height: 1.5; color: var(--ink-mid); max-inline-size: 40ch; }
.ctx-social .hero .lead { color: #C4CCE6; }

/* ------------------------------------------------------- civic pages */
.foot-links { font-size: var(--t-15); font-weight: 500; }
.foot-links a { text-decoration: underline; text-underline-offset: 4px; }
.doc .eyebrow { margin-block-end: var(--s-2); }
.doc .meta { margin-block-start: var(--s-3); font-size: var(--t-15); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.doc .prose ul { padding-inline-start: 1.2em; margin-block-start: var(--s-3); }
.doc .prose li + li { margin-block-start: var(--s-2); }
.doc .sources { margin-block-start: var(--s-3); padding-inline-start: 1.2em; font-size: var(--t-15); color: var(--ink-mid); word-break: break-word; }
.doc .todo-list { margin-block-start: var(--s-6); }
.doc .todo-list b { font-size: var(--t-20); }
.doc .todo-list a { padding-block: var(--s-4); }
.q { margin-block-start: var(--s-5); }
.q h3, .q legend { font-size: var(--t-17); font-weight: 700; margin-block-end: var(--s-3); }
.q .opt { font-weight: 500; opacity: .75; font-size: .9em; }
.checks.q { margin-block-start: var(--s-5); }
.checks .city { grid-column: 1 / -1; display: grid; gap: var(--s-2); margin-block-start: var(--s-2); }
.checks .city > b { font-size: var(--t-15); font-weight: 700; color: var(--ink-mid); }
.slots .check-card { grid-template-columns: auto 1fr; }
.check-card span b { display: block; font-weight: 700; }
.check-card span small { display: block; font-size: var(--t-13); color: #5F6A8C; font-weight: 500; }
.result { margin-block-start: var(--s-5); }
.result h3 { font-size: var(--t-17); font-weight: 700; margin-block-end: var(--s-3); }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) 46%; align-items: center; column-gap: var(--s-3); padding-block: 6px; }
.bar .lbl { font-size: var(--t-15); font-weight: 500; }
.bar .track { grid-column: 2; display: block; block-size: 10px; background: var(--rule-strong); }
.bar .track > span { display: block; block-size: 100%; background: var(--white); }
.bar .pct { grid-column: 1 / -1; font-size: var(--t-13); font-weight: 700; font-variant-numeric: tabular-nums; margin-block-start: -4px; }
.facts { margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
.facts div { display: grid; grid-template-columns: 5rem 1fr; gap: var(--s-3); }
.facts dt { font-size: var(--t-15); font-weight: 700; color: var(--ink-mid); }
.facts dd { margin: 0; font-size: var(--t-17); font-weight: 500; }
.facts.big dd { font-size: var(--t-20); font-weight: 700; }
.facts a { text-decoration: none; }
.facts a:hover { text-decoration: underline; text-underline-offset: 6px; }
.ctx-social .facts dt { color: #C4CCE6; }
@media (min-width: 768px) {
  .bar { grid-template-columns: minmax(0, 1fr) 50% 3.5rem; }
  .bar .pct { grid-column: 3; margin: 0; text-align: end; }
}

/* ------------------------------------------------------- caucus pages
   The caucus's own name where the mark would be; never Dan's mark, never the
   party. Same colours, same type. */
.site-head.caucus .cname { display: grid; gap: 2px; text-decoration: none; color: var(--white); min-inline-size: 0; }
.site-head.caucus .cname b { font-size: var(--t-20); font-weight: 900; line-height: 1.15; }
.site-head.caucus .cname small { font-size: var(--t-13); font-weight: 700; color: var(--turq); letter-spacing: .04em; }
.site-foot.caucus .foot-inner { grid-template-columns: 1fr; }
.chairs { margin-block-start: var(--s-4); font-size: var(--t-17); line-height: 1.6; }
.chairs > span { display: block; font-size: var(--t-13); font-weight: 700; color: var(--turq); letter-spacing: .06em; }
.chairs b { font-weight: 700; }
.chairs small { font-weight: 400; color: #C4CCE6; }
.panel-inner.wide { max-inline-size: 44rem; }
.hero.no-photo .panel { padding-block-end: var(--s-8); }
.h-join { font-size: var(--t-26); font-weight: 900; margin-block-start: var(--s-7); }
.task { margin-block-start: var(--s-4); background: rgba(255,255,255,.06); border-inline-start: 4px solid var(--turq); padding: var(--s-5); border-radius: var(--radius-lg); }
.task h3 { font-size: var(--t-20); font-weight: 900; }
.task p { margin-block-start: var(--s-2); }
.task blockquote { margin: var(--s-4) 0 0; padding: var(--s-4); background: var(--white); color: var(--navy); border-radius: var(--radius); font-size: var(--t-15); line-height: 1.6; white-space: pre-wrap; }
.task .acts { margin-block-start: var(--s-4); }
.two { display: grid; gap: var(--s-6); margin-block-start: var(--s-4); }
.two .sign { margin-block-start: 0; }
.doc-inner.wide { max-inline-size: 64rem; }
.doc h2 { margin-block-start: var(--s-7); }
.tbl { overflow-x: auto; margin-block-start: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.tbl table { border-collapse: collapse; inline-size: 100%; font-size: var(--t-15); }
.tbl th, .tbl td { text-align: start; padding: 10px 12px; border-block-end: 1px solid var(--rule); vertical-align: top; }
.tbl th { font-weight: 700; background: var(--surface-sunk); font-size: var(--t-13); }
.tbl tr:last-child td { border-block-end: 0; }
.tbl a { color: var(--navy); font-weight: 700; }
.doc .fold { margin-block-start: var(--s-4); }
.doc .fold summary { cursor: pointer; font-weight: 700; color: var(--accent); padding-block: var(--s-2); }
.sign.light { margin-block-start: var(--s-3); }
.sign.light .field input, .sign.light .field textarea, .sign.light .field select { border: 1px solid var(--rule-strong); }
.sign.light .field label { color: var(--ink-muted); }
.sign.light .field input:focus-visible, .sign.light .field textarea:focus-visible { outline-color: var(--navy); }
.sign.light .btn { display: inline-block; inline-size: auto; font-size: var(--t-17); padding: 13px 28px; }
.field select { inline-size: 100%; block-size: 60px; padding: 24px 14px 8px; font: inherit; font-size: var(--t-17); font-weight: 500; color: var(--navy); background: var(--white); border: 0; border-radius: var(--radius); appearance: none; }
.doc .acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.doc .acts .btn, .doc .acts .btn2 { display: inline-block; inline-size: auto; }
.events { border-block-start: 1px solid var(--rule); }
@media (min-width: 768px) {
  .site-head.caucus .cname b { font-size: var(--t-26); }
  .two { grid-template-columns: 1fr 1fr; }
  .hero.no-photo .panel-inner.wide { max-inline-size: 52rem; }
}

/* ------------------------------------------------- caucus community tools (K20)
   Each block appears only when its switch is on and there is something to
   show. Navy panel: briefing, tasks, referral. White band: campaign, votes,
   roles, groups, shelf, log. */
.h-join + .hint { margin-block-start: var(--s-2); color: #C4CCE6; }
.sub { font-size: var(--t-17); font-weight: 700; margin-block-start: var(--s-6); }
.doc h3.sub { margin-block-start: var(--s-6); }
.task.brief h3 { font-size: var(--t-26); }
.task .sign.light { margin-block-start: var(--s-4); }
.task .sign.light .field input, .task .sign.light .field textarea { border: 0; }
.task .btn2 { margin-block-start: var(--s-3); }
.feed.closed { margin-block-start: var(--s-3); }
.feed.closed li { border-block-start-color: rgba(255,255,255,.18); }
.feed .what p { margin-block-start: var(--s-1); font-size: var(--t-15); line-height: 1.55; }
.k { font-weight: 700; color: var(--turq); }
.doc .k { color: var(--accent); }
.refcard .reflink { display: grid; gap: var(--s-1); margin: 0; }
.refcard .reflink .k { font-size: var(--t-13); letter-spacing: .04em; }
.refcard code { display: block; background: var(--white); color: var(--navy); padding: 12px 14px; border-radius: var(--radius); font-size: var(--t-15); word-break: break-all; font-family: "Inter", ui-monospace, monospace; }
.refcard .count-rest b { color: var(--white); font-size: var(--t-26); font-weight: 900; }
.vote, .group { margin-block-start: var(--s-5); padding: var(--s-5); border: 2px solid var(--navy); border-radius: var(--radius-lg); background: var(--white); }
.vote h3, .group h3 { font-size: var(--t-20); font-weight: 900; line-height: 1.25; }
.vote h4 { font-size: var(--t-17); font-weight: 700; }
.vote.closed { border-color: var(--rule); }
.vote .meta, .group .meta { margin-block-start: var(--s-1); font-size: var(--t-13); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.vote .checks { margin-block-start: var(--s-4); gap: var(--s-2); }
.doc .check-card { border: 1px solid var(--rule-strong); }
.doc .bar .track { background: var(--surface-sunk); }
.doc .bar .track > span { background: var(--navy); }
.doc .result { margin-block-start: var(--s-4); }
.outcome { margin-block-start: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface-sunk); border-radius: var(--radius); font-size: var(--t-15); line-height: 1.6; }
.outcome i { color: var(--ink-muted); }
.rolelist { list-style: none; padding: 0; margin-block-start: var(--s-3); display: grid; gap: var(--s-3); }
.rolelist li { padding: var(--s-4) var(--s-5); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); background: var(--white); }
.rolelist b { display: block; font-size: var(--t-17); font-weight: 900; }
.rolelist span { display: block; margin-block-start: var(--s-1); color: var(--ink-mid); font-size: var(--t-15); line-height: 1.55; }
.rolelist small { display: block; margin-block-start: var(--s-2); font-size: var(--t-13); color: var(--ink-muted); }
.rolelist small.ok { color: var(--accent); font-weight: 700; }
.rolelist .fold { margin-block-start: var(--s-2); }
.tag { display: inline-block; font-size: var(--t-13); font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--turq); color: var(--navy); vertical-align: middle; }
.early { font-weight: 900; color: var(--accent); }
.holders { list-style: none; padding: 0; margin-block-start: var(--s-3); display: grid; gap: var(--s-2); font-size: var(--t-15); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: var(--t-13); font-weight: 700; text-decoration: underline; cursor: pointer; }
.btn2.small { font-size: var(--t-13); padding: 8px 14px; }
.tbl .btn2.small { color: var(--navy); border-color: var(--navy); }
.switches { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.jump { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-block-start: var(--s-5); font-size: var(--t-15); font-weight: 700; }
.jump a { color: var(--turq); text-decoration: none; }
.jump a:hover { text-decoration: underline; text-underline-offset: 4px; }
.inline { display: flex; gap: var(--s-2); align-items: center; margin-block: var(--s-2) var(--s-3); }
.inline input { inline-size: 7rem; padding: 6px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius); font: inherit; }
.hint.ok { color: var(--accent); font-weight: 700; }
.staff .group, .staff .vote { margin-block-start: var(--s-4); }
.staff .fold summary { font-size: var(--t-15); }
.staff h2 { padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule); }
.community .doc-inner > h2:first-child { margin-block-start: 0; }