/* ==========================================================================
   Women in Power — shared stylesheet
   Part of Women's Innovation Network (WIN)

   Single source of truth for how WiP member pages look. Change a token here
   and every page updates. Documented and previewed at /wip/style-guide/.

   Contents
   1. Tokens — light
   2. Tokens — dark
   3. Reset and base
   4. Layout
   5. Masthead, theme toggle, footer
   6. Typography
   7. Components
   8. Journey explorer (the interactive mentor / mentee journeys)
   9. Utilities
  10. Print

   THEMING RULE
   Every color has its base value on bare :root. Dark mode only *redefines*
   tokens, in two places: a prefers-color-scheme block guarded against an
   explicit light choice, and a [data-theme="dark"] block so the toggle wins.
   Never give a color its only definition inside a media query.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS — LIGHT (the base layer)
   ========================================================================== */

:root {
  /* --- Brand: WIN (parent organization) — fixed, never themed ---------- */
  --win-navy:        #042559;
  --win-navy-deep:   #02132e;
  --win-navy-soft:   #16407f;

  /* --- Brand: the signature ribbon gradient — fixed -------------------- */
  --grad-cyan:       #00c5ed;
  --grad-violet:     #823dca;
  --grad-magenta:    #d720d0;
  --ribbon:      linear-gradient(90deg,  var(--grad-cyan) 0%, var(--grad-violet) 52%, var(--grad-magenta) 100%);
  --ribbon-diag: linear-gradient(135deg, var(--grad-cyan) 0%, var(--grad-violet) 52%, var(--grad-magenta) 100%);

  /* The ribbon, deepened until WHITE TEXT PASSES AA on every stop.
     The bright ribbon is decoration and must never sit behind body text:
     white on --grad-cyan is 2.06:1, which is unreadable. These stops are
     6.26 / 7.93 / 6.10 against white and still read as the same gradient.
     Use this any time the ribbon is a background for words. */
  --ribbon-deep: linear-gradient(90deg, #07688a 0%, #6a2db4 52%, #ae12a7 100%);

  /* The ribbon for ROUNDED FILLS: circles (step numbers, avatars, the
     back-to-top hover) and pill buttons. Two things go wrong when the full
     diagonal ribbon is poured into a round shape:
       1. A 135deg gradient puts its end colors in the box's corners, which
          the rounding cuts off. What survives is a cyan wedge and a clipped
          magenta edge, so the shape reads as a square squeezed into a
          circle.
       2. The cyan end sits under white text at 2.06:1.
     So these drop cyan and run deep violet to deep magenta (white text
     7.93 / 6.10). On circles the stops sit at 15% / 85%, which is where a
     circle's edge crosses the 135deg line, so both colors are actually
     visible. Pills run 90deg, along their long axis. */
  /* On anything with a (transparent) border, write the background as
     "var(--ribbon-round) border-box". By default a gradient is sized to
     the padding box and then TILED into the border, so the far end of
     the gradient shows as a thin strip along the top and left edges. */
  --ribbon-round: linear-gradient(135deg, #6a2db4 15%, #ae12a7 85%);
  --ribbon-pill:  linear-gradient(90deg,  #6a2db4 0%,  #ae12a7 100%);

  /* The ribbon for gradient TEXT on a page surface, e.g. the big stat
     numerals. Measured against the surface it actually sits on:
       light mode, on #fff   — 6.26 / 7.93 / 6.10
       dark  mode, on #121c31 — 8.26 / 5.62 / 6.74
     The bright ribbon fails at BOTH ends depending on the mode: its cyan is
     2.06:1 on white and its violet is 2.81:1 on the dark surface. A number
     is content, not decoration — it has to be readable. Gradient text on a
     dark BAND (the masthead kicker, the hero headline) keeps --ribbon;
     those grounds are dark in both themes. */
  --ribbon-text: linear-gradient(90deg, #07688a 0%, #6a2db4 52%, #ae12a7 100%);
  /* Warm gradient text for serif numerals. 10.9 / 5.9 on white. */
  --bloom-text:  linear-gradient(90deg, #5a1f7a 0%, #b3346b 100%);

  /* --- Brand: Women in Power accents ----------------------------------- */
  --wip-plum:        #3b0b4e;
  --wip-magenta:     #d91c81;
  --wip-pink:        #ff2e9e;
  --wip-teal:        #12b6a8;

  /* --- Brand: Bloom — the warm layer ------------------------------------
     Added in v2.0 to give the site warmth without adding clutter. Blush and
     petal are grounds and washes; rose carries small text; gold is a
     hairline detail only (it is 2.7:1 on ivory, so never for words). The
     bloom motif itself is drawn in CSS further down (section 5b). */
  --blush:           #f9e6e8;
  --blush-2:         #fdf2ef;
  --petal:           #e7a3bb;
  --rose:            #b3346b;   /* 5.5:1 on --bg, 4.8:1 on --blush */
  --gold:            #b8925a;
  --gold-soft:       #ecdcc0;

  /* --- Themed: accent used for eyebrows, markers, link hover ----------- */
  --accent:          #b3346b;
  --link:            #7b2667;
  /* Solid fills behind white text: primary buttons, the selected role
     and roster filter. Was WIN navy; plum carries the warmth. */
  --solid:           #3b1554;   /* white on it 13:1 */
  --solid-hover:     #57206f;

  /* --- Themed: tier colors -------------------------------------------- */
  --tier1:           #7a2e8e;   /* Group mentoring */
  --tier1-wash:      #f6effa;
  --tier1-line:      #e3d0ec;
  --tier2:           #0f6fa8;   /* 1:1 mentoring   */
  --tier2-wash:      #ecf5fb;
  --tier2-line:      #c9e0ef;
  --joint:           #b8127a;   /* Both tiers      */
  --joint-wash:      #fdeef6;
  --joint-line:      #f4cfe3;

  /* --- Themed: neutrals ------------------------------------------------ */
  /* Warm neutrals: ivory grounds with a breath of blush, plum-black ink.
     The old cool blue-grays read as corporate; these read as paper. */
  --ink:             #231a2c;
  --ink-2:           #4d4357;
  --ink-3:           #6a5f73;   /* 5.7:1 on --bg, 5.0:1 on --blush */
  --heading:         #2a1540;   /* aubergine; goes near-white in dark     */
  --line:            #eee1dc;
  --line-soft:       #f6ece8;
  --surface:         #fffdfb;
  --surface-2:       #fbf3ef;
  --bg:              #fcf8f5;
  --sticky-bg:       rgba(252, 248, 245, .94);

  /* --- Themed: masthead ------------------------------------------------ */
  /* WiP plum into midnight indigo, lit with rose and peach rather than
     the old cyan. The cyan still arrives in the ribbon along the base. */
  --mast-a:          #3b0b4e;
  --mast-b:          #0f1236;
  --mast-glow-1:     rgba(236, 112, 168, .30);
  --mast-glow-2:     rgba(255, 184, 150, .16);

  /* --- Themed: semantic ------------------------------------------------ */
  --ok:              #1f7a56;  --ok-wash:   #e9f5ef;  --ok-line: #cbe6da;
  --warn:            #9a6410;  --warn-wash: #fdf3e2;
  --danger:          #b0433a;  --danger-wash: #fdeeec; --danger-line: #f3d5d0;

  /* --- Type ------------------------------------------------------------ */
  --font-display: "Jost", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Headings, names and big numerals: Cormorant Garamond, an editorial
     serif with fine contrast. Jost (above) carries labels, buttons and UI.
     Cormorant has a small x-height (0.39 of its size, against Fraunces'
     0.44), so every element set in it also gets font-size-adjust, which
     scales it up to read at the size the layout was designed for. */
  --font-serif:   "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --serif-adjust: 0.43;
  --font-body:    "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Code", Consolas, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-lg:   1.0625rem;
  --t-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-2xl:  clamp(1.5rem,  1.25rem + 1.1vw, 2rem);
  --t-3xl:  clamp(1.9rem,  1.4rem + 2.2vw, 3rem);

  /* --- Space (4px base) ------------------------------------------------ */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;

  /* --- Radius, shadow, motion ------------------------------------------ */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  /* Shadows tinted plum, not navy-gray, so cards glow rather than float. */
  --sh-1: 0 1px 2px rgba(74, 28, 58, .05);
  --sh-2: 0 8px 24px rgba(74, 28, 58, .07);
  --sh-3: 0 20px 48px rgba(74, 28, 58, .12);
  --ease: cubic-bezier(.22, .61, .36, 1);

  --wrap: 940px;
  --wrap-wide: 1180px;

  color-scheme: light;
}

/* ==========================================================================
   2. TOKENS — DARK
   Defined twice on purpose: once for the system preference (unless the
   reader has explicitly chosen light), once for an explicit dark choice.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:      #ff86bb;
    --link:        #f2acd6;
    --solid:       #74338f;  --solid-hover: #8a42a8;
    --blush:       #2b1b28;  --blush-2: #21161f;
    --petal:       #e58bb0;  --rose:    #ff8fbf;
    --gold:        #d8b67c;  --gold-soft: #4a3b28;
    --ribbon-text: linear-gradient(90deg, #00c5ed 0%, #b27ce8 52%, #ff6bd6 100%);
    --bloom-text:  linear-gradient(90deg, #d9a9f2 0%, #ff8fbf 100%);

    --tier1:       #cf95e6;  --tier1-wash: #241a33;  --tier1-line: #3d2b52;
    --tier2:       #6ec6f2;  --tier2-wash: #0f2436;  --tier2-line: #1f3f59;
    --joint:       #ff74bb;  --joint-wash: #2c1428;  --joint-line: #4a2340;

    --ink:         #f5eef3;
    --ink-2:       #cfc2d2;
    --ink-3:       #a797ac;
    --heading:     #fdf5fa;
    --line:        #35283d;
    --line-soft:   #281e2f;
    --surface:     #1c1523;
    --surface-2:   #17111d;
    --bg:          #110c16;
    --sticky-bg:   rgba(17, 12, 22, .94);

    --mast-a:      #2c0a3a;
    --mast-b:      #0a0a1f;
    --mast-glow-1: rgba(236, 112, 168, .24);
    --mast-glow-2: rgba(255, 184, 150, .12);

    --ok:      #5fd3a3;  --ok-wash:     #0f2a20;  --ok-line: #1f4d3a;
    --warn:    #f0c274;  --warn-wash:   #2c2313;
    --danger:  #f79a90;  --danger-wash: #2e1614;  --danger-line: #4d2723;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
    --sh-2: 0 6px 20px rgba(0, 0, 0, .40);
    --sh-3: 0 18px 44px rgba(0, 0, 0, .55);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --accent:      #ff86bb;
  --link:        #f2acd6;
  --solid:       #74338f;  --solid-hover: #8a42a8;
  --blush:       #2b1b28;  --blush-2: #21161f;
  --petal:       #e58bb0;  --rose:    #ff8fbf;
  --gold:        #d8b67c;  --gold-soft: #4a3b28;
    --ribbon-text: linear-gradient(90deg, #00c5ed 0%, #b27ce8 52%, #ff6bd6 100%);
    --bloom-text:  linear-gradient(90deg, #d9a9f2 0%, #ff8fbf 100%);

  --tier1:       #cf95e6;  --tier1-wash: #241a33;  --tier1-line: #3d2b52;
  --tier2:       #6ec6f2;  --tier2-wash: #0f2436;  --tier2-line: #1f3f59;
  --joint:       #ff74bb;  --joint-wash: #2c1428;  --joint-line: #4a2340;

  --ink:         #f5eef3;
  --ink-2:       #cfc2d2;
  --ink-3:       #a797ac;
  --heading:     #fdf5fa;
  --line:        #35283d;
  --line-soft:   #281e2f;
  --surface:     #1c1523;
  --surface-2:   #17111d;
  --bg:          #110c16;
  --sticky-bg:   rgba(17, 12, 22, .94);

  --mast-a:      #2c0a3a;
  --mast-b:      #0a0a1f;
  --mast-glow-1: rgba(236, 112, 168, .24);
  --mast-glow-2: rgba(255, 184, 150, .12);

  --ok:      #5fd3a3;  --ok-wash:     #0f2a20;  --ok-line: #1f4d3a;
  --warn:    #f0c274;  --warn-wash:   #2c2313;
  --danger:  #f79a90;  --danger-wash: #2e1614;  --danger-line: #4d2723;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-2: 0 6px 20px rgba(0, 0, 0, .40);
  --sh-3: 0 18px 44px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* ==========================================================================
   3. RESET AND BASE
   ========================================================================== */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Cormorant's default figures are old-style (a 5 dips below the line).
     Numbers on this site are dates, times and stats, so keep them level. */
  font-variant-numeric: lining-nums;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

img, svg { max-width: 100%; height: auto; display: block; }

/* The link color is a token, lifted from navy to #7fb6ff in dark mode.
   It used to be switched with ":root[data-theme=dark] a", but that
   selector outweighs any single class, so it repainted every white-text
   link (accent buttons, the announcement bar, the masthead nav) light
   blue in dark mode. A token keeps "a" at its natural weight and lets
   components set their own color. */
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 3px solid var(--grad-violet); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--win-navy); color: #fff;
  padding: var(--s-3) var(--s-4); border-radius: 0 0 var(--r-sm) 0; z-index: 100;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }

/* Hide the no-JS fallback once the scripts run, and vice versa. */
.js-only { display: none; }
.has-js .js-only { display: block; }
.has-js .no-js-only { display: none; }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: var(--s-5); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--s-5); }

main { padding-bottom: var(--s-8); }

.section { margin-top: var(--s-7); }
.section > * + * { margin-top: var(--s-4); }

.eyebrow {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.section-head { margin-bottom: var(--s-4); }
.section-head h2 { margin-top: var(--s-2); }
.section-head::after {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--ribbon); border-radius: var(--r-pill); margin-top: var(--s-3);
}

.grid { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Sticky in-page nav, used by the longer pages. */
.jump { position: sticky; top: 0; z-index: 20; background: var(--sticky-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.jump ul { display: flex; gap: var(--s-4); list-style: none; padding: var(--s-3) 0; margin: 0; overflow-x: auto; font-size: var(--t-sm); max-width: none; }
.jump li { margin: 0; white-space: nowrap; }
.jump a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.jump a:hover { color: var(--accent); }

/* ==========================================================================
   5. MASTHEAD, THEME TOGGLE, FOOTER
   ========================================================================== */

.masthead {
  background:
    radial-gradient(1000px 420px at 82% -30%, var(--mast-glow-1), transparent 62%),
    radial-gradient(760px 360px at 6% -10%, var(--mast-glow-2), transparent 60%),
    linear-gradient(160deg, var(--mast-a) 0%, var(--mast-b) 100%);
  color: #fff;
  padding-block: var(--s-6) var(--s-7);
  position: relative;
  transition: background .25s var(--ease);
}
.masthead::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--ribbon); }
.masthead a { color: #fff; }
/* Base <strong> is set in the body ink, which is dark in light mode and
   vanishes on this ground. Same for the page-level dark bands. */
.masthead strong, .masthead b, .spotlight strong, .allies strong { color: #fff; }

.masthead-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.masthead-right { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }

.lockup { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }

/* The real wordmark. Mastheads are dark, so they carry the reversed (white)
   file; the black original is for light grounds. Intrinsic width/height are
   on the <img> so the row does not shift while the image loads. */
.lockup-img { width: 168px; height: auto; flex: none; }
@media (max-width: 520px) { .lockup-img { width: 132px; } }

/* Legacy CSS-only lockup, kept for any page that has no image to hand. */
.lockup-mark {
  width: 38px; height: 38px; border-radius: 10px; background: var(--ribbon-round);
  display: grid; place-items: center; flex: none;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; letter-spacing: .02em;
}
.lockup-text { line-height: 1.15; }
.lockup-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; }
.lockup-sub { font-size: var(--t-xs); color: rgba(255,255,255,.62); letter-spacing: .04em; }

.masthead-nav { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t-sm); }
.masthead-nav a {
  color: rgba(255,255,255,.78); text-decoration: none; padding-bottom: 3px;
  border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.masthead-nav a:hover, .masthead-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--grad-magenta); }

/* A pillar that exists in the structure but has no page yet. Deliberately
   not a link — a nav item that 404s is worse than one that says "soon" —
   and deliberately quiet. These sit AFTER the real links: a placeholder
   should never outrank a page someone can actually open, and a bordered
   badge on a dark ground pulls more attention than the live items do. */
.masthead-nav .nav-soon {
  color: rgba(255,255,255,.34); display: inline-flex; align-items: baseline; gap: .4em;
  padding-bottom: 3px; border-bottom: 2px solid transparent; cursor: default;
}
.masthead-nav .nav-soon em {
  font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(255,255,255,.28);
}

/* Theme toggle — three states: light / dark / follow the system. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: .45em;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  color: #fff; border-radius: var(--r-pill); padding: .45em .9em;
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600;
  cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.34); }
.theme-toggle svg { width: 15px; height: 15px; flex: none; }

.masthead h1, .masthead h2, .masthead h3, .masthead h4 { color: #fff; }
.masthead h1 { font-family: var(--font-serif); font-size-adjust: var(--serif-adjust); font-size: calc(var(--t-3xl) * 1.08); font-weight: 600; line-height: 1.06; letter-spacing: -.02em; max-width: 20ch; }
.masthead h1 em { color: #f7b3cf; }
.masthead .kicker {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  /* Rose into champagne: the ribbon's cyan read cold against the plum. */
  background: linear-gradient(90deg, #f7b3cf, #f1d09f); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: var(--s-3);
}
.masthead .standfirst { font-size: var(--t-lg); color: rgba(255,255,255,.8); max-width: 62ch; margin-top: var(--s-4); }
.masthead .meta { margin-top: var(--s-5); display: flex; gap: var(--s-2) var(--s-5); flex-wrap: wrap; font-size: var(--t-sm); color: rgba(255,255,255,.72); }
.masthead .meta strong { color: #fff; font-weight: 600; }

.site-footer {
  border-top: 1px solid var(--line); background: var(--surface);
  padding-block: var(--s-6); margin-top: var(--s-8);
  font-size: var(--t-sm); color: var(--ink-3);
}
.site-footer .foot-row { display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; align-items: flex-start; }
.site-footer img.win-logo { width: 132px; margin-bottom: var(--s-3); border-radius: 6px; }
/* Dark-ink marks (the navy WIN logo, the black wordmark) need a white plate
   to survive dark mode. Never apply it inside .logo-plate.dark — that plate
   holds the REVERSED white marks, which would vanish on white. */
:root[data-theme="dark"] .site-footer img.win-logo,
:root[data-theme="dark"] .logo-plate:not(.dark) img { background: #fff; padding: 6px 10px; border-radius: 4px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer img.win-logo,
  :root:not([data-theme="light"]) .logo-plate:not(.dark) img { background: #fff; padding: 6px 10px; border-radius: 4px; }
}
.site-footer nav { display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer .tagline { font-family: var(--font-serif); font-size-adjust: var(--serif-adjust); font-style: italic; font-weight: 500; font-size: var(--t-lg); color: var(--heading); }

/* --- Section sub-navigation ---------------------------------------------
   Sits directly under the masthead on pages inside a pillar. Deliberately
   NOT sticky: the cohort page already has a sticky in-page .jump bar, and
   two stacked sticky strips eat a phone screen.
   ------------------------------------------------------------------------ */
.subnav { background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav > div { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding-block: var(--s-3); }
.subnav-label {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding-right: var(--s-4); border-right: 1px solid var(--line);
}
.subnav ul { display: flex; gap: var(--s-4); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; max-width: none; }
.subnav li { margin: 0; }
.subnav a {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  padding: .2em 0; border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.subnav a:hover { color: var(--accent); }
.subnav a[aria-current="page"] { color: var(--heading); font-weight: 600; border-bottom-color: var(--accent); }
@media (max-width: 560px) {
  .subnav-label { border-right: 0; padding-right: 0; width: 100%; }
  .subnav > div { gap: var(--s-2); }
}
@media print { .subnav { display: none; } }

/* --- Announcement bar ----------------------------------------------------
   A time-boxed strip above the masthead, for one thing at a time. It sits
   OUTSIDE the nav on purpose: an event is not a pillar, and the primary nav
   stays three pillars plus About no matter what is coming up. Delete the
   element from each page when the event passes.
   ------------------------------------------------------------------------ */
.announce {
  background: var(--ribbon-deep); color: #fff;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
}
.announce a {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  flex-wrap: wrap; padding: .7em var(--s-5); color: #fff; text-decoration: none;
  text-align: center;
}
.announce a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.announce .where { font-weight: 400; opacity: .85; }
.announce .go { font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) { .announce .where { display: none; } }
@media print { .announce { display: none; } }

/* ==========================================================================
   5b. BLOOM — the warm layer
   An original line-drawn bloom, used sparingly: one large and one small in
   the masthead, a small one opening every section, a watermark on warm
   panels. The large masthead bloom turns very slowly (a nod to a flower
   spinner), and stops for anyone who prefers reduced motion.

   Everything here is decoration: aria-hidden by construction (pseudo-
   elements and backgrounds), never behind body text at more than a whisper.
   ========================================================================== */

:root {
  --bloom-line:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-64 -64 128 128'%3E %3Cdefs%3E %3Cpath id='a' d='M0 -9 C -11 -22 -11 -45 0 -61 C 11 -45 11 -22 0 -9 Z'/%3E %3Cpath id='b' d='M0 -7 C -6 -15 -6 -27 0 -36 C 6 -27 6 -15 0 -7 Z'/%3E %3Cpath id='v' d='M0 -14 L0 -52'/%3E %3C/defs%3E %3Cg fill='none' stroke='%23ffffff' stroke-width='.42' stroke-linecap='round'%3E %3Cuse href='%23a' transform='rotate(0)'/%3E%3Cuse href='%23a' transform='rotate(45)'/%3E%3Cuse href='%23a' transform='rotate(90)'/%3E%3Cuse href='%23a' transform='rotate(135)'/%3E%3Cuse href='%23a' transform='rotate(180)'/%3E%3Cuse href='%23a' transform='rotate(225)'/%3E%3Cuse href='%23a' transform='rotate(270)'/%3E%3Cuse href='%23a' transform='rotate(315)'/%3E%3Cg stroke-opacity='.55'%3E%3Cuse href='%23v' transform='rotate(0)'/%3E%3Cuse href='%23v' transform='rotate(45)'/%3E%3Cuse href='%23v' transform='rotate(90)'/%3E%3Cuse href='%23v' transform='rotate(135)'/%3E%3Cuse href='%23v' transform='rotate(180)'/%3E%3Cuse href='%23v' transform='rotate(225)'/%3E%3Cuse href='%23v' transform='rotate(270)'/%3E%3Cuse href='%23v' transform='rotate(315)'/%3E%3C/g%3E%3Cuse href='%23b' transform='rotate(22.5)'/%3E%3Cuse href='%23b' transform='rotate(67.5)'/%3E%3Cuse href='%23b' transform='rotate(112.5)'/%3E%3Cuse href='%23b' transform='rotate(157.5)'/%3E%3Cuse href='%23b' transform='rotate(202.5)'/%3E%3Cuse href='%23b' transform='rotate(247.5)'/%3E%3Cuse href='%23b' transform='rotate(292.5)'/%3E%3Cuse href='%23b' transform='rotate(337.5)'/%3E %3Ccircle r='6.2'/%3E%3Ccircle r='2.8'/%3E %3C/g%3E %3Cg fill='%23ffffff'%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(22.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(67.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(112.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(157.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(202.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(247.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(292.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(337.5)'/%3E%3C/g%3E %3C/svg%3E");
  --bloom-rose:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-64 -64 128 128'%3E %3Cdefs%3E %3Cpath id='a' d='M0 -9 C -11 -22 -11 -45 0 -61 C 11 -45 11 -22 0 -9 Z'/%3E %3Cpath id='b' d='M0 -7 C -6 -15 -6 -27 0 -36 C 6 -27 6 -15 0 -7 Z'/%3E %3Cpath id='v' d='M0 -14 L0 -52'/%3E %3C/defs%3E %3Cg fill='none' stroke='%23f6a9c8' stroke-width='.6' stroke-linecap='round'%3E %3Cuse href='%23a' transform='rotate(0)'/%3E%3Cuse href='%23a' transform='rotate(45)'/%3E%3Cuse href='%23a' transform='rotate(90)'/%3E%3Cuse href='%23a' transform='rotate(135)'/%3E%3Cuse href='%23a' transform='rotate(180)'/%3E%3Cuse href='%23a' transform='rotate(225)'/%3E%3Cuse href='%23a' transform='rotate(270)'/%3E%3Cuse href='%23a' transform='rotate(315)'/%3E%3Cg stroke-opacity='.55'%3E%3Cuse href='%23v' transform='rotate(0)'/%3E%3Cuse href='%23v' transform='rotate(45)'/%3E%3Cuse href='%23v' transform='rotate(90)'/%3E%3Cuse href='%23v' transform='rotate(135)'/%3E%3Cuse href='%23v' transform='rotate(180)'/%3E%3Cuse href='%23v' transform='rotate(225)'/%3E%3Cuse href='%23v' transform='rotate(270)'/%3E%3Cuse href='%23v' transform='rotate(315)'/%3E%3C/g%3E%3Cuse href='%23b' transform='rotate(22.5)'/%3E%3Cuse href='%23b' transform='rotate(67.5)'/%3E%3Cuse href='%23b' transform='rotate(112.5)'/%3E%3Cuse href='%23b' transform='rotate(157.5)'/%3E%3Cuse href='%23b' transform='rotate(202.5)'/%3E%3Cuse href='%23b' transform='rotate(247.5)'/%3E%3Cuse href='%23b' transform='rotate(292.5)'/%3E%3Cuse href='%23b' transform='rotate(337.5)'/%3E %3Ccircle r='6.2'/%3E%3Ccircle r='2.8'/%3E %3C/g%3E %3Cg fill='%23f6a9c8'%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(22.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(67.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(112.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(157.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(202.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(247.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(292.5)'/%3E%3Ccircle cx='0' cy='-13' r='.9' transform='rotate(337.5)'/%3E%3C/g%3E %3C/svg%3E");
  --bloom-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E %3Cdefs%3E%3Cellipse id='p' cx='0' cy='-6.3' rx='3.3' ry='4.7'/%3E%3C/defs%3E %3Cuse href='%23p' transform='rotate(0)'/%3E%3Cuse href='%23p' transform='rotate(72)'/%3E%3Cuse href='%23p' transform='rotate(144)'/%3E%3Cuse href='%23p' transform='rotate(216)'/%3E%3Cuse href='%23p' transform='rotate(288)'/%3E%3Ccircle r='1.3'/%3E %3C/svg%3E");
  --bloom-sprig:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 20'%3E %3Cdefs%3E %3ClinearGradient id='f'%3E%3Cstop offset='0' stop-color='%23000'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E %3Cellipse id='p' cx='0' cy='-5.3' rx='2.8' ry='3.9'/%3E %3C/defs%3E %3Cg transform='translate(10 10)'%3E%3Cuse href='%23p' transform='rotate(0)'/%3E%3Cuse href='%23p' transform='rotate(72)'/%3E%3Cuse href='%23p' transform='rotate(144)'/%3E%3Cuse href='%23p' transform='rotate(216)'/%3E%3Cuse href='%23p' transform='rotate(288)'/%3E%3Ccircle r='1.1'/%3E%3C/g%3E %3Crect x='24' y='9.4' width='108' height='1.2' rx='.6' fill='url(%23f)'/%3E %3C/svg%3E");
}

/* --- Masthead --------------------------------------------------------- */
.masthead { overflow: hidden; isolation: isolate; }
.masthead > .wrap { position: relative; z-index: 1; }
.masthead::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(620px, 92vw); aspect-ratio: 1;
  right: max(-150px, -12vw); top: -170px;
  background: var(--bloom-line) center / contain no-repeat;
  opacity: .13;
  animation: bloom-turn 240s linear infinite;
}
/* The small rose bloom sits in the background layer stack so it needs no
   extra element. Listed first, so it paints above the glows. */
.masthead {
  background:
    var(--bloom-rose) right 6% bottom -64px / 180px 180px no-repeat,
    radial-gradient(1000px 420px at 82% -30%, var(--mast-glow-1), transparent 62%),
    radial-gradient(760px 360px at 6% -10%, var(--mast-glow-2), transparent 60%),
    linear-gradient(160deg, var(--mast-a) 0%, var(--mast-b) 100%);
}
@media (max-width: 760px) {
  .masthead::before { top: -120px; right: -45vw; opacity: .10; }
  .masthead { background-size: 140px 140px, auto, auto, auto; background-position: right -40px bottom -50px, 0 0, 0 0, 0 0; }
}
/* A compact masthead (logo and nav only, no headline, e.g. PPCC) is too
   short for the small bloom: it lands on the nav. */
.masthead:not(:has(h1)) { background-size: 0 0, auto, auto, auto; }
.masthead:not(:has(h1))::before { opacity: .08; }
@keyframes bloom-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .masthead::before { animation: none; } }

/* --- Section divider: bloom and a fading hairline --------------------- */
.section-head::after {
  width: 132px; height: 20px; border-radius: 0;
  background: linear-gradient(90deg, var(--rose), var(--gold));
  -webkit-mask: var(--bloom-sprig) left center / contain no-repeat;
          mask: var(--bloom-sprig) left center / contain no-repeat;
}

/* --- A warm panel ------------------------------------------------------
   Blush ground, soft edge, a large bloom watermark in the corner. For one
   section per page at most: the invitation, the call to action. */
.panel-bloom {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(520px 260px at 0% 0%, var(--blush), transparent 70%),
    var(--blush-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
}
.panel-bloom::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 340px; aspect-ratio: 1; right: -90px; bottom: -110px;
  background: var(--petal); opacity: .28;
  -webkit-mask: var(--bloom-line) center / contain no-repeat;
          mask: var(--bloom-line) center / contain no-repeat;
}
.panel-bloom > * + * { margin-top: var(--s-4); }

/* --- A small bloom in a card's top corner ------------------------------ */
/* Also on every row of equals: stats, leadership cards, PPCC take-aways.
   Cards in other rows opt in with .card-bloom. Content sits above the
   watermark so a long number or name is never drawn over. */
.card-bloom, .stat, .person, .takeaway { position: relative; overflow: hidden; }
:is(.card-bloom, .stat, .person, .takeaway) > * { position: relative; z-index: 1; }
:is(.card-bloom, .stat, .person, .takeaway)::after {
  content: ""; position: absolute; pointer-events: none;
  width: 120px; aspect-ratio: 1; right: -38px; top: -38px;
  background: var(--petal); opacity: .38;
  -webkit-mask: var(--bloom-line) center / contain no-repeat;
          mask: var(--bloom-line) center / contain no-repeat;
  transition: transform .8s var(--ease), opacity .3s var(--ease);
}
:is(.card-bloom, .stat, .person, .takeaway):hover::after { transform: rotate(30deg); opacity: .55; }
.stat::after { width: 96px; right: -32px; top: -32px; }

/* --- Inline bloom mark, e.g. before the footer tagline ------------------ */
.bloom-mark {
  display: inline-block; width: .95em; height: .95em; vertical-align: -.08em;
  background: linear-gradient(135deg, var(--petal), var(--rose));
  -webkit-mask: var(--bloom-filled) center / contain no-repeat;
          mask: var(--bloom-filled) center / contain no-repeat;
}
.site-footer .tagline::before {
  content: ""; display: inline-block; width: .9em; height: .9em;
  margin-right: .45em; vertical-align: -.06em;
  background: linear-gradient(135deg, var(--petal), var(--rose));
  -webkit-mask: var(--bloom-filled) center / contain no-repeat;
          mask: var(--bloom-filled) center / contain no-repeat;
}

@media print {
  .masthead::before, .panel-bloom::after, :is(.card-bloom, .stat, .person, .takeaway)::after { display: none; }
  .panel-bloom { background: none; border: 0; padding: 0; }
}

/* ==========================================================================
   5c. MOTION
   Quiet and once-only. Everything here honors the reader's "reduce motion"
   setting: reveals become a plain fade, nothing slides, turns or draws.

   Reveal contract: an inline script in each page's <head> adds .rv-on to
   <html> before first paint, and wip.js (initReveal) adds .in to each
   element as it scrolls into view. If wip.js never runs, the head script
   removes .rv-on after 3 seconds, so content can never stay hidden.
   ========================================================================== */

/* --- 1. Gentle reveal -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rv-on :is(.section-head, .card, .stat, .person, .takeaway, .slot, .keydate) {
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--rv-delay, 0ms);
  }
  .rv-on :is(.section-head, .card, .stat, .person, .takeaway, .slot, .keydate):not(.in) {
    opacity: 0; transform: translateY(16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv-on :is(.section-head, .card, .stat, .person, .takeaway, .slot, .keydate) { transition: opacity .5s linear; }
  .rv-on :is(.section-head, .card, .stat, .person, .takeaway, .slot, .keydate):not(.in) { opacity: 0; }
}

/* --- 2. The corner bloom unfurls as its card appears -------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rv-on :is(.card-bloom, .stat, .person, .takeaway):not(.in)::after { transform: rotate(-40deg) scale(.6); opacity: 0; }
  .rv-on :is(.card-bloom, .stat, .person, .takeaway).in::after { transition: transform 1.1s var(--ease) .3s, opacity .6s var(--ease) .3s; }
  .rv-on :is(.card-bloom, .stat, .person, .takeaway).in:hover::after { transition-delay: 0s; }
}

/* --- 3. The section divider draws itself: flower first, then the line --- */
@media (prefers-reduced-motion: no-preference) {
  .rv-on .section-head::after { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease) .35s; }
  .rv-on .section-head.in::after { clip-path: inset(0 0 0 0); }
}

/* --- 5. A hand-drawn stroke under the warm word ------------------------- */
:is(.masthead h1, .section-head h2) em { position: relative; white-space: nowrap; }
:is(.masthead h1, .section-head h2) em::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; bottom: -.06em; height: .28em;
  pointer-events: none;
  background: linear-gradient(90deg, var(--petal), var(--rose));
  -webkit-mask: var(--brush-stroke) 0 0 / 100% 100% no-repeat;
          mask: var(--brush-stroke) 0 0 / 100% 100% no-repeat;
}
.masthead h1 em::after { background: linear-gradient(90deg, #f7b3cf, #f1d09f); }
:root {
  --brush-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 45 3 92 4 122 7 S 178 11 197 5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
@keyframes stroke-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  .masthead h1 em::after { animation: stroke-draw .9s var(--ease) .6s both; }
  .rv-on .section-head h2 em::after { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease) .6s; }
  .rv-on .section-head.in h2 em::after { clip-path: inset(0 0 0 0); }
}

/* --- 6. Hover details ---------------------------------------------------
   Links keep a faint underline at rest (a link must not rely on color
   alone) and draw a full one from the left on hover. */
main :is(p, li, td, dd, figcaption) a:not(.btn), .person-links a, .site-footer nav a {
  text-decoration: none;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(color-mix(in srgb, currentColor 35%, transparent), color-mix(in srgb, currentColor 35%, transparent));
  background-size: 0% 1.5px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .4s var(--ease), color .2s var(--ease);
}
main :is(p, li, td, dd, figcaption) a:not(.btn):hover, .person-links a:hover, .site-footer nav a:hover {
  background-size: 100% 1.5px, 100% 1px;
}
/* Arrows in buttons are wrapped in .arr by wip.js and nudge on hover. */
.arr { display: inline-block; transition: transform .3s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  :is(.btn, .je-btn):hover .arr-r { transform: translateX(4px); }
  :is(.btn, .je-btn):hover .arr-l { transform: translateX(-4px); }
  :is(.btn, .je-btn):hover .arr-d { transform: translateY(3px); }
}
/* The main call to action carries a small bloom that turns one petal. */
.btn-accent::before {
  content: ""; width: .95em; height: .95em; flex: none;
  background: currentColor;
  -webkit-mask: var(--bloom-filled) center / contain no-repeat;
          mask: var(--bloom-filled) center / contain no-repeat;
  transition: transform .7s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-accent:hover::before { transform: rotate(72deg); }
}

/* --- 7. Pages dissolve into each other ----------------------------------
   Chrome, Edge and Safari. Other browsers simply navigate as before. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

@media print {
  .rv-on :is(.section-head, .card, .stat, .person, .takeaway, .slot, .keydate) { opacity: 1 !important; transform: none !important; }
  .rv-on .section-head::after, :is(.masthead h1, .section-head h2) em::after { clip-path: none !important; }
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-size-adjust: var(--serif-adjust); font-weight: 600; line-height: 1.15; letter-spacing: 0; color: var(--heading); }
h5 { font-family: var(--font-display); font-size-adjust: none; }
/* font-size-adjust inherits: labels set inside a heading keep their own size. */
.pill, .btn, .tier-num, .eyebrow, .kicker { font-size-adjust: none; }
/* An <em> inside a heading is the one warm word: italic, in rose.
   Use it once per heading at most, on the word that carries the feeling. */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--rose); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); font-weight: 700; }
