/* ══════════════════════════════════════════════════════════════════
   Cas d'estudi · SIDBRINT
   ------------------------------------------------------------------
   Scoped stylesheet for casos/sidbrint.html. Namespaced `--sb-*` /
   `.sb-*` so nothing leaks into site.css. The Punt Zero chrome (nav +
   footer) keeps its own tokens and fonts; only the case-study body
   takes on the project's identity.

   Palette and typeface lifted from sidbrint.ub.edu (frontend_sidbrint):
     #A237B5 brand violet · #7E2390 deep violet · #C28BF8 lilac
     choropleth ramp #E8D3EE → #4A1060 · #D9822B ochre (dones)
     Albert Sans
   The night base (#160E1B) is ours: an aubergine dark that lets the
   violet ramp glow the way it does in SIDBRINT's own "en xifres" band.
   The page alternates night and paper so the reader moves from the
   archive (light, quiet) to the data (dark, luminous) and back.

   Contrast, measured:
     #A237B5 on #FAF8FB  5.30:1     #7E2390 on #FAF8FB  7.86:1
     #C28BF8 on #160E1B  7.50:1     #B9AEC2 on #160E1B  8.89:1
     #FAF8FB on #160E1B 17.87:1     #6E6675 on #FAF8FB  5.20:1
     #D9822B on #160E1B  6.45:1     #F2C14E on #160E1B 11.25:1
   #A237B5 is only 3.37:1 on the night base, so there it is reserved
   for graphics; text on night uses the lilac.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --sb-violet:     #A237B5;
  --sb-violet-700: #7E2390;
  --sb-violet-900: #4A1060;
  --sb-lilac:      #C28BF8;
  --sb-lilac-lt:   #E2C8FF;
  --sb-lilac-100:  #EDDCFD;
  --sb-lilac-50:   #F6EDF8;
  --sb-orchid:     #C56FD8;   /* violet lifted for the night base, 5.97:1 */

  /* choropleth ramp, exactly as SIDBRINT paints its world map */
  --sb-r1: #E8D3EE;
  --sb-r2: #D7AEE2;
  --sb-r3: #C285D3;
  --sb-r4: #A85BBE;
  --sb-r5: #8B3BA3;
  --sb-r6: #6C2483;
  --sb-r7: #4A1060;

  --sb-ochre:  #D9822B;   /* dones · esdeveniments */
  --sb-gold:   #F2C14E;   /* estada a Espanya */
  --sb-teal:   #4FB8B0;   /* unitats */

  --sb-ink:    #2B2530;
  --sb-soft:   #6E6675;
  --sb-line:   #ECE6EF;
  --sb-line-2: #DCD3E1;
  --sb-paper:  #FAF8FB;
  --sb-white:  #FFFFFF;

  --sb-night:   #160E1B;
  --sb-night-2: #1E1426;
  --sb-night-3: #2A1D33;
  --sb-mist:    #B9AEC2;
  --sb-line-nt: rgba(226, 200, 255, .14);

  --sb-font: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sb-wrap: 1240px;
  --sb-pad:  clamp(20px, 4vw, 64px);
  --sb-radius: 14px;
  --sb-ease: cubic-bezier(.16, 1, .3, 1);
  --sb-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ── Base ─────────────────────────────────────────────────────────── */

.sb {
  background: var(--sb-paper);
  color: var(--sb-ink);
  font-family: var(--sb-font);
  font-size: clamp(17px, 1.45vw, 19.5px);
  line-height: 1.62;
  overflow-x: clip;
}

.sb-wrap {
  width: 100%;
  max-width: var(--sb-wrap);
  margin-inline: auto;
  padding-inline: var(--sb-pad);
}

/* Setting `display` on a class outranks the UA rule behind the `hidden`
   attribute, so restore it inside this namespace. */
.sb [hidden] { display: none !important; }

.sb-sec { padding-block: clamp(84px, 10vw, 150px); position: relative; }
.sb-sec--paper { background: var(--sb-paper); color: var(--sb-ink); }
.sb-sec--white { background: var(--sb-white); color: var(--sb-ink); }
.sb-sec--lilac { background: var(--sb-lilac-50); color: var(--sb-ink); }
.sb-sec--night { background: var(--sb-night); color: var(--sb-paper); }
.sb-sec--night-2 { background: var(--sb-night-2); color: var(--sb-paper); }

/* ── Type ─────────────────────────────────────────────────────────── */

.sb-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pz-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sb-violet-700);
  margin-bottom: 24px;
}
/* the little dot SIDBRINT puts before every section label */
.sb-kicker::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.sb-kicker--lt { color: var(--sb-lilac); }
.sb-kicker--plain::before { display: none; }

.sb-h2 {
  font-size: clamp(34px, 5.2vw, 74px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 17ch;
  margin-bottom: 34px;
  text-wrap: balance;
}
.sb-sec--night .sb-h2, .sb-sec--night-2 .sb-h2 { color: var(--sb-paper); }
.sb-h2 em { font-style: normal; color: var(--sb-violet); }
.sb-sec--night .sb-h2 em, .sb-sec--night-2 .sb-h2 em { color: var(--sb-lilac); }
.sb-h2--big { font-size: clamp(40px, 7vw, 108px); max-width: 15ch; }

.sb-h3 {
  font-size: clamp(23px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.sb-lead {
  font-size: clamp(19px, 1.75vw, 25px);
  line-height: 1.46;
  max-width: 58ch;
  color: var(--sb-soft);
  margin-bottom: 44px;
}
.sb-sec--night .sb-lead, .sb-sec--night-2 .sb-lead { color: var(--sb-mist); }

.sb-p { max-width: 60ch; margin-bottom: 20px; color: var(--sb-soft); }
.sb-p strong { font-weight: 700; color: var(--sb-ink); }
.sb-sec--night .sb-p, .sb-sec--night-2 .sb-p { color: var(--sb-mist); }
.sb-sec--night .sb-p strong, .sb-sec--night-2 .sb-p strong { color: var(--sb-paper); }
.sb-p a, .sb-lead a {
  color: inherit;
  text-decoration-color: var(--sb-violet);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.sb-sec--night .sb-p a { text-decoration-color: var(--sb-lilac); }

.sb-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 72px);
}

.sb-mark {
  font-weight: 700;
  color: var(--sb-violet-700);
  background: linear-gradient(transparent 62%, var(--sb-lilac-100) 62%);
}
.sb-sec--night .sb-mark, .sb-hero .sb-mark {
  color: var(--sb-lilac-lt);
  background: linear-gradient(transparent 84%, rgba(194, 139, 248, .55) 84%);
}

.sb-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sb-soft);
}
.sb-sec--night .sb-note, .sb-sec--night-2 .sb-note { color: var(--sb-mist); }

/* ── Buttons ──────────────────────────────────────────────────────── */

.sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: var(--sb-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .005em;
  text-decoration: none;
  transition: background 260ms var(--sb-ease), color 260ms var(--sb-ease),
              border-color 260ms var(--sb-ease), transform 260ms var(--sb-ease);
}
.sb-btn svg { width: 17px; height: 17px; flex: none; }

.sb-btn--solid {
  background: var(--sb-violet);
  color: var(--sb-white);
  border: 1px solid var(--sb-violet);
}
.sb-btn--solid:hover,
.sb-btn--solid:focus-visible { background: var(--sb-violet-700); border-color: var(--sb-violet-700); transform: translateY(-2px); }

.sb-btn--ghost {
  background: transparent;
  color: var(--sb-paper);
  border: 1px solid rgba(226, 200, 255, .32);
}
.sb-btn--ghost:hover,
.sb-btn--ghost:focus-visible { border-color: var(--sb-lilac); color: var(--sb-lilac-lt); transform: translateY(-2px); }

.sb-sec--paper .sb-btn--ghost,
.sb-sec--white .sb-btn--ghost,
.sb-sec--lilac .sb-btn--ghost { color: var(--sb-ink); border-color: var(--sb-line-2); }
.sb-sec--paper .sb-btn--ghost:hover,
.sb-sec--white .sb-btn--ghost:hover,
.sb-sec--lilac .sb-btn--ghost:hover { border-color: var(--sb-violet); color: var(--sb-violet-700); }

.sb :is(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--sb-lilac);
  outline-offset: 3px;
}
.sb-sec--paper :is(a, button, [tabindex]):focus-visible,
.sb-sec--white :is(a, button, [tabindex]):focus-visible,
.sb-sec--lilac :is(a, button, [tabindex]):focus-visible { outline-color: var(--sb-violet); }

