/* Typefaces, served from this site rather than Google Fonts, so no visitor's
   address is sent to Google. Variable fonts (one file covers every weight)
   from Fontsource 5.3.0, licensed under the SIL Open Font License: see
   assets/fonts/OFL-*.txt. Latin and Latin Extended subsets only. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   RAi Health & Social Care — design system, first cut
   Palette and blue inherited from rai.ac.uk so the two read as family.
   Type is new: rai.ac.uk specifies Bahnschrift, a Windows-only system font
   that silently falls back on Mac/iOS/Android. Archivo is the licensable
   web-safe equivalent in the same DIN-grotesque genre.
   ========================================================================== */

:root {
  /* The palette is RAi UK's three colours and nothing else. Every other value
     below is one of them mixed with white (a tint) or black (a shade), so the
     site reads as part of the rai.ac.uk family. The recipe is noted on each
     line; contrast is against white unless stated. */

  /* From rai.ac.uk. Measured off the artwork, body pixels are #0059fa (red
     channel zero, far more saturated than it looks). RAi's own stylesheet
     declares #0044ff, same family and better contrast, so that is the
     interface blue. */
  --rai-blue:    #0044ff;   /* 6.4:1, passes AA */
  --rai-orange:  #ff662d;   /* 2.9:1, fills and large display only, never text on white */
  --rai-grey:    #6a737b;   /* 4.8:1 */

  /* The wordmark is one flat blue lit from the upper left, so the ribbon's
     turned faces catch light and its undersides fall into shadow. */
  --blue-lit:    #3369ff;   /* blue + 20% white: face turned toward the light; the most
                                white can take and keep white text at 4.5:1 */
  --blue-shade:  #0031b8;   /* blue + 28% black: underside of a fold */
  --blue-deep:   var(--blue-shade);   /* 9.9:1, links and small blue text */
  --blue-lit-safe: #2b5ff2; /* lightest stop behind white button text: 5.2:1 (the old #3369ff was 4.56:1) */
  --ribbon-light: linear-gradient(158deg, var(--blue-lit-safe) 0%, var(--rai-blue) 42%, var(--blue-shade) 100%);

  /* Correction 2: the ribbon turns in smooth curves — there is not a single
     hard corner in the mark. Geometry is circular, so radii are generous. */
  --radius: 18px;

  /* Text */
  --ink:         #001347;   /* blue + 72% black, 17.7:1: body text and dark sections */
  --ink-soft:    #4d545a;   /* grey + 27% black, 7.7:1; at least 7.2:1 on every tint */

  /* Blue tints, for positive and neutral states */
  --blue-50:     #f5f8ff;   /* blue + 96% white */
  --blue-100:    #e6ecff;   /* blue + 90% white */
  --blue-200:    #ccdaff;   /* blue + 80% white */

  /* Orange, for deadlines and anything needing attention */
  --orange-50:   #fff6f2;   /* orange + 94% white */
  --orange-100:  #ffede6;   /* orange + 88% white */
  --orange-200:  #ffcebc;   /* orange + 68% white: borders */
  --orange-deep: #ad451f;   /* orange + 32% black, 5.1:1 on orange-100 */
  --on-orange:   #3d180b;   /* orange + 76% black, 5.4:1 on solid orange */

  /* On the ink background */
  --on-dark:       #e6ecff; /* white + 10% blue, 15:1 */
  --on-dark-soft:  #d2d5d7; /* white + 30% grey, 12:1 */
  --on-dark-muted: #b4b9bd; /* white + 50% grey, 9:1 */
  --blue-on-dark:  #8cabff; /* blue + 55% white, 7.9:1 */

  /* Surfaces and lines */
  --paper:        #ffffff;
  --paper-tint:   var(--blue-50);
  --paper-warm:   var(--orange-50);
  --rule:         #e4e6e7;  /* grey + 82% white: dividers */
  --rule-strong:  #bcc0c4;  /* grey + 55% white: decorative marks */
  --field-border: #888f95;  /* grey + 20% white, 3.3:1: form controls need 3:1 */

  /* Type */
  --sans:  "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.9vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);

  --container: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--blue-deep); }

:focus-visible {
  outline: 3px solid var(--rai-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 100; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; top: 0; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: 62ch; }
.grad-text { color: var(--rai-blue); }

.lead { font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); }


/* --- Masthead --- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.masthead .container { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }

/* Sub-brand lockup: RAi's own wordmark, a hairline, then the descriptor.
   The wordmark is a placeholder raster (2x at this size) until the vector arrives —
   swap assets/rai-wordmark-blue.png for rai-wordmark.svg and nothing else changes. */
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-mark { display: block; height: 30px; width: auto; flex: none; }
.brand-rule { display: block; width: 1px; height: 26px; background: var(--rule-strong); flex: none; }
.brand-name { font-weight: 500; font-size: 1.16rem; letter-spacing: -0.025em; line-height: 1; white-space: nowrap; }
.brand-sm .brand-mark { height: 26px; }
.brand-sm .brand-rule { height: 22px; }
.brand-sm .brand-name { font-size: 1.02rem; }
/* The organisation's full name, kept under the lockup so it is never lost. */
.brand-tagged { flex-wrap: wrap; row-gap: 0.4rem; }
.brand-tag { flex-basis: 100%; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; }
.brand-sm .brand-tag { font-size: 0.7rem; }
/* The narrowest phones: let it wrap rather than push the page sideways. */
@media (max-width: 360px) { .masthead .brand-tag { white-space: normal; } }

.nav { display: flex; gap: 1.5rem; }
.nav a, .masthead-link { color: var(--ink-soft); text-decoration: none; font-size: 0.94rem; font-weight: 500; white-space: nowrap; }
.masthead-link { color: var(--blue-deep); font-weight: 600; }
.nav a:hover, .masthead-link:hover { color: var(--rai-blue); }
/* The five section links need about 1,200px alongside the brand and actions. */
@media (max-width: 1200px) { .nav { display: none; } }
/* On phones the header keeps one action. "Get in touch" is also the large
   button at the foot of the page, so the Members link takes its place. */
@media (max-width: 560px) { .masthead .hide-phone { display: none; } }
@media (max-width: 860px) {
  .masthead .container { gap: 1rem; }
  /* Secondary header actions drop out; each stays reachable elsewhere
     (sign-in from the footer, admin from the members' tab bar). */
  .masthead .hide-narrow { display: none; }
}
@media (min-width: 861px) { .show-narrow { display: none; } }
@media (max-width: 420px) {
  .brand-name { font-size: 1rem; }
  .masthead .btn { padding-inline: 1.1rem; }
}
@media (max-width: 360px) {
  .masthead .container { gap: 0.75rem; }
  .masthead .brand { gap: 0.55rem; }
  .masthead .brand-mark { height: 24px; }
  .masthead .brand-name { font-size: 0.92rem; }
  .masthead .btn { padding-inline: 0.9rem; }
}

.btn {
  display: inline-block;
  background: var(--ribbon-light); color: #fff;
  padding: 0.78rem 1.5rem; border-radius: 999px;
  font-weight: 600; font-size: 0.94rem; text-decoration: none;
  border: 0; white-space: nowrap;
  transition: filter 0.15s ease;
}
.btn:hover { filter: saturate(1.15) brightness(0.92); }
.btn-ghost { background: var(--blue-100); color: var(--blue-shade); }
.btn-ghost:hover { background: var(--blue-200); filter: none; }

/* --- Section furniture --- */
section { scroll-margin-top: 96px; padding-block: clamp(3.5rem, 8vw, 7rem); }
.eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rai-blue);
  display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.25rem;
}
.eyebrow::before { content: ""; width: 30px; height: 4px; border-radius: 2px; background: var(--rai-blue); flex: none; }

/* --- Hero --- */
.hero { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset-inline-end: -18%; top: -30%;
  width: 60vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,68,255,0.09), rgba(0,68,255,0) 68%);
  pointer-events: none;
}
.hero h1 { font-size: var(--step-4); max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--rai-blue); }
.stat dt { color: var(--rai-blue); }
.hero .lead { margin-top: 1.75rem; max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.5rem; }

/* --- Stat strip --- */
.stats { border-block: 1px solid var(--rule); background: var(--paper-tint); }
.stats .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.5rem; padding-block: 3rem; }
.stat dt { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.stat dd { margin: 0.7rem 0 0; font-size: 0.94rem; color: var(--ink-soft); max-width: 30ch; }

/* --- Programme cards --- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 1.5rem; margin-top: 3rem; }
.card {
  padding: 2.1rem 1.9rem; background: var(--paper);
  display: flex; flex-direction: column; gap: 0.85rem;
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  filter: drop-shadow(0 1px 2px rgba(0,19,71,0.07)) drop-shadow(0 6px 18px rgba(0,19,71,0.06));
}
.card::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: 92px; height: 4px; background: var(--rai-blue);
}
.card .num {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--rai-blue); text-transform: uppercase;
}
.card h3 { font-size: var(--step-1); }
.card p { color: var(--ink-soft); font-size: 0.96rem; }
.card.flagship::before { width: 100%; height: 5px; }
.tag {
  align-self: flex-start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; background: var(--rai-blue); color: #fff;
  padding: 0.25rem 0.6rem; border-radius: 4px;
}

/* --- Boundaries: the will / will not table --- */
.boundaries { background: var(--ink); color: #fff; }
.boundaries .eyebrow, .cta .eyebrow { color: var(--blue-on-dark); }
.boundaries h2 { color: #fff; }
.boundaries .lead { color: var(--on-dark-soft); }
.bound-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 2.5rem; margin-top: 3rem; }
.bound-col h3 { font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 0.9rem; border-bottom: 2px solid; }
.bound-col.will h3 { color: var(--blue-on-dark); border-color: var(--blue-on-dark); }
.bound-col.wont h3 { color: var(--rai-orange); border-color: var(--rai-orange); }
.bound-col ul { list-style: none; margin: 0; padding: 0; }
.bound-col li { padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,0.13); color: var(--on-dark); font-size: 0.97rem; }

/* --- Audiences --- */
.aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 0; background: var(--paper); border: 1px solid var(--rule); overflow: hidden; margin-top: 3rem; border-radius: var(--radius); }
.aud { background: var(--paper); padding: 1.9rem 1.6rem; box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule); }
.aud h3 { font-size: 1.02rem; margin-bottom: 0.6rem; }
.aud p { font-size: 0.92rem; color: var(--ink-soft); }

