/* Iterazione "fluida": la home usa tutta la larghezza. Caricato solo dalla home, dopo home-restyling.css. */
.hr .site-header{padding-inline:clamp(16px,2vw,32px)}
.hr .site-footer{max-width:none;padding-inline:clamp(16px,2vw,32px)}
.hr-main p,.hr-hero-txt{max-width:70ch}
.hr-trends>li:nth-child(n+5){display:none}
@media(min-width:861px){
 .hr-layout{--sw:clamp(240px,18vw,280px);grid-template-columns:var(--sw) minmax(0,1fr);background:linear-gradient(to right,var(--paper) calc(var(--sw) - 1px),var(--line) calc(var(--sw) - 1px) var(--sw),transparent var(--sw));gap:0;max-width:none;margin:0;padding:0}
 .hr-side{top:0;height:100vh;max-height:none;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;padding:16px 18px}
 .hr-main{padding:28px clamp(20px,2.5vw,48px) 64px}
 .hr-trends{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
 .hr-hero{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr)}
 .hr-hero-txt{padding:clamp(24px,3vw,48px);align-self:center}
 .hr-hero h1{font-size:clamp(40px,3.4vw,60px)}
 .hr-cols{grid-template-columns:1fr 1fr}
}
@media(min-width:1280px){.hr-trends{grid-template-columns:repeat(3,1fr)}.hr-trends>li:nth-child(n+5){display:block}}
@media(min-width:1440px){.hr-trends{grid-template-columns:repeat(4,1fr)}.hr-trends>li:nth-child(n+5){display:none}}
@media(min-width:1800px){
 .hr-trends{grid-template-columns:repeat(6,1fr)}.hr-trends>li:nth-child(n+5){display:block}
 .hr-col ul{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
}