.sb-link {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  font-weight: 700;
  color: var(--sb-violet-700);
  text-decoration: none;
  border-bottom: 2px solid var(--sb-lilac-100);
  padding-bottom: 2px;
  transition: border-color 220ms var(--sb-ease), gap 220ms var(--sb-ease);
}
.sb-link:hover { border-color: var(--sb-violet); gap: 12px; }

/* Visually hidden text that carries the data a chart shows. */
.sb-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Card (SIDBRINT's white panel, 18px radius, soft shadow) ─────── */

.sb-card {
  background: var(--sb-white);
  border: 1px solid var(--sb-line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(43, 37, 48, .08), 0 1px 3px rgba(43, 37, 48, .06);
  padding: clamp(18px, 2vw, 26px);
  color: var(--sb-ink);
  position: relative;
}
.sb-card__head { margin-bottom: 16px; }
.sb-card__head--row { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.sb-card__t { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 4px; }
.sb-card__d { font-size: 14.5px; line-height: 1.45; color: var(--sb-soft); max-width: 62ch; }

/* ── Memory meter · fixed, right edge ─────────────────────────────── */

.sb-meter {
  position: fixed;
  right: clamp(12px, 1.8vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #FFFFFF;
  font-family: var(--pz-font-mono);
}
.sb-meter__year { font-size: 12px; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sb-meter__label { font-size: 9.5px; letter-spacing: .2em; opacity: .7; }
.sb-meter__track {
  width: 2px;
  height: clamp(100px, 18vh, 168px);
  background: rgba(255, 255, 255, .3);
  position: relative;
  overflow: hidden;
}
.sb-meter__fill { position: absolute; inset: 0; background: #FFFFFF; transform: scaleY(0); transform-origin: top; }
@media (max-width: 1080px) { .sb-meter { display: none; } }

/* ── Anchor dock · glass pill, bottom centre ─────────────────────── */

.sb-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 60;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(30, 20, 38, .72);
  border: 1px solid rgba(226, 200, 255, .2);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 12px 32px rgba(22, 14, 27, .3);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 520ms var(--sb-ease), opacity 320ms var(--sb-ease);
  font-family: var(--sb-font);
}
.sb-dock.is-on, .sb-dock:focus-within { transform: translate(-50%, 0); opacity: 1; }
.sb-dock a:focus-visible { outline: 3px solid var(--sb-lilac-lt); outline-offset: 2px; }
.sb-dock a {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sb-lilac-lt);
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms var(--sb-ease), color 200ms var(--sb-ease);
}
.sb-dock a:hover { background: rgba(226, 200, 255, .12); }
.sb-dock a.is-current { background: var(--sb-lilac-lt); color: var(--sb-night); }
@media (max-width: 760px) { .sb-dock { display: none; } }

/* ── Hero ─────────────────────────────────────────────────────────── */

/* The hero is taller than the viewport: the stage sticks while the
   extra height drives the swarm from "origin" to "journey". */
.sb-hero {
  position: relative;
  height: 240vh;
  height: 240svh;
  background: var(--sb-night);
  color: var(--sb-paper);
}
.sb-hero__stage {
  /* sticks just under the shared nav (79px), so nothing hides behind it */
  position: sticky;
  top: 79px;
  height: calc(100vh - 79px);
  height: calc(100svh - 79px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: safe center;
}
@media (max-width: 900px) {
  .sb-hero { height: auto; }
  .sb-hero__stage { position: absolute; inset: 0; top: 0; height: auto; }
  .sb-hero__veil { background: linear-gradient(180deg, rgba(22, 14, 27, .92) 0%, rgba(22, 14, 27, .78) 55%, rgba(22, 14, 27, .55) 100%); }
}
.sb-swarm { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sb-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(22, 14, 27, .94) 0%, rgba(22, 14, 27, .72) 30%, rgba(22, 14, 27, .12) 52%, rgba(22, 14, 27, 0) 70%),
    radial-gradient(900px 420px at 88% -8%, rgba(162, 55, 181, .32), transparent 62%),
    radial-gradient(700px 360px at 0% 110%, rgba(126, 35, 144, .32), transparent 60%);
}
.sb-tricolor {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 3;
  height: 4px;
  display: flex;
}
.sb-tricolor i { flex: 1; transform: scaleX(0); transform-origin: left; animation: sb-grow-x 900ms var(--sb-ease) both; }
.sb-tricolor i:nth-child(1) { background: #E8343F; animation-delay: 200ms; }
.sb-tricolor i:nth-child(2) { background: #FFCF4D; animation-delay: 340ms; }
.sb-tricolor i:nth-child(3) { background: #A237B5; animation-delay: 480ms; }
@keyframes sb-grow-x { to { transform: none; } }

.sb-hero__inner {
  /* Overlays the pinned stage for the first screen, then scrolls away
     with the page: nothing is ever clipped, whatever the viewport. */
  position: relative;
  z-index: 2;
  margin-top: calc(-100vh + 79px);
  margin-top: calc(-100svh + 79px);
  min-height: calc(100svh - 79px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(40px, 7vh, 96px);
  padding-bottom: clamp(48px, 8vh, 96px);
}
@media (max-width: 900px) {
  .sb-hero__inner { margin-top: 0; min-height: 0; padding-bottom: 46svh; }
}
.sb-hero__title {
  font-size: clamp(64px, 13.5vw, 196px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.045em;
  overflow: hidden;
  padding-bottom: .06em;
  margin-bottom: 10px;
}
.sb-hero__word {
  display: inline-block;
  color: var(--sb-lilac);
  animation: sb-title-in 1200ms var(--sb-ease) 180ms both;
}
@keyframes sb-title-in { from { transform: translateY(102%); } to { transform: none; } }
.sb-hero__full {
  font-family: var(--pz-font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sb-mist);
  margin-bottom: clamp(26px, 3.4vw, 40px);
  animation: sb-fade-up 900ms var(--sb-ease) 700ms both;
}
.sb-hero__claim {
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.36;
  font-weight: 500;
  max-width: 31ch;
  color: var(--sb-paper);
  margin-bottom: clamp(32px, 4.4vw, 54px);
  animation: sb-fade-up 900ms var(--sb-ease) 940ms both;
}
@keyframes sb-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sb-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 28px;
  max-width: 820px;
  padding-block: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--sb-line-nt);
  border-bottom: 1px solid var(--sb-line-nt);
  margin-bottom: clamp(28px, 3.6vw, 44px);
  animation: sb-fade-up 900ms var(--sb-ease) 1100ms both;
}
@media (max-width: 900px) { .sb-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sb-meta__row { display: flex; flex-direction: column; gap: 6px; }
.sb-meta dt {
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sb-lilac);
}
.sb-meta dd { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--sb-paper); }
.sb-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; animation: sb-fade-up 900ms var(--sb-ease) 1240ms both; }
@media (min-width: 901px) and (max-width: 1360px) {
  .sb-meta { max-width: calc(100% - min(340px, 34vw) - 48px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Short laptop screens: the whole first screen still fits. */
@media (max-height: 940px) and (min-width: 901px) {
  .sb-hero__inner { padding-block: clamp(24px, 4vh, 48px) 24px; }
  .sb-hero__title { font-size: clamp(56px, 15vh, 150px); }
  .sb-hero__full { margin-bottom: 14px; }
  .sb-hero__claim { font-size: clamp(18px, 2.9vh, 26px); margin-bottom: 20px; }
  .sb-meta { padding-block: 14px; margin-bottom: 20px; }
}

.sb-hero__cap {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 4vw, 64px);
  bottom: clamp(26px, 5vh, 56px);
  width: min(340px, 34vw);
  min-height: 150px;
}
.sb-hero__capstate {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(30, 20, 38, .58);
  border: 1px solid rgba(226, 200, 255, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--sb-ease), transform 500ms var(--sb-ease);
}
.sb-hero__capstate.is-on { opacity: 1; transform: none; }
.sb-hero__capk {
  font-family: var(--pz-font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sb-gold);
  margin-bottom: 8px;
}
.sb-hero__capt { font-size: 15px; line-height: 1.45; color: var(--sb-paper); }
.sb-hero__capt b { color: var(--sb-lilac-lt); }
.sb-hero__capn { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--sb-mist); }
@media (max-width: 900px) {
  .sb-hero__cap { display: none; }
}

/* Second act: hidden until the journey is wired (desktop, motion on). */
.sb-hero__act { display: none; }
.sb-hero.is-journey .sb-hero__act {
  display: flex;
  align-items: center;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}
.sb-hero.is-journey .sb-hero__capstate[data-cap="1"] { display: none; }
.sb-hero__inner { will-change: opacity; }
.sb-hero__actk {
  font-family: var(--pz-font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sb-gold);
  margin-bottom: clamp(10px, 2vh, 22px);
}
.sb-hero__actm {
  font-family: var(--pz-font-mono);
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sb-lilac-lt);
  margin-bottom: 4px;
  min-height: 1.4em;
}
.sb-hero__actn {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(18px, 3.4vh, 36px);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
  color: var(--sb-mist);
}
.sb-hero__actv {
  font-size: clamp(64px, 9.5vw, 148px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--sb-lilac);
  font-variant-numeric: tabular-nums;
}
.sb-hero__actt {
  max-width: 24ch;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.28;
  font-weight: 600;
  color: var(--sb-paper);
}
.sb-hero__actt b { color: var(--sb-lilac-lt); font-weight: 700; }
@media (max-height: 760px) {
  .sb-hero__actv { font-size: clamp(56px, 14vh, 120px); }
  .sb-hero__actt { font-size: clamp(19px, 3.4vh, 28px); }
}

.sb-hero__scroll {
  transition: opacity 300ms var(--sb-ease);
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 18px;
  width: 22px; height: 36px;
  margin-left: -11px;
  border: 1.5px solid rgba(226, 200, 255, .4);
  border-radius: 12px;
}
.sb-hero__scroll i {
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--sb-lilac);
  animation: sb-scroll 1.8s var(--sb-ease) infinite;
}
@keyframes sb-scroll { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ── Client ───────────────────────────────────────────────────────── */

.sb-client {
  background: var(--sb-white);
  color: var(--sb-ink);
  padding-block: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--sb-line);
}
.sb-client__inner {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 84px);
  align-items: center;
}
@media (max-width: 860px) { .sb-client__inner { grid-template-columns: 1fr; gap: 26px; } }
.sb-client__logo { width: 100%; max-width: 200px; height: auto; margin-bottom: 18px; }
.sb-client__ub { font-family: var(--pz-font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sb-soft); line-height: 1.6; max-width: 30ch; }
.sb-client__desc { max-width: 64ch; color: var(--sb-soft); margin-bottom: 26px; }
.sb-client__figs { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 48px; }
.sb-client__figs li { display: flex; flex-direction: column; gap: 4px; }
.sb-client__figs b { font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--sb-violet-700); font-variant-numeric: tabular-nums; }
.sb-client__figs span { font-size: 14px; color: var(--sb-soft); max-width: 18ch; line-height: 1.35; }

/* ── 01 · Growth chart ────────────────────────────────────────────── */

.sb-growth {
  margin-top: clamp(48px, 6vw, 84px);
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: 18px;
  background: var(--sb-white);
  border: 1px solid var(--sb-line);
  box-shadow: 0 10px 30px rgba(43, 37, 48, .06);
  position: relative;
}
.sb-growth__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 22px; }
.sb-growth__t { font-weight: 700; font-size: 18px; }
.sb-growth__s { font-size: 14px; color: var(--sb-soft); }
.sb-growth__plot { position: relative; height: clamp(200px, 26vw, 320px); }
.sb-growth__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sb-growth__line { stroke: var(--sb-violet); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sb-growth__area { opacity: 0; transition: opacity 900ms var(--sb-ease) 700ms; }
.sb-growth.is-drawn .sb-growth__area { opacity: 1; }
.sb-growth__marks { position: absolute; inset: 0; pointer-events: none; }
.sb-growth__mark {
  position: absolute;
  /* the dot (8px half-height) sits exactly on the data point */
  transform: translate(-50%, calc(-100% + 16px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 500ms var(--sb-ease), transform 500ms var(--sb-ease);
}
.sb-growth__mark.is-in { opacity: 1; transform: translate(-50%, calc(-100% + 8px)); }
.sb-growth__mark--first b { transform: translateX(38%); }
.sb-growth__mark--last b { transform: translateX(-38%); }
.sb-growth__mark b {
  font-size: 13px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--sb-ink);
  color: var(--sb-white);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sb-growth__mark--pz b { background: var(--sb-violet); }
.sb-growth__mark i { width: 10px; height: 10px; border-radius: 50%; background: var(--sb-white); border: 3px solid currentColor; color: var(--sb-ink); }
.sb-growth__mark--pz i { color: var(--sb-violet); }
.sb-growth__axis {
  position: relative;
  height: 16px;
  margin-top: 12px;
  font-family: var(--pz-font-mono);
  font-size: 11.5px;
  color: var(--sb-soft);
}
.sb-growth__axis span { position: absolute; top: 0; transform: translateX(-50%); }
@media (max-width: 640px) { .sb-growth__axis span:nth-child(even) { visibility: hidden; } }

/* ── 01b · The arc (sticky, scroll-linked) ────────────────────────── */

.sb-arc {
  position: relative;
  background: var(--sb-night);
  color: var(--sb-paper);
}
.sb-arc__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.sb-arc__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-arc__head { position: relative; z-index: 2; padding-top: 104px; }
@media (min-width: 861px) {
  .sb-arc__stage { z-index: 3; pointer-events: none; }
  .sb-arc__head { background: linear-gradient(var(--sb-night) 70%, transparent); padding-bottom: 40px; }
}
.sb-arc__steps {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  margin-top: -100svh;
  padding-bottom: 30vh;
}
.sb-arc__step {
  min-height: 90vh;
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  opacity: .5;
  transition: opacity 500ms var(--sb-ease);
}
.sb-arc__step.is-on { opacity: 1; }
.sb-arc__n { font-family: var(--pz-font-mono); font-size: 13px; color: var(--sb-lilac); margin-bottom: 10px; }
.sb-arc__t { font-size: clamp(40px, 6vw, 84px); font-weight: 800; letter-spacing: -.04em; line-height: .95; margin-bottom: 18px; color: var(--sb-paper); }
.sb-arc__d { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--sb-mist); text-shadow: 0 1px 18px rgba(22, 14, 27, .9); }
@media (max-width: 860px) {
  /* the drawing takes the upper half, the text reads below it */
  .sb-arc__step { max-width: none; justify-content: flex-end; min-height: 64svh; padding-bottom: 6svh; }
  .sb-arc__step:not(.is-on) { opacity: 0; }
  .sb-arc__t { text-shadow: 0 2px 18px rgba(22, 14, 27, .95); }
  .sb-arc__t { font-size: clamp(34px, 11vw, 48px); margin-bottom: 10px; }
  .sb-arc__d { background: rgba(22, 14, 27, .78); padding: 12px 14px; border-radius: 10px; }
}

/* ── 02 · Researchers ─────────────────────────────────────────────── */

.sb-transcribe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-block: clamp(30px, 4vw, 56px) clamp(48px, 6vw, 80px);
  position: relative;
}
@media (max-width: 900px) {
  .sb-transcribe { grid-template-columns: 1fr; }
  .sb-transcribe__arrow { transform: rotate(90deg); justify-self: center; }
}
.sb-doc {
  background: #F4ECDC;
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 90, 40, .05) 0 1px, transparent 1px 28px),
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .5), transparent 60%);
  color: #3A3226;
  border-radius: 4px;
  padding: 24px 26px 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  box-shadow: 0 18px 40px rgba(60, 40, 20, .16), 0 2px 4px rgba(60, 40, 20, .1);
  transform: rotate(-1.6deg);
  position: relative;
}
.sb-doc::after {
  /* film grain of the microfilm copy */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  pointer-events: none;
  background: radial-gradient(rgba(60, 40, 20, .08) 1px, transparent 1px) 0 0 / 5px 5px;
  mix-blend-mode: multiply;
}
.sb-doc__head { font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; line-height: 1.4; margin-bottom: 4px; }
.sb-doc__sub { font-size: 11px; opacity: .7; margin-bottom: 16px; }
.sb-doc__rows { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sb-doc__rows li { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 12px; align-items: center; min-height: 20px; }
.sb-doc__rows li i { display: block; height: 7px; width: var(--w, 50%); border-radius: 3px; background: rgba(58, 50, 38, .22); filter: blur(1.2px); }
.sb-doc__rows li.is-hit { position: relative; font-weight: 500; }
.sb-doc__rows li.is-hit span { position: relative; z-index: 1; padding: 1px 3px; margin: -1px -3px; border-radius: 2px; transition: background 400ms var(--sb-ease); }
.sb-transcribe.is-hl .sb-doc__rows li.is-hit span { background: rgba(255, 207, 77, .75); }
.sb-doc__foot { margin-top: 14px; text-align: right; font-size: 11px; opacity: .6; }
.sb-transcribe__arrow { color: var(--sb-violet); opacity: .5; }
.sb-transcribe__arrow svg { width: 100%; height: auto; }

.sb-rec { padding: 22px 24px; }
.sb-rec__k {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sb-violet);
  margin-bottom: 10px;
}
.sb-rec__k i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sb-rec__name { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; margin-bottom: 16px; color: var(--sb-ink); }
.sb-rec__name b { font-weight: 800; letter-spacing: -.02em; }
.sb-rec__name span { font-weight: 300; color: var(--sb-soft); }
.sb-rec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.sb-rec__grid dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-soft); margin-bottom: 3px; }
.sb-rec__grid dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sb-rec__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-rec__chips span { padding: 4px 11px; border-radius: 999px; background: var(--sb-lilac-50); color: var(--sb-violet-700); font-size: 13px; font-weight: 600; }
[data-slot] { transition: opacity 500ms var(--sb-ease), filter 500ms var(--sb-ease), color 600ms var(--sb-ease); }
.sb-transcribe:not(.is-done) [data-slot] { opacity: 0; filter: blur(4px); }
.sb-transcribe.is-done [data-slot].is-fresh { color: var(--sb-violet-700); }
.sb-rec__chips span { transition: opacity 500ms var(--sb-ease), transform 500ms var(--sb-spring); }
.sb-transcribe:not(.is-done) .sb-rec__chips span { opacity: 0; transform: scale(.7); }
.sb-transcribe__note { grid-column: 1 / -1; max-width: 70ch; }