/* --- Independence --- */
.indep { background: var(--paper-warm); }
.pledges { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.pledges li { background: var(--paper-warm); padding: 1.4rem 0 1.4rem 3.2rem; position: relative; color: var(--ink-soft); }
.pledges li::before {
  content: ""; position: absolute; left: 0.9rem; top: 1.85rem;
  width: 12px; height: 12px; border-radius: 50%;
  border: 3px solid var(--rai-orange);
}
.pledges b { color: var(--ink); font-weight: 600; }

/* --- CTA + footer --- */
.cta { text-align: center; }
.cta h2 { font-size: var(--step-3); margin-inline: auto; max-width: 20ch; }
.cta .lead { margin: 1.5rem auto 2.5rem; }
.cta { background: var(--ink); color: #fff; }
.cta .eyebrow { justify-content: center; }
.cta h2 { color: #fff; }
.cta .lead { color: var(--on-dark-soft); max-width: 52ch; }

footer { border-top: 1px solid var(--rule); padding-block: 3.5rem 4rem; font-size: 0.9rem; color: var(--rai-grey); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; }
footer h4, footer .foot-h { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--rai-blue); text-decoration: underline; }
/* Unwritten pages: visible to the team, still readable (about 4.8:1). */
.todo { color: var(--rai-grey); font-style: italic; }
.colophon { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }

/* ==========================================================================
   MEMBERS' COMMUNITY SPACE
   A portal, not a forum. Discussion is one module among several, so the
   layout leads with what is time-critical (calls, events) rather than with
   an undifferentiated activity feed — the main thing NHS Futures gets wrong.
   ========================================================================== */

.members-bar { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,0.1); }
.members-bar .container { display: flex; align-items: center; gap: 1.75rem; min-height: 54px; }
/* Narrow screens scroll the nav sideways rather than wrapping it into a
   second row, which pushed the bar to 99px and buried the page heading. */
.members-bar nav { display: flex; gap: 1.6rem; margin-right: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.members-bar nav::-webkit-scrollbar { display: none; }
.members-bar a { white-space: nowrap; }
.members-bar a { color: var(--on-dark-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding-block: 0.35rem; border-bottom: 2px solid transparent; }
.members-bar a:hover { color: #fff; }
.members-bar a[aria-current="page"] { color: var(--blue-on-dark); font-weight: 600; border-bottom-color: var(--blue-on-dark); }
.members-bar .who { color: var(--on-dark-muted); font-size: 0.84rem; display: flex; align-items: center; gap: 0.6rem; flex: none; white-space: nowrap; }
@media (max-width: 720px) { .who-text { display: none; } }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ribbon-light); color: #fff; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }

.page-head { padding-block: 2.75rem 1.5rem; }
.page-head h1 { font-size: var(--step-3); }
.page-head p { color: var(--ink-soft); margin-top: 0.6rem; }

.app { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 2.5rem; padding-bottom: 5rem; align-items: start; }
@media (max-width: 940px) { .app { grid-template-columns: minmax(0, 1fr); } }

.module { margin-bottom: 2.75rem; padding-block: 0; }
.module-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); }
.module-head h2 { font-size: 1.18rem; letter-spacing: -0.02em; }
.module-head a { font-size: 0.86rem; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Calls: deadline-led, because a missed deadline is the costliest failure here */
.call { display: flex; gap: 1.25rem; padding: 1.35rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); margin-bottom: 0.85rem; }
.call-when { flex: none; width: 62px; text-align: center; border-right: 1px solid var(--rule); padding-right: 1rem; }
.call-when .d { font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.call-when .m { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rai-grey); margin-top: 0.25rem; }
.call h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.call p { font-size: 0.9rem; color: var(--ink-soft); }
.countdown { display: inline-block; margin-top: 0.6rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 4px; background: var(--orange-100); color: var(--orange-deep); }
.countdown.soon { background: var(--rai-orange); color: var(--on-orange); }

/* Boards: activity is the signal, so it gets weight — not a wall of icons */
.board { display: flex; align-items: center; gap: 1rem; padding: 1rem 0.5rem; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.board:hover { background: var(--paper-tint); }
.board-icon { flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--paper-tint); display: grid; place-items: center; font-size: 0.82rem; font-weight: 700; color: var(--rai-blue); }
.board-body { flex: 1; min-width: 0; }
.board-body h3 { font-size: 0.98rem; margin-bottom: 0.18rem; }
.board-body p { font-size: 0.84rem; color: var(--rai-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-meta { flex: none; text-align: right; font-size: 0.78rem; color: var(--rai-grey); }
.board-meta b { display: block; color: var(--ink); font-size: 0.95rem; font-weight: 600; }
.lock { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rai-grey); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0.1rem 0.35rem; margin-left: 0.5rem; vertical-align: 1px; }

/* Video: a click-to-load facade. Nothing reaches YouTube until the user asks. */
.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem; }
.video { border: 0; padding: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.video-thumb { position: relative; aspect-ratio: 16/9; border-radius: 10px; background: linear-gradient(145deg, var(--blue-shade), var(--rai-blue) 60%, var(--blue-lit)); display: grid; place-items: center; }
.video-thumb::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; margin-left: 4px; filter: drop-shadow(0 2px 6px rgba(0,19,71,0.35)); }
.video h3 { font-size: 0.92rem; margin-top: 0.7rem; line-height: 1.35; }
.video p { font-size: 0.79rem; color: var(--rai-grey); margin-top: 0.25rem; }
.video:hover .video-thumb { filter: brightness(1.08); }

/* Sidebar */
.panel { border: 1px solid var(--rule); border-radius: 14px; padding: 1.4rem; margin-bottom: 1.5rem; background: var(--paper); }
.panel h2 { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rai-grey); margin-bottom: 1.1rem; }
.event { display: flex; gap: 0.9rem; padding-block: 0.9rem; border-top: 1px solid var(--rule); }
.event:first-of-type { border-top: 0; padding-top: 0; }
.event-when { flex: none; width: 42px; text-align: center; }
.event-when .d { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.event-when .m { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rai-grey); }
.event h3 { font-size: 0.9rem; line-height: 1.35; }
.event p { font-size: 0.78rem; color: var(--rai-grey); margin-top: 0.2rem; }
.rsvp { margin-top: 0.45rem; font-size: 0.76rem; font-weight: 600; color: var(--rai-blue); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.rsvp:hover { text-decoration: underline; }

.update { padding-block: 1.05rem; border-top: 1px solid var(--rule); }
.update:first-of-type { border-top: 0; padding-top: 0; }
.update time { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rai-blue); }
.update h3 { font-size: 0.98rem; margin: 0.35rem 0 0.3rem; }
.update p { font-size: 0.88rem; color: var(--ink-soft); }

/* ==========================================================================
   SIGN-IN AND APPROVAL
   Magic link, no passwords. Two properties drive the whole design:
   (1) the page must never reveal whether an address is a member — membership
       itself is sensitive, so the sign-in form would otherwise be a lookup tool;
   (2) mail scanners follow links, so a link must not sign anyone in on its own.
   ========================================================================== */

.auth-shell { min-height: 78vh; display: grid; place-items: center; padding: 3rem var(--gutter); }
.auth-card { width: 100%; max-width: 430px; }
.auth-card .brand { margin: 0 0 2.25rem; justify-content: flex-start; }
.auth-card h1 { font-size: var(--step-2); margin-bottom: 0.7rem; }
.auth-card > p { color: var(--ink-soft); font-size: 0.95rem; }

.field { margin-top: 1.75rem; }
.field label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 0.45rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 0.97rem; color: var(--ink);
  padding: 0.78rem 0.9rem; border: 1px solid var(--field-border); border-radius: 9px;
  background: var(--paper);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--rai-blue); }
.field .hint { display: block; margin-top: 0.45rem; font-size: 0.82rem; color: var(--rai-grey); }
.auth-card .btn { width: 100%; text-align: center; margin-top: 1.5rem; }

.auth-note {
  margin-top: 1.75rem; padding: 1rem 1.1rem; border-radius: 10px;
  background: var(--paper-tint); border: 1px solid var(--rule);
  font-size: 0.86rem; color: var(--ink-soft);
}
.auth-note b { color: var(--ink); }
.auth-foot { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.88rem; color: var(--rai-grey); }

.sent-mark {
  width: 46px; height: 46px; border-radius: 50%; background: var(--paper-tint);
  border: 2px solid var(--rai-blue); display: grid; place-items: center;
  margin-bottom: 1.5rem; color: var(--rai-blue); font-size: 1.15rem; font-weight: 700;
}

/* --- Approval queue --- */
.queue-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between; padding-block: 2.5rem 1.5rem; }
.queue-head h1 { font-size: var(--step-2); }
.queue-head p { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.4rem; }

