:root{
  --bg:#F4F8F2; --bg2:#E3EDDF; --ink:#1F2E26; --ink2:#55665C; --line:#CCDAC7;
  --accent:#4F8560; --accent2:#6BA37A; --brass:#8AA37E;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}


html{scroll-behavior:smooth; scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
*{box-sizing:inherit; margin:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:"Fraunces", "Iowan Old Style", Georgia, serif; font-weight:400; line-height:1.15; letter-spacing:-0.01em;}
h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:1.2rem; max-width:22ch;}
h3{font-size:1.35rem; margin-bottom:.5rem;}
p{max-width:64ch;}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px;}
a:hover{color:var(--accent2);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}
img{max-width:100%; display:block;}
.wrap{width:min(1100px, 100% - 2.5rem); margin-inline:auto;}
section{padding:5.5rem 0;}
section + section{border-top:1px solid var(--line);}

/* nav */
nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:1rem;}
nav .brand{font-family:"Fraunces", Georgia, serif; font-size:1.1rem; color:var(--ink); text-decoration:none;}
nav ul{list-style:none; padding:0; display:flex; gap:1.4rem; overflow-x:auto; -webkit-overflow-scrolling:touch;}
nav li a{color:var(--ink2); text-decoration:none; font-size:.95rem; white-space:nowrap;}
nav li a:hover{color:var(--accent);}
@media (max-width:720px){ nav ul{display:none;} }

