/* The building holds the centre while its documents move through time. */
.history-page { background:#080808; color:#f3f3f3; }
.history-experience { position:relative; isolation:isolate; }
.history-sticky { height:100svh; position:sticky; top:0; margin-bottom:-100svh; pointer-events:none; z-index:0; overflow:hidden; }
.history-stage { position:absolute; inset:0; background:#080808; }
.history-stage .cinema-poster { width:62%; height:65%; left:19%; top:18%; object-fit:contain; }
.history-vignette { position:absolute; inset:0; background:linear-gradient(90deg,#080808d9,transparent 32%,transparent 68%,#080808d9),linear-gradient(0deg,#080808,transparent 22%,transparent 83%,#08080888); }
.history-scene-label { position:absolute; bottom:52px; left:30%; right:30%; text-align:center; }
.history-scene-label>span { display:block; font:500 28px/1.1 var(--display); letter-spacing:-.04em; }
.history-scene-label p { margin-top:12px; font-size:6px; letter-spacing:.13em; color:#999; }
.history-controls { position:absolute; bottom:32px; right:5%; display:flex; gap:23px; align-items:center; pointer-events:auto; }
.history-controls>a { font-size:8px; color:#aaa; }
.history-controls>a>span { margin-left:10px; }
.history-intro { position:relative; z-index:1; min-height:100svh; padding:175px 6% 100px; display:flex; justify-content:space-between; align-items:flex-start; gap:25px; pointer-events:none; }
.history-intro>div { width:29%; max-width:390px; }
.history-intro .eyebrow { display:block; font-size:7px; letter-spacing:.1em; color:#aaa; margin-bottom:32px; }
.history-intro h1 { font-size:clamp(56px,5.3vw,85px); letter-spacing:-.065em; line-height:1.02; }
.history-intro h1 em { font-size:1.12em; }
.history-intro p { font-size:12px; color:#aaa; margin-top:28px; max-width:275px; line-height:1.8; }
.history-start { margin-top:34px; display:flex; align-items:center; gap:25px; font-size:10px; pointer-events:auto; }
.history-start>span { display:grid; place-items:center; width:35px; height:35px; border:1px solid #fff3; border-radius:50%; font-size:18px; }
.history-intro-location { font-size:6px; letter-spacing:.11em; text-align:right; color:#8b8b8b; line-height:1.9; padding-top:8px; }
.history-chapters { list-style:none; position:relative; z-index:1; margin:0; padding:0; }
.history-chapters::before { content:''; position:absolute; left:35px; top:40px; bottom:60px; width:1px; background:#ffffff16; }
.history-step { position:relative; min-height:110svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); gap:4%; padding:100px 6%; align-items:center; scroll-margin-top:0; }
.history-step::before { content:''; position:absolute; left:32px; top:50%; width:7px; height:7px; border:1px solid #737373; border-radius:50%; background:#080808; transition:background .4s,box-shadow .4s; }
.history-step.is-current::before { background:#3159ff; border-color:#3159ff; box-shadow:0 0 0 5px #3159ff1a; }
.history-copy { grid-column:1; width:100%; padding:23px; border:1px solid #ffffff19; border-radius:24px; background:#121212d6; backdrop-filter:blur(15px); }
.history-step-right .history-copy { grid-column:3; }
.history-step-index { display:block; color:#777; font-size:7px; letter-spacing:.1em; margin-bottom:25px; }
.history-year { display:block; font:500 clamp(28px,3.1vw,47px)/1.02 var(--display); letter-spacing:-.05em; color:#b8c5ff; margin-bottom:18px; }
.history-copy>.eyebrow { display:block; font-size:6px; color:#8d8d8d; letter-spacing:.11em; margin-bottom:12px; }
.history-copy h2 { font-size:clamp(29px,2.6vw,42px); line-height:1.05; letter-spacing:-.055em; }
.history-copy>p { font-size:12px; line-height:1.85; color:#b5b5b5; margin-top:20px; }
.history-copy figure { margin-top:24px; }
.history-copy figure a { display:block; width:100%; aspect-ratio:16 / 10; border-radius:13px; overflow:hidden; background:#080808; }
.history-copy figure img { width:100%; height:100%; max-height:none; object-fit:contain; border-radius:13px; }
.history-copy figcaption { font-size:6px; color:#8a8a8a; line-height:1.7; margin-top:9px; }
.history-copy>p.history-document-note { font-size:8px; color:#858585; line-height:1.65; margin-top:13px; }
.history-card-sources { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:16px; font-size:7px; color:#aaa; }
.history-card-sources a:hover { color:white; }
.history-card-sources span { margin-left:4px; }
.history-copy .text-link { font-size:10px; gap:15px; margin-top:22px; }
.history-index { position:fixed; z-index:21; right:19px; top:50%; translate:0 -50%; display:flex; flex-direction:column; gap:12px; opacity:0; visibility:hidden; transition:opacity .3s; }
.history-has-started.history-in-view .history-index { opacity:1; visibility:visible; }
.history-index a { display:flex; align-items:center; justify-content:flex-end; gap:10px; width:60px; height:24px; }
.history-index a>i { display:block; width:4px; height:4px; background:#777; border-radius:50%; transition:height .3s,background .3s; }
.history-index a[aria-current]>i { height:20px; border-radius:4px; background:#a7b7ff; }
.history-index a>span { font-size:7px; opacity:0; white-space:nowrap; transition:opacity .3s; }
.history-index a:hover>span,.history-index a:focus-visible>span { opacity:1; }
.history-comparison { position:relative; z-index:2; padding:100px 6% 65px; background:#080808; }
.history-comparison-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; margin-bottom:45px; }
.history-comparison-heading .eyebrow { color:#888; font-size:7px; margin-bottom:23px; display:block; }
.history-comparison h2 { font-size:clamp(43px,5vw,76px); line-height:1.03; letter-spacing:-.055em; }
.history-comparison-heading>p { color:#aaa; font-size:12px; line-height:1.8; max-width:270px; }
.history-compare { position:relative; width:100%; aspect-ratio:16 / 9; background:#151515; border-radius:28px; overflow:hidden; border:1px solid #ffffff24; }
.history-compare>img,.compare-before,.compare-before>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare-before { clip-path:inset(0 calc(100% - var(--compare)) 0 0); }
.compare-label { position:absolute; top:25px; border-radius:30px; padding:10px 15px; background:#111c; font-size:7px; color:white; backdrop-filter:blur(10px); pointer-events:none; }
.compare-label-before { left:25px; }.compare-label-project { right:25px; }
.compare-divider { position:absolute; top:0; bottom:0; left:var(--compare); width:1px; background:white; translate:-50% 0; pointer-events:none; }
.compare-divider>span { position:absolute; top:50%; left:50%; translate:-50% -50%; width:52px; height:52px; display:grid; place-items:center; border:1px solid #ffffff88; border-radius:50%; background:#3159ff; font-size:24px; box-shadow:0 2px 25px #0005; }
.history-compare input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; touch-action:pan-y; margin:0; padding:0; }
.history-compare:focus-within { outline:2px solid #879fff; outline-offset:5px; }
.history-compare-caption { font-size:9px; line-height:1.8; color:#888; margin-top:17px; max-width:760px; }
.history-sources { padding:30px 6% 90px; border-top:1px solid #ffffff1b; margin:0 6%; padding-left:0; padding-right:0; }
.history-sources h2 { font-size:27px; letter-spacing:-.04em; margin-bottom:22px; }
.history-sources>p { font-size:11px; line-height:1.9; color:#999; max-width:720px; }
.history-sources>div { display:flex; flex-wrap:wrap; gap:15px 35px; margin:28px 0; }
.history-sources>div>a { font-size:10px; color:#d5d5d5; }
.history-sources>div>a>span { margin-left:12px; }
.history-sources>.history-material-note { font-size:9px; color:#777; }
.history-sources>.text-link { color:white; margin-top:35px; font-size:11px; }
@media(max-width:1100px) and (min-width:761px){
 .history-step { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr); gap:3%; padding-left:6%; padding-right:6%; }
 .history-copy { padding:20px; }
 .history-copy h2 { font-size:29px; }
 .history-copy>p { font-size:10px; }
 .history-intro h1 { font-size:61px; }
 .history-intro>div { width:32%; }
 .history-chapters::before { left:22px; }.history-step::before { left:19px; }
}
@media(prefers-reduced-motion:reduce){
 .history-index,.history-index a>i,.history-step::before {transition:none}
 .history-copy.reveal {opacity:1;transform:none;transition:none}
}

.history-mobile-navigation { display:none; }
@media(max-width:760px) {
  html[data-scene-page]:not(.home-scroll) { scroll-padding-top:0; }
  .history-experience { --history-scene-height:clamp(290px,46svh,400px); }
  .history-sticky {
    z-index:2; pointer-events:auto;
    height:var(--history-scene-height); margin-bottom:calc(-1 * var(--history-scene-height));
    clip-path:none; -webkit-mask-image:none; mask-image:none; background:#080808;
    border-bottom:1px solid #ffffff18;
  }
  .history-sticky::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
    background:#7f96ff; transform:scaleX(var(--history-progress,0)); transform-origin:left;
  }
  .history-stage { inset:82px 0 68px; }
  .history-stage .cinema-poster { inset:0; width:100%; height:100%; object-fit:contain; }
  .history-vignette { inset:82px 0 68px; background:linear-gradient(0deg,#080808,transparent 20%,transparent 80%,#080808); }
  .history-scene-label { top:auto; left:22px; right:140px; bottom:19px; text-align:left; }
  .history-scene-label>span { font-size:21px; }
  .history-scene-label p { font-size:6px; margin-top:7px; letter-spacing:.06em; white-space:nowrap; }
  .history-experience:not(.history-has-started) .history-scene-label>span { font-size:15px; }
  .history-controls { top:85px; right:18px; bottom:auto; gap:0; }
  .history-controls>a { display:none; }
  .history-controls .cinema-motion { font-size:8px; padding:10px; min-width:70px; min-height:44px; border-radius:12px; background:#080808bb; }
  .history-mobile-navigation { position:absolute; bottom:13px; right:18px; display:flex; gap:12px; align-items:center; pointer-events:auto; }
  .history-mobile-navigation>span { font-size:9px; color:#999; font-variant-numeric:tabular-nums; }
  .history-mobile-navigation>div { display:flex; gap:6px; }
  .history-mobile-navigation button { width:44px; height:44px; display:grid; place-items:center; font-size:20px; border:1px solid #ffffff26; border-radius:50%; background:#151515; }
  .history-mobile-navigation button:disabled { color:#555; border-color:#ffffff0d; }
  .history-intro { min-height:100svh; padding:calc(var(--history-scene-height) + 40px) 22px 45px; }
  .history-intro>div { width:100%; max-width:390px; }
  .history-intro-location { display:none; }
  .history-intro .eyebrow { font-size:8px; margin-bottom:22px; }
  .history-intro h1 { font-size:clamp(48px,13vw,66px); }
  .history-intro p { font-size:14px; line-height:1.75; max-width:350px; }
  .history-start { min-height:44px; font-size:12px; margin-top:24px; }
  .history-step { display:block; min-height:0; padding:24px 20px 54px; scroll-margin-top:var(--history-scene-height); }
  .history-copy { padding:25px; border-radius:24px; background:#131313; backdrop-filter:none; }
  .history-step-index { font-size:9px; margin-bottom:24px; }
  .history-year { font-size:40px; margin-bottom:20px; }
  .history-copy>.eyebrow { font-size:8px; margin-bottom:13px; }
  .history-copy h2 { font-size:35px; }
  .history-copy>p { font-size:14px; line-height:1.8; margin-top:22px; }
  .history-copy figcaption { font-size:10px; line-height:1.6; }
  .history-copy>p.history-document-note { font-size:11px; line-height:1.7; }
  .history-copy .history-card-sources { font-size:11px; gap:4px 16px; }
  .history-card-sources a { min-height:44px; display:inline-flex; align-items:center; }
  .history-copy .text-link { font-size:12px; min-height:44px; }
  .history-copy.reveal { opacity:1; transform:none; transition:none; }
  .history-chapters::before,.history-step::before,.history-index { display:none; }
  .history-comparison { padding:50px 22px 45px; scroll-margin-top:100px; }
  .history-comparison-heading { display:block; margin-bottom:30px; }
  .history-comparison h2 { font-size:40px; }
  .history-comparison-heading .eyebrow { font-size:8px; line-height:1.8; }
  .history-comparison-heading>p { max-width:340px; font-size:14px; line-height:1.75; margin-top:25px; }
  .history-compare { aspect-ratio:1; }
  .compare-label { font-size:7px; max-width:43%; line-height:1.5; padding:7px 8px; top:15px; }
  .compare-label-before { left:13px; }.compare-label-project { right:13px; }
  .compare-divider>span { width:46px; height:46px; }
  .history-compare-caption { font-size:11px; }
  .history-sources { margin:0 22px; padding-bottom:65px; }
  .history-sources h2 { font-size:25px; }
  .history-sources>p { font-size:13px; line-height:1.8; }
  .history-sources>div { flex-direction:column; gap:10px; }
  .history-sources>div>a { font-size:12px; min-height:44px; display:flex; align-items:center; justify-content:space-between; }
  .history-sources>.history-material-note { font-size:11px; }
  .history-sources>.text-link { font-size:12px; min-height:44px; }
}
@media(max-width:360px) {
 .history-step { padding-left:14px; padding-right:14px; }
 .history-copy { padding:22px; }
 .history-copy h2 { font-size:31px; }
 .history-scene-label { left:18px; right:150px; }
 .history-scene-label>span { font-size:18px; }
 .history-mobile-navigation { right:14px; gap:8px; }
 .history-scene-label p { max-width:140px; white-space:normal; font-size:5px; }
}

/* Let the browser settle each chapter; keep long documents readable inside
   their snap area rather than intercepting wheel or touch gestures. */
html[data-history-page] { scroll-snap-type:y mandatory; scroll-padding:100px 0 24px; }
.history-intro { scroll-snap-align:start; }
.history-copy { scroll-snap-align:center; scroll-snap-stop:normal; }
.history-comparison,.history-sources { scroll-snap-align:start; }
body[data-category=storia]>.site-footer { scroll-snap-align:end; }
@media(max-width:760px) {
  html[data-history-page] { scroll-padding:0; }
  .history-copy { scroll-snap-align:start; scroll-margin-top:calc(var(--history-scene-height) + 24px); scroll-margin-bottom:24px; }
  .history-intro { scroll-margin:0; }
}
/* Snap positions are geometric anchors: do not translate their boxes on reveal. */
.js-ready .history-copy.reveal { transform:none; transition:opacity .5s; }