/* ===========================================================================
   Multidimensional Resilience — shared site styles
   Built on the FPR Design System (tokens copied from theme.css).
   Self-contained @font-face (paths relative to /assets/).
   =========================================================================== */

/* ── Brand fonts ─────────────────────────────────────────────────────── */
@font-face { font-family: "Gotham"; font-weight: 300; font-style: normal;
  src: url("fonts/Gotham-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Gotham"; font-weight: 400; font-style: normal;
  src: url("fonts/Gotham-Book.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Gotham"; font-weight: 500; font-style: normal;
  src: url("fonts/Gotham-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gotham"; font-weight: 700; font-style: normal;
  src: url("fonts/Gotham-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Gotham"; font-weight: 800; font-style: normal;
  src: url("fonts/Gotham-Black.otf") format("opentype"); font-display: swap; }

:root {
  /* FPR palette — ten approved values */
  --color-primary:               #2f89a2;
  --color-on-primary:            #ffffff;
  --color-primary-container:     #e6f0f4;
  --color-on-primary-container:  #1a4f5f;
  --color-secondary:             #3c4141;
  --color-on-secondary:          #f1f1f1;
  --color-tertiary:              #f04e37;
  --color-on-tertiary:           #ffffff;
  --color-tertiary-container:    #d83e29;
  --color-neutral:               #f1f1f1;
  --color-on-neutral:            #3c4141;
  --color-surface:               #ffffff;
  --color-accent-action:         #fbaf16;
  --color-on-accent-action:      #3c4141;
  --color-accent-growth:         #b0ca5e;
  --color-on-accent-growth:      #3c4141;
  --color-gray-mid:              #808185;
  --color-gray-border:           #bcbebf;
  --color-gray-input:            #d0d3d4;
  --color-gray-divider:          #e6e7e7;

  /* ── Six focus-area accents ──────────────────────────────────────────
     Brand colors where they map; purple + orange derived harmoniously in
     the same muted register (purple is NOT a stock FPR value).            */
  /* Per-area accents sampled exactly from the Multidimensional Resilience hexagon
     logos. ink = text on the accent: white on the darker hues, charcoal on the
     light ones (education gold, health green) for legibility. */
  --fa-economic:   #307cbe;  --fa-economic-ink:   #ffffff;  --fa-economic-tint:   #e4eef7;
  --fa-infra:      #2aa2b7;  --fa-infra-ink:      #ffffff;  --fa-infra-tint:      #ddf0f2;
  --fa-housing:    #f47e3a;  --fa-housing-ink:    #ffffff;  --fa-housing-tint:    #fde7da;
  --fa-education:  #fac23c;  --fa-education-ink:  #2a2e2e;  --fa-education-tint:  #fef2d3;
  --fa-health:     #92c84f;  --fa-health-ink:     #2a2e2e;  --fa-health-tint:     #eef7df;
  --fa-environment:#1c7a7b;  --fa-environment-ink:#ffffff;  --fa-environment-tint:#d8ebe9;

  /* Type */
  --font-primary: "Gotham", "Roboto", system-ui, sans-serif;
  --font-display: "Gotham", "Roboto", system-ui, sans-serif;
  --text-display: 4rem;  --text-h1: 3rem;  --text-h2: 2rem;  --text-h3: 1.5rem;
  --text-h4: 1.25rem;  --text-body-md: 1rem;  --text-body-sm: .875rem;
  --text-label-caps: .75rem;  --text-quote: 1.5rem;
  --leading-display: 1.05; --leading-h1: 1.10; --leading-body-md: 1.50;
  --tracking-label-caps: .08em;
  --fw-book: 400; --fw-medium: 500; --fw-bold: 600; --fw-black: 600; --fw-light: 300;

  /* Spacing */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;

  /* Radii + elevation */
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px;
  --shadow-card:  0 1px 3px rgba(60,65,65,.08);
  --shadow-modal: 0 10px 30px rgba(60,65,65,.18);
  --backdrop: rgba(60,65,65,.40);

  --maxw: 1200px;
}

/* ── Base ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-neutral);
  color: var(--color-secondary);
  font-family: var(--font-primary);
  font-weight: var(--fw-light);
  -webkit-font-smoothing: antialiased;
  line-height: var(--leading-body-md);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-lg); }

.eyebrow {
  font-size: var(--text-label-caps); font-weight: var(--fw-medium);
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary);
}
.display {
  font-family: var(--font-display); font-weight: var(--fw-black); text-transform: uppercase;
  line-height: var(--leading-display); letter-spacing: .01em;
}

/* ── Top nav (shared) ────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; background: #fff;
  border-bottom: 1px solid var(--color-gray-divider); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--space-lg);
  display: flex; align-items: center; gap: var(--space-lg); }
.nav .logo img { height: 44px; }
.nav .menu { list-style: none; display: flex; gap: var(--space-md); flex: 1; align-items: center; }
.nav .menu a { font-size: var(--text-label-caps); font-weight: var(--fw-medium);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-secondary);
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color 200ms; white-space: nowrap; }
.nav .menu a:hover { color: var(--color-primary); }
.nav .menu a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.nav .nav-cta { background: var(--color-accent-action); color: var(--color-on-accent-action); border: 0;
  padding: 10px 18px; font-family: inherit; font-size: var(--text-label-caps);
  font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--radius-md); cursor: pointer; text-decoration: none; }
.nav .nav-cta:hover { background: #e59f0a; }
.nav .logo { display: flex; align-items: center; flex: none; }

/* Area logo marks are full-color hexagon badges (transparent PNGs) — show them on a
   transparent container instead of the old accent/tint fill used by the mono glyph. */
.fa-mark { display: block; width: 100%; height: 100%; object-fit: contain; }
.row .ric, .area-nav a .an-dot, .matrix .colhead .chip { background: transparent !important; }

/* Focus Areas dropdown */
.nav .has-drop { position: relative; }
.nav .has-drop > a .caret { display: inline-block; margin-left: 5px; font-size: 9px;
  transform: translateY(-1px); transition: transform 200ms; }
.nav .has-drop:hover > a .caret, .nav .has-drop:focus-within > a .caret { transform: translateY(-1px) rotate(180deg); }
.nav .drop { position: absolute; top: calc(100% + 10px); left: -16px; min-width: 280px;
  background: #fff; border: 1px solid var(--color-gray-divider); border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: opacity 180ms, transform 180ms, visibility 180ms; z-index: 60; }
/* Invisible bridge across the 10px gap so moving the cursor from the nav item to
   the menu doesn't drop the :hover and collapse the dropdown. */
.nav .drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav .has-drop:hover .drop, .nav .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.nav .drop a { display: flex; align-items: center; padding: 11px 14px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: var(--fw-medium);
  letter-spacing: 0; text-transform: none; border: 0; color: var(--color-secondary);
  transition: background 180ms, color 180ms; }
.nav .drop a:hover { background: var(--dc, var(--color-primary)); color: #fff; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn { font-family: inherit; font-size: var(--text-label-caps); font-weight: var(--fw-medium);
  letter-spacing: .08em; text-transform: uppercase; border-radius: var(--radius-md);
  padding: 13px 26px; cursor: pointer; border: 0; transition: background 200ms, color 200ms; }
.btn-primary { background: var(--color-tertiary); color: #fff; }
.btn-primary:hover { background: var(--color-tertiary-container); }
.btn-ghost { background: transparent; color: var(--color-primary);
  border: 2px solid var(--color-primary); padding: 11px 24px; }
.btn-ghost:hover { background: var(--color-primary); color: #fff; }

/* ── Chart placeholder frame ─────────────────────────────────────────── */
.chart-ph {
  position: relative; background: #fff; border: 1px solid var(--color-gray-divider);
  border-radius: var(--radius-md); padding: var(--space-lg) var(--space-lg) var(--space-lg) 56px;
  aspect-ratio: 16/9; display: flex; flex-direction: column;
}
.chart-ph .chart-head { display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md); }
.chart-ph .chart-tag { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-gray-mid); }
.chart-ph .chart-dot { width: 9px; height: 9px; border-radius: var(--radius-pill);
  background: var(--ph-accent, var(--color-primary)); }
.chart-ph .plot { position: relative; flex: 1; border-left: 2px solid var(--color-gray-border);
  border-bottom: 2px solid var(--color-gray-border);
  background-image: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--color-gray-divider) calc(25% - 1px) 25%);
}
.chart-ph .yax, .chart-ph .xax { position: absolute; font-size: 10px; color: var(--color-gray-mid);
  letter-spacing: .04em; text-transform: uppercase; }
.chart-ph .yax { left: -44px; top: 50%; transform: rotate(-90deg) translateX(50%);
  transform-origin: left center; white-space: nowrap; }
.chart-ph .xax { bottom: -22px; left: 0; }
.chart-ph .ph-note { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--color-gray-border); font-size: var(--text-body-sm);
  font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; gap: 8px; }

/* ── Image placeholder ───────────────────────────────────────────────── */
.img-ph { position: relative; background:
    repeating-linear-gradient(45deg, var(--color-gray-divider) 0 12px, #ededed 12px 24px);
  border: 1px solid var(--color-gray-border); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-gray-mid); font-size: var(--text-label-caps); font-weight: var(--fw-medium);
  letter-spacing: .1em; text-transform: uppercase; }
.img-ph svg { width: 28px; height: 28px; opacity: .5; margin-right: 8px; }

/* ── Footer (shared) ─────────────────────────────────────────────────── */
.site-foot { background: var(--color-secondary); color: rgba(255,255,255,.82);
  padding: var(--space-4xl) var(--space-lg) var(--space-xl); margin-top: var(--space-4xl); }
/* Focus-area pages close with the full-width prev/next nav, so the footer
   sits flush against it — no empty band. */
body[data-active="focus"] .site-foot { margin-top: 0; }
.site-foot .foot-inner { max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-2xl); }
.site-foot img.flogo { height: 42px; filter: brightness(0) invert(1); margin-bottom: var(--space-md); }
.site-foot .foot-logos { display: flex; align-items: center; gap: 16px; margin-bottom: var(--space-md); }
.site-foot .foot-logos img.flogo { margin-bottom: 0; }
.site-foot .foot-logos img.mlogo { height: 46px; }
/* WCRP program lockup beside the FPR logo. Whitened with the same filter the FPR
   mark uses, so both read identically on the dark footer; the source PNG's
   transparent areas — including the holes in the three pins — stay transparent. */
.site-foot .foot-logos img.wlogo { height: 76px; filter: brightness(0) invert(1); margin-bottom: 0; }
/* The WCRP lockup is a square stack (mark over three lines of type) while the FPR
   logo is a horizontal wordmark, so it needs more height to sit at equal weight. */
.site-foot .foot-logos { gap: 20px; }
.site-foot .foot-div { width: 1px; height: 34px; background: rgba(255,255,255,.25); flex: none; }
.site-foot p { font-size: var(--text-body-sm); max-width: 34ch; line-height: 1.5; }
.site-foot h5 { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em;
  text-transform: uppercase; color: #fff; margin-bottom: var(--space-md); }
.site-foot ul { list-style: none; display: grid; gap: var(--space-sm); }
.site-foot ul a { font-size: var(--text-body-sm); color: rgba(255,255,255,.7); }
.site-foot ul a:hover { color: #fff; }
.site-foot .foot-bottom { max-width: var(--maxw); margin: var(--space-xl) auto 0;
  padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,.15);
  font-size: var(--text-label-caps); color: rgba(255,255,255,.5); }

/* ── Initiative cards + expand-to-modal ──────────────────────────────── */
.init-card { background: #fff; border: 1px solid var(--color-gray-divider);
  border-radius: var(--radius-md); padding: var(--space-lg); cursor: pointer;
  text-align: left; font-family: inherit; color: inherit; width: 100%;
  display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: transform 200ms, box-shadow 200ms, border-color 200ms; }
.init-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(60,65,65,.12);
  border-color: var(--fa); background: var(--fa-tint); }
.init-bar:hover { background: var(--fa-tint); }
.init-card:focus-visible { outline: 3px solid var(--fa); outline-offset: 2px; }
.init-card .tag { align-self: flex-start; font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--fa);
  background: var(--fa-tint); padding: 5px 10px; border-radius: var(--radius-sm); }
