/* ANARG S.r.l. */

:root{
  --bg:#ffffff;
  --fg:#1f1b16;
  --rail:0px;
  --gut:clamp(20px,4.5vw,64px);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.12,1);
  --serif:"Jost",system-ui,sans-serif;
  --sans:"Jost",system-ui,sans-serif;
  --mono:"Jost",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.65;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:color .6s}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--fg);color:var(--bg);padding:10px 14px}
.skip:focus{left:8px}

.note,.tag,.small,figcaption,.bar__nav,th,.contact li span{font-family:var(--mono);font-weight:400;letter-spacing:.12em}
.note{font-size:12px;text-transform:uppercase;opacity:.62}
.small{font-size:13.5px;letter-spacing:.02em!important;line-height:1.7;opacity:.7}
.title{font-family:var(--sans);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;letter-spacing:-.008em;margin-top:14px}

/* ---------- barra ---------- */
.bar{position:fixed;top:0;left:var(--rail);right:0;z-index:50;height:68px;display:flex;align-items:center;gap:32px;padding:0 var(--gut)}
.bar.is-solid{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bar__logo svg{width:86px;height:auto;display:block;fill:currentColor}
.bar__nav{display:flex;gap:30px;margin-left:auto;font-size:11.5px;text-transform:uppercase}
.bar__nav a{opacity:.72;transition:opacity .3s;display:flex;gap:8px}
.bar__nav a:hover{opacity:1}
.bar__menu{display:none;margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px}
.menu{position:fixed;inset:0;z-index:45;background:var(--bg);padding:100px var(--gut) 40px calc(var(--rail) + var(--gut))}
.menu[hidden]{display:none}
.menu nav a{display:flex;align-items:baseline;gap:16px;font-size:clamp(1.8rem,8vw,2.6rem);line-height:1.3;padding:10px 0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}

/* ---------- strati ---------- */
.layer{position:relative;padding:clamp(120px,16vh,180px) var(--gut) clamp(100px,14vh,160px) calc(var(--rail) + var(--gut))}
.layer>*{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.layer__head{margin-bottom:clamp(48px,7vh,80px)}
.layer__intro{max-width:34em;margin-top:22px;opacity:.8}

/* disegni */
.drawing{position:relative;margin-bottom:clamp(48px,8vh,96px)}
.draw{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.draw path,.draw circle{vector-effect:non-scaling-stroke}
.draw .thin{stroke-width:.6;opacity:.55}
.draw .ground{stroke-width:1.8}
.draw .fill{opacity:.22;color:inherit}
.notes{position:absolute;inset:0;pointer-events:none}
.tag{position:absolute;font-size:10.5px;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity 1.2s .6s}
.tag::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-right:8px;opacity:.6}
.drawing.in .tag{opacity:.75}

/* testi */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px clamp(32px,6vw,96px)}
.entry{padding-top:22px;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.entry h3,.sub{font-weight:400;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.2;margin-bottom:10px}
.entry p{opacity:.8;font-size:17.5px;max-width:34em}

/* tavole fotografiche */
.plates{display:grid;align-items:start;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(72px,11vh,130px);max-width:980px!important;margin-right:0!important}
.plates--wide{max-width:1120px!important}
.plates--one{grid-template-columns:1fr;max-width:820px!important}
.plate{border:1px solid color-mix(in srgb,currentColor 30%,transparent);padding:10px 10px 0}
.plate img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.7) sepia(.18) contrast(1.02)}
.plate figcaption{font-size:10.5px;text-transform:uppercase;padding:10px 2px 11px;opacity:.75;display:flex;gap:14px}
.plate figcaption b{font-weight:400;opacity:.6}
.plate--low{margin-top:clamp(40px,12vh,140px)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- cielo ---------- */
.cielo{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:150px;padding-bottom:clamp(56px,10vh,110px);overflow:hidden}
.cielo__text{position:relative;z-index:2;width:100%}
.cielo__title{font-family:var(--sans);font-weight:300;font-size:clamp(2.3rem,min(4.6vw,8.5vh),4.4rem);line-height:1.1;letter-spacing:-.012em;margin:20px 0 28px;max-width:12em}
.cielo__title .ln{display:inline-block;opacity:0;transform:translateY(.25em);animation:rise 1.6s var(--ease) forwards}
.cielo__title .ln:nth-child(2){animation-delay:.12s}.cielo__title .ln:nth-child(3){animation-delay:.24s}.cielo__title .ln:nth-child(4){animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}
.cielo__sub{max-width:30em;font-size:clamp(1.05rem,1.4vw,1.25rem);opacity:0;animation:fadeIn 1.4s .8s forwards}
@keyframes fadeIn{to{opacity:.8}}
.cielo__hint{position:absolute;right:var(--gut);bottom:clamp(56px,10vh,110px);writing-mode:vertical-rl;max-width:none!important}
.cielo__crane{position:absolute;top:96px;right:0;width:min(73vw,1120px);height:auto;max-width:none!important;opacity:.85}

/* ---------- piano ---------- */
.lead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px clamp(32px,6vw,96px);align-items:end}
.lead p:first-child{grid-row:span 2;opacity:.85;max-width:32em}
.lead .big{font-family:var(--sans);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.008em}
.lead .big span{font-size:.7em;opacity:.6}

