/* Garatelier — foglio di stile del tema.
   Nasce dal prototipo rev12: token, griglia a 12 colonne, guide di impaginazione,
   impronta della lastra, pannello strumenti. Non si modifica a mano su WordPress. */

@font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/newsreader-300.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/newsreader-300-italic.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/newsreader-400.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/newsreader-400-italic.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/newsreader-500.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/newsreader-500-italic.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/montserrat-300.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/montserrat-400.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/montserrat-500.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/montserrat-600.woff2) format('woff2')}

:root{
  color-scheme:light;
  --carta:#F5F2EA; --carta-2:#DFDDD7;
  --carbone:#2A2A28; --carbone-2:#1F1E1C;
  --inchiostro:#030505; --grafite:#54666B;
  --ottanio:#0A5F6B; --ottanio-lum:#5FB2BE;
  --guide-cyan:rgba(0,166,198,.34);
  --guide-magenta:rgba(214,0,160,.42);
  --guide-cyan-d:rgba(78,206,230,.30);
  --guide-magenta-d:rgba(255,74,205,.38);
  --rule-strong:var(--guide-cyan);
  --panel-bg:rgba(245,242,234,.9);
  --panel-bd:rgba(3,5,5,.2);
  --panel-hv:rgba(3,5,5,.055);
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --serif:'Newsreader','Iowan Old Style','Times New Roman',serif;
  --pad:34px;
  --t-micro:10px; --t-meta:11px; --t-body:14px; --t-lede:18.5px;
}
@media(max-width:760px){:root{--pad:20px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[data-anchor]{scroll-margin-top:84px}
body{margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:var(--sans);font-weight:400;font-size:var(--t-body);line-height:1.75;
  letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ottanio);color:var(--carta)}

body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}

/* ---------- guide ---------- */
.rules{position:absolute;inset:0;z-index:0;pointer-events:none;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(12,1fr)}
.rules i{border-left:1px solid var(--guide-cyan);display:block}
.rules i:first-child{border-left:0}
.inv .rules i,.ft .rules i,.grad .rules i{border-left-color:var(--guide-cyan-d)}
@media(max-width:760px){.rules{grid-template-columns:repeat(4,1fr)}.rules i:nth-child(n+5){display:none}}
.mbox{position:absolute;left:var(--pad);right:var(--pad);top:0;bottom:0;z-index:0;pointer-events:none;
  border-left:1px solid var(--guide-magenta);border-right:1px solid var(--guide-magenta)}
.inv .mbox,.ft .mbox,.grad .mbox{border-color:var(--guide-magenta-d)}
.is-first .mbox{top:var(--pad);border-top:1px solid var(--guide-magenta)}
.is-first.inv .mbox,.is-first.grad .mbox{border-top-color:var(--guide-magenta-d)}
.ft .mbox{bottom:var(--pad);border-bottom:1px solid var(--guide-magenta-d)}

/* ---------- impaginato ---------- */
.page{position:relative;z-index:1}
.g{padding:0 var(--pad);display:grid;grid-template-columns:repeat(12,1fr);column-gap:0;position:relative;z-index:1}
@media(max-width:760px){.g{grid-template-columns:repeat(4,1fr);row-gap:26px}.g > *{grid-column:1/5!important}
  /* Le immagini non riempiono tutte i margini: tre larghezze e tre allineamenti
     alternati per posizione, per ritrovare in piccolo il movimento del desktop.
     Restano piene le immagini a 12 colonne (le hero). */
  .g > .plate,.g > .poster{width:87%;justify-self:start}
  .g > .plate:nth-child(even),.g > .poster:nth-child(even){width:78%;justify-self:end}
  .g > .plate:nth-child(3n),.g > .poster:nth-child(3n){width:92%;justify-self:center}
  .g > .plate.c1-12{width:100%;justify-self:stretch}
  /* la prima immagine delle schede — l'opera finita — va fino ai bordi */
  .g > .plate.m-full{width:100%;justify-self:stretch;padding-left:12px;padding-right:12px}
}
.sect{padding:clamp(88px,13vh,190px) 0;position:relative}
.sect--tight{padding:clamp(60px,8vh,110px) 0}
.sect--top{padding-top:calc(var(--pad) + 150px)}
@media(max-width:760px){.sect--top{padding-top:calc(var(--pad) + 130px)}}
.inv{background:var(--carbone);color:var(--carta);position:relative;overflow:hidden}
.inv a{color:var(--ottanio-lum)}
.grad{--gradTop:clamp(24px,3vh,44px);background:var(--carta);position:relative;overflow:hidden}
.grad::before{content:"";position:absolute;left:0;right:0;top:0;z-index:0;background:var(--carbone);
  height:calc(var(--gradTop) + (100vw - var(--pad) * 2 - 24px) * 0.21875)}

.c1-4{grid-column:1/5} .c1-5{grid-column:1/6} .c1-6{grid-column:1/7} .c1-7{grid-column:1/8}
.c1-12{grid-column:1/13} .c4-8{grid-column:4/9} .c4-9{grid-column:4/9} .c4-10{grid-column:4/11}
.c5-12{grid-column:5/13} .c6-12{grid-column:6/13} .c7-12{grid-column:7/13}
.c9-12{grid-column:9/13} .c1-3{grid-column:1/4} .c8-12{grid-column:8/13}
/* Le etichette di sezione stanno nelle prime tre colonne, così non invadono il testo.
   :where() azzera la specificità: è un valore di partenza, non un'imposizione — una
   qualsiasi classe di colonna esplicita (.c9-12, .c1-12…) lo sostituisce. */
:where(.g) > :where(.lbl){grid-column:1/4}
.g > .hd-l{grid-column:1/7} .g > .hd-r{grid-column:7/10}
.hd-l{grid-column:1/7} .hd-r{grid-column:7/10}
@media(max-width:760px){.hd-l,.hd-r{grid-column:1/4!important}}
.pl{padding-left:clamp(14px,1.6vw,26px)}
.pr{padding-right:clamp(14px,1.6vw,26px)}
@media(max-width:760px){.pl,.pr{padding-left:0;padding-right:0}}
.ta-r{text-align:right}
@media(max-width:760px){.ta-r{text-align:left}}

/* ---------- tipografia ---------- */
.lbl{font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grafite);margin:0;line-height:1.6;max-width:none} /* la misura di p{} è per il testo, non per le etichette */
.inv .lbl,.ft .lbl{color:rgba(245,242,234,.58)}
.slash{color:var(--ottanio);margin-right:.7em}
.inv .slash{color:var(--ottanio-lum)}
.xl{font-family:var(--serif);font-weight:300;font-size:clamp(40px,9.4vw,158px);
  line-height:.94;letter-spacing:-.028em;margin:0}
.xl em{font-style:italic;font-weight:300}
.tt{font-family:var(--serif);font-weight:300;font-size:clamp(34px,6.4vw,96px);
  line-height:.98;letter-spacing:-.025em;margin:0}
.tt em{font-style:italic}
.h{font-family:var(--serif);font-weight:300;font-size:clamp(27px,3.5vw,52px);
  line-height:1.1;letter-spacing:-.012em;margin:0 0 .7em;text-wrap:balance}
.h em{font-style:italic}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.1vw,29px);
  line-height:1.2;letter-spacing:-.005em;margin:0 0 .4em}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.7vw,22px);
  line-height:1.25;margin:0 0 .3em}
p{margin:0 0 1.3em;max-width:38em}
p:last-child{margin-bottom:0}
.lede{font-size:var(--t-lede);line-height:1.65;font-weight:300;letter-spacing:0;max-width:30em}
.meta{font-size:var(--t-meta);letter-spacing:.06em;color:var(--grafite);line-height:1.7}
.inv .meta{color:rgba(245,242,234,.64)}
.on-ink{color:rgba(245,242,234,.82)}
.dash{list-style:none;margin:0;padding:0}
.dash li{position:relative;padding-left:18px;margin-bottom:9px;font-size:var(--t-body);line-height:1.6}
.dash li::before{content:"—";position:absolute;left:0;color:var(--ottanio)}
.inv .dash li::before{color:var(--ottanio-lum)}

/* ---------- link ---------- */
.lnk{display:inline-block;font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ottanio);border-bottom:1px solid currentColor;
  padding-bottom:4px;transition:opacity .2s ease;cursor:pointer}
.lnk:hover{opacity:.6}
.lnk--ink{color:var(--inchiostro);border-bottom-color:rgba(3,5,5,.2)}
.lnk--ink:hover{color:var(--ottanio);border-bottom-color:var(--ottanio);opacity:1}
.inv .lnk{color:var(--ottanio-lum)}
.arw{display:inline-block;margin-left:.7em;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.lnk:hover .arw{transform:translateX(4px)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:1px solid var(--ottanio);outline-offset:5px}
.inv a:focus-visible,.ft a:focus-visible,.ft input:focus-visible,.ft button:focus-visible{outline-color:var(--ottanio-lum)}

/* ---------- testata ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:80;padding:var(--pad) var(--pad) 0;
  display:grid;grid-template-columns:repeat(12,1fr);pointer-events:none}
/* La barra di amministrazione di WordPress e' fissa e coprirebbe la testata:
   chi e' collegato la vede scendere di quanto e' alta la barra. Per i visitatori
   non cambia niente. */
body.admin-bar .hd{top:32px}
@media screen and (max-width:782px){body.admin-bar .hd{top:46px}}
@media(max-width:760px){.hd{grid-template-columns:repeat(4,1fr)}}
.hd .brand{grid-column:1/5;display:flex;align-items:center;align-self:start;pointer-events:auto}
.hd .brand .brand-logo{height:var(--brandH,36px);width:auto;flex:none;fill:var(--inchiostro);
  transition:height .3s ease,fill .3s ease}

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.hd.scrolled{--brandH:25px}
.hd.on-dark .brand .brand-logo{fill:var(--carta)}

.hdt{grid-column:8/13;justify-self:end;align-self:start;display:flex;
  align-items:flex-start;gap:10px;pointer-events:none}
.pcol{display:grid;gap:9px;justify-items:end;pointer-events:none}
/* ---------- lingua (It / En) ---------- */
.lang{pointer-events:auto;
  display:flex;border:1px solid var(--panel-bd);background:var(--panel-bg);
  backdrop-filter:saturate(140%) blur(10px);padding:4px;gap:1px;
  transition:background .3s ease,border-color .3s ease}
.lang a{padding:5px 9px;font-size:var(--t-micro);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--inchiostro);opacity:.62;
  transition:opacity .18s ease,background .18s ease,color .3s ease}
