:root{--paper:#ebede8;--ink:#17221d;--green:#708773;--top:90px}*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;color:var(--ink);background:var(--paper);font-family:Roboto,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #3f654b;outline-offset:5px}.header{position:fixed;top:0;left:0;right:0;height:76px;padding:0 2.7vw;display:flex;align-items:center;z-index:20;background:var(--paper)}.brand{text-decoration:none;font-size:37px;font-weight:700;letter-spacing:-3px;display:flex;align-items:center;gap:13px}.brand span{font-size:10px;letter-spacing:1.6px;font-weight:500}.intro{display:flex;justify-content:space-between;align-items:baseline;margin:105px 3vw 40px;font-size:11px;color:#4f5d53}.intro h1{font-size:12px;font-weight:400;margin:0}.project{position:relative;margin-bottom:30px;overflow-anchor:none}.stage{height:var(--stage);position:sticky;top:var(--top);isolation:isolate}.viewport{position:absolute;inset:0;overflow:hidden}.rail{position:absolute;left:var(--left);top:var(--y,0px);height:var(--photo-h);display:flex;align-items:stretch;gap:24px;will-change:transform}.photo{position:relative;flex:none;margin:0;width:var(--photo-w);height:100%;background:var(--tone);overflow:hidden;display:grid;place-items:center;color:#ebede8}.photo:nth-of-type(2){width:calc(var(--photo-h)*.82);background:var(--tone2)}.photo:nth-of-type(3){width:calc(var(--photo-h)*1.5)}.photo:nth-of-type(4){width:calc(var(--photo-h)*1.05);background:var(--tone2)}.photo:nth-of-type(5){width:calc(var(--photo-h)*1.78)}.photo strong{font-size:calc(var(--photo-h)*.56);font-weight:400;line-height:1;letter-spacing:-.08em;transform:translateX(-.04em);user-select:none}.photo figcaption{position:absolute;bottom:17px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.07em}.photo:not(:first-child){opacity:var(--reveal,0)}.cover{position:absolute;inset:0;border:0;background:none;cursor:pointer}.project.open .cover{pointer-events:none}.info{position:absolute;top:var(--info-y,0px);left:var(--info-left);width:var(--info-w);text-align:right;z-index:2;max-height:100%;overflow:auto;scrollbar-width:thin}.mark{width:36px;height:36px;display:inline-grid;place-items:center;background:var(--ink);color:var(--paper);font-size:11px;margin-bottom:16px}.info h2{font-size:13px;font-weight:400;margin:0 0 8px;line-height:1.35}.place{font-size:10px;text-transform:uppercase;color:#4f5d53;margin:0}.details{opacity:var(--reveal,0);display:var(--detail-display,none);font-size:12px;line-height:1.5;margin-top:24px;text-align:right}.details p{margin:0 0 23px}.details dl{margin:0}.details dt{font-size:9px;text-transform:uppercase;color:#4f5d53;margin-top:14px}.details dd{margin:3px 0}.close{display:none;position:absolute;right:22px;top:10px;z-index:5;border:0;background:var(--paper);padding:9px 12px;cursor:pointer;font-size:11px}.open .close{display:block}.status{position:absolute;bottom:6px;left:var(--left);right:22px;font-size:10px;display:none;justify-content:space-between;color:#4f5d53}.open .status{display:flex}.line{position:absolute;bottom:0;left:var(--left);right:22px;height:1px;background:#c9cfc7;display:none}.open .line{display:block}.line i{display:block;height:1px;background:#3f654b;transform:scaleX(var(--progress,0));transform-origin:left}footer{padding:110px 3vw 55px}footer p{font-size:clamp(30px,5vw,70px);letter-spacing:-.05em;margin:0 0 30px}footer a{font-size:12px}footer small{display:block;margin-top:90px;color:#4f5d53;font-size:10px}
@media(max-width:850px) and (orientation:portrait){:root{--top:82px}.header{padding:0 20px}.brand{font-size:33px}.brand span{font-size:8px}.intro{margin:100px 20px 30px}.intro span{font-size:10px}.project{margin-bottom:28px}.info h2{font-size:12px}.mark{width:27px;height:27px;margin-bottom:9px}.place{font-size:9px}.details{font-size:11px;line-height:1.45;margin-top:18px}.details dl{display:flex;gap:20px;flex-wrap:wrap}.details dt{margin:0}.close{right:12px;top:6px}.rail{gap:14px}.photo figcaption{left:12px;right:12px;font-size:9px}.status{right:16px}.intro span{max-width:45%;text-align:right}}
@media(max-height:540px) and (orientation:landscape){:root{--top:66px}.header{height:58px}.intro{margin-top:80px}.details{font-size:10px;margin-top:12px}.details p{margin-bottom:8px}.details dt{margin-top:6px}.mark{display:none}.info h2{font-size:12px}.close{top:4px}}
/* Keep the menu's explicit transition timing independent from the gallery animation policy. */

.viewport{left:var(--left)}.rail{left:0}.info{scrollbar-width:none}
@media(max-width:850px) and (orientation:portrait){.open .info{max-height:var(--y);padding-bottom:12px}}

/* V71 · Cierre progresivo reversible al terminar la galería.
   Nada se cierra con un temporizador ni se fuerza el scroll. */
.project.open {--exit-progress:0;--exit-eased:0;--exit-fade:0}
.project .rail {opacity:calc(1 - var(--exit-fade,0));}
.project.is-exiting .details,.project.is-exiting .status,.project.is-exiting .line,
.project.is-exiting .close {opacity:calc(1 - var(--exit-eased,0));}
.project .exit-visual {
 display:none;position:absolute;z-index:4;pointer-events:none;
 left:calc(var(--left) + 0px);
 top:var(--y,0px);
 width:var(--photo-w);
 height:var(--photo-h);
 background:var(--tone2);
 color:var(--paper);
 overflow:hidden;place-items:center;
 opacity:var(--exit-fade,0);
}
.project.is-exiting .exit-visual {display:grid;}
.exit-visual strong {
 font-size:calc(var(--photo-h)*.56);line-height:1;
 font-weight:400;letter-spacing:-.08em;
 transform:translateX(-.04em);
}
.exit-caption {position:absolute;left:18px;bottom:16px;font-size:10px;letter-spacing:.09em;
 opacity:calc(1 - var(--exit-eased,0))}
.project.is-exiting .viewport {pointer-events:none}
.project.is-exiting .info {opacity:calc(1 - var(--exit-eased,0)*.25)}

/* V72: collapsed gallery must regain the closed project's actual visual stage height.
   The document runway remains reserved for reversible scroll; it is not the visible row. */
.project.exit-complete .stage {height:var(--stage);}
.project.exit-complete .exit-visual {opacity:1;}
.project.exit-complete .viewport {opacity:0;}
.project.exit-complete .info {opacity:1;}
.project.exit-complete .status,.project.exit-complete .line,.project.exit-complete .close {opacity:0;pointer-events:none;}
.project.exit-complete .details {display:none;}
/* Long project.image identifiers should be clearly readable as debug labels. */
.photo strong,.exit-visual strong {font-size:clamp(46px,calc(var(--photo-h)*.43),280px);letter-spacing:-.065em;}

/* V73: contracción visible hasta altura de fila original, controlada por scroll.
   Tras completarse, se restaura el layout cerrado y ya no existe galería sticky. */
.project.is-exiting .stage {will-change:height;}
.project.is-exiting .exit-visual {will-change:width,height,opacity;}
.project:not(.open) .stage {will-change:auto;}

/* V74: the actual fifth photograph stays visible until the scroll-guided
   exit reaches half; only then does the automatic shrink complete. */
.scroll-exit-photo{position:fixed;z-index:15;pointer-events:none;display:grid;place-items:center;
 color:var(--paper);overflow:hidden;line-height:1;letter-spacing:-.065em;}
.scroll-exit-photo strong{font-size:1em;font-weight:400;white-space:nowrap;transform:translateX(-.04em);}
.scroll-exit-caption{position:absolute;left:16px;bottom:14px;font-size:10px;letter-spacing:.05em;
 opacity:var(--caption-opacity,1);white-space:nowrap}
.project.is-exiting .viewport,.project.is-exiting .exit-visual{visibility:hidden!important}
.project.is-exiting .details,.project.is-exiting .status,.project.is-exiting .line,.project.is-exiting .close{opacity:0}
.project{overflow-anchor:none}

/* V79: touch drags on the images run horizontally, vertical page movement is native. */
@media (pointer:coarse){.project.open .viewport{touch-action:pan-y;overscroll-behavior-x:contain}.project.open .photo{user-select:none;-webkit-user-select:none}}

/* V81 — sin barras de progreso añadidas. Gestos fluidos y vertical nativo. */
@media (pointer:coarse){
 .project.open .viewport{touch-action:pan-y;overscroll-behavior-x:contain;}
 .project.open .photo{user-select:none;-webkit-user-select:none;}
}

/* V82 — every photograph must fit completely in the mobile viewport.
   Previous .photo:nth-of-type(5) was 1.78 × its height and could exceed
   the available screen width, making the last photograph impossible to see. */
@media (pointer:coarse){
 .project.open .photo{
  max-width:calc(100vw - var(--left) - 18px);
 }
 .project.open .rail{
  padding-right:18px;
 }
}

/* V84: only the phone portrait layout differs from v82.
   Remove the visible close label while preserving click-to-close behavior. */
.project .close{display:none!important;}
@media (max-width:850px) and (orientation:portrait){
 .project .info{text-align:right;overflow:hidden;}
 .project .info h2{font-size:clamp(12px,3.6vw,16px);line-height:1.24;overflow-wrap:anywhere;}
 .project .place{font-size:9px;line-height:1.35;overflow-wrap:anywhere;}
 .project .mark{margin-bottom:16px;}
 .project .details{font-size:11px;line-height:1.45;margin-top:20px;text-align:right;}
 .project .details dl{display:block;}
 .project .details dt{margin-top:12px;}
 .project.open .info{max-height:calc(var(--stage) - 24px);padding-bottom:12px;overflow:auto;}
 .project .photo strong{font-size:clamp(54px,calc(var(--photo-w)*.5),120px);}
 .project .photo figcaption{gap:6px;flex-wrap:wrap;}
 .project.open .status{left:var(--left);}
 .project.open .line{left:var(--left);}
}

/* Phone opening: centered 4:5 photo, summary below, details in the rail. */
@media (max-width:850px) and (orientation:portrait){
 .project .photo{width:var(--photo-w);max-width:none;}
 .project .rail{padding-right:var(--left);}
 .project .info{text-align:right;}
 .project.open .info{max-height:95px;padding-bottom:0;}
 .project.open .info .mark{width:24px;height:24px;float:left;margin:0 12px 0 0;}
 .project.open .info h2{font-size:16px;}
 .project .mobile-details{box-sizing:border-box;flex:none;width:var(--photo-w);height:100%;overflow:clip;overscroll-behavior:auto;touch-action:pan-y;opacity:var(--reveal,0);padding:20px;background:var(--paper);color:var(--ink);}
 .project .mobile-details .details{margin:0;font-size:14px;line-height:1.55;text-align:left;}
 .project .mobile-details .details dt{font-size:10px;margin-top:16px;}
 .project .mobile-details .details dd{font-size:13px;}
 .project.open .status{left:var(--left);right:var(--left);}
 .project.open .line{left:var(--left);right:var(--left);}
}

.mobile-specs{display:none;}
@media (max-width:850px) and (orientation:portrait){
 .intro>span,.project.open .status{display:none;}
 .project .rail{gap:10px;}
 .project .rail>.photo{flex:0 0 var(--photo-w);width:var(--photo-w);height:var(--photo-h);min-width:0;max-width:none;aspect-ratio:4 / 5;}
 .project.open .info{max-height:none;overflow:visible;}
 .project.open .info h2{font-size:15px;line-height:1.2;margin-bottom:4px;}
 .project.open .info .place{font-size:9px;line-height:1.3;}
 .project.open .mobile-specs{display:flex;flex-direction:column;gap:2px;clear:both;margin:6px 0 0;text-align:right;}
 .mobile-specs>div{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;}
 .mobile-specs dt{font-size:9px;color:#4f5d53;text-transform:uppercase;line-height:1.3;}
 .mobile-specs dd{font-size:11px;line-height:1.4;margin:0;}
 .project.open .line{top:calc(var(--y) + var(--photo-h) + 5px);bottom:auto;left:var(--left);right:auto;width:var(--photo-w);}
 .project .mobile-details{background:#dfe4dc;padding:14px;}
 .project .mobile-details .details{font-size:clamp(12px,3.3vw,14px);line-height:1.45;}
 .project .mobile-details .details p{margin-bottom:16px;}
 .project .mobile-details .details dt{margin-top:12px;}
}

/* Temporary mobile transition layers never receive input or affect layout. */
.mobile-motion-layer{position:fixed;inset:0;margin:0;z-index:19;pointer-events:none;overflow:clip;}
.mobile-motion-layer>.photo,.mobile-motion-layer>.info{will-change:transform,opacity;}
.mobile-motion-hidden>.stage{visibility:hidden;}

@media(max-width:850px) and (orientation:portrait){.intro{margin-top:78px;}}
@media(max-height:540px) and (orientation:landscape) and (pointer:coarse){.intro{margin-top:58px;}}