.init-card h4 { font-size: 19px; font-weight: var(--fw-bold); line-height: 1.25; }
.init-card p { font-size: 14.5px; line-height: 1.55; color: var(--color-gray-mid); flex: 1; }
.init-card .expand { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 12px; font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase;
  color: var(--fa); }
.init-card .expand .plus { width: 22px; height: 22px; border-radius: var(--radius-pill);
  border: 2px solid var(--fa); display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; }

/* Modal */
.init-overlay { position: fixed; inset: 0; background: var(--backdrop); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 5vh 24px;
  overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 200ms; }
.init-overlay.open { opacity: 1; pointer-events: auto; }
.init-modal { background: #fff; border-radius: var(--radius-lg); max-width: 760px; width: 100%;
  max-height: 94vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-modal); overflow: hidden; transform: translateY(12px) scale(.985);
  transition: transform 280ms cubic-bezier(.4,0,.2,1); border-top: 5px solid var(--fa); }
.init-overlay.open .init-modal { transform: none; }
.init-modal .m-head { padding: var(--space-xl) var(--space-xl) 0; position: relative; flex: 0 0 auto; }
.init-modal .m-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-gray-border); background: #fff;
  cursor: pointer; font-size: 18px; color: var(--color-secondary); display: flex;
  align-items: center; justify-content: center; transition: background 200ms; }