.lang a:hover{opacity:1;background:var(--panel-hv)}
.lang a.on{opacity:1;color:var(--ottanio);background:rgba(10,95,107,.09)}
.hd.on-dark .lang{background:rgba(38,38,36,.86);border-color:rgba(245,242,234,.22)}
.hd.on-dark .lang a{color:var(--carta)}
.hd.on-dark .lang a:hover{background:rgba(245,242,234,.09)}
.hd.on-dark .lang a.on{color:var(--ottanio-lum);background:rgba(95,178,190,.14)}
.tools{pointer-events:auto;
  border:1px solid var(--panel-bd);background:var(--panel-bg);
  backdrop-filter:saturate(140%) blur(10px);padding:4px;display:grid;gap:1px;
  transition:background .3s ease,border-color .3s ease}
.hd.on-dark .tools{background:rgba(38,38,36,.86);border-color:rgba(245,242,234,.22)}
.tools a{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:9px;
  padding:5px 11px 5px 5px;font-size:var(--t-micro);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--inchiostro);opacity:.62;white-space:nowrap;
  transition:opacity .18s ease,background .18s ease,color .3s ease}
.tools a svg{width:20px;height:20px;display:block;stroke:currentColor;fill:none;
  stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.tools a:hover{opacity:1;background:var(--panel-hv)}
.tools a.on{opacity:1;color:var(--ottanio);background:rgba(10,95,107,.09)}
.hd.on-dark .tools a{color:var(--carta)}
.hd.on-dark .tools a:hover{background:rgba(245,242,234,.09)}
.hd.on-dark .tools a.on{color:var(--ottanio-lum);background:rgba(95,178,190,.14)}
/* voci del menu in arrivo: stesso disegno delle altre, ma spente e senza link */
.tools .soon-nav{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:9px;
  padding:5px 11px 5px 5px;font-size:var(--t-micro);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--inchiostro);white-space:nowrap;cursor:default;
  transition:color .3s ease}
.tools .soon-nav svg{width:20px;height:20px;display:block;stroke:currentColor;fill:none;
  stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.38}
.tools .soon-nav .sn-t{opacity:.38}
.tools .soon-nav small{font-size:8px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--ottanio);border:1px solid rgba(10,95,107,.45);padding:2px 5px 1px;line-height:1.2}
.hd.on-dark .tools .soon-nav{color:var(--carta)}
.hd.on-dark .tools .soon-nav small{color:var(--ottanio-lum);border-color:rgba(95,178,190,.5)}
.ft-soon{opacity:.55}
.ft-soon small{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ottanio-lum);margin-left:8px}
.tools-tg{display:none;background:none;border:0;cursor:pointer;padding:6px 5px;color:inherit;justify-content:center}
.tools-tg svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.1;
  stroke-linecap:round;transform:rotate(180deg);
  transition:transform .28s cubic-bezier(.22,.61,.36,1)}
@media(max-width:760px){
  .hd{--brandH:26px}
  .hd.scrolled{--brandH:19px}
  /* Logo e pannello sulla STESSA riga: in griglia il marchio occupava tutte e quattro
     le colonne e spingeva il menu in una seconda riga, staccandolo dalla guida magenta.
     In flex ciascuno prende la larghezza che gli serve e il pannello può aprirsi. */
  .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .hd .brand{grid-column:auto;flex:0 1 auto;min-width:0}
  .hdt{flex:none;margin-left:auto;gap:8px;
    transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .28s ease}
  .hd.tuck .hdt{transform:translateX(calc(100% + var(--pad)));opacity:0;pointer-events:none}
  .lang{height:40px;align-items:center}
  .pcol{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .tools{transition:background .3s ease,border-color .3s ease}
  .tools-tg{display:flex;color:var(--inchiostro);opacity:.62}
  .hd.on-dark .tools-tg{color:var(--carta)}
  .tools a{grid-template-columns:20px 0fr;gap:0;padding:5px;
    transition:opacity .18s ease,background .18s ease,color .3s ease,
      grid-template-columns .28s cubic-bezier(.22,.61,.36,1),
      gap .28s cubic-bezier(.22,.61,.36,1),padding .28s cubic-bezier(.22,.61,.36,1)}
  .tools a span{overflow:hidden;opacity:0;transition:opacity .18s ease}
  .tools.is-open a{grid-template-columns:20px 1fr;gap:9px;padding:5px 11px 5px 5px}
  .tools.is-open a span{opacity:1;transition:opacity .28s ease .1s}
  .tools.is-open .tools-tg svg{transform:rotate(0deg)}
  .tools .soon-nav{grid-template-columns:20px 0fr 0fr;gap:0;padding:5px;
    transition:grid-template-columns .28s cubic-bezier(.22,.61,.36,1),
      gap .28s cubic-bezier(.22,.61,.36,1),padding .28s cubic-bezier(.22,.61,.36,1)}
  .tools .soon-nav .sn-t,.tools .soon-nav small{overflow:hidden;opacity:0;transition:opacity .18s ease}
  .tools .soon-nav small{padding-left:0;padding-right:0;border-color:transparent}
  .tools.is-open .soon-nav{grid-template-columns:20px 1fr auto;gap:9px;padding:5px 11px 5px 5px}
  .tools.is-open .soon-nav .sn-t{opacity:.38;transition:opacity .28s ease .1s}
  .tools.is-open .soon-nav small{opacity:1;padding:2px 5px 1px;border-color:rgba(10,95,107,.45);transition:opacity .28s ease .1s}
}

/* ---------- precedente / successivo in coda alle schede ---------- */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);
  border-top:1px solid var(--rule-strong)}
.pn a{padding:clamp(18px,2.6vh,28px) 0 0;display:grid;gap:9px;align-content:start;
  color:inherit;transition:opacity .2s ease;min-width:0}
.pn a:hover{opacity:.6}
.pn .pn-l{font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ottanio)}
.pn .pn-t{font-family:var(--serif);font-size:clamp(17px,1.8vw,23px);line-height:1.28;
  overflow-wrap:break-word}
.pn a:last-child{text-align:right;justify-items:end}
.inv .pn{border-color:var(--guide-cyan-d)}
.inv .pn .pn-l{color:var(--ottanio-lum)}

/* ---------- bottone guide (Ctrl+H) ---------- */
.gbtn{pointer-events:auto;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--panel-bd);background:var(--panel-bg);
  backdrop-filter:saturate(140%) blur(10px);padding:8px 13px;cursor:pointer;
  font:inherit;font-size:var(--t-micro);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--inchiostro);opacity:.62;white-space:nowrap;
  transition:opacity .18s ease,background .3s ease,border-color .3s ease,color .3s ease}
.gbtn:hover{opacity:1}
.gbtn svg{display:none;width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:1.1;stroke-linecap:round}
.gbtn[aria-pressed="true"]{opacity:1;color:var(--ottanio);background:rgba(10,95,107,.09)}
.hd.on-dark .gbtn{background:rgba(38,38,36,.86);border-color:rgba(245,242,234,.22);color:var(--carta)}
.hd.on-dark .gbtn[aria-pressed="true"]{color:var(--ottanio-lum);background:rgba(95,178,190,.14)}
body.guides-off .rules,body.guides-off .mbox{display:none}
@media(max-width:760px){
  /* le regole mobili devono stare DOPO la base: a pari specificità vince l'ultima.
     Da chiuso il menu è largo 40px (icona 20 + padding 6/5 + cornice del pannello 4 + bordi):
     il bottone guide è un quadrato della stessa larghezza. */
  .gbtn{width:40px;height:40px;padding:0}
  .gbtn svg{display:block}
  .gbtn .gt{display:none}
}

