/* Microsoft humanist UI typography; keep the established blue editorial titles. */
:root{--interface-font:'Segoe UI',Tahoma,Arial,sans-serif}
@layer portfolio-typography {
body,body *{font-family:var(--interface-font)!important}
body :is(h1,h2,h3),body :is(h1,h2,h3) *{font-family:Georgia,'Times New Roman',serif!important}
}
.project-window-controls [data-close]{width:26px!important;min-width:26px!important;height:24px!important;padding:0!important;font-size:20px!important;line-height:1!important;background:#c0c0c0!important;color:#111!important}
/* A shared compact opening for project pages. */
html body.retro-page #main .project-hero[data-project]{display:grid!important;grid-template-columns:minmax(180px,30%) minmax(0,1fr)!important;align-items:center;padding:18px!important;gap:18px 22px!important;min-height:0!important}
html body.retro-page #main .project-hero[data-project]>.cover{display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;grid-column:1;grid-row:1/3;height:220px!important;min-height:0!important;width:100%!important;padding:0!important;gap:8px!important;overflow:hidden;background:#f5f5f3!important;border:0!important}
html body.retro-page #main .project-hero[data-project]>.cover>img{display:block!important;position:static!important;flex:1 1 0!important;min-width:0!important;width:100%!important;max-width:100%!important;height:220px!important;min-height:0!important;max-height:220px!important;object-fit:contain!important;padding:0!important;transform:none!important}
html body.retro-page #main .project-hero[data-project]>.cover.duo>img{width:calc(50% - 4px)!important;max-width:calc(50% - 4px)!important}
html body.retro-page #main .project-hero[data-project]>.hero-title{grid-column:2;grid-row:1;position:static!important;padding:0!important;min-width:0!important}
html body.retro-page #main .project-hero[data-project] .hero-title h1{font-size:clamp(32px,4.6vw,64px)!important;line-height:1.05!important;margin:10px 0!important;overflow-wrap:anywhere}
html body.retro-page #main .project-hero[data-project]>.back-link{grid-column:2;grid-row:2;position:static!important;justify-self:start;align-self:start;width:auto!important}
html body.retro-page #main .project-hero[data-project=shooting]>.shooting-previews>a{display:flex!important;flex-direction:column!important;width:calc(50% - 4px)!important;min-width:0!important;height:220px!important;gap:4px!important}
html body.retro-page #main .project-hero[data-project=shooting]>.shooting-previews>a>img{width:100%!important;height:185px!important;min-height:0!important;object-fit:contain!important;flex:none!important}
html body.retro-page #main .shooting-previews>a>span{padding:0 2px!important;font-size:10px!important;line-height:1.25!important;text-align:center}
html body.retro-page #main .project-description{padding:20px!important;margin-bottom:18px!important;gap:24px!important;min-height:0!important}
html body.retro-page #main .project-description p{font-size:16px!important;line-height:1.55!important;margin:8px 0!important}
html body.retro-page #main .project-description .description{font-size:18px!important}
/* Text-led projects use the same restrained opening without adding an unrelated image. */
html body.retro-page #main #top.hero{display:grid!important;grid-template-columns:minmax(180px,30%) minmax(0,1fr);gap:24px;align-items:center;padding:24px!important;min-height:0!important;height:auto!important}
html body.retro-page #main #top.hero h1{font-size:clamp(42px,5vw,72px)!important;line-height:.95!important;margin:0!important}
html body.retro-page #main #top.hero .hero-bottom{display:block!important;margin:0!important;padding:0!important}
html body.retro-page #main #top.hero .hero-bottom p{font-size:18px!important;line-height:1.5!important;margin:12px 0 0!important}
/* Shared focused reader for the two additional publications. */
html body.retro-page #main .reading-focused:is([data-reader=la-rosa],[data-reader=archivio-urbano]) .shooting-gallery{width:100%!important;max-width:100%!important;height:auto!important;padding:0!important}
html body.retro-page #main .reading-focused[data-reader=la-rosa] .shooting-gallery img{height:calc(100dvh - 145px)!important;max-height:calc(100dvh - 145px)!important;width:auto!important;max-width:100%!important;object-fit:contain!important;aspect-ratio:1719/2200!important}
html body.retro-page #main .reading-focused[data-reader=archivio-urbano] .shooting-gallery img{height:auto!important;max-height:calc(100dvh - 145px)!important;max-width:100%!important;width:100%!important;object-fit:contain!important;aspect-ratio:3/2!important}
html body.retro-page #main .reading-focused[data-reader=archivio-urbano] .album-spread{max-width:min(100%,calc((100dvh - 145px)*3))!important}
html body.retro-page #main .reading-focused .album-spread>figure{min-width:0!important;max-width:50%!important;flex:0 1 50%!important}
html body.retro-page #main .reading-focused .album-spread.single-cover>figure{max-width:50%!important}
@media(max-width:650px){
 html body.retro-page #main .project-hero[data-project]{grid-template-columns:120px minmax(0,1fr)!important;gap:12px!important;padding:14px!important}
 html body.retro-page #main .project-hero[data-project]>.cover,html body.retro-page #main .project-hero[data-project]>.cover>img{height:180px!important;max-height:180px!important;min-height:0!important}
 html body.retro-page #main .project-hero[data-project] .hero-title h1{font-size:clamp(25px,6vw,36px)!important}
 html body.retro-page #main .project-hero[data-project=shooting]>.shooting-previews>a{height:180px!important}
 html body.retro-page #main .project-hero[data-project=shooting]>.shooting-previews>a>img{height:140px!important}
 html body.retro-page #main #top.hero{grid-template-columns:1fr!important;padding:18px!important}
 html body.retro-page #main .reading-focused.single-page-reader .album-spread>figure{max-width:100%!important;flex-basis:100%!important}
}
html body.retro-page #main .reading-focused{box-sizing:border-box!important;padding:14px!important;width:100%!important;max-width:100%!important}
html body.retro-page #main .reading-focused .album-spread:not([hidden]){display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important}
html body.retro-page #main .reading-focused .album-spread>figure{width:50%!important;margin:0!important}
html body.retro-page #main .reading-focused .album-spread .image-button{width:100%!important;display:block!important}
html body.retro-page #main .reading-focused[data-reader=la-rosa] .album-spread{max-width:min(100%,calc((100dvh - 145px)*1.5627))!important;margin-inline:auto!important}
html body.retro-page #main .reading-focused[data-reader=specimen-file] .album-spread{max-width:min(100%,calc((100dvh - 145px)*1.4667))!important;margin-inline:auto!important}

/* Contact heading shares the same structure as the other Info sections. */
.info-contact>div>a{display:block;width:fit-content;max-width:100%;color:#0000a0;text-decoration:underline;overflow-wrap:anywhere;margin-bottom:18px;font-size:14px;line-height:1.5}
.info-contact>div>img{display:block;width:160px;max-width:100%;height:auto;margin-top:24px;mix-blend-mode:multiply}

/* Final home footer: the information, logo and endnote form a compact block. */
html body.home footer{
  grid-template-columns:minmax(0,1fr) auto!important;
  column-gap:28px!important;
  row-gap:12px!important;
  padding:22px 4% 18px!important;
}
html body.home footer .footer-bottom{
  margin-top:0!important;
  padding-top:10px!important;
  gap:12px!important;
}
html body.home footer .footer-brand{margin-top:0!important}
html body.home footer .footer-links{gap:9px!important}
html body.home footer .footer-name{font-size:28px!important}
html body.home footer p{margin:8px 0 0!important}
@media(max-width:700px){
  html body.home footer{display:flex!important;gap:14px!important;padding:18px 14px!important}
  html body.home footer .footer-bottom{width:100%!important;display:flex!important;flex-wrap:wrap!important}
}

/* A single editorial portrait now introduces each campaign. */
@media(min-width:701px){
 html body.retro-page #main .project-hero:is([data-project="bioscape"],[data-project="mid20s"]){
  grid-template-columns:minmax(210px,34%) minmax(0,1fr)!important;
 }
 html body.retro-page #main .project-hero:is([data-project="bioscape"],[data-project="mid20s"])>.cover.campaign-single,
 html body.retro-page #main .project-hero:is([data-project="bioscape"],[data-project="mid20s"])>.cover.campaign-single>img{
  height:290px!important;min-height:0!important;max-height:290px!important;
 }
}

