/* Daniele Lucchini Site — front end */
html,html body.dls,html body.dls.custom-background{margin:0;padding:0;background:#000!important;color:#f2f0eb}
.dls{--g:clamp(16px,3.2vw,48px);--gap:clamp(8px,1vw,16px);--title:"DLS Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--ink:#f2f0eb;--ink2:#d9d6cf;--ink3:#9d9a94}
body.dls{font-family:"DLS Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body.dls.dls-locked{overflow:hidden}
.dls *,.dls *::before,.dls *::after{box-sizing:border-box}
.dls button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.dls .skip-link,.dls .screen-reader-text,.dls-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Menu: name on the left, info (and other pages) on the right */
.dls-menu{position:fixed;z-index:130;top:calc(var(--g)*.6);left:var(--g);right:var(--g);display:flex;justify-content:space-between;align-items:baseline;pointer-events:none}
.admin-bar .dls-menu{top:calc(32px + var(--g)*.6)}
.dls-menu a,.dls-menu button{pointer-events:auto}
.dls .dls-menu__name{font-family:var(--title);font-weight:500;font-size:clamp(16px,1.2vw,19px);color:var(--ink);text-decoration:none;text-shadow:0 0 14px rgba(0,0,0,.5)}
.dls-menu__links{display:flex;gap:1.8em}
.dls .dls-menu__item{font-size:15px;color:var(--ink);text-decoration:none;text-shadow:0 0 12px rgba(0,0,0,.5);padding:12px 0 3px;margin-top:-6px;border-bottom:1px solid transparent;line-height:1}
.dls-menu__item:hover,.dls-menu__item:focus-visible,.dls-menu__item.is-current,.dls-info-open .dls-info-toggle{border-bottom-color:currentColor}
.dls-menu a:focus-visible,.dls-menu button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.dls-lb-open .dls-menu,.dls-info-open .dls-menu__name{opacity:0;pointer-events:none}

/* Opening */
.dls-opening{position:relative;height:100vh;height:100svh;min-height:420px;overflow:hidden;background:#000}
.dls-opening video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.dls-opening video.is-on{opacity:1}
.dls-opening::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.38) 0,rgba(0,0,0,0) 22%),rgba(0,0,0,.18);pointer-events:none}
.dls-opening__shade{position:absolute;z-index:1;left:0;right:0;top:50%;height:46%;transform:translateY(-50%);background:radial-gradient(ellipse 45% 40% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0) 70%);pointer-events:none}
.dls-opening__text{position:absolute;z-index:2;left:8%;right:8%;top:50%;transform:translateY(-50%);margin:0;text-align:center;font-family:var(--title);font-weight:500;font-size:clamp(20px,2vw,32px);line-height:1.2;color:#fff;text-shadow:0 0 18px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4)}

/* Collage */
.dls-collage{padding:var(--g) 0 7vw}
.dls-row{display:flex;align-items:flex-start;margin:0 0 4.5vw}
.dls-tile{position:relative;margin:0;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer;outline:none;flex:none}
.dls-tile:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.dls-tile video,.dls-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dls-tile video{opacity:0;transition:opacity .6s ease}
.dls-tile video.is-playing{opacity:1}
.dls-tile--gallery img{opacity:0;transition:opacity 1.4s ease}
.dls-tile--gallery img.is-on{opacity:1}
.dls-tile--text{cursor:default;aspect-ratio:auto;background:none;display:flex;align-items:center}
.dls-tile--text div{font-size:16px;line-height:1.65;color:#d6d6d6}
.dls-sound{position:absolute;right:10px;bottom:9px;width:15px;height:13px;opacity:.75;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M2 7h4l5-4v14l-5-4H2z' fill='white'/%3E%3Cpath d='M15 6.5a5 5 0 0 1 0 7M18 3.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E")}

/* Projects: one big clip with the title in its corner, two smaller clips underneath */
.dls-project{margin:0 var(--g) clamp(72px,11vw,170px)}
.dls-project__hero{position:relative}
.dls-project__hero .dls-tile{width:100%}
.dls-project__hero .dls-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0) 34%);pointer-events:none}
.dls-project__cap{position:absolute;z-index:1;left:clamp(14px,2vw,32px);bottom:clamp(12px,1.8vw,28px);max-width:70%;pointer-events:none}
.dls-project__cap h2{margin:0;font-family:var(--title);font-weight:500;font-size:clamp(21px,2.3vw,36px);line-height:1.08;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.dls-project__cap p{margin:.5em 0 0;font-size:clamp(12px,.95vw,15px);line-height:1.4;color:var(--ink2)}
.dls-project__cap p span{color:var(--ink3)}
.dls-project__more{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--gap)}
.dls-project__more .dls-tile{width:100%}
.dls-project__more .dls-tile:only-child{grid-column:1/-1}

