/* RamonY — the scroll report.
   The reader owns the clock: every scene is the SAME scenes/*.html used for the videos, embedded and
   scrubbed by scroll position instead of by time. Gioele's six separate "the timing is off / I never
   know where to look" complaints are answered structurally rather than by re-tuning each scene. */

:root{
  --bg:#0b0d11; --bg-2:#0f1115; --surface:#161922; --surface-2:#1d212c;
  --fg-1:#e6e8ee; --fg-2:#aab0c0; --fg-3:#7d8496;
  --accent:#5bc7b3; --accent-2:#6aa3ff; --accent-3:#e0a45e; --accent-4:#e08484;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --rail:78px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;
  /* Gioele: "when a slide is only text and I need to read, it needs sort of a spring so that it
     aligns to the center of the screen unless I scroll with intent down."  PROXIMITY, never
     mandatory: the browser only settles onto a snap point when the scroll ends near one, so a
     deliberate scroll passes straight through. Mandatory would trap the reader inside the sticky
     chapters, which are deliberately NOT snap targets. */
  scroll-snap-type:y proximity}
/* Short blocks centre; a block near or over a screen tall start-aligns, since centring it would push
   its opening line off the top — and his complaint was about stopping at the right spot to read.
   data-snap is set by site.js once the block has been measured. */
.prose{scroll-snap-stop:normal}
.prose[data-snap="center"]{scroll-snap-align:center}
.prose[data-snap="start"]{scroll-snap-align:start}
/* never snap a pane that is being scrubbed — it would fight the reader mid-animation */
.chapter,.chapter .sticky,.stagebox,.hero,.rec{scroll-snap-align:none}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}}
body{margin:0;background:var(--bg);color:var(--fg-1);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- the act rail: always-visible routing (Gioele: "routing slides we go back to") ---------- */
#rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  border-right:1px solid var(--border);background:rgba(11,13,17,.82);backdrop-filter:blur(14px);
  display:flex;flex-direction:column;align-items:center;padding:26px 0;gap:0}
#rail .mark{font:700 15px/1 var(--mono);color:var(--accent);letter-spacing:.08em;margin-bottom:26px}
#rail .acts{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;width:100%}
#rail .act{position:relative;display:flex;align-items:center;justify-content:center;height:34px;
  cursor:pointer;color:var(--fg-3);font:600 12px/1 var(--mono)}
#rail .act .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.42;
  transition:opacity .2s,transform .2s}
#rail .act.on{color:var(--accent)}
#rail .act.on .dot{opacity:1;transform:scale(1.7)}
#rail .act .tip{position:absolute;left:calc(100% + 12px);white-space:nowrap;opacity:0;
  pointer-events:none;font:600 14px/1 var(--sans);color:var(--fg-1);background:var(--surface-2);
  border:1px solid var(--border-strong);padding:9px 13px;border-radius:8px;transition:opacity .16s}
#rail .act:hover .tip{opacity:1}
#rail .pct{font:600 12px/1 var(--mono);color:var(--fg-3)}

main{margin-left:var(--rail)}

/* ---------- prose: the room the slides never had ---------- */
.prose{max-width:940px;margin:0 auto;padding:132px 40px}
.prose.tight{padding:84px 40px}
.kicker{font:600 14px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:22px}
.prose h2{font:700 clamp(34px,4.4vw,58px)/1.16 var(--sans);letter-spacing:-1.4px;margin:0 0 28px}
.prose h3{font:700 clamp(22px,2.4vw,30px)/1.28 var(--sans);letter-spacing:-.5px;margin:52px 0 16px}
.prose p{font:400 clamp(17px,1.55vw,21px)/1.68 var(--sans);color:var(--fg-2);margin:0 0 22px}
.prose p.lede{font-size:clamp(20px,2vw,26px);line-height:1.56;color:var(--fg-1)}
/* a lede that follows a paragraph is an emphasis, not an opener: give it a rule and the accent */
.prose p + p.lede{color:var(--fg-1);font-weight:600;border-left:3px solid var(--accent);
  padding-left:26px;margin-top:34px}
.prose b,.prose strong{color:var(--fg-1);font-weight:700}
.prose .em{color:var(--accent)}
.prose blockquote{margin:34px 0;padding:4px 0 4px 28px;border-left:3px solid var(--accent);
  font:400 clamp(18px,1.8vw,23px)/1.55 var(--sans);color:var(--fg-1)}