/* ---------- graffi ---------- */
.scr{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.scr svg{position:absolute;width:180%;height:auto;min-height:100%;left:-30%;top:0}

/* ---------- apertura home ---------- */
.apertura{padding-top:calc(var(--pad) + 176px);padding-bottom:clamp(26px,3.6vh,50px)}
@media(max-width:760px){.apertura{padding-top:calc(var(--pad) + 150px)}}

/* ---------- lastra ---------- */
.plate{position:relative;margin:0}
.ph{background:var(--carta-2);position:relative;overflow:hidden;
  outline:1px solid rgba(3,5,5,.18);outline-offset:11px}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.inv .ph{outline-color:rgba(245,242,234,.22)}
.grad .ph{outline-color:rgba(150,146,138,.6)}
/* immagine su tutte e 12 le colonne: rientro pari all'offset dell'impronta,
   altrimenti il segno esce dalla safe area magenta */
.plate.c1-12{padding-left:12px;padding-right:12px}
.r--hero{aspect-ratio:16/7} .r--land{aspect-ratio:4/3} .r--tall{aspect-ratio:4/5}
.r--sq{aspect-ratio:1/1}
.ph--map{background:#FBFAF6}
.ph--map .gz-map{position:absolute;inset:0;width:100%;height:100%;display:block} .r--port{aspect-ratio:3/4} .r--wland{aspect-ratio:3/2}
.r--free{aspect-ratio:auto}
.r--free img{height:auto}
/* immagine che tocca la colonna 1 o la 12: rientro pari all'offset dell'impronta */
.ph--ins{margin-left:12px;margin-right:12px}
.cap{margin-top:24px;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--grafite)}
.inv .cap{color:rgba(245,242,234,.45)}

/* ---------- indici ---------- */
.idx{border-top:1px solid var(--rule-strong)}
.idx article{border-bottom:1px solid var(--rule-strong);padding:clamp(28px,4vh,52px) 0;
  display:grid;grid-template-columns:repeat(12,1fr)}
.idx .rn{grid-column:1/2;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(20px,2.2vw,32px);color:var(--ottanio);line-height:1}
.idx .nm{grid-column:2/6;padding-right:24px}
.idx .tx{grid-column:6/12;padding-left:clamp(14px,1.6vw,26px)}
@media(max-width:760px){
  .idx article{grid-template-columns:repeat(4,1fr);gap:10px}
  .idx .rn,.idx .nm,.idx .tx{grid-column:1/5;padding:0}
}
.arch{border-top:1px solid var(--rule-strong)}
.arch a,.arch .r{display:grid;grid-template-columns:repeat(12,1fr);align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--rule-strong);transition:opacity .2s ease}
.arch a:hover{opacity:.55}
.arch .n{grid-column:1/2;font-size:var(--t-micro);letter-spacing:.14em;color:var(--grafite);font-variant-numeric:tabular-nums}
.arch .y{grid-column:2/3;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ottanio);font-variant-numeric:tabular-nums}
.arch .au{grid-column:3/6;font-size:var(--t-body);padding-right:20px}
.arch .ti{grid-column:6/10;font-family:var(--serif);font-size:clamp(17px,1.7vw,23px);
  line-height:1.25;padding-left:clamp(14px,1.6vw,26px)}
.arch .de{grid-column:10/13;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--grafite);text-align:right;padding-left:14px;line-height:1.55;overflow-wrap:break-word}
@media(max-width:760px){
  .arch a,.arch .r{grid-template-columns:repeat(4,1fr);gap:2px 10px;padding:16px 0}
  .arch .n{display:none}
  .arch .y{grid-column:1/2}.arch .au{grid-column:2/5;padding:0}
  .arch .ti{grid-column:1/5;padding:5px 0 0}.arch .de{grid-column:1/5;text-align:left;padding:0}
}

/* ---------- opere ---------- */
/* Le opere non si tagliano: il riquadro le contiene su un fondo di montaggio. */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,56px);align-items:start;padding:0 12px}
@media(max-width:900px){.works{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media(max-width:520px){.works{grid-template-columns:1fr}}
.ph--art{background:var(--carta-2)}
.ph--art img{object-fit:contain}

/* ---------- l'altezza la decide la fotografia ----------
   Il riquadro prende la larghezza della colonna e l'altezza dello scatto: niente
   ritaglio, niente fondo grigio sopra e sotto l'immagine. L'impronta della lastra
   segue il bordo vero della fotografia. Le proporzioni fisse (.r--*) restano dove
   l'immagine non c'è ancora: i segnaposto devono occupare lo spazio che occuperanno. */
.ph:has(> img){aspect-ratio:auto;background:none}
.ph:has(> img) img{width:100%;height:auto;object-fit:fill}
/* finché l'immagine non è arrivata, il riquadro non collassa */
.ph:has(> img:not([src])){aspect-ratio:4/5;background:var(--carta-2)}
.ph:has(> img:not([src])) img{height:100%}
.serie{border-top:1px solid var(--rule-strong);padding-top:22px}
.serie .sn{font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ottanio)}
.serie h3{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,34px);
  line-height:1.15;margin:12px 0 12px}
.work{display:block;color:inherit;transition:opacity .22s ease}
.work:hover{opacity:.62}
.work .wt{font-family:var(--serif);font-size:clamp(17px,1.6vw,22px);line-height:1.25;margin-top:22px}
.work .wm{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--grafite);margin-top:7px}

/* ---------- segnaposto fotografico ---------- */
/* Ogni riquadro dichiara da sé che fotografia ci va: serve a Cecilia per capire
   che cosa manca, e a noi per giudicare l'equilibrio della pagina senza immagini. */
.ph--todo::after{content:attr(data-todo);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:16px;
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(3,5,5,.58);line-height:1.9}
.inv .ph--todo,.grad .ph--todo,.ft .ph--todo{background:#4A4946}
.inv .ph--todo::after,.grad .ph--todo::after{color:rgba(245,242,234,.72)}

/* ---------- indice di pagina (link rapidi nella testata) ---------- */
.jump{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.jump li{border-bottom:1px solid var(--rule-strong)}
.jump a{display:flex;align-items:baseline;gap:14px;padding:10px 0;color:inherit;
  transition:color .2s ease}
.jump a:hover{color:var(--ottanio)}
.jump .jn{flex:none;width:20px;font-size:var(--t-micro);letter-spacing:.14em;
  color:var(--ottanio);font-variant-numeric:tabular-nums}
.jump .jt{font-size:var(--t-body);line-height:1.45}
.jump .jd{margin-left:auto;text-align:right;font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--grafite);padding-left:16px;flex:none}
.inv .jump,.inv .jump li{border-color:var(--guide-cyan-d)}
.inv .jump a{color:rgba(245,242,234,.9)}
.inv .jump a:hover{color:var(--ottanio-lum)}
.inv .jump .jn{color:var(--ottanio-lum)}
.inv .jump .jd{color:rgba(245,242,234,.58)}

/* ---------- accordion (tecniche, e tutto quello che diventerà lungo) ---------- */
.acc{border-top:1px solid var(--rule-strong)}
.acc details{border-bottom:1px solid var(--rule-strong)}
.acc summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:28px minmax(0,1fr) minmax(0,1.1fr) 16px;gap:clamp(14px,2vw,30px);
  align-items:baseline;padding:clamp(18px,2.6vh,26px) 0}
.acc summary::-webkit-details-marker{display:none}
.acc .an{font-size:var(--t-micro);letter-spacing:.14em;color:var(--grafite);font-variant-numeric:tabular-nums}
.acc .at{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.9vw,25px);
  line-height:1.24;margin:0}
.acc .as{font-size:var(--t-body);line-height:1.55;color:var(--grafite)}
.acc summary::after{content:"+";justify-self:end;color:var(--ottanio);font-size:15px;line-height:1}
.acc details[open] summary::after{content:"–"}
.acc .ab{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);padding:0 0 clamp(26px,4vh,44px)}
.acc .ab p{font-size:var(--t-body);line-height:1.75;max-width:38em}
.acc .ab .aimg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px);
  align-content:start;padding:0 12px} /* rientro dell'impronta, serve anche a sinistra su mobile */
/* una fotografia sola prende tutta la colonna: mezza larghezza la farebbe sembrare un residuo */
.acc .ab .aimg > :only-child{grid-column:1/-1}
/* il blocco senza fotografie (la xilografia, finché non ce ne sono) tiene il testo sulla sua colonna */
.acc .ab:not(:has(.aimg)){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.inv .acc,.inv .acc details{border-color:var(--guide-cyan-d)}
.inv .acc .as,.inv .acc .an{color:rgba(245,242,234,.55)}
.inv .acc summary::after{color:var(--ottanio-lum)}
@media(max-width:760px){
  .acc summary{grid-template-columns:22px minmax(0,1fr) 16px;gap:12px}
  .acc .as{grid-column:2/4;padding-top:6px}
  .acc .ab,.acc .ab:not(:has(.aimg)){grid-template-columns:1fr}
}

/* ---------- elenco che si apre sui dettagli (dotazione) ---------- */
.dacc{border-top:1px solid var(--rule-strong)}
.dacc details{border-bottom:1px solid var(--rule-strong)}
.dacc summary{cursor:pointer;list-style:none;display:flex;gap:11px;align-items:baseline;
  padding:11px 0;font-size:var(--t-body);line-height:1.55}
.dacc summary::-webkit-details-marker{display:none}
.dacc summary::before{content:"—";color:var(--ottanio);flex:none}
.dacc summary::after{content:"+";margin-left:auto;padding-left:12px;color:var(--ottanio);
  font-size:13px;line-height:1.2;flex:none}
.dacc details[open] summary::after{content:"–"}
.dacc .dd{padding:0 0 16px 22px;font-size:var(--t-meta);line-height:1.75;
  color:var(--grafite);max-width:34em}
.inv .dacc,.inv .dacc details{border-color:var(--guide-cyan-d)}
.inv .dacc summary{color:rgba(245,242,234,.88)}
.inv .dacc .dd{color:rgba(245,242,234,.6)}
.inv .dacc summary::before,.inv .dacc summary::after{color:var(--ottanio-lum)}

/* ---------- elenco archivio con miniatura ---------- */
.arch--ph a,.arch--ph .r{grid-template-columns:repeat(12,1fr);align-items:center;padding:14px 0}
.arch--ph a,.arch--ph .r{padding:clamp(16px,2vh,24px) 0}
.arch--ph .th{grid-column:1/3;padding-left:8px;padding-right:clamp(14px,1.6vw,26px)}
.arch--ph .th .ph{outline-offset:6px;width:150px;max-width:100%}
.arch--ph .n{grid-column:3/4}
.arch--ph .y{grid-column:4/5}
.arch--ph .au{grid-column:5/7;padding-right:20px}
.arch--ph .ti{grid-column:7/11}
.arch--ph .de{grid-column:11/13}
@media(max-width:760px){
  .arch--ph a,.arch--ph .r{grid-template-columns:repeat(4,1fr);gap:4px 12px;align-items:start}
  .arch--ph .th{grid-column:1/3;padding:0 0 0 8px}
  .arch--ph .th .ph{width:100%}
  .arch--ph .n{display:none}
  .arch--ph .y{grid-column:3/5}
  /* l'autore va SOPRA il titolo, a tutta riga; l'anno resta accanto alla miniatura */
  .arch--ph .au{grid-column:1/5;padding:10px 0 0}
  .arch--ph .ti{grid-column:1/5;padding:2px 0 0}.arch--ph .de{grid-column:1/5;text-align:left;padding:0}
}

/* ---------- fascia di fotografie: griglia su desktop, carosello su mobile ---------- */
.strip{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,30px);align-items:start}
@media(max-width:900px){
  .strip{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .strip > *{flex:0 0 66vw;grid-column:auto!important;scroll-snap-align:start}

}

/* ---------- sfalsamento delle fasce fotografiche ----------
   Tre quote (of1/of2/of3) e tre distanze (gp1/gp2/gp3) da alternare in ordine sparso:
   la griglia resta leggibile ma nessuna immagine è allineata alla precedente. */
.of1{margin-top:0}
.of2{margin-top:clamp(24px,3.4vh,62px)}
.of3{margin-top:clamp(56px,8vh,136px)}
@media(max-width:900px){.of2{margin-top:18px}.of3{margin-top:38px}}
.carou > .of1,.strip > .of1{margin-top:0}
.carou > .of2,.strip > .of2{margin-top:clamp(22px,4vw,56px)}
.carou > .of3,.strip > .of3{margin-top:clamp(48px,9vw,124px)}
.carou > .gp1{margin-right:clamp(4px,.6vw,10px)}
.carou > .gp2{margin-right:clamp(24px,3vw,50px)}
.carou > .gp3{margin-right:clamp(52px,6.4vw,104px)}
@media(max-width:900px){
  .strip > .gp1{margin-right:clamp(2px,1vw,8px)}
  .strip > .gp2{margin-right:clamp(20px,5vw,44px)}
  .strip > .gp3{margin-right:clamp(44px,10vw,86px)}
}

/* ---------- numeri grandi ---------- */
.fig{display:grid;gap:6px}
.fig .fn{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.4vw,78px);
  line-height:.9;letter-spacing:-.02em;color:var(--ottanio)}