.applicant { border: 1px solid var(--rule); border-radius: 13px; padding: 1.5rem; margin-bottom: 1.1rem; background: var(--paper); }
.applicant-top { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.applicant h2 { font-size: 1.08rem; }
.applicant .addr { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.2rem; }
.applicant .ago { margin-left: auto; font-size: 0.8rem; color: var(--rai-grey); white-space: nowrap; }

.signals { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.signal { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.25rem 0.6rem; border-radius: 5px; background: var(--paper-tint); color: var(--ink-soft); border: 1px solid var(--rule); }
.signal.ok { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-deep); }
.signal.watch { background: var(--paper-warm); border-color: var(--orange-200); color: var(--orange-deep); }

.stated { margin-top: 1.1rem; padding: 0.95rem 1.1rem; border-left: 3px solid var(--rule-strong); background: var(--paper-tint); font-family: var(--serif); font-size: 0.94rem; color: var(--ink-soft); }
.decide { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.35rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.decide .as { font-size: 0.84rem; color: var(--rai-grey); margin-right: auto; }
.decide select { font: inherit; font-size: 0.87rem; padding: 0.5rem 0.7rem; border: 1px solid var(--field-border); border-radius: 8px; background: var(--paper); color: var(--ink); }
.mini { font: inherit; font-size: 0.87rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--field-border); background: var(--paper); color: var(--ink); cursor: pointer; }
.mini.primary { background: var(--rai-blue); border-color: var(--rai-blue); color: #fff; }
.mini.primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.mini:hover { background: var(--paper-tint); }
.decide-note { flex: 1 1 100%; font: inherit; font-size: 0.89rem; padding: 0.6rem 0.75rem; border: 1px solid var(--field-border); border-radius: 8px; background: var(--paper); color: var(--ink); resize: vertical; }
.decide-ref { flex: 1 1 100%; display: flex; gap: 0.5rem; align-items: center; font-size: 0.87rem; color: var(--ink-soft); }
.decide-ref input { width: 16px; height: 16px; accent-color: var(--rai-blue); }
.mini:disabled { opacity: 0.55; cursor: default; }
a.mini { text-decoration: none; display: inline-block; }
.answers h3 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rai-grey); margin-top: 1.1rem; }
.answers .stated { margin-top: 0.4rem; white-space: pre-line; }
.queue-status { font-size: 0.89rem; color: var(--blue-deep); margin-top: 0.75rem; }
.queue-status:empty { display: none; }
.outcomes { margin-top: 2.5rem; border-top: 1px solid var(--rule); }

/* --- Application form ------------------------------------------------- */
.form-wrap { max-width: 640px; margin-inline: auto; padding-block: 3rem 5rem; }
.form-wrap > h1 { font-size: var(--step-3); }
.form-wrap > .lead { margin-top: 1.1rem; }
fieldset { border: 0; margin: 2.75rem 0 0; padding: 0; }
legend { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rai-blue); padding: 0; margin-bottom: 0.5rem; }
fieldset > .legend-note { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.req { color: var(--blue-deep); font-weight: 700; }
textarea { min-height: 92px; resize: vertical; }

.choices { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.choice { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.75rem 0.9rem; border: 1px solid var(--field-border); border-radius: 9px; cursor: pointer; font-size: 0.93rem; }
.choice:hover { background: var(--paper-tint); }
.choice input { margin: 0.15rem 0 0; flex: none; width: 17px; height: 17px; accent-color: var(--rai-blue); }
.choice span b { display: block; font-weight: 600; }
.choice span i { display: block; font-style: normal; font-size: 0.83rem; color: var(--rai-grey); margin-top: 0.15rem; }

.privacy { margin-top: 2.5rem; padding: 1.4rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-tint); font-size: 0.89rem; color: var(--ink-soft); }
.privacy h2 { font-size: 0.95rem; margin-bottom: 0.7rem; color: var(--ink); }
.privacy ul { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }

/* --- Privacy notice --- */
.notice h2 { font-size: var(--step-1); margin-top: 2.6rem; }
.notice h3 { font-size: 1rem; margin-top: 1.5rem; }
.notice p, .notice li { color: var(--ink-soft); }
.notice p { margin-top: 0.9rem; }
.notice ul { margin: 0.7rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.notice ul ul { margin-top: 0.5rem; }
.notice-draft, .tbc-box { margin-top: 1.5rem; padding: 0.9rem 1.1rem; border-radius: 10px; background: var(--paper-warm); border: 1px solid var(--orange-200); }
.notice-draft b, .tbc-box b { color: var(--ink); }
.tbc { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 5px; background: var(--paper-warm); border: 1px solid var(--orange-200); color: var(--orange-deep); }
.notice-table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: 0.9rem; }
.notice-table th, .notice-table td { text-align: left; vertical-align: top; padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--rule); }
.notice-table th { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rai-grey); }
.notice-table td { color: var(--ink-soft); }
.notice-table code { font-size: 0.85em; overflow-wrap: anywhere; }
.notice-date { font-size: 0.86rem; color: var(--rai-grey); }

/* Reviewer panel on the approvals queue */
.panel-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.84rem; color: var(--rai-grey); }
.reviewer { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem 0.25rem 0.25rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink-soft); }
.reviewer .avatar { width: 22px; height: 22px; font-size: 0.6rem; }
.routed { font-size: 0.82rem; color: var(--ink-soft); background: var(--paper-warm); border: 1px solid var(--orange-200); border-radius: 7px; padding: 0.5rem 0.75rem; margin-top: 1rem; }
.routed b { color: var(--ink); }

/* Two-stage review, mirroring the Champions SOP */
.stage { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.28rem 0.65rem; border-radius: 999px; }
.stage.one { background: var(--blue-100); color: var(--blue-deep); }
.stage.two { background: var(--rai-blue); color: #fff; }
.stage.esc { background: var(--orange-100); color: var(--orange-deep); }
.criteria { margin-top: 1.1rem; border: 1px solid var(--rule); border-radius: 10px; padding: 1rem 1.1rem; }
.criteria h3 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rai-grey); margin-bottom: 0.75rem; }
.criteria ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.criteria li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.89rem; color: var(--ink-soft); }
.criteria input { margin: 0.2rem 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--rai-blue); }
.prior { margin-top: 1.1rem; padding: 0.85rem 1rem; border-radius: 9px; background: var(--paper-tint); border: 1px solid var(--rule); font-size: 0.87rem; color: var(--ink-soft); }
.prior b { color: var(--ink); }

/* Any two reviewers, not a fixed sequence. The tally shows how far an
   application has got and who has already counted, because the one rule
   that matters is that the same person cannot be both decisions. */
.tally { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.28rem 0.7rem; border-radius: 999px; background: var(--paper-tint); color: var(--blue-deep); border: 1px solid var(--rule); }
.tally.none { color: var(--rai-grey); }
.tally.ready { background: var(--rai-blue); border-color: var(--rai-blue); color: #fff; }
.pips { display: inline-flex; gap: 3px; }
.pip { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
.pip.on { background: currentColor; }
.already { font-size: 0.84rem; color: var(--rai-grey); font-style: italic; }

/* --- Open decisions register (internal working document) --------------- */
.doc { max-width: 820px; margin-inline: auto; padding-block: 3rem 5rem; }
.doc > h1 { font-size: var(--step-3); }
.doc > .lead { margin-top: 1.1rem; }
.doc h2.sec { font-size: 1.25rem; margin-top: 3.5rem; padding-bottom: 0.7rem; border-bottom: 2px solid var(--ink); }
.doc h2.sec + p { margin-top: 0.9rem; color: var(--ink-soft); font-size: 0.94rem; }

.item { border: 1px solid var(--rule); border-radius: 13px; padding: 1.6rem; margin-top: 1.25rem; }
.item-head { display: flex; gap: 0.9rem; align-items: baseline; }
.item-num { flex: none; font-size: 0.8rem; font-weight: 700; color: var(--rai-blue); letter-spacing: 0.04em; }
.item h3 { font-size: 1.06rem; }
.item dl { margin: 1.1rem 0 0; display: grid; grid-template-columns: 118px 1fr; gap: 0.6rem 1.1rem; font-size: 0.92rem; }
@media (max-width: 560px) { .item dl { grid-template-columns: 1fr; gap: 0.2rem 0; } .item dd { margin-bottom: 0.7rem; } }
.item dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rai-grey); padding-top: 0.18rem; }
.item dd { margin: 0; color: var(--ink-soft); }
.item dd b { color: var(--ink); font-weight: 600; }
.when { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.22rem 0.6rem; border-radius: 5px; margin-left: auto; flex: none; white-space: nowrap; }
.when.hot { background: var(--rai-orange); color: var(--on-orange); }
.when.mid { background: var(--blue-100); color: var(--blue-deep); }
.when.low { background: var(--paper-tint); color: var(--rai-grey); border: 1px solid var(--rule); }

/* Split decisions are flagged rather than auto-resolved — a disagreement is
   information, not an error, and burying it loses the reason. */
.applicant.flagged { border-color: var(--rai-orange); border-width: 2px; }
.flag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.28rem 0.7rem; border-radius: 999px; background: var(--rai-orange); color: var(--on-orange); }
.split { margin-top: 1.1rem; border: 1px solid var(--orange-200); border-radius: 10px; overflow: hidden; }
.split-row { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1rem; font-size: 0.89rem; color: var(--ink-soft); }
.split-row + .split-row { border-top: 1px solid var(--orange-200); }
.split-row .avatar { width: 24px; height: 24px; font-size: 0.62rem; }
.split-row b { color: var(--ink); }
.split-foot { background: var(--paper-warm); padding: 0.8rem 1rem; font-size: 0.87rem; color: var(--ink-soft); border-top: 1px solid var(--orange-200); }

.item.done { border-color: var(--blue-200); background: var(--blue-50); }
.when.done { background: var(--blue-deep); color: #fff; }
.item.done .item-num { color: var(--blue-deep); }

/* ==========================================================================
   DISCUSSION THREAD
   Built for practical questions with practical answers, not for engagement.
   No badges, no points, no reaction counts — the wrong register for people
   who read this between clinics. The one structural addition is a marked
   answer, so someone arriving in six months gets it in five seconds.
   ========================================================================== */

.crumb { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.85rem; color: var(--rai-grey); padding-block: 1.75rem 0; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--rai-blue); text-decoration: underline; }
.crumb span[aria-hidden] { color: var(--rai-grey); }

