/* =========================================================================
   ALESSIA GANCITANO — foglio di stile unico.
   Un solo carattere (Archivo variabile), bianco e nero, filetti sottili.
   I titoli sono maiuscoli e stretti; le immagini di testata sono retinate
   a punti. Le regole sono in ordine: base, testata, eroe, blocchi, piede.
   ========================================================================= */

/* ---------------------------------------------------------------- BASE */
:root{
  --ink:#111111;
  --ink-2:#6E6E6B;
  --bg:#FFFFFF;
  --sunk:#EFEFEC;
  --line:rgba(17,17,17,.14);
  --line-2:rgba(17,17,17,.08);
  --hd:56px;                       /* altezza della barra fissa */
  --pad:clamp(16px,3.6vw,56px);    /* margine laterale */
  --maxw:1500px;
  --t:clamp(15px,1.1vw,17px);      /* testo corrente */
  --t-sm:clamp(13.5px,.95vw,15px);
  --lab:clamp(10px,.78vw,11.5px);  /* etichette maiuscole */
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f);font-size:var(--t);line-height:1.72;font-weight:400;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;padding-top:var(--hd);
  overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}

/* il maiuscolo stretto: e' la voce dei titoli in tutto il sito */
.u,h1,h2,h3,.wm,.mlink,.lab,.eyebrow,.btn,.foot,.yr,.where,.prize,
.card-t,.next a,.next .lab,.lb-bar button,.strip-bar,.sublab,.entry{
  font-variation-settings:"wdth" 74;
  text-transform:uppercase;letter-spacing:.02em}

h1,h2,h3{margin:0;font-weight:700;line-height:.96;
  font-variation-settings:"wdth" 66}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%}
.mid{max-width:840px;margin:0 auto;padding-inline:var(--pad)}

/* etichettine: sopra le sezioni, nei piedi delle foto */
.lab,.eyebrow,.sublab{
  font-size:var(--lab);font-weight:600;letter-spacing:.18em;
  color:var(--ink-2);margin:0}

/* ------------------------------------------------------------- TESTATA */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hd);
  background:var(--bg);border-bottom:1px solid var(--line)}
.hd-in{height:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:18px}
.wm{font-size:clamp(12px,1.05vw,14px);font-weight:700;letter-spacing:.2em;
  text-decoration:none;white-space:nowrap;flex:none}
.burger{display:none}

/* menu in riga: solo da tablet in su */
.mnav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.mlink{font-size:var(--lab);font-weight:600;letter-spacing:.18em;text-decoration:none;
  color:var(--ink);padding:6px 0;border-bottom:1px solid transparent;
  transition:border-color .25s;white-space:nowrap;background:none;border-top:0;
  border-left:0;border-right:0;font-family:inherit;cursor:pointer}
.mlink:hover,.mlink[aria-current]{border-bottom-color:var(--ink)}

/* la tendina dei lavori, sul desktop */
.drop{position:relative}
.drop-p{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:290px;background:var(--bg);border:1px solid var(--line);padding:6px;
  opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;
  box-shadow:0 26px 44px -30px rgba(0,0,0,.5)}
.drop:hover .drop-p,.drop:focus-within .drop-p{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}
.drop-p a{display:block;padding:9px 12px;text-decoration:none;font-size:var(--t-sm);
  font-variation-settings:"wdth" 78;text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;line-height:1.25;transition:background .2s,color .2s}
.drop-p a:hover{background:var(--ink);color:#fff}

/* ---------------------------------------------------- MENU DEL TELEFONO */
@media(max-width:899px){
  :root{--hd:52px}
  .hd-in{gap:12px}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:26px;height:22px;padding:0;border:0;background:none;cursor:pointer;flex:none;
    order:-1}
  .burger span{display:block;height:1.6px;background:var(--ink);
    transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .2s}
  .hd[data-open] .burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .hd[data-open] .burger span:nth-child(2){opacity:0}
  .hd[data-open] .burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
  .wm{margin:0 auto;padding-right:26px}   /* resta al centro ottico */

  /* la tendina: scende da sotto la barra */
  .mnav{position:fixed;left:0;right:0;top:var(--hd);margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:4px var(--pad) 18px;
    max-height:calc(100svh - var(--hd));overflow:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility .28s}
  .hd[data-open] .mnav{opacity:1;visibility:visible;transform:none}
  .mlink{font-size:clamp(15px,4.6vw,19px);letter-spacing:.1em;font-weight:700;
    font-variation-settings:"wdth" 70;padding:15px 0;border-bottom:1px solid var(--line-2);
    text-align:left;width:100%}
  .mlink:hover,.mlink[aria-current]{border-bottom-color:var(--line-2)}
  .drop{position:static}
  .drop-p{position:static;transform:none;opacity:1;visibility:visible;min-width:0;
    border:0;box-shadow:none;padding:6px 0 12px;display:block}
  .drop-p a{padding:9px 0 9px 18px;font-size:var(--t-sm);color:var(--ink-2)}
  .drop-p a:hover{background:none;color:var(--ink)}
}