.fig .fl{font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--grafite)}
.inv .fig .fn{color:var(--ottanio-lum)}
.inv .fig .fl{color:rgba(245,242,234,.55)}

/* ---------- tappe ---------- */
.step{border-top:1px solid var(--ottanio);padding-top:16px}
.step .sn{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ottanio)}
.step h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,26px);
  line-height:1.22;margin:12px 0 10px}
.inv .step{border-color:var(--ottanio-lum)}
.inv .step .sn{color:var(--ottanio-lum)}

/* ---------- eventi affiancati ---------- */
.evg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.4vw,56px) clamp(24px,3vw,52px);padding:0 12px} /* rientro dell'impronta */
@media(max-width:760px){.evg{grid-template-columns:1fr}}
.evc{color:inherit;border-top:1px solid var(--rule-strong);padding-top:20px;
  transition:opacity .22s ease}
.evc:hover{opacity:.66}
.evc .ed{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,34px);line-height:1;
  letter-spacing:-.015em;margin:14px 0 6px}
.evc h2,.evc h3{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.9vw,24px);line-height:1.22;margin:14px 0 10px}
.evc .em{font-size:var(--t-body);line-height:1.6;color:var(--grafite);max-width:32em}
/* Le immagini degli eventi sono quasi sempre verticali, come il manifesto:
   il testo sta affianco, non sotto. */
.evc{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(16px,1.8vw,30px);align-items:start}
.evc .evm{padding-left:2px}
.evc .evm img{width:100%;height:auto;display:block}
.evc .evb{min-width:0}
@media(max-width:520px){.evc{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px}}
.inv .evc{border-color:var(--guide-cyan-d)}
.inv .evc .em{color:rgba(245,242,234,.62)}

/* ---------- bottone spento (azione non più disponibile) ---------- */
.btn-off{display:inline-block;border:1px solid var(--rule-strong);color:var(--grafite);
  font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 20px;opacity:.5;pointer-events:none;white-space:nowrap}
.inv .btn-off{border-color:var(--guide-cyan-d);color:rgba(245,242,234,.55)}

/* ---------- modulo in evidenza ---------- */
/* Le guide restano visibili sotto: il pannello è semitrasparente, non le copre. */
/* Il modulo è un pannello di InDesign: scuro (i colori del sito, solo dentro il
   pannello), linguetta in alto, righe icona+etichetta+campo, steppers sulle scelte
   multiple, azione a tutta larghezza in fondo. */
.fpanel{border:1px solid rgba(245,242,234,.16);background:var(--carbone);padding:0;
  color:var(--carta)}
.fpanel .fp-hd{display:flex;justify-content:space-between;align-items:stretch;gap:14px;
  padding:0 12px 0 0;background:var(--carbone-2);
  border-bottom:1px solid rgba(245,242,234,.16)}
.fpanel .fp-hd .fp-tab{display:inline-block;padding:11px 16px 10px;margin-bottom:-1px;
  background:var(--carbone);border-right:1px solid rgba(245,242,234,.16);
  font-size:var(--t-micro);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--carta)}
.fpanel .fp-hd svg{width:14px;height:14px;flex:none;align-self:center;stroke:var(--carta);
  fill:none;stroke-width:1.2;stroke-linecap:round;opacity:.45}
.fpanel .fp-bd{padding:clamp(16px,2vw,26px) clamp(14px,1.8vw,22px)}
.fpanel .fp-bd > .meta{margin-bottom:18px;max-width:38em;color:rgba(245,242,234,.62)}
.fpanel .form{margin-top:0;gap:0}
.fpanel .fr{grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid rgba(245,242,234,.09)}
.fpanel .fr:last-of-type{border-bottom:0}
.fpanel .fr label{display:flex;align-items:center;gap:9px;padding-top:0;
  color:rgba(245,242,234,.62)}
.fpanel .fr label svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.fpanel .fr:has(textarea){align-items:start}
.fpanel .fr:has(textarea) label{padding-top:12px}
.fpanel .fr input,.fpanel .fr textarea,.fpanel .fr select{background:var(--carbone-2);
  border:1px solid rgba(245,242,234,.2);padding:9px 11px;color:var(--carta)}
.fpanel .fr input::placeholder,.fpanel .fr textarea::placeholder{color:rgba(245,242,234,.35)}
.fpanel .fr input:focus,.fpanel .fr textarea:focus,.fpanel .fr select:focus{
  border-color:var(--ottanio-lum);outline:none}
/* scelta multipla con le freccette su/giù, come i campi numerici di InDesign */
.fpanel .sel{display:grid;grid-template-columns:minmax(0,1fr) 20px;min-width:0}
.fpanel .sel select{grid-column:1/2;background-image:none;border-right:0;width:100%}
.fpanel .sel .sp{display:grid;grid-template-rows:1fr 1fr;border:1px solid rgba(245,242,234,.2)}
.fpanel .sel .sp button{background:var(--carbone-2);border:0;cursor:pointer;padding:0;
  color:rgba(245,242,234,.65);display:flex;align-items:center;justify-content:center}
.fpanel .sel .sp button:first-child{border-bottom:1px solid rgba(245,242,234,.2)}
.fpanel .sel .sp button:hover{color:var(--ottanio-lum);background:#242422}
.fpanel .sel .sp svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round}
/* azione a tutta larghezza, come «Adatta layout» */
.fpanel .fbtn--box{display:block;width:100%;border:1px solid rgba(245,242,234,.3);
  background:rgba(245,242,234,.07);color:var(--carta);padding:12px 0;margin:18px 0 0;
  text-align:center;transition:background .2s ease,border-color .2s ease,color .2s ease}
.fpanel .fbtn--box:hover{background:var(--ottanio);border-color:var(--ottanio);color:var(--carta)}
@media(max-width:760px){
  .fpanel .fr{grid-template-columns:1fr;gap:6px;align-items:start}
  .fpanel .fr:has(textarea) label{padding-top:0}
}

/* ---------- evento ---------- */
.poster img{width:100%;outline:1px solid rgba(245,242,234,.22);outline-offset:11px}
/* manifesto ancorato alla prima colonna: stesso rientro delle altre immagini.
   Su mobile .pl/.pr vengono azzerate, quindi il rientro destro va rimesso qui. */
.poster.c1-5,.poster.c1-4{padding-left:12px}
@media(max-width:760px){.poster.c1-5,.poster.c1-4{padding-right:12px}}
.ev-n{font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.8vw,72px);line-height:.94;letter-spacing:-.02em;margin:0}
.tag{display:inline-block;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(245,242,234,.24);padding:6px 11px;color:rgba(245,242,234,.65)}
.tag--l{border-color:rgba(3,5,5,.2);color:var(--grafite)}

/* ---------- diario ---------- */
.pill{display:inline-block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--guide-cyan);color:var(--ottanio);padding:4px 9px;margin:0 6px 6px 0;
  transition:background .2s ease}
.pill:hover,.pill.on{background:rgba(10,95,107,.08)}
.inv .pill{border-color:var(--guide-cyan-d);color:var(--ottanio-lum)}
.post{display:grid;grid-template-columns:repeat(12,1fr);padding:clamp(24px,3.4vh,44px) 0;
  border-bottom:1px solid var(--rule-strong);align-items:start;transition:opacity .2s ease}
.post:hover{opacity:.62}
.post .post-c{grid-column:1/4;padding-left:12px;padding-right:clamp(14px,1.6vw,26px)}
.post .post-b{grid-column:4/11;padding-left:clamp(14px,1.6vw,26px)}
.post .post-d{grid-column:11/13;text-align:right;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grafite)}
@media(max-width:760px){
  .post{grid-template-columns:repeat(4,1fr);gap:14px}
  .post .post-c,.post .post-b,.post .post-d{grid-column:1/5;padding:0;text-align:left}
  .post .post-c{padding:0 12px}
}
.artbody{max-width:none}
.artbody p{font-size:16px;line-height:1.8;max-width:34em;margin-bottom:1.5em}
.artbody h2,.artbody h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.1vw,27px);
  margin:2em 0 .6em;line-height:1.25}
