/* =========================================================
BLOG E PROGETTI
---------------------------------------------------------
Componenti EPS SiteBlog2026 (blog/) e SiteNews (ultimi-progetti/),
con i moduli di anteprima da appoggiare in pagina.
========================================================= */
/* =========================================================
BLOG — componente SiteBlog2026
---------------------------------------------------------
Vestono i template in components_layouts/layout_blog/:
archivio (.blist/.blc), articolo (.blart), fotogallery
(.blgal), FAQ (.blfaq), indice rubriche (.blrubs) e
anteprima da appoggiare in pagina (.blprev).
Anche qui non si inventano classi dove ce n'e' gia' una:
.blk--coal/bone/orange per i fondi, .grid2/.grid3 per le
celle contigue, .shd per le intestazioni, .cell__k/v/d/n
per la gerarchia interna di una cella, .lnk e .btn per i
rimandi. Sotto c'e' solo cio' che nelle pagine interne non
esisteva: il testo che esce dall'editor HTML (.rt), la
colonna tecnica dell'articolo, il paginatore del
componente e le due o tre alternanze di fondo.
DUE TONI DI COAL, NON COAL E STEEL.
Nelle griglie del blog l'alternanza e' --coal-2 / --coal-3
e lo steel non compare. Motivo misurato: le celle portano
micro-etichette arancio da 11px (.cell__k) e un rimando
.lnk che all'hover diventa arancio. #DE7B23 su --steel
(#474749) sta a 3,07:1 — sotto il 4,5:1 che il testo
piccolo pretende (par. 2 dell'impianto). Sugli stessi
caratteri: 5,93:1 su --coal-2 e 5,44:1 su --coal-3. Le
pagine interne usano lo steel senza problemi perche' li'
ci appoggiano titoli grandi, non etichette.
========================================================= */
.blc--b{background:var(--coal-3)}
/* CELLA DI PAREGGIO.
Le griglie del sito portano il filetto NEL FONDO (gap:1px sopra un
background): finche' le celle riempiono la riga si vede solo il filo,
ma il blog ha un numero di voci che cambia, e con 5 articoli su 2
colonne mezza riga resterebbe del colore del filetto — una lastra
chiara larga mezza pagina. Le celle di pareggio rimettono il fondo
della sezione dove la riga non arriva. Non hanno contenuto, non hanno
padding e sono aria-hidden: sono fondo, non elementi. */
.blvoid{background:var(--coal);min-height:0}
.blvoid--l{background:var(--bone-2)}
/* ---------------------------------------------------------
TESTO REDAZIONALE
.rt e' l'unica classe che veste quello che arriva
dall'editor HTML dell'amministrazione. Dentro puo' esserci
di tutto (h2, p, ul, table, blockquote, img) e nessuno di
quei tag potra' mai avere una classe nostra: le regole
stanno percio' tutte qui, scritte sul tag.
.rt--s e' la versione corta, per descrizioni di rubrica e
risposte delle FAQ: stessa grammatica, un peso in meno.
--------------------------------------------------------- */
.rt{font-size:clamp(15px,1.25vw,17.5px);line-height:1.72}
.rt > *:first-child{margin-top:0}
.rt p{margin:0 0 1.15em}
.rt p:last-child{margin-bottom:0}
.rt h2,.rt h3,.rt h4{
font-variation-settings:'wdth' 106,'wght' 700;
letter-spacing:-.03em;line-height:1.1;margin:1.9em 0 .55em;
}
.rt h2{font-size:clamp(22px,2.2vw,31px)}
.rt h3{font-size:clamp(19px,1.7vw,24px)}
.rt h4{font-size:clamp(16px,1.35vw,19px);font-variation-settings:'wdth' 102,'wght' 700}
.rt b,.rt strong{font-variation-settings:'wdth' 100,'wght' 700}
.rt em,.rt i{font-style:italic}
/* elenchi: il segno e' un quadrato arancio da 6px, lo stesso
della fascia scorrevole, non un pallino di sistema. */
.rt ul,.rt ol{margin:0 0 1.15em;padding-left:0}
.rt ul li{position:relative;padding-left:24px;margin-bottom:.5em}
.rt ul li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--orange)}
.rt ol{counter-reset:rt}
.rt ol li{position:relative;padding-left:34px;margin-bottom:.5em;counter-increment:rt}
.rt ol li::before{
content:counter(rt,decimal-leading-zero);position:absolute;left:0;top:.18em;
font-family:var(--mono);font-size:11px;color:var(--orange);
}
.rt a{border-bottom:1px solid currentColor;transition:color .3s var(--ease)}
.rt a:hover{color:var(--orange)}
.rt blockquote{
margin:1.7em 0;padding:4px 0 4px clamp(18px,2vw,28px);
border-left:3px solid var(--orange);
font-size:clamp(17px,1.6vw,22px);line-height:1.42;letter-spacing:-.02em;
font-variation-settings:'wdth' 102,'wght' 500;
}
.rt img{margin:1.7em 0;max-width:100%;height:auto}
.rt figure{margin:1.7em 0}
.rt figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;line-height:1.6;opacity:.6}
.rt hr{border:0;border-top:1px solid var(--line-l);margin:2.2em 0}
/* le tabelle dell'editor non hanno stile: qui prendono la
stessa griglia a filetto da 1px del resto del sito. */
.rt table{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:14.5px}
.rt th,.rt td{padding:12px 14px;border:1px solid var(--line-l);text-align:left;vertical-align:top}
.rt th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.rt pre{overflow:auto;padding:16px 18px;background:var(--coal);color:var(--on-dark);font-family:var(--mono);font-size:12.5px;line-height:1.6;margin:1.7em 0}
.rt code{font-family:var(--mono);font-size:.88em}
.rt--s{font-size:14.5px;line-height:1.66;margin-top:14px}
.rt--s p{margin-bottom:.9em}
/* su carta l'arancio dei link e dei segni va in inchiostro:
#DE7B23 su --bone e' 2,5:1, --orange-ink 5,55:1. */
.blk--bone .rt a:hover,.blk--bone .rt ul li::before,
.blk--bone .rt ol li::before{color:var(--orange-ink)}
.blk--bone .rt ul li::before{background:var(--orange-ink)}
.blk--bone .rt th,.blk--bone .rt td,.blk--bone .rt hr{border-color:var(--line-l)}
/* ---------------------------------------------------------
SCHEDA DELLA RUBRICA (testa dell'archivio filtrato)
Due celle contigue: l'immagine di site_blog_cat e la sua
descrizione. L'immagine non ha cornice — il filetto del
gap la stacca gia' dalla cella accanto.
--------------------------------------------------------- */
/* l'immagine si vede intera (contain) su fondo carta, in un riquadro
di altezza misurata: l'illustrazione ha lo stesso fondo chiaro della
cella, quindi non si legge come "bande". */
.blrub__fig{position:relative;overflow:hidden;padding:clamp(16px,2vw,28px);min-height:clamp(300px,32vw,500px);align-items:center;justify-content:center}
.blrub__fig img{position:absolute;inset:clamp(16px,2vw,28px);width:calc(100% - 2*clamp(16px,2vw,28px));height:calc(100% - 2*clamp(16px,2vw,28px));object-fit:contain}
@media (min-width:901px){
.blrub__g.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.blrub__b{justify-content:center;gap:0}
.blrub__t{
font-size:clamp(34px,4.2vw,64px);line-height:.98;letter-spacing:-.045em;text-transform:uppercase;
font-variation-settings:'wdth' 106,'wght' 720;margin:0 0 clamp(18px,2vw,28px);overflow-wrap:anywhere;
}
.blrub__rt{font-size:clamp(16px,1.25vw,18.5px);line-height:1.62;max-width:56ch}
.blrub__rt p{margin-bottom:.9em}
.blrub__st{
display:flex;flex-wrap:wrap;margin:clamp(24px,2.6vw,36px) 0 0;
border-top:1px solid var(--line-l);
}
.blrub__st > div{flex:1 1 0;min-width:110px;padding:16px 18px 0 0}
.blrub__st > div + div{padding-left:18px;border-left:1px solid var(--line-l)}
.blrub__st dt{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:6px}
.blrub__st dd{margin:0;font-size:clamp(20px,1.7vw,26px);line-height:1.1;letter-spacing:-.03em;font-variation-settings:'wdth' 104,'wght' 700}
.blrub__go{margin-top:clamp(22px,2.4vw,32px);align-self:flex-start;opacity:1;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.01em}
.blrub__aut{align-items:flex-start}
.blaut__img--lg{width:76px;height:76px;object-fit:cover;margin-bottom:18px;border:1px solid var(--line-l)}
/* ---------------------------------------------------------
ARCHIVIO — l'elenco degli articoli
Celle contigue in .grid2 col filetto da 1px: prendono
gratis l'apertura dal filetto di main.js, che apre le
figlie dirette di ogni .grid2/.grid3/.grid4.
La cella non ha padding sua: ce l'hanno il link e la riga
dei rimandi, cosi' il filetto che li divide arriva da un
bordo all'altro invece di fermarsi a meta'.
--------------------------------------------------------- */
.blc{padding:0;display:flex;flex-direction:column}
.blc__a{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--pad);transition:background .35s var(--ease)}
.blc__k{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;
font-family:var(--mono);font-size:11px;letter-spacing:.02em;margin-bottom:22px;
}
.blc__n{color:var(--orange)}
.blc__dt{opacity:.62;font-variant-numeric:tabular-nums}
/* il ritaglio e' fisso: gli articoli arrivano con immagini di
ogni forma e una fila di celle deve restare una fila. */
.blc__fig{margin:0 0 24px;overflow:hidden;background:var(--coal)}
.blc__fig img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s var(--ease-2)}
.blc__t{
font-size:clamp(21px,2vw,29px);line-height:1.08;letter-spacing:-.032em;
font-variation-settings:'wdth' 104,'wght' 700;margin-bottom:14px;
transition:color .3s var(--ease);
}
.blc__d{font-size:14.5px;line-height:1.62;opacity:.78;max-width:46ch}
.blc__go{
margin-top:auto;padding-top:26px;display:inline-flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:11px;letter-spacing:.01em;text-transform:uppercase;
color:var(--orange);
}
.blc__go-a{transition:transform .3s var(--ease)}
.blc__a:hover .blc__t{color:var(--orange)}
.blc__a:hover .blc__fig img{transform:scale(1.04)}
.blc__a:hover .blc__go-a{transform:translateX(6px)}
/* la riga dei rimandi sta FUORI dal link della cella: rubrica
e autore sono destinazioni diverse e due non si possono
annidare. Il filetto sopra e' lo stesso del gap. */
.blc__m{
display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;
padding:18px var(--pad);border-top:1px solid var(--line-d);
}
.blc__min{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.01em;opacity:.55;font-variant-numeric:tabular-nums}
/* firma: ritratto e nome sulla stessa riga di base */
.blaut{display:inline-flex;align-items:center;gap:10px;transition:color .3s var(--ease)}
.blaut__img{width:26px;height:26px;object-fit:cover;flex:0 0 auto;border-radius:50%}
.blaut__t{font-family:var(--mono);font-size:11px;letter-spacing:.01em;opacity:.8}
.blaut:hover{color:var(--orange)}
.blaut:hover .blaut__t{opacity:1}
.blk--bone .blaut:hover{color:var(--orange-ink)}
/* ---------------------------------------------------------
PAGINATORE
Il componente lo stampa da solo al posto di [[NAVIGATOR]]:
sono e, per la pagina in cui
si e', . Quei due
nomi non si possono cambiare — si vestono. Diventano celle
mono quadrate, contigue nello spirito ma staccate, perche'
qui sono bersagli da premere.
--------------------------------------------------------- */
.blnav{
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
padding:clamp(34px,4vw,56px) var(--pad);border-top:1px solid var(--line-d);
}
.blnav__k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);margin:0}
.blnav__l{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.blnav .catalog_navigation,
.blnav .catalog_navigation_selected{
display:inline-flex;align-items:center;justify-content:center;
min-width:44px;height:44px;padding:0 13px;
font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0;
font-variant-numeric:tabular-nums;
border:1px solid var(--line-d);
transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.blnav .catalog_navigation:hover{border-color:var(--orange);color:var(--orange)}
.blnav .catalog_navigation_selected{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
/* ---------------------------------------------------------
ARTICOLO
Stessa gabbia della testata delle pagine interne, senza la
foto di fondo: qui l'immagine vera arriva subito sotto, a
tutta larghezza, e due immagini una sull'altra sarebbero
una di troppo.
--------------------------------------------------------- */
.blart__hd{position:relative;background:var(--coal);color:var(--on-dark);padding-top:var(--hdr);border-bottom:1px solid var(--line-d)}
.blart__hd-in{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
gap:clamp(28px,3.6vw,64px);align-items:end;
padding:clamp(46px,6vh,92px) var(--pad) clamp(34px,4.4vh,62px);
}
.blart__hd .kick{margin-bottom:clamp(20px,2.6vh,34px)}
.blart__up{border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .3s var(--ease)}
.blart__up:hover{color:var(--orange)}
/* il titolo NON va in maiuscolo come .phero__t: quello e' un
titolo di pagina, di due o tre parole. Qui e' una frase, e
in maiuscolo una frase si legge molto piu' lentamente. */
.blart__t{
font-size:clamp(31px,4.6vw,66px);line-height:.98;letter-spacing:-.038em;
font-variation-settings:'wdth' 108,'wght' 800;max-width:20ch;
}
.blart__lead{
font-size:clamp(15px,1.35vw,19.5px);line-height:1.58;max-width:58ch;
margin-top:clamp(20px,2.6vh,32px);color:var(--on-dark-2);
}
/* .phero__d nasce sopra una fotografia e per questo ha il suo
vetro (coal + backdrop-filter). Qui sotto c'e' coal pieno:
il vetro non serve e costerebbe un livello di composizione
in piu' su ogni scroll. */
.blart__d{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.blart__fig{position:relative;background:var(--coal)}
.blart__fig img{width:100%;height:clamp(240px,48vh,580px);object-fit:cover}
.blart__cap{
padding:14px var(--pad);border-bottom:1px solid var(--line-d);
font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.01em;
color:var(--on-dark-2);background:var(--coal);
}
/* corpo: la scheda tecnica a sinistra resta in vista mentre
si legge, il testo scorre a destra. Due celle contigue,
filetto chiaro perche' il fondo qui e' carta. */
.blart__b{display:grid;grid-template-columns:minmax(0,clamp(330px,26vw,420px)) minmax(0,1fr);gap:1px;background:var(--line-l)}
.blart__rail{padding:0}
.blart__rail-in{position:sticky;top:calc(var(--hdr) + 22px);padding:clamp(28px,3.2vw,44px) var(--pad)}
.blart__meta{margin:0}
.blart__meta dt{
font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;
color:var(--orange);margin-top:16px;
}
.blart__meta dt:first-child{margin-top:0}
.blart__meta dd{margin:5px 0 0;font-size:14px;line-height:1.5}
.blart__mono{font-family:var(--mono);font-size:11px;line-height:1.7;word-break:break-all;opacity:.8}
.blart__ml{border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .3s var(--ease)}
.blart__ml:hover{color:var(--orange)}
.blart__doc{
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;
margin-top:26px;padding:16px 18px;border:1px solid var(--line-d);
transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.blart__doc-k{grid-column:1;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange)}
.blart__doc-t{grid-column:1;font-size:13.5px;line-height:1.4;word-break:break-word}
.blart__doc-a{grid-column:2;grid-row:1/3;font-size:18px;transition:transform .3s var(--ease)}
.blart__doc:hover{background:var(--coal);border-color:var(--orange)}
.blart__doc:hover .blart__doc-a{transform:translateY(4px)}
/* condivisione: stessa etichetta arancio delle altre sezioni della
rail (.blart__meta dt), lista puntata di .fase__l per i link. */
.blart__share{margin-top:26px;padding-top:26px;border-top:1px solid var(--line-d)}
.blart__share-k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);margin-bottom:6px}
.blart__share-l{margin:0}
.blart__share-l li{padding:9px 0}
.blart__share-l a{display:block;transition:color .3s var(--ease)}
.blart__share-l a:hover{color:var(--orange)}
/* rail scura: gli altri due link di servizio (indietro al blog,
CTA di contatto) seguono la stessa griglia di .blart__doc ma la
freccia scorre in orizzontale, non in basso, perche' non e' uno
scarico di file. La CTA e' l'unica cella arancio della colonna:
stessa logica delle celle .blk--orange nel resto del layout. */
.blart__doc--go .blart__doc-a{transform:none}
.blart__doc--go:hover .blart__doc-a{transform:translateX(-4px)}
.blart__doc--cta{background:var(--orange);color:var(--on-orange);border-color:transparent}
.blart__doc--cta .blart__doc-k{color:inherit;opacity:.82}
.blart__doc--cta:hover{background:var(--coal);color:var(--on-dark);border-color:var(--orange)}
.blart__doc--cta:hover .blart__doc-a{transform:translateX(4px)}
.blart__c{
--spine:56px;--node:11px;--tl:36px;
position:relative;
padding:clamp(34px,4.4vw,72px) calc(var(--spine) + clamp(26px,3.6vw,64px)) clamp(34px,4.4vw,72px) clamp(26px,3.6vw,64px);
}
/* percorso: una linea verticale lega tutti i paragrafi, ognuno
ha il suo nodo quadrato (il quadrato arancio del resto del sito).
L'ultimo paragrafo e' pieno: e' dove il percorso finisce. */
.blart__c .rt{max-width:92ch;position:relative;padding-left:var(--tl)}
.blart__c .rt::before{
content:'';position:absolute;left:calc(var(--node) / 2);top:.9em;bottom:.9em;
width:1px;background:rgba(20,20,22,.3);
}
.blart__c .rt > p{position:relative}
.blart__c .rt > p::before{
content:'';position:absolute;left:calc(var(--tl) * -1);top:.52em;
width:var(--node);height:var(--node);box-sizing:border-box;
border:2px solid var(--orange-ink);background:var(--bone);
}
.blart__c .rt > p:last-child::before{background:var(--orange-ink)}
/* dorso: fascia arancio a filo del bordo destro, taglio obliquo
in alto. Il contenuto interno resta agganciato sotto la testata
mentre si scorre (sticky), l'avanzamento e' scaleY, non height. */
.blart__spine{
position:absolute;top:0;right:0;bottom:0;width:var(--spine);
background:var(--orange);color:var(--on-orange);
clip-path:polygon(0 34px,100% 0,100% 100%,0 100%);
}
.blart__spine-in{
position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));
display:flex;flex-direction:column;align-items:center;gap:18px;
padding:56px 0 28px;
}
.blart__spine-t{
writing-mode:vertical-rl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
flex:0 1 auto;min-height:0;
font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.blart__spine-tr{position:relative;flex:1 1 auto;width:2px;min-height:40px;background:rgba(15,15,17,.25)}
.blart__spine-f{position:absolute;inset:0;background:var(--coal);transform:scaleY(0);transform-origin:top}
.blart__spine-p{font-family:var(--mono);font-size:11px;letter-spacing:.02em}
/* coda dell'articolo: tre celle contigue, stessa grammatica
delle griglie delle pagine interne. Il filetto in cima si
apre da sinistra all'hover — transform, non width. */
.blart__foot{border-top:1px solid var(--line-d)}
.blart__fc{position:relative;transition:color .3s var(--ease)}
.blart__fc::after{
content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange);
transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-2);
}
.blart__fc:hover::after{transform:scaleX(1)}
.blart__fc:hover .cell__v{color:var(--orange)}
.blart__fc.blk--orange::after{background:var(--on-orange)}
.blart__fc.blk--orange:hover .cell__v{color:inherit}
/* ---------------------------------------------------------
FOTOGALLERY (site_blog_img)
Esce dal nostro item.inc.php solo col parametro di modulo
hide_photogallery attivo, che spegne la stampata
dal componente. Senza quel parametro si vedrebbe due volte.
--------------------------------------------------------- */
.blgal__i{padding:0}
.blgal__i img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .7s var(--ease-2)}
.blgal__i a{display:block;overflow:hidden}
.blgal__i a:hover img{transform:scale(1.05)}
.blgal__c{padding:14px var(--pad);font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.01em;color:var(--on-dark-2)}
/* ---------------------------------------------------------
FAQ (site_blog_faqs)
/: apertura, chiusura e tastiera le fa
gia' il browser. Il segno non cambia carattere, RUOTA: la
barra verticale del + si schiaccia in scaleY e resta il -.
Il name="blfaq" (in PHP) rende il gruppo esclusivo — una sola
voce aperta alla volta, la prima di default — sempre a carico
del browser.
Deroga puntuale alla regola 2 (par. 6): qui l'altezza E' il
gesto richiesto — l'apertura del riquadro, non solo il testo
dentro. ::details-content e interpolate-size (impostato su
html) sono il modo nativo, senza JS, di animarla; dove il
browser non li conosce la proprieta' e' ignorata e il blocco
torna al vecchio scatto istantaneo — nessuna rottura.
--------------------------------------------------------- */
.blfaq__l{display:grid;gap:1px;background:var(--line-l)}
.blfaqi{padding:0}
.blfaqi::details-content{
overflow:hidden;height:0;opacity:.01;
transition:height .5s var(--ease-2),opacity .4s var(--ease-2),content-visibility .5s allow-discrete;
}
.blfaqi[open]::details-content{height:auto;opacity:1}
.blfaqi__q{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:18px;
padding:22px var(--pad);cursor:pointer;list-style:none;
transition:background .3s var(--ease);
}
.blfaqi__q::-webkit-details-marker{display:none}
.blfaqi__n{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange-ink);font-variant-numeric:tabular-nums}
.blfaqi__t{
font-size:clamp(16px,1.5vw,20px);line-height:1.3;letter-spacing:-.02em;
font-variation-settings:'wdth' 102,'wght' 600;
}
.blfaqi__i{position:relative;width:14px;height:14px;align-self:center;flex:0 0 auto}
.blfaqi__i::before,.blfaqi__i::after{content:'';position:absolute;background:var(--orange-ink)}
.blfaqi__i::before{left:0;top:6px;width:14px;height:2px}
.blfaqi__i::after{left:6px;top:0;width:2px;height:14px;transition:transform .35s var(--ease)}
.blfaqi[open] .blfaqi__i::after{transform:scaleY(0)}
/* Il tinta hover resta solo sulle voci chiuse: e' l'invito ad
aprire. Su una voce gia' aperta segnerebbe un confine netto
proprio sul bordo del padding di .blfaqi__a, che non condivide
quel fondo — la "cucitura" segnalata a occhio. */
.blfaqi:not([open]) .blfaqi__q:hover{background:var(--bone-2)}
.blfaqi:not([open]) .blfaqi__q:hover .blfaqi__t{color:var(--orange-ink)}
.blfaqi__a{padding:0 var(--pad) 26px;padding-left:calc(var(--pad) + 44px);max-width:78ch}
.blfaqi__a .rt--s{margin-top:0}
@media (prefers-reduced-motion:reduce){
.blfaqi::details-content{transition:none}
}
.blfaq__n{padding:clamp(30px,3.6vw,52px) var(--pad);font-size:14.5px;line-height:1.6;color:var(--on-light-2)}
.blfaq__n .lnk{margin-left:8px;color:var(--on-light)}
/* telefono.css viene dopo: senza questa, al tocco il link andrebbe arancio sul chiaro */
.blfaq__n .lnk:active{color:var(--on-light)}
/* ---------------------------------------------------------
INDICE DELLE RUBRICHE (modulo headings_list)
--------------------------------------------------------- */
.blrubs__c{position:relative;transition:color .3s var(--ease)}
/* stesso filetto che si apre da sinistra della coda articolo */
.blrubs__c::after{
content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange);
transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-2);
}
.blrubs__c:hover::after{transform:scaleX(1)}
.blrubs__fig{display:block;margin-bottom:22px;overflow:hidden;background:var(--coal)}
.blrubs__fig img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s var(--ease-2)}
.blrubs__go{color:var(--orange);opacity:1}
.blrubs__go span{display:inline-block;transition:transform .3s var(--ease)}
.blrubs__c:hover .cell__v{color:var(--orange)}
.blrubs__c:hover .blrubs__fig img{transform:scale(1.04)}
.blrubs__c:hover .blrubs__go span{transform:translateX(6px)}
.blrubs__n{padding:clamp(30px,3.6vw,52px) var(--pad)}
/* ---------------------------------------------------------
ANTEPRIMA DA APPOGGIARE IN PAGINA (modulo articles_preview)
Fondo chiaro: questo blocco sta quasi sempre fra due
sezioni scure, e la carta lo stacca senza aggiungere bordi.
--------------------------------------------------------- */
.blprev__c{position:relative;transition:background .35s var(--ease)}
.blprev__k{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:20px}
.blprev__dt{color:var(--on-light-2);font-variant-numeric:tabular-nums}
.blprev__fig{display:block;margin-bottom:22px;overflow:hidden;background:var(--bone-2)}
.blprev__fig img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s var(--ease-2)}
.blprev__go{color:var(--orange-ink);opacity:1}
.blprev__go span{display:inline-block;transition:transform .3s var(--ease)}
.blprev__c:hover{background:var(--bone-2)}
.blprev__c:hover .cell__v{color:var(--orange-ink)}
.blprev__c:hover .blprev__fig img{transform:scale(1.04)}
.blprev__c:hover .blprev__go span{transform:translateX(6px)}
.blprev__n{padding:clamp(30px,3.6vw,56px) var(--pad);display:flex;justify-content:center}
/* ---------------------------------------------------------
RESPONSIVE DEL BLOG
Le griglie (.grid2/.grid3) collassano da sole: qui c'e'
solo quello che ha una gabbia propria.
--------------------------------------------------------- */
@media (max-width:1180px){
/* la scheda tecnica va sotto al testo e smette di seguire
lo scorrimento: in colonna unica non avrebbe nulla a
fianco a cui restare agganciata. I dati si dispongono
in righe su due colonne, come .ftr__data. */
.blart__b{grid-template-columns:1fr}
.blart__rail{order:2}
.blart__rail-in{position:static}
.blart__meta{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:0 18px;align-items:baseline}
.blart__meta dt{margin-top:12px}
.blart__meta dd{margin-top:12px}
.blart__meta dt:first-child,.blart__meta dt:first-child + dd{margin-top:0}
.blart__hd-in{grid-template-columns:1fr;align-items:start;gap:clamp(26px,4vh,42px)}
.blart__d{max-width:520px;border:1px solid var(--line-d);padding:6px clamp(16px,2vw,22px)}
}
@media (max-width:900px){
/* il dorso si riduce a una barra sottile: resta solo l'avanzamento */
.blart__c{--spine:8px;--tl:28px}
.blart__spine{clip-path:none}
.blart__spine-in{padding:0;gap:0}
.blart__spine-t,.blart__spine-p{display:none}
.blart__spine-tr{width:100%;background:rgba(15,15,17,.18)}
}
@media (max-width:900px){
.blrub__fig img{min-height:clamp(180px,42vw,260px)}
.blc__m{gap:12px 18px}
.blc__min{margin-left:0;width:100%}
.blfaqi__a{padding-left:var(--pad)}
.blfaqi__q{grid-template-columns:auto minmax(0,1fr);gap:12px 14px}
.blfaqi__i{grid-column:2;grid-row:2;justify-self:end;margin-top:6px}
/* .grid2 collassa a una colonna qui sotto: la scacchiera calcolata
in PHP su riga/colonna diventerebbe due coppie di fondo uguale
di fila (posizioni 2-3 chiare, 4-5 scure...). Da telefono si
torna alla semplice alternanza pari/dispari, che in colonna
unica e' anche l'unica che si legge come tale. */
.blist__g .blc:nth-child(odd){background:var(--coal-2)}
.blist__g .blc:nth-child(even){background:var(--coal-3)}
}
@media (max-width:620px){
.blart__fig img{height:clamp(190px,52vw,320px)}
.blart__meta{grid-template-columns:1fr;gap:0}
.blart__meta dd{margin-top:4px}
.blart__meta dt:first-child + dd{margin-top:4px}
.blnav{gap:14px}
.blnav__k{width:100%}
}
/* --- il blog al telefono ----------------------------------
Stesse due regole del resto del sito (sezione IL TELEFONO):
area di tocco da 44px per i rimandi mono, e uno stato
:active al posto di un :hover che sul telefono non esiste.
Stanno qui e non la' sopra per tenere il blog in un pezzo
solo: se un giorno si stacca, si stacca intero. */
@media (pointer:coarse){
.blart__up,.blart__ml,.blaut{position:relative}
.blart__up::before,.blart__ml::before,.blaut::before{
content:'';position:absolute;left:0;right:0;top:50%;
height:44px;transform:translateY(-50%);
}
/* il riquadro delle FAQ e' gia' alto piu' di 60px: non
serve allargarlo, servirebbe solo a sovrapporlo al
vicino, che e' contiguo per disegno. */
}
@media (hover:none){
.blc__a:active{background:var(--coal-3)}
.blc--b .blc__a:active{background:var(--coal-2)}
.blc__a:active .blc__t{color:var(--orange)}
.blc__a:active .blc__go-a{transform:translateX(6px)}
.blrubs__c:active .cell__v{color:var(--orange)}
.blrubs__c:active .blrubs__go span{transform:translateX(6px)}
.blrubs__c:active::after{transform:scaleX(1)}
.blprev__c:active{background:var(--bone-2)}
.blprev__c:active .cell__v{color:var(--orange-ink)}
.blprev__c:active .blprev__go span{transform:translateX(6px)}
.blart__fc:active::after{transform:scaleX(1)}
.blart__fc:active .cell__v{color:var(--orange)}
.blart__fc.blk--orange:active .cell__v{color:inherit}
.blart__doc:active{background:var(--bone-2);border-color:var(--orange-ink)}
.blfaqi:not([open]) .blfaqi__q:active{background:var(--bone-2)}
.blnav .catalog_navigation:active{border-color:var(--orange);color:var(--orange)}
}
/* =========================================================
PROGETTI — componente SiteNews (istanza "Ultimi progetti")
---------------------------------------------------------
Vestono i template in components_layouts/layout_ultimi_progetti/:
archivio (.prjlist/.prjc), scheda progetto (.prjart), fotogallery
(le classi fisse del componente, .eps_photogallery/.eps_photo_img/
.eps_photogallery_label) e anteprima da appoggiare in pagina
(.prjprev).
SiteNews non ha rubriche, autori ne' FAQ come SiteBlog2026: questa
sezione e' percio' piu' corta di quella BLOG, e riusa DI PROPOSITO
gli stessi token generici gia' scritti li' — .blk--coal/bone/orange
per i fondi, .grid2/.grid3 per le celle contigue, .shd per le
intestazioni, .cell__k/v/d/n, .rt per il testo redazionale, .lnk/.btn/
.fase__l per i rimandi, .blvoid per le celle di pareggio e persino
.blnav per il paginatore (le classi catalog_navigation/_selected sono
comunque fisse lato componente, quindi il paginatore del blog e quello
dei progetti finiscono per essere esattamente la stessa cosa vestita
una volta sola). Qui sotto c'e' solo cio' che i progetti hanno di
diverso dagli articoli: niente firma, niente rubrica, una coda a due
celle invece che tre, e la fotogallery generata dal componente stesso
invece che dal template.
Stessa scelta di contrasto del blog: due toni di coal (--coal-2/
--coal-3), non coal e steel, per lo stesso motivo misurato li' (il
rimando arancio da 11px scende sotto 4,5:1 su --steel).
========================================================= */
/* ---------------------------------------------------------
ARCHIVIO — l'elenco dei progetti
Stessa grammatica di .blc: cella senza padding proprio (ce l'hanno
il link e i suoi bordi interni), gap da 1px aperto dal filetto in
list_head, apertura gratis via main.js su .grid2/.grid3.
--------------------------------------------------------- */
.prjc{padding:0;display:flex;flex-direction:column}
.prjc__a{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--pad);transition:background .35s var(--ease)}
.prjc__k{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;
font-family:var(--mono);font-size:11px;letter-spacing:.02em;margin-bottom:22px;
}
.prjc__n{color:var(--orange)}
.prjc__dt{opacity:.62;font-variant-numeric:tabular-nums}
/* il ritaglio e' fisso: i progetti arrivano con immagini di ogni
forma e una fila di celle deve restare una fila. */
.prjc__fig{margin:0 0 24px;overflow:hidden;background:var(--coal)}
.prjc__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .7s var(--ease-2)}
.prjc__t{
font-size:clamp(21px,2vw,29px);line-height:1.08;letter-spacing:-.032em;
font-variation-settings:'wdth' 104,'wght' 700;margin-bottom:14px;
transition:color .3s var(--ease);
}
.prjc__media{margin-bottom:14px}
.prjc__media iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;display:block}
.prjc__d{font-size:14.5px;line-height:1.62;opacity:.78;max-width:46ch}
.prjc__go{
margin-top:auto;padding-top:26px;display:inline-flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:11px;letter-spacing:.01em;text-transform:uppercase;
color:var(--orange);
}
.prjc__go-a{transition:transform .3s var(--ease)}
.prjc__a:hover .prjc__t{color:var(--orange)}
.prjc__a:hover .prjc__fig img{transform:scale(1.04)}
.prjc__a:hover .prjc__go-a{transform:translateX(6px)}
/* riga del sito esterno: fuori dal link della cella, stessa
ragione di .blc__m nel blog (due non si possono annidare). */
.prjc__m{
display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;
padding:18px var(--pad);border-top:1px solid var(--line-d);
}
/* ---------------------------------------------------------
SCHEDA PROGETTO
Stessa gabbia di .blart, senza la colonna "rubrica/autore" nella
testata e senza il terzo rimando in coda (nessuna categoria).
--------------------------------------------------------- */
.prjart__hd{position:relative;background:var(--coal);color:var(--on-dark);padding-top:var(--hdr);border-bottom:1px solid var(--line-d)}
.prjart__hd-in{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
gap:clamp(28px,3.6vw,64px);align-items:end;
padding:clamp(46px,6vh,92px) var(--pad) clamp(34px,4.4vh,62px);
}
.prjart__hd .kick{margin-bottom:clamp(20px,2.6vh,34px)}
.prjart__up{border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .3s var(--ease)}
.prjart__up:hover{color:var(--orange)}
/* il titolo NON va in maiuscolo come .phero__t: quello e' un titolo di
pagina, di due o tre parole. Qui e' il nome di un progetto/cliente,
e in maiuscolo si legge molto piu' lentamente. */
.prjart__t{
font-size:clamp(31px,4.6vw,66px);line-height:.98;letter-spacing:-.038em;
font-variation-settings:'wdth' 108,'wght' 800;max-width:20ch;
}
.prjart__d{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* screenshot del sito, in cima al testo (dentro .prjart__c): una carta
di corredo, non un hero. Contenuta (object-fit:contain) perche' gli
screenshot arrivano quasi sempre alti e stretti e non vanno tagliati,
ma il tetto d'altezza la tiene comunque piu' bassa del testo che
presenta, mai la voce dominante della pagina. Scura di proposito
(coal, come header e rail): un frame chiaro su un fondo bone si
confondeva con la carta intorno, qui invece si stacca da subito
come "finestra" a se'. font-size ripete quello di .rt: il 72ch qui
sotto deve risultare la STESSA larghezza in px del 72ch di .rt,
e ch e' relativo al font-size dell'elemento su cui e' scritto — con
size diversi i due 72ch non coincidono (era il disallineamento
segnalato). */
.prjart__shot{
max-width:72ch;font-size:clamp(15px,1.25vw,17.5px);
margin:0 0 clamp(28px,3.4vw,40px);
border:1px solid var(--line-d);background:var(--coal-2);overflow:hidden;
}
/* barra da finestra di browser: pallini + indirizzo, per far leggere
subito l'immagine come "anteprima di un sito esterno" invece che
come uno screenshot lasciato li' per caso. */
.prjart__shot-bar{
display:flex;align-items:center;gap:10px;
padding:10px 14px;background:var(--coal-3);border-bottom:1px solid var(--line-d);
}
.prjart__shot-dots{display:flex;gap:6px;flex:0 0 auto}
.prjart__shot-dots span{width:8px;height:8px;border-radius:50%;background:var(--on-dark-2);opacity:.55;display:block}
.prjart__shot-url{
flex:1 1 auto;min-width:0;padding:4px 12px;border-radius:20px;
background:var(--coal);font-family:var(--mono);font-size:11px;letter-spacing:.01em;
color:var(--on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prjart__shot img{
display:block;width:100%;height:auto;max-height:420px;
margin:0;object-fit:contain;background:var(--coal-2);
}
.prjart__media{background:var(--coal);border-bottom:1px solid var(--line-d)}
.prjart__media iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;display:block;max-width:1200px;margin:0 auto}
/* corpo: la scheda tecnica a sinistra resta in vista mentre si legge,
il testo scorre a destra. Due celle contigue, filetto chiaro perche'
il fondo qui e' carta. */
.prjart__b{display:grid;grid-template-columns:minmax(0,clamp(330px,26vw,420px)) minmax(0,1fr);gap:1px;background:var(--line-l)}
.prjart__rail{padding:0}
.prjart__rail-in{position:sticky;top:calc(var(--hdr) + 22px);padding:clamp(28px,3.2vw,44px) var(--pad)}
.prjart__meta{margin:0}
.prjart__meta dt{
font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;
color:var(--orange);margin-top:16px;
}
.prjart__meta dt:first-child{margin-top:0}
.prjart__meta dd{margin:5px 0 0;font-size:14px;line-height:1.5}
.prjart__doc{
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;
margin-top:26px;padding:16px 18px;border:1px solid var(--line-d);
transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.prjart__doc-k{grid-column:1;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange)}
.prjart__doc-t{grid-column:1;font-size:13.5px;line-height:1.4;word-break:break-word}
.prjart__doc-a{grid-column:2;grid-row:1/3;font-size:18px;transition:transform .3s var(--ease)}
.prjart__doc:hover{background:var(--coal);border-color:var(--orange)}
.prjart__doc:hover .prjart__doc-a{transform:translateY(4px)}
.prjart__share{margin-top:26px;padding-top:26px;border-top:1px solid var(--line-d)}
.prjart__share-k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);margin-bottom:6px}
.prjart__share-l{margin:0}
.prjart__share-l li{padding:9px 0}
.prjart__share-l a{display:block;transition:color .3s var(--ease)}
.prjart__share-l a:hover{color:var(--orange)}
/* rail scura: gli altri due link di servizio (indietro all'archivio,
CTA di contatto) seguono la stessa griglia di .prjart__doc ma la
freccia scorre in orizzontale, non in basso, perche' non e' uno
scarico di file. La CTA e' l'unica cella arancio della colonna. */
.prjart__doc--go .prjart__doc-a{transform:none}
.prjart__doc--go:hover .prjart__doc-a{transform:translateX(-4px)}
.prjart__doc--cta{background:var(--orange);color:var(--on-orange);border-color:transparent}
.prjart__doc--cta .prjart__doc-k{color:inherit;opacity:.82}
.prjart__doc--cta:hover{background:var(--coal);color:var(--on-dark);border-color:var(--orange)}
.prjart__doc--cta:hover .prjart__doc-a{transform:translateX(4px)}
.prjart__c{
--spine:56px;
position:relative;
padding:clamp(34px,4.4vw,72px) calc(var(--spine) + clamp(26px,3.6vw,64px)) clamp(34px,4.4vw,72px) clamp(26px,3.6vw,64px);
}
.prjart__c .rt{max-width:92ch}
/* form di contatto del componente (contact_form=1 sull'istanza): esce
solo se il parametro e' attivo, quindi ha sempre un titolo proprio
che lo separa dal testo sopra invece di sembrarne la continuazione. */
.prjart__form{margin-top:clamp(34px,4vw,56px);padding-top:clamp(28px,3.2vw,44px);border-top:1px solid var(--line-l);max-width:92ch}
.prjart__form-k{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:18px}
/* coda della scheda: due celle, non tre — SiteNews non ha rubrica ne'
autore da affiancare al rimando verso i contatti. */
.prjart__foot{border-top:1px solid var(--line-d)}
.prjart__fc{position:relative;transition:color .3s var(--ease)}
.prjart__fc::after{
content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange);
transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-2);
}
.prjart__fc:hover::after{transform:scaleX(1)}
.prjart__fc:hover .cell__v{color:var(--orange)}
.prjart__fc.blk--orange::after{background:var(--on-orange)}
.prjart__fc.blk--orange:hover .cell__v{color:inherit}
/* ---------------------------------------------------------
ANTEPRIMA DA APPOGGIARE IN PAGINA (modulo news_preview)
Fondo chiaro, stesse regole di .blprev: questo blocco sta quasi
sempre fra due sezioni scure, e la carta lo stacca senza bordi.
--------------------------------------------------------- */
.prjprev__c{position:relative;transition:background .35s var(--ease)}
.prjprev__k{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:20px}
.prjprev__dt{color:var(--on-light-2);font-variant-numeric:tabular-nums}
.prjprev__fig{display:block;margin-bottom:22px;overflow:hidden;background:var(--bone-2)}
.prjprev__fig img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s var(--ease-2)}
.prjprev__go{color:var(--orange-ink);opacity:1}
.prjprev__go span{display:inline-block;transition:transform .3s var(--ease)}
.prjprev__c:hover{background:var(--bone-2)}
.prjprev__c:hover .cell__v{color:var(--orange-ink)}
.prjprev__c:hover .prjprev__fig img{transform:scale(1.04)}
.prjprev__c:hover .prjprev__go span{transform:translateX(6px)}
.prjprev__n{padding:clamp(30px,3.6vw,56px) var(--pad);display:flex;justify-content:center}
/* ---------------------------------------------------------
RESPONSIVE DEI PROGETTI
Le griglie (.grid2/.grid3) collassano da sole: qui c'e' solo quello
che ha una gabbia propria, stessa impostazione della sezione BLOG.
--------------------------------------------------------- */
@media (max-width:1180px){
.prjart__b{grid-template-columns:1fr}
.prjart__rail{order:2}
.prjart__rail-in{position:static}
.prjart__meta{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:0 18px;align-items:baseline}
.prjart__meta dt{margin-top:12px}
.prjart__meta dd{margin-top:12px}
.prjart__meta dt:first-child,.prjart__meta dt:first-child + dd{margin-top:0}
.prjart__hd-in{grid-template-columns:1fr;align-items:start;gap:clamp(26px,4vh,42px)}
.prjart__d{max-width:520px;border:1px solid var(--line-d);padding:6px clamp(16px,2vw,22px)}
}
@media (max-width:900px){
.prjc__m{gap:12px 18px}
/* .grid2 collassa a una colonna qui sotto: la scacchiera calcolata
in PHP su riga/colonna diventerebbe due coppie di fondo uguale
di fila, esattamente come nel blog (stesso commento in
list_item.inc.php). Da telefono si torna alla semplice
alternanza pari/dispari. */
.prjlist__g .prjc:nth-child(odd){background:var(--coal-2)}
.prjlist__g .prjc:nth-child(even){background:var(--coal-3)}
}
@media (max-width:900px){
/* il dorso si riduce a una barra sottile: resta solo l'avanzamento
(le regole interne sono quelle del blog, .blart__spine-*) */
.prjart__c{--spine:8px}
.prjart__spine{clip-path:none}
}
@media (max-width:620px){
.prjart__shot img{max-height:300px}
.prjart__meta{grid-template-columns:1fr;gap:0}
.prjart__meta dd{margin-top:4px}
.prjart__meta dt:first-child + dd{margin-top:4px}
}
/* --- i progetti al telefono --------------------------------
Stessa regola della sezione BLOG (par. "IL TELEFONO"): area di tocco
da 44px per i rimandi mono, stato :active al posto dell'hover. */
@media (pointer:coarse){
.prjart__up{position:relative}
.prjart__up::before{
content:'';position:absolute;left:0;right:0;top:50%;
height:44px;transform:translateY(-50%);
}
}
@media (hover:none){
.prjc__a:active{background:var(--coal-3)}
.blc--b .prjc__a:active{background:var(--coal-2)}
.prjc__a:active .prjc__t{color:var(--orange)}
.prjc__a:active .prjc__go-a{transform:translateX(6px)}
.prjprev__c:active{background:var(--bone-2)}
.prjprev__c:active .cell__v{color:var(--orange-ink)}
.prjprev__c:active .prjprev__go span{transform:translateX(6px)}
.prjart__fc:active::after{transform:scaleX(1)}
.prjart__fc:active .cell__v{color:var(--orange)}
.prjart__fc.blk--orange:active .cell__v{color:inherit}
.prjart__doc:active{background:var(--bone-2);border-color:var(--orange-ink)}
}