.thread-head { padding-block: 1rem 1.75rem; border-bottom: 1px solid var(--rule); }
.thread-head h1 { font-size: var(--step-2); max-width: 26ch; }
.thread-meta { margin-top: 0.85rem; font-size: 0.86rem; color: var(--rai-grey); display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }

.answer-box { margin-top: 1.75rem; border: 1px solid var(--blue-200); background: var(--blue-50); border-radius: 12px; padding: 1.25rem 1.4rem; }
.answer-box h2 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 0.7rem; }
.answer-box p { font-size: 0.96rem; color: var(--ink-soft); }
.answer-box a { font-size: 0.87rem; font-weight: 600; display: inline-block; margin-top: 0.7rem; }

.post { display: flex; gap: 1.15rem; padding-block: 1.9rem; border-bottom: 1px solid var(--rule); }
.post.answer { background: var(--blue-50); margin-inline: -1.25rem; padding-inline: 1.25rem; border-radius: 12px; border-bottom-color: var(--blue-200); }
.who-card { flex: none; width: 150px; }
@media (max-width: 720px) { .post { flex-direction: column; gap: 0.85rem; } .who-card { width: auto; display: flex; align-items: center; gap: 0.7rem; } }
.avatar-lg { width: 40px; height: 40px; border-radius: 50%; background: var(--ribbon-light); color: #fff; display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; }
.who-card h3 { font-size: 0.93rem; margin-top: 0.6rem; }
@media (max-width: 720px) { .who-card h3 { margin-top: 0; } }
.who-card p { font-size: 0.79rem; color: var(--rai-grey); line-height: 1.45; margin-top: 0.15rem; }
.post-body { flex: 1; min-width: 0; }
.post-body > p { font-size: 0.98rem; line-height: 1.68; color: var(--ink); max-width: 68ch; }
.post-body > p + p { margin-top: 0.9rem; }
.post-foot { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; font-size: 0.81rem; color: var(--rai-grey); }
.post-foot button { font: inherit; font-size: 0.81rem; background: none; border: 0; padding: 0; color: var(--rai-grey); cursor: pointer; }
.post-foot button:hover { color: var(--rai-blue); text-decoration: underline; }
.answer-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--blue-deep); background: var(--blue-100); border: 1px solid var(--blue-200); border-radius: 999px; padding: 0.22rem 0.65rem; margin-bottom: 0.8rem; }

.composer { margin-top: 2.25rem; }
.composer h2 { font-size: 1rem; margin-bottom: 0.85rem; }
.composer textarea { width: 100%; font: inherit; font-size: 0.97rem; line-height: 1.6; padding: 0.95rem 1.05rem; border: 1px solid var(--field-border); border-radius: 11px; min-height: 130px; resize: vertical; background: var(--paper); color: var(--ink); }
.composer textarea:focus-visible { border-color: var(--rai-blue); }
.composer-foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 0.85rem; }
.composer-foot .note { font-size: 0.82rem; color: var(--rai-grey); margin-right: auto; }

/* --- Research briefs ---------------------------------------------------- */
.brief { max-width: 720px; }
.brief h1 { font-size: var(--step-3); }
.brief-sub { margin-top: 0.9rem; color: var(--rai-grey); font-size: 0.92rem; }
.brief h2 { font-size: 1.3rem; margin-top: 3rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink); }
.brief h3 { font-size: 1.06rem; margin-top: 2.2rem; color: var(--ink); }
.brief p { margin-top: 1rem; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; }
.brief h2 + p, .brief h3 + p { margin-top: 0.8rem; }
.brief-list { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.brief-list li {
  padding: 0.95rem 1.15rem; border-left: 3px solid var(--rai-blue);
  background: var(--paper-tint); border-radius: 0 9px 9px 0;
  font-size: 0.97rem; line-height: 1.65; color: var(--ink-soft);
}
.brief-note { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: 0.86rem !important; color: var(--rai-grey) !important; }

.fnref { text-decoration: none; font-weight: 600; padding-inline: 1px; }
.fnref sup { font-size: 0.68em; }
.fnref:target, .fnref:hover { text-decoration: underline; }
.sources { margin-top: 1.2rem; padding-left: 1.4rem; display: grid; gap: 0.7rem; font-size: 0.88rem; color: var(--ink-soft); }
.sources li { line-height: 1.55; }
.sources li:target { background: var(--paper-tint); border-radius: 6px; padding: 0.3rem 0.5rem; margin-inline: -0.5rem; }
.sources a { word-break: break-word; }
.fnback { text-decoration: none; color: var(--rai-grey); margin-left: 0.2rem; }

.brief-nav { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.9rem; font-weight: 600; }
.brief-nav a { text-decoration: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.chip { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.22rem 0.6rem; border-radius: 999px; background: var(--paper-tint); border: 1px solid var(--rule-strong); color: var(--ink-soft); }

/* --- Archive search and month grouping --------------------------------- */
.searchbar { margin-top: 1.5rem; }
.searchbar label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 0.45rem; }
.searchbar input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 0.8rem 1rem; border: 1px solid var(--field-border); border-radius: 10px; background: var(--paper);
}
.searchbar input:focus-visible { border-color: var(--rai-blue); }
.search-count { margin-top: 0.6rem; font-size: 0.85rem; color: var(--rai-grey); min-height: 1.2em; }
.results mark { background: var(--orange-100); color: var(--ink); padding: 0 2px; border-radius: 2px; }
.result-meta { font-size: 0.8rem; color: var(--rai-grey); display: flex; align-items: center; gap: 0.5rem; }
.month { margin-top: 2rem; padding-block: 0; }   /* not the tall padding of page sections */
.month > h2 {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rai-grey); padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.5rem;
}

/* --- Passkeys (signin.html, account.html) ------------------------------- */
.passkey-block { margin-top: 1.75rem; }
.passkey-block .btn { width: 100%; text-align: center; }
.passkey-status { margin-top: 0.75rem; font-size: 0.88rem; color: var(--ink-soft); min-height: 1.3em; }
.passkey-status:empty { min-height: 0; margin: 0; }
.passkey-or { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.5rem; font-size: 0.82rem; color: var(--rai-grey); }
.passkey-or::before, .passkey-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.passkey-block + form .field:first-child { margin-top: 1rem; }

/* The first-sign-in welcome panel on account.html. Deliberately sets no
   display property: it starts out `hidden`, and [hidden] { display: none
   !important } below must win. An author display rule here, even without
   !important, is the trap that nearly shipped an undismissable modal on this
   same page. */
.welcome {
  padding: 1.5rem 1.6rem 1.4rem;
  background: var(--paper-tint);
  border: 1px solid #c9d6f5; border-radius: 14px;
  margin-bottom: 0.5rem;
}
.welcome > h2 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.welcome > p { color: var(--ink-soft); max-width: 60ch; margin-bottom: 1.1rem; }
.welcome-tour {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.1rem; margin: 0 0 1.3rem;
}
.welcome-tour dt { font-weight: 600; }
.welcome-tour dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 30rem) {
  /* Two columns stop fitting: the label sits above its line, as the resources
     facts lists do at this width. */
  .welcome-tour { grid-template-columns: 1fr; gap: 0.1rem; }
  .welcome-tour dd { margin-bottom: 0.55rem; }
}

.account-section { margin-top: 2.75rem; }
.account-section h2 { font-size: var(--step-1); margin-bottom: 0.7rem; }
.account-section > p { color: var(--ink-soft); max-width: 60ch; }
.account-section .auth-note { margin-top: 1.5rem; }
.passkey-list { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.passkey, .passkey-empty { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.passkey b { display: block; font-weight: 600; }
.passkey span { font-size: 0.85rem; color: var(--rai-grey); }
.passkey-empty { color: var(--ink-soft); font-size: 0.93rem; }
.passkey-add { margin-top: 0.5rem; }
.passkey-add .btn { margin-top: 1rem; }

/* The hidden attribute must win over display rules such as .call { display: flex }. */
[hidden] { display: none !important; }

/* --- Resources (built by build_resources.py) ----------------------------
   Tiles in a grid, under theme headings. These pages are scanned rather than
   read top to bottom, so they use the full width, and a row of theme tiles at
   the top shows the whole page at a glance. */
.res-page { padding-block: 0 5rem; }
.res-head { padding-top: 2.25rem; }
.res-head h1 { font-size: var(--step-3); }
.res-head .lead { margin-top: 1rem; max-width: 72ch; }

/* Section tiles on the hub */
.res-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 1rem; margin-top: 2.25rem; }
.res-sec { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.35rem 1.35rem 1.2rem; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.res-sec:hover, .res-sec:focus-visible { border-color: var(--rai-blue); box-shadow: 0 8px 22px rgba(0, 19, 71, 0.08); transform: translateY(-2px); }
.res-sec:hover h2 { color: var(--rai-blue); }
.res-sec-ico { width: 2.75rem; height: 2.75rem; border-radius: 14px; background: var(--ribbon-light); color: #fff; display: grid; place-items: center; }
.res-sec-ico .ico { width: 1.4rem; height: 1.4rem; }
.res-sec h2 { font-size: 1.15rem; margin-top: 0.35rem; }
.res-sec p { font-size: 0.88rem; color: var(--ink-soft); }
.res-sec .res-sec-themes { font-size: 0.8rem; color: var(--rai-grey); flex: 1; }
.res-count { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rai-grey); }

/* Theme tiles: each jumps to its theme further down the page */
.theme-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 0.6rem; margin-top: 2rem; }
.theme-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 600; line-height: 1.25; transition: border-color .15s, background .15s; }
.theme-link:hover, .theme-link:focus-visible { border-color: var(--rai-blue); background: var(--blue-50); }
.theme-link .n { white-space: nowrap; margin-left: auto; padding-left: 0.4rem; font-size: 0.75rem; font-weight: 700; color: var(--rai-grey); }
.theme-ico { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--blue-100); color: var(--blue-deep); display: inline-grid; place-items: center; }
.theme-ico .ico { width: 1.15rem; height: 1.15rem; }
@media (max-width: 560px) {
  .theme-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .theme-link { padding: 0.55rem 0.6rem; gap: 0.5rem; font-size: 0.8rem; min-width: 0; }
  .theme-ico { width: 1.75rem; height: 1.75rem; }
  .theme-ico .ico { width: 1rem; height: 1rem; }
}
@media (max-width: 400px) { .theme-bar { grid-template-columns: minmax(0, 1fr); } }