.artbody blockquote{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(20px,2.4vw,30px);line-height:1.3;margin:1.8em 0;padding-left:24px;
  border-left:1px solid var(--ottanio);max-width:22em}

/* ---------- carosello ---------- */
.carou{display:flex;gap:clamp(16px,2vw,30px);overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.carou > *{flex:0 0 clamp(230px,26vw,320px);scroll-snap-align:start}


/* ---------- dati / faq / form ---------- */
.dl{margin:0;border-top:1px solid var(--rule-strong)}
.dl > div{display:grid;grid-template-columns:1fr 2fr;gap:20px;padding:13px 0;border-bottom:1px solid var(--rule-strong)}
.dl dt{font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--grafite)}
.dl dd{margin:0;font-size:var(--t-body);line-height:1.6}
.dl dd a{color:var(--ottanio);border-bottom:1px solid rgba(10,95,107,.3)}
.faq{border-top:1px solid var(--rule-strong)}
.faq details{border-bottom:1px solid var(--rule-strong)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--serif);
  font-size:clamp(17px,1.8vw,23px);display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ottanio);font-family:var(--sans);font-size:15px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .fa{padding:0 0 20px;font-size:var(--t-body);line-height:1.7;color:rgba(3,5,5,.76);max-width:40em}
.form{display:grid;gap:16px;max-width:none}
.fr{display:grid;gap:6px}
.fr label{font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--grafite)}
.fr input,.fr textarea,.fr select{font:inherit;font-size:var(--t-body);background:transparent;
  border:0;border-bottom:1px solid var(--rule-strong);padding:9px 0;color:var(--inchiostro);
  border-radius:0;-webkit-appearance:none;appearance:none}
.fr textarea{min-height:88px;resize:vertical}
.fr select{background-image:linear-gradient(45deg,transparent 50%,var(--ottanio) 50%),linear-gradient(135deg,var(--ottanio) 50%,transparent 50%);
  background-position:calc(100% - 9px) 18px,calc(100% - 4px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.fbtn{justify-self:start;background:none;border:0;border-bottom:1px solid var(--ottanio);
  color:var(--ottanio);font:inherit;font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;padding:0 0 4px;cursor:pointer;margin-top:6px}

/* ---------- widget social ---------- */
.social{border:1px dashed var(--guide-cyan);padding:clamp(26px,4vw,44px);text-align:center}
/* Desktop: una riga di 5 post. Qui il formato non lo decide la fotografia — lo decide
   Instagram: ogni riquadro è 4:5 e l'immagine lo riempie, anche quando lo scatto è una
   storia 9:16 e resta tagliata sopra e sotto. È il contrario di quello che succede alle
   fotografie delle opere, e va bene così: questa è l'anteprima di un profilo. */
.social .sg{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,18px);margin-top:26px}
.social .sg figure{margin:0;aspect-ratio:4/5;background:var(--carta-2);overflow:hidden}
.social .sg img{width:100%;height:100%;object-fit:cover;display:block}
.social .sg i{display:block;aspect-ratio:4/5;background:var(--carta-2)}
@media(max-width:760px){
  .social .sg{grid-template-columns:repeat(3,1fr);gap:8px}
}

/* ---------- pagine di servizio: 404 e coming soon ---------- */
.p404{min-height:86vh;display:flex;flex-direction:column;justify-content:center}
.cs{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-bottom:clamp(60px,9vh,120px)}
.cs-hd{text-align:center}
.cs-mark{width:clamp(210px,27vw,360px);height:auto;display:block;margin:0 auto;fill:var(--carta)}

.cs-name{font-size:clamp(19px,2.4vw,31px);font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--carta);margin:20px 0 0;max-width:none}
.cs-soon{font-size:var(--t-micro);font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ottanio-lum);margin:16px 0 0;max-width:none}
.cs-txt .h{margin-bottom:.5em}
/* la pagina di attesa non ha niente da navigare: via il pannello del menu e il piede */
body.solo .hd,body.solo .ft{display:none}
@media(max-width:760px){
  .cs{min-height:0;padding-top:calc(var(--pad) + 60px)}
  .cs-body{margin-top:clamp(30px,5vh,50px)}
}

/* ---------- piede ---------- */
.ft{background:var(--carbone-2);color:var(--carta);position:relative;overflow:hidden}
.ft .g{position:relative;z-index:1}
.ft a{color:rgba(245,242,234,.8)}
.ft a:hover{color:var(--ottanio-lum)}
.ft .meta{color:rgba(245,242,234,.62)}
.ft ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.ft li{font-size:var(--t-body);line-height:1.6;color:rgba(245,242,234,.8)}
.nl-row{display:flex;border-bottom:1px solid rgba(245,242,234,.28);max-width:400px;margin-top:14px}
.nl-row input{flex:1;background:none;border:0;color:var(--carta);font:inherit;font-size:var(--t-body);padding:9px 0;outline-offset:3px}
.nl-row input::placeholder{color:rgba(245,242,234,.3)}
.nl-row button{background:none;border:0;color:var(--ottanio-lum);font:inherit;font-size:var(--t-micro);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding-left:18px}
.ft-mark{position:absolute;right:-3%;bottom:-14%;width:min(34vw,400px);opacity:.05;pointer-events:none;z-index:0}
.ft-end{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:center;
  padding:20px 0 calc(var(--pad) + 18px);border-top:1px solid rgba(245,242,234,.14);
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:rgba(245,242,234,.55)}
.ft-legal{display:flex;flex-wrap:wrap;align-items:center;gap:9px 26px}
.credit{display:inline-flex;align-items:center;gap:10px;color:rgba(245,242,234,.55);transition:color .2s ease}
.credit:hover{color:rgba(245,242,234,.85)}
.credit img{height:11px;width:auto;display:block;opacity:.5;transition:opacity .2s ease}
.credit:hover img{opacity:1}

/* ---------- lightbox (ogni fotografia) ----------
   Apertura secca su fondo carta, l'impronta della lastra resta sull'immagine.
   La classe .zoom la mette il JavaScript solo sulle immagini che non stanno
   dentro un link: dove c'e' un collegamento, il collegamento vince. */
img.zoom{cursor:zoom-in}
body.lb-aperta{overflow:hidden}
.lb{position:fixed;inset:0;z-index:300;background:var(--carta);
  display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,72px)}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:min(1100px,86vw);text-align:center}
.lb img{max-width:100%;max-height:80vh;width:auto;height:auto;display:block;margin:0 auto;
  outline:1px solid rgba(3,5,5,.22);outline-offset:11px}
.lb figcaption{margin-top:26px;max-width:min(1100px,86vw);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--grafite)}
.lb button{position:absolute;background:none;border:0;cursor:pointer;font:inherit;
  color:var(--inchiostro);font-size:20px;line-height:1;padding:14px;opacity:.55;
  transition:opacity .18s ease}
.lb button:hover{opacity:1}
.lb .lb-x{top:calc(var(--pad) - 8px);right:calc(var(--pad) - 8px)}
.lb .lb-p{left:calc(var(--pad) - 10px);top:50%;transform:translateY(-50%)}
.lb .lb-n{right:calc(var(--pad) - 10px);top:50%;transform:translateY(-50%)}
body.admin-bar .lb{top:32px}
@media screen and (max-width:782px){body.admin-bar .lb{top:46px}}
.lb .lb-i{position:absolute;left:var(--pad);top:var(--pad);font-size:var(--t-micro);
  letter-spacing:.18em;color:var(--grafite);font-variant-numeric:tabular-nums}

/* ---------- card evento minime (home) ---------- */
.evmini{display:grid;gap:16px}
.evmini a{display:grid;gap:6px;border-top:1px solid var(--guide-cyan-d);
  padding-top:14px;color:inherit;transition:opacity .2s ease}
.evmini a:hover{opacity:.62}
.evmini .em-tag{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,234,.58)}
.evmini .em-d{font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.9vw,26px);
  line-height:1;color:var(--carta)}
.evmini .em-t{font-size:var(--t-body);line-height:1.5;color:rgba(245,242,234,.85)}
@media(max-width:760px){
  .evmini{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .evmini a{flex:0 0 62vw;scroll-snap-align:start}

}

@media(max-width:760px){.evaside{margin-top:22px}}

/* ---------- elenco dati su fondo scuro (contatti in home) ---------- */
.ph--map a{display:block;line-height:0;cursor:pointer}

.inv .dl,.inv .dl > div{border-color:var(--guide-cyan-d)}
.inv .dl dt{color:rgba(245,242,234,.58)}
.inv .dl dd{color:var(--carta)}
.inv .dl dd a{color:var(--ottanio-lum);border-color:rgba(95,178,190,.4)}

/* ---------- comparsa ---------- */
.js .rz{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js .rz.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rz{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .arw,.tools a,.tools-tg svg{transition:none!important}
}

/* ---------- router ---------- */
.view{display:block}

/* ---------- sottotitolo sotto al titolo ----------
   Cecilia: «valuterei per le descrizioni sotto ai titoli due punti in più,
   renderli sottotitoli». --t-lede sale da 16,5 a 18,5px e questa classe porta
   lo stesso corpo sulle descrizioni che stanno su fondo scuro. */
.sub{font-size:var(--t-lede);line-height:1.6;font-weight:300;letter-spacing:0;max-width:32em}

/* ---------- galleria: l'immagine è la porta, non la miniatura ----------
   Cecilia sull'archivio in home: «la metterei come galleria, dando più spazio
   all'immagine dell'opera dell'artista, la si schiaccia e si naviga nella pagina
   del progetto realizzato». */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.6vw,48px);align-items:start;padding:0 12px}