.init-modal .m-close:hover { background: var(--color-neutral); }
.init-modal .m-tag { display: inline-block; font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--fa); background: var(--fa-tint);
  padding: 5px 10px; border-radius: var(--radius-sm); margin-bottom: 14px; }
.init-modal .m-phase { display: inline-block; margin: 0 8px 14px 0; font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--fa); background: var(--fa-tint);
  padding: 5px 11px; border-radius: 999px; }
.init-modal .m-phase[hidden] { display: none; }
/* Areas of Overlap — the initiative's cross-section references. Each area is a
   live link to that focus area; "All areas" and Governance have no focus page
   of their own, so they render as plain chips. */
.init-modal .m-overlap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 2px 0 16px; }
.init-modal .m-overlap .ov-label { font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-gray-mid); }
.init-modal .m-overlap a, .init-modal .m-overlap span.ov { display: inline-flex; align-items: center;
  gap: 6px; font-size: 12px; font-weight: var(--fw-medium); color: var(--color-secondary);
  background: var(--color-neutral); border-radius: var(--radius-pill); padding: 5px 12px;
  text-decoration: none; transition: background 200ms, color 200ms; }
.init-modal .m-overlap a { color: var(--ov-c, var(--color-secondary)); }
.init-modal .m-overlap a::after { content: '→'; font-size: 11px; opacity: .55; }
.init-modal .m-overlap a:hover { background: var(--ov-tint, var(--color-neutral)); }
.init-modal .m-overlap a:hover::after { opacity: 1; }
.init-modal .m-overlap .ovdot { width: 9px; height: 9px; border-radius: var(--radius-pill);
  background: var(--ov-c, var(--color-gray-mid)); flex: none; }
