:root{--ink:#171715;--paper:#e8e0d1;--red:#754036;--olive:#64664b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #b59c61;outline-offset:6px}header{height:106px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:var(--paper);color:var(--ink);border-bottom:1px solid #17171520}.header-brand{display:inline-flex;align-items:center;text-decoration:none}.header-logo{height:80px;width:auto;max-width:100%;object-fit:contain;display:block}.brand{font-weight:800;font-size:43px;letter-spacing:-3px;display:flex;gap:17px;align-items:center}.brand span{font-size:9px;letter-spacing:1.1px;line-height:1.5;border-left:1px solid #ffffff55;padding-left:17px;font-weight:400}nav{display:flex;gap:26px;font-size:12px;align-items:center}.lang-switch{display:inline-flex;align-items:center;gap:5px;margin-left:12px;padding-left:14px;border-left:1px solid #17171525;font-size:11px;letter-spacing:.8px}.lang-link{color:#6c6659;text-decoration:none;font-weight:600;padding:2px 3px;transition:color 180ms ease,border-color 180ms ease;border-bottom:1.5px solid transparent}.lang-link:hover{color:var(--ink)}.lang-link:focus-visible{outline:2px solid #b59c61;outline-offset:2px}.lang-link.is-active{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}.lang-sep{color:#17171535;font-size:9px;user-select:none}.footer-brand{display:inline-flex;align-items:center;text-decoration:none}.footer-logo{height:60px;width:auto;max-width:100%;object-fit:contain;display:block}.header-link{font-size:11px;border-bottom:1px solid #17171560;padding:12px 0;color:var(--ink)}.header-link span{margin-left:28px}.hero{background:var(--ink);color:var(--paper);min-height:730px;height:calc(100svh - 106px);max-height:1000px;position:relative;overflow:hidden}.hero-photo{position:absolute;inset:0 0 0 28%;background-image:linear-gradient(90deg,#171715 0%,#17171565 40%,#17171510),linear-gradient(0deg,#171715df,transparent 45%),url('images/mupa-portada.png');background-size:auto,auto,cover;background-position:center,center,center center;filter:none;opacity:.85}.hero-content{position:relative;padding:65px 7%;max-width:850px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:500;line-height:1.6}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-2px;line-height:1.04}h1{font-size:clamp(65px,7.8vw,120px);margin:30px 0}h1 i,h2 i{font-weight:400;color:#b5b59a}h2{font-size:clamp(44px,4.9vw,72px);margin-bottom:35px}p{line-height:1.8;font-size:14px}.hero-description{max-width:390px;font-size:13px;color:#d2cbbc;line-height:1.9}.button{display:inline-flex;justify-content:space-between;gap:48px;align-items:center;padding:18px 23px;background:var(--paper);color:var(--ink);border:0;font-size:10px;letter-spacing:1.3px;margin-top:20px;transition:background .2s}.button:hover{background:#fff5df}.button span{font-size:20px}.hero-bottom{position:absolute;bottom:30px;left:7%;right:5%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px}.photo-credit{padding:13px 5%;font-size:9px;background:#ded6c7;color:#5b564e;line-height:1.6}.photo-credit button{background:none;border:0;text-decoration:underline;font-size:9px}.section{padding:110px 7%}.intro{display:grid;grid-template-columns:1fr 2fr 1fr;gap:6%;border-bottom:1px solid #17171530}.intro h2 i,.collections h2 i,.witness h2 i{color:var(--red)}.intro .lead{font-size:20px;line-height:1.6}.intro p:not(.eyebrow){max-width:490px}.side-note{align-self:end;color:#6c6659}.small-rule{display:block;width:40px;border-top:2px solid var(--olive);margin-bottom:25px}.side-note p{font-family:Georgia,serif;font-style:italic;font-size:20px}.side-note .eyebrow{font-size:8px}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px}.section-top h2{margin-bottom:0}.section-top>p{max-width:280px;color:#77715f}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.collection{text-align:left;background:transparent;border:0;padding:0}.collection-number{display:block;font-size:8px;letter-spacing:1.4px;margin-bottom:17px}.visual{height:300px;margin-bottom:25px;overflow:hidden;transition:filter .3s}.collection:hover .visual{filter:brightness(1.12)}.voice-art{background:var(--red);position:relative;display:flex;align-items:center;justify-content:center;color:#dcc8aa}.voice-art>span{font-family:Georgia,serif;font-size:230px;line-height:1}.sound-lines{position:absolute;bottom:45px;height:30px;left:30px;right:30px;background:repeating-linear-gradient(90deg,transparent 0px,transparent 4px,#dcc8aa55 4px,#dcc8aa55 5px)}.image-art{background:url('images/jerusalem.jpg') left center/200% 100%;filter:sepia(.5)}.document-art{background:#c9c0ad;display:flex;align-items:center;justify-content:center}.paper{background:#e7dfce;padding:27px;width:72%;transform:rotate(-6deg);box-shadow:3px 10px 25px #17171525;min-height:240px}.paper span,.paper small{font-size:7px;letter-spacing:1px}.paper b{display:block;font-family:Georgia,serif;font-size:25px;line-height:1.15;margin:20px 0}.paper hr{border:0;border-top:1px solid #a69c86}.collection h3{font-family:Georgia,serif;font-size:33px;font-weight:400;display:flex;justify-content:space-between;margin-bottom:15px}.collection h3 span{font-size:22px}.collection p{color:#635d50;font-size:12px;min-height:85px}.collection-cta{border-top:1px solid #17171550;padding:18px 0;display:block;font-size:9px;letter-spacing:1.2px}.fine{font-size:10px!important;line-height:1.7;color:#7a7365;margin:20px 0 0}.timeline{background:var(--ink);color:var(--paper)}.timeline .section-top>p{color:#b2ab9c}.years{position:relative;display:flex;overflow-x:auto;border-bottom:1px solid #ffffff35;padding-bottom:0;margin-top:60px}.years button{flex:1;min-width:79px;padding:20px 8px;border:0;border-bottom:3px solid transparent;background:transparent;color:#a49e91;font-size:12px}.years button[aria-pressed=true]{border-color:#c6bba7;color:var(--paper)}.timeline-content{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;padding-top:65px;min-height:300px}.large-year{font-family:Georgia,serif;font-size:clamp(80px,13vw,200px);color:#74765b;line-height:1}.timeline-content h3{font-family:Georgia,serif;font-size:35px;font-weight:400;margin:15px 0}.timeline-content p{color:#c0b9aa;font-size:13px}.timeline-content a{display:inline-block;font-size:10px;letter-spacing:1px;border-bottom:1px solid #ffffff55;padding-bottom:7px;margin-top:6px}.timeline-controls{display:flex;justify-content:flex-end;gap:20px;align-items:center}.timeline-controls button{background:transparent;border:1px solid #ffffff40;color:var(--paper);width:43px;height:43px}.timeline-controls span{font-size:10px}.featured{display:grid;grid-template-columns:1fr 1fr;gap:15%;background:var(--red);color:var(--paper)}.feature-date{font-size:13px;letter-spacing:7px;margin:50px 0 24px}.featured h2{margin:0}.featured h2 i{color:#d7baa6}.feature-copy{align-self:center}.feature-copy p{font-size:13px}.feature-copy .lead{font-family:Georgia,serif;font-size:27px;line-height:1.4}.feature-copy .fine{display:block;color:#d7baa6}
.featured.nakba-timeline{display:block;background:var(--red);color:var(--paper)}
.featured.nakba-timeline .section-top h2{margin:0;color:var(--paper)}
.featured.nakba-timeline .section-top h2 i{color:#d7baa6}
.featured.nakba-timeline .eyebrow{color:#d7baa6}
#nakba-years{border-bottom:1px solid #ffffff35}
#nakba-years button{color:#d7baa6;white-space:nowrap;min-width:max-content;padding:20px 14px}
#nakba-years button:hover{color:var(--paper)}
#nakba-years button[aria-pressed="true"]{border-color:var(--paper);color:var(--paper)}
.nakba-timeline .timeline-content{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;padding-top:65px;min-height:300px}
.large-year.nakba-large-date{font-family:Georgia,serif;font-size:clamp(38px,5.2vw,68px);line-height:1.1;color:#d7baa6;letter-spacing:-0.5px;align-self:start}
.nakba-timeline .timeline-content h3{font-family:Georgia,serif;font-size:clamp(24px,3.2vw,35px);font-weight:400;margin:15px 0;color:var(--paper);line-height:1.25}
.nakba-timeline .timeline-content p{color:#ecd5c5;font-size:13px;line-height:1.7}
.nakba-timeline .timeline-controls{display:flex;justify-content:flex-end;gap:20px;align-items:center}
.nakba-timeline .timeline-controls button{background:transparent;border:1px solid #ffffff40;color:var(--paper);width:43px;height:43px}
.nakba-timeline .timeline-controls span{font-size:10px;color:var(--paper)}
@media(max-width:768px){.featured.nakba-timeline{display:block}.nakba-timeline .timeline-content{grid-template-columns:1fr;gap:25px;padding-top:35px}.large-year.nakba-large-date{font-size:clamp(30px,7vw,44px);line-height:1.15}}
@media(max-width:600px){#nakba-years{margin-top:35px}#nakba-years button{padding:16px 10px;font-size:12px}}
@media(max-width:360px){#nakba-years button{padding:14px 8px;font-size:11px}}.witness{border-bottom:1px solid #17171530}.witness h2{margin-top:35px}.witness-bottom{display:flex;justify-content:space-between;gap:70px;align-items:end}.witness-bottom p{max-width:500px;margin:0}.text-button{background:none;border:0;border-bottom:1px solid var(--ink);font-size:9px;letter-spacing:1px;padding:15px 0}.closing{text-align:center;padding:120px 5%;background:#d9d2c2}.closing h2{font-size:clamp(35px,4.9vw,72px);margin:35px 0}.closing h2 i{color:var(--red)}.closing a{font-size:10px;letter-spacing:1.5px;border-bottom:1px solid #17171560;padding:13px}footer{background:var(--ink);color:var(--paper);padding:60px 5% 30px}.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center}.footer-top{padding-bottom:50px;border-bottom:1px solid #ffffff30}.footer-top p{font-size:11px;margin:0}.footer-bottom{padding-top:25px;font-size:9px;color:#b1aa9a;gap:25px}.footer-bottom div{display:flex;gap:22px}.footer-bottom button{background:none;border:0;padding:0;font-size:9px}.skip{position:absolute;top:-100px;z-index:5;background:var(--paper);padding:15px}.skip:focus{top:0}dialog{border:1px solid #a99c84;background:var(--paper);color:var(--ink);width:min(720px,90vw);max-height:85svh;padding:40px}dialog::backdrop{background:#171715bb}.dialog-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #17171540;padding-bottom:20px;margin-bottom:30px}.dialog-top button{background:none;border:0;font-size:32px}dialog h2{font-size:40px}dialog h3{font-family:Georgia,serif;font-size:24px;font-weight:400}dialog a{text-decoration:underline;text-underline-offset:4px}dialog img{width:100%;margin:20px 0}dialog li{font-size:14px;line-height:1.9}body:has(dialog[open]){overflow:hidden}.nav-toggle{display:none}.nav-extra-link{display:none}.nav-toggle-icon{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;width:16px;height:12px}.nav-bar{display:block;width:100%;height:2px;background:currentColor;border-radius:1px}
@media(min-width:1500px){.hero-content{padding-top:90px}}
@media(max-width:900px){header{height:85px;padding:0 5%}.header-logo{height:50px}.brand{font-size:35px}nav{gap:16px}.lang-switch{margin-left:8px;padding-left:10px;gap:3px}.header-link{display:none}.hero{height:auto;min-height:680px;display:flex;flex-direction:column;justify-content:space-between}.hero-content{padding:60px 6% 30px}.hero-photo{left:15%}.hero-bottom{position:relative;bottom:auto;left:auto;right:auto;margin-top:auto;padding:24px 6% 28px}.intro{display:grid;grid-template-columns:1fr 2fr;gap:40px}.side-note{grid-column:1/-1;display:block;margin-top:15px;max-width:490px}.section{padding:75px 6%}.visual{height:260px}.collection-grid{gap:20px}.featured{gap:9%}.witness-bottom{gap:30px}}
@media(max-width:768px){.collection-grid{grid-template-columns:1fr;gap:35px}.visual{height:clamp(250px,46vw,320px)}.collection p{min-height:0}.timeline-content{grid-template-columns:1fr;gap:25px;padding-top:35px}.large-year{font-size:clamp(70px,16vw,120px);line-height:0.95}.timeline-controls{margin-top:30px}.featured{grid-template-columns:1fr;gap:35px}.feature-date{margin-top:25px}.witness-bottom{display:block}.witness-bottom button{margin-top:22px}}
@media(max-width:680px){header{position:relative;padding:0 6%}.header-logo{height:46px}.nav-toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid #17171540;color:var(--ink);padding:8px 12px;font-size:10px;letter-spacing:1px;cursor:pointer}.nav-toggle:focus-visible{outline:3px solid #b59c61;outline-offset:3px}nav{display:none}header.nav-open nav,nav.is-open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--paper);color:var(--ink);border-bottom:1px solid #17171525;padding:20px 6%;gap:14px;z-index:100;box-shadow:0 12px 28px rgba(23,23,21,0.12)}header.nav-open nav a,nav.is-open a{font-size:13px;padding:8px 0;border-bottom:1px solid #17171515;color:var(--ink)}nav .nav-extra-link{display:block;color:var(--red);font-size:11px;padding-top:6px;border-bottom:none}.lang-switch{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:14px 0 0;border-left:none;border-top:1px solid #17171520;font-size:13px}.lang-link{padding:6px 6px}.lang-sep{display:none}.brand{font-size:32px;gap:12px}.brand span{padding-left:12px;font-size:7px}}
@media(max-width:600px){header{padding:0 6%}.header-logo{height:44px}.footer-logo{height:48px}.hero{min-height:calc(100svh - 85px);height:auto;display:flex;flex-direction:column;justify-content:space-between}.hero-content{padding:45px 6% 25px;max-width:100%}.hero-photo{left:0;opacity:.35;background-position:center top}.hero h1{font-size:clamp(38px,11vw,62px);margin:20px 0;line-height:1.05;letter-spacing:-1.5px}.hero-description{max-width:100%;font-size:13px;line-height:1.8}.button{display:inline-flex;max-width:100%;gap:clamp(16px,5vw,36px);padding:16px 20px;font-size:10px}.hero-bottom{position:relative;bottom:auto;left:auto;right:auto;margin-top:auto;padding:20px 6% 25px;font-size:8px;gap:16px;justify-content:space-between;flex-wrap:wrap}.photo-credit{font-size:8px;padding:12px 6%}.intro{display:block}.intro>.eyebrow{margin-bottom:25px}.intro .lead{font-size:18px}.side-note{display:block;margin-top:30px}.section{padding:60px 6%}.section-top{display:block}.section-top>p{margin-top:20px;max-width:100%}.years{margin-top:35px}.years button{min-width:72px;padding:16px 8px}.footer-top{align-items:start;gap:20px}.footer-top .brand{font-size:28px}.footer-top p{font-size:10px;max-width:110px}.footer-bottom{align-items:start;flex-direction:column;gap:18px;padding-top:20px}.footer-bottom div{display:flex;flex-wrap:wrap;gap:14px 18px}.footer-bottom button{font-size:9px;padding:6px 0;min-height:36px;display:inline-flex;align-items:center}dialog{padding:22px 18px;width:94vw;max-height:90svh;overflow-y:auto;border-width:1px}.dialog-top{position:sticky;top:-22px;background:var(--paper);z-index:10;padding-top:6px;margin-top:-6px;padding-bottom:14px;margin-bottom:18px}.dialog-top button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:28px}dialog h2{font-size:clamp(26px,6.5vw,36px);letter-spacing:-1.2px}dialog h3{font-size:20px}.dialog-portraits{gap:8px;margin:18px 0}.dialog-portraits figcaption{font-size:9px;line-height:1.25}h2{letter-spacing:-1.5px;font-size:clamp(30px,7.5vw,52px);margin-bottom:24px}.closing{padding:80px 6%}.closing h2{font-size:clamp(28px,6vw,48px);margin:25px 0}.closing a{font-size:10px;padding:12px}.motion-toggle{margin:20px 0 0 auto;min-height:40px;padding:8px 0}}
@media(max-width:360px){header{padding:0 5%}.header-logo{height:38px}.footer-logo{height:40px}.brand{font-size:26px;gap:8px;letter-spacing:-2px}.brand span{font-size:6.5px;padding-left:8px;letter-spacing:.8px}.hero-bottom{font-size:7px;gap:10px}.button{padding:14px 16px;gap:12px}.button span{font-size:16px}.section{padding:50px 5%}.years button{min-width:64px;padding:14px 6px;font-size:11px}dialog{padding:18px 14px}.dialog-top{top:-18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Photographic collection covers */
.portrait-strip{display:grid;gap:3px;background:var(--ink);position:relative}.voices-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.documents-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.portrait-strip img{width:100%;height:100%;min-width:0;object-fit:cover;filter:grayscale(1)}.voices-strip .einstein{object-position:57% 22%}.voices-strip .arendt{object-position:48% 25%}.voices-strip .malcolm{object-position:50% 32%}.documents-strip .hitler{object-position:57% center}.documents-strip .herzl{object-position:46% 43%}.collection-photo{background:#171715}.collection-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}.photo-heading{position:absolute;bottom:0;left:0;right:0;padding:50px 20px 20px;background:linear-gradient(transparent,#171715e8);color:var(--paper);font:25px/1.1 Georgia,serif;text-align:left}.dialog-portraits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:25px 0}.dialog-portraits figure{margin:0}.dialog-portraits img{width:100%;aspect-ratio:3/4;object-fit:cover;margin:0}.dialog-portraits figcaption{font-size:10px;margin-top:8px;line-height:1.4}.dialog-portraits.two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Interactive collection slideshows */
.carousel{position:relative;isolation:isolate;background:var(--ink);touch-action:pan-y}.carousel-stage{position:absolute;inset:0}.carousel-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 850ms ease;pointer-events:none}.carousel-slide.is-active{opacity:1;z-index:1}.carousel-slide img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.carousel-slide figcaption{position:absolute;bottom:0;left:0;right:0;padding:45px 16px 55px;background:linear-gradient(transparent,#171715dc);color:var(--paper);font:18px/1.3 Georgia,serif}.carousel-tools{position:absolute;z-index:3;bottom:12px;left:12px;right:12px;display:flex;gap:8px;align-items:center;color:var(--paper)}.carousel-tools>button{width:30px;height:30px;background:#171715b8;border:1px solid #e8e0d170;color:var(--paper);display:grid;place-items:center;font-size:15px}.carousel-dots{display:flex;gap:4px;margin-right:auto}.carousel-dots button{width:24px;height:30px;border:0;background:transparent;padding:8px;position:relative}.carousel-dots button:after{content:'';display:block;width:7px;height:7px;border-radius:50%;background:#e8e0d160}.carousel-dots button[aria-pressed=true]:after{background:var(--paper)}.collection-cta{width:100%;background:none;border:0;border-top:1px solid #17171550;text-align:left;cursor:pointer}.collection:hover .carousel{filter:none}.carousel:focus-within{outline:1px solid #b59c61;outline-offset:3px}@media(prefers-reduced-motion:reduce){.carousel-slide{transition:none}}

/* Quiet cinematic motion without carousel chrome. */
.carousel-slide{transition:opacity 1000ms cubic-bezier(.25,.1,.25,1);will-change:opacity}.carousel-slide img{transform:scale(1.025);transform-origin:50% 40%;will-change:transform}.carousel-slide.is-active img{animation:editorial-drift var(--frame-duration,10500ms) linear both}.carousel-slide:nth-child(even).is-active img{animation-name:editorial-drift-reverse}.carousel-slide figcaption{padding:55px 18px 19px;font-size:16px;letter-spacing:.15px;background:linear-gradient(transparent,#171715b0)}.carousel:focus-within{outline:none}.motion-paused .carousel-slide img,.sequence-idle .carousel-slide img{animation-play-state:paused}.motion-toggle{display:block;margin:24px 0 0 auto;border:0;border-bottom:1px solid #17171545;padding:6px 0;background:none;font-size:9px;letter-spacing:.8px;color:#635d50}.motion-toggle:hover{color:var(--ink)}
@keyframes editorial-drift{from{transform:scale(1.025) translate3d(-.5%,0,0)}to{transform:scale(1.085) translate3d(.5%,-.6%,0)}}
@keyframes editorial-drift-reverse{from{transform:scale(1.085) translate3d(.5%,-.6%,0)}to{transform:scale(1.025) translate3d(-.5%,0,0)}}
@media(prefers-reduced-motion:reduce){.carousel-slide{transition:none!important}.carousel-slide.is-active img{animation:none!important;transform:none}}

/* Timeline VER MÁS button */
.timeline-more-btn{display:inline-flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);border:1px solid var(--paper);padding:11px 18px;font-size:11px;font-weight:700;letter-spacing:1.4px;cursor:pointer;margin:22px 0 16px;transition:background .2s,border-color .2s}
.timeline-more-btn:hover{background:#fff5df;border-color:#fff5df}
.timeline-more-btn:focus-visible{outline:3px solid #b59c61;outline-offset:4px}
.timeline-more-btn span{font-size:13px;line-height:1}

/* Expanded Lightbox */
dialog.dialog-expanded{width:min(1000px,94vw);max-width:1000px}
.timeline-lightbox{display:flex;flex-direction:column}
.timeline-lightbox h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(24px,3.8vw,34px);font-weight:400;line-height:1.15;letter-spacing:-1px;margin:0 0 10px;color:var(--ink)}
.timeline-lightbox h3{font-family:Georgia,'Times New Roman',serif;font-size:clamp(17px,2.3vw,21px);font-weight:400;font-style:italic;color:var(--olive);margin:0 0 14px;line-height:1.35}
.timeline-lightbox p{font-size:14px;line-height:1.85;color:#3f3b33;margin:0 0 18px}
.timeline-lightbox-entry{border-top:1px solid #17171520;padding-top:24px;margin-top:10px}
.timeline-lightbox-entry:first-of-type{border-top:none;padding-top:0;margin-top:0}
.timeline-lightbox-media{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px;align-items:start}
.timeline-lightbox-media.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-lightbox-media.three-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-lightbox-media.three-cols figure:nth-child(3):last-child{grid-column:1 / -1;max-width:calc(50% - 8px);margin:0 auto;width:100%}
.timeline-lightbox-media figure{margin:0;background:#17171508;padding:8px;border:1px solid #17171515;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timeline-lightbox-media figcaption,.timeline-lightbox-single-img figcaption{font-size:12px;line-height:1.5;color:#5a5449;margin-top:8px;text-align:center;width:100%}
.timeline-lightbox-media img{display:block;width:auto;height:auto;max-width:min(100%,520px);max-height:min(420px,55svh);object-fit:contain;margin:0 auto}
.timeline-lightbox-single-img{margin-top:16px;background:#17171508;padding:8px;border:1px solid #17171515;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timeline-lightbox-single-img img{display:block;width:auto;height:auto;max-width:min(100%,520px);max-height:min(420px,55svh);margin:0 auto;object-fit:contain}
.nakba-chronology{margin:14px 0 18px;display:flex;flex-direction:column;gap:14px}
.nakba-entry{border-left:2px solid #17171520;padding-left:14px}
.nakba-entry p{margin:0;font-size:14px;line-height:1.75;color:#3f3b33}
.nakba-entry strong{display:inline-block;color:var(--ink);font-size:13px;letter-spacing:.3px;margin-bottom:3px}
@media(max-width:768px){.timeline-lightbox-media.two-cols,.timeline-lightbox-media.three-cols{grid-template-columns:1fr}.timeline-lightbox-media.three-cols figure:nth-child(3):last-child{grid-column:auto;max-width:100%}.timeline-lightbox-media img,.timeline-lightbox-single-img img{max-width:min(100%,520px);max-height:min(360px,50svh)}}

/* ==========================================================================
   History Page Styles
   ========================================================================== */
.history-hero{background:var(--paper);border-bottom:1px solid #17171520;padding:75px 7% 50px}
.history-hero h1{font-size:clamp(50px,7.5vw,96px);margin:20px 0 30px;letter-spacing:-2px;color:var(--ink)}
.history-index{display:flex;flex-wrap:wrap;gap:10px 14px;padding-top:10px}
.history-index a{display:inline-block;padding:8px 16px;border:1px solid #17171535;font-size:12px;font-weight:600;letter-spacing:.8px;color:var(--ink);background:transparent;transition:background .2s,border-color .2s}
.history-index a:hover{background:#dcd4c3;border-color:var(--ink)}
.history-section{padding:90px 7%;border-bottom:1px solid #17171525;background:var(--paper)}
.history-section-inner{display:grid;grid-template-columns:140px 1fr;gap:48px;max-width:1100px;margin:0 auto}
.history-meta{display:flex;flex-direction:column;align-items:flex-start}
.history-year{font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,4.5vw,52px);font-weight:400;color:var(--olive);line-height:1}
.history-rule{display:block;width:35px;border-top:2px solid var(--olive);margin-top:16px}
.history-body{min-width:0}
.history-body h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(26px,3.8vw,38px);font-weight:400;line-height:1.15;letter-spacing:-1px;margin:0 0 14px;color:var(--ink)}
.history-body h3{font-family:Georgia,'Times New Roman',serif;font-size:clamp(17px,2.2vw,22px);font-weight:400;font-style:italic;color:var(--olive);margin:0 0 16px;line-height:1.35}
.history-body p{font-size:14px;line-height:1.85;color:#35322b;margin:0 0 18px;max-width:720px}
.history-entry{border-top:1px solid #17171520;padding-top:28px;margin-top:20px}
.history-entry:first-of-type{border-top:none;padding-top:0;margin-top:0}
.history-media{display:grid;grid-template-columns:1fr;gap:18px;margin:24px 0 20px;align-items:start}
.history-media.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.history-media.three-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.history-media figure{margin:0;background:#17171508;border:1px solid #17171518;padding:8px}
.history-media img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;margin:0}
.history-single-img{margin:24px 0 20px;background:#17171508;border:1px solid #17171518;padding:8px;max-width:780px}
.history-single-img img{display:block;width:100%;height:auto;max-width:100%;margin:0 auto;object-fit:contain}
.history-source-wrap{margin-top:24px}
.history-source-link{display:inline-block;font-size:10px;font-weight:600;letter-spacing:1.2px;border-bottom:1px solid #17171560;padding-bottom:5px;color:var(--ink);transition:border-color .2s}
.history-source-link:hover{border-color:var(--ink)}
@media(max-width:900px){
  .history-section-inner{grid-template-columns:110px 1fr;gap:30px}
  .history-section{padding:70px 6%}
  .history-hero{padding:60px 6% 40px}
}
@media(max-width:768px){
  .history-section-inner{display:flex;flex-direction:column;gap:18px}
  .history-rule{margin-top:10px}
  .history-media.two-cols,.history-media.three-cols{grid-template-columns:1fr}
}
@media(max-width:600px){
  .history-section{padding:55px 6%}
  .history-hero{padding:50px 6% 35px}
  .history-index{gap:8px 10px}
  .history-index a{padding:7px 12px;font-size:11px}
}

/* ==========================================================================
   Editorial Micro-interactions & Motion Layer
   ========================================================================== */

/* 1. Progressive Content Reveal (IntersectionObserver) */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .motion-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.motion-ready .motion-reveal.motion-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Immediate visibility on focus */
  html.motion-ready .motion-reveal:focus-within {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Immediate visibility on anchor target */
  html.motion-ready :target,
  html.motion-ready :target.motion-reveal,
  html.motion-ready :target .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Staggered reveals for collection cards */
  html.motion-ready .collection.motion-reveal:nth-child(1) { transition-delay: 0ms; }
  html.motion-ready .collection.motion-reveal:nth-child(2) { transition-delay: 70ms; }
  html.motion-ready .collection.motion-reveal:nth-child(3) { transition-delay: 140ms; }

  /* 2. Hero & History Header Staggered Editorial Entrance */
  html.motion-ready .motion-hero-item {
    opacity: 0;
    transform: translateY(10px);
    animation: motion-hero-in 550ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  html.motion-ready .motion-hero-item:nth-child(1) { animation-delay: 60ms; }
  html.motion-ready .motion-hero-item:nth-child(2) { animation-delay: 130ms; }
  html.motion-ready .motion-hero-item:nth-child(3) { animation-delay: 200ms; }
  html.motion-ready .motion-hero-item:nth-child(4) { animation-delay: 270ms; }
}

@keyframes motion-hero-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. Navigation Links Underline & Editorial Focus */
nav a {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  text-decoration: none;
}
nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}
nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
nav a[aria-current="page"]::after {
  transform: scaleX(1);
  height: 2px;
  background-color: currentColor;
}
.header-link {
  transition: border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .header-link:hover {
    border-color: var(--ink);
  }
}
.timeline-content a {
  transition: border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .timeline-content a:hover {
    border-color: var(--paper);
  }
}
.closing a {
  transition: border-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .closing a:hover {
    border-color: var(--red);
    color: var(--red);
  }
}
.footer-bottom a {
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer-bottom a:hover {
    color: var(--paper);
  }
}

/* 4. Buttons and CTAs Micro-interactions */
.button {
  transition: background-color 200ms ease, color 200ms ease;
}
.button span {
  display: inline-block;
  transition: transform 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .button:hover span {
    transform: translate(2.5px, -2px);
  }
}
.button:active {
  background-color: #eeddbb;
}

.timeline-more-btn {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.timeline-more-btn span {
  display: inline-block;
  transition: transform 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .timeline-more-btn:hover span {
    transform: translate(2.5px, -2px);
  }
}
.timeline-more-btn:active {
  background-color: #eeddbb;
  border-color: #eeddbb;
}

.timeline-controls button {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .timeline-controls button:hover {
    background-color: #ffffff20;
    border-color: var(--paper);
  }
}
.timeline-controls button:active {
  background-color: #ffffff35;
}

.motion-toggle {
  transition: color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .motion-toggle:hover {
    color: var(--ink);
    border-color: var(--ink);
  }
}
.motion-toggle:active {
  opacity: 0.8;
}

dialog .dialog-top button {
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  dialog .dialog-top button:hover {
    color: var(--red);
  }
}
dialog .dialog-top button:active {
  opacity: 0.7;
}

.history-index a {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .history-index a:hover {
    background-color: #dcd4c3;
    border-color: var(--ink);
  }
}
.history-index a:active {
  background-color: #cec5b2;
}

/* 5. Collection Cards Subtle Reaction */
.collection h3 span {
  display: inline-block;
  transition: transform 200ms ease;
}
.collection-cta {
  transition: color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .collection:hover h3 span,
  .collection:focus-within h3 span {
    transform: translate(2.5px, -2px);
  }
  .collection:hover .collection-cta,
  .collection:focus-within .collection-cta {
    color: var(--red);
    border-color: var(--red);
  }
}
.collection:focus-within h3 span {
  transform: translate(2.5px, -2px);
}
.collection:focus-within .collection-cta {
  color: var(--red);
  border-color: var(--red);
}
.collection-cta:active {
  opacity: 0.8;
}

/* 6. Timeline Milestone Selection Transition */
@keyframes motion-timeline-in {
  from { opacity: 0.2; }
  to { opacity: 1; }
}
.timeline-content > div:not(.large-year).motion-timeline-swap {
  animation: motion-timeline-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 7. Dialog & Lightbox Animation Layer */
@keyframes motion-dialog-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Standard dialogs entrance (Voices, Images, Documents, Credits, etc.) */
dialog[open]:not(.dialog-expanded) > .dialog-top,
dialog[open]:not(.dialog-expanded) > #dialog-body {
  animation: motion-dialog-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Timeline Expanded Lightbox (VER MÁS from Home timeline) */
dialog.dialog-expanded[open] {
  animation: timeline-lightbox-in 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
dialog.dialog-expanded[open]::backdrop {
  animation: timeline-backdrop-in 650ms ease-out both;
}
dialog.dialog-expanded[open].is-closing {
  animation: timeline-lightbox-out 350ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
dialog.dialog-expanded[open].is-closing::backdrop {
  animation: timeline-backdrop-out 350ms ease-out forwards;
}

/* Prevent duplicate/superimposed animation on containers and inner elements */
dialog.dialog-expanded > .dialog-top,
dialog.dialog-expanded > #dialog-body,
dialog.dialog-expanded .timeline-lightbox,
dialog.dialog-expanded .timeline-lightbox-entry,
dialog.dialog-expanded .timeline-lightbox-media,
dialog.dialog-expanded .timeline-lightbox-media figure,
dialog.dialog-expanded .timeline-lightbox-single-img {
  animation: none !important;
}

/* Timeline Lightbox Editorial Texts (Opening only) */
dialog.dialog-expanded[open]:not(.is-closing) .timeline-lightbox h2 {
  animation: timeline-title-in 650ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
}

dialog.dialog-expanded[open]:not(.is-closing) .timeline-lightbox h3,
dialog.dialog-expanded[open]:not(.is-closing) .timeline-lightbox p {
  animation: timeline-desc-in 650ms cubic-bezier(0.22, 1, 0.36, 1) 280ms both;
}

/* Timeline Lightbox Images */
.timeline-lightbox img.timeline-img-pending {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
}

.timeline-lightbox img.timeline-img-animating {
  animation: timeline-img-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.timeline-lightbox img.timeline-img-done {
  opacity: 1;
  transform: none;
}

/* On closing: cancel separate inner animations so panel closes as a unit */
dialog.dialog-expanded.is-closing .timeline-lightbox h2,
dialog.dialog-expanded.is-closing .timeline-lightbox h3,
dialog.dialog-expanded.is-closing .timeline-lightbox p,
dialog.dialog-expanded.is-closing .timeline-lightbox img {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@keyframes timeline-lightbox-in {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes timeline-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes timeline-title-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes timeline-desc-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes timeline-img-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes timeline-lightbox-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
}

@keyframes timeline-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 8. Reduced Motion Overrides */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.motion-ready .motion-hero-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .timeline-content > div:not(.large-year).motion-timeline-swap {
    animation: none !important;
  }
  dialog[open] > .dialog-top,
  dialog[open] > #dialog-body,
  dialog.dialog-expanded[open],
  dialog.dialog-expanded[open].is-closing,
  dialog.dialog-expanded[open]::backdrop,
  dialog.dialog-expanded[open].is-closing::backdrop,
  dialog.dialog-expanded .timeline-lightbox h2,
  dialog.dialog-expanded .timeline-lightbox h3,
  dialog.dialog-expanded .timeline-lightbox p,
  dialog.dialog-expanded .timeline-lightbox-media,
  dialog.dialog-expanded .timeline-lightbox-single-img,
  dialog.dialog-expanded .timeline-lightbox img,
  dialog.dialog-expanded .timeline-lightbox img.timeline-img-pending,
  dialog.dialog-expanded .timeline-lightbox img.timeline-img-animating,
  dialog.dialog-expanded .timeline-lightbox img.timeline-img-done {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  nav a::after {
    display: none !important;
  }
  .button span,
  .timeline-more-btn span,
  .collection h3 span {
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Hero Composition Adjustments for Italian & German
   ========================================================================== */

/* 1. Container & normal-flow bottom bar: prevents clipping and overlaps */
html[lang="it"] .hero,
html[lang="de"] .hero {
  height: auto;
  min-height: calc(100svh - 106px);
  max-height: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

html[lang="it"] .hero-bottom,
html[lang="de"] .hero-bottom {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  margin-top: auto;
  padding: 28px 5% 30px 7%;
}

/* 2. Italian Hero: block width, fluid title, description and italic accent */
html[lang="it"] .hero-content {
  max-width: 880px;
}
html[lang="it"] .hero h1 {
  font-size: clamp(54px, 6.4vw, 100px);
  margin: 24px 0 24px;
  line-height: 1.05;
}
html[lang="it"] .hero-description {
  max-width: 440px;
}
html[lang="it"] .hero h1 i {
  font-weight: 400;
  font-style: italic;
  color: #b5b59a;
}

/* 3. German Hero: block width, fluid title, description and italic accent */
html[lang="de"] .hero-content {
  max-width: 980px;
}
html[lang="de"] .hero h1 {
  font-size: clamp(46px, 5.2vw, 82px);
  margin: 24px 0 24px;
  line-height: 1.06;
  letter-spacing: -1.5px;
}
html[lang="de"] .hero-description {
  max-width: 440px;
}
html[lang="de"] .hero h1 i {
  font-weight: 400;
  font-style: italic;
  color: #b5b59a;
}

/* 4. Responsive adjustments at max-width: 900px */
@media (max-width: 900px) {
  html[lang="it"] .hero,
  html[lang="de"] .hero {
    min-height: 680px;
  }
  html[lang="it"] .hero-bottom,
  html[lang="de"] .hero-bottom {
    padding: 24px 6% 28px;
  }
  html[lang="it"] .hero h1 {
    font-size: clamp(42px, 6.8vw, 64px);
    margin: 22px 0;
  }
  html[lang="de"] .hero h1 {
    font-size: clamp(36px, 5.6vw, 52px);
    margin: 22px 0;
  }
}

/* 5. Responsive adjustments at max-width: 600px (no forced nowrap, no overflow) */
@media (max-width: 600px) {
  html[lang="it"] .hero,
  html[lang="de"] .hero {
    min-height: calc(100svh - 85px);
  }
  html[lang="it"] .hero-content,
  html[lang="de"] .hero-content {
    max-width: 100%;
    padding: 45px 6% 25px;
  }
  html[lang="it"] .hero-bottom,
  html[lang="de"] .hero-bottom {
    padding: 20px 6% 25px;
  }
  html[lang="it"] .hero h1 {
    font-size: clamp(32px, 9vw, 48px);
    margin: 18px 0;
    line-height: 1.06;
  }
  html[lang="de"] .hero h1 {
    font-size: clamp(26px, 7.2vw, 40px);
    margin: 18px 0;
    line-height: 1.08;
    letter-spacing: -1.2px;
  }
  html[lang="it"] .hero-description,
  html[lang="de"] .hero-description {
    max-width: 100%;
  }
}