:root{color-scheme:dark;--yellow:#fc0;--text:#efefef;--gutter:clamp(24px,7.62vw,96px)}
*{box-sizing:border-box}html{background:#000;scroll-behavior:smooth;scrollbar-gutter:stable}body{margin:0;background:#000;color:var(--text);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;font-size:clamp(16px,3.97vw,22px);line-height:1.4}a{color:inherit;text-underline-offset:2px}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0;background:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--yellow);outline-offset:6px}.site-shell{max-width:1440px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column}h1,h2,p,figure{margin:0}p{font-size:15px}h1,h2{font-weight:300}img{display:block;width:100%;height:auto}.site-header,.menu-header{height:clamp(74px,17.62vw,140px);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}.site-header{position:sticky;top:0;z-index:5;background:#000}.brand{display:inline-flex;align-items:center;gap:clamp(10px,2.54vw,18px);font-size:clamp(19px,4.63vw,32px);color:#cbcbcb;white-space:nowrap;text-decoration:none;line-height:1.2}.brand-mark{width:clamp(14px,3.33vw,24px);height:clamp(14px,3.33vw,24px);background:var(--yellow);flex-shrink:0}.menu-toggle,.menu-close{width:44px;height:44px;position:relative;margin-right:-8px;padding:8px;flex-shrink:0}.menu-toggle span{display:block;height:1px;background:#efefef;margin:5px 0;width:27px}.main-content{padding:52px var(--gutter) 0;flex:1}.album-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}.album-card{min-width:0}.album-cover{display:block;overflow:hidden}.album-cover img{aspect-ratio:1.5;object-fit:cover}.album-card h2{display:flex;gap:12px;align-items:flex-start;font-size:inherit;margin-top:10px;line-height:1.4}.album-card a:hover,.footer-links a:hover{color:var(--yellow)}.site-footer{padding:0 var(--gutter) 32px;margin-top:240px;font-size:14px;line-height:1.5}.copyright,.footer-links{display:flex;flex-direction:column;gap:7px}.copyright span:first-child{font-size:16px}.footer-links{margin-top:40px}.album-intro h1,.text-page h1{font-size:clamp(25px,5.95vw,36px);line-height:1.2;margin-bottom:18px}.album-intro p{margin:0 0 26px}.read-more{display:inline;padding:0;text-decoration:underline;font-weight:700}.photo-grid{display:flex;flex-direction:column;gap:32px}.photo-thumb{display:block;position:relative;scroll-margin-top:110px}.expand-icon{position:absolute;bottom:0;right:0;background:#000;width:32px;height:32px;padding:5px}.expand-icon svg{display:block;width:100%;height:100%;fill:none;stroke:var(--text);stroke-width:1.5}.photo-thumb:hover .expand-icon{background:var(--yellow)}.photo-thumb:hover .expand-icon svg{stroke:#000}.photo-header{height:94px;padding:26px var(--gutter);display:flex;align-items:center}.back{display:flex;width:44px;height:44px;align-items:center;margin-left:-4px}.back svg{width:34px;fill:none;stroke:var(--text);stroke-width:1.5}.photo-detail{padding:52px var(--gutter) 70px}.photo-detail figcaption{margin-top:42px}.photo-detail h1{font-size:clamp(22px,5.29vw,30px);line-height:1.25;margin-bottom:18px}.photo-detail p{line-height:1.4}.photo-detail.portrait figcaption{margin-top:28px}.menu-panel{position:fixed;inset:0;margin:0 auto;width:100%;max-width:100%;height:100%;max-height:100%;border:0;padding:0;background:var(--yellow);color:#000;opacity:0;transition:opacity .3s ease;overflow-y:auto}.menu-panel.is-open{opacity:1}.menu-panel::backdrop{background:#0009;opacity:0;transition:opacity .3s ease}.menu-panel.is-open::backdrop{opacity:1}.menu-panel .brand{color:#000}.menu-panel .brand-mark{background:#000}.menu-panel nav{display:flex;flex-direction:column;align-items:flex-start;gap:21px;padding:20px var(--gutter) 60px}.menu-panel nav a{text-transform:uppercase;text-decoration:none}.menu-panel nav a:hover{text-decoration:underline}.menu-close span{position:absolute;left:8px;top:21px;width:27px;height:1px;background:#000;transform:rotate(45deg)}.menu-close span+span{transform:rotate(-45deg)}.menu-panel a:focus-visible,.menu-panel button:focus-visible{outline-color:#000}body.menu-open{overflow:hidden}.text-page{max-width:700px;min-height:260px}.text-page p{margin:24px 0}.album-index{list-style:none;padding:0;display:grid;gap:26px;margin-top:40px}.album-index a{display:flex;gap:16px}.pending-copy{color:#aaa}.skip{position:fixed;top:-100px;left:20px;background:var(--yellow);color:#000;padding:10px;z-index:20}.skip:focus{top:10px}[hidden]{display:none!important}
@media(min-width:768px){
 body{font-size:18px}
 .album-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;row-gap:64px}
 .album-intro{max-width:640px}
 .photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-content:start;align-self:start;position:relative;padding-top:0}
 .photo-grid.is-masonry>.photo-thumb{position:absolute}
 .photo-thumb{align-self:start}
 .photo-detail figure{max-width:580px;margin:0 auto}
 .photo-detail.portrait figure{max-width:385px}
}
@media(min-width:1200px){body{font-size:16px;--gutter:96px}.site-header,.menu-header{height:140px;position:relative;align-items:flex-start;padding-top:40px}.brand{font-size:29px;gap:16px}.brand-mark{width:21px;height:21px}.menu-toggle,.menu-close{margin-top:-5px}.menu-toggle span{width:36px;height:2px;margin:6px 0}.menu-toggle{width:58px}.main-content{padding-top:52px}.album-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:56px;row-gap:72px}.album-card h2{font-size:16px;gap:14px;margin-top:16px}.site-footer{display:flex;justify-content:space-between;gap:24px;padding-bottom:30px;margin-top:120px;font-size:12px}.copyright,.footer-links{flex-direction:row;gap:8px;margin:0}.copyright span:first-child{font-size:12px}.copyright span+span:before,.footer-links>span:before{content:'|';margin-right:8px}.album-layout{display:grid;grid-template-columns:340px 328px;gap:72px;padding-top:0}.album-intro h1{font-size:25px;margin:8px 0 64px}.album-intro p{font-size:15px;line-height:1.4}.photo-grid{display:grid;grid-template-columns:166px 148px;gap:14px;align-content:start;align-self:start;padding-top:34px;position:relative}.photo-grid.is-masonry>.photo-thumb{position:absolute}.photo-thumb{align-self:start}.expand-icon{width:20px;height:20px;padding:3px}.photo-header{height:100px;padding:24px 38px}.photo-detail{padding:72px 0 100px}.photo-detail.landscape figure{width:580px;margin:0 auto}.photo-detail figcaption{margin:66px 10px 0}.photo-detail h1{font-size:24px;margin-bottom:18px}.photo-detail p{font-size:15px;line-height:1.4}.photo-detail.portrait{padding-top:52px}.photo-detail.portrait figure{position:relative;width:385px;margin:0 auto}.photo-detail.portrait figcaption{position:absolute;left:calc(100% + 80px);bottom:0;width:min(330px,calc((100vw - 385px)/2 - 112px));margin:0}.menu-panel nav{padding-top:40px;gap:16px;font-size:20px}.menu-close span{width:40px;height:2px;left:0}.text-page h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.menu-panel,.menu-panel::backdrop{transition:none}}