h5 { font-size: var(--t-base); font-weight: 600; }

p, ul, ol { max-width: 72ch; }
p + p { margin-top: var(--s-3); }
ul, ol { padding-left: 1.15rem; }
li + li { margin-top: var(--s-2); }
li::marker { color: var(--accent); }

.lead { font-size: var(--t-lg); color: var(--ink-2); }
.muted { color: var(--ink-3); }
.small { font-size: var(--t-sm); }
strong, b { font-weight: 600; color: var(--ink); }
code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: .1em .35em; }

.grad-text { background: var(--ribbon-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==========================================================================
   7. COMPONENTS
   ========================================================================== */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-1); }
.card > * + * { margin-top: var(--s-3); }
.card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.card-t1 { border-top: 4px solid var(--tier1); }
.card-t2 { border-top: 4px solid var(--tier2); }
.card-joint { border-top: 4px solid var(--joint); }

.pill {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .04em; padding: .32em .8em; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.pill-t1      { background: var(--tier1-wash); color: var(--tier1); border-color: var(--tier1-line); }
.pill-t2      { background: var(--tier2-wash); color: var(--tier2); border-color: var(--tier2-line); }
.pill-joint   { background: var(--joint-wash); color: var(--joint); border-color: var(--joint-line); }
.pill-neutral { background: var(--surface-2);  color: var(--ink-2); border-color: var(--line); }
.pill-ok      { background: var(--ok-wash);    color: var(--ok);    border-color: var(--ok-line); }

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
  padding: .75em 1.4em; border-radius: var(--r-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn-primary { background: var(--solid); color: #fff; box-shadow: var(--sh-2); }
.btn-primary:hover { background: var(--solid-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--sh-3); }
.btn-accent { background: var(--ribbon-pill) border-box; color: #fff; box-shadow: 0 8px 22px rgba(174, 18, 167, .22); }
.btn-accent:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(174, 18, 167, .32); }
.btn-ghost { background: transparent; color: var(--heading); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

.callout {
  border-left: 4px solid var(--grad-violet); background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s-4) var(--s-5); box-shadow: var(--sh-1);
}
.callout > * + * { margin-top: var(--s-2); }
.callout-title { font-family: var(--font-serif); font-size-adjust: var(--serif-adjust); font-weight: 700; font-size: 1.08rem; color: var(--heading); }
.callout-note { border-left-color: var(--warn); background: var(--warn-wash); box-shadow: none; }
.callout-note .callout-title { color: var(--warn); }

.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); }
.stat-num { font-family: var(--font-serif); font-size-adjust: var(--serif-adjust); font-size: 2.3rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; background: var(--bloom-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-label { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 560px; }
caption { text-align: left; font-size: var(--t-sm); color: var(--ink-3); padding-bottom: var(--s-2); }
/* Inside the bordered scroll box the caption would sit flush on the edge. */
.table-scroll caption { padding: var(--s-3) var(--s-4); }
/* A footnote marker must not push its row taller than the others. */
sup { line-height: 0; }
th, td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
thead th {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.col-week { font-family: var(--font-display); font-weight: 700; color: var(--heading); white-space: nowrap; }
.cell-t1 { color: var(--tier1); }
.cell-t2 { color: var(--tier2); }
.cell-joint { color: var(--joint); font-weight: 600; }

/* Static timeline — used where a journey is shown in full (print, no-JS). */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--grad-cyan), var(--grad-violet), var(--grad-magenta));
  border-radius: 2px; opacity: .35;
}
.timeline > li { position: relative; padding-left: var(--s-6); padding-bottom: var(--s-5); margin: 0; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: ""; position: absolute; left: 5px; top: 7px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--surface); border: 3px solid var(--grad-violet);
}
.tl-when { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.tl-title { font-family: var(--font-serif); font-size-adjust: var(--serif-adjust); font-weight: 700; font-size: var(--t-lg); color: var(--heading); margin-top: 2px; }
.tl-body { color: var(--ink-2); font-size: 0.9375rem; margin-top: var(--s-2); }
.tl-time { display: inline-block; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .2em .7em; }

.event { display: flex; gap: var(--s-4); align-items: flex-start; }
.event-date { flex: none; width: 76px; text-align: center; border-radius: var(--r-md); padding: var(--s-3) var(--s-2); background: var(--surface-2); border: 1px solid var(--line); }
.event-mon { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.event-day { font-family: var(--font-serif); font-size-adjust: var(--serif-adjust); font-size: 1.1rem; font-weight: 600; color: var(--heading); line-height: 1.15; }
.event-body h4 { color: var(--heading); }
.event-meta { font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; }

.steps { list-style: none; padding: 0; counter-reset: step; }
.steps > li { position: relative; padding-left: 3rem; margin-top: var(--s-4); }
.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -2px; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--ribbon-round); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  display: grid; place-items: center;
}