.init-modal .m-overlap[hidden] { display: none; }
.init-modal h3 { font-size: 30px; font-weight: var(--fw-black); line-height: 1.12;
  letter-spacing: -.01em; max-width: 22ch; }
.init-modal .m-meta { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.init-modal .m-listen { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13px; font-weight: var(--fw-bold); color: var(--fa); background: var(--fa-tint);
  border: none; border-radius: var(--radius-pill); padding: 7px 14px; transition: filter 200ms; }
.init-modal .m-listen:hover { filter: brightness(.96); }
.init-modal .m-listen svg { width: 15px; height: 15px; }
.init-modal .m-listen .ic-stop { display: none; }
.init-modal .m-listen.listening .ic-play { display: none; }
.init-modal .m-listen.listening .ic-stop { display: inline; }
.init-modal .m-readtime { font-size: 12.5px; color: var(--color-secondary); }

/* Standalone "Listen + read time" bar (FPRReadAloud) — used on the focus-area
   heroes and the cross-cutting theme pages. Mirrors the modal's control, but
   takes its accent from whichever page it sits on: --fa on a focus area,
   --tc on a theme page. */
.readbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.readbar .m-listen { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: var(--fw-bold);
  color: var(--ra, var(--color-primary)); background: var(--ra-tint, var(--color-primary-container));
  border: none; border-radius: var(--radius-pill); padding: 7px 14px; transition: filter 200ms; }
.readbar .m-listen:hover { filter: brightness(.96); }
.readbar .m-listen svg { width: 15px; height: 15px; }
.readbar .m-listen .ic-stop { display: none; }
.readbar .m-listen.listening .ic-play { display: none; }
.readbar .m-listen.listening .ic-stop { display: inline; }
.readbar .m-readtime { font-size: 12.5px; color: var(--color-gray-mid); }
/* Both heroes sit on a saturated accent, where the tint fill and grey read-time
   would disappear — invert to the hero's own ink color instead. `--tc-ink` and
   `--fa-ink` are already chosen for legibility on that background, so this works
   on the light themes (education gold, lime) as well as the dark ones. */
.fhero .readbar, .tphero .readbar { margin-top: 18px; }
.fhero .readbar .m-listen { color: var(--fa-ink, #fff); background: rgba(255,255,255,.18); }
.tphero .readbar .m-listen { color: var(--tc-ink, #fff); background: rgba(255,255,255,.2); }
.fhero .readbar .m-listen:hover, .tphero .readbar .m-listen:hover { background: rgba(255,255,255,.3); filter: none; }
.fhero .readbar .m-readtime { color: var(--fa-ink, #fff); opacity: .85; }
.tphero .readbar .m-readtime { color: var(--tc-ink, #fff); opacity: .85; }
.init-modal .m-img { margin: var(--space-lg) var(--space-xl) 0; height: clamp(130px, 18vh, 200px); overflow: hidden; border-radius: var(--radius-md); flex: 0 0 auto; }
.init-modal .m-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Report diagrams carry their meaning in their full frame — never crop them to
   the photo strip. Show whole, scrolling past 42vh like .m-img-block. */
.init-modal .m-img-diagram { height: auto; max-height: 42vh; overflow-y: auto; }
.init-modal .m-img-diagram img { height: auto; object-fit: contain; }
/* One scrollbar for the whole modal body. The prose and the Key elements panel
   used to scroll independently, which put two sliders side by side and made the
   reader choose which column to move. */
/* Single column: the Key elements panel that used to sit beside the prose has
   been removed, so the writing gets the full width. */
.init-modal .m-body { padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.init-modal .m-body .prose { min-height: 0; }
/* Getting space after the last line needs a real box: inside this grid-item-in-a-
   flex-scroller, the container's padding-bottom, the column's padding and a
   trailing margin all fail to extend the scroll. A generated block with height
   cannot collapse, so it always shows. */
.init-modal .m-body .prose::after { content: ''; display: block; height: var(--space-xl); }
.init-modal .m-body .prose p { font-size: 15px; line-height: 1.65; color: var(--color-secondary);
  margin-bottom: 14px; }
.init-modal .m-body .prose strong { font-weight: 700; }
.init-modal .prose ul.m-points { list-style: none; display: grid; gap: 12px; margin: 4px 0 14px; padding: 0; }
.init-modal .prose ul.m-points li { font-size: 15px; line-height: 1.6; color: var(--color-secondary); padding-left: 16px; position: relative; }
.init-modal .prose ul.m-points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--fa); }
.init-modal .prose figure.m-fig { margin: 6px 0 18px; }
.init-modal .prose figure.m-fig img { display: block; width: 100%; height: auto;
  border-radius: var(--radius-md); border: 1px solid var(--color-gray-divider); }
.init-modal .prose figure.m-fig figcaption { font-size: 12px; color: var(--color-gray-mid);
  margin-top: 8px; text-align: center; }
.init-modal .prose .skills-fig { margin: 6px 0 18px; }
.init-modal .prose .skills-cap { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--fa); margin-bottom: 8px; }
.init-modal .prose .skills-tbl { border-collapse: collapse; width: 100%; }
.init-modal .prose .skills-tbl td { font-size: 12.5px; line-height: 1.5; vertical-align: top; padding: 9px 10px; border-top: 1px solid var(--color-gray-border); }
.init-modal .prose .skills-tbl tr:first-child td { border-top: none; }
.init-modal .prose .skills-tbl td.cat { font-weight: 700; color: var(--color-primary); width: 40%; }
.init-modal .prose .skills-tbl td.sk { color: var(--color-secondary); }
.init-modal .m-img-block { height: auto; max-height: 42vh; overflow-y: auto; background: none; border-radius: 0; }
.init-modal .hub-fw { border-collapse: collapse; width: 100%; table-layout: fixed; }
.init-modal .hub-fw th, .init-modal .hub-fw td { width: 25%; }
.init-modal .hub-fw th { background: var(--fa-tint); color: var(--color-primary);
  font-size: 13.5px; font-weight: 700; text-align: left; padding: 9px 11px; border: 2px solid #fff; line-height: 1.2; }
.init-modal .hub-fw td { font-size: 11.5px; line-height: 1.45; color: var(--color-secondary);
  padding: 10px 11px; border: 1px solid var(--color-gray-border); vertical-align: top; }
/* Staggered "arrival" of each column when the modal opens */
@keyframes hubCellIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.init-modal .hub-fw th, .init-modal .hub-fw td { animation: hubCellIn .45s cubic-bezier(.4,0,.2,1) both; }
.init-modal .hub-fw th:nth-child(1), .init-modal .hub-fw td:nth-child(1) { animation-delay: .05s; }
.init-modal .hub-fw th:nth-child(2), .init-modal .hub-fw td:nth-child(2) { animation-delay: .18s; }
.init-modal .hub-fw th:nth-child(3), .init-modal .hub-fw td:nth-child(3) { animation-delay: .31s; }
.init-modal .hub-fw th:nth-child(4), .init-modal .hub-fw td:nth-child(4) { animation-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
  .init-modal .hub-fw th, .init-modal .hub-fw td { animation: none; }
}
.init-modal .m-body .prose a { color: var(--fa); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.init-modal .m-body .prose a:hover { text-decoration: none; }
.init-modal .m-facts { background: var(--color-neutral); border-radius: var(--radius-md);
  padding: var(--space-lg); align-self: start; min-height: 0; }
.init-modal .m-facts h5 { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-gray-mid); margin-bottom: 12px; }
.init-modal .m-facts ul { list-style: none; display: grid; gap: 12px; }
.init-modal .m-facts li { font-size: 14px; line-height: 1.4; padding-left: 18px; position: relative; }
.init-modal .m-facts li::before { content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: var(--radius-sm); background: var(--fa); }
body.modal-open { overflow: hidden; }

@media (max-width: 720px) {
  .init-modal .m-body { grid-template-columns: 1fr; overflow-y: auto; }
  .init-modal .m-body .prose { overflow-y: visible; padding-right: 0; }
  .init-modal .m-facts { max-height: none; overflow-y: visible; }
}
/* Short viewports: let the whole modal scroll as one, instead of squeezing
   the body between a fixed header and a fixed facts panel. */
@media (max-height: 720px) {
  .init-modal { overflow-y: auto; }
  .init-modal .m-body { overflow: visible; flex: 0 0 auto; }
  .init-modal .m-body .prose { overflow-y: visible; padding-right: 0; }
  .init-modal .m-facts { max-height: none; overflow-y: visible; }
  .init-modal .m-img-block, .init-modal .m-img-diagram { max-height: none; overflow: visible; }
}

/* ── Scroll reveal (editorial fade-up) ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}