/* Noleggio Lorini: website design and development, public website views. */
.page-lorini{--l-yellow:#ffe34e;--l-ink:#171a1d}
.l-opening{padding:24px var(--gutter) 32px}.l-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px}.l-topline a{padding-block:8px}.l-title{display:flex;align-items:end;justify-content:space-between;gap:4%;padding-top:25px}.l-title h1{font:400 clamp(70px,11.5vw,185px)/1.05 var(--display);letter-spacing:-.025em;text-transform:uppercase;white-space:nowrap}.l-title p{font-size:clamp(17px,1.65vw,25px);line-height:1.4;letter-spacing:-.04em;flex:none;padding-bottom:7px}.l-feature{aspect-ratio:2.08}
.l-nav{position:sticky;top:103px;z-index:20;display:flex;align-items:center;gap:5%;padding:0 var(--gutter);background:var(--paper);border-bottom:1px solid var(--line);font-size:10px;text-transform:uppercase}.l-nav>span{margin-right:auto}.l-nav a{padding:22px 0;border-bottom:2px solid transparent}.l-nav a:hover,.l-nav a[aria-current]{border-color:var(--l-ink)}
.l-chapter{padding:65px var(--gutter);scroll-margin-top:55px}.l-section-head{display:grid;grid-template-columns:.6fr 1.1fr 1fr;gap:5%;align-items:end;margin-bottom:38px}.l-section-head>.micro{font-size:10px;line-height:1.8;align-self:start;padding-top:5px}.l-section-head h2{font-size:clamp(34px,3.8vw,60px);line-height:1.12;letter-spacing:-.055em}.l-section-head p{font-size:14px;line-height:1.85;max-width:43ch}
.l-website{padding-inline:0;padding-bottom:30px}.l-website .l-section-head,.l-site-caption{margin-inline:var(--gutter)}.l-visual{display:block;position:relative;line-height:0;overflow:hidden}.l-visual img{display:block;width:100%;height:auto}.l-zoom{position:absolute;bottom:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--l-yellow);color:var(--l-ink);line-height:1;font-size:21px;opacity:0;transition:opacity .2s}.l-visual:hover .l-zoom,.l-visual:focus-visible .l-zoom{opacity:1}.l-site-caption{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:20px}.l-site-caption>.micro{font-size:9px}.l-site-caption .text-link{font-size:13px}
.l-navigation{background:#e5e1d7}.l-detail-label{font-size:8px;margin-top:16px;color:#626259}.l-flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:5%;padding:0;margin:42px 0 0}.l-flow li{border-top:1px solid #a7a69c;padding-top:20px}.l-flow .micro{font-size:10px;color:#64685e}.l-flow h3{font-size:clamp(25px,2.6vw,42px);letter-spacing:-.055em;margin-top:18px}.l-flow p{font-size:13px;line-height:1.7;max-width:30ch;margin-top:12px}
.l-mobile{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center;background:var(--l-ink);color:#f0eee7;padding-block:80px}.l-mobile-copy{max-width:530px}.l-mobile-copy>.micro{font-size:10px;color:var(--l-yellow)}.l-mobile h2{font-size:clamp(42px,5vw,76px);line-height:1.08;letter-spacing:-.055em;color:inherit;margin:28px 0}.l-mobile p{font-size:14px;line-height:1.85;max-width:42ch;color:#c0c4bf}.l-scope{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 36px}.l-scope span{font:9px var(--mono);padding:10px 12px;border:1px solid #5c615b}.l-mobile .text-link{font-size:13px;color:var(--l-yellow)}.l-mobile-view{width:min(100%,390px);margin:0 auto}.l-mobile-view figcaption{font-size:9px;line-height:1.7;padding-top:20px;color:#a7b0a5}
.l-lightbox{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;padding:24px;background:#171a1d;color:#f0eee7;overflow:hidden}.l-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:20px}.l-lightbox::backdrop{background:#171a1d}.l-lightbox-bar,.l-lightbox-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.l-lightbox button{min-width:44px;min-height:44px;background:none;color:inherit;border:1px solid #a7b0a580;padding:8px 16px;font:12px var(--mono);cursor:pointer}.l-lightbox>img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}.l-lightbox p{font-size:13px;line-height:1.6;text-align:center}.l-lightbox .micro{font-size:10px}.l-gallery-open{overflow:hidden}
@media(min-width:1800px){.l-opening,.l-nav,.l-navigation,.l-mobile{padding-inline:max(64px,calc((100vw - 1660px)/2))}}
@media(max-width:1050px){.l-title{display:block}.l-title h1{font-size:13.5vw}.l-title p{font-size:18px;padding:18px 0 0}.l-title p br{display:none}.l-section-head{grid-template-columns:.6fr 1.4fr;gap:22px 5%}.l-section-head>p{grid-column:2}.l-mobile{gap:8%}}
@media(max-width:760px){.l-opening{padding-top:16px;padding-bottom:26px}.l-topline{font-size:8px;gap:12px}.l-topline>span{max-width:130px;text-align:right;line-height:1.6}.l-title{padding-top:20px}.l-title h1{font-size:13.2vw}.l-title p{font-size:16px;line-height:1.5}.l-feature{aspect-ratio:1}.l-nav{top:82px;font-size:8px;justify-content:space-between;gap:12px}.l-nav>span{display:none}.l-nav a{padding:18px 0}.l-chapter{padding:42px var(--gutter);scroll-margin-top:35px}.l-section-head{grid-template-columns:1fr;gap:19px;margin-bottom:28px}.l-section-head>.micro{font-size:9px;padding:0}.l-section-head h2{font-size:36px}.l-section-head>p{grid-column:1;font-size:13px}.l-website{padding-inline:0;padding-bottom:24px}.l-zoom{opacity:1;width:27px;height:27px;font-size:18px;right:8px;bottom:8px}.l-site-caption{padding-top:18px;gap:16px}.l-site-caption>.micro{font-size:7px}.l-site-caption .text-link{font-size:11px}.l-category-screen{margin-inline:calc(-1 * var(--gutter))}.l-detail-label{font-size:7px;line-height:1.7}.l-flow{grid-template-columns:1fr;gap:24px;margin-top:30px}.l-flow li{display:grid;grid-template-columns:25px 1fr;gap:10px 12px;padding-top:18px}.l-flow .micro{padding-top:7px}.l-flow h3{font-size:27px;margin:0}.l-flow p{grid-column:2;max-width:35ch;margin:0;font-size:12px}.l-mobile{grid-template-columns:1fr;gap:36px;padding-block:45px}.l-mobile h2{font-size:42px;margin:22px 0}.l-mobile p{font-size:13px}.l-mobile-copy>.micro{font-size:9px}.l-scope{gap:8px;margin:24px 0}.l-scope span{font-size:8px;padding:9px}.l-mobile .text-link{font-size:12px}.l-mobile-view{width:min(100%,350px)}.l-mobile-view figcaption{font-size:8px}.l-lightbox{padding:15px}.l-lightbox[open]{gap:15px}.l-lightbox-bottom{gap:10px}.l-lightbox p{font-size:11px}.l-lightbox button{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.l-zoom{transition:none}}