.prose blockquote cite{display:block;margin-top:14px;font:500 15px/1.4 var(--mono);
  color:var(--fg-3);font-style:normal}

/* figures inside prose */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;margin:44px 0}
.stat .v{font:800 clamp(32px,3.6vw,48px)/1 var(--sans);letter-spacing:-1.5px;color:var(--accent);
  font-variant-numeric:tabular-nums}
.stat .k{font:400 15px/1.45 var(--sans);color:var(--fg-3);margin-top:12px}
table.ledger{width:100%;border-collapse:collapse;margin:38px 0;
  font:400 clamp(15px,1.4vw,17px)/1.5 var(--sans)}
table.ledger th{text-align:left;font:600 13px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);padding:0 16px 14px 0;border-bottom:1px solid var(--border)}
table.ledger td{padding:15px 16px 15px 0;border-bottom:1px solid var(--border);color:var(--fg-2);
  vertical-align:top}
table.ledger td.n{font-family:var(--mono);color:var(--fg-1);font-variant-numeric:tabular-nums;
  white-space:nowrap}
table.ledger tr.tot td{border-bottom:none;color:var(--fg-1);font-weight:700}

/* ---------- a scene: sticky viewport, scrubbed by scroll ---------- */
.chapter{position:relative}
.chapter .sticky{position:sticky;top:0;height:100vh;height:100lvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden}
.stagebox{position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  margin-left:-960px;margin-top:-540px;transform-origin:50% 50%;flex:none}
.stagebox iframe{width:1920px;height:1080px;border:0;display:block;background:var(--bg-2)}
.chapter .title{position:absolute;left:0;right:0;top:30px;text-align:center;z-index:5;
  font:600 14px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);
  pointer-events:none}
.chapter .bar{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;width:min(420px,42vw);
  height:2px;background:var(--border);z-index:5;border-radius:2px;overflow:hidden}
.chapter .bar i{display:block;height:100%;width:0;background:var(--accent)}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--fg-3);font:500 15px/1 var(--mono)}

