/* Pages for each system and material (/sistemi/..., /serramenti-..., /en/...), built by tools/build-sistemi.js.
   They reuse styles.css (nav, card, spec, fin-grid, footer); only the page layout lives here. */
.sys-main{padding:calc(var(--nav) + 34px + env(safe-area-inset-top,0px)) 0 clamp(70px,9vw,130px)}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 clamp(26px,3.4vw,44px); font-size:14px; color:var(--muted)}
.crumbs a{color:var(--ink-2); text-decoration:none} .crumbs a:hover{color:var(--gold-ink)}
.crumbs .sep{opacity:.5}
.sys-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,64px); align-items:center}
.sys-hero.fin{grid-template-columns:1fr; max-width:760px}
.sys-media{margin:0; min-height:clamp(320px,38vw,560px); border-radius:var(--r-xl); border:1px solid var(--line); background:radial-gradient(120% 90% at 50% 35%,#FFFFFF 0%,#F6F1E8 70%,#EFE7D8 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; overflow:hidden}
.sys-media img{max-height:min(470px,52vh); max-width:86%; object-fit:contain; mix-blend-mode:multiply}
.sys-media.cover{padding:0}
.sys-media.cover img{max-width:none; max-height:none; width:100%; height:100%; object-fit:cover; mix-blend-mode:normal}
.sys-media .cap{margin:14px 0 0; font-size:13px; color:var(--muted)}
.sys-copy h1,.sys-head h1{font-family:var(--serif); font-weight:400; font-size:clamp(40px,4.2vw,60px); text-wrap:balance; line-height:1.02; letter-spacing:-.015em; margin:4px 0 8px}
.sys-copy h2{font-family:var(--serif); font-weight:400; font-size:clamp(30px,3vw,42px); line-height:1.05; margin:0 0 6px}
.sys-copy .type{font-size:17px; margin:0 0 18px}
.sys-desc{color:var(--ink-2); font-size:17px; max-width:52ch; margin:0 0 26px}
.sys-copy .kspecs{max-width:460px}
.sys-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.sys-head{max-width:820px; margin-bottom:clamp(36px,4.6vw,64px)}
.sys-model{margin-top:clamp(40px,5vw,70px); padding-top:clamp(40px,5vw,70px); border-top:1px solid var(--line)}
.sys-model .sys-media{min-height:clamp(280px,30vw,440px)}
.sys-sec{margin-top:clamp(60px,7vw,110px)}
.sys-sec > h2{font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.2vw,46px); line-height:1.08; margin:0 0 26px}
.sys-sec > h2 span{font-family:var(--sans); font-size:15px; color:var(--muted); margin-left:6px; letter-spacing:0}
.sys-sec .spec{max-width:820px}
.sys-sec .note{margin:-10px 0 0}
.sys-sec .fin-grid{margin-bottom:24px}
.sys-how .how-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px)}
.sys-how .how-grid > div{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px}
.sys-how h3{margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.sys-how p{margin:0; color:var(--ink-2); font-size:15.5px}
.sys-grid .card-hit{text-decoration:none; color:inherit}
.sys-mats ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px 34px}
.sys .foot{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media (max-width:1000px){ .sys-how .how-grid{grid-template-columns:1fr 1fr} .sys-grid{grid-template-columns:1fr 1fr} }
@media (max-width:860px){ .sys-hero{grid-template-columns:1fr} }
@media (max-width:620px){ .sys-how .how-grid,.sys-grid{grid-template-columns:1fr} .sys-cta .btn{flex:1 1 auto} }