/* ---------- fondazioni ---------- */
.fond__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px clamp(40px,7vw,120px);margin-bottom:clamp(56px,9vh,100px)}
.fond__method>p{opacity:.85;margin-bottom:34px;max-width:30em}
.defs div{padding:16px 0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.defs dt{font-size:1.1rem;font-weight:400}
.defs dd{opacity:.7;font-size:16.5px}
.sub--gap{margin-top:48px}
.soa{margin:18px 0 14px;border-top:1px solid currentColor}
.soa th{font-size:1.5rem;font-family:var(--serif);font-weight:400;letter-spacing:0;text-align:left;width:84px;padding:16px 0}
.soa td{padding:16px 12px 16px 0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:16.5px;opacity:.85}
.soa th{border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.soa td:last-child{text-align:right;font-size:1.35rem;opacity:1;white-space:nowrap;padding-right:0}
.iso{margin:18px 0 12px;border-top:1px solid currentColor}
.iso li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:14px 0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);opacity:.9}
.iso b{font-style:normal;font-weight:400;font-size:1.2rem}
.iso span{margin-left:auto;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.06em;opacity:.6}
.fond__draw{opacity:.7}

/* ---------- contatti ---------- */
.contatti{padding-bottom:clamp(90px,12vh,130px)}
.contact{border-top:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.contact li{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.contact li span{font-size:10.5px;text-transform:uppercase;opacity:.6}
.contact li a{font-size:1.2rem;width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.contact li a:hover{background-size:100% 1px}

/* ---------- piè di pagina ---------- */
.foot{border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);padding:30px var(--gut) 34px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1.9;color:color-mix(in srgb,currentColor 62%,transparent)}
.foot__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:16px 40px;align-items:center}
.foot__logo{width:64px;height:auto;fill:var(--fg)}
.foot__right{text-align:right}
.foot a{text-decoration:underline;text-underline-offset:3px}

/* ---------- note legali ---------- */
.legal{padding:150px var(--gut) 110px calc(var(--rail) + var(--gut))}
.legal .wrap{max-width:860px;margin:0 auto}
.legal h1{font-weight:300;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.04;margin:20px 0 48px}
.legal h2{font-weight:400;font-size:1.45rem;margin:44px 0 12px;padding-top:18px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.legal p{margin-bottom:12px;max-width:66ch}
.legal ol{border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.legal ol li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent);font-size:16px}
.legal ol li>span:first-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;padding-top:4px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .back{display:inline-block;margin-top:48px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .bar__nav{gap:20px}
  .lead{grid-template-columns:1fr}
  .lead p:first-child{grid-row:auto}
}
@media (max-width:860px){
  body{font-size:17.5px}
  .bar{height:60px}
  .bar__nav{display:none}
  .bar__menu{display:block}
  .cielo__crane{width:120vw;top:80px;right:-30vw;opacity:.6}
  .cielo__hint{display:none}
  .cols,.fond__grid{grid-template-columns:1fr}
  .contact li{grid-template-columns:1fr;gap:2px}
  .foot__in{grid-template-columns:1fr}
  .foot__right{text-align:left}
  .plates{grid-template-columns:1fr;max-width:none!important}
  .plate--low{margin-top:0}
  .notes{display:none}
  .tag::before{width:10px;margin-right:5px}
  .legal ol li{grid-template-columns:1fr;gap:2px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .cielo__title .ln,.rv{opacity:1;transform:none}
}

/* retini statici sotto i disegni */
.hatch{position:absolute;left:0;top:0;width:100%;height:auto;opacity:.22;pointer-events:none}
.hatch path{fill-rule:nonzero}
.drawing .draw{position:relative;will-change:transform}