/* la variante a quattro, con immagini orizzontali, distingue il diario
   dalla galleria dei progetti: stesso impianto, ritmo diverso */
.gal--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,40px)}
@media(max-width:900px){.gal,.gal--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:520px){.gal,.gal--4{grid-template-columns:1fr}}
.gal a{display:block;color:inherit;transition:opacity .22s ease}
.gal a:hover{opacity:.62}
.gal .gau{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ottanio);margin-top:22px}
.gal .gt{font-family:var(--serif);font-size:clamp(18px,1.7vw,24px);line-height:1.25;margin-top:9px}
.gal .gd{font-size:var(--t-meta);line-height:1.7;color:var(--grafite);margin-top:11px;max-width:28em}
.gal .gm{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--grafite);margin-top:11px;line-height:1.6}
.inv .gal .gau{color:var(--ottanio-lum)}
.inv .gal .gt{color:var(--carta)}
.inv .gal .gm{color:rgba(245,242,234,.6)}

/* ---------- i quattro tempi, ciascuno con la sua fotografia ----------
   Cecilia: «per le foto occhio, non vorrei fosse una ripetizione della pagina
   garatelier. piuttosto il blocco foto lo inserirei per descrivere i 4 tempi». */
.tempi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.2vw,38px);align-items:start;padding:0 12px;
  border-top:1px solid var(--guide-cyan-d)}
.tempi article{padding-top:clamp(22px,3vh,34px)}
.tempi .tn{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(20px,2.2vw,30px);color:var(--ottanio-lum);line-height:1;margin:0}
.tempi .meta{margin:0}
.tempi h3{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.9vw,24px);
  line-height:1.22;margin:14px 0 8px}
@media(max-width:900px){
  .tempi{display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;border-top:0;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .tempi > *{flex:0 0 68vw;scroll-snap-align:start;padding-top:0}

}

/* ---------- «in costruzione»: dichiarato, non offerto ----------
   Le residenze restano scritte come programma, fuori dalle forme attive. */
.soon{border:1px solid var(--guide-cyan);padding:clamp(22px,3vw,34px)}
.soon .st{display:inline-block;font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ottanio);border:1px solid var(--guide-cyan);
  padding:5px 11px;margin-bottom:22px}
.inv .soon{border-color:var(--guide-cyan-d)}
.inv .soon .st{color:var(--ottanio-lum);border-color:var(--guide-cyan-d)}

/* ---------- mappa della rete ----------
   Cecilia: «io qui farei una mappa proprio, un network su piantina tipo infografica».
   Sotto i 900px la piantina lascia il posto all'elenco, che resta la fonte dei dati. */
.netmap{width:100%;height:auto;display:block}
.netmap .nm-city{font-family:var(--sans);font-size:19px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;fill:rgba(245,242,234,.92)}
.netmap .nm-hub{font-family:var(--serif);font-style:italic;font-weight:300;font-size:34px;fill:#5FB2BE}
.netmap .nm-item{font-family:var(--sans);font-size:15px;letter-spacing:.03em;fill:rgba(245,242,234,.62)}
.netmap .nm-note{font-family:var(--sans);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;fill:rgba(245,242,234,.4)}
/* Due tagli della stessa piantina: in orizzontale le sedi portano il loro elenco,
   in verticale restano i nomi e il dettaglio lo dà l'elenco qui sotto. */
.netmap--v{display:none}
@media(max-width:900px){
  .netmap--h{display:none}
  .netmap--v{display:block}
  .netmap--v .nm-city{font-size:15px;letter-spacing:.12em}
  .netmap--v .nm-hub{font-size:23px}
  .netmap--v .nm-note{font-size:10.5px;letter-spacing:.14em}
}


/* ---------- adattamenti per WordPress ----------
   Nel prototipo alcune cose stavano negli attributi; qui vivono nel foglio. */
.ft-mark{fill:var(--carta)}
.hd .brand .brand-logo{height:var(--brandH,36px);width:auto}
/* la pagina di attesa non ha niente da navigare */
body.solo .hd,body.solo .ft{display:none}
/* contenuto scritto nell'editor di WordPress */
.gz-testo > *:first-child{margin-top:0}
.gz-testo a{color:var(--ottanio);border-bottom:1px solid rgba(10,95,107,.3)}
.inv .gz-testo a{color:var(--ottanio-lum);border-bottom-color:rgba(95,178,190,.4)}

/* ==========================================================================
   Gravity Forms vestito come i moduli del prototipo
   --------------------------------------------------------------------------
   Gravity Forms stampa il suo markup e il suo tema («Orbital»). Qui non lo si
   combatte: si tengono i suoi fogli, che gestiscono errori e accessibilita',
   e si riscrive quello che si vede. Due contesti soltanto: il pannello scuro
   delle pagine (.fpanel) e il piede (.ft).
   ========================================================================== */

/* --- il pannello scuro di Studio aperto e Contatti --- */
.fpanel .gform_wrapper{margin:0}
.fpanel .gform_heading{display:none}          /* titolo e descrizione stanno gia' in pagina */
.fpanel .gform_wrapper form{margin:0}
.fpanel .gform-body,.fpanel .gform_body{margin:0}
.fpanel .gform_fields{display:block;grid-template-columns:none;gap:0;margin:0}

.fpanel .gfield{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;
  align-items:center;padding:9px 0;margin:0;border:0;
  border-bottom:1px solid rgba(245,242,234,.09)}
.fpanel .gfield:last-of-type{border-bottom:0}
.fpanel .gfield--type-honeypot,.fpanel .gform_validation_container{display:none!important}

.fpanel .gfield_label,.fpanel legend.gfield_label{grid-column:1/2;margin:0;padding:0;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,242,234,.62);line-height:1.3;float:none}
.fpanel .gfield_required{color:var(--ottanio-lum);font-weight:500}
.fpanel .ginput_container{grid-column:2/3;margin:0;min-width:0}

.fpanel .gfield input[type=text],.fpanel .gfield input[type=email],
.fpanel .gfield textarea,.fpanel .gfield select{
  width:100%;max-width:none;background:var(--carbone-2);
  border:1px solid rgba(245,242,234,.2);border-radius:0;
  padding:9px 11px;color:var(--carta);font:inherit;font-size:var(--t-body);
  box-shadow:none;min-height:0;height:auto}
.fpanel .gfield textarea{min-height:96px;line-height:1.6;resize:vertical}
.fpanel .gfield input::placeholder,.fpanel .gfield textarea::placeholder{color:rgba(245,242,234,.35)}
.fpanel .gfield input:focus,.fpanel .gfield textarea:focus,.fpanel .gfield select:focus{
  border-color:var(--ottanio-lum);outline:none;box-shadow:none}
.fpanel .gfield select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(245,242,234,.5) 50%),
                   linear-gradient(135deg,rgba(245,242,234,.5) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}

/* la riga del testo lungo si allinea in alto, come nel prototipo */
.fpanel .gfield--type-textarea{align-items:start}
.fpanel .gfield--type-textarea .gfield_label{padding-top:12px}

/* il consenso: casella e frase, senza il riquadro del campo */
.fpanel .gfield--type-consent{align-items:start;border-bottom:0;padding-top:16px}
.fpanel .gfield--type-consent legend.gfield_label{padding-top:2px}
.fpanel .ginput_container_consent{display:flex;align-items:flex-start;gap:10px}
.fpanel .ginput_container_consent input[type=checkbox]{appearance:none;-webkit-appearance:none;
  width:15px;height:15px;flex:none;margin:2px 0 0;border:1px solid rgba(245,242,234,.4);
  background:var(--carbone-2);border-radius:0;cursor:pointer;position:relative}
.fpanel .ginput_container_consent input[type=checkbox]:checked{border-color:var(--ottanio-lum)}
.fpanel .ginput_container_consent input[type=checkbox]:checked::after{content:"";position:absolute;
  left:4px;top:0;width:5px;height:10px;border:solid var(--ottanio-lum);border-width:0 1.5px 1.5px 0;
  transform:rotate(42deg)}
.fpanel .gfield_consent_label,.fpanel .ginput_container_consent label{
  font-size:var(--t-micro);line-height:1.6;color:rgba(245,242,234,.62);letter-spacing:0;
  text-transform:none;font-weight:400;margin:0;cursor:pointer}
.fpanel .gfield_consent_label a,.fpanel .ginput_container_consent label a{color:var(--ottanio-lum)}