details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-top: var(--s-3); }
details.faq + details.faq { margin-top: var(--s-2); }
details.faq > summary {
  cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600;
  color: var(--heading); display: flex; justify-content: space-between; gap: var(--s-4); align-items: center;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--accent); line-height: 1; flex: none; }
details.faq[open] > summary::after { content: "\2013"; }
details.faq > summary + * { margin-top: var(--s-3); }
details.faq p { color: var(--ink-2); font-size: 0.9375rem; }

.tier-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.tier-num { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: .3em .75em; border-radius: var(--r-pill); }
.tier-num.t1 { background: var(--tier1); }
.tier-num.t2 { background: var(--tier2); }
:root[data-theme="dark"] .tier-num { color: #0b1220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tier-num { color: #0b1220; } }

.topics { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
.topics li { margin: 0; }
.topic { display: inline-block; font-size: var(--t-sm); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .35em .9em; color: var(--ink-2); }

/* ==========================================================================
   8. JOURNEY EXPLORER
   An interactive walkthrough of a mentor's or mentee's twelve weeks.
   Choose a tier and a role, then step through the milestones.

   Markup contract (see 2026-fall/index.html):
     .journey-explorer
       .je-controls   → two segmented controls (tier, role)
       .je-stage      → .je-rail (tablist of steps) + .je-panel (tabpanel)
       .je-source     → the four <ol class="timeline"> journeys, which are
                        the data source AND the no-JS / print fallback.
   ========================================================================== */

.journey-explorer { margin-top: var(--s-5); }

/* Without JS the controls and stage are an inert empty widget, so hide them
   and let .je-source carry the content instead. The .has-js class is added
   by wip.js, so the default state here is the no-JS state. */
.je-controls, .je-stage, .je-toggle-all { display: none; }
.has-js .je-controls { display: flex; }
.has-js .je-stage { display: block; }
.has-js .je-toggle-all { display: block; }

/* --- Segmented controls ------------------------------------------------ */
/* display comes from .has-js above — a later display:flex here would
   override the no-JS hiding rule. */
.je-controls { gap: var(--s-5) var(--s-6); flex-wrap: wrap; align-items: flex-end; }
.je-group { display: flex; flex-direction: column; gap: var(--s-2); }
.je-legend { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.seg {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 4px; gap: 2px;
}
.seg-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-2); padding: .5em 1.1em; border-radius: var(--r-pill);
  white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease);
}
.seg-btn:hover { color: var(--heading); }
.seg-btn[aria-checked="true"] { background: var(--surface); color: var(--heading); box-shadow: var(--sh-1); }
.seg-btn[aria-checked="true"][data-tier="1"] { background: var(--tier1); color: #fff; }
.seg-btn[aria-checked="true"][data-tier="2"] { background: var(--tier2); color: #fff; }
.seg-btn[aria-checked="true"][data-role]     { background: var(--solid); color: #fff; }
:root[data-theme="dark"] .seg-btn[aria-checked="true"][data-tier] { color: #0b1220; }
:root[data-theme="dark"] .seg-btn[aria-checked="true"][data-role] { background: var(--solid); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg-btn[aria-checked="true"][data-tier] { color: #0b1220; }
  :root:not([data-theme="light"]) .seg-btn[aria-checked="true"][data-role] { background: var(--solid); color: #fff; }
}

/* --- Summary line ------------------------------------------------------ */
.je-summary {
  margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-2);
}
.je-summary .je-total { font-family: var(--font-display); font-weight: 600; color: var(--heading); }

/* --- Progress rail ----------------------------------------------------- */
.je-stage {
  margin-top: var(--s-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden;
}
.je-railwrap { position: relative; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.je-rail {
  display: flex; gap: 0; margin: 0; padding: var(--s-4) var(--s-4) var(--s-3);
  overflow-x: auto; max-width: none;
  scrollbar-width: thin;
  /* No scroll-behavior:smooth here. The rail is nudged by assigning
     scrollLeft, and a smooth behavior that a browser declines to animate
     leaves the assignment silently doing nothing. A short instant nudge on
     a horizontal strip is fine; a step dot that never comes into view is
     not. */
}
.je-rail::-webkit-scrollbar { height: 6px; }
.je-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.je-step {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-3); width: 108px; flex: none; text-align: center; position: relative;
  color: var(--ink-3); font-family: var(--font-body);
}
/* The connecting line between dots. */
.je-step::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.je-step:first-child::before { display: none; }
.je-step .je-dot {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs); color: var(--ink-3);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.je-step .je-lbl {
  font-size: 11.5px; line-height: 1.3; font-weight: 500;
  transition: color .2s var(--ease);
}
.je-step:hover .je-dot { border-color: var(--accent); transform: scale(1.08); }
.je-step:hover .je-lbl { color: var(--ink); }

/* Visited steps (before the current one) read as "done". */
.je-step[data-state="done"] .je-dot { border-color: var(--grad-violet); color: var(--grad-violet); }
.je-step[data-state="done"]::before,
.je-step[aria-selected="true"]::before { background: var(--grad-violet); }

.je-step[aria-selected="true"] .je-dot {
  background: var(--ribbon-round) border-box; border-color: transparent; color: #fff;
  transform: scale(1.14); box-shadow: 0 0 0 4px var(--tier1-wash);
}
.je-step[aria-selected="true"] .je-lbl { color: var(--heading); font-weight: 600; }

/* --- Detail panel ------------------------------------------------------ */
.je-panel { padding: var(--s-5) var(--s-5) var(--s-4); }
.je-panel:focus-visible { outline-offset: -3px; }
.je-count { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.je-when { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-top: var(--s-3); }
.je-title { font-family: var(--font-serif); font-size-adjust: var(--serif-adjust); font-size: var(--t-xl); font-weight: 600; color: var(--heading); margin-top: var(--s-2); letter-spacing: -.015em; }
.je-body { color: var(--ink-2); margin-top: var(--s-3); max-width: 68ch; }
.je-body strong { color: var(--ink); }
.je-tags { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }

/* A gentle fade when the panel content swaps. */
.je-panel[data-anim="in"] .je-when,
.je-panel[data-anim="in"] .je-title,
.je-panel[data-anim="in"] .je-body,
.je-panel[data-anim="in"] .je-tags { animation: jeIn .28s var(--ease) both; }
.je-panel[data-anim="in"] .je-title { animation-delay: .03s; }
.je-panel[data-anim="in"] .je-body  { animation-delay: .06s; }
.je-panel[data-anim="in"] .je-tags  { animation-delay: .09s; }
@keyframes jeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Panel footer: progress + prev/next -------------------------------- */
.je-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  flex-wrap: wrap; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.je-bar { flex: 1 1 160px; height: 6px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; min-width: 120px; }
.je-bar > i { display: block; height: 100%; background: var(--ribbon); border-radius: inherit; transition: width .3s var(--ease); }
.je-nav { display: flex; gap: var(--s-2); }
.je-btn {
  appearance: none; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--heading);
  border-radius: var(--r-pill); padding: .5em 1.1em;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.je-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.je-btn:disabled { opacity: .4; cursor: not-allowed; }

/* --- The full-list fallback / "show everything" view -------------------- */
.je-source { margin-top: var(--s-5); }
.has-js .je-source { display: none; }
.has-js .je-source.is-open { display: block; }
.je-source .je-journey + .je-journey { margin-top: var(--s-6); }
.je-source h4 { margin-bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.je-toggle-all { margin-top: var(--s-3); }

@media (max-width: 620px) {
  .je-step { width: 92px; }
  .je-panel { padding: var(--s-4); }
  .je-foot { padding: var(--s-3) var(--s-4); }
}

/* ==========================================================================
   8b. BACK TO TOP
   Appears once the reader is a screen or so down. It is an <a href="#top">,
   so it still works with JavaScript off — JS only controls when it shows and
   moves focus, which a plain anchor cannot do reliably.
   ========================================================================== */

.to-top {
  position: fixed;
  right: max(var(--s-5), env(safe-area-inset-right));
  bottom: max(var(--s-5), env(safe-area-inset-bottom));
  z-index: 40;

  /* 48px square: comfortably over the 44px minimum touch target. */
  width: 48px; height: 48px;
  display: grid; place-items: center;

  background: var(--surface);
  color: var(--heading);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--sh-2);
  text-decoration: none;
  cursor: pointer;

  transition: opacity .22s var(--ease), transform .22s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease);
}
.to-top svg { width: 20px; height: 20px; }

.to-top:hover {
  color: #fff;
  background: var(--ribbon-round) border-box;
  border-color: transparent;
  transform: translateY(-2px);
}
.to-top:focus-visible { outline: 3px solid var(--grad-violet); outline-offset: 3px; }

/* Without JS the class below is never added, so the link simply stays put
   and works as an anchor. With JS we hide it until it is useful. */
.has-js .to-top {
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
}
.has-js .to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .to-top, .has-js .to-top { transition: opacity .15s linear; transform: none; }
  .to-top:hover { transform: none; }
}

/* Give the target of the jump a focus ring we do not want to see. */
[tabindex="-1"]:focus { outline: none; }

@media print { .to-top { display: none; } }

/* ==========================================================================
   8c. PEOPLE
   Two components, because two very different problems.

   .person  — leadership. A handful of people, each worth a photo, a role and
              a sentence. Hand-written in the page. Scales to ~15 before it
              starts to feel like a wall.
   .roster  — the community roll. Hundreds to a thousand names, rendered from
              assets/data/people.json with search and filters. Never write
              these by hand, and never give them cards: a thousand cards is
              unreadable and unscrollable.
   ========================================================================== */

/* --- Leadership --------------------------------------------------------- */
.people { display: grid; gap: var(--s-4); }
@media (min-width: 660px)  { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .people { grid-template-columns: repeat(3, 1fr); } }

.person {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.person-avatar {
  /* A circle. This was an arch, 72x88 with rounded top corners and a square
     base: a shape that, drawn around a person's face and outlined with a thin
     ring, reads as a headstone. Nobody intends that and everybody sees it. A
     circle carries no such reading at any size, and the page already has the
     bloom motif doing the decorative work. */
  width: 80px; height: 80px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--ribbon-round); color: #fff;
  font-family: var(--font-serif); font-size-adjust: var(--serif-adjust); font-weight: 600; font-size: 1.45rem; letter-spacing: .01em;
  /* No ring. The halo and hairline were there to stop a photo looking cut
     out of the card, but an outline around a portrait is most of what made
     the old shape funereal. A circle holds its own edge. */
  box-shadow: none;
}
img.person-avatar { object-fit: cover; }

/* A photo, once one exists, fills the avatar and covers the initials. Until
   then the initials stand on their own — see initPeoplePhotos() in wip.js,
   which only inserts the <img> after it has loaded, so there is never a
   broken image or a layout shift. */
.person-avatar { position: relative; }
.person-avatar > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}

/* A leader who sits alone in her group (the founder) would otherwise be a
   lone narrow card in a three-column grid. Span the row and go horizontal. */
.person-feature { grid-column: 1 / -1; }
@media (min-width: 660px) {
  .person-feature {
    display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-5); align-items: start;
  }
  .person-feature .person-avatar { width: 100px; height: 100px; font-size: 1.7rem; grid-row: 1 / span 3; }
  .person-feature .person-bio,
  .person-feature .person-links { grid-column: 2; }
  .person-feature .person-links { margin-top: var(--s-3); padding-top: 0; }
}
.person-name { font-family: var(--font-serif); font-size-adjust: var(--serif-adjust); font-size: 1.25rem; font-weight: 700; color: var(--heading); }
.person-role {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-top: 2px;
}
.person-bio { font-size: 0.9375rem; color: var(--ink-2); }
.person-links { display: flex; gap: var(--s-3); font-size: var(--t-sm); margin-top: auto; padding-top: var(--s-2); }

/* --- Community roll ----------------------------------------------------- */
.roster-controls {
  display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
  padding: var(--s-4); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.input {
  flex: 1 1 220px; min-width: 0;
  font-family: var(--font-body); font-size: var(--t-base);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .6em 1.1em;
}
.input::placeholder { color: var(--ink-3); }
.input:focus-visible { outline: 3px solid var(--grad-violet); outline-offset: 1px; }

.roster-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
  appearance: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: .45em 1em;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover { color: var(--heading); border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--solid); color: #fff; border-color: transparent; }
:root[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--solid); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip[aria-pressed="true"] { background: var(--solid); }
}

.roster-count { width: 100%; font-size: var(--t-sm); color: var(--ink-3); margin: 0; }

/* Dense multi-column list. At 1,000 names this stays scannable where a grid
   of cards would not. Column count follows the viewport. */
.roster {
  list-style: none; padding: 0; margin-top: var(--s-4); max-width: none;
  display: grid; gap: 0 var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.roster > li {
  margin: 0; padding: .5em 0; border-bottom: 1px solid var(--line-soft);
  font-size: 0.9375rem; line-height: 1.35;
}
.roster .r-name { color: var(--ink); }
.roster .r-meta { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 1px; }
.roster mark { background: var(--joint-wash); color: var(--accent); border-radius: 3px; padding: 0 .15em; }

.roster-empty {
  padding: var(--s-6); text-align: center; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: var(--r-md); margin-top: var(--s-4);
}

@media print { .roster-controls { display: none; } }

/* ==========================================================================
   9. UTILITIES
   ========================================================================== */

.stack    > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-6); }
.row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.center { text-align: center; }
.center p, .center ul { margin-inline: auto; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   10. PRINT
   Members print the cohort calendar. Print the full journeys, not the widget.
   ========================================================================== */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .masthead { background: #fff !important; color: #000; border-bottom: 2px solid #042559; padding-block: 1rem; }
  .masthead h1, .masthead .standfirst, .masthead .meta, .masthead .lockup-name, .masthead .lockup-sub { color: #000; }
  .masthead .kicker { color: #042559; -webkit-text-fill-color: #042559; }
  .masthead-nav, .skip-link, .btn, .theme-toggle, .jump { display: none; }

  /* Print the source journeys in full; drop the interactive shell. */
  .je-controls, .je-stage, .je-toggle-all { display: none !important; }
  .je-source, .has-js .je-source { display: block !important; }

  .card, .callout, details.faq, .je-source { box-shadow: none; break-inside: avoid; }
  .timeline > li { break-inside: avoid; }
  details.faq { border: 1px solid #ccc; }
  details.faq > summary::after { content: ""; }
  table { min-width: 0; font-size: 9pt; }
  thead th { position: static; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
}