/* Theme headings */
/* padding-block: 0 undoes the generous padding every <section> gets on the public pages. */
.res-group { margin-top: 3.25rem; padding-block: 0; scroll-margin-top: 7rem; }
.res-group > h2 { display: flex; align-items: center; gap: 0.75rem; font-size: var(--step-1); padding-bottom: 0.75rem; border-bottom: 2px solid var(--ink); }
.res-group > h2 .n { margin-left: auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rai-grey); white-space: nowrap; }
.res-group-note { margin-top: 0.8rem; color: var(--ink-soft); font-size: 0.94rem; }

/* The tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 1rem; margin-top: 1.25rem; }
.tiles.compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.tile { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; padding: 1rem 1.1rem 0.85rem; background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--blue-200); border-radius: 14px; scroll-margin-top: 7rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tile:hover { border-color: var(--blue-200); box-shadow: 0 8px 22px rgba(0, 19, 71, 0.08); transform: translateY(-2px); }
.tile.start { border-top-color: var(--rai-orange); }
.tile:target { border-color: var(--rai-blue); box-shadow: 0 0 0 3px var(--blue-200); }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tile-kind { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rai-grey); }
.tile-cost { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.18rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.tile-cost.free { background: var(--blue-100); color: var(--blue-deep); }
.tile-cost.mixed { background: var(--blue-50); color: var(--blue-deep); border: 1px solid var(--blue-200); }
.tile-cost.paid { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--rule-strong); }
.tile-cost.funded { background: var(--orange-100); color: var(--orange-deep); }
.tile h3 { font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.tile h3 a { color: var(--ink); text-decoration: none; }
/* The arrow says the link leaves this site. */
.tile h3 a::after { content: "\2197"; font-size: 0.8em; margin-left: 0.25rem; color: var(--rai-grey); }
.tile h3 a:hover, .tile h3 a:focus-visible { color: var(--rai-blue); text-decoration: underline; text-underline-offset: 3px; }
.tile .res-by { font-size: 0.8rem; color: var(--rai-grey); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tile-when { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--blue-deep); }
.tile-when .ico { width: 0.95rem; height: 0.95rem; flex: none; }
.tile-where { font-weight: 400; color: var(--ink-soft); }
.tile .res-sum { font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.tile:has(.tile-more[open]) .res-sum { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.tile-note { font-size: 0.8rem; color: var(--orange-deep); }
.tile-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.35rem; }
.tile-badges .chip { font-size: 0.68rem; padding: 0.16rem 0.5rem; }
.tile-badges .countdown { margin-top: 0; font-size: 0.68rem; }
.badge-start { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.5rem; border-radius: 4px; background: var(--rai-orange); color: var(--on-orange); }
.badge-role { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.18rem 0.5rem; border-radius: 4px; background: var(--blue-100); color: var(--blue-deep); border: 1px solid var(--blue-200); }
.res-flag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.5rem; border-radius: 4px; background: var(--paper-tint); color: var(--ink-soft); border: 1px solid var(--rule-strong); }
.tile-in { font-size: 0.8rem; font-weight: 600; }
.tile-more { border-top: 1px solid var(--rule); padding-top: 0.5rem; margin-top: 0.15rem; }
.tile-more summary { cursor: pointer; list-style: none; font-size: 0.78rem; font-weight: 700; color: var(--blue-deep); }
.tile-more summary::-webkit-details-marker { display: none; }
.tile-more summary::after { content: "+"; margin-left: 0.35rem; }
.tile-more[open] summary::after { content: "\2212"; }
.res-facts { margin: 0.6rem 0 0; display: grid; grid-template-columns: 64px 1fr; gap: 0.3rem 0.75rem; font-size: 0.82rem; }
.res-facts dt { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rai-grey); padding-top: 0.15rem; }
.res-facts dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.res-links { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; }
.res-checked { margin-top: 0.6rem; font-size: 0.74rem; color: var(--rai-grey); }

/* Deadlines on the hub, as tiles */
.calls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0.85rem; margin-top: 1.25rem; }
.calls .call { margin-bottom: 0; }
.res-group .call h3 a { color: inherit; text-decoration: none; }
.res-group .call h3 a:hover { color: var(--rai-blue); text-decoration: underline; }
.countdown.past { background: var(--paper-tint); color: var(--rai-grey); }

/* Filter */
.res-tags { margin-top: 0.8rem; }
.res-tags button { font: inherit; font-size: 0.76rem; cursor: pointer; }
.res-tags button[aria-pressed="true"] { background: var(--rai-blue); border-color: var(--rai-blue); color: #fff; }
.res-empty { margin-top: 1.5rem; color: var(--rai-grey); }
.res-note { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.86rem; color: var(--rai-grey); }
@media (prefers-reduced-motion: reduce) { .tile:hover, .res-sec:hover { transform: none; } }
/* ==========================================================================
   LANDING: origin, track record, evidence, Champions, publications
   ========================================================================== */
.origin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .origin-grid { grid-template-columns: minmax(0, 1fr); } }
.principles { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.2rem; background: var(--paper-tint); }
.principles h3 { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 1rem; }
.principles ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.7rem; font-size: 0.95rem; color: var(--ink-soft); }
.principles li::marker { color: var(--rai-blue); font-weight: 700; }

.timeline { list-style: none; margin: 3rem 0 0; padding: 0; border-left: 2px solid var(--blue-200); }
.timeline li { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.25rem; padding: 0 0 2rem 1.75rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 0.3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--rai-blue); box-shadow: 0 0 0 4px var(--paper-tint); }
.tl-when { font-weight: 700; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-deep); padding-top: 0.15rem; }
.timeline h3 { font-size: 1.08rem; margin-bottom: 0.35rem; }
.timeline p { font-size: 0.95rem; color: var(--ink-soft); max-width: 64ch; }
@media (max-width: 600px) { .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; } }

.findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 3rem; }
@media (max-width: 900px) { .findings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .findings { grid-template-columns: minmax(0, 1fr); } }
.finding { background: var(--paper); margin: 0; padding: 1.6rem 1.5rem; }
.finding dt { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; color: var(--rai-blue); line-height: 1; }
.finding dd { margin: 0.7rem 0 0; font-size: 0.93rem; color: var(--ink-soft); }
.source-note { margin-top: 1rem; font-size: 0.82rem; color: var(--rai-grey); max-width: 80ch; }
.steps-head { margin-top: 4rem; max-width: 62ch; }
.steps-head h3 { font-size: var(--step-2); }
.steps-head p { margin-top: 0.8rem; color: var(--ink-soft); font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; }
.steps { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.25rem; }
.steps li { counter-increment: step; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; background: var(--paper); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--rai-blue); margin-bottom: 0.6rem; }
.steps h3 { font-size: 1.08rem; margin-bottom: 0.4rem; }
.steps p { font-size: 0.93rem; color: var(--ink-soft); }

.champions { background: var(--paper-warm); border-block: 1px solid var(--rule); }
.ch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2rem; margin-top: 2.5rem; padding-block: 2rem; border-block: 1px solid var(--orange-200); }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 2.5rem; margin-top: 2.5rem; }
.ch-grid h3 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 0.8rem; border-bottom: 2px solid var(--rai-orange); margin-bottom: 0.4rem; }
.ch-grid ul { list-style: none; margin: 0; padding: 0; }
.ch-grid li { padding: 0.75rem 0; border-bottom: 1px solid var(--orange-200); font-size: 0.95rem; color: var(--ink-soft); }

.pubs { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.pubs li { padding: 1.3rem 0; border-bottom: 1px solid var(--rule); }
.pubs h3 { font-size: 1.05rem; line-height: 1.35; }
.pubs h3 a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pubs p { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.35rem; }
.pubs-coming { margin-top: 2.5rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rai-grey); }
.coming { margin: 1rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.6rem; color: var(--ink-soft); font-size: 0.95rem; max-width: 80ch; }
.ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; }
@media (max-width: 760px) { .ch-grid { grid-template-columns: minmax(0, 1fr); } }
.ch-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1.5rem 2.5rem; margin-top: 2.5rem; color: var(--ink-soft); font-size: 0.95rem; max-width: 110ch; }

/* --- Our work: six steps in three beats --------------------------------- */
.beats { display: grid; gap: 3rem; margin-top: 3rem; }
.beat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; padding-bottom: 0.8rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--ink); }
.beat-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rai-blue); }
.beat-head h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.beat .card h4 { font-size: 1.05rem; letter-spacing: -0.02em; }
.beat .card .eg { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-size: 0.86rem; color: var(--rai-grey); }
.beat .card .eg b { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.25rem; }
.steps-note { margin-top: 2rem; padding: 1.1rem 1.25rem; border-left: 3px solid var(--rai-blue); background: var(--paper-tint); font-size: 0.96rem; color: var(--ink-soft); }

/* A statistic can lead with an icon instead of a figure. Sized in em so it
   matches the height of the numerals beside it and the captions stay aligned. */
