@font-face{font-family:Graffonti;src:url('assets/graffonti.woff') format('woff'),url('assets/graffonti.woff') format('woff');font-style:normal;font-weight:400;font-display:block}
:root{color-scheme:dark;--wall-dim:.48;--light-strength:.70;--picture-width:min(350px,calc(100vw - 72px));--picture-height:calc(var(--picture-width) * 4 / 3);--warm-light:255,227,177}
*{box-sizing:border-box}
html{min-height:100%;background:#28231e}
body{margin:0;color:#fffaf0;font-family:Arial,Helvetica,sans-serif;isolation:isolate}
button{font:inherit;-webkit-tap-highlight-color:transparent}
.gallery-wall{position:fixed;inset:0;z-index:-2;pointer-events:none;background:#50483b url('assets/parete.webp') center top / max(1150px,100vw) auto repeat-y}
.gallery-wall::after{content:'';position:absolute;inset:0;background:linear-gradient(rgb(0 0 0 / var(--wall-dim)),rgb(0 0 0 / var(--wall-dim))),radial-gradient(ellipse at 50% 35%,transparent 25%,#08070550 100%)}
.exhibition{max-width:1920px;margin:auto;padding:28px clamp(24px,5.5vw,115px) 48px}
.gallery-sign{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.3em;color:#eadfcbac;text-shadow:0 2px 6px #000;margin-bottom:105px}
.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,80px);row-gap:165px;align-items:start}
.artwork{position:relative;isolation:isolate;margin:0;display:flex;align-items:center;flex-direction:column;padding-top:44px;min-width:0}
/* The light belongs to the wall. The frame and its cast shadows sit in front. */
.wall-light{position:absolute;pointer-events:none;z-index:-1;top:-43px;left:50%;width:145%;height:calc(var(--picture-height) + 110px);transform:translateX(-50%);opacity:var(--light-strength);background:radial-gradient(ellipse 18% 8% at 50% 13%,rgba(var(--warm-light),.47),transparent 100%),radial-gradient(ellipse 43% 48% at 50% 25%,rgba(var(--warm-light),.24),rgba(var(--warm-light),.08) 48%,transparent 100%);filter:blur(8px);mix-blend-mode:screen}
/* Photographic metal applique; the wall wash remains a separate live layer. */
.picture-light{position:absolute;top:-38px;left:50%;width:clamp(140px,14vw,210px);height:auto;transform:translateX(-50%);z-index:3;isolation:isolate;pointer-events:none}
.lamp-product{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(2px 5px 3px #0009);transition:filter .38s ease}
.picture-light b{position:absolute;z-index:0;bottom:1px;left:5%;right:5%;height:1px;background:#ffedc994;border-radius:1px;box-shadow:0 3px 8px #ffe3a975,0 9px 22px #ffe3a940}
.art-open{display:block;position:relative;flex:none;width:var(--picture-width);height:var(--picture-height);max-width:100%;aspect-ratio:3 / 4;border:0;padding:0;background:none;cursor:zoom-in;transition:transform .35s ease;outline-offset:10px}
.art-open:focus-visible{outline:2px solid #fff0be}
.frame{position:relative;display:block;width:100%;height:100%;padding:7px;background:linear-gradient(135deg,#a1a091 0%,#42443c 2%,#101311 8%,#33362e 49%,#080b0a 63%,#4c4b3f 100%);border:1px solid #0a0c09;box-shadow:0 -1px 1px #f9f0c37a,2px 3px 0 #050806,6px 8px 0 #0c0f0b,9px 12px 10px #0009,16px 30px 26px #0009,0 55px 42px -19px #000b;transition:box-shadow .35s ease}
.frame::after{content:'';position:absolute;inset:6px;border:1px solid #030603;box-shadow:inset 0 2px 4px #0006;pointer-events:none}
.frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#111411}
.glass{position:absolute;inset:7px;pointer-events:none;background:linear-gradient(180deg,#fff2c710,transparent 28%),linear-gradient(113deg,#fff8dc05,transparent 38%,#ffffff02 60%,transparent 70%);box-shadow:inset 0 1px 2px #ffefce4d}
figcaption{position:relative;text-align:center;z-index:2;margin-top:42px}
.art-number{font-size:9px;letter-spacing:.24em;color:#eee5d09c;text-shadow:0 2px 4px #000;display:block;margin-bottom:12px}
h2{font-family:Graffonti,sans-serif;font-weight:400;font-size:clamp(37px,4vw,70px);line-height:1.08;margin:0;color:#fffdf3;-webkit-text-stroke:.25px #fff;filter:drop-shadow(0 0 2px #fff7de) drop-shadow(0 0 8px #fff1bc55);text-shadow:0 3px 5px #0008}
.gallery-hint{text-align:center;font-size:11px;letter-spacing:.07em;margin:75px 0 0;color:#eee4d4b3;text-shadow:0 2px 5px #000}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.art-open:hover{transform:translateY(-5px)}.art-open:hover .frame{box-shadow:0 -1px 1px #f9f0c37a,2px 3px 0 #050806,6px 8px 0 #0c0f0b,12px 20px 14px #0008,18px 38px 32px #0009,0 65px 48px -19px #000b}}
.art-viewer{position:fixed;inset:0;border:0;padding:36px 70px;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(12,12,10,.96);color:#fff;overflow:hidden}
.art-viewer::backdrop{background:#000c;backdrop-filter:blur(8px)}
.art-viewer[open]{display:flex;align-items:center;justify-content:center}
.art-viewer figure{margin:0;display:flex;align-items:center;flex-direction:column;max-width:100%;max-height:100%}
.viewer-image{display:block;object-fit:contain;max-width:calc(100vw - 140px);max-height:calc(100dvh - 155px);height:auto;width:auto;box-shadow:0 12px 60px #000}
.art-viewer figcaption{font:400 42px/1 Graffonti,sans-serif;margin-top:20px}
.art-viewer button{position:absolute;border:1px solid #ffffff26;background:#ffffff08;color:#fff;cursor:pointer;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;line-height:1;font-size:30px}
.art-viewer button:hover{background:#ffffff20}.art-viewer button:focus-visible{outline:2px solid #ffedb2;outline-offset:4px}
.viewer-close{top:20px;right:22px}.viewer-prev{left:16px;top:calc(50% - 22px)}.viewer-next{right:16px;top:calc(50% - 22px)}
.viewer-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.2em;color:#d6cebe}
body.viewer-is-open{overflow:hidden}
@media(min-width:1800px){.art-grid{row-gap:180px}.gallery-sign{margin-bottom:125px}}
@media(max-width:1319px) and (min-width:840px){.art-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;row-gap:135px}.exhibition{padding-inline:40px}h2{font-size:53px}}
@media(max-width:839px){.exhibition{padding:23px 24px 40px}.gallery-sign{margin-bottom:103px;font-size:9px}.gallery-wall{background-size:1150px auto}.art-grid{grid-template-columns:minmax(0,1fr);row-gap:130px}.artwork{padding-top:38px}.wall-light{width:125%;height:calc(var(--picture-height) + 70px)}.art-open{max-width:calc(100vw - 70px)}.frame{padding:6px}.frame::after{inset:5px}.glass{inset:6px}.artwork figcaption{margin-top:34px}h2{font-size:58px}.gallery-hint{margin-top:50px}.art-viewer{padding:65px 20px 95px}.viewer-image{max-width:calc(100vw - 40px);max-height:calc(100dvh - 200px)}.viewer-prev,.viewer-next{top:auto;bottom:16px}.viewer-prev{left:20px}.viewer-next{right:20px}.viewer-count{bottom:34px}}
/* Hover exhibition lighting: the selected artwork sits above the ambient veil. */
body::before{content:'';position:fixed;inset:0;z-index:5;background:rgba(0,0,0,.23);opacity:0;pointer-events:none;transition:opacity .38s ease}
.wall-light{transition:opacity .38s ease,filter .38s ease}
.picture-light b{transition:box-shadow .38s ease,background .38s ease}
.glass::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,235,189,.17),rgba(255,235,189,.04) 48%,transparent 78%);opacity:0;transition:opacity .38s ease;pointer-events:none}
@media(hover:hover) and (pointer:fine){
  body:not(.viewer-is-open):has(.art-open:is(:hover,:focus-visible))::before{opacity:1}
  body:not(.viewer-is-open) .artwork:has(.art-open:is(:hover,:focus-visible)){z-index:6}
  body:not(.viewer-is-open) .artwork:has(.art-open:is(:hover,:focus-visible)) .wall-light{opacity:1;filter:blur(8px) brightness(1.65)}
  body:not(.viewer-is-open) .artwork:has(.art-open:is(:hover,:focus-visible)) .picture-light b{background:#fff3d5;box-shadow:0 3px 9px #fff0c9c4,0 8px 24px #ffdf9f94,0 18px 45px #ffdb9666}
  body:not(.viewer-is-open) .artwork:has(.art-open:is(:hover,:focus-visible)) .glass::after{opacity:1}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Graffiti typography throughout the interface. */
body{font-family:Graffonti,sans-serif;font-size:20px;font-weight:400}
.gallery-sign{font-size:18px;letter-spacing:.04em;gap:20px}
.art-number{font-size:18px;letter-spacing:.06em}
.gallery-hint{font-size:22px;line-height:1.5;letter-spacing:.02em}
.viewer-count{font-size:18px;letter-spacing:.04em}
@media(max-width:700px){.gallery-sign{font-size:16px;letter-spacing:.02em}.gallery-hint{font-size:20px}}

@font-face{font-family:Bangers;src:url('assets/Bangers-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Kalam;src:url('assets/Kalam-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
body{font-family:BarlowCondensed,sans-serif;font-size:18px}
.gallery-sign,.art-number,.gallery-hint,.viewer-count{font-family:Anton,sans-serif;font-weight:400;letter-spacing:.055em}
.gallery-sign{font-size:20px}.art-number{font-size:20px}.gallery-hint{font-size:24px}

@font-face{font-family:Anton;src:url('assets/Anton-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:BarlowCondensed;src:url('assets/BarlowCondensed-Medium.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
body{font-family:BarlowCondensed,sans-serif;font-size:19px}
.gallery-sign,.art-number{font-size:15px;letter-spacing:.08em}

/* Sparse decoration confined to margins; never captures clicks or covers content. */
.exhibition,.detail-page,.png-contact{position:relative;isolation:isolate}
.ambient-sticker{position:absolute;z-index:-1;pointer-events:none;user-select:none;opacity:1;transform:translateY(var(--ambient-y,0px)) rotate(var(--tilt,-10deg));width:clamp(65px,7vw,110px)}
.ambient-sticker img{display:block;width:100%;height:auto;filter:drop-shadow(2px 4px 4px #0008)}
.ambient-gallery-a{left:1%;top:420px;--tilt:-16deg}.ambient-gallery-b{right:1%;top:1030px;--tilt:12deg;width:70px}.ambient-gallery-c{left:3%;bottom:50px;--tilt:9deg;width:85px}
.ambient-contact{left:0;top:42%;width:85px;--tilt:-12deg;opacity:1}
.ambient-detail{right:0;top:40%;width:80px;--tilt:14deg;opacity:1}
@media(max-width:700px){.ambient-sticker{width:55px;opacity:1}.ambient-gallery-a{left:0;top:750px}.ambient-gallery-b{right:0;top:2070px;width:45px}.ambient-gallery-c,.ambient-contact,.ambient-detail{display:none}}