.album-card h2 a{text-decoration:underline}
.album-index a{text-decoration:none}

/* Fade only when enhanced by JS; links remain visible without scripting. */
.reveal-pending{opacity:0;transition:opacity .65s ease,color .25s ease,background-color .25s ease,border-color .25s ease}
.reveal-visible,.reveal-pending:focus-within{opacity:1}
.album-pagination{margin-top:40px;text-align:center;min-height:1px}
.album-pagination:has(.album-status:empty):not(:has(.load-albums)){margin-top:0}
.load-albums{display:inline-block;padding:12px 18px;border:1px solid #555;text-decoration:none}
.load-albums:hover{border-color:var(--yellow);color:var(--yellow)}
.album-status{font-size:14px;color:#cbcbcb;margin-top:12px}
.album-status:empty{margin:0}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1;transition:none}}

/* Spazio dopo ogni paragrafo del sito pubblico. */
p,.album-intro p,.photo-detail p,.text-page p{margin-bottom:7px}

/* Separazione tra testo e galleria quando sono disposti in verticale. */
@media(max-width:1199.98px){.album-layout>.photo-grid{margin-top:48px}}

/* Menu a tutta finestra, contenuti nella colonna centrale del sito. */
.menu-panel>.menu-header,.menu-panel>nav{width:100%;max-width:1440px;margin-left:auto;margin-right:auto}