/* Row layouts — same size inside a row */
.dls-row--3 .dls-tile{width:27%;margin-left:3.5%}
.dls-row--3 .dls-tile:first-child{margin-left:6%}
.dls-row--2 .dls-tile{width:41%;margin-left:6%}
.dls-row--2-left .dls-tile{width:30%;margin-left:4%}
.dls-row--2-left .dls-tile:first-child{margin-left:6%}
.dls-row--2-right .dls-tile{width:30%;margin-left:4%}
.dls-row--2-right .dls-tile:first-child{margin-left:30%}
.dls-row--1-center .dls-tile{width:56%;margin-left:22%}
.dls-row--1-left .dls-tile{width:44%;margin-left:6%}
.dls-row--1-right .dls-tile{width:44%;margin-left:50%}
.dls-row--1-full .dls-tile{width:88%;margin-left:6%}

@media (max-width:700px){
	.dls-project__hero .dls-tile::after{display:none}
	.dls-project__cap{position:static;max-width:none;padding:12px 0 6px}
	.dls-project__cap h2{font-size:22px}
	.dls-project__cap p{font-size:14px}
	.dls-collage{padding:7vw 0 12vw}
	.dls-row{flex-wrap:wrap;margin-bottom:6vw}
	.dls-row--3 .dls-tile,.dls-row--2 .dls-tile,.dls-row--2-left .dls-tile,.dls-row--2-right .dls-tile{width:43%;margin-left:4%}
	.dls-row--3 .dls-tile:first-child,.dls-row--2 .dls-tile:first-child,.dls-row--2-left .dls-tile:first-child,.dls-row--2-right .dls-tile:first-child{margin-left:5%}
	.dls-row--3 .dls-tile:nth-child(3){margin-left:5%;margin-top:4vw}
	.dls-row--1-center .dls-tile,.dls-row--1-full .dls-tile{width:90%;margin-left:5%}
	.dls-row--1-left .dls-tile{width:65%;margin-left:5%}
	.dls-row--1-right .dls-tile{width:65%;margin-left:30%}
}

/* Close button */
.dls-close{position:absolute;z-index:3;top:clamp(10px,1.6vw,26px);right:clamp(14px,2vw,32px);font-size:34px;line-height:1;font-weight:300;color:#e6e6e6;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.admin-bar .dls-close{top:calc(32px + clamp(10px,1.6vw,26px))}

/* Info: full-screen page */
.dls-info{position:fixed;inset:0;z-index:120;background:#000;display:flex;align-items:center;justify-content:center;padding:90px 24px;overflow-y:auto;opacity:0;transition:opacity .45s ease}
.dls-info.is-visible{opacity:1}
.dls-info[hidden]{display:none}
.dls-info__body{width:100%;max-width:34em;margin:auto}
.dls-info__text{font-family:var(--title);font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--ink)}
.dls-info__text p{margin:0 0 1em}
.dls-info__text a{color:#fff}
.dls-info__email{margin:2em 0 0;font-size:16px;color:var(--ink);user-select:all}

/* Enlarged clip: text in a column beside the video */
.dls-lightbox{position:fixed;inset:0;z-index:140;background:#000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s ease}
.dls-lightbox.is-visible{opacity:1}
.dls-lightbox[hidden]{display:none}
.dls-lb-inner{display:flex;align-items:center;gap:50px;max-width:calc(100vw - 180px)}
.dls-lb-media{position:relative;flex:none;width:min(66vw,calc((100vh - 140px) * 16 / 9));aspect-ratio:16/9;background:#000}
.dls-lightbox.no-text .dls-lb-media{width:min(84vw,calc((100vh - 140px) * 16 / 9))}
.dls-lb-media video,.dls-lb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.dls-lb-media img{opacity:0;transition:opacity 1.2s ease}
.dls-lb-media img.is-on{opacity:1}
.dls-lb-text{width:260px;flex:none}
.dls-lightbox.no-text .dls-lb-text{display:none}
.dls-lb-title{margin:0 0 .5em;font-family:var(--title);font-size:26px;font-weight:500;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.dls-lb-info{margin:0 0 1.6em;font-size:14px;line-height:1.5;color:var(--ink2)}
.dls-lb-desc{margin:0 0 1.8em;font-size:15px;line-height:1.6;color:var(--ink2);white-space:pre-line}
.dls-lb-role{margin:0;font-size:14px;color:var(--ink3)}
.dls-lb-text p:empty,.dls-lb-text h2:empty{display:none}
.dls-lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:46px;font-weight:300;color:#9a9a9a;width:56px;height:80px;display:flex;align-items:center;justify-content:center}
.dls-lb-nav:hover{color:#fff}
.dls-lb-prev{left:12px}
.dls-lb-next{right:12px}
.dls-lb-unmute{position:absolute;right:12px;bottom:10px;font-size:13px;color:#fff;opacity:.85;padding:6px}

@media (max-width:900px){
	.dls-lightbox{align-items:flex-start;overflow-y:auto}
	.dls-lb-inner{flex-direction:column;align-items:stretch;gap:22px;max-width:none;width:100%;padding:84px 0 40px}
	.dls-lb-media,.dls-lightbox.no-text .dls-lb-media{width:100%}
	.dls-lb-text{width:auto;padding:0 22px}
	.dls-lb-nav{top:auto;bottom:10px;transform:none;height:56px;font-size:40px;position:fixed}
	.dls-lb-title{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
	.dls-opening video,.dls-tile video,.dls-info,.dls-lightbox,.dls-tile--gallery img{transition:none}
}