@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--ink:#142332;--paper:#f5f3ee;--muted:#586471;--accent:#a97d42}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.skip{position:fixed;top:-100px;background:white;padding:16px;z-index:20}.skip:focus{top:10px}header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid #dcdedc;background:var(--paper)}.brand{width:190px;height:65px;overflow:hidden;position:relative}.brand img{width:310px;position:absolute;left:-62px;top:-69px;filter:invert(1);mix-blend-mode:multiply}nav{display:flex;gap:32px;font-size:14px}.nav-contact{font-size:14px;border-bottom:1px solid;padding-bottom:6px}.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:690px}.hero-copy{padding:78px 8% 64px 11%}.eyebrow{font-size:11px;letter-spacing:2.1px;font-weight:700;margin:0 0 30px}h1,h2,.quote p{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-2px}h1{font-size:clamp(48px,5.4vw,80px);line-height:1.1;margin:0 0 28px}em{color:var(--accent);font-weight:500}p{line-height:1.8}.intro{max-width:410px;color:var(--muted);font-size:17px}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:25px;background:var(--ink);color:white;padding:18px 24px;font-size:14px;margin-top:20px}.button:hover{background:#31475a}.text-link{display:block;font-size:13px;margin-top:25px;text-decoration:underline;text-underline-offset:7px}.portrait{background:#747474;position:relative;overflow:hidden}.portrait>img{height:100%;width:100%;object-fit:cover;object-position:center 20%;display:block}.portrait-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#10202ee8);color:white;padding:65px 35px 30px}.portrait-caption span{display:block;font-family:Georgia,serif;font-size:24px}.portrait-caption small{display:block;font-size:9px;letter-spacing:2px;margin-top:12px}.ribbon{display:flex;justify-content:space-evenly;align-items:center;padding:25px 6%;background:#e9e7df;font-size:12px;letter-spacing:1px}.ribbon i{color:var(--accent)}.section{padding:100px 8%;scroll-margin-top:20px}h2{font-size:clamp(38px,4vw,58px);line-height:1.15;margin:0 0 25px}.about{display:grid;grid-template-columns:1fr 1fr;gap:9%}.prose p{font-size:15px;color:var(--muted)}.prose .lead{font-size:23px;line-height:1.5;color:var(--ink);margin-top:0}.services{background:#eaece8}.section-top{display:flex;justify-content:space-between;gap:40px;align-items:end}.section-top>p{max-width:320px;font-size:15px;color:var(--muted)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:48px}.service-grid article{border-top:1px solid #b5bfbd;padding-top:24px}.number{font-size:12px;color:var(--accent)}h3{font-weight:500;font-size:24px}.service-grid p{font-size:14px;color:var(--muted)}.service-grid a{display:inline-block;font-size:13px;border-bottom:1px solid;padding-bottom:5px;margin-top:15px}.energy{background:var(--ink);color:white;display:grid;grid-template-columns:1fr 1fr;gap:12%}.energy-heading>p:not(.eyebrow){font-size:15px;color:#c1c9d0;max-width:420px}.light{background:var(--paper);color:var(--ink)}.light:hover{background:#ddd8ca}.steps article{display:flex;gap:25px;border-top:1px solid #ffffff30;padding:25px 0}.steps span{font-size:12px;color:#cba779;padding-top:8px}.steps h3{font-size:20px;margin:0 0 8px}.steps p{font-size:14px;color:#c1c9d0;margin:0}.quote{text-align:center;padding:85px 20px;border-bottom:1px solid #deddd5}.quote p{font-size:clamp(26px,3vw,42px);line-height:1.5;letter-spacing:-1px;margin:0 0 25px}.quote span{font-size:10px;letter-spacing:2px;color:var(--muted)}.contact{display:grid;grid-template-columns:1fr 1fr;gap:12%}.contact p:not(.eyebrow){max-width:400px;color:var(--muted);font-size:15px}.contact-links{padding-top:45px}.contact-links>a:not(.button){display:block;border-bottom:1px solid #d1d5d4;padding:28px 0;overflow-wrap:anywhere}.contact-links small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);margin-bottom:12px}.contact-links strong{font-weight:500;font-size:19px}footer{background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:35px 8%}footer span{font-family:Georgia,serif;font-size:22px}footer small{color:#bac5cd;line-height:1.7}footer a{font-size:12px}@media(max-width:760px){header{height:80px;padding:0 5%}.brand{width:135px}.brand img{width:250px;left:-56px;top:-49px}nav{gap:12px;font-size:11px}.nav-contact{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:55px 7%}h1{font-size:56px}.portrait{height:520px}.portrait>img{object-position:center 25%}.ribbon{gap:15px;font-size:9px;letter-spacing:0}.section{padding:65px 7%}.about,.energy,.contact{grid-template-columns:1fr;gap:35px}.section-top{display:block}.service-grid{grid-template-columns:1fr;gap:32px}.contact-links{padding-top:0}footer{flex-wrap:wrap;padding:30px 7%}.quote{padding:60px 7%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Versione scura del sito personale di Antonio Mennella. */
:root{--ink:#f2eee7;--paper:#141516;--muted:#b5b4b0;--accent:#c29b69}
body{background:var(--paper);color:var(--ink)}
header{background:#141516;border-bottom-color:#ffffff18}
.brand img{filter:none;mix-blend-mode:screen}
.skip{background:#242526;color:var(--ink)}
.hero-copy{background:#141516}
.button{background:#c29b69;color:#141516}
.button:hover{background:#d6b58c}
.portrait{background:#747474}
.portrait-caption{background:linear-gradient(transparent,#141516ed)}
.ribbon{background:#1e2021;border-top:1px solid #ffffff0d;border-bottom:1px solid #ffffff0d;color:#d8d4cc}
.services{background:#1c1e20}
.service-grid article{border-top-color:#ffffff25}
.energy{background:#0c0d0e}
.energy-heading>p:not(.eyebrow),.steps p{color:#b5b4b0}
.steps article{border-top-color:#ffffff20}
.steps span{color:var(--accent)}
.light{background:#eee8df;color:#141516}
.light:hover{background:#d9c7ae}
.quote{background:#18191a;border-bottom-color:#ffffff15}
.contact-links>a:not(.button){border-bottom-color:#ffffff20}
footer{background:#0c0d0e;border-top:1px solid #ffffff15}
footer small{color:#b5b4b0}
::selection{background:#c29b69;color:#141516}

/* Firma: ritaglio dei margini vuoti e maggiore dimensione visibile. */
.brand{width:240px;height:76px;overflow:hidden;flex-shrink:0}
.brand img{width:390px;max-width:none;left:-85px;top:-82px;filter:none;mix-blend-mode:screen}
@media(max-width:760px){header{height:auto;min-height:100px;flex-wrap:wrap;justify-content:center;gap:8px;padding:10px 5% 16px}.brand{width:220px;height:72px}.brand img{width:355px;left:-77px;top:-75px}nav{width:100%;justify-content:center;gap:25px;font-size:13px}}
.brand{width:260px;height:112px}.brand img{left:-85px;top:-68px}header{height:132px}
@media(max-width:760px){header{height:auto}.brand{width:230px;height:106px}.brand img{left:-77px;top:-60px}}

/* Il ritratto scontornato si integra nel fondo della pagina. */
.portrait{background:var(--paper)}
.portrait>img{object-fit:contain;object-position:center bottom}

/* Ritratto leggermente più piccolo, allineato alla base della sezione. */
.portrait{display:flex;align-items:flex-end;justify-content:center}
.portrait>img{width:88%;height:88%;object-fit:contain;object-position:center bottom}

/* Identità personale: nero e oro champagne. */
:root{--paper:#111213;--accent:#d2b777}
header,.hero-copy{background:var(--paper)}
.button{background:var(--accent);color:#111213}
.button:hover{background:#e3cd99}
.light{background:var(--accent);color:#111213}
.light:hover{background:#e3cd99}
.steps span{color:var(--accent)}
::selection{background:var(--accent);color:#111213}