/* Cambi di colore graduali in entrata e in uscita dal passaggio del mouse. */
a{transition:color .25s ease,background-color .25s ease,border-color .25s ease}
.expand-icon{transition:background-color .25s ease}
.expand-icon svg{transition:stroke .25s ease}
@media(prefers-reduced-motion:reduce){a,.expand-icon,.expand-icon svg{transition:none}}


.photo-navigation{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px}
.photo-navigation a{padding:12px 0;text-decoration:none;white-space:nowrap}
.photo-navigation a:hover{color:var(--yellow)}
.photo-navigation [aria-disabled="true"]{color:#666;white-space:nowrap}
.photo-counter{color:#aaa;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:479px){.photo-navigation{gap:10px;font-size:12px}.photo-header{gap:10px}.photo-header .back{flex-shrink:0}}

/* Prefisso delle voci del menu su tutti gli schermi. */
.menu-panel nav a::before{content:":: ";white-space:pre;position:relative;top:-.08em;display:inline-block;text-decoration:none}

/* Breve sfocatura iniziale, senza attendere il caricamento delle immagini. */
@keyframes page-glass-reveal{
 from{filter:blur(5px)}
 to{filter:blur(0)}
}
@media(prefers-reduced-motion:no-preference){
 .site-shell>header,.site-shell>main,.site-shell>footer{
  animation:page-glass-reveal .35s ease-out;
 }
}

.reveal-pending{transition:opacity .65s ease,color .25s ease,background-color .25s ease,border-color .25s ease}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1;transition:none}}
@media print{.reveal-pending{opacity:1;transition:none}}

/* Chiusura della foto: stessa X del menu, chiara sul fondo nero. */
.photo-close{position:relative}
.photo-close span{position:absolute;left:8px;top:21px;width:27px;height:1px;background:currentColor;transform:rotate(45deg)}
.photo-close span+span{transform:rotate(-45deg)}
.photo-close:hover{color:var(--yellow)}
@media(min-width:1200px){.photo-close span{width:40px;height:2px;left:0}}

/* Frecce della navigazione fotografica coordinate alla X. */
.photo-navigation .photo-step{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;flex-shrink:0}
.photo-step svg{display:block;width:30px;height:30px;fill:none;stroke:currentColor}
.photo-step path{stroke-width:1;vector-effect:non-scaling-stroke}
.photo-counter{text-align:center;min-width:3ch}
@media(min-width:1200px){.photo-step svg{width:44px;height:44px}.photo-step path{stroke-width:2}}

/* Testata persistente con fondo sfumato, senza coprire i clic sul contenuto. */
.site-header,.photo-header{
 position:sticky;top:0;z-index:5;flex-shrink:0;background:transparent;
}
.site-header::before,.photo-header::before{
 content:"";position:absolute;inset:0 0 -36px;z-index:-1;pointer-events:none;
 background:linear-gradient(to bottom,#000 0%,#000 calc(100% - 72px),rgba(0,0,0,.82) calc(100% - 44px),transparent 100%);
}
.photo-thumb{scroll-margin-top:calc(clamp(74px,17.62vw,140px) + 40px)}
@media(min-width:1200px){.photo-thumb{scroll-margin-top:180px}}

/* Indicatore sulle immagini in attesa: non intercetta clic e non cambia il layout. */
.image-frame{display:block;position:relative}
.image-frame.image-loading::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--yellow);border-radius:50%;pointer-events:none;animation:image-loading-spin .8s linear infinite}
@keyframes image-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.image-frame.image-loading::after{animation:none}}

/* Riserva lo spazio della scrollbar anche sui browser senza scrollbar-gutter. */
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}