.sb-flyer {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  padding: 2px 6px;
  border-radius: 4px;
  background: #FFCF4D;
  color: #3A3226;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(60, 40, 20, .25);
}

.sb-cols--tight { margin-top: 10px; }

.sb-proof {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-top: clamp(36px, 5vw, 64px);
  border-top: 2px solid var(--sb-violet);
}
@media (max-width: 760px) { .sb-proof { grid-template-columns: 1fr; } }
.sb-proof li { padding: 22px 22px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sb-proof b { font-size: clamp(38px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--sb-violet-700); font-variant-numeric: tabular-nums; }
.sb-proof span { font-size: 15px; color: var(--sb-soft); max-width: 30ch; line-height: 1.4; }

.sb-archives {
  margin-top: clamp(56px, 7vw, 96px);
  overflow: hidden;
  border-block: 1px solid rgba(162, 55, 181, .18);
  padding-block: 18px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sb-archives__track {
  display: flex;
  gap: 52px;
  width: max-content;
  animation: sb-marquee 60s linear infinite;
}
.sb-archives__track span {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--sb-violet-700);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 52px;
}
.sb-archives__track span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sb-r3); }
@keyframes sb-marquee { to { transform: translateX(-50%); } }

/* ── 03 · Data layer («SIDBRINT en xifres») ───────────────────────── */