/* The closed cover occupies one complete page: the right-hand leaf of the book. */
html body.retro-page #main .publication-reader:is([data-reader="specimen-file"],[data-reader="archivio-urbano"])
  .album-spread.single-cover:not([hidden]){
  display:flex!important;
  width:100%!important;
  max-width:100%!important;
  justify-content:center!important;
  margin-inline:auto!important;
  background:transparent!important;
}
html body.retro-page #main .publication-reader:is([data-reader="specimen-file"],[data-reader="archivio-urbano"])
  .album-spread.single-cover>figure{
  flex:0 0 50%!important;
  width:50%!important;
  max-width:50%!important;
  min-width:0!important;
  margin:0!important;
}
html body.retro-page #main .publication-reader:is([data-reader="specimen-file"],[data-reader="archivio-urbano"])
  .album-spread.single-cover img{width:100%!important;height:auto!important;object-fit:contain!important}

/* Cover -> first spread and first spread -> cover use the same hinged leaf. */
.album-ready .album-spread.spread-turning.cover-opening>figure,
.album-ready .album-spread.spread-turning.cover-closing>figure{visibility:hidden!important}
.album-ready .album-spread.spread-turning.cover-opening::before{
  content:"";position:absolute;inset:0 50% 0 0;
  background:#fff;z-index:2;pointer-events:none;
  animation:cover-open-mask .7s ease-in-out both;
}
.album-ready .album-leaf.cover-leaf{z-index:4}
@keyframes cover-open-mask{0%,55%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .album-ready .album-spread.spread-turning.cover-opening::before{animation:none}
}