/* l'azione, a tutta larghezza come «Adatta layout» */
.fpanel .gform-footer,.fpanel .gform_footer{display:block;margin:0;padding:0}
.fpanel .gform_button{display:block;width:100%;border:1px solid rgba(245,242,234,.3);
  border-radius:0;background:rgba(245,242,234,.07);color:var(--carta);
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;padding:12px 0;margin:18px 0 0;text-align:center;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.fpanel .gform_button:hover{background:var(--ottanio);border-color:var(--ottanio);color:var(--carta)}

/* errori e conferma, nella voce del sito */
.fpanel .gform_validation_errors{background:none;border:1px solid var(--ottanio-lum);
  border-radius:0;box-shadow:none;padding:12px 14px;margin:0 0 16px}
.fpanel .gform_validation_errors h2,.fpanel .gform_submission_error{
  font-family:var(--sans);font-size:var(--t-body);font-weight:400;color:var(--carta);margin:0}
.fpanel .gfield_description.validation_message,.fpanel .validation_message{
  grid-column:2/3;background:none;border:0;padding:6px 0 0;margin:0;
  font-size:var(--t-micro);letter-spacing:.04em;color:var(--ottanio-lum)}
.fpanel .gfield_error input,.fpanel .gfield_error textarea,.fpanel .gfield_error select{
  border-color:var(--ottanio-lum)}
.fpanel .gform_confirmation_message{font-size:var(--t-body);line-height:1.7;color:var(--carta);
  max-width:38em}
.fpanel .gform_confirmation_message a{color:var(--ottanio-lum)}

@media(max-width:760px){
  .fpanel .gfield{grid-template-columns:1fr;gap:6px;align-items:start}
  .fpanel .gfield--type-textarea .gfield_label{padding-top:0}
  .fpanel .ginput_container,.fpanel .validation_message{grid-column:1/-1}
}

/* --- il notiziario nel piede: una riga sola, come prima --- */
.ft .gform_wrapper{margin:0}
.ft .gform_heading{display:none}
.ft .gform_fields{display:block;gap:0;margin:0}
.ft .gfield{margin:0;padding:0}
.ft .gfield--type-honeypot,.ft .gform_validation_container{display:none!important}
.ft .gfield--type-email .gfield_label{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.ft .gfield--type-email .ginput_container{border-bottom:1px solid rgba(245,242,234,.28);
  max-width:400px;margin-top:14px}
.ft .gfield input[type=email]{width:100%;background:none;border:0;border-radius:0;
  color:var(--carta);font:inherit;font-size:var(--t-body);padding:9px 0;box-shadow:none;
  outline-offset:3px;min-height:0}
.ft .gfield input[type=email]::placeholder{color:rgba(245,242,234,.3)}
.ft .gfield--type-consent{margin-top:14px;max-width:400px}
.ft .gfield--type-consent legend.gfield_label{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ft .ginput_container_consent{display:flex;align-items:flex-start;gap:9px}
.ft .ginput_container_consent input[type=checkbox]{appearance:none;-webkit-appearance:none;
  width:14px;height:14px;flex:none;margin:2px 0 0;border:1px solid rgba(245,242,234,.4);
  background:none;border-radius:0;cursor:pointer;position:relative}
.ft .ginput_container_consent input[type=checkbox]:checked{border-color:var(--ottanio-lum)}
.ft .ginput_container_consent input[type=checkbox]:checked::after{content:"";position:absolute;
  left:4px;top:0;width:4px;height:9px;border:solid var(--ottanio-lum);border-width:0 1.5px 1.5px 0;
  transform:rotate(42deg)}
.ft .gfield_consent_label{font-size:var(--t-micro);line-height:1.6;letter-spacing:0;
  text-transform:none;color:rgba(245,242,234,.5);cursor:pointer}
.ft .gform-footer,.ft .gform_footer{display:block;margin:0;padding:0;max-width:400px}
.ft .gform_button{background:none;border:0;border-radius:0;color:var(--ottanio-lum);
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;padding:12px 0 0;margin:0}
.ft .gform_button:hover{color:var(--carta)}
.ft .gform_validation_errors{background:none;border:0;box-shadow:none;padding:0;margin:0 0 8px}
.ft .gform_validation_errors h2,.ft .validation_message{font-size:var(--t-micro);
  color:var(--ottanio-lum);background:none;border:0;padding:0;margin:4px 0 0}
.ft .gform_confirmation_message{font-size:var(--t-body);line-height:1.7;
  color:rgba(245,242,234,.8);max-width:400px;margin-top:14px}

/* Il tema «Orbital» di Gravity Forms vince di specificita' su alcune cose:
   qui si insiste solo dove serve, non dappertutto. */
.fpanel .gform_wrapper .gform_footer .gform_button,
.fpanel .gform_wrapper .gform-footer .gform_button{
  background:rgba(245,242,234,.07)!important;color:var(--carta)!important;
  border:1px solid rgba(245,242,234,.3)!important;border-radius:0!important;
  font-family:var(--sans)!important;font-size:var(--t-micro)!important;font-weight:500!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  width:100%!important;padding:12px 0!important;box-shadow:none!important}
.fpanel .gform_wrapper .gform_footer .gform_button:hover,
.fpanel .gform_wrapper .gform-footer .gform_button:hover{
  background:var(--ottanio)!important;border-color:var(--ottanio)!important}
.fpanel .gform_wrapper .gfield textarea{height:132px!important;min-height:0}
.ft .gform_wrapper .gform_footer .gform_button,
.ft .gform_wrapper .gform-footer .gform_button{
  background:none!important;border:0!important;border-radius:0!important;
  color:var(--ottanio-lum)!important;font-family:var(--sans)!important;
  font-size:var(--t-micro)!important;font-weight:500!important;letter-spacing:.2em!important;
  text-transform:uppercase!important;width:auto!important;padding:12px 0 0!important;
  box-shadow:none!important;text-align:left}
.ft .gform_wrapper .gform_footer .gform_button:hover{color:var(--carta)!important}
.ft .gform_wrapper .gfield_consent_label,
.ft .gform_wrapper label.gfield_consent_label,
.ft .gform_wrapper .ginput_container_consent label{
  color:rgba(245,242,234,.75)!important;font-family:var(--sans)!important;
  font-size:var(--t-micro)!important;line-height:1.6!important;font-weight:400!important;
  letter-spacing:0!important;text-transform:none!important;margin:0!important}
.ft .gform_wrapper .gfield_consent_label a{color:var(--ottanio-lum)!important}
.fpanel .gform_wrapper .gfield_consent_label,
.fpanel .gform_wrapper label.gfield_consent_label,
.fpanel .gform_wrapper .ginput_container_consent label{
  color:rgba(245,242,234,.75)!important;font-family:var(--sans)!important;
  font-size:var(--t-micro)!important;line-height:1.6!important;font-weight:400!important;
  letter-spacing:0!important;text-transform:none!important;margin:0!important}
.fpanel .gform_wrapper .gfield_consent_label a{color:var(--ottanio-lum)!important}

/* --- pagine di solo testo (privacy, cookie): il tema le impagina da solo --- */
.gz-testo h2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.2vw,28px);
  line-height:1.25;letter-spacing:0;margin:2.4em 0 .7em}
.gz-testo h2:first-child{margin-top:0}
.gz-testo h3{font-family:var(--sans);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--grafite);margin:2.1em 0 .7em}
.gz-testo p,.gz-testo li{font-size:16px;line-height:1.8;max-width:34em}
.gz-testo ul{margin:0 0 1.4em;padding:0;list-style:none;max-width:34em}
.gz-testo ul li{position:relative;padding-left:20px;margin-bottom:.45em}
.gz-testo ul li::before{content:"";position:absolute;left:0;top:.9em;width:9px;height:1px;
  background:var(--grafite)}
.gz-testo strong{font-weight:500}
.gz-testo hr{border:0;border-top:1px solid var(--rule-strong);margin:2.8em 0;max-width:34em}
.gz-testo .aggiornato{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--grafite);margin-top:2.8em}
/* i due collegamenti nella riga legale del piede si devono vedere che sono tali */
.ft-note a{border-bottom:1px solid rgba(245,242,234,.28);transition:color .2s ease,border-color .2s ease}
.ft-note a:hover{color:var(--ottanio-lum);border-bottom-color:var(--ottanio-lum)}

/* ---------- barra di scorrimento dei caroselli ----------
   Cecilia la vuole sottile e ha ragione: un filo, non un cilindro. Ma un filo
   di tre pixel non si prende col mouse. Allora l'area sensibile e' alta 16px e
   il colore lo dipinge solo la parte centrale: `background-clip: content-box`
   con i bordi trasparenti. Si vede un filo, si afferra una fascia.
   Chi non usa il mouse non se ne accorge: il carosello si trascina anche a mano
   (vedi `.in-mano` in garatelier.js). */
/* Chrome dal 121 in poi: se si dichiara scrollbar-width, la proprieta' standard
   vince su ::-webkit-scrollbar e la barra torna un cilindro di 11px. Quindi la
   riga standard la vede solo chi non conosce ::-webkit-scrollbar, cioe' Firefox. */
@supports not selector(::-webkit-scrollbar){
  .carou,.strip,.evmini,.tempi{scrollbar-width:thin;scrollbar-color:var(--guide-cyan) transparent}
  .inv .carou{scrollbar-color:var(--guide-cyan-d) transparent}
}
.carou::-webkit-scrollbar,
.strip::-webkit-scrollbar,
.evmini::-webkit-scrollbar,
.tempi::-webkit-scrollbar{height:16px}
.carou::-webkit-scrollbar-track,
.strip::-webkit-scrollbar-track,
.evmini::-webkit-scrollbar-track,
.tempi::-webkit-scrollbar-track{background:rgba(10,95,107,.16);background-clip:content-box;
  border-top:7.5px solid transparent;border-bottom:7.5px solid transparent}
.carou::-webkit-scrollbar-thumb,
.strip::-webkit-scrollbar-thumb,
.evmini::-webkit-scrollbar-thumb,
.tempi::-webkit-scrollbar-thumb{background:var(--guide-cyan);background-clip:content-box;
  border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;
  transition:background .18s ease}
.carou::-webkit-scrollbar-thumb:hover,
.strip::-webkit-scrollbar-thumb:hover,
.evmini::-webkit-scrollbar-thumb:hover,
.tempi::-webkit-scrollbar-thumb:hover{background:var(--ottanio)}
.inv .carou::-webkit-scrollbar-track{background:rgba(245,242,234,.14)}
.inv .carou::-webkit-scrollbar-thumb{background:var(--guide-cyan-d)}
.inv .carou::-webkit-scrollbar-thumb:hover{background:var(--ottanio-lum)}

/* il carosello si trascina anche prendendolo per la fotografia.
   La classe .trascinabile la mette il JavaScript solo dove c'e' davvero
   qualcosa da scorrere: su desktop la fascia .strip e' una griglia e sta ferma. */
.trascinabile{cursor:grab}
.trascinabile.in-mano{cursor:grabbing;scroll-snap-type:none;user-select:none}
.trascinabile.in-mano img{pointer-events:none}