.sb-xf { overflow: hidden; isolation: isolate; }
.sb-xf__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(162, 55, 181, .45), transparent 60%),
    radial-gradient(800px 380px at 0% 40%, rgba(126, 35, 144, .3), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(135deg, #1E1824 0%, #2B2530 55%, #3A1F45 100%);
  animation: sb-drift 40s linear infinite;
}
@keyframes sb-drift { to { background-position: 0 0, 0 0, 22px 44px, 0 0; } }

.sb-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(30, 24, 36, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: 22px;
}
@media (max-width: 1100px) { .sb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sb-kpi {
  padding: 20px 20px 22px;
  border-right: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  margin: 0 -1px -1px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-kpi b { font-size: clamp(26px, 2.5vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sb-white); white-space: nowrap; }
.sb-kpi span { font-size: 13.5px; line-height: 1.35; color: #E8C7F0; }
.sb-kpi--lead { background: linear-gradient(135deg, #A237B5, #7E2390); }
.sb-kpi--lead b { font-size: clamp(30px, 3vw, 46px); }
.sb-kpi--lead span { color: var(--sb-white); }

.sb-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.sb-bento > .sb-card { grid-column: span 6; opacity: 0; transform: translateY(26px); transition: opacity 800ms var(--sb-ease), transform 800ms var(--sb-ease); }
.sb-bento > .sb-card.is-in { opacity: 1; transform: none; }
.sb-card--map { grid-column: span 8 !important; }
.sb-card--rank { grid-column: span 4 !important; }
.sb-card--wide { grid-column: span 12 !important; }
.sb-card--third { grid-column: span 4 !important; }
.sb-card--twothirds { grid-column: span 8 !important; }
.sb-card--half { grid-column: span 6 !important; }
@media (max-width: 1100px) {
  .sb-card--map, .sb-card--rank, .sb-card--twothirds { grid-column: span 12 !important; }
  .sb-card--third, .sb-card--half { grid-column: span 6 !important; }
}
@media (max-width: 720px) { .sb-bento > .sb-card { grid-column: span 12 !important; } }

.sb-why {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--sb-line-2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sb-soft);
}
.sb-why::before { content: "→ "; color: var(--sb-violet); font-weight: 700; }

.sb-dotmap { position: relative; aspect-ratio: 160 / 70; }
.sb-dotmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--sb-soft); }
.sb-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sb-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }

.sb-rank { list-style: none; display: flex; flex-direction: column; }
.sb-rank li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto 46px;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--sb-line);
  font-size: 14.5px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 500ms var(--sb-ease), transform 500ms var(--sb-ease);
  position: relative;
}
.sb-rank.is-in li { opacity: 1; transform: none; }
.sb-rank li > i {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 700;
  background: var(--sb-lilac-50); color: var(--sb-violet-700);
}
.sb-rank li:nth-child(-n+3) > i { background: var(--sb-violet); color: var(--sb-white); }
.sb-rank li > b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-rank li > em { font-style: normal; font-size: 12.5px; color: var(--sb-soft); text-align: right; font-variant-numeric: tabular-nums; }
.sb-rank li::after {
  content: "";
  position: absolute;
  left: 36px; bottom: -1px;
  height: 2px;
  width: calc((100% - 36px) * var(--p, 0));
  background: var(--sb-violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--sb-ease);
}
.sb-rank.is-in li::after { transform: none; }

.sb-peak { font-size: 13px; padding: 7px 13px; border-radius: 999px; background: var(--sb-ink); color: var(--sb-white); white-space: nowrap; }
.sb-peak span:first-child { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; opacity: .7; }
.sb-peak b { font-size: 15px; font-variant-numeric: tabular-nums; }