/* hero */
.hero{padding:5rem 0 4.5rem;}
.hero .wrap{display:grid; grid-template-columns:1.25fr .85fr; gap:3.5rem; align-items:end;}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:300; line-height:1.05; max-width:14ch; margin-bottom:1.6rem;}
.hero h1 .kicker{display:block; font-family:"Instrument Sans", Arial, sans-serif; font-size:.95rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:1.2rem;}
.hero h1 em{font-style:italic; font-weight:400;}
.hero .lead{font-size:1.2rem; color:var(--ink2); max-width:46ch; margin-bottom:2rem;}
.hero .who{font-size:.95rem; color:var(--ink2); line-height:1.5;}
.hero .who strong{color:var(--ink); font-weight:600; display:block;}
.portrait{aspect-ratio:606/672; background:var(--bg2); border-radius:200px 200px 12px 12px; position:relative; overflow:hidden; border:1px solid var(--line);}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:top;}
.portrait .ph{position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--ink2); padding:2rem; font-size:.9rem;}
.portrait .ph span{font-family:"Fraunces", Georgia, serif; font-size:5rem; color:var(--brass); display:block; line-height:1; margin-bottom:.5rem;}
.actions{display:flex; gap:.8rem; flex-wrap:wrap;}
.btn{display:inline-block; padding:.75rem 1.25rem; border-radius:999px; text-decoration:none; font-weight:500; font-size:.98rem; border:1px solid var(--accent); color:var(--accent);}
.btn.primary{background:var(--accent); color:#fff;}
.btn.primary:hover{background:var(--accent2); border-color:var(--accent2); color:#fff;}
@media (max-width:820px){ .hero .wrap{grid-template-columns:1fr;} .portrait{max-width:320px;} }

/* two column narrative */
.cols{display:grid; grid-template-columns:1fr 1.6fr; gap:3rem;}
.cols .aside{color:var(--ink2); font-size:.98rem;}
.cols .aside h2{color:var(--ink);}
.prose p + p{margin-top:1.1rem;}
.prose .drop::first-letter{font-family:"Fraunces", Georgia, serif; font-size:3.4em; float:left; line-height:.8; padding:.12em .12em 0 0; color:var(--accent);}
@media (max-width:820px){ .cols{grid-template-columns:1fr; gap:1.5rem;} }

.places{list-style:none; padding:0; margin-top:2rem; border-top:1px solid var(--line);}
.places li{padding:.8rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:1rem; font-size:.95rem;}
.places li span{color:var(--ink2);}
.chips{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.4rem;}
.chips span{border:1px solid var(--line); border-radius:999px; padding:.3rem .8rem; font-size:.85rem; color:var(--ink2);}

/* why */
.why{display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem 3rem; margin-top:2.5rem;}
.why h3{font-style:italic;}
.why p{color:var(--ink2);}
@media (max-width:720px){ .why{grid-template-columns:1fr;} }
.note{background:var(--bg2); border-left:3px solid var(--brass); padding:1.2rem 1.4rem; margin-top:2.5rem; max-width:70ch; font-size:.98rem;}

/* journey (the memorable element) */
.journey{position:relative; margin-top:3rem; counter-reset:step;}
.journey ol{list-style:none; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:1.2rem; position:relative;}
.journey ol::before{content:""; position:absolute; left:0; right:0; top:14px; height:1px; background:var(--line);}
.journey li{position:relative; padding-top:2.2rem; counter-increment:step;}
.journey li::before{content:""; position:absolute; top:8px; left:0; width:13px; height:13px; border-radius:50%; background:var(--bg); border:2px solid var(--accent);}
.journey li:first-child::before, .journey li:nth-child(4)::before{background:var(--accent);}
.journey li small{display:block; color:var(--brass); font-family:"Fraunces", Georgia, serif; font-style:italic; font-size:1rem; margin-bottom:.3rem;}
.journey li small::before{content:counter(step) ". ";}
.journey h3{font-size:1.1rem; font-family:"Instrument Sans", Arial, sans-serif; font-weight:600;}
.journey p{font-size:.92rem; color:var(--ink2);}
@media (max-width:900px){
  .journey ol{grid-template-columns:1fr; gap:0; padding-left:1.6rem;}
  .journey ol::before{left:6px; right:auto; top:0; bottom:0; height:auto; width:1px;}
  .journey li{padding:0 0 1.8rem 0;}
  .journey li::before{left:-1.6rem; top:6px;}
}

/* techniques */
.tech{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); margin-top:2rem;}
.tech article{padding:1.8rem 1.6rem 1.8rem 0; border-bottom:1px solid var(--line);}
.tech article:nth-child(3n+2){padding-left:1.6rem; border-left:1px solid var(--line); border-right:1px solid var(--line); padding-right:1.6rem;}
.tech article:nth-child(3n){padding-left:1.6rem;}
.tech h3{font-size:1.25rem;}
.tech article:nth-child(7){grid-column:1/-1; max-width:64ch;}
.tech .tag{font-size:.85rem; color:var(--brass); font-style:italic; font-family:"Fraunces", Georgia, serif; margin-bottom:.6rem; display:block;}
.tech p{font-size:.95rem; color:var(--ink2);}
@media (max-width:900px){
  .tech{grid-template-columns:1fr;}
  .tech article, .tech article:nth-child(3n+2), .tech article:nth-child(3n){padding:1.5rem 0; border-left:0; border-right:0;}
}

/* prima e dopo */
.case{margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--line);}
.case:first-of-type{margin-top:2.5rem;}
.case header .tag{font-family:"Fraunces", Georgia, serif; font-style:italic; color:var(--brass); display:block; margin-bottom:.3rem;}
.case header h3{font-size:1.35rem;}
.case header p{color:var(--ink2); font-size:.95rem;}
.pairs{display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1.5rem;}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:0;}
.pair img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:10px; border:1px solid var(--line);}
.pair figcaption{font-size:.85rem; color:var(--ink2); margin-top:.4rem; font-family:"Fraunces", Georgia, serif; font-style:italic;}
@media (max-width:820px){ .pairs{grid-template-columns:1fr;} }