/* ---------------------------------------------------------------- EROE */
.hero{position:relative;width:100%;overflow:hidden;background:var(--sunk);
  min-height:clamp(300px,58svh,560px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(40px,7vh,90px) var(--pad)}
.hero.tall{min-height:clamp(420px,calc(100svh - var(--hd)),900px)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* un velo appena accennato: serve a far leggere il titolo bianco su qualsiasi foto */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,17,17,.16) 0%,rgba(17,17,17,.30) 60%,rgba(17,17,17,.40) 100%)}
.hero-in{position:relative;z-index:2;text-align:center;max-width:1300px}
.hero-kick{display:block;margin-bottom:clamp(10px,1.6vw,18px);
  font-size:var(--lab);font-weight:700;letter-spacing:.24em;color:#fff;
  font-variation-settings:"wdth" 80;text-transform:uppercase;
  -webkit-text-stroke:.8px rgba(17,17,17,.9);paint-order:stroke fill}
.hero h1{font-size:clamp(34px,8.6vw,124px);font-weight:700;
  font-variation-settings:"wdth" 62;letter-spacing:.005em;text-transform:uppercase;
  line-height:.92;color:#fff;
  -webkit-text-stroke:clamp(1.1px,.17vw,2.4px) rgba(17,17,17,.8);
  paint-order:stroke fill;
  text-shadow:0 8px 34px rgba(0,0,0,.34)}
.hero-sub{margin:clamp(12px,1.8vw,22px) 0 0;font-size:var(--lab);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;
  font-variation-settings:"wdth" 82;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.55)}
/* la freccia tonda in basso, come nelle riviste */
.hero-go{position:absolute;z-index:3;right:clamp(14px,2.4vw,34px);
  bottom:clamp(14px,2.4vw,34px);width:52px;height:52px;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  text-decoration:none;font-size:19px;transition:background .25s,color .25s}
.hero-go:hover{background:var(--ink);color:#fff}

/* --------------------------------------------------------- TESTO GUIDA */
.lede{max-width:760px;margin:0 auto;padding:clamp(34px,6vh,80px) var(--pad) 0;
  text-align:center}
.lede p{margin:0 0 1.05em}
.lede p:last-child{margin-bottom:0}

/* ----------------------------------------------------- GRIGLIA LAVORI */
/* attenzione: solo padding-block, se no si mangia il margine di .wrap */
.sec{padding-block:clamp(34px,6vh,84px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--ink)}
.grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.2vw,46px);
  margin-top:clamp(22px,3vw,40px)}
@media(min-width:760px){.grid{grid-template-columns:1fr 1fr}}
.card{display:block;text-decoration:none}
.card-ph{display:block;overflow:hidden;background:var(--sunk);aspect-ratio:3/2}
.card.tall .card-ph{aspect-ratio:4/5}
.card-ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.card:hover .card-ph img{transform:scale(1.035)}
.card-ft{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:12px;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.card-t{font-size:clamp(16px,1.75vw,25px);font-weight:700;line-height:1.08;
  font-variation-settings:"wdth" 68}
.card-y{font-size:var(--lab);letter-spacing:.18em;color:var(--ink-2);flex:none;
  font-weight:600}
.card:hover .card-t{color:var(--ink-2)}

/* -------------------------------------------------- PAGINE DEI PROGETTI */
.statement{max-width:var(--maxw);margin:0 auto;padding:clamp(34px,6vh,80px) var(--pad) 0;
  display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,44px)}
@media(min-width:900px){
  .statement{grid-template-columns:minmax(0,260px) minmax(0,1fr);
    column-gap:clamp(34px,5vw,80px)}
}
.statement .side{border-top:1px solid var(--ink);padding-top:12px;
  font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}
.statement .side b{display:block;margin-bottom:10px;font-size:var(--lab);
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  font-variation-settings:"wdth" 80}
.statement p{margin:0 0 1.05em}
.statement p:last-child{margin-bottom:0}
.statement .open{font-size:clamp(19px,2.1vw,29px);line-height:1.28;font-weight:600;
  font-variation-settings:"wdth" 82;margin-bottom:.9em}