/* Closed publications show only a centered cover; the opening spread unfolds around its spine. */
html body.retro-page #main .publication-reader .shooting-gallery{background:transparent!important;box-shadow:none!important}
.album-ready .shooting-gallery.book-opening{animation:book-center-open .7s ease-in-out both}
.album-ready .shooting-gallery.book-closing{animation:book-center-close .7s ease-in-out both}
@keyframes book-center-open{from{transform:translateX(-25%)}to{transform:translateX(0)}}
@keyframes book-center-close{from{transform:translateX(0)}to{transform:translateX(-25%)}}
html body.retro-page #main .publication-reader .book-closing .single-cover{justify-content:flex-end!important}
.info-introduction{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:stretch;margin-bottom:30px}
html body.retro-page #main .info-introduction .info-summary{width:100%;max-width:none;margin:0}
.info-portrait{margin:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.info-portrait img{display:block;width:100%;height:100%;max-height:420px;object-fit:contain}
@media(max-width:650px){.info-introduction{grid-template-columns:1fr;gap:16px}.info-portrait img{height:300px;max-height:300px}}

/* Keep the original full portrait and add only its blue frame. */
.info-portrait>img{border:2px solid #1000ff;box-sizing:border-box}

/* Info: single-line name and a smaller framed full portrait. */
html body.retro-page #main .info-heading h1{white-space:nowrap;font-size:clamp(22px,6.6vw,100px)!important;letter-spacing:-.065em}
html body.retro-page #main .info-portrait>img{width:75%!important;height:315px!important;max-height:315px!important;object-fit:contain}
@media(max-width:650px){html body.retro-page #main .info-portrait>img{width:min(75%,240px)!important;height:225px!important;max-height:225px!important}}

/* Compact project introductions with one row after removing the return link. */
html body.retro-page #main .project-hero[data-project]{padding:14px!important;gap:16px!important;grid-template-rows:auto!important}
html body.retro-page #main .project-hero[data-project]>.cover{grid-row:1!important}
html body.retro-page #main .project-hero[data-project]>.cover,
html body.retro-page #main .project-hero[data-project]>.cover>img,
html body.retro-page #main .project-hero:is([data-project="bioscape"],[data-project="mid20s"])>.cover.campaign-single,
html body.retro-page #main .project-hero:is([data-project="bioscape"],[data-project="mid20s"])>.cover.campaign-single>img{height:180px!important;max-height:180px!important;min-height:0!important}
html body.retro-page #main .project-hero[data-project]>.hero-title{margin:0!important;align-self:center!important}
html body.retro-page #main .project-hero[data-project=shooting]>.shooting-previews>a{height:180px!important}
html body.retro-page #main .project-hero[data-project=shooting]>.shooting-previews>a>img{height:150px!important}
.info-contact .contact-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 160px;align-items:center;gap:24px;width:100%}
.info-contact .contact-details{min-width:0}
.info-contact .contact-name{margin:0 0 18px;font-weight:700}
.info-contact .contact-details>a{display:block;width:fit-content;max-width:100%;color:#0000a0;text-decoration:underline;overflow-wrap:anywhere;margin-bottom:18px;font-size:14px;line-height:1.5}
.info-contact .contact-layout>img{justify-self:end;margin:0!important;width:160px;height:auto;mix-blend-mode:multiply}
@media(max-width:500px){
 .info-contact .contact-layout{grid-template-columns:minmax(0,1fr) 90px;gap:12px}
 .info-contact .contact-layout>img{width:90px}
 html body.retro-page #main .project-hero[data-project]{grid-template-columns:100px minmax(0,1fr)!important;gap:12px!important}
 html body.retro-page #main .project-hero[data-project] .hero-title h1{font-size:clamp(22px,6vw,30px)!important}
}

/* Text-only project headers: compact, full-width titles. */
html body.retro-page #main .project-hero[data-project]{display:block!important;height:auto!important;min-height:0!important;padding:18px 20px!important}
html body.retro-page #main .project-hero[data-project]>.hero-title{width:100%!important;margin:0!important;padding:0!important}
html body.retro-page #main .project-hero[data-project] .hero-title h1{margin:6px 0 0!important}
html body.retro-page #main .project-hero[data-project] .hero-title p{margin:0!important}
@media(max-width:650px){html body.retro-page #main .project-hero[data-project]{padding:14px!important}}