.stat-icon { color: var(--rai-blue); line-height: 1; display: block; }
.stat-icon svg { display: block; width: 1em; height: 1em; }
.aud .aud-role { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 0.5rem; }

/* --- Members' home page (build_members.py) ------------------------------ */
.lead-post { padding: 1.4rem 1.5rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); }
.lead-post time, .post-link time { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rai-blue); }
.lead-post h3 { font-size: 1.2rem; margin: 0.45rem 0 0.4rem; }
.lead-post h3 a, .call h3 a, .event h3 a, .update h3 a { color: inherit; text-decoration: none; }
.lead-post h3 a:hover, .call h3 a:hover, .event h3 a:hover, .update h3 a:hover { color: var(--rai-blue); text-decoration: underline; }
.lead-post p { color: var(--ink-soft); font-size: 0.95rem; }
.post-link { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; padding: 0.9rem 0.2rem; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.post-link:hover span { color: var(--rai-blue); text-decoration: underline; }
.res-sec h3 { font-size: 1rem; }

/* --- Our work: the six steps as one card you click through ---------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stepper { margin-top: 2.5rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 2.25rem); max-width: 860px; }
.stepper-tabs { display: none; }
.stepper.is-live .stepper-tabs { display: flex; gap: 0.45rem; padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
.stepper-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0.2rem 0 0; background: none; border: 0; color: var(--ink-soft); font: inherit; cursor: pointer; border-radius: 10px; }
.stepper-num { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; max-width: 100%; border-radius: 50%; border: 1px solid var(--field-border); background: var(--paper); font: 700 0.95rem var(--sans); }
.stepper-word { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.stepper-tab.beat-start { margin-left: clamp(0.3rem, 2vw, 0.9rem); }
.stepper-tab.done .stepper-num { background: var(--blue-100); border-color: var(--blue-100); color: var(--blue-shade); }
.stepper-tab[aria-selected="true"] .stepper-num { background: var(--rai-blue); border-color: var(--rai-blue); color: #fff; }
.stepper-tab[aria-selected="true"] .stepper-word { color: var(--blue-shade); }
.stepper-tab:hover .stepper-word { color: var(--ink); }
.stepper-tab:focus-visible { outline: 3px solid var(--blue-shade); outline-offset: 2px; }
@media (max-width: 600px) {
  .stepper-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stepper-num { width: auto; aspect-ratio: 1; height: auto; min-width: 2.2rem; }
}
.stepper-panel + .stepper-panel { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.stepper.is-live .stepper-panel + .stepper-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.stepper-count { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.stepper-panel h3 { margin-top: 0.7rem; font-size: var(--step-2); letter-spacing: -0.02em; }
.stepper-text { margin-top: 0.8rem; font-family: var(--serif); font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); max-width: 64ch; }
.report-link { display: block; max-width: 62ch; margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--rule); border-left: 4px solid var(--rai-blue); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
.report-link:hover .report-title { text-decoration-thickness: 2px; }
.report-link:focus-visible { outline: 3px solid var(--blue-shade); outline-offset: 3px; }
.report-kicker { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rai-blue); }
.report-title { display: block; margin-top: 0.3rem; font-weight: 600; color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.report-detail { display: block; margin-top: 0.3rem; font-size: 0.86rem; color: var(--ink-soft); }
.stepper-nav { display: none; }
.stepper.is-live .stepper-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.75rem; }
.stepper-nav .btn:disabled { opacity: 0.45; cursor: default; }

/* --- Reports and papers: who did what ------------------------------------- */
.pubs-key { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); }
.pubs-key li { display: inline-flex; align-items: center; gap: 0.45rem; }
.pubs-key li::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--by-mark); }
.by-wg { --by-mark: var(--rai-blue); --by-tint: var(--blue-100); --by-ink: var(--blue-shade); }
.by-champions { --by-mark: var(--rai-orange); --by-tint: var(--orange-100); --by-ink: var(--orange-deep); }
.by-both { --by-mark: linear-gradient(90deg, var(--rai-blue) 50%, var(--rai-orange) 50%); --by-tint: var(--blue-100); --by-ink: var(--blue-shade); }
.pubs li[class^="by-"] { position: relative; padding-left: 1.1rem; }
.pubs li[class^="by-"]::before, .coming-by li[class^="by-"]::before { content: ""; position: absolute; left: 0; top: 1.3rem; bottom: 1.3rem; width: 4px; border-radius: 2px; background: var(--by-mark); }
.by-both::before { background: linear-gradient(180deg, var(--rai-blue) 50%, var(--rai-orange) 50%) !important; }
.by-tag { display: inline-block; margin-bottom: 0.45rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--by-tint); color: var(--by-ink); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.coming-by { list-style: none; padding-left: 0; }
.coming-by li { position: relative; padding: 0.2rem 0 0.2rem 1.1rem; }
.coming-by li::before { top: 0.2rem !important; bottom: 0.2rem !important; }
.coming-by .by-tag { margin: 0 0.5rem 0.2rem 0; vertical-align: 1px; }

/* --- Resources: scores, colour key and how we review ---------------------- */
.tile-score { font-size: 0.9rem; font-weight: 800; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.tile-score small, .k-score small { font-size: 0.68rem; font-weight: 600; color: var(--ink-soft); }
.tile-score:hover { color: var(--rai-blue); }
.res-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin-top: 1.25rem; font-size: 0.82rem; color: var(--ink-soft); }
.res-key .k { display: inline-block; width: 1.6rem; height: 4px; border-radius: 2px; margin-left: 0.6rem; }
.res-key .k:first-child { margin-left: 0; }
.res-key .k-start { background: var(--rai-orange); }
.res-key .k-other { background: var(--blue-200); }
.res-key .k-score { margin-left: 0.8rem; font-weight: 800; color: var(--ink); }
.res-key a { font-weight: 600; }
.res-score { margin: 0.6rem 0 0.4rem; padding: 0.7rem 0.8rem; background: var(--paper-tint); border-radius: 10px; font-size: 0.82rem; }
.res-score p { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.res-score a { font-weight: 600; }
.res-score ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.res-score li { display: flex; justify-content: space-between; align-items: center; color: var(--ink-soft); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 14px; height: 6px; border-radius: 3px; background: var(--rule-strong); }
.pips i.on { background: var(--rai-blue); }
.res-method .method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.res-method article { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 1.25rem 1.35rem; font-size: 0.92rem; color: var(--ink-soft); }
.res-method article h3 { font-size: 1.02rem; color: var(--ink); margin-bottom: 0.5rem; }
.res-method article p + p { margin-top: 0.6rem; }
.method-list { margin: 0.6rem 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.method-list b, .res-method p b { color: var(--ink); }
.method-bands { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.method-bands span { padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--blue-100); color: var(--blue-shade); font-size: 0.8rem; }
.method-bands span:first-child { background: var(--orange-100); color: var(--orange-deep); }
.tile-top { justify-content: flex-start; }
.tile-top > :nth-child(2) { margin-left: auto; }
.res-method .method-wide { grid-template-columns: 1fr; }
.method-refs { margin: 1.25rem 0 0; padding-left: 1.3rem; font-size: 0.8rem; color: var(--ink-soft); display: grid; gap: 0.3rem; }
.method-refs a { word-break: break-word; }

/* Back link, top right of a sub-page */
.res-head, .doc.brief { position: relative; }
.back-link { position: absolute; right: 0; top: 2.6rem; font-size: 0.92rem; font-weight: 600; color: var(--rai-blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.doc.brief > .back-link { top: 3.4rem; }
.back-link:hover { color: var(--blue-shade); }
.back-link + h1 { padding-right: 5.5rem; }

/* --- Members' bar: drop-down on phones and narrow windows ------------------ */
.members-bar { position: relative; }
.nav-toggle { display: none; align-items: center; gap: 0.4rem; margin-right: auto; padding: 0.45rem 0.1rem; background: none; border: 0; color: var(--blue-on-dark); font: 600 0.95rem var(--sans); cursor: pointer; }
.nav-toggle svg { transition: transform .15s; }
.nav-toggle:focus-visible { outline: 3px solid var(--blue-on-dark); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 760px) {
  .members-bar.js-drop .nav-toggle:not([hidden]) { display: inline-flex; }
  .members-bar.js-drop nav { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; flex-direction: column; gap: 0; margin: 0; padding: 0.25rem var(--gutter) 0.9rem; background: var(--ink); border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 14px 28px rgba(0, 19, 71, 0.25); overflow: visible; }
  .members-bar.js-drop.open nav { display: flex; }
  .members-bar.js-drop.open .nav-toggle svg { transform: rotate(180deg); }
  .members-bar.js-drop nav a { padding: 0.8rem 0; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .members-bar.js-drop nav a:last-child { border-bottom: 0; }
  .members-bar.js-drop nav a[aria-current="page"] { border-bottom-color: rgba(255,255,255,0.08); box-shadow: inset 3px 0 0 var(--blue-on-dark); padding-left: 0.8rem; }
  .members-bar.js-drop nav .show-narrow { display: block; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle svg { transition: none; } }

/* --- Header menu (landing page): below 1,200px the links fold behind Menu -- */
.menu-toggle { display: none; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 0.9rem var(--sans); cursor: pointer; }
.menu-toggle:focus-visible { outline: 3px solid var(--blue-shade); outline-offset: 2px; }
.nav .nav-extra, .drop-only { display: none !important; }
@media (max-width: 1200px) {
  .masthead.js-menu .menu-toggle:not([hidden]) { display: inline-flex; }
  .masthead.js-menu.open .nav { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 0.25rem var(--gutter) 1rem; background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 16px 30px rgba(0, 19, 71, 0.12); }
  .masthead.js-menu.open .nav a { padding: 0.85rem 0; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--rule); }
  .masthead.js-menu.open .nav a:last-child { border-bottom: 0; }
  .masthead.js-menu.open .menu-toggle { background: var(--blue-100); border-color: var(--blue-100); color: var(--blue-shade); }
}
@media (max-width: 560px) {
  .masthead.js-menu.open .nav .nav-extra { display: block !important; }
  .masthead.js-menu .masthead-link { display: none; }
  .masthead.js-menu .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .masthead.js-menu .menu-toggle { padding: 0.55rem; }
}
/* Members' pages: "Public site" stays in the header down to 761px, then moves
   into the members' drop-down. */
@media (max-width: 1200px) and (min-width: 761px) { body:has(.members-bar) .masthead .nav { display: flex; } }
@media (max-width: 760px) { .members-bar.js-drop nav .drop-only { display: block !important; } }
@media (max-width: 1200px) and (min-width: 561px) { .masthead .nav.nav-one { display: flex; } }
.stepper-nav .btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
@media (max-width: 400px) { .stepper-nav .btn { padding-inline: 1rem; font-size: 0.88rem; } }

/* WCAG 2.2 target size (2.5.8): links set on their own line get at least
   24px of hit area. Vertical padding on an inline link widens the hit area
   without moving the text. */
main h2 > a, main h3 > a, .module-head a, .tile-score, .event h3 a, .call h3 a, footer li a, .colophon a { padding-block: 4px; }
.tile-more summary { padding-block: 4px; }
.res-links a { display: inline-block; padding-block: 2px; }

/* The privacy link sits beside the consent checkbox rather than inside its
   label, so the checkbox's accessible name is the consent text alone. */
.consent-group { border: 0; padding: 0; margin: 0; }
.choice-aside { margin-top: 0.5rem; padding-left: 0.9rem; font-size: 0.86rem; }
.form-note { margin-bottom: 0.4rem; font-size: 0.9rem; color: var(--ink-soft); }

/* --- Hero partner card: NHS AI Ambassadors Network ------------------------- */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative; z-index: 1; }
@media (max-width: 980px) { .hero-split { grid-template-columns: minmax(0, 1fr); } }
.partner-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.9rem); box-shadow: 0 18px 40px rgba(0, 19, 71, 0.08); }
.partner-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rai-blue); }
.partner-name { margin-top: 0.35rem; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); }
.partner-svg { display: block; width: 100%; height: auto; margin: 1rem 0 0.75rem; }
.partner-text { font-size: 0.92rem; color: var(--ink-soft); }
.partner-list { margin: 0.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 0.88rem; color: var(--ink); }
.partner-list li { position: relative; padding-left: 1.2rem; }
.partner-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rai-orange); }
.partner-list li:first-child::before { background: var(--rai-blue); }
.partner-more { display: inline-block; margin-top: 1rem; padding-block: 4px; font-size: 0.88rem; font-weight: 600; color: var(--blue-deep); }