/* ---------- «Tracce»: gli artisti selezionati (0.8.0) ----------
   Una scheda per artista: l'opera, il nome, il titolo. «Scopri di più» apre il
   pannello con scheda tecnica, biografia e testo sull'opera. Il pannello prende
   tutta la riga sotto la scheda che l'ha aperto: con grid dense le schede che
   seguono risalgono a riempire la riga. Markup: pagine_wp/artisti/. */
.awg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;
  gap:clamp(44px,6vh,78px) clamp(26px,3vw,56px);align-items:start;padding:0 12px} /* rientro dell'impronta */
@media(max-width:900px){.awg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.awg{grid-template-columns:1fr;gap:52px}}
.aw{min-width:0;position:relative}
.aw-f{margin:0}
/* la linea di base: ogni opera sta in un'area 4:5, appoggiata in basso a sinistra.
   Il riquadro .ph prende la larghezza calcolata sulla proporzione vera (--w, dal
   markup), quindi l'impronta segue il bordo della fotografia: niente ritaglio,
   niente fondo. Su telefono l'area fissa sparisce: le larghe vanno a tutta colonna,
   le alte restano entro i 5/4 della larghezza. */
.aw-box{aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:flex-start}
.aw-ph{width:var(--w,100%);flex:none}
.aw-ph img{width:100%;height:auto}
@media(max-width:760px){.aw-box{aspect-ratio:auto;display:block}}
.aw-t{margin-top:30px;border-top:1px solid var(--rule-strong);padding-top:14px;
  display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px}
.aw-n{grid-row:1/4;font-size:var(--t-micro);letter-spacing:.14em;color:var(--ottanio);
  font-variant-numeric:tabular-nums;margin:0;line-height:2.3}
.aw-a{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.75vw,24px);line-height:1.2;margin:0}
.aw-o{font-family:var(--serif);font-size:clamp(16px,1.35vw,19px);line-height:1.3;margin:4px 0 0;color:var(--inchiostro)}
.aw-o em{font-style:italic}
.aw-m{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--grafite);
  margin:9px 0 0;line-height:1.6}
.aw-b{grid-column:2;justify-self:start;margin-top:16px;background:none;border:0;
  border-bottom:1px solid rgba(3,5,5,.2);padding:0 0 4px;font-family:var(--sans);
  font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--inchiostro);cursor:pointer;display:inline-flex;gap:.9em;align-items:baseline;
  transition:color .2s ease,border-color .2s ease}
.aw-b[aria-expanded="true"]{color:var(--ottanio);border-bottom-color:var(--ottanio)}
.aw-bi{font-size:13px;line-height:1;letter-spacing:0}
.aw.is-open .aw-t{border-top-color:var(--ottanio)}
/* il pannello: una tavola di InDesign, semitrasparente sulle guide */
.aw-p{grid-column:1/-1;position:relative;margin-top:calc(clamp(44px,6vh,78px) * -0.45);
  border:1px solid var(--panel-bd);background:var(--panel-bg)}
.aw-p[hidden]{display:none}
/* 0.8.1: i bottoni delle schede non prendono i colori di Hello Elementor
   (sfondo #c36 e angoli tondi in hover e in focus). Si comportano come .lnk:
   l'hover abbassa l'opacità e basta. Il prefisso .awg serve a vincere sul reset
   del tema padre qualunque sia l'ordine dei fogli. Lo stato aperto resta ottanio. */
.awg .aw-b,.awg .aw-b:hover,.awg .aw-b:focus,.awg .aw-b:active,
.awg .aw-nav button,.awg .aw-nav button:hover,.awg .aw-nav button:focus,.awg .aw-nav button:active{
  background:transparent;border-radius:0;box-shadow:none;text-decoration:none}
.awg .aw-b{transition:opacity .2s ease}
.awg .aw-b:hover,.awg .aw-b:focus,.awg .aw-b:active{color:var(--inchiostro);border-bottom-color:rgba(3,5,5,.2)}
.awg .aw-b:hover{opacity:.6}
.awg .aw-b[aria-expanded="true"],.awg .aw-b[aria-expanded="true"]:hover,
.awg .aw-b[aria-expanded="true"]:focus{color:var(--ottanio);border-bottom-color:var(--ottanio)}
.awg .aw-nav button{transition:opacity .2s ease}
.awg .aw-nav button:hover,.awg .aw-nav button:focus,.awg .aw-nav button:active{color:var(--grafite)}
.awg .aw-nav button:hover{opacity:.6}
.awg .aw-nav .x,.awg .aw-nav .x:hover,.awg .aw-nav .x:focus,.awg .aw-nav .x:active{color:var(--inchiostro)}
.awg .aw-b:focus:not(:focus-visible),.awg .aw-nav button:focus:not(:focus-visible){outline:none}
.aw-p:focus{outline:none} /* col mouse il fuoco va sul pannello, senza anello */
/* la tacca punta all'opera che ha aperto il pannello: --x la mette il JavaScript */
.aw-p::before{content:"";position:absolute;top:-7px;left:var(--x,48px);width:12px;height:12px;
  background:var(--carta);border-left:1px solid var(--panel-bd);border-top:1px solid var(--panel-bd);
  transform:rotate(45deg)}
.aw-ph-hd{display:flex;align-items:stretch;justify-content:space-between;
  border-bottom:1px solid var(--panel-bd);background:rgba(3,5,5,.035)}
.aw-tab{display:flex;gap:14px;align-items:baseline;padding:11px 18px 10px;margin:0 0 -1px;max-width:none;
  background:var(--carta);border-right:1px solid var(--panel-bd);white-space:nowrap;min-width:0;overflow:hidden;
  font-size:var(--t-micro);font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.6}
.aw-tab .n{color:var(--ottanio);font-variant-numeric:tabular-nums}
.aw-nav{display:flex;align-items:stretch}
.aw-nav button{background:none;border:0;border-left:1px solid var(--panel-bd);padding:0 16px;
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--grafite);cursor:pointer;transition:color .2s ease,background .2s ease}
.aw-nav .x{font-size:15px;letter-spacing:0;color:var(--inchiostro)}
.aw-pc{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);
  gap:clamp(22px,2.6vw,44px);padding:clamp(24px,3.4vh,40px) clamp(18px,2vw,30px) clamp(30px,4.4vh,52px)}
.aw-pc .lbl{margin-bottom:14px}
.aw-pc p{font-size:var(--t-body);line-height:1.78;max-width:36em;margin-bottom:1.1em}
.aw-pc .dl > div{grid-template-columns:1fr 1.7fr;gap:12px;padding:10px 0}
.aw-pc .dl dd{font-size:13px}
.aw-pc .aw-nt{font-size:var(--t-meta);color:var(--grafite);margin:14px 0 0}
.aw-lk{margin-top:20px;display:grid;gap:8px}
.aw-lk a{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ottanio);
  border-bottom:1px solid rgba(10,95,107,.3);justify-self:start;padding-bottom:3px;overflow-wrap:anywhere}
.aw-pc .aw-tr{font-size:var(--t-micro);letter-spacing:.08em;color:var(--grafite);font-style:italic}
@media(max-width:1100px){
  .aw-pc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .aw-pc .aw-c1{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(22px,2.6vw,44px);align-items:start}
  .aw-pc .aw-c1 .lbl{grid-column:1/-1}
  .aw-lk{margin-top:0}
}
@media(max-width:760px){
  .aw-p{margin-top:-26px}
  .aw-pc,.aw-pc .aw-c1{grid-template-columns:1fr}
  .aw-lk{margin-top:18px}
  .aw-nav .t,.aw-tab .nm{display:none}
}
@media(prefers-reduced-motion:no-preference){
  .aw-p:not([hidden]){animation:aw-in .28s ease both}
  @keyframes aw-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* ---------- card evento con due collegamenti (0.8.0) ----------
   Un link non può contenerne un altro: la card è un <article>, il titolo porta un
   collegamento «steso» su tutta la card e «Scopri gli artisti» gli sta sopra. */
.evc--2{position:relative}
.evc--2 .evc-a::after{content:"";position:absolute;inset:0;z-index:1}
.evc--2 .evc-2{position:relative;z-index:2;margin-top:18px}
.evc--2:hover{opacity:1}
.evc--2:has(.evc-a:hover){opacity:.66}
.evc--2 .evc-a:focus-visible{outline:none}
.evc--2:has(.evc-a:focus-visible){outline:1px solid var(--ottanio);outline-offset:8px}

/* ---------- 0.9.0: «Tracce», la serata dell'inaugurazione ----------
   Dodici fotografie in colonne: la larghezza la comanda la colonna, l'altezza
   la fotografia. Ognuna si apre nella lightbox, la didascalia viene dal figcaption. */
.gzs{columns:4 220px;column-gap:clamp(14px,1.8vw,28px);padding:0 12px}
.gzs-f{break-inside:avoid;margin:0 0 clamp(14px,1.8vw,28px)}
.gzs-f .ph img{width:100%;height:auto;display:block}
.gzs-cr{margin-top:clamp(18px,2.4vh,30px);padding:0 12px;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grafite)}
@media(max-width:520px){.gzs{columns:2;column-gap:12px}.gzs-f{margin-bottom:12px}}

/* ---------- 0.9.0: il Diario ---------- */
.gal--4 .ph{margin-bottom:0}
.gal--4 .ph img{width:100%;height:auto;display:block}
.pn > span:empty{display:block}
.artbody a:not(.lnk){color:var(--ottanio);border-bottom:1px solid rgba(10,95,107,.3)}
.artbody a:not(.lnk):hover{opacity:.6}
.artbody .lnk{margin-top:.4em}
.artbody figure{margin:2em 0}
.artbody blockquote p{font-size:inherit;line-height:inherit;margin:0}
.artbody blockquote cite{display:block;margin-top:12px;font-family:var(--sans,inherit);font-style:normal;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--grafite)}