.statement .dateline{font-size:var(--lab);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;margin-bottom:1.4em}
blockquote{margin:clamp(22px,3vw,34px) 0;padding-left:20px;
  border-left:2px solid var(--ink);font-size:clamp(17px,1.7vw,22px);line-height:1.4;
  font-weight:500;font-variation-settings:"wdth" 88}
blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:var(--lab);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.cta-row{margin-top:clamp(20px,2.6vw,32px)}

/* la fila delle fotografie: si scorre di lato, si clicca per ingrandire */
.strip-wrap{margin-top:clamp(30px,5vh,64px)}
.strip{--sh:clamp(210px,50vh,540px);display:flex;gap:clamp(8px,1vw,16px);
  overflow-x:auto;overflow-y:hidden;padding:0 var(--pad) 12px;
  scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{display:none}
.shot{flex:0 0 auto;height:var(--sh);border:0;background:none;padding:0;margin:0;
  cursor:zoom-in;display:block;scroll-snap-align:center}
.shot img{height:100%;width:auto;max-width:none;transition:opacity .3s}
.shot:hover img{opacity:.82}
.strip-bar{max-width:var(--maxw);margin:14px auto 0;padding-inline:var(--pad);
  display:flex;align-items:center;gap:16px;font-size:var(--lab);letter-spacing:.18em;
  color:var(--ink-2);font-weight:600}
.track{flex:1;height:1px;background:var(--line);position:relative;min-width:60px}
.track i{position:absolute;left:0;top:-1px;height:3px;background:var(--ink);width:18%;
  transition:left .18s linear}
.strip-bar .arr{display:flex;gap:8px}
/* la scritta cambia a seconda che ci sia un mouse o un dito */
.hint-dito{display:none}
@media (hover:none){
  .hint-mouse{display:none}
  .hint-dito{display:inline}
}
.strip-bar button{font:inherit;letter-spacing:.18em;text-transform:uppercase;
  font-variation-settings:"wdth" 80;font-weight:600;background:transparent;color:var(--ink);
  border:1px solid var(--line);padding:9px 13px;cursor:pointer;
  transition:background .22s,color .22s}
.strip-bar button:hover{background:var(--ink);color:#fff}

/* il passaggio al progetto seguente */
.next{max-width:var(--maxw);margin:clamp(34px,6vh,80px) auto 0;padding-inline:var(--pad);
  border-top:1px solid var(--ink);padding-top:18px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.next .lab{font-size:var(--lab);letter-spacing:.18em;color:var(--ink-2);font-weight:600}
.next a{text-decoration:none;font-size:clamp(17px,2vw,27px);font-weight:700;
  font-variation-settings:"wdth" 68;line-height:1.05}
.next a:hover{color:var(--ink-2)}
.next .sp{margin-left:auto}
.next .sp a{font-size:var(--lab);letter-spacing:.18em;font-weight:600;
  font-variation-settings:"wdth" 80;text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------------------ BIOGRAFIA */
.studio{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,56px)}
@media(min-width:900px){.studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.studio p{margin:0 0 1.05em}
.sublab{margin-top:clamp(22px,3vw,34px)}
.entries{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.entry{display:inline-block;text-decoration:none;font-size:var(--lab);font-weight:600;
  letter-spacing:.18em;border:1px solid var(--line);padding:9px 14px;
  transition:background .22s,color .22s}
.entry:hover{background:var(--ink);color:#fff}

.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.tl li{display:grid;grid-template-columns:86px 1fr;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line-2)}
.tl .yr{font-size:var(--lab);letter-spacing:.14em;color:var(--ink-2);font-weight:600;
  padding-top:3px}
.tl h3{font-size:var(--t-sm);font-weight:700;line-height:1.25;margin-bottom:3px;
  font-variation-settings:"wdth" 78}
.tl p{margin:0;font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}

.cvlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.cvlist li{display:grid;grid-template-columns:1fr;gap:6px;padding:16px 0;
  border-bottom:1px solid var(--line-2)}
@media(min-width:820px){
  .cvlist li{grid-template-columns:88px 1fr 260px;gap:26px;align-items:baseline}
}
.cvlist .yr{font-size:var(--lab);letter-spacing:.14em;color:var(--ink-2);font-weight:600}
.cvlist .ttl{font-size:var(--t-sm);font-weight:700;line-height:1.3;
  font-variation-settings:"wdth" 78;text-transform:uppercase;letter-spacing:.02em}
.cvlist .ttl small{display:block;margin-top:6px;font-size:var(--t-sm);font-weight:400;
  line-height:1.55;color:var(--ink-2);text-transform:none;letter-spacing:0;
  font-variation-settings:"wdth" 100}
.cvlist .where{font-size:var(--lab);letter-spacing:.14em;color:var(--ink-2);
  font-weight:600;line-height:1.6}
.cvlist .where a{text-decoration:underline;text-underline-offset:3px}
.prize{display:inline-block;margin-right:9px;padding:3px 8px;background:var(--ink);
  color:#fff;font-size:var(--lab);letter-spacing:.14em;font-weight:600;
  vertical-align:middle}

.skills{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,44px)}
@media(min-width:760px){.skills{grid-template-columns:1fr 1fr}}
.skills h3{font-size:var(--t-sm);font-weight:700;letter-spacing:.06em;
  font-variation-settings:"wdth" 78;margin-bottom:8px}
.skills ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.skills li{padding:9px 0;border-bottom:1px solid var(--line-2);font-size:var(--t-sm);
  line-height:1.5}

/* ------------------------------------------------------------- CONTATTI */
.big-rows{max-width:var(--maxw);margin:0 auto;padding:clamp(30px,5vh,70px) var(--pad) 0}
.big-rows a{display:grid;grid-template-columns:1fr;gap:3px;
  padding:clamp(14px,1.8vw,22px) 0;border-top:1px solid var(--line);
  text-decoration:none;transition:padding-left .3s cubic-bezier(.16,1,.3,1)}
@media(min-width:700px){
  .big-rows a{grid-template-columns:minmax(120px,17%) 1fr;gap:18px;align-items:baseline}
}
.big-rows a:last-child{border-bottom:1px solid var(--line)}
.big-rows a:hover{padding-left:10px}
.big-rows .k{font-size:var(--lab);letter-spacing:.18em;color:var(--ink-2);font-weight:600;
  text-transform:uppercase;font-variation-settings:"wdth" 80}
.big-rows .v{font-size:clamp(18px,2.4vw,34px);font-weight:700;line-height:1.1;
  font-variation-settings:"wdth" 72;text-transform:uppercase;letter-spacing:.01em;
  word-break:break-word}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;
  text-decoration:none;font-size:var(--lab);letter-spacing:.18em;font-weight:600;
  border:1px solid var(--ink);transition:background .22s,color .22s}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:transparent;color:var(--ink)}
.btn:not(.btn-solid):hover{background:var(--ink);color:#fff}

/* ------------------------------------------------------------------ PIEDE */
footer{background:var(--ink);color:#fff;margin-top:clamp(40px,7vh,96px);
  padding:clamp(36px,6vh,84px) 0 clamp(26px,4vh,48px)}
footer .in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.f-big{font-size:clamp(30px,6vw,84px);font-weight:700;line-height:.94;
  font-variation-settings:"wdth" 62;text-transform:uppercase;margin:0 0 clamp(22px,3vw,44px)}
.f-rows{display:grid;gap:0;margin-bottom:clamp(22px,3vw,40px)}
.f-rows a{display:grid;grid-template-columns:1fr;gap:2px;padding:13px 0;
  border-top:1px solid rgba(255,255,255,.28);text-decoration:none;color:#fff;
  transition:padding-left .3s cubic-bezier(.16,1,.3,1)}
@media(min-width:700px){
  .f-rows a{grid-template-columns:minmax(110px,16%) 1fr;gap:16px;align-items:baseline}
}
.f-rows a:last-child{border-bottom:1px solid rgba(255,255,255,.28)}
.f-rows a:hover{padding-left:10px}
.f-rows .k{font-size:var(--lab);letter-spacing:.18em;font-weight:600;
  color:rgba(255,255,255,.62);text-transform:uppercase;font-variation-settings:"wdth" 80}
.f-rows .v{font-size:clamp(15px,1.7vw,22px);font-weight:600;
  font-variation-settings:"wdth" 80;text-transform:uppercase;letter-spacing:.04em;
  word-break:break-word}
.foot{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--lab);letter-spacing:.16em;
  color:rgba(255,255,255,.62);font-weight:600}
.foot .sp{margin-left:auto}

/* --------------------------------------------------------- INGRANDIMENTO */
.lb{position:fixed;inset:0;z-index:90;background:var(--bg);
  display:flex;flex-direction:column;padding:clamp(12px,2vw,26px);
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.lb[data-open]{opacity:1;visibility:visible}
.lb-stage{flex:1;min-height:0;position:relative;overscroll-behavior:contain}
.lb-stage img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;
  width:auto;height:auto}
.lb-bar{display:flex;align-items:center;gap:14px;padding-top:14px;
  font-size:var(--lab);letter-spacing:.18em;color:var(--ink-2);font-weight:600}
.lb-bar .sp{margin-left:auto;display:flex;gap:8px}
.lb-bar button{font:inherit;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  font-variation-settings:"wdth" 80;background:transparent;color:var(--ink);
  border:1px solid var(--line);padding:9px 13px;cursor:pointer;
  transition:background .22s,color .22s}
.lb-bar button:hover{background:var(--ink);color:#fff}
body[data-lb]{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .strip{scroll-behavior:auto}
}


/* =========================================================================
   TEMA GIALLO — la carta del sito e' un giallo smorzato con il retino a
   punti sopra, le testate sono dello stesso giallo, il piede resta nero.
   Si spegne cambiando TEMA in build.py.
   ========================================================================= */
body[data-tema="giallo"]{
  --giallo:#DEC45C;          /* la carta */
  --giallo-2:#D4B94C;        /* un tono sotto: fondo delle immagini */
  --bg:var(--giallo);        /* barra, tendina, ingrandimento, bottoni tondi */
  --sunk:var(--giallo-2);
  --line:rgba(17,17,17,.24);
  --line-2:rgba(17,17,17,.13);
  --ink-2:#5E5424;
  background-color:var(--giallo);
  /* due reticoli sfalsati: fanno un retino a 45 gradi. Fermo allo schermo,
     cosi' la barra in alto e la pagina restano sempre in registro. */
  background-image:
    radial-gradient(rgba(17,17,17,.30) 1.1px, transparent 1.25px),
    radial-gradient(rgba(17,17,17,.30) 1.1px, transparent 1.25px);
  background-size:7px 7px,7px 7px;
  background-position:0 0,3.5px 3.5px;
}

/* la barra in alto porta lo stesso retino: e' la stessa carta */
body[data-tema="giallo"] .hd{
  background-color:var(--giallo);
  background-image:
    radial-gradient(rgba(17,17,17,.30) 1.1px, transparent 1.25px),
    radial-gradient(rgba(17,17,17,.30) 1.1px, transparent 1.25px);
  background-size:7px 7px,7px 7px;
  background-position:0 0,3.5px 3.5px}
body[data-tema="giallo"] .mnav{background-color:var(--giallo)}

/* l'ingrandimento resta a tinta piena: le fotografie hanno bisogno di calma */
body[data-tema="giallo"] .lb{background:var(--giallo);background-image:none}
body[data-tema="giallo"] ::selection{background:var(--ink);color:var(--giallo)}

/* sul giallo il velo scuro sporcherebbe il colore: si toglie e si rinforza
   il contorno del titolo, che cosi' regge sia sul giallo sia sul nero */
body[data-tema="giallo"] .hero::after{background:none}
body[data-tema="giallo"] .hero h1{
  -webkit-text-stroke:clamp(1.6px,.24vw,3.4px) var(--ink);
  text-shadow:0 5px 22px rgba(17,17,17,.30)}
body[data-tema="giallo"] .hero-kick,
body[data-tema="giallo"] .hero-sub{color:var(--ink);text-shadow:none;
  background:var(--giallo);display:inline-block;padding:4px 10px}
body[data-tema="giallo"] .hero-kick{margin-bottom:clamp(10px,1.6vw,18px)}

/* il titolo del lavoro si evidenzia in nero: sul giallo il giallo non si vede */
body[data-tema="giallo"] .card-t{box-shadow:inset 0 0 0 var(--ink);
  transition:box-shadow .3s,color .3s}
body[data-tema="giallo"] .card:hover .card-t{box-shadow:inset 0 -.68em 0 var(--ink);
  color:var(--giallo)}

/* ---------------- LA TESTATA IN HOME CAMBIA FOTOGRAFIA ----------------
   Le immagini sono impilate una sull'altra: si vede quella con data-on,
   le altre aspettano il loro turno. La dissolvenza la fa il CSS. */
.hero.ruota .hero-bg{opacity:0;transition:opacity 1.6s ease}
.hero.ruota .hero-bg[data-on]{opacity:1}
@media (prefers-reduced-motion: reduce){
  .hero.ruota .hero-bg{transition:none}
}