/* --- Working group page: principles, membership, partnership -------------- */
.who-principles { counter-reset: pr; list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1rem; }
.who-principles li { counter-increment: pr; position: relative; padding: 1.1rem 1.2rem 1.1rem 3.4rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); font-weight: 600; color: var(--ink); }
.who-principles li::before { content: counter(pr); position: absolute; left: 1.1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--blue-100); color: var(--blue-shade); font-size: 0.85rem; font-weight: 800; }
.principles-src { margin-top: 1rem; font-size: 0.85rem; color: var(--ink-soft); }
.member-grid, .partnership-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 0.5rem; }
@media (max-width: 860px) { .member-grid, .partnership-grid { grid-template-columns: minmax(0, 1fr); } }
.prose-p { margin-top: 1rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 62ch; }
.rai-note { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); }
.rai-note h3 { font-size: 1rem; }
.rai-note p { margin-top: 0.35rem; font-size: 0.92rem; color: var(--ink-soft); }
.rai-note a { display: inline-block; margin-top: 0.5rem; padding-block: 4px; font-weight: 600; }
.partnership-date { margin-top: 0.75rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rai-grey); }
.pquote { margin: 1rem 0 0; padding: 1.1rem 1.25rem; border-left: 4px solid var(--rai-blue); background: var(--paper-tint); border-radius: 0 12px 12px 0; }
.pquote p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.pquote blockquote { margin: 0; }
.pquote figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--ink-soft); }
.pquote + .pquote { border-left-color: var(--rai-orange); }

/* --- Team photos ----------------------------------------------------------- */
.person-photo { display: block; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--rule); background: var(--blue-100); }
.person-initials { display: grid; place-items: center; color: var(--blue-shade); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.02em; }
.nav .nav-rai { color: var(--blue-deep); font-weight: 600; }
.masthead .nav { gap: 1.25rem; }


/* --- Working group page: 2025 stakeholder meeting -------------------------- */
.meeting-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.5rem; align-items: start; }
@media (max-width: 860px) { .meeting-grid { grid-template-columns: minmax(0, 1fr); } }
.video-card { display: block; color: inherit; text-decoration: none; }
.video-poster { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--ink); box-shadow: 0 14px 30px rgba(0, 19, 71, 0.12); }
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.video-play { position: absolute; left: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--rai-blue); box-shadow: 0 6px 18px rgba(0, 19, 71, 0.35); }
.video-play::after { content: ""; position: absolute; left: 19px; top: 15px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; }
.video-caption { display: block; margin-top: 0.7rem; font-weight: 600; color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.video-meta { display: block; font-weight: 400; font-size: 0.84rem; color: var(--ink-soft); text-decoration: none; margin-top: 0.15rem; }
.video-card:hover .video-poster img { transform: scale(1.03); }
.video-card:focus-visible { outline: 3px solid var(--rai-blue); outline-offset: 4px; border-radius: 14px; }
.ch-video { max-width: 560px; margin-top: 2rem; }
.award-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 800px) { .award-grid { grid-template-columns: 1fr; } }
.video-note { margin-top: 0.6rem; font-size: 0.84rem; color: var(--ink-soft); }
.meeting-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; margin-top: 2rem; }
.meeting-areas article { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 1.1rem 1.2rem; }
.meeting-areas h3 { font-size: 1rem; }
.meeting-areas p { margin-top: 0.4rem; font-size: 0.9rem; color: var(--ink-soft); }