/* ---------- a recording ---------- */
.rec{max-width:1400px;margin:0 auto;padding:96px 40px}
.rec video{width:100%;border-radius:14px;border:1px solid var(--border-strong);display:block;
  background:#000}
.rec .cap{font:400 16px/1.5 var(--sans);color:var(--fg-3);margin-top:18px;text-align:center}

/* ---------- the ask ---------- */
.ask{background:linear-gradient(180deg,var(--bg) 0%,#0d1a1a 46%,var(--bg) 100%)}
.ask .prose h2{color:var(--fg-1)}
.bignum{font:800 clamp(64px,11vw,168px)/.94 var(--sans);letter-spacing:-6px;color:var(--accent);
  font-variant-numeric:tabular-nums;margin:26px 0 8px}
.bignum small{display:block;font:400 clamp(16px,1.6vw,21px)/1.5 var(--sans);color:var(--fg-2);
  letter-spacing:0;margin-top:22px;max-width:760px}

/* ---------- the arithmetic strip ---------- */
.arith{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin:44px 0}
.arith .cell{flex:1 1 150px;border:1px solid var(--border);border-radius:12px;padding:22px 20px;
  background:var(--surface)}
.arith .cell .v{font:700 26px/1 var(--mono);font-variant-numeric:tabular-nums}
.arith .cell .k{font:400 14px/1.45 var(--sans);color:var(--fg-3);margin-top:11px}
.arith .op{display:flex;align-items:center;font:700 26px/1 var(--mono);color:var(--fg-3);padding:0 2px}

@media (max-width:900px){
  :root{--rail:52px}
  #rail .act{height:26px}
  .prose{padding:88px 24px}
  /* Gioele: the recordings are the thing he liked most on a phone, but at 40px of padding inside a
     390px viewport minus the rail they landed 258px wide — a 1920-wide screen capture at that size is
     unreadable. Break them out of the rail and the page gutter so they get the whole screen.
     Pull left by exactly the rail rather than centring on the viewport: .rec lives inside main,
     which is already offset by var(--rail), so a left:50%/translateX(-50%) break-out centres on the
     wrong box and pushes half the rail off the right edge. */
  .rec{padding:64px 0;max-width:none;width:100vw;margin-left:calc(-1 * var(--rail))}
  .rec video{border-radius:0;border-left:0;border-right:0}
  .rec .cap{padding:0 24px}
}

/* Gioele: "almost a pity movies are horizontal, maybe we can suggest scrolling with rotated
   smartphone for a better experience." Portrait phones only, and it disappears the moment the
   screen is turned. */
.rotate-hint{display:none}
@media (max-width:900px) and (orientation:portrait){
  .rotate-hint{display:block;font:500 14px/1.5 var(--sans);color:var(--accent);
    text-align:center;padding:0 24px 16px}
}

/* ---------- hero ---------- */
.hero{min-height:96vh;display:flex;flex-direction:column;justify-content:center;
  max-width:1100px;margin:0 auto;padding:0 40px;position:relative}
.hero h1{font:800 clamp(64px,12vw,190px)/.92 var(--sans);letter-spacing:-7px;margin:0 0 34px;
  color:var(--fg-1)}
.hero .lede{font:400 clamp(20px,2.4vw,32px)/1.44 var(--sans);color:var(--fg-2);max-width:880px;
  margin:0 0 34px}
.hero .meta{font:500 15px/1 var(--mono);letter-spacing:.1em;color:var(--fg-3);text-transform:uppercase}
.scrollhint{display:none}           /* Luca: "Scroll" remove */

/* ---------- the pipeline map: the one figure that shows all of it at once ---------- */
.pipe{display:flex;align-items:stretch;gap:8px;margin:52px 0 20px;padding-bottom:6px;
  /* break out of the prose measure: this figure is the one thing that wants the whole width */
  width:min(1580px,calc(100vw - var(--rail) - 76px));position:relative;left:50%;
  transform:translateX(-50%);overflow-x:auto;scrollbar-width:thin}
.pipe .stage{flex:1 1 0;min-width:0;border:1px solid var(--border);border-radius:13px;padding:20px 16px;background:var(--surface)}
.pipe .sn{font:700 15px/1.3 var(--sans);color:var(--fg-1);margin-bottom:16px;letter-spacing:-.2px}
.pipe .f{margin-top:13px}
.pipe .fv{display:block;font:700 19px/1.15 var(--mono);word-break:break-word;color:var(--accent);
  font-variant-numeric:tabular-nums}
.pipe .fk{display:block;font:400 13px/1.4 var(--sans);color:var(--fg-3);margin-top:5px}
.pipe .arrow{display:flex;align-items:center;color:var(--fg-3);font:400 20px/1 var(--mono);flex:0 0 auto}
@media (max-width:1100px){ .pipe{gap:6px} .pipe .stage{flex:0 0 158px;min-width:158px;padding:15px 13px} }

/* ---------- hero: Luca's own title slide, rebuilt — text, authors, funders ---------- */
.hero h1{font:800 clamp(52px,8.6vw,124px)/1 var(--sans);letter-spacing:-4px;margin:0 0 18px}
/* still available if a second line is ever wanted off the title's pipe; the Cajal gloss is .cajal */
.hero h1 .why{display:block;font:400 clamp(20px,2.4vw,32px)/1.2 var(--sans);letter-spacing:-.6px;
  color:var(--fg-3);margin-top:16px}
.hero .lede{font:400 clamp(19px,2.2vw,30px)/1.36 var(--sans);color:var(--fg-2);margin:0 0 22px}
/* Luca: sits directly under the title now, at this size — not down among the authors */
.hero .cajal{font:400 clamp(15px,1.4vw,19px)/1.55 var(--sans);color:var(--fg-3);max-width:820px;
  margin:0 0 30px}
.hero .authors{font:600 clamp(16px,1.5vw,20px)/1.5 var(--sans);color:var(--fg-1);margin-bottom:16px}
.hero .team{font:400 clamp(13px,1.15vw,16px)/1.62 var(--sans);color:var(--fg-3);max-width:940px;
  margin-bottom:12px}
.hero .logos{display:none}          /* Luca: logo set remove */

/* ---------- the word itself: one look wherever it appears (Gioele) ---------- */
.mund{font-family:Georgia,'Iowan Old Style','Times New Roman',serif;font-weight:700;
  color:var(--accent);letter-spacing:.005em}
/* Gioele: "Otlet also bolded but different color" — same face as mundaneum, the other accent */
.otlet{font-family:Georgia,'Iowan Old Style','Times New Roman',serif;font-weight:700;
  color:var(--accent-2);letter-spacing:.005em}