/* illustrazioni DIEP */
.illus{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem;}
.illus figure{margin:0;}
.art-wrap{background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:1rem;}
.illus svg{width:100%; height:auto; display:block;}
.illus figcaption{font-size:.93rem; color:var(--ink2); margin-top:.9rem; line-height:1.5;}
.illus figcaption strong{color:var(--ink); font-weight:600;}
.illus .skin{fill:var(--bg); stroke:var(--ink2); stroke-width:1.6;}
.illus .skin2{fill:var(--bg); stroke:var(--ink2); stroke-width:1.6;}
.illus .flap{fill:color-mix(in srgb, var(--accent) 38%, var(--bg)); stroke:var(--accent); stroke-width:1.8;}
.illus .flapghost{fill:none; stroke:var(--accent); stroke-width:1.4; stroke-dasharray:5 5; opacity:.7;}
.illus .dot{fill:var(--ink2);}
.illus .line{fill:none; stroke:var(--ink2); stroke-width:1.4;}
.illus .scar{fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:3 4;}
.illus .art{fill:none; stroke:#C0574A; stroke-width:2.2; stroke-linecap:round;}
.illus .vein{fill:none; stroke:#5B7FA6; stroke-width:2.2; stroke-linecap:round;}
.illus .perf{fill:#C0574A; stroke:var(--bg); stroke-width:1;}
.illus .anast{fill:none; stroke:var(--ink); stroke-width:1.4;}
.illus .arrow{fill:none; stroke:var(--accent); stroke-width:2.2; marker-end:url(#arw);}
.illus .arrow2{fill:none; stroke:var(--accent); stroke-width:2; marker-start:url(#arw); marker-end:url(#arw);}
.illus .lbl{font-family:"Instrument Sans", Arial, sans-serif; font-size:12px; fill:var(--ink2);}
@media (max-width:820px){ .illus{grid-template-columns:1fr; max-width:420px;} }

/* numbers */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2rem;}
.facts div{border-top:2px solid var(--accent); padding-top:1rem;}
.facts .n{font-family:"Fraunces", Georgia, serif; font-size:3rem; line-height:1; font-weight:300;}
.facts p{font-size:.95rem; color:var(--ink2); margin-top:.4rem;}
@media (max-width:720px){ .facts{grid-template-columns:1fr;} }

/* research */
.pubs{list-style:none; padding:0; margin-top:1.5rem; border-top:1px solid var(--line);}
.pubs li{padding:1rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:5.5rem 1fr; gap:1rem;}
.pubs .y{font-family:"Fraunces", Georgia, serif; color:var(--brass); font-size:1.05rem;}
.pubs .t{font-weight:500;}
.pubs .j{color:var(--ink2); font-size:.92rem;}
@media (max-width:600px){ .pubs li{grid-template-columns:1fr; gap:.2rem;} }

/* faq */
details{border-bottom:1px solid var(--line); padding:1rem 0;}
details:first-of-type{border-top:1px solid var(--line);}
summary{cursor:pointer; font-family:"Fraunces", Georgia, serif; font-size:1.25rem; list-style:none; display:flex; justify-content:space-between; gap:1rem;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; color:var(--accent); font-family:"Instrument Sans", Arial, sans-serif; font-size:1.3rem; flex:none;}
details[open] summary::after{content:"–";}
details p{margin-top:.8rem; color:var(--ink2);}

/* contact */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:3rem;}
.contact h3{margin-top:0;}
.contact dl{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.2rem; font-size:.98rem;}
.contact dt{color:var(--ink2);}
.contact dd{margin:0;}
.social{display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1.5rem;}
@media (max-width:720px){ .contact{grid-template-columns:1fr;} }

.community{margin-top:1.8rem; padding:1.2rem 1.4rem; background:var(--bg2); border-radius:12px;}
.community h3{font-size:1.1rem; margin-bottom:.4rem;}
.community p{font-size:.95rem; color:var(--ink2);}
footer{border-top:1px solid var(--line); padding:2.5rem 0 3rem; color:var(--ink2); font-size:.88rem;}
footer p{max-width:80ch;}
footer p + p{margin-top:.6rem;}