/* --- Members' directory (directory.html, account.html) ---------------------- */
.topics-field { border: 0; padding: 0; margin: 1.4rem 0 0; min-width: 0; }
.topics-field .hint { display: block; margin-top: 0.3rem; }
.topic-choices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 0.4rem; }
.topic-choices .choice { padding: 0.5rem 0.65rem; gap: 0.5rem; align-items: center; font-size: 0.85rem; line-height: 1.3; }
.topic-choices .choice b { font-weight: 600; }
.dir-head { padding-top: clamp(1.5rem, 4vw, 2.5rem); max-width: 62ch; }
.dir-head .lead { margin-top: 0.75rem; }
.dir-me { margin-top: 0.9rem; font-size: 0.93rem; color: var(--ink-soft); }
.dir-filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.9rem; margin-top: 1.75rem; }
@media (max-width: 760px) { .dir-filters { grid-template-columns: 1fr; } }
.dir-filters .field { margin: 0; }
.dir-count { margin-top: 1.25rem; font-size: 0.9rem; color: var(--ink-soft); }
.dir-list { list-style: none; padding: 0; margin: 0.9rem 0 3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.dir-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.15rem 1.25rem; border: 1px solid var(--rule); border-radius: 14px; background: #fff; }
.dir-card h2 { font-size: 1.08rem; letter-spacing: -0.01em; }
.dir-role { font-size: 0.9rem; color: var(--ink); }
.dir-place { font-size: 0.84rem; color: var(--ink-soft); }
.dir-topics { list-style: none; padding: 0; margin: 0.35rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dir-topics li { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--blue-100); color: var(--blue-shade); font-size: 0.75rem; font-weight: 600; }
.dir-email { margin-top: auto; padding-top: 0.6rem; font-size: 0.88rem; font-weight: 600; color: var(--blue-deep); overflow-wrap: anywhere; }

/* Planned admin sections that do not exist yet: shown, but not as links that
   go nowhere. */
.members-bar .nav-todo {
  color: var(--rai-grey); font-size: 0.9rem; font-weight: 500;
  padding-block: 0.35rem; border-bottom: 2px solid transparent;
  cursor: default; opacity: 0.65;
}

/* --- Discussion (discussion.html, thread.html) ------------------------------ */
.forum-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.forum-bar .field { margin: 0; min-width: min(100%, 280px); }
.forum-new { margin-top: 1.25rem; }
.forum-new .field { margin-top: 0.9rem; }
.forum-msg { margin-top: 0.6rem; font-size: 0.9rem; color: var(--ink-soft); }
.forum-msg:empty { display: none; }
.forum-list { list-style: none; padding: 0; margin: 0.6rem 0 3rem; border-top: 1px solid var(--rule); }
.forum-row { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.forum-row h2 { font-size: 1.1rem; letter-spacing: -0.01em; }
.forum-row h2 a { color: var(--ink); text-decoration: none; }
.forum-row h2 a:hover, .forum-row h2 a:focus-visible { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.forum-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin-top: 0.45rem; font-size: 0.84rem; color: var(--ink-soft); }
.forum-chip { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--blue-100); color: var(--blue-shade); font-size: 0.75rem; font-weight: 600; }
.forum-class { margin-top: 0.5rem; }
.forum-answered { color: #1b6b3a; font-weight: 600; }
.forum-flag { color: #a03a12; font-weight: 600; font-size: 0.84rem; }
.forum-back { padding-top: clamp(1.25rem, 3vw, 2rem); font-size: 0.9rem; }
.forum-back a { color: var(--blue-deep); font-weight: 600; }
.post.is-hidden { opacity: 0.6; }
.post-body a { overflow-wrap: anywhere; }
.forum-list-short { margin-bottom: 0; }
.forum-row h3 { font-size: 1rem; letter-spacing: -0.01em; }
.forum-row h3 a { color: var(--ink); text-decoration: none; }
.forum-row h3 a:hover, .forum-row h3 a:focus-visible { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.forum-follow-note { font-size: 0.88rem; color: var(--ink-soft); }
.forum-follow { margin-top: 0.75rem; }
.forum-edit { margin-top: 0; }
.forum-edit .field { margin: 0 0 0.75rem; }
.forum-edit .field input { width: 100%; }

/* ==========================================================================
   MEMBERS' HOME — typography after the design critique (6 Oct 2026)

   The greeting used to be the h1 at --step-3, so the largest thing on the
   page was the one line that told a Champion nothing. The summary is the h1
   now; the greeting is a small line above it.

   The heading scale had also flattened: a blog post title rendered at 19.2px
   against an 18.88px section heading, so the section label did not read as a
   level above its own contents. Two sizes now, with a clear gap between them.
   ========================================================================== */

.page-head .greeting {
  font-size: 0.95rem; font-weight: 600; color: var(--rai-grey);
  letter-spacing: 0.01em; margin-bottom: 0.3rem;
}
.page-head h1 { font-size: var(--step-2); max-width: 30ch; }

/* One size for section headings, one for the items inside them. */
.module-head h2 { font-size: 1.3rem; }
#blog .post-title, #blog h3, .update h3, .call h3, .res-sec h3, .event h3 { font-size: 1rem; }

/* Sidebar labels sat at 0.76rem against 1.3rem in the main column, two
   systems side by side. Closer, still clearly a quieter level. */
.panel h2 { font-size: 0.82rem; }

/* WCAG 2.2 target size: these sidebar and section links were 15px tall. */
.module-head a,
.panel a,
.panel .update h3 a,
main a.more { display: inline-block; min-height: 24px; padding-block: 5px; }

/* ==========================================================================
   MEMBERS' HOME — summary cards
   One card per area, the top two in each, and a way to the rest. The page
   answers "anything for me?" without asking anyone to read it.
   ========================================================================== */

.sum-grid {
  display: grid; gap: 1.1rem; margin-top: 1.75rem; padding-bottom: 4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
}
.sum-card {
  display: flex; flex-direction: column;
  padding: 1.4rem 1.5rem 1.2rem;
  background: var(--paper-tint);
  border: 1px solid #c9d6f5; border-radius: 14px;
}
.sum-card > h2 {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue-deep); margin-bottom: 0.9rem;
}
.sum-row {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem;
  align-items: baseline; padding: 0.7rem 0; min-height: 24px;
  border-top: 1px solid #d9e3f8; text-decoration: none; color: inherit;
}
.sum-row:first-of-type { border-top: 0; padding-top: 0; }
.sum-when {
  grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--rai-blue);
}
.sum-title { font-size: 0.97rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.sum-row:hover .sum-title { color: var(--blue-deep); text-decoration: underline; }
/* 0.78rem is normal-size text, so this needs 4.5:1. --rai-grey measured
   4.25:1 on the card tint and failed. */
.sum-meta { font-size: 0.78rem; color: #566069; white-space: nowrap; }
.sum-empty { font-size: 0.92rem; color: var(--ink-soft); padding-block: 0.2rem 0.6rem; }
.sum-more {
  align-self: flex-start; margin-top: auto; padding: 0.5rem 1rem;
  border-radius: 999px; background: var(--paper); border: 1px solid #c9d6f5;
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  color: var(--blue-deep); min-height: 24px;
}
.sum-more::after { content: " →"; }
.sum-more:hover { background: var(--rai-blue); border-color: var(--rai-blue); color: #fff; }
.sum-card > .sum-row + .sum-more { margin-top: 1.1rem; }

/* Long titles clamp to two lines so cards in a row stay the same height.
   The text stays in the DOM, so a screen reader still reads the whole title,
   and the full thing is one click away on the page that owns it. */
.sum-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --- Working group reports (public/reports/, built by build-reports.py) ----- */
.report .eyebrow { margin-top: 0; }
.report > h1 { margin-top: 0.4rem; }
.report h2 { margin-top: 2.5rem; }
.report h3 { margin-top: 1.3rem; font-size: 1rem; color: var(--blue-deep); }
.report > p, .report > ul:not(.brief-list), .report > ol:not(.sources) { margin-top: 0.8rem; color: var(--ink-soft); line-height: 1.65; font-size: 1rem; }
.report > ol:not(.sources) { padding-left: 1.4rem; display: grid; gap: 0.35rem; }
.report-people { font-size: 0.95rem; }
.report > ul:not(.brief-list) { padding-left: 1.25rem; display: grid; gap: 0.45rem; }
.report-film { max-width: 560px; margin-top: 1rem; }
.report-cite { font-size: 0.88rem; padding: 0.9rem 1.1rem; background: var(--paper-tint); border-radius: 12px; overflow-wrap: anywhere; }

/* --- "Our work" panel on the working group page ---------------------------- */
.ourwork-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; margin-top: 2rem; }
.ourwork-card { position: relative; display: block; padding: 1.3rem 1.4rem 2.6rem; background: #fff; border: 1px solid var(--rule); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.ourwork-card h3 { font-size: 1.08rem; color: var(--ink); }
.ourwork-card p { margin-top: 0.45rem; font-size: 0.92rem; color: var(--ink-soft); }
.ourwork-more { position: absolute; left: 1.4rem; bottom: 1rem; color: var(--blue-deep); font-weight: 700; }
.ourwork-card:hover, .ourwork-card:focus-visible { border-color: var(--rai-blue); box-shadow: 0 10px 24px rgba(0, 19, 71, 0.08); }
.ourwork-card:hover h3 { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }

/* --- One gap between the header and the first text, on every page ---------- */
/* Each page type used to set its own (32 to 48px, and 95px on the home page,
   where the text was centred against the partner card). Change it here only. */
:root { --top-gap: clamp(2rem, 4vw, 3rem); }
.hero { padding-top: var(--top-gap); }
.hero-split { align-items: start; }
.doc, .form-wrap, .res-head, .dir-head, .forum-back, .queue-head, .page-head { padding-top: var(--top-gap); }
.page-head .greeting { margin-top: 0; }
.back-link, .doc.brief > .back-link { top: var(--top-gap); }

/* Seven cards in three columns left Events alone on the last row. Full width
   reads as a deliberate strip; one-of-three reads as a leftover. Its rows sit
   side by side in a real two-column grid, so nothing depends on widths
   summing to exactly the space available. */
.sum-card.wide { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .sum-card.wide {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem; align-content: start;
  }
  .sum-card.wide > h2, .sum-card.wide > .sum-more, .sum-card.wide > .sum-empty {
    grid-column: 1 / -1;
  }
  .sum-card.wide .sum-row { border-top: 0; padding-top: 0; }
  .sum-card.wide > .sum-more { margin-top: 1.1rem; }
}

/* Secondary action beside a card's main one. */
.sum-more-alt { background: transparent; border-color: transparent; color: var(--blue-deep); }
.sum-more-alt:hover { background: var(--paper); border-color: #c9d6f5; color: var(--blue-deep); }
@media (min-width: 700px) {
  .sum-card.wide > .sum-more { grid-column: 1; justify-self: start; }
  .sum-card.wide > .sum-more-alt { grid-column: 2; justify-self: start; margin-top: 1.1rem; }
}

/* --- Events list on the Our work page -------------------------------------- */
.event-list { list-style: none; padding: 0; margin: 1.75rem 0 0; border-top: 1px solid var(--rule); }
.event-list > li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.4rem 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 640px) { .event-list > li { grid-template-columns: minmax(0, 1fr); } }
.event-date { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-deep); padding-top: 0.2rem; }
.event-list h3 { font-size: 1.05rem; }
.event-place { margin-top: 0.3rem; font-size: 0.9rem; color: var(--ink-soft); }
.event-list a { display: inline-block; margin-top: 0.45rem; font-size: 0.9rem; font-weight: 600; color: var(--blue-deep); }

/* --- Resources section bar (build_resources.py): only inside Resources ------ */
.res-subbar { background: var(--paper-tint); border-bottom: 1px solid var(--rule); }
.res-subbar .container { display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.res-subbar .container::-webkit-scrollbar { display: none; }
.res-subbar a { flex: none; padding: 0.8rem 0 0.7rem; border-bottom: 2px solid transparent; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.res-subbar a:hover { color: var(--ink); }
.res-subbar a[aria-current="page"] { color: var(--blue-deep); font-weight: 600; border-bottom-color: var(--rai-blue); }
.res-subbar a:focus-visible { outline: 3px solid var(--blue-shade); outline-offset: 2px; }

/* --- Partners page (build_resources.py) ------------------------------------ */
.partner { margin-top: 1.75rem; padding: 1.6rem 1.75rem; background: #fff; border: 1px solid var(--rule); border-radius: 16px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; }
@media (max-width: 860px) { .partner { grid-template-columns: minmax(0, 1fr); padding: 1.3rem 1.25rem; } }
.partner .partner-name { font-size: var(--step-1); }
.partner-by { margin-top: 0.3rem; font-size: 0.86rem; color: var(--ink-soft); }
.partner-bio { margin-top: 0.9rem; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.partner-main .btn { margin-top: 1.2rem; }
.partner-more h4 { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-deep); }
.partner-more ul { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.85rem; }
.partner-more li { padding-top: 0.85rem; border-top: 1px solid var(--rule); }
.partner-more li:first-child { padding-top: 0; border-top: 0; }
.partner-more a { font-weight: 600; color: var(--blue-deep); }
.partner-more p { margin-top: 0.25rem; font-size: 0.88rem; color: var(--ink-soft); }