.sb-months { position: relative; height: 220px; }
@media (max-width: 640px) { .sb-months { height: 170px; } .sb-months__col.is-year::before { height: 170px; } }
.sb-months__cols {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  background: repeating-linear-gradient(0deg, var(--sb-line) 0 1px, transparent 1px 55px);
}
.sb-months__col {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #A237B5, #C28BF8);
  opacity: .82;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1), opacity 200ms;
  position: relative;
}
.sb-months__col.is-year::before {
  content: "";
  position: absolute;
  left: -2px; bottom: 0;
  height: 220px;
  border-left: 1px dashed var(--sb-line-2);
}
.sb-months__col.is-peak { background: linear-gradient(180deg, #2B2530, #7E2390); opacity: 1; }
.sb-months.is-in .sb-months__col { transform: none; }
.sb-months__arr { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sb-months__arr path { fill: none; stroke: #E0B400; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sb-months__axis { display: grid; grid-template-columns: 6fr 12fr 12fr 3fr; margin-top: 8px; font-size: 12.5px; font-weight: 700; }

.sb-donut { position: relative; width: min(230px, 70%); margin: 4px auto 16px; }
.sb-donut svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.sb-donut__track { fill: none; stroke: var(--sb-line); stroke-width: 6; }
.sb-donut__seg { fill: none; stroke-width: 6; transition: stroke-dasharray 1100ms var(--sb-ease); }
.sb-donut__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.sb-donut__c b { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.sb-donut__c span { font-size: 13px; color: var(--sb-soft); }
.sb-donut__legend { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13px; }
.sb-donut__legend li { display: flex; align-items: center; gap: 7px; }
.sb-donut__legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.sb-donut__legend b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.sb-tree { position: relative; aspect-ratio: 2.2 / 1; }
@media (max-width: 720px) { .sb-tree { aspect-ratio: 1 / 1.9; } }
.sb-tree__cell b { overflow-wrap: anywhere; hyphens: auto; }
.sb-tree__cell {
  position: absolute;
  padding: 2px;
  opacity: 0;
  transform: scale(.4);
  transform-origin: 0 0;
  transition: opacity 600ms var(--sb-ease), transform 700ms var(--sb-spring);
}
.sb-tree.is-in .sb-tree__cell { opacity: 1; transform: none; }
.sb-tree__cell > div {
  width: 100%; height: 100%;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--sb-white);
  font-size: 12.5px;
  line-height: 1.2;
}
.sb-tree__cell b { font-weight: 700; }
.sb-tree__cell span { opacity: .82; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sb-tree__cell.t1 > div { background: #7E2390; }
.sb-tree__cell.t2 > div { background: #8B3BA3; }
.sb-tree__cell.t3 > div { background: #D7AEE2; color: var(--sb-ink); }
.sb-tree__cell.is-tiny b, .sb-tree__cell.is-tiny span { display: none; }

.sb-lolli { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sb-lolli li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: 13.5px; }
.sb-lolli li > span { font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: var(--sb-lilac-50); color: var(--sb-violet-700); text-align: center; }
.sb-lolli li > div { position: relative; height: 14px; }
.sb-lolli li > div::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  height: 2px;
  width: var(--w);
  background: var(--sb-violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms var(--sb-ease) var(--d, 0ms);
}
.sb-lolli li > div::after {
  content: "";
  position: absolute;
  left: calc(var(--w) - 7px);
  top: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sb-violet);
  box-shadow: 0 0 0 3px var(--sb-lilac-50);
  transform: scale(0);
  transition: transform 500ms var(--sb-spring) calc(var(--d, 0ms) + 800ms);
}
.sb-lolli.is-in li > div::before { transform: none; }
.sb-lolli.is-in li > div::after { transform: none; }
.sb-lolli li > b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-lolli li > em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sb-waffle { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; margin-bottom: 18px; }
.sb-waffle i { aspect-ratio: 1; border-radius: 3px; background: var(--sb-line); transition: background 300ms var(--sb-ease), transform 400ms var(--sb-spring); transform: scale(.6); }
.sb-waffle i.is-h { background: rgba(162, 55, 181, .85); transform: none; }
.sb-waffle i.is-d { background: var(--sb-ochre); transform: none; }
.sb-waffle__legend { display: flex; flex-direction: column; gap: 10px; }
.sb-waffle__legend > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sb-waffle__legend dt { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.sb-waffle__legend dt i { width: 12px; height: 12px; border-radius: 50%; }
.sb-waffle__legend dt i.is-h { background: var(--sb-violet); }
.sb-waffle__legend dt i.is-d { background: var(--sb-ochre); }
.sb-waffle__legend dd { margin: 0; font-size: 13px; color: var(--sb-soft); font-variant-numeric: tabular-nums; }
.sb-waffle__legend dd b { font-size: 20px; font-weight: 800; color: var(--sb-ink); margin-right: 8px; }

.sb-xf__foot { margin-top: 26px; max-width: 80ch; }

/* ── 04 · Life stories ────────────────────────────────────────────── */

.sb-life__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(20px, 3vw, 40px);
}
.sb-life__steps { padding-bottom: 20vh; }
.sb-life__step {
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .5;
  transition: opacity 500ms var(--sb-ease);
}
.sb-life__step.is-on { opacity: 1; }
.sb-life__k { font-family: var(--pz-font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sb-violet-700); margin-bottom: 12px; }
.sb-life__stage {
  position: sticky;
  top: 90px;
  height: calc(100vh - 120px);
  height: calc(100svh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.sb-life__frame {
  position: relative;
  height: min(560px, calc(100svh - 200px));
  border-radius: 20px;
  background: var(--sb-white);
  border: 1px solid var(--sb-line);
  box-shadow: 0 24px 60px rgba(43, 37, 48, .12), 0 2px 6px rgba(43, 37, 48, .06);
  overflow: hidden;
}
.sb-life__cap { text-align: right; }
.sb-lv {
  position: absolute;
  inset: 0;
  padding: clamp(18px, 2.4vw, 30px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.985);
  transition: opacity 520ms var(--sb-ease), transform 620ms var(--sb-ease), visibility 0s linear 620ms;
}
.sb-lv.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sb-lv__t { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }

.sb-lv--head { background: linear-gradient(135deg, var(--sb-lilac-50), #fff 64%); }
.sb-lv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.sb-lv-head__name { font-size: clamp(34px, 4vw, 56px); line-height: .98; margin-bottom: 20px; }
.sb-lv-head__name b { display: block; font-weight: 800; letter-spacing: -.03em; }
.sb-lv-head__name span { font-weight: 300; color: var(--sb-soft); }
.sb-lv-head__dl { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-bottom: 20px; }
.sb-lv-head__dl dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-soft); }
.sb-lv-head__dl dd { margin: 0; font-size: 15px; font-weight: 600; }
.sb-lv-head__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-lv-head__acts span { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--sb-line-2); font-size: 12.5px; font-weight: 600; }
.sb-lv-head__acts span:first-child { background: var(--sb-violet); color: #fff; border-color: var(--sb-violet); }
.sb-lv-head__photo {
  width: clamp(96px, 12vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(43, 37, 48, .55) 0 18%, transparent 19%),
    radial-gradient(ellipse 34% 30% at 50% 92%, rgba(43, 37, 48, .55) 0 98%, transparent 100%),
    #C28BF8;
  box-shadow: 0 0 0 6px #fff, 0 18px 40px rgba(43, 37, 48, .2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sb-lv-head__photo span { display: none; }
.sb-lv-head__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sb-line); }
.sb-lv-head__chips span {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sb-lilac-50);
  color: var(--sb-violet-700);
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms var(--sb-ease), transform 400ms var(--sb-ease);
}
.sb-lv.is-on .sb-lv-head__chips span { opacity: 1; transform: none; }

/* chronology frieze */
.sb-crono { position: relative; font-size: 12px; margin-top: 26px; }
.sb-crono__years { display: grid; grid-template-columns: 6fr 12fr 12fr 4fr; margin-left: 84px; border-bottom: 1px solid var(--sb-line-2); }
.sb-crono__years span { padding: 0 0 6px 6px; border-left: 2px solid var(--sb-ink); font-weight: 800; font-size: 12.5px; }
.sb-crono__months { display: grid; grid-template-columns: repeat(34, 1fr); margin-left: 84px; color: var(--sb-soft); font-size: 9.5px; padding: 4px 0 8px; }
.sb-crono__months span { white-space: nowrap; }
.sb-crono__body { position: relative; margin-left: 84px; }
.sb-crono__stay {
  position: absolute;
  top: -22px; bottom: 0;
  background: rgba(254, 214, 26, .28);
  border-left: 2px solid #E0B400;
  border-right: 2px solid #E0B400;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--sb-ease) 200ms;
}
.sb-lv.is-on .sb-crono__stay { transform: none; }
.sb-crono__stay span {
  position: absolute;
  top: calc(100% + 6px); left: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #E0B400;
  color: #2B2530;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: .08em;
}
.sb-crono__lane { position: relative; display: flex; align-items: center; min-height: 34px; padding-block: 4px; }
.sb-crono__lane > em {
  position: absolute;
  left: -84px;
  width: 78px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sb-crono__lane > em i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sb-crono__row { position: relative; height: 22px; margin: 4px 0; }
.sb-crono__mk {
  position: absolute;
  top: 3px;
  height: 16px;
  min-width: 16px;
  border-radius: 999px;
  background: var(--c);
  opacity: .28;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--sb-ease) var(--d, 0ms), opacity 400ms;
}
.sb-lv.is-on .sb-crono__mk { transform: none; }
.sb-crono__mk.is-mine { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sb-ink); }
.sb-crono__mk > span {
  position: absolute;
  left: calc(100% + 6px);
  top: 0;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sb-ink);
  opacity: 0;
  transition: opacity 400ms var(--sb-ease) calc(var(--d, 0ms) + 500ms);
}
.sb-lv.is-on .sb-crono__mk.is-mine > span { opacity: 1; }
.sb-crono__mk.is-left > span { left: auto; right: calc(100% + 6px); }
.sb-crono__mk.is-inbar > span { left: 10px; right: auto; color: #fff; font-size: 11px; }
.sb-crono__war { position: absolute; top: -40px; bottom: 0; border-left: 1.5px dashed var(--sb-soft); opacity: .5; }

/* life map */
.sb-lv--map { padding: 0; display: flex; flex-direction: column; }
.sb-lifemap { position: relative; flex: 1; min-height: 0; background: #D9DDE2; }
.sb-lifemap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-lifemap__svg { overflow: visible; }
.sb-lifemap__tl {
  list-style: none;
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 14px 18px 16px;
  background: var(--sb-lilac-50);
  scrollbar-width: thin;
  scroll-padding-inline: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.sb-lifemap__tl li {
  flex: 0 0 132px;
  padding-right: 10px;
  position: relative;
  opacity: .25;
  transition: opacity 400ms var(--sb-ease);
}
.sb-lifemap__tl li.is-on { opacity: 1; }
.sb-lifemap__tl li b { display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.sb-lifemap__tl li i {
  display: block;
  height: 3px;
  background: var(--c);
  border-radius: 2px;
  margin-bottom: 7px;
  position: relative;
}
.sb-lifemap__tl li i::before { content: ""; position: absolute; left: 0; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
.sb-lifemap__tl li em { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-soft); }
.sb-lifemap__tl li span { display: block; font-size: 12px; line-height: 1.3; }

/* sources & relations */
.sb-lv--src { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.sb-src { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-src__it {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--sb-line);
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--sb-ease) var(--d), transform 400ms var(--sb-ease) var(--d);
}
.sb-lv.is-on .sb-src__it { opacity: 1; transform: none; }
.sb-src__it > i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sb-violet); color: #fff; font-weight: 700; font-size: 11px; }
.sb-src__it b { display: block; font-weight: 700; }
.sb-src__it span { color: var(--sb-soft); }
.sb-rel { position: relative; border-radius: 14px; background: var(--sb-paper); border: 1px solid var(--sb-line); overflow: hidden; }
.sb-rel__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.sb-life__next { margin-top: 30px; padding: 26px 28px; border-left: 3px solid var(--sb-violet); background: var(--sb-white); border-radius: 0 14px 14px 0; max-width: 900px; }
.sb-life__next .sb-p { margin: 0; max-width: none; }

@media (max-width: 960px) {
  /* The stage sticks to the top half; each step's text arrives in the
     lower half, under it, and swaps the scene when it gets there. */
  .sb-life__grid { grid-template-columns: 1fr; gap: 0; }
  .sb-life__stage { position: sticky; top: 74px; height: auto; z-index: 2; background: var(--sb-paper); padding-block: 8px 12px; }
  .sb-life__frame { height: min(380px, 44svh); }
  .sb-lv--crono { overflow-y: auto; }
  .sb-life__cap { display: none; }
  .sb-life__steps { order: 2; padding-bottom: 8svh; }
  .sb-life__step { min-height: 62svh; justify-content: flex-end; }
  .sb-src { grid-template-columns: 1fr; }
  .sb-src__it:nth-child(n+3) { display: none; }
  .sb-lv-head__name { font-size: 32px; margin-bottom: 12px; }
  .sb-lv-head__photo { width: 76px; }
  .sb-crono__lane > em { width: 60px; left: -64px; font-size: 9px; }
  .sb-crono__years, .sb-crono__months, .sb-crono__body { margin-left: 64px; }
}
@media (max-width: 960px) {
  /* soften the text line that slides under the pinned stage */
  .sb-life__stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; background: linear-gradient(#FAF8FB, rgba(250, 248, 251, 0)); pointer-events: none; }
}
@media (max-width: 640px) {
  .sb-life__frame { height: min(420px, 50svh); }
  .sb-lv-head__name { font-size: 28px; margin-bottom: 10px; }
  .sb-lv-head__dl { gap: 6px 18px; margin-bottom: 12px; }
  .sb-lv-head__dl dd { font-size: 13.5px; }
  .sb-lv-head__acts { display: none; }
  .sb-lv-head__chips { margin-top: 12px; padding-top: 12px; gap: 5px; }
  .sb-lv-head__chips span { font-size: 11px; }
}
@media (max-width: 640px) {
  .sb-sankey__plot { overflow-x: auto; scrollbar-width: thin; }
  .sb-sankey__plot svg { min-width: 680px; }
}

/* ── 05 · Thematic maps ───────────────────────────────────────────── */

.sb-tmap { border-radius: 20px; overflow: hidden; background: var(--sb-white); color: var(--sb-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.sb-tmap__bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--sb-line); }
.sb-tmap__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--sb-line-2);
  background: var(--sb-white);
  font-family: var(--sb-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-ink);
  cursor: pointer;
  transition: background 200ms var(--sb-ease), color 200ms var(--sb-ease), border-color 200ms var(--sb-ease);
}
.sb-tmap__tab i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.sb-tmap__tab.is-on { background: var(--sb-ink); color: var(--sb-white); border-color: var(--sb-ink); }
.sb-tmap__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 520px; }
@media (max-width: 900px) { .sb-tmap__body { grid-template-columns: 1fr; } }
.sb-tmap__map { position: relative; background: #DADFE5; }
.sb-tmap__svg { width: 100%; height: 100%; display: block; }
.sb-tmap__side { border-left: 1px solid var(--sb-line); padding: 18px; display: flex; flex-direction: column; gap: 14px; max-height: 620px; }
@media (max-width: 900px) { .sb-tmap__side { border-left: 0; border-top: 1px solid var(--sb-line); max-height: none; } }
.sb-tmap__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-tmap__kpis div { padding: 12px; border-radius: 12px; background: var(--sb-paper); display: flex; flex-direction: column; gap: 2px; }
.sb-tmap__kpis b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sb-tmap__kpis span { font-size: 12px; color: var(--sb-soft); }
.sb-tmap__list { list-style: none; overflow: auto; display: flex; flex-direction: column; scrollbar-width: thin; min-height: 0; flex: 1 1 auto; }
.sb-tmap__list li { border-bottom: 1px solid var(--sb-line); }
.sb-tmap__item {
  display: block;
  width: 100%;
  padding: 9px 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 200ms var(--sb-ease);
}
.sb-tmap__list li:hover .sb-tmap__item, .sb-tmap__list li.is-on .sb-tmap__item { background: var(--sb-lilac-50); }
.sb-tmap__item > span { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sb-tmap__item b { font-weight: 600; }
.sb-tmap__item em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-tmap__item > i { display: block; height: 3px; border-radius: 2px; background: var(--c); width: var(--w); transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--sb-ease) var(--d, 0ms); }
.sb-tmap__list.is-in .sb-tmap__item > i { transform: none; }
@media (max-width: 900px) { .sb-tmap__list { max-height: 340px; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); } }

.sb-bub { transform-box: fill-box; transform-origin: center; transition: opacity 300ms var(--sb-ease), filter 300ms var(--sb-ease); cursor: pointer; }
.sb-bub circle.sb-bub__c { stroke: #fff; stroke-width: 2; }
.sb-bub.is-dim { opacity: .35; filter: grayscale(.6); }
.sb-bub.is-pop { animation: sb-pop 450ms var(--sb-spring); }
@keyframes sb-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.sb-bub__n { font-family: var(--sb-font); font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.sb-bub__n.is-dark { fill: #160E1B; }
@media (max-width: 600px) {
  .sb-bub__n { display: none; }
  .sb-tmap__svg .sb-tlabel { font-size: 38px; stroke-width: 9px; }
}
.sb-halo { fill: none; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: sb-halo 1.4s ease-out 3; pointer-events: none; }
@keyframes sb-halo { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.sb-tlabel { font-family: var(--sb-font); font-size: 15px; font-weight: 700; fill: var(--sb-ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }

.sb-feats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-top: clamp(30px, 4vw, 52px);
}
@media (max-width: 900px) { .sb-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sb-feats { grid-template-columns: 1fr; } }
.sb-feats li { padding: 20px 20px 0 0; border-top: 2px solid var(--sb-lilac); display: flex; flex-direction: column; gap: 6px; }
.sb-feats b { font-size: 17px; color: var(--sb-paper); }
.sb-feats span { font-size: 14.5px; line-height: 1.5; color: var(--sb-mist); }

/* ── 06 · Knowledge management ────────────────────────────────────── */

.sb-trio {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 clamp(40px, 5vw, 70px);
}
.sb-trio li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--sb-lilac-50); }
.sb-trio span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sb-violet); color: #fff; font-weight: 800; font-size: 13px; }
.sb-trio b { font-weight: 700; color: var(--sb-violet-700); }

.sb-km__block {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--sb-line);
}
.sb-km__block--flip .sb-km__text { order: 2; }
@media (max-width: 960px) {
  .sb-km__block { grid-template-columns: 1fr; }
  .sb-km__block--flip .sb-km__text { order: 0; }
}
.sb-km__k { font-family: var(--pz-font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sb-violet-700); margin-bottom: 12px; }
.sb-ticks { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.sb-ticks li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: var(--sb-soft); }
.sb-ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #14967F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.sb-ticks b { color: var(--sb-ink); font-weight: 800; }

.sb-clean { border-radius: 20px; background: var(--sb-night); color: var(--sb-paper); padding: 20px; box-shadow: 0 24px 60px rgba(22, 14, 27, .28); }
.sb-clean__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.sb-clean__sw { width: 46px; height: 24px; border-radius: 999px; background: rgba(226, 200, 255, .2); position: relative; transition: background 400ms var(--sb-ease); }
.sb-clean__sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 400ms var(--sb-spring); }
.sb-clean.is-ok .sb-clean__sw { background: #14967F; }
.sb-clean.is-ok .sb-clean__sw i { transform: translateX(22px); }
.sb-clean__lbl { color: var(--sb-mist); transition: color 300ms; }
.sb-clean:not(.is-ok) .sb-clean__lbl:first-child, .sb-clean.is-ok .sb-clean__lbl:last-child { color: #fff; }
.sb-clean__rows { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sb-clean__rows li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 13px; }
@media (max-width: 520px) { .sb-clean__rows li { grid-template-columns: 1fr; gap: 2px; } }
.sb-clean__f { color: var(--sb-mist); font-size: 12px; }
.sb-clean__v { font-family: var(--pz-font-mono); font-size: 12.5px; color: #FF8A8F; transition: color 300ms; position: relative; }
.sb-clean__v.is-ok { color: #7FE3C9; }
.sb-clean__map { position: relative; aspect-ratio: 160 / 64; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .03); }
.sb-clean__map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.sb-weights { width: 100%; max-width: 420px; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.sb-weights caption { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-soft); padding-bottom: 8px; }
.sb-weights th { text-align: left; font-weight: 500; padding: 6px 0; border-bottom: 1px solid var(--sb-line); color: var(--sb-ink); }
.sb-weights td { text-align: right; padding: 6px 0; border-bottom: 1px solid var(--sb-line); font-weight: 800; width: 160px; white-space: nowrap; }
.sb-weights td i { display: inline-block; height: 8px; width: calc(var(--w) * 22px); border-radius: 4px; background: var(--sb-violet); margin-right: 10px; vertical-align: middle; opacity: .4; }

.sb-net { position: relative; aspect-ratio: 1 / .86; border-radius: 20px; background: var(--sb-paper); border: 1px solid var(--sb-line); overflow: hidden; }
.sb-net canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-net__score {
  position: absolute;
  left: 14px; bottom: 14px;
  max-width: 270px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--sb-line);
  box-shadow: 0 8px 24px rgba(43, 37, 48, .1);
  font-size: 12.5px;
}
.sb-net__who { margin-bottom: 8px; line-height: 1.25; }
.sb-net__who b { font-size: 28px; font-weight: 800; color: var(--sb-violet-700); margin-right: 4px; font-variant-numeric: tabular-nums; }
.sb-net__why { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.sb-net__note { margin-top: 8px; font-size: 11px; color: var(--sb-soft); }
.sb-frag__note { margin-top: 12px; }
.sb-net__why li { padding: 3px 8px; border-radius: 999px; background: var(--sb-lilac-50); color: var(--sb-violet-700); font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 300ms var(--sb-ease) var(--d), transform 300ms var(--sb-ease) var(--d); }
.sb-net.is-scored .sb-net__why li { opacity: 1; transform: none; }

.sb-match {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(28px, 3.6vw, 44px);
  border-radius: 20px;
  background: var(--sb-lilac-50);
  margin-bottom: clamp(56px, 7vw, 100px);
}
@media (max-width: 960px) { .sb-match { grid-template-columns: 1fr; } }
.sb-match__t { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.sb-match__board { background: var(--sb-white); border-radius: 16px; padding: 18px; border: 1px solid var(--sb-line); }
.sb-match__pair { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.sb-match__pair span { padding: 10px 12px; border-radius: 10px; background: var(--sb-paper); border: 1px solid var(--sb-line); text-align: center; }
.sb-match__pair i { height: 2px; background: repeating-linear-gradient(90deg, var(--sb-violet) 0 6px, transparent 6px 10px); }
.sb-match__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 34px; }
.sb-match__chips li { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--sb-line-2); font-size: 12.5px; opacity: .35; transition: opacity 300ms, background 300ms, border-color 300ms; }
.sb-match__chips li b { color: #0E7462; }
.sb-match__chips li.is-on { opacity: 1; background: #E6F4EF; border-color: #A8D9C9; }
.sb-match__meter { position: relative; height: 12px; border-radius: 6px; background: var(--sb-line); margin-bottom: 10px; }
.sb-match__meter > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #C27C0E, #14967F); transition: width 500ms var(--sb-ease); }
.sb-match__th { position: absolute; top: -20px; left: 80%; font-size: 11px; font-weight: 700; color: var(--sb-soft); }
.sb-match__th::after { content: ""; position: absolute; left: 50%; top: 18px; height: 16px; border-left: 2px dashed var(--sb-soft); }
.sb-match__val { position: absolute; right: 0; top: -24px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-match__verdict { font-size: 13px; font-weight: 700; color: #0E7462; opacity: 0; transition: opacity 400ms; }
.sb-match.is-done .sb-match__verdict { opacity: 1; }

.sb-research { padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--sb-line); }
.sb-research__head { max-width: 860px; margin-bottom: 36px; }
.sb-h3--big { font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.03em; }

.sb-tools {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
@media (max-width: 1000px) { .sb-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sb-tools { grid-template-columns: 1fr; } }
.sb-tool {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--sb-line);
  background: linear-gradient(135deg, var(--sb-lilac-50), #fff 70%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--sb-ease) calc(var(--i) * 80ms), transform 600ms var(--sb-ease) calc(var(--i) * 80ms), box-shadow 250ms;
}
.sb-tools.is-in .sb-tool { opacity: 1; transform: none; }
.sb-tool:hover { box-shadow: 0 10px 26px rgba(43, 37, 48, .1); }
.sb-tool svg { width: 44px; height: 44px; fill: var(--sb-violet); stroke: var(--sb-violet); margin-bottom: 6px; }
.sb-tool svg rect, .sb-tool svg circle { stroke: none; }
.sb-tools.is-in .sb-tool svg rect { animation: sb-bar 1.6s var(--sb-ease) calc(var(--i) * 80ms + 300ms) both; transform-box: fill-box; transform-origin: bottom; }
@keyframes sb-bar { from { transform: scaleY(.2); } to { transform: none; } }
.sb-tool b { font-size: 16px; font-weight: 700; }
.sb-tool span { font-size: 13.5px; line-height: 1.45; color: var(--sb-soft); }
.sb-tools li:nth-child(4n+1):last-child { grid-column: span 1; }

.sb-sankey { margin-bottom: 26px; }
.sb-sankey__plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.sb-sk-link { fill: none; stroke-opacity: .32; transition: stroke-opacity 250ms; }
.sb-sk-link:hover { stroke-opacity: .6; }
.sb-sk-node { rx: 3; }
.sb-sk-lbl { font-family: var(--sb-font); font-size: 12.5px; fill: var(--sb-ink); font-weight: 600; }
.sb-sk-lbl tspan.n { fill: var(--sb-soft); font-weight: 500; }
.sb-sk-stage { font-family: var(--pz-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--sb-soft); }

.sb-open { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 26px; align-items: start; }
@media (max-width: 900px) { .sb-open { grid-template-columns: 1fr; } }
.sb-open__col { padding: clamp(20px, 2.4vw, 30px); border-radius: 18px; border: 1px solid var(--sb-line); background: var(--sb-white); }
.sb-open__t { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; color: var(--sb-violet-700); }
.sb-open__list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sb-open__list li { padding-left: 18px; position: relative; font-size: 15px; line-height: 1.5; color: var(--sb-soft); }
.sb-open__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--sb-violet); }
.sb-cover__t { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-soft); margin-bottom: 10px; }
.sb-cover__list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb-cover__list li { display: grid; grid-template-columns: 160px minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: 12.5px; }
@media (max-width: 520px) { .sb-cover__list li { grid-template-columns: 110px minmax(0, 1fr) 40px; } }
.sb-cover__list li > i { height: 8px; border-radius: 4px; background: var(--sb-line); position: relative; overflow: hidden; }
.sb-cover__list li > i::after { content: ""; position: absolute; inset: 0; width: var(--p); background: var(--sb-violet); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--sb-ease) var(--d); }
.sb-cover.is-in .sb-cover__list li > i::after { transform: none; }
.sb-cover__list li > b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.sb-frag__bar { display: flex; height: 44px; border-radius: 10px; overflow: hidden; margin: 18px 0 14px; background: var(--sb-line); }
.sb-frag__bar span { height: 100%; background: var(--c); width: 0; transition: width 900ms var(--sb-ease) var(--d); position: relative; }
.sb-frag.is-in .sb-frag__bar span { width: var(--w); }
.sb-frag__bar span:nth-child(2)::after {
  content: "59,5\00A0%";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  opacity: 0;
  transition: opacity 400ms 900ms;
}
.sb-frag.is-in .sb-frag__bar span:nth-child(2)::after { opacity: 1; }
.sb-frag__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--sb-soft); }
.sb-frag__legend li { display: inline-flex; align-items: center; gap: 6px; }
.sb-frag__legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.sb-frag__legend b { color: var(--sb-ink); font-variant-numeric: tabular-nums; }

.sb-aug { padding: clamp(22px, 3vw, 38px); border-radius: 20px; background: var(--sb-night); color: var(--sb-paper); }
.sb-aug .sb-open__t { color: var(--sb-lilac); }
.sb-aug .sb-p { color: var(--sb-mist); max-width: 80ch; }
.sb-aug .sb-p strong { color: #fff; }
.sb-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 18px;
  position: relative;
}
@media (max-width: 1000px) { .sb-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sb-flow { grid-template-columns: 1fr; } }
.sb-flow li {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(226, 200, 255, .14);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: .7;
  transition: opacity 400ms var(--sb-ease), background 400ms var(--sb-ease), border-color 400ms var(--sb-ease), transform 400ms var(--sb-ease);
}
.sb-flow li.is-on { opacity: 1; background: rgba(194, 139, 248, .12); border-color: rgba(194, 139, 248, .5); transform: translateY(-3px); }
.sb-flow li.sb-flow__human.is-on { background: rgba(242, 193, 78, .14); border-color: rgba(242, 193, 78, .7); }
.sb-flow__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sb-lilac); color: var(--sb-night); font-weight: 800; font-size: 12.5px; }
.sb-flow__human .sb-flow__n { background: var(--sb-gold); }
.sb-flow b { font-size: 15px; }
.sb-flow em { font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--sb-mist); }
.sb-flow__kinds { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-flow__kinds i { font-style: normal; padding: 2px 7px; border-radius: 999px; background: rgba(226, 200, 255, .14); font-size: 11px; }
.sb-aug__rules { max-width: 80ch; }

/* ── 07 · Humanists ───────────────────────────────────────────────── */

.sb-hum {
  position: relative;
  background: var(--pz-ink);
  color: var(--pz-bone);
  padding-block: clamp(110px, 14vw, 210px);
  overflow: hidden;
  isolation: isolate;
}
.sb-orbits {
  position: absolute;
  right: -16vw;
  top: 8%;
  width: min(900px, 86vw);
  z-index: -1;
  opacity: .7;
}
.sb-orbits__o { fill: none; stroke: rgba(243, 240, 234, .16); stroke-width: 14; }
.sb-orbits__o--a { transform: rotate(38deg); transform-origin: 300px 300px; }
.sb-orbits__o--b { transform: rotate(-38deg); transform-origin: 300px 300px; }
.sb-orbits__g { animation: sb-spin 60s linear infinite; transform-origin: 300px 300px; }
@keyframes sb-spin { to { transform: rotate(360deg); } }
.sb-orbits__dot { fill: var(--pz-bone); opacity: .5; }
.sb-orbits__star { fill: #E8343F; opacity: .6; filter: drop-shadow(0 0 22px rgba(232, 52, 63, .55)); }
.sb-hum__inner { position: relative; }
.sb-hum__k { font-family: var(--pz-font-mono); color: var(--pz-yellow); }
.sb-hum__t {
  font-family: var(--pz-font-display);
  font-size: clamp(48px, 9vw, 140px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .95;
  margin-bottom: clamp(36px, 5vw, 64px);
  max-width: 12ch;
}
.sb-hum__t .hl.magenta { color: #fff; }
.sb-hum__p { font-family: var(--pz-font-body); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: rgba(243, 240, 234, .78); max-width: 52ch; }
.sb-hum__q { margin-top: clamp(44px, 6vw, 80px); max-width: 30ch; }
.sb-hum__q p { font-family: var(--pz-font-serif); font-style: italic; font-size: clamp(28px, 3.6vw, 50px); line-height: 1.15; color: var(--pz-bone); margin-bottom: 14px; }
.sb-hum__q cite { font-style: normal; font-family: var(--pz-font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 240, 234, .55); }

/* ── 08 · Figures ─────────────────────────────────────────────────── */

.sb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
  border: 1px solid var(--sb-line-nt);
}
.sb-stat {
  padding: clamp(26px, 3.2vw, 44px);
  border: 1px solid var(--sb-line-nt);
  margin: -1px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sb-stat__n {
  font-size: clamp(44px, 5.4vw, 78px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--sb-lilac);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sb-stat__l { font-size: 15.5px; line-height: 1.45; color: var(--sb-mist); max-width: 28ch; }

/* ── Closing ──────────────────────────────────────────────────────── */

.sb-sec--close { background: var(--sb-night-2); color: var(--sb-paper); }
.sb-close { text-align: center; }
.sb-close__star { width: 54px; height: 54px; margin: 0 auto 28px; fill: #E8343F; }
.sb-close__t {
  font-size: clamp(32px, 4.8vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 18ch;
  margin: 0 auto 22px;
  color: var(--sb-paper);
}
.sb-close__p { font-size: clamp(18px, 1.7vw, 22px); color: var(--sb-mist); max-width: 54ch; margin: 0 auto 40px; }
.sb-close__acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Reduced motion · everything lands on its final state ─────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sb-lv { transform: none !important; transition: none !important; }
  .sb-dock { transition: none !important; }
  .reveal { transform: none !important; }
  .sb-archives { mask-image: none; -webkit-mask-image: none; }
  .sb-archives__track { width: auto; flex-wrap: wrap; justify-content: center; gap: 12px 36px; padding-inline: 16px; }
  .sb-archives__track span { white-space: normal; gap: 36px; }
  .sb-archives__track span:nth-child(n+13) { display: none; }
  .sb-hero { height: auto; }
  .sb-hero__stage { position: absolute; inset: 0; top: 0; height: auto; }
  .sb-hero__inner { margin-top: 0; }
  .sb-hero__word, .sb-hero__claim, .sb-hero__full, .sb-meta, .sb-hero__acts, .sb-tricolor i { animation: none; transform: none; }
  .sb-hero__scroll { display: none; }
  .sb-xf__glow, .sb-archives__track, .sb-orbits__g, .sb-halo, .sb-tools.is-in .sb-tool svg rect, .sb-bub.is-pop { animation: none; }
  .sb-bento > .sb-card, .sb-tool, .sb-rank li, .sb-tree__cell, .sb-src__it, .sb-lv-head__chips span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sb-months__col, .sb-crono__stay, .sb-crono__mk, .sb-rank li::after, .sb-cover__list li > i::after, .sb-lolli li > div::before, .sb-lolli li > div::after, .sb-tmap__item > i { transform: none !important; transition: none !important; }
  .sb-growth__area { opacity: 1; transition: none; }
  .sb-frag__bar span { width: var(--w); transition: none; }
  .sb-transcribe [data-slot], .sb-transcribe .sb-rec__chips span { opacity: 1 !important; filter: none !important; transform: none !important; }
  .sb-life__step { opacity: 1; }
  .sb-arc__step { transition: none; }
  .sb-btn { transition: none; }
  .sb-btn--solid:hover, .sb-btn--ghost:hover { transform: none; }
}

.sb-match__note { margin-top: 4px; font-size: 12px; color: var(--sb-soft); }

@media (prefers-reduced-motion: reduce) and (min-width: 1200px) {
  .sb-hero__cap { min-height: 0; }
  .sb-hero__capstate { position: relative; inset: auto; opacity: 1; transform: none; }
  .sb-hero__capstate + .sb-hero__capstate { margin-top: 10px; }
}

/* Focus on the white map panel needs the deep violet (5,6:1), not lilac. */
.sb-tmap :is(a, button):focus-visible { outline-color: var(--sb-violet); }
.sb-tmap__item:focus-visible { outline-offset: -3px; }

.sb-archives { position: relative; }
.sb-archives__pause {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(162, 55, 181, .3);
  background: var(--sb-lilac-50);
  color: var(--sb-violet-700);
  font-family: var(--sb-font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.sb-archives__pause[aria-pressed="true"] { background: var(--sb-violet-700); color: #fff; }
@media (prefers-reduced-motion: reduce) { .sb-archives__pause { display: none; } }