/* Rotary Club de Neuchâtel — the public site's theme and components (docs/specs/40-public-site.md §5).
   Translated from the « Rotary Neuchâtel » design system (tokens.json + components/bundle.css, synced 2026-10-04).
   Components use the semantic tokens only; the two themes change their values. A page sets its theme with
   data-theme="club|centenaire" on <body class="rcn-theme">. Never edited from the back office (§5.1).
   The admin keeps brand.css + MudBlazor; this file is loaded only by public pages (§3.3). */

/* ---------- Tokens ---------- */
:root {
  --royal-blue: #17458f;
  --gold: #f7a81b;
  --powder-blue: #b9d9eb;
  --mist: #9ba4b4;
  --charcoal: #54565a;
  --slate: #657f99;
  --silver: #d0cfcd;
  --grass: #009739;
  --cardinal: #e02927;
  --royal-blue-dark: #0c3c7c;
  --centenaire-navy: #172854;

  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;
  --measure: 40rem; --content: 55rem; --wide: 75rem; --header-height: 72px;
}

:root, [data-theme="club"] {
  --ground: #ffffff;
  --ground-alt: #f5f7fa;
  --ink: #1a1a1a;
  --ink-muted: var(--charcoal);
  --brand: var(--royal-blue);
  --brand-strong: var(--royal-blue-dark);
  --accent: var(--gold);
  --highlight: var(--royal-blue);
  --action: var(--royal-blue);
  --action-strong: var(--royal-blue-dark);
  --on-action: #ffffff;
  --link: var(--royal-blue);
  --focus: var(--royal-blue-dark);
  --line: var(--silver);
  --line-strong: var(--slate);
  --scrim: #1728548c;
  --success: var(--grass);
  --danger: var(--cardinal);
  --shadow-raised: 0 1px 2px #17458f14, 0 4px 16px #17458f14;
}

[data-theme="centenaire"] {
  --ground: var(--centenaire-navy);
  --ground-alt: #1f3263;
  --ink: #ffffff;
  --ink-muted: var(--mist);
  --brand: var(--powder-blue);
  --brand-strong: #ffffff;
  --highlight: var(--gold);
  --action: var(--gold);
  --action-strong: #ffffff;
  --on-action: var(--centenaire-navy);
  --link: var(--gold);
  --focus: var(--gold);
  --line: #34477a;
  --line-strong: var(--mist);
  --danger: #ff9b8f;
  --shadow-raised: none;
}

/* ---------- Base ---------- */
.rcn-theme {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}
.rcn-theme *, .rcn-theme *::before, .rcn-theme *::after { box-sizing: border-box; }
.rcn-theme a { color: var(--link); text-underline-offset: 3px; }
.rcn-theme a:hover { color: var(--brand-strong); }
.rcn-theme :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.rcn-theme :where(img) { max-width: 100%; height: auto; }   /* :where — zero specificity, so a component's own size wins */
.rcn-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The centenary background: a fixed layer under the whole page, not background-attachment: fixed (ignored on iOS).
   The scrim keeps every text colour at 5:1 or better over the image's brightest spot. */
[data-theme="centenaire"].rcn-theme { background: var(--ground); }
[data-theme="centenaire"].rcn-theme::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background-color: var(--ground);
  background-image: linear-gradient(var(--scrim), var(--scrim)), url("/brand/centenaire/background-1280.jpg");
  background-size: cover; background-position: 60% 30%;
}
@media (min-width: 720px) {
  [data-theme="centenaire"].rcn-theme::before {
    background-image: linear-gradient(var(--scrim), var(--scrim)), url("/brand/centenaire/background-2560.jpg");
  }
}

.rcn-site { display: flex; flex-direction: column; min-height: 100vh; }
.rcn-main { flex: 1 1 auto; }

/* DEV environment marker (rendered only in Development) — same look as the admin's. */
.rcn-dev-ribbon {
  display: flex; align-items: center; justify-content: center; padding: 0.35rem 1rem;
  background: repeating-linear-gradient(45deg, #b91c1c, #b91c1c 14px, #991b1b 14px, #991b1b 28px);
  color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.rcn-env-dev .rcn-header { border-bottom-color: #b91c1c; }

/* ---------- Header ---------- */
.rcn-header { container-type: inline-size; position: relative; background: var(--ground); border-bottom: 3px solid var(--accent); }
.rcn-header--overlay { background: transparent; border-bottom: 1px solid var(--line); }
.rcn-header__inner {
  max-width: var(--wide); margin: 0 auto; min-height: 60px; padding: 0 var(--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.rcn-header__brand { flex: none; display: flex; align-items: center; text-decoration: none; padding: var(--space-2) 0; }
/* max-width: none — a percentage max-width on an image inside a shrink-to-fit link resolves against a width that
   depends on the image itself, and the logo collapses to 0×0. */
.rcn-header__logo { display: block; height: 40px; width: auto; max-width: none; }
.rcn-nav { display: none; }
.rcn-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); }
.rcn-theme .rcn-nav a {
  color: var(--brand); text-decoration: none;
  font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--space-2) 0; border-bottom: 2px solid transparent;
}
.rcn-theme .rcn-nav a:hover { color: var(--brand-strong); }
.rcn-theme .rcn-nav a[aria-current="page"] { color: var(--brand-strong); border-bottom-color: var(--accent); }
.rcn-menu-button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-3);
  background: transparent; color: var(--brand); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font: 600 14px/20px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.rcn-menu-button svg { width: 18px; height: 18px; fill: currentColor; }
/* The menu panel below 720px: the same items, stacked. Opened by site.js (aria-expanded). */
.rcn-menu-panel { display: none; border-top: 1px solid var(--line); background: var(--ground); }
.rcn-header--overlay .rcn-menu-panel { background: var(--ground-alt); }
.rcn-menu-panel.is-open { display: block; }
.rcn-menu-panel ul { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-4); }
.rcn-theme .rcn-menu-panel a {
  display: flex; align-items: center; min-height: 44px; color: var(--brand); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.rcn-theme .rcn-menu-panel a[aria-current="page"] { color: var(--brand-strong); }
@container (min-width: 720px) {
  .rcn-header__inner { min-height: var(--header-height); padding: 0 var(--space-6); }
  .rcn-header__logo { height: 50px; }
  .rcn-nav { display: block; }
  .rcn-menu-button { display: none; }
  .rcn-menu-panel, .rcn-menu-panel.is-open { display: none; }
}

/* ---------- Buttons and the call-to-action link ---------- */
.rcn-btn, .rcn-theme a.rcn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font: 600 16px/20px var(--font-sans); text-decoration: none; cursor: pointer;
  background: var(--action); color: var(--on-action);
}
.rcn-btn:hover, .rcn-theme a.rcn-btn:hover { background: var(--action-strong); color: var(--on-action); }
.rcn-btn--secondary, .rcn-theme a.rcn-btn--secondary { background: transparent; color: var(--brand); border-color: var(--line-strong); }
.rcn-btn--secondary:hover, .rcn-theme a.rcn-btn--secondary:hover { background: var(--ground-alt); color: var(--brand-strong); }
.rcn-btn[disabled], .rcn-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.rcn-theme a.rcn-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 4px;
}
.rcn-cta__icon { width: 14px; height: 10px; flex: none; fill: var(--accent); }
.rcn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; }
.rcn-actions p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
/* A block whose only link was to another event, now closed, keeps no empty gap. */
.rcn-actions:has(> p:only-child:empty) { display: none; }
.rcn-note { color: var(--ink-muted); font-style: italic; }
/* A secondary call to action: the same triangles and underline, in a quieter colour than the gold. */
.rcn-theme a.rcn-cta--quiet { color: var(--brand); font-weight: 400; text-decoration-color: var(--line-strong); }
.rcn-theme a.rcn-cta--quiet:hover { color: var(--brand-strong); }
.rcn-cta--quiet .rcn-cta__icon { fill: var(--line-strong); }
.rcn-actions--quiet { margin-top: var(--space-8); }

/* ---------- Hero ---------- */
.rcn-hero { container-type: inline-size; position: relative; color: var(--ink); }
.rcn-hero__inner {
  max-width: var(--content); margin: 0 auto; padding: var(--space-12) var(--space-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center;
}
.rcn-hero__mark { width: min(300px, 80cqi); height: auto; }
/* The tagline sits just under the « 100 · 1927-2027 Rotary Club Neuchâtel » lettering, over the lower part of the
   wheel, as in the club's artwork. The mark is 0.62 as tall as wide and its lettering ends at about two thirds of its
   height, so the tagline is pulled up by ≈ 0.23 of the mark's width; the space under it then clears the bottom of the
   wheel before the title. Both scale with the mark. */
.rcn-hero__mark + .rcn-hero__eyebrow {
  position: relative;
  margin-top: calc(min(300px, 80cqi) * -0.23);
  margin-bottom: calc(min(300px, 80cqi) * 0.1);
}
.rcn-hero__eyebrow { margin: 0; color: var(--accent); font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
[data-theme="club"] .rcn-hero__eyebrow { color: var(--brand); }   /* gold is never text on a light ground */
.rcn-hero__title { margin: var(--space-2) 0 0; color: var(--brand); font-size: 32px; line-height: 40px; font-weight: 600; text-wrap: balance; max-width: 24ch; }
.rcn-hero__lead { margin: 0; max-width: var(--measure); font-size: 19px; line-height: 30px; text-wrap: pretty; }
@container (min-width: 720px) {
  .rcn-hero__inner { padding: var(--space-24) var(--space-6) var(--space-16); }
  .rcn-hero__title { font-size: 40px; line-height: 48px; letter-spacing: -0.01em; }
}

/* ---------- Content column and blocks ---------- */
.rcn-section { padding: 0 var(--space-4) var(--space-12); }
.rcn-column { max-width: var(--content); margin: 0 auto; }
.rcn-landing { text-align: center; }
.rcn-landing .rcn-column > * { margin-left: auto; margin-right: auto; max-width: var(--measure); }
.rcn-landing .rcn-actions, .rcn-landing .rcn-actions p,
.rcn-home .rcn-actions, .rcn-home .rcn-actions p { justify-content: center; }
.rcn-home .rcn-column > * { margin-left: auto; margin-right: auto; max-width: var(--measure); }
.rcn-landing h2, .rcn-landing h3 { color: var(--brand); }
.rcn-landing ul:not(.rcn-causes) { list-style: none; padding: 0; }
.rcn-landing ul:not(.rcn-causes) li { margin: var(--space-1) 0; }
.rcn-lead { font-size: 19px; line-height: 30px; }
.rcn-lead p { margin: 0 0 var(--space-4); }
.rcn-centered { text-align: center; }
.rcn-centered p { margin: var(--space-4) auto; max-width: var(--measure); }
/* A centred line directly above a button reads as its label: no extra gap between them. */
.rcn-centered + .rcn-actions { margin-top: 0; }
.rcn-centered strong, .rcn-centered h2, .rcn-centered h3 { color: var(--brand); }
/* Home: the running text under the hero reads at the lead's size, so the page keeps one voice. */
.rcn-home .rcn-centered p { font-size: 19px; line-height: 30px; }

.rcn-dateline { margin: var(--space-8) auto; padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); color: var(--brand); font-size: 18px; line-height: 26px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; max-width: var(--measure); }
.rcn-dateline p { margin: 0; }

.rcn-causes-block { text-align: center; margin: var(--space-8) auto; max-width: var(--measure); }
.rcn-causes-block > p { color: var(--brand); font-weight: 600; margin: 0 0 var(--space-4); }
.rcn-causes { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); text-align: center; }
.rcn-causes li, .rcn-causes p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.rcn-causes strong { display: block; color: var(--highlight); font-size: 16px; line-height: 24px; font-weight: 600; }

/* ---------- Countdown ---------- */
.rcn-countdown { container-type: inline-size; text-align: center; margin: 0 auto var(--space-8); padding: 0 var(--space-4); }
.rcn-countdown__label { margin: 0 0 var(--space-3); color: var(--accent); font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
[data-theme="club"] .rcn-countdown__label { color: var(--brand); }
.rcn-countdown__units { display: flex; justify-content: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.rcn-countdown__unit { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 3.5ch; }
.rcn-countdown__figure { color: var(--brand); font-size: 36px; line-height: 40px; font-weight: 300; font-variant-numeric: tabular-nums; }
.rcn-countdown__name { color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.rcn-countdown__date { margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
@container (min-width: 480px) {
  .rcn-countdown__units { gap: var(--space-8); }
  .rcn-countdown__figure { font-size: 48px; line-height: 52px; }
}

/* ---------- Prose (article layout, legal pages) ---------- */
.rcn-page { max-width: var(--content); margin: 0 auto; padding: var(--space-12) var(--space-4); }
.rcn-page--wide { max-width: var(--wide); }
.rcn-page > h1, .rcn-page-title { margin: 0 0 var(--space-4); color: var(--brand); font-size: 32px; line-height: 40px; font-weight: 600; }
.rcn-muted { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.rcn-prose { max-width: var(--measure); overflow-wrap: break-word; }
.rcn-prose h2 { margin: var(--space-8) 0 var(--space-3); color: var(--brand); font-size: 24px; line-height: 32px; font-weight: 600; }
.rcn-prose h3 { margin: var(--space-6) 0 var(--space-2); color: var(--brand); font-size: 20px; line-height: 28px; font-weight: 600; }
.rcn-prose p, .rcn-prose ul, .rcn-prose ol { margin: 0 0 var(--space-4); }
.rcn-prose li { margin: var(--space-1) 0; }
.rcn-prose blockquote { margin: var(--space-6) 0; padding: 0 0 0 var(--space-4); border-left: 3px solid var(--accent); color: var(--brand); font-size: 19px; line-height: 30px; }
.rcn-prose table { border-collapse: collapse; margin: var(--space-4) 0; width: 100%; }
.rcn-prose th, .rcn-prose td { border: 1px solid var(--line); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.rcn-prose th { background: var(--ground-alt); }
.rcn-prose code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; background: var(--ground-alt); padding: 0 4px; border-radius: var(--radius-sm); }
@media (min-width: 720px) { .rcn-page { padding: var(--space-16) var(--space-6); } .rcn-section { padding: 0 var(--space-6) var(--space-16); } }

/* Legal pages keep a wider measure: long clauses and tables. */
.rcn-legal-body { max-width: 60rem; }
.rcn-legal-meta { margin: 0 0 var(--space-6); }
.rcn-legal-preview-banner {
  margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--accent); background: #fff7e6; color: #5c3d00; font-weight: 600;
}

/* ---------- Event teaser (events list) ---------- */
.rcn-event-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-top: var(--space-8); }
@media (min-width: 720px) { .rcn-event-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rcn-event-grid--wide { grid-template-columns: repeat(3, 1fr); } }
.rcn-event {
  container-type: inline-size;
  background: var(--ground-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}
.rcn-event--past { opacity: 0.75; }
.rcn-event__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.rcn-event__date { margin: 0; color: var(--brand); font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.rcn-event__title { margin: 0; color: var(--brand); font-size: 20px; line-height: 28px; font-weight: 600; text-wrap: balance; }
.rcn-event__meta { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.rcn-event__description { overflow-wrap: break-word; }
.rcn-event__description > :first-child { margin-top: 0; }
.rcn-event__description > :last-child { margin-bottom: 0; }
.rcn-event__footer { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
@container (min-width: 480px) { .rcn-event__body { padding: var(--space-6); } }

.rcn-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  color: var(--ink); font-size: 13px; line-height: 20px; font-weight: 600;
}
/* The word carries the state; the dot only reinforces it (Grass is too light for text). */
.rcn-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.rcn-badge--open::before { background: var(--success); }
.rcn-badge--soon::before { background: var(--brand); }
.rcn-badge--closed::before { background: var(--danger); }

/* ---------- Galleries ---------- */
.rcn-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.rcn-theme a.rcn-album-tile {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--ground);
  box-shadow: var(--shadow-raised);
}
.rcn-album-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--ground-alt); }
.rcn-album-cover--empty { background: repeating-linear-gradient(45deg, #eef2f7, #eef2f7 12px, #e3e8ef 12px, #e3e8ef 24px); }
.rcn-album-meta { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.rcn-album-title { color: var(--brand); font-weight: 600; }
.rcn-album-date { color: var(--ink-muted); font-size: 14px; }
.rcn-album-subtitle { font-size: 19px; line-height: 30px; color: var(--brand); margin: 0 0 var(--space-2); font-weight: 600; }
.rcn-album-description { margin: var(--space-3) 0; overflow-wrap: break-word; }
.rcn-album-description > :first-child { margin-top: 0; }
.rcn-album-description > :last-child { margin-bottom: 0; }
.rcn-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin-top: var(--space-6); }
.rcn-gallery-item { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-md); background: var(--ground-alt); }
.rcn-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcn-gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.35rem 0.5rem; font-size: 0.78rem; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); opacity: 0;
}
.rcn-gallery-item:hover .rcn-gallery-caption, .rcn-gallery-item:focus-visible .rcn-gallery-caption { opacity: 1; }

/* ---------- Status pages (404, error) ---------- */
.rcn-status { display: flex; justify-content: center; padding: var(--space-12) var(--space-4); }
.rcn-status-card {
  max-width: 520px; width: 100%; background: var(--ground-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-12) var(--space-8); text-align: center; box-shadow: var(--shadow-raised);
}
.rcn-status-accent { border-top: 2px solid var(--accent); width: 48px; margin: 0 auto var(--space-6); }
.rcn-status-card h1 { color: var(--brand); font-size: 24px; line-height: 32px; margin: 0 0 var(--space-3); }
.rcn-status-card p { color: var(--ink-muted); margin: 0 0 var(--space-6); }
.rcn-status-code { color: var(--brand); font-size: 44px; font-weight: 300; line-height: 1; margin-bottom: var(--space-2); }

/* ---------- Preference center (a server-rendered form) ---------- */
.rcn-pref-table { border-collapse: collapse; margin: var(--space-6) 0; }
.rcn-pref-table th, .rcn-pref-table td { border: 1px solid var(--line); padding: var(--space-2) var(--space-4); text-align: center; }
.rcn-pref-table th:first-child, .rcn-pref-table td:first-child { text-align: left; }
.rcn-pref-cell { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; min-height: 44px; }
.rcn-pref-cell input { width: 20px; height: 20px; }
.rcn-pref-ok { color: var(--ink); font-weight: 600; }
.rcn-pref-ok::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: var(--space-2); }
.rcn-pref-error { color: var(--danger); font-weight: 600; }
.rcn-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-6); }

/* ---------- Footer ---------- */
.rcn-footer { container-type: inline-size; background: var(--ground-alt); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.rcn-footer__inner { max-width: var(--wide); margin: 0 auto; padding: var(--space-8) var(--space-4); display: grid; gap: var(--space-6); }
.rcn-footer__club { margin: 0; color: var(--brand); font-weight: 600; }
.rcn-footer__line { margin: 0; }
.rcn-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.rcn-theme .rcn-footer a { color: var(--ink-muted); }
.rcn-theme .rcn-footer a:hover { color: var(--brand-strong); }
@container (min-width: 720px) {
  .rcn-footer__inner { grid-template-columns: 1fr auto; align-items: end; padding: var(--space-12) var(--space-6); }
}

/* ---------- Cookie banner (forms/rcn-analytics.js) ----------
   The banner is built by the analytics script and styled through its --rcn-cc-* properties; here they take the
   design system's tokens, so it follows the theme of the page it sits on: a panel on ground-alt like the footer,
   « Accepter » the primary button, « Refuser » the secondary one. Both stay the same size side by side — refusing
   must be as easy as accepting. Text at the `small` size, as for the footer: a notice, not running text. */
.rcn-theme {
  --rcn-cc-bg: var(--ground-alt);
  --rcn-cc-ink: var(--ink);
  --rcn-cc-line: var(--line);
  --rcn-cc-shadow: 0 -4px 16px #1728541f;
  --rcn-cc-font: var(--font-sans);
  --rcn-cc-font-size: 14px;
  --rcn-cc-line-height: 22px;
  --rcn-cc-link: var(--link);
  --rcn-cc-radius: var(--radius-md);
  --rcn-cc-button-size: 16px;
  --rcn-cc-button-weight: 600;
  --rcn-cc-focus: var(--focus);
  --rcn-cc-accept-bg: var(--action);
  --rcn-cc-accept-ink: var(--on-action);
  --rcn-cc-accept-bg-hover: var(--action-strong);
  --rcn-cc-accept-hover-filter: none;
  --rcn-cc-decline-ink: var(--brand);
  --rcn-cc-decline-line: var(--line-strong);
  --rcn-cc-decline-bg-hover: var(--ground);
  --rcn-cc-decline-ink-hover: var(--brand-strong);
  --rcn-cc-fab-bg: var(--ground-alt);
  --rcn-cc-fab-line: var(--line-strong);
  --rcn-cc-fab-icon: var(--brand);        /* gold is under 3:1 on a light ground — the club theme uses the blue */
  --rcn-cc-fab-shadow: var(--shadow-raised);
}
[data-theme="centenaire"].rcn-theme {
  --rcn-cc-shadow: none;                   /* the centenary theme separates by ground and line, not shadow */
  --rcn-cc-fab-icon: var(--accent);
  --rcn-cc-fab-shadow: none;
}

/* ---------- Centenaire: the text hierarchy of the jubilee pages (reviewed 2026-10-06) ----------
   Introductory text in the quieter Mist, the countdown and its date in white so the moment stands out, the
   highlighted question stays in the brand Powder Blue. */
[data-theme="centenaire"] .rcn-hero__lead,
[data-theme="centenaire"] .rcn-home .rcn-centered p { color: var(--ink-muted); }
[data-theme="centenaire"] .rcn-home .rcn-centered p strong { color: var(--brand); }
[data-theme="centenaire"] .rcn-countdown__figure,
[data-theme="centenaire"] .rcn-countdown__date { color: var(--ink); }
/* The date is the page's key fact: as large as the paragraphs around it, not a caption. */
[data-theme="centenaire"] .rcn-countdown__date { font-size: 19px; line-height: 30px; margin-top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  .rcn-theme * { transition: none !important; animation: none !important; }
}