/* =====================================================================
   GS — glc.css
   Stile grafico di giuseppeschiavo.it.
   Mobile first: le regole base sono per 390px, poi si sale con
   min-width 768 (md) · 1024 (lg) · 1280 (xl) · 1536 (2xl).
   1rem = 10px (come il riferimento). Tema unico chiaro: nessuna regola
   dipende da body.theme-minimal.
   ===================================================================== */

/* ---------- 0. Font (file in assets/fonts, sottoinsieme latin, licenza SIL OFL) ---------- */
@font-face {
  font-family: "National Park";
  font-style: normal;
  font-weight: 400 600; /* font variabile: 400 e 600 dallo stesso file */
  font-display: swap;
  src: url(../assets/fonts/national-park-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Titan One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/titan-one-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Bitcount Grid Single";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/bitcount-grid-single-latin.woff2) format("woff2");
}

/* ---------- 1. Token ---------- */
:root {
  --brown: #593c3c;
  --bg: #f5f4f2;
  --pink: #ead8f9;
  --green: #f1ffdf;
  --white: #fff;

  --font-body: "National Park", "Helvetica Neue", Arial, sans-serif;
  --font-titles: "Titan One", "Arial Black", "Helvetica Neue", sans-serif;
  --font-special: "Bitcount Grid Single", "Courier New", ui-monospace, monospace;

  /* scala tipografica (mobile) */
  --fs-xs: 1rem;
  --fs-s: 1.8rem;
  --fs-base: 1.8rem;
  --fs-xl: 3rem;
  --fs-2xl: 4rem;
  --fs-3xl: 4rem;

  --radius-m: 2.4rem;
  --radius-l: 4rem;
  --bw: 1px;                /* bordo: 1px sotto 768, 2px sopra */

  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-out-4: cubic-bezier(.23, 1, .32, 1);
  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--brown), 0 0 0 6px #fff;
  --shadow-pop: -5px 5px 10px #00000012, 0 0 50px #0000001a;
  --halftone: radial-gradient(rgba(89, 60, 60, .22) 1.1px, transparent 1.6px) 0 0 / 9px 9px;

  /* variabili usate dagli stili inline di main.js */
  --accent: var(--brown);
  --mono: var(--font-special);

  --cursor: url(../assets/images/glc/cursor.svg) 4 4, auto;
  --cursor-hover: url(../assets/images/glc/cursor-hover.svg) 4 4, pointer;
}
@media (min-width: 768px) {
  :root { --bw: 2px; }
}
@media (min-width: 1024px) {
  :root {
    --fs-base: clamp(1.8rem, 1.505vw, 2.6rem);
    --fs-xl: clamp(3rem, 2.778vw, 4.8rem);
    --fs-2xl: clamp(4rem, 4.167vw, 7.2rem);
    --fs-3xl: clamp(4rem, 6.481vw, 11.2rem);
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html {
  font-size: 10px;
  font-family: var(--font-body);
  color: var(--brown);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  cursor: var(--cursor);
  scroll-padding-top: 9rem;
}
/* lo sfondo sta SOLO sul body: così si propaga al canvas e la mezzatinta
   (z-index negativo + multiply) resta visibile sopra lo sfondo */
body {
  background: var(--bg);
  color: var(--brown);
  font-size: var(--fs-base);
  line-height: 1.25;
  min-height: 100vh;
  overflow-x: clip;
  overflow-wrap: break-word;
}
/* testi inseriti dagli utenti o dal pannello (recensioni, progetti, blog): una parola o un URL
   lunghissimo va a capo invece di allargare la card */
.review-text, .review-author, .project-name, .project-desc, .read-card__title, .site-name { overflow-wrap: anywhere; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: 600; }
ol, ul, menu { list-style: none; }
img, svg, video, iframe { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border-radius: 0; }
button { appearance: none; }
::placeholder { opacity: 1; color: color-mix(in oklab, var(--brown) 76%, transparent); }
textarea { resize: vertical; }
[hidden] { display: none !important; }

a, button, label, select, summary, [role="button"], [role="radio"], .star, .subject-card, .school-subfolder, .site-page-dot { cursor: var(--cursor-hover); }
input, textarea { cursor: text; }
input[type="checkbox"] { cursor: var(--cursor-hover); }

:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; left: 1.5rem; top: -10rem; z-index: 1000;
  padding: .8rem 1.6rem; background: var(--white); border: 2px solid var(--brown); border-radius: 9999px;
  font-size: 1.6rem; transition: top .15s var(--ease-out-4);
}
.skip-link:focus { top: 1.5rem; }

.font-special {
  font-family: var(--font-special);
  font-weight: 300;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
}
.logo-img { filter: url(#glc-brown); }

.underline-link {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  transition: all .1s var(--ease-in);
}
@media (hover: hover) { .underline-link:hover { text-decoration-line: none; } }

/* Comparsa della pagina (sostituisce il vecchio loader) */
/* clip orizzontale sul wrapper (non sul body: Chrome mobile allargherebbe comunque
   il viewport per le card ruotate durante le animazioni) */
.content { overflow-x: clip; }
/* failsafe solo CSS: se glc.js non arriva, la pagina compare comunque dopo 3 s.
   Con .is-ready l'animazione viene tolta: un'animazione "forwards" su opacity
   lascerebbe un contesto di impilamento che rompe i blend multiply. */
/* .001 e non 0: a occhio è uguale, ma Chrome registra le immagini del primo schermo come LCP */
.js .content { opacity: .001; transition: opacity .15s ease-in .15s; animation: glc-failsafe-show .15s ease-in 3s forwards; }
.js .content.is-ready { opacity: 1; animation: none; }
@keyframes glc-failsafe-show { to { opacity: 1; } }
/* destinazioni dello skip link e dei link interni (tabindex=-1, focus via glc.js) */
.main:focus, .section[tabindex="-1"]:focus, [data-glc-target]:focus { outline: none; }

/* ---------- 3. Pagina ---------- */
.main {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
  padding: 12rem 1rem 0;
}
@media (min-width: 768px) {
  .main { padding-inline: 2.5rem; gap: 8rem; }
}

/* ---------- 4. Bottoni ---------- */
.btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  padding: .8rem 1.6rem;
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  font-size: var(--fs-base);
  line-height: 1.25;
  white-space: nowrap;
  transition: all .1s var(--ease-in);
}
.btn__arrow {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate .15s var(--ease-out-4);
}
.btn-ghost { background: transparent; }
.btn--solid { background: var(--brown); color: var(--bg); }
@media (hover: hover) {
  .btn:hover { background: var(--brown); color: var(--bg); }
  .btn--pink:hover { color: var(--pink); }
  .btn--solid:hover { background: var(--pink); color: var(--brown); }
}
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
button.btn:disabled { cursor: progress; }

.btn-sm, .btn-sm-matrix {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  padding: .5rem 1.4rem;
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  font-size: 1.6rem;
  line-height: 1.3;
  transition: all .1s var(--ease-in);
}
@media (hover: hover) { .btn-sm:hover, .btn-sm-matrix:hover { background: var(--brown); color: var(--bg); } }

/* ---------- 5. Navigazione ---------- */
.nav { position: fixed; top: 0; left: 0; z-index: 50; width: 100%; }

/* barra desktop (>= 1280) */
.navbar { display: none; }
.navbar__logo { position: relative; z-index: 10; display: block; width: 8rem; }
.navbar__logo img { width: 100%; height: auto; }
.navbar__links {
  position: absolute; left: 50%; z-index: 0;
  display: flex; justify-content: center; align-items: center; gap: 4rem;
  width: 100%; translate: -50% 0;
  pointer-events: none;
}
.navbar__links a { white-space: nowrap; pointer-events: auto; }
@media (hover: hover) {
  .navbar__links a:hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
}
.navbar__right { position: relative; z-index: 10; display: flex; gap: 1.5rem; }

@media (min-width: 1280px) {
  .navbar {
    position: relative;
    display: flex; justify-content: space-between; align-items: center; gap: 2.5rem;
    padding: 4rem 2.5rem 0;
    font-size: var(--fs-base);
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: all .1s var(--ease-in);
  }
  .navbar.shrinked { padding-block: 1.5rem; background: var(--bg); border-bottom-color: var(--brown); }
}

/* pillole (IG / FB / Contatti) */
.nav-pill {
  display: flex; align-items: center; justify-content: center;
  height: 5rem;
  font-size: 1.8rem; line-height: 1.3;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  text-transform: none;
  transition: color .15s var(--ease-in), background-color .15s var(--ease-in), border-color .15s var(--ease-in), scale .15s var(--ease-out-4);
}
.nav-pill--round { width: 5rem; flex: none; text-transform: uppercase; }
.nav-pill--round svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-pill--brand { gap: 1rem; padding-inline: 1rem; width: fit-content; }
.nav-pill__icon { width: 3rem; height: auto; flex: none; }
@media (hover: hover) {
  .nav-pill--round:hover { background: var(--green); }
  .nav-pill--brand:hover { background: var(--pink); }
}
.nav-pill:focus-visible { outline: none; box-shadow: var(--focus); }

/* barra compatta (< 1280) */
.mobile-bar-wrap { position: fixed; top: 0; left: 0; z-index: 20; width: 100%; padding: 1.5rem; }
.mobile-bar {
  display: flex; justify-content: space-between; align-items: center;
  height: 5rem;
  background: var(--bg);
  border: 1px solid var(--brown);
  border-right-width: 0;
  border-radius: 9999px;
  transition: background-color .15s linear, border-color .15s linear;
}
.mobile-bar__logo { display: block; width: 5rem; margin-left: 1rem; }
.mobile-bar__logo img { width: 100%; height: auto; }
.hamburger {
  position: relative;
  display: block;
  width: 4.8rem; height: 4.8rem;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--brown);
  background: transparent;
  transition: background-color .15s linear;
}
.hamburger__bar {
  position: absolute; left: 50%; top: 50%;
  width: 1rem; height: 2px; margin: -1px 0 0 -.5rem;
  border-radius: 1px;
  background: var(--brown);
  transition: translate .25s var(--ease-out-4), rotate .25s var(--ease-out-4), width .25s var(--ease-out-4), margin .25s var(--ease-out-4), opacity .15s linear;
}
.hamburger__bar:nth-child(1) { translate: 0 -4px; }
.hamburger__bar:nth-child(3) { translate: 0 4px; }
body.menu-open .mobile-bar { background: transparent; border-color: transparent; }
body.menu-open .hamburger { background: var(--white); }
body.menu-open .hamburger__bar { width: 1.6rem; margin-left: -.8rem; }
body.menu-open .hamburger__bar:nth-child(1) { translate: 0 0; rotate: 45deg; }
body.menu-open .hamburger__bar:nth-child(2) { opacity: 0; }
body.menu-open .hamburger__bar:nth-child(3) { translate: 0 0; rotate: -45deg; }
.hamburger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--brown), var(--focus); }

/* overlay del menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 15;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; justify-content: center; justify-content: safe center; align-items: center;
  padding: 9rem 1rem 10rem;
  overflow-y: auto;
  background: var(--pink);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s linear, visibility 0s linear .15s;
}
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .15s linear; }
.mobile-menu__links {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  font-family: var(--font-titles);
  font-size: var(--fs-3xl);
  line-height: 1.2;
  text-align: center;
}
/* il pannello sfuma tutto insieme (150 ms), come il riferimento */
.mobile-menu__links a { opacity: 1; translate: none; transition: none; }
@media (hover: hover) {
  .mobile-menu__links a:hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
}
.mobile-menu__pills {
  position: fixed; left: 0; bottom: 2.5rem;
  display: flex; justify-content: space-between;
  width: 100%; padding-inline: 1rem;
  opacity: 0; transition: opacity .3s linear;
}
.mobile-menu.open .mobile-menu__pills { opacity: 1; }
.mobile-menu__group { display: flex; gap: 1.5rem; }
.mobile-menu__close {
  position: fixed; left: 50%; top: 2rem; translate: -50% -300%;
  padding: .8rem 1.6rem; font-size: 1.6rem;
  background: var(--white); border: 1px solid var(--brown); border-radius: 9999px;
}
.mobile-menu__close:focus-visible { translate: -50% 0; outline: none; box-shadow: var(--focus); }
/* telefoni in orizzontale / schermi bassi: il menu sta tutto senza scorrere */
@media (max-height: 520px) {
  .mobile-menu { padding-block: 7rem 6.5rem; }
  .mobile-menu__links { font-size: 2.8rem; gap: .4rem; }
  .mobile-menu__pills { bottom: 1.2rem; }
}
@media (max-height: 400px) {
  .mobile-menu__links { font-size: 2.4rem; gap: .2rem; }
}
@media (min-width: 1280px) {
  .mobile-bar-wrap, .mobile-menu { display: none; }
}

/* ---------- 6. Hero ---------- */
.hero { position: relative; width: 100%; }

@keyframes glc-aka-in {
  from { opacity: 0; rotate: -5deg; filter: blur(10px); }
  to { opacity: 1; rotate: 0deg; filter: blur(0); }
}
/* telefono e tablet (< 1024): card compatta orizzontale (avatar a sinistra, testo a destra),
   così la prima illustrazione resta nel primo schermo come nel riferimento */
.aka-card {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  grid-template-areas: "avatar label" "avatar text";
  align-items: center;
  gap: .4rem 1.5rem;
  width: 100%;
  margin: 0 0 2.5rem;
  padding: 1.5rem 2rem 1.5rem 1.5rem;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-l);
  text-align: left;
  animation: glc-aka-in .4s var(--ease-out-4) .5s both;
}
.aka-card__label { grid-area: label; align-self: end; font-size: clamp(1.8rem, 1.505vw, 2.6rem); line-height: 1.25; text-transform: uppercase; }
.aka-card .aka-card__avatar { grid-area: avatar; width: 9rem; flex: none; }
.aka-card__text { grid-area: text; align-self: start; font-size: var(--fs-base); line-height: 1.25; text-wrap: pretty; }
@media (min-width: 768px) and (max-width: 1023px) {
  .aka-card { grid-template-columns: 14rem minmax(0, 1fr); gap: .6rem 2.5rem; padding: 2rem 3rem 2rem 2rem; }
  .aka-card .aka-card__avatar { width: 14rem; }
}
@media (min-width: 1024px) {
  /* desktop: card verticale assoluta in alto a destra */
  .aka-card {
    position: absolute; top: 1.5rem; right: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center; gap: 2rem;
    width: 46rem;
    margin: 0;
    padding: 2.5rem;
    text-align: center;
  }
  .aka-card__label, .aka-card__text { align-self: auto; }
  .aka-card .aka-card__avatar { width: 20rem; }
  /* blocco stretto e centrato come il riferimento (66,7%): righe corte, card meno densa */
  .aka-card__text { max-width: 75%; text-wrap: pretty; }
}
/* telefono e tablet: il riferimento apre direttamente sulla prima illustrazione.
   La card resta (con l'h1) ma visivamente scende dopo le tre copertine; l'ordine del DOM non cambia */
@media (max-width: 1023px) {
  .hero { display: flex; flex-direction: column; }
  .hero-grid { order: 0; }
  .aka-card { order: 1; margin: 2.5rem 0 0; }
}

.octagon { position: relative; width: 100%; aspect-ratio: 1; }
.octagon__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: url(#glc-octagon); }
.octagon__border { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: var(--brown); stroke-width: 2; }
/* video nell'ottagono "In breve" (il personaggio saluta al passaggio del mouse sulla card) */
.octagon__video { opacity: 0; transition: opacity .15s var(--ease-in); pointer-events: none; }
.octagon__video.has-video { opacity: 1; }
/* card "aka": dietro al personaggio un fondo colorato (come il riferimento) invece della piastra bianca */
.aka-card__avatar::before { content: ""; position: absolute; inset: 0; background: var(--green); clip-path: url(#glc-octagon); }
.aka-card__avatar .octagon__img { mix-blend-mode: multiply; }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem;
  width: 100%;
  margin-inline: auto;
}
.cover-card {
  grid-column: span 12 / span 12;
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}
.cover-card__media { width: 100%; background: var(--bg); }
.cover-card__media img { width: 100%; height: auto; }
.cover-card__title {
  font-family: var(--font-titles);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  text-align: center;
  -webkit-text-stroke: .02em currentColor;
  transition: all .1s var(--ease-in);
}
@media (min-width: 768px) {
  .cover-card { grid-column: 1 / span 8; }
  .cover-card:nth-child(even) { grid-column: 5 / span 8; }
}
/* grigio → colore solo con un mouse vero: su telefoni e tablet (touch) le copertine restano a colori.
   Il grigio va sul DISEGNO (img e video, vedi --cc-gray più sotto), non sul riquadro: col filtro sul riquadro
   anche il suo fondo beige diventava grigio neutro e intorno a GAM City e Scuola si vedeva un rettangolo
   (243,243,243 sul beige 245,244,242 della pagina). La cornice di Gintoneria resta marrone. */
@media (min-width: 768px) and (hover: hover) {
  .cover-card__media { --cc-gray: 1; }
  .cover-card:focus-visible .cover-card__media { --cc-gray: 0; }
  .cover-card:hover .cover-card__media { --cc-gray: 0; }
}
@media (hover: hover) {
  /* come il riferimento: il titolo diventa rosa, senza contorno */
  .cover-card:hover .cover-card__title { color: var(--pink); -webkit-text-stroke: .02em currentColor; }
}
.cover-card:focus-visible { outline: 2px solid var(--brown); outline-offset: 6px; border-radius: 4px; }
.cover-card:focus-visible .cover-card__title { text-decoration: underline 2px; text-underline-offset: 8px; }
@media (min-width: 1024px) {
  .cover-card:nth-child(odd) { padding-right: 10rem; }
  .cover-card:nth-child(even) { padding-left: 5rem; }
}
@media (min-width: 1280px) {
  .cover-card:nth-child(odd) { padding-right: 0; }
  .cover-card:nth-child(even) { padding-left: 0; }
}
@media (min-width: 1536px) {
  .hero-grid { max-width: 66.6667%; }
}
.cover-card__media picture { display: block; }
/* Gintoneria è una scena a tutto campo (non un disegno isolato): cornice come il blocco video.
   Dal 19/10 ("quando rimpicciolisco non è perfettamente dentro la cornice arrotondata"):
   - la linea della cornice è disegnata SOPRA immagine e video (::after), non intorno: a finestra stretta o
     con lo zoom del browser non resta nessuna fessura chiara tra il disegno e la linea (prima c'era in
     ~7 casi su 10 tra larghezze, densità e zoom, e col video che gira il disegno a volte usciva oltre la linea);
   - il ritaglio arrotondato lo fa SOLO clip-path su img e video, un quarto di linea dentro il bordo: Safari
     non ritaglia agli angoli i figli con filter / mix-blend-mode, che sporgerebbero squadrati. Niente
     overflow: hidden né clip-path sul contenitore: taglierebbero anche la linea del ::after, che sui bordi a
     mezzo pixel (basso, destra, angoli; schermi non Retina, zoom sotto il 100%) verrebbe più sottile e chiara.
     Il clip-path NON va sul <picture> (il multiply dell'img si perderebbe e il disegno schiarirebbe);
   - isolation: il multiply di immagine e video resta dentro la cornice. */
.cover-card:first-child .cover-card__media {
  --frame-r: var(--radius-m);
  border-radius: var(--frame-r);
  isolation: isolate;
}
.cover-card:first-child .cover-card__media img,
.cover-card:first-child .cover-card__media > video {
  clip-path: inset(calc(var(--bw) / 4) round calc(var(--frame-r) - var(--bw) / 4));
}
.cover-card:first-child .cover-card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border: var(--bw) solid var(--brown); border-radius: inherit;
  pointer-events: none;
}
@media (min-width: 768px) { .cover-card:first-child .cover-card__media { --frame-r: var(--radius-l); } }
/* GAM City: il cavo del controller tocca il bordo basso, sfuma invece di finire tagliato */
/* niente sfumatura sul controller: lo stacco dal titolo lo dà già il margin-top di .cover-card__title */
/* il titolo non resta attaccato al disegno */
.cover-card__title { margin-top: 1.2rem; }
@media (min-width: 1024px) {
  .cover-card__title { margin-top: 2rem; }
  /* la scena resta ~40px lontana dalla card "aka" (46rem, assoluta); 0 da ~1530px */
  .cover-card:first-child { padding-right: max(0px, calc(51rem - 33.333vw)); }
}

/* il multiply serve ai disegni (cartella glc/, fondo bianco) sul fondo beige/rosa:
   una foto o un JPG messi al loro posto restano con i colori veri */
.cover-card__media img[src*="glc/"], .read__img[src*="glc/"],
.banner__sticker[src*="glc/"], .footer__sticker img[src*="glc/"], .marquee__img[src*="glc/"],
.cover-card__video { mix-blend-mode: multiply; }
/* il "bianco" dei disegni è ~(254,253,249): +4% lo porta a 255, così il multiply non lascia riquadri caldi */
.cover-card__media img[src*="glc/"], .cover-card__video, .marquee__img, .read__img, .footer__sticker img { filter: brightness(1.04); }
/* limone: il multiply non può coprire bordo e puntini più scuri di lui; il filtro rende trasparente il bianco */
.banner__sticker[src*="glc/"] { mix-blend-mode: normal; filter: url(#glc-knockout); }
/* doodle con il fondo DAVVERO trasparente (file *-trasparente.webp, canale alfa: tolto solo il bianco
   attaccato ai bordi): niente multiply, niente schiarita, niente filtro #glc-knockout. Il riquadro bianco
   non può più comparire (Safari, adesivi animati, contenitori sticky/con z-index) e i bianchi DENTRO il
   disegno (vetro del bicchiere, pagine del taccuino) restano pieni. Vale su tutte le pagine. */
img[src*="-trasparente"] { mix-blend-mode: normal !important; filter: none !important; }

/* video delle copertine: parte al passaggio del mouse e si ferma dov'è;
   il poster sotto è identico al primo fotogramma, quindi la partenza non si nota.
   Solo da 768px con mouse vero: su telefono resta l'immagine (glc.js non carica il video). */
.cover-card__media { position: relative; }
.cover-card__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .15s var(--ease-in), filter .15s var(--ease-in); pointer-events: none;
}
.has-video > .cover-card__video, .has-video.cover-card__video { opacity: 1; }
/* grigio solo sul disegno (--cc-gray: 1 col mouse, 0 al passaggio); la schiarita +4% resta per il multiply */
.cover-card__media img[src*="glc/"], .cover-card__video { filter: grayscale(var(--cc-gray, 0)) brightness(1.04); }
.cover-card__media img[src*="glc/"] { transition: filter .15s var(--ease-in); }

/* TUTTI i video sopra un poster (copertine, ottagono "In breve", computer anni '80, gintoneria, forum, 404):
   appena il video è a schermo glc.js mette .glc-video-on sul contenitore e il poster sotto sparisce.
   Prima restava visibile: con due multiply sovrapposti il disegno fermo si vedeva sotto le parti che si
   muovono (e i colori si scurivano). Il poster è il primo fotogramma, quindi lo scambio è istantaneo
   (niente dissolvenza: il fondo non lampeggia). Quando il mouse esce il video si ferma dov'è e resta
   lui solo, come il riferimento. Vale con il mouse (video al passaggio) e senza mouse (video che parte
   scorrendo, glc.js sezione 12); con il movimento ridotto o in stampa il video è display:none e il poster torna. */
@media screen and (prefers-reduced-motion: no-preference) {
  .glc-video-on > img, .glc-video-on > picture { opacity: 0; transition: none; }
  /* scambio poster→video istantaneo, ma il grigio↔colore del disegno (filter) resta morbido */
  .glc-video-on > video.has-video { opacity: 1; transition: opacity 0s, filter .15s var(--ease-in); }
}

/* ---------- 7. Blocco video ---------- */
.video-block { padding-top: 10rem; }
.video-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.7778 / 1;
  overflow: hidden;
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-m);
}
.video-frame__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .15s var(--ease-in); }
.video-frame__play { position: absolute; left: 50%; top: 50%; width: 50%; height: auto; translate: -50% -50%; transition: all .1s var(--ease-in); }
@media (min-width: 768px) { .video-frame { border-radius: var(--radius-l); } }
@media (hover: hover) {
  /* grigio → colore solo con un mouse vero: su touch il poster resta a colori */
  .video-frame__poster { filter: grayscale(100%); }
  .video-frame:hover .video-frame__poster { filter: grayscale(0%); }
  .video-frame:hover .video-frame__play { rotate: -5deg; }
}
.video-frame:focus-visible { outline: none; box-shadow: var(--focus); }
.video-frame:focus-visible .video-frame__poster { filter: none; }
.video-frame:active .video-frame__play { scale: .96; }
/* etichetta "Guarda" in HTML (un SVG in <img> non può usare il font dei titoli) */
.video-label {
  display: flex; align-items: center; gap: .2em;
  width: auto;
  padding: .06em .4em .1em .5em;
  font-family: var(--font-titles);
  font-size: clamp(3.2rem, 7.2vw, 10.4rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--brown);
  background: var(--white);
  border: .05em solid var(--brown);
  border-radius: 9999px;
  box-shadow: .06em .09em 0 var(--brown);
  -webkit-text-stroke: .02em currentColor;
}
.video-label__icon { width: .75em; height: .75em; flex: none; fill: var(--brown); }

/* ---------- 8. In breve (banner) ---------- */
.banner {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2.5rem;
  width: 100%;
  padding-bottom: 4rem;
}
.banner__eyebrow { font-size: var(--fs-xl); line-height: 1.15; text-align: center; }
.banner__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; width: 100%; }
.banner__rel { position: relative; grid-column: 1 / 13; height: 100%; border-radius: var(--radius-l); }
.banner__sticker { display: none; }
.banner__card {
  /* resta static di proposito: la striscia si posiziona rispetto a .banner__rel */
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  height: 100%;
  padding-block: 4rem;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-l);
}
.banner__avatar { position: relative; z-index: 10; width: 20rem; padding-inline: 1rem; aspect-ratio: 1; }
.banner__strip { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; margin-top: 6rem; overflow: hidden; }
.banner__title {
  font-family: var(--font-titles);
  font-size: var(--fs-3xl);
  line-height: 1.2;
  text-align: center;
  -webkit-text-stroke: .02em currentColor;
}
.banner__text { padding-inline: 2rem; text-align: center; }
.banner__card .btn { margin-top: .5rem; }

@media (min-width: 768px) {
  .banner { gap: 5rem; padding-bottom: 8rem; }
  .banner__rel { grid-column: 2 / 12; padding: 2rem; }
  .banner__sticker {
    display: block; position: absolute; z-index: 10;
    width: 15rem; right: 6.6667%; top: 0; translate: 0 -25%;
    animation: glc-wiggle 3.2s var(--ease-in-out) infinite;
    transform-origin: 50% 90%;
  }
  .banner__avatar { width: 30rem; padding-inline: 0; }
  .banner__strip { padding-inline: 2rem; }
  .banner__text { padding-inline: 5rem; }
}
@media (min-width: 1024px) { .banner__text { max-width: 75%; } }

@keyframes glc-wiggle {
  0%, 62%, 100% { rotate: 0deg; }
  70% { rotate: -9deg; }
  78% { rotate: 7deg; }
  86% { rotate: -4deg; }
  93% { rotate: 2deg; }
}

/* mezzatinta animata attorno alla card (solo md+) */
@property --x { syntax: "<percentage>"; initial-value: 50%; inherits: false; }
@property --y { syntax: "<percentage>"; initial-value: 10%; inherits: false; }
@keyframes glc-halftone-move {
  0% { --x: 60%; --y: 20%; }
  25% { --x: 60%; --y: 60%; }
  75% { --x: 30%; --y: 40%; }
  100% { --x: 60%; --y: 20%; }
}
.halftone-effect { display: none; }
/* versione robusta: il blend avviene dentro un gruppo isolato con il suo sfondo beige,
   quindi i bianchi spariscono anche se un antenato crea un contesto di impilamento */
@media (min-width: 768px) {
  .halftone-effect {
    display: block;
    position: absolute; inset: 0; z-index: -10;
    height: 100%;
    background: var(--bg);
    isolation: isolate;
    border-radius: var(--radius-l);
    overflow: hidden;
  }
}
.halftone-inner {
  width: 100%; height: 100%;
  mix-blend-mode: multiply;
  font-size: var(--fs-base);
  --pattern: radial-gradient(closest-side, #777, #fff) 0 / .4em .4em space;
  --map: radial-gradient(circle farthest-corner at var(--x) var(--y), #888, #fff);
  background: var(--pattern), var(--map);
  background-blend-mode: multiply;
  filter: contrast(16);
  animation: glc-halftone-move 4s ease-in-out infinite;
}
.halftone-inner.is-paused { animation-play-state: paused; }

/* marquee (40px/s, durata impostata da glc.js) */
.marquee {
  width: 100%;
  overflow: hidden;
  border-inline: var(--bw) solid var(--brown);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: glc-marquee var(--marquee-duration, 66s) linear infinite;
  will-change: transform;
}
.marquee.is-paused .marquee__track { animation-play-state: paused; }
/* striscia fitta come il riferimento: i doodle occupano solo il 50-70% della loro tela,
   quindi le tele si sovrappongono (i margini bianchi spariscono nel multiply sul lilla) */
.marquee__group { display: flex; flex: none; gap: 0; padding-right: 0; }
.marquee__img { height: 15rem; width: auto; flex: none; object-fit: contain; margin-inline: -2.5rem; }
/* la traccia (will-change) è un livello a sé: serve un fondo pieno perché il multiply dei doodle "sparisca" nel lilla */
.banner .marquee__track { background: var(--pink); }
@media (min-width: 768px) { .marquee__img { height: 38rem; margin: -4rem -6rem; } }
@keyframes glc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* statistiche dentro la card */
.stats-bar {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.5rem 0;
  width: 100%;
  padding-inline: 1rem;
}
.stat {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  flex: 0 0 33.333%;
  padding-inline: .8rem;
  text-align: center;
}
.stat-num { font-family: var(--font-titles); font-size: 3rem; line-height: 1.05; -webkit-text-stroke: .02em currentColor; }
.stat-label { font-family: var(--font-special); font-weight: 300; font-size: 1.6rem; line-height: 1.2; text-wrap: balance; -webkit-font-smoothing: auto; }
/* telefono: etichette su una riga, gruppi centrati (niente griglia 3+2 con altezze diverse) */
@media (max-width: 767px) {
  .stats-bar { gap: 1.5rem 2.5rem; }
  .stat { flex: 0 0 auto; padding-inline: 0; }
  .stats-bar .stat-label { white-space: nowrap; font-size: 1.4rem; }
}
/* quattro numeri (tolte le recensioni): sul telefono griglia 2 x 2 con colonne allineate
   (17 sopra 530 gin, 8 sopra FiveM), invece di due righe centrate di larghezza diversa */
@media (max-width: 767px) {
  .stats-bar {
    display: grid; grid-template-columns: auto auto;
    justify-content: center; justify-items: center;
    column-gap: 2.5rem; row-gap: 1.5rem;
    max-width: none;
  }
}
@media (min-width: 768px) {
  .stats-bar { flex-wrap: nowrap; padding-inline: 3rem; }
  .stat { flex: 1 1 auto; padding-inline: 1.2rem; }
  .stat + .stat { border-left: var(--bw) solid var(--brown); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .stat { padding-inline: .8rem; }
  .stat-label { font-size: 1.4rem; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .stats-bar { width: auto; max-width: 100%; }
  .stat { padding-inline: 2rem; }
  .stat-num { font-size: var(--fs-xl); }
  .stat-label { font-size: clamp(1.6rem, 1.15vw, 2rem); white-space: nowrap; }
}

/* ---------- 9. Intestazioni di sezione ---------- */
.section {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  padding-bottom: 4rem;
}
@media (min-width: 768px) { .section { padding-bottom: 8rem; } }
.section-head {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  width: 100%;
  margin-bottom: 3rem;
  text-align: center;
}
@media (min-width: 768px) { .section-head { margin-bottom: 5rem; } }
.eyebrow { font-size: var(--fs-base); line-height: 1.25; }
.section-title {
  font-family: var(--font-titles);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  -webkit-text-stroke: .02em currentColor;
  text-wrap: balance;
}
.section-desc { max-width: 60rem; margin-top: .5rem; }
.section-desc a, .section-lead a { white-space: nowrap; }
@media (min-width: 1024px) { .section-desc { max-width: 75rem; } }
.section-lead {
  margin-top: 1rem;
  font-size: var(--fs-xl);
  line-height: 1.15;
  font-weight: 600;
  text-wrap: balance;
}
@media (min-width: 768px) { .section-lead { max-width: 75%; } }
@media (min-width: 1280px) { .section-lead { max-width: 66.6667%; } }
.section-sign { font-size: var(--fs-base); margin-top: .5rem; }
.section-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 3rem; }

/* card bianca generica */
.project-card, .site-card, .subject-card, .review-card, .world, .read-card, .feature {
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-m);
}

/* ---------- 10. Portfolio ---------- */
.filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .filter-tabs { gap: 1.5rem; margin-bottom: 5rem; } }
.filter-tab {
  padding: .8rem 1.8rem;
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  font-size: var(--fs-base);
  line-height: 1.25;
  background: transparent;
  transition: all .1s var(--ease-in);
}
.filter-tab.active { background: var(--brown); color: var(--bg); }
@media (hover: hover) { .filter-tab:not(.active):hover { background: var(--brown); color: var(--bg); } }
.filter-tab:focus-visible { outline: none; box-shadow: var(--focus); }
/* telefoni stretti: le quattro pillole restano su una riga (niente "Brand" da solo) */
@media (max-width: 399px) {
  .filter-tabs { gap: .6rem; }
  .filter-tab { padding: .6rem 1.2rem; }
}

.portfolio-grid, .sites-grid, .subjects-grid, .reviews-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  width: 100%;
}
@media (min-width: 768px) {
  .portfolio-grid, .sites-grid, .subjects-grid, .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .portfolio-grid, .subjects-grid, .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .sites-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.project-card {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: rotate .12s var(--ease-in), opacity .4s var(--ease-out-4), filter .4s var(--ease-out-4);
}
@media (hover: hover) {
  .project-card:hover { rotate: 2deg; }
  .project-card:nth-child(even):hover { rotate: -2deg; }
}
.project-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--halftone), var(--bg);
  border-bottom: var(--bw) solid var(--brown);
}
.project-thumb-inner {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brown);
  transition: filter .15s var(--ease-in);
}
.project-thumb-inner > svg { width: 9rem; height: 9rem; }
.project-thumb-inner > svg * { opacity: 1; stroke-width: 1.4; }
.project-thumb-inner > svg :first-child { fill: var(--pink); }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-thumb-iframe { padding: 0; }
.project-preview-wrap { position: absolute; inset: 0; overflow: hidden; }
.project-iframe-preview {
  position: absolute; top: 0; left: 0;
  width: 400%; height: 400%;
  border: 0;
  transform: scale(.25); transform-origin: 0 0;
  pointer-events: none;
  background: #fff;
}
.project-preview-overlay { position: absolute; inset: 0; z-index: 2; }
@media (min-width: 768px) and (hover: hover) {
  .project-thumb-inner, .site-preview-iframe { filter: grayscale(100%); }
  .project-card:hover .project-thumb-inner, .site-card:hover .site-preview-iframe { filter: grayscale(0%); }
}
.project-badge {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 5;
  padding: .3rem 1.2rem;
  font-family: var(--font-special); font-weight: 300; font-size: 1.6rem; line-height: 1.3;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  -webkit-font-smoothing: auto;
}

.preview-load-btn {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
  width: 100%; height: 100%;
  padding: 1.5rem;
  color: var(--brown);
  background: transparent;
  text-align: center;
}
.preview-load-btn svg { width: 3.4rem; height: 3.4rem; transition: rotate .15s var(--ease-out-4); }
.preview-load-btn span {
  padding: .6rem 1.6rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  font-size: 1.6rem; line-height: 1.3;
  transition: all .1s var(--ease-in);
}
.preview-load-btn small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.4rem; }
@media (hover: hover) {
  .preview-load-btn:hover span { background: var(--brown); color: var(--bg); }
  .preview-load-btn:hover svg { rotate: -6deg; }
}
.preview-load-btn:focus-visible { outline: none; }
.preview-load-btn:focus-visible span { box-shadow: var(--focus); }

.project-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; flex: 1; padding: 2rem 2rem 2.5rem; }
.project-category { font-family: var(--font-special); font-weight: 300; font-size: 1.8rem; line-height: 1.3; -webkit-font-smoothing: auto; }
.project-name { font-family: var(--font-titles); font-size: 2.6rem; line-height: 1.1; -webkit-text-stroke: 0; }
.project-desc { font-size: var(--fs-base); line-height: 1.3; }
.project-link {
  margin-top: auto; padding-top: .6rem;
  text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
}
@media (hover: hover) { .project-link:hover { text-decoration-line: none; } }
@media (min-width: 1024px) { .project-name { font-size: clamp(2.6rem, 2.1vw, 3.4rem); } }

/* ---------- 11. Siti live ---------- */
.site-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: rotate .12s var(--ease-in), opacity .4s var(--ease-out-4), filter .4s var(--ease-out-4);
}
@media (hover: hover) {
  .site-card:hover { rotate: -1.2deg; }
  .site-card:nth-child(even):hover { rotate: 1.2deg; }
}
.site-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--halftone), var(--bg);
  border-bottom: var(--bw) solid var(--brown);
}
.browser-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: .6rem;
  height: 3.6rem;
  padding: 0 1.2rem;
  background: var(--white);
  border-bottom: var(--bw) solid var(--brown);
}
.browser-bar span { width: 1.1rem; height: 1.1rem; flex: none; border-radius: 50%; border: 1.5px solid var(--brown); }
.browser-bar span:nth-child(1) { background: var(--pink); }
.browser-bar span:nth-child(2) { background: var(--green); }
.browser-bar span:nth-child(3) { background: var(--white); }
.url-bar {
  flex: 1; min-width: 0;
  margin-left: .6rem;
  padding: .1rem 1.2rem;
  background: var(--bg);
  border: 1px solid var(--brown);
  border-radius: 9999px;
  font-size: 1.3rem; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* il bottone centrato resta sopra l'indicatore delle pagine (in basso) */
.site-preview .preview-load-btn { top: 3.6rem; height: calc(100% - 3.6rem); padding: .6rem 1.5rem 3.4rem; }
.site-preview .preview-load-btn small { display: none; } /* l'indirizzo è già nella barra */
.site-preview-iframe {
  position: absolute; top: 3.6rem; left: 0;
  width: 400%; height: 4000%;
  border: 0;
  transform: scale(.25); transform-origin: 0 0;
  pointer-events: none;
  background: #fff;
  transition: opacity .4s ease, filter .15s var(--ease-in);
}
.site-preview-scroll { animation: glc-site-scroll 35s ease-in-out infinite; }
.site-card:hover .site-preview-iframe { animation-play-state: paused; }
@keyframes glc-site-scroll {
  0%, 5% { transform: scale(.25) translateY(0); }
  45%, 55% { transform: scale(.25) translateY(-85%); }
  95%, 100% { transform: scale(.25) translateY(0); }
}
.site-page-indicator {
  position: absolute; bottom: .6rem; left: 50%; z-index: 6;
  display: flex; gap: .6rem;
  padding: .5rem .9rem;
  translate: -50% 0;
  background: var(--white);
  border: 1px solid var(--brown);
  border-radius: 9999px;
}
.site-page-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid var(--brown); background: var(--white); transition: background-color .15s var(--ease-in), scale .15s var(--ease-out-4); }
.site-page-dot.active { background: var(--brown); }
@media (hover: hover) { .site-page-dot:hover { scale: 1.25; } }
/* i pallini funzionano solo con l'anteprima live caricata (main.js initSitePageCycler) */
.site-card:not(:has(iframe)) .site-page-dot { cursor: inherit; }
.site-card:not(:has(iframe)) .site-page-dot:hover { scale: none; }
.site-info { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; flex: 1; padding: 2rem 2rem 2.5rem; }
/* titoli piccoli delle card: font del testo (il display resta per i titoli grandi, come il riferimento) */
.site-name { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); line-height: 1.25; -webkit-text-stroke: 0; }
.site-url { font-size: 1.6rem; line-height: 1.3; overflow-wrap: anywhere; }
.site-actions { display: flex; gap: 1rem; margin-top: auto; padding-top: 1rem; }

/* ---------- 12. GAM City ---------- */
.feature-card {
  display: grid; gap: 2.5rem;
  width: 100%;
  padding: 2.5rem 1.5rem;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-l);
}
.feature-card__media img { width: 100%; max-width: 38rem; margin-inline: auto; }
@media (min-width: 1280px) { .feature-card__media img { max-width: 44rem; } }

/* computer anni '80 che disegna il logo GS: illustrazione SCONTORNATA (monitor-scontornato*.webp, fondo davvero
   trasparente: tolto solo il bianco attaccato ai bordi e l'ombra a mezzatinta, bordo morbido senza alone chiaro;
   schermo dipinto pieno con un solo colore, rgb(204,220,162)) e logo SVG animato sopra lo schermo.
   Niente video, niente multiply, niente filtri e niente fondo sul contenitore: l'immagine si appoggia sul lilla
   della card così com'è, quindi né un rettangolo di un altro verde nello schermo né un riquadro attorno al
   computer possono comparire, in nessun browser. Al passaggio del mouse fa il "salto" dei disegni (glc.js, 13). */
.monitor { position: relative; width: 100%; max-width: 38rem; margin-inline: auto; aspect-ratio: 1 / 1; }
@media (min-width: 1280px) { .monitor { max-width: 44rem; } }
.feature-card__media .monitor__img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%;
  mix-blend-mode: normal; filter: none; }
/* schermo misurato sui pixel dell'illustrazione scontornata (percentuali del lato: su 2048 px x 647-1437, y 297-902) */
.monitor__schermo { position: absolute; left: 31.59%; top: 14.50%; width: 38.62%; height: 29.59%;
  display: flex; align-items: center; justify-content: center; pointer-events: none; background: none; mix-blend-mode: normal; }
/* sul logo NIENTE mix-blend-mode e niente fondo: per fondere un elemento il browser ricalcola tutto il suo riquadro
   sopra lo schermo e in alcuni browser quel riquadro usciva di un altro colore (un rettangolo attorno al logo).
   Si vede SOLO il tratto, pieno e opaco, verde fosfori scuro sul verde chiaro dello schermo. */
.monitor__schermo svg { width: 74%; height: auto; overflow: visible; mix-blend-mode: normal; background: none; --gs-tratto: #283c15; }
.feature-list { display: grid; gap: 1.5rem; }
.feature {
  display: flex; align-items: flex-start; gap: 1.5rem;
  padding: 2rem;
  transition: rotate .12s var(--ease-in);
}
@media (hover: hover) {
  .feature:hover { rotate: -1.5deg; }
  .feature:nth-child(even):hover { rotate: 1.5deg; }
}
.feature__icon {
  display: grid; place-items: center;
  width: 5rem; height: 5rem; flex: none;
  background: var(--green);
  border: var(--bw) solid var(--brown);
  border-radius: 50%;
}
.feature__icon svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feature__title { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); line-height: 1.25; margin-bottom: .4rem; -webkit-text-stroke: 0; }
@media (min-width: 768px) {
  .feature-card { width: 83.333%; padding: 4rem; }
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-card { padding: 3rem; }
  .feature-list { grid-template-columns: minmax(0, 1fr); }
  .feature { padding: 2.4rem; }
}
@media (min-width: 1280px) {
  .feature-card { grid-template-columns: 2fr 3fr; align-items: center; gap: 4rem; }
  .feature-list { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .feature { align-items: center; padding: 1.6rem 2.4rem; }
}

/* ---------- 13. Scuola ---------- */
/* card delle materie (.subject-card, .pdf-list…): main.js le stampa solo dentro #subjectsGrid, che non è
   più nella home (leggeva i materiali dal browser di chi visita: era sempre vuota). Restano pronte se torna;
   la sezione ora usa le tre card .school-card (13b) */
.subject-card {
  padding: 2rem;
  align-self: start;
  transition: background-color .15s var(--ease-in), rotate .12s var(--ease-in);
}
@media (hover: hover) { .subject-card:hover { background: var(--green); } }
.subject-card-header:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 1.6rem; }
.school-subfolder__name:focus-visible { outline: none; box-shadow: var(--focus); border-radius: .6rem; }
.subject-card.open { background: var(--white); }
.subject-card-header { display: flex; align-items: center; gap: 1.5rem; }
.subject-icon {
  display: grid; place-items: center;
  width: 5rem; height: 5rem; flex: none;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: 50%;
}
.subject-icon svg { width: 2.4rem; height: 2.4rem; }
.subject-info { flex: 1; min-width: 0; }
.subject-name { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); line-height: 1.25; overflow-wrap: anywhere; -webkit-text-stroke: 0; }
.subject-count { font-family: var(--font-special); font-weight: 300; font-size: 1.6rem; margin-top: .2rem; -webkit-font-smoothing: auto; }
.subject-card-toggle {
  display: grid; place-items: center;
  width: 4rem; height: 4rem; flex: none;
  margin-left: auto;
  border: var(--bw) solid var(--brown);
  border-radius: 50%;
  font-size: 1.2rem;
  transition: rotate .25s var(--ease-out-4), background-color .15s, color .15s;
}
.subject-card.open .subject-card-toggle { rotate: 180deg; background: var(--brown); color: var(--bg); }
.pdf-list {
  display: flex; flex-direction: column; gap: .8rem;
  max-height: 0; overflow: hidden; opacity: 0;
  visibility: hidden; /* le righe chiuse non ricevono il focus */
  transition: max-height .45s var(--ease-in-out), opacity .3s, margin .3s, visibility 0s linear .45s;
}
.subject-card.open .pdf-list { max-height: 200rem; opacity: 1; margin-top: 1.5rem; visibility: visible; transition-delay: 0s; }
.pdf-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.4rem;
  background: var(--bg);
  border: 1px solid var(--brown);
  border-radius: 1.6rem;
  font-size: 1.6rem; line-height: 1.3;
}
.pdf-item[style] { font-size: 1.5rem !important; opacity: 1 !important; }
.pdf-item > svg { width: 1.6rem; height: 1.6rem; flex: none; }
.pdf-item > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pdf-dl { flex: none !important; font-family: var(--font-special); font-weight: 300; font-size: 1.4rem; opacity: 1 !important; }
.school-new-badge {
  flex: none !important;
  padding: .1rem .8rem !important;
  background: var(--pink);
  color: var(--brown);
  border: 1px solid var(--brown);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 1.2rem !important; font-weight: 600; line-height: 1.5;
  letter-spacing: .03em;
  -webkit-text-stroke: 0;
  white-space: nowrap;
}
.school-subfolder { flex-wrap: wrap; }
.school-sub-arrow { flex: none !important; font-size: 1rem; transition: rotate .2s var(--ease-out-4); }
.school-subfolder.sub-open > .school-sub-arrow { rotate: 90deg; }
.school-sublist { display: none; flex-direction: column; gap: .6rem; width: 100%; margin-top: .8rem; padding-left: 1.2rem; }
.school-subfolder.sub-open > .school-sublist { display: flex; }
/* stato vuoto stampato da main.js (stili inline pensati per un'altra scala) */
#subjectsGrid > div[style] { font-family: var(--font-body) !important; font-size: var(--fs-base) !important; opacity: 1 !important; }
#subjectsGrid > div[style]:first-child:not(:has(a)) { font-family: var(--font-special) !important; font-weight: 300 !important; font-synthesis: none; -webkit-font-smoothing: auto; }
#subjectsGrid .btn { margin-inline: auto; font-size: var(--fs-base) !important; }
/* il link "Area riservata" stampato da main.js nella griglia viene tolto da glc.js (c'è già fuori dalla griglia) */

/* ---------- 13b. Scuola: app, blog e demo dell'area riservata ----------
   <div class="pg-grid school-grid"> con tre <a class="pg-card pg-card--link school-card"> (card della sezione P5).
   Da 1024px tre colonne con il disegno in testa; sotto, una colonna di card orizzontali con il disegno
   a sinistra, così sul telefono non ci sono tre riquadri alti uno sopra l'altro. */
.school-intro { text-wrap: balance; }
@media (max-width: 1023px) {
  .pg-grid.school-grid { grid-template-columns: minmax(0, 1fr); }
  .school-grid .school-card {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem 1.6rem;
  }
  .school-grid .school-card .pg-card__media {
    grid-row: 1 / span 2;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: var(--bw) solid var(--brown);
    border-radius: 1.6rem;
  }
  /* il disegno occupa circa il 70% della sua tela: ingrandito per riempire il riquadro piccolo */
  .school-grid .school-card .pg-card__media--contain img { padding: 0; scale: 1.25; }
  .school-grid .school-card .pg-card__label { align-self: end; }
  .school-grid .school-card .pg-card__title { align-self: start; }
  .school-grid .school-card .pg-card__text,
  .school-grid .school-card .pg-card__cta { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pg-grid.school-grid { max-width: 80rem; margin-inline: auto; }
  .school-grid .school-card { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; gap: 1rem 3rem; }
  .school-grid .school-card .pg-card__media { grid-row: 1 / span 4; }
  .school-grid .school-card .pg-card__text,
  .school-grid .school-card .pg-card__cta { grid-column: 2; }
  .school-grid .school-card .pg-card__label { align-self: start; }
}
/* telefoni stretti: riquadro e titolo un po' più piccoli, così il titolo non va su tre righe */
@media (max-width: 399px) {
  .school-grid .school-card { grid-template-columns: 7.2rem minmax(0, 1fr); column-gap: 1.2rem; }
  .school-grid .school-card .pg-card__title { font-size: 2.3rem; }
}
/* card larghe: inclinazione più leggera al passaggio del mouse */
@media (max-width: 1023px) and (hover: hover) {
  .school-grid .school-card:hover { rotate: .8deg; }
  .school-grid .school-card:nth-child(even):hover { rotate: -.8deg; }
}

/* ---------- 14. Chi sono ---------- */
.worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; width: 100%; }
@media (min-width: 768px) { .worlds { gap: 2.5rem; } }
@media (min-width: 1280px) { .worlds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.world {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 2rem 1.2rem 2.5rem;
  text-align: center;
  transition: rotate .1s var(--ease-in);
}
@media (hover: hover) {
  .world:hover { rotate: 5deg; }
  .world:nth-child(even):hover { rotate: -5deg; }
}
.world__icon { width: 6.4rem; height: 6.4rem; }
.world__title { font-family: var(--font-titles); font-size: 2.4rem; line-height: 1.1; -webkit-text-stroke: 0; }
.world p { font-size: 1.6rem; line-height: 1.3; }
@media (min-width: 768px) {
  .world { gap: 1.2rem; padding: 2.5rem 2rem 3rem; }
  .world__icon { width: 8rem; height: 8rem; }
  .world__title { font-size: 2.8rem; }
  .world p { font-size: var(--fs-base); }
}

/* ---------- 15. Recensioni e moduli ---------- */
.reviews-grid { margin-bottom: 4rem; }
@media (min-width: 768px) { .reviews-grid { margin-bottom: 6rem; } }
.reviews-grid:empty { display: block; }
.reviews-grid:empty::before {
  content: "Ancora nessuna recensione pubblicata: scrivi la prima!";
  display: block;
  text-align: center;
  font-family: var(--font-special); font-weight: 300;
  -webkit-font-smoothing: auto;
}
.review-card { display: flex; flex-direction: column; gap: 1.2rem; padding: 2.5rem; }
.review-stars { display: flex; gap: .2rem; font-size: 2.4rem; line-height: 1; }
.review-stars .star.filled { color: var(--brown); }
.review-stars .star.empty { color: var(--white); -webkit-text-stroke: 1.5px var(--brown); }
.review-text { font-size: var(--fs-base); line-height: 1.3; }
.review-author { font-family: var(--font-special); font-weight: 300; font-size: 1.6rem; -webkit-font-smoothing: auto; }

.form-card {
  width: 100%;
  padding: 3rem 2rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-l);
}
.review-form { max-width: 92rem; }
@media (min-width: 768px) { .form-card { padding: 4rem; } }
.form-card__title {
  margin-bottom: 2.5rem;
  font-family: var(--font-titles);
  font-size: var(--fs-xl);
  line-height: 1.15;
  text-align: center;
  -webkit-text-stroke: .02em currentColor;
}
.form-card form, form.form-card { display: flex; flex-direction: column; gap: 2rem; }
.form-row { display: grid; gap: 2rem; }
@media (min-width: 768px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.field > label, .field__label, .captcha-row > label {
  font-family: var(--font-special);
  font-weight: 300;
  font-size: var(--fs-base); line-height: 1.25;
  text-transform: none; letter-spacing: 0;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
}
.field input, .field select, .field textarea, .captcha-row input {
  width: 100%;
  padding: 1.2rem 2rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  font-size: var(--fs-base);
  line-height: 1.25;
  transition: background-color .15s var(--ease-in), box-shadow .1s var(--ease-in);
}
.field textarea { border-radius: var(--radius-m); min-height: 14rem; resize: none; }
.field select {
  appearance: none;
  padding-right: 5rem;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23593c3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2rem center / 1.6rem;
  cursor: var(--cursor-hover);
}
.field input:focus, .field select:focus, .field textarea:focus, .captcha-row input:focus { background-color: var(--green); outline: none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .captcha-row input:focus-visible { box-shadow: var(--focus); }

.star-picker { display: flex; gap: .4rem; }
.star-picker .star {
  font-size: 3.4rem; line-height: 1;
  color: var(--white);
  -webkit-text-stroke: 1.5px var(--brown);
  border-radius: .6rem;
  transition: color .1s var(--ease-in), scale .15s var(--ease-out-4);
}
.star-picker .star.filled { color: var(--brown); }
@media (hover: hover) { .star-picker .star:hover { scale: 1.18; } }
.star-picker .star:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }

.captcha-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.captcha-row > label { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.captcha-row input { width: 16rem; }
#revCaptchaQ, #cfCaptchaQ {
  display: inline-block;
  padding: .2rem 1.4rem;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  font-size: 1.8rem; letter-spacing: .02em; text-transform: none;
}

.form-consent { display: flex; align-items: flex-start; gap: 1.2rem; font-size: 1.6rem; line-height: 1.4; }
.form-consent a { text-decoration: underline; text-underline-offset: 3px; }
.form-consent input {
  appearance: none;
  flex: none;
  width: 2.4rem; height: 2.4rem;
  margin-top: .1rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: .7rem;
  transition: background-color .1s var(--ease-in);
}
.form-consent input:checked {
  background: var(--brown) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23f5f4f2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 1.6rem;
}
.form-consent input:focus-visible { outline: none; box-shadow: var(--focus); }
.form-card button[type="submit"] { align-self: center; margin-top: .5rem; }
/* main.js colora il bottone di verde/rosso dopo l'invio (bianco su verde = 2.2:1):
   resta marrone, l'esito lo dice già il toast */
#reviewForm button[type="submit"][style*="background"], #contactForm button[type="submit"][style*="background"] {
  background: var(--brown) !important; border-color: var(--brown) !important; color: var(--bg) !important;
}
@media (min-width: 768px) { .form-card button[type="submit"] { align-self: flex-start; } }

/* ---------- 16. Contatti ---------- */
.contact-grid { display: grid; gap: 2.5rem; width: 100%; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.contact-info {
  display: flex; flex-direction: column; gap: 2rem;
  padding: 3rem 2rem;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-l);
}
@media (min-width: 768px) { .contact-info { padding: 4rem; } }
.contact-item { display: flex; align-items: center; gap: 1.5rem; min-width: 0; }
.contact-item > div:last-child { min-width: 0; }
.contact-item-icon {
  display: grid; place-items: center;
  width: 5rem; height: 5rem; flex: none;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: 50%;
}
.contact-item-icon svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-item h3 { font-family: var(--font-special); font-weight: 300; font-size: 1.8rem; line-height: 1.3; -webkit-font-smoothing: auto; }
.contact-item p { font-size: var(--fs-base); overflow-wrap: anywhere; }
.contact-item a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: all .1s var(--ease-in); }
@media (hover: hover) { .contact-item a:hover { text-decoration-line: none; } }
.social-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: .5rem; }

/* ---------- 17. Dal blog / Dopo il lavoro ---------- */
.read {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1rem;
  width: 100%;
  padding-bottom: 8rem;
  text-align: center;
}
.read__eyebrow { font-size: var(--fs-base); line-height: 1.25; }
.read__title { font-family: var(--font-titles); font-size: var(--fs-2xl); line-height: 1.1; -webkit-text-stroke: .02em currentColor; }
.read__img { width: 15rem; height: auto; animation: glc-wiggle 3.6s var(--ease-in-out) 1s infinite; transform-origin: 50% 85%; }
.read__intro { font-size: var(--fs-xl); line-height: 1.15; font-weight: 600; text-wrap: balance; }
@media (min-width: 768px) { .read__intro { max-width: 75%; } }
@media (min-width: 1280px) { .read__intro { max-width: 66.6667%; } }
.read__row { display: flex; flex-direction: column; gap: 2.5rem; width: 100%; margin-top: 3rem; }
@media (min-width: 768px) { .read__row { flex-direction: row; justify-content: center; } }
.read-card {
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  width: 100%;
  padding: 2rem 1.5rem 3rem;
  text-align: center;
  transition: all .1s var(--ease-in);
}
@media (min-width: 768px) { .read-card { width: 33.3333%; } }
.read-card__label { font-size: var(--fs-base); line-height: 1.25; }
.read-card__title { font-size: var(--fs-base); line-height: 1.25; text-wrap: balance; }
.read-card__cta { width: fit-content; margin-inline: auto; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
@media (hover: hover) {
  .read-card:hover { rotate: 5deg; }
  .read-card:hover .read-card__cta { text-decoration-line: none; }
}
.read-card:focus-visible { outline: none; box-shadow: var(--focus); }
.read__btn { margin-top: 4rem; }

/* ---------- 18. Footer ----------
   Stesso linguaggio della card "In breve": card rosa con bordo marrone e mezzatinta animata attorno
   (da 768px), il bicchiere che dondola sull'angolo, indirizzo e siti come bottoni a pillola, etichette
   in Bitcount e una fascia finale marrone con i link legali a pillola (verdi al passaggio).
   Il footer è identico su tutte le pagine (anche app/ e area riservata): le sue regole stanno qui; solo
   glc-app.css rimette i colori dei suoi bottoni, perché nelle app .gs-app .btn ha un altro aspetto. */
.footer {
  position: relative;
  display: flex; flex-direction: column; gap: 1.5rem;
  width: 100%;
  padding: 6rem 1rem 2.5rem;
}
@media (min-width: 768px) { .footer { gap: 2rem; padding: 8rem 2.5rem 2.5rem; } }
/* telefono: il bottone WhatsApp (fisso in basso a destra) non copre l'ultima riga */
@media (max-width: 767px) { .footer { padding-bottom: 9rem; } }

/* contenitore della card: la mezzatinta (z-index -10) resta chiusa qui dentro grazie a isolation */
.footer__rel { position: relative; isolation: isolate; border-radius: var(--radius-l); }
@media (min-width: 768px) { .footer__rel { padding: 2rem; } }
.footer__card {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem;
  padding: 4rem 2rem 3rem;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-l);
}
@media (min-width: 768px) { .footer__card { gap: 4rem; padding: 5.5rem 5rem 4rem; } }
@media (min-width: 1024px) {
  .footer__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "hello links" "studio studio";
    column-gap: 5rem; align-items: start;
    padding: 5.5rem 5.5rem 4.5rem;
  }
  .footer__hello { grid-area: hello; }
  .footer__links { grid-area: links; padding-top: 1rem; }
  .footer__studio { grid-area: studio; }
}
@media (min-width: 1280px) { .footer__card { column-gap: 6rem; padding: 6rem 7rem 4.5rem; } }

/* saluto: titolo grande e indirizzo email */
.footer__hello { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; min-width: 0; }
.footer__title {
  font-family: var(--font-titles);
  font-size: var(--fs-2xl);
  line-height: 1.05;
  -webkit-text-stroke: .02em currentColor;
}
.footer__row1 { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 100%; }
@media (min-width: 768px) { .footer__row1 { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.5rem; } }
.footer__lead {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  font-size: 1.6rem; line-height: 1.2; white-space: nowrap;
}
@media (min-width: 768px) { .footer__lead { font-size: var(--fs-base); } }
.footer__arrow { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.footer .btn { transition: background-color .1s var(--ease-in), color .1s var(--ease-in), rotate .15s var(--ease-out-4); }
.footer__mail { max-width: 100%; }
@media (max-width: 359px) { .footer__mail { white-space: normal; overflow-wrap: anywhere; } }
@media (hover: hover) {
  .footer .btn:hover { rotate: -3deg; }
  .footer .btn:hover .btn__arrow { translate: .3rem 0; }
}

/* siti e link alla home: pillole bianche e verdi */
.footer__links { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.footer__row2 { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.footer__sites { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer__site, .footer__chip { font-size: 1.6rem; white-space: normal; text-align: left; }
@media (min-width: 768px) { .footer__site, .footer__chip { font-size: 1.8rem; } }
.footer__site { background: var(--white); }
.footer__chip { background: var(--green); }
.footer__note { font-family: var(--font-special); font-weight: 300; font-synthesis: none; font-size: .85em; white-space: nowrap; }

/* "Lavoro anche su…": logo in un tondo bianco, sopra una riga tratteggiata */
.footer__studio {
  display: flex; align-items: center; gap: 1.5rem;
  padding-top: 2.5rem;
  border-top: var(--bw) dashed var(--brown);
}
@media (max-width: 479px) { .footer__studio { flex-direction: column; align-items: flex-start; } }
@media (min-width: 768px) { .footer__studio { gap: 2rem; padding-top: 3rem; } }
.footer__studio-img {
  flex: none; display: grid; place-items: center;
  width: 7.2rem; height: 7.2rem; padding: 1.2rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: 50%;
}
@media (min-width: 768px) { .footer__studio-img { width: 9rem; height: 9rem; padding: 1.6rem; } }
.footer__studio-img img { width: 100%; height: auto; }
.footer__studio-text { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; min-width: 0; font-size: 1.6rem; }
@media (min-width: 768px) { .footer__studio-text { font-size: var(--fs-base); } }

/* il bicchiere (doodle-1-trasparente.webp, fondo con canale alfa) dondola sull'angolo della card */
.footer__sticker {
  position: absolute; z-index: 2; top: 0; right: .5rem;
  width: 12rem;
  translate: 0 -50%;
  pointer-events: none;
}
.footer__sticker img { width: 100%; height: auto; animation: glc-wiggle 3.2s var(--ease-in-out) infinite; transform-origin: 50% 85%; }
/* il bicchiere reagisce al mouse (glc.js, sezione 13): sotto non c'è nessun link o bottone, solo il bordo della card */
.footer__sticker img { pointer-events: auto; }
@media (min-width: 768px) { .footer__sticker { width: 18rem; right: 4%; translate: 0 -38%; } }
@media (min-width: 1280px) { .footer__sticker { width: 21rem; right: 6%; } }

/* fascia finale marrone: © e link legali a pillola */
.footer__bottom {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem;
  width: 100%;
  padding: 2rem 2rem 2.2rem;
  background: var(--brown); color: var(--bg);
  border-radius: var(--radius-m);
}
@media (min-width: 768px) { .footer__bottom { padding: 2.4rem 3rem 2.6rem; } }
@media (min-width: 1024px) {
  .footer__bottom {
    flex-direction: row; justify-content: space-between; align-items: center; gap: 2rem;
    padding: 1.2rem 1.2rem 1.2rem 3rem;
    border-radius: 9999px;
  }
}
.footer__bottom > p { font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto; font-size: 1.6rem; line-height: 1.3; }
.footer__legal { display: flex; flex-wrap: wrap; gap: .8rem; font-size: 1.4rem; line-height: 1.3; }
/* il bottone WhatsApp (fisso in basso a destra) non copre "Pausa animazioni" a fondo pagina */
@media (min-width: 768px) { .footer__legal { margin-right: 7rem; } }
@media (min-width: 1024px) { .footer__legal { justify-content: flex-end; } }
.footer__legal a, .footer__legal button {
  display: inline-flex; align-items: center;
  padding: .6rem 1.4rem;
  color: var(--bg);
  border: 1px solid var(--bg);
  border-radius: 9999px;
  font-size: inherit; line-height: inherit;
  transition: background-color .15s var(--ease-in), color .15s var(--ease-in), border-color .15s var(--ease-in), rotate .15s var(--ease-out-4);
}
@media (hover: hover) {
  .footer__legal a:hover, .footer__legal button:hover { background: var(--green); color: var(--brown); border-color: var(--green); rotate: -4deg; }
}
.footer__legal a:focus-visible, .footer__legal button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.footer__legal a[aria-current="page"] { background: var(--pink); color: var(--brown); border-color: var(--pink); font-weight: 600; }
/* ---------- 19. Banner cookie (consent.js) ---------- */
/* come il riferimento: paragrafo, due bottoni marroni e il link "Preferenze >".
   I toggle compaiono solo dopo il primo clic su #cookieSave (glc.js aggiunge .show-prefs). */
.cookie-banner {
  position: fixed; left: 1.6rem; bottom: 1.6rem; z-index: 998;
  display: none;
  width: 600px; max-width: calc(100% - 3.2rem);
  max-height: calc(100vh - 3.2rem); max-height: calc(100dvh - 3.2rem);
  overflow: auto;
  padding: 3.2rem;
  background: var(--white);
  color: var(--brown);
  border: 2px solid var(--brown);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  font-family: var(--font-body);
  font-size: 1.6rem; line-height: 2.4rem;
}
.cookie-banner.visible { display: block; animation: glc-cookie-in .35s ease-out .3s both; }
@keyframes glc-cookie-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
/* banner aperto: un elemento che riceve il focus vicino al fondo non finisce sotto il banner (WCAG 2.4.11) */
html:has(#cookieBanner.visible) { scroll-padding-bottom: 50vh; }
@media (min-width: 600px) { html:has(#cookieBanner.visible) { scroll-padding-bottom: 32rem; } }
/* il titolo resta per i lettori di schermo */
.cookie-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* menu mobile aperto: il banner non deve coprire i link (torna alla chiusura) */
body.menu-open .cookie-banner { visibility: hidden; }
.cookie-text p { margin: 0; }
.cookie-text a { text-decoration: underline; text-underline-offset: 3px; display: inline-block; border-radius: 5px; }
.cookie-text a:focus-visible { outline: none; box-shadow: var(--focus); }
.cookie-toggle-group { display: none; flex-wrap: wrap; gap: 1rem 2.4rem; }
.cookie-banner.show-prefs .cookie-toggle-group { display: flex; margin-top: 1.6rem; }
.cookie-toggle-row { display: flex; align-items: center; gap: 1rem; }
.cookie-switch { position: relative; display: inline-block; flex: none; width: 4.6rem; height: 2.6rem; }
.cookie-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: var(--cursor-hover); }
.cookie-slider { position: absolute; inset: 0; background: var(--white); border: 2px solid var(--brown); border-radius: 9999px; transition: background-color .15s ease-out; }
.cookie-slider::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--brown);
  transition: left .15s ease-out, background-color .15s ease-out;
}
.cookie-switch input:checked + .cookie-slider { background: var(--brown); }
.cookie-switch input:checked + .cookie-slider::before { left: calc(100% - 2rem); background: var(--white); }
.cookie-switch input:focus-visible + .cookie-slider { box-shadow: var(--focus); }
.cookie-switch.disabled { opacity: .7; }
.cookie-switch.disabled input { cursor: not-allowed; }
/* < 600: bottoni a tutta larghezza uno sotto l'altro, come il riferimento */
.cookie-actions { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.4rem; }
@media (min-width: 600px) { .cookie-actions { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.cookie-btn {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--brown);
  color: var(--white);
  border: 2px solid var(--brown);
  border-radius: 5px;
  font-size: 1.6rem; line-height: 2.4rem;
  text-align: center;
  transition: background-color .1s var(--ease-in), color .1s var(--ease-in);
}
@media (hover: hover) { .cookie-btn:hover { background: var(--white); color: var(--brown); } }
.cookie-btn:focus-visible { outline: none; box-shadow: var(--focus); }
/* #cookieSave = link testuale "Preferenze >" */
#cookieSave {
  align-self: flex-start;
  padding: 1rem 0;
  background: none;
  border: 0;
  color: var(--brown);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#cookieSave::after { content: ">"; display: inline-block; margin-left: .6rem; text-decoration: none; }
@media (min-width: 600px) { #cookieSave { align-self: auto; } }
@media (hover: hover) { #cookieSave:hover { background: none; color: var(--brown); text-decoration: none; } }
#cookieSave:focus-visible { box-shadow: none; outline: 2px solid var(--brown); outline-offset: 2px; border-radius: 2px; }

/* ---------- 20. Toast dei moduli (main.js, stili inline) ---------- */
#gsFormToast {
  background: var(--white) !important;
  color: var(--brown) !important;
  border: 2px solid var(--brown) !important;
  border-radius: var(--radius-m) !important;
  box-shadow: var(--shadow-pop) !important;
  font-family: var(--font-body) !important;
  padding: 3.2rem !important;
  max-width: 42rem !important;
}
#gsFormToast svg { stroke: var(--brown); }
#gsFormToast > div { color: var(--brown) !important; font-size: 1.8rem !important; line-height: 1.35 !important; }
#gsFormToast > div:first-of-type { font-family: var(--font-titles) !important; font-size: 2.6rem !important; font-weight: 400 !important; line-height: 1.15 !important; }
#gsFormToastBg { background: #0003 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------- 21. WhatsApp ---------- */
.wa-fab {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40;
  display: grid; place-items: center;
  width: 5.6rem; height: 5.6rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: 50%;
  transition: background-color .15s var(--ease-in), rotate .15s var(--ease-out-4), scale .15s var(--ease-out-4);
}
.wa-fab svg { width: 2.6rem; height: 2.6rem; fill: var(--brown); }
.wa-fab-pulse { display: none; }
@media (min-width: 768px) { .wa-fab { right: 2.5rem; bottom: 2.5rem; } }
@media (hover: hover) { .wa-fab:hover { background: var(--green); rotate: -8deg; } }
.wa-fab:active { scale: .92; }
.wa-fab:focus-visible { outline: none; box-shadow: var(--focus); }
body.menu-open .wa-fab { opacity: 0; pointer-events: none; }

/* ---------- 22. Reveal (main.js aggiunge .visible) ---------- */
.js .reveal {
  opacity: 0;
  filter: blur(10px);
  transition: opacity .5s var(--ease-out-4), filter .5s var(--ease-out-4);
}
.js .reveal.visible { opacity: 1; filter: none; }

/* ---------- 23. Pausa delle animazioni (WCAG 2.2.2) ----------
   Il passaggio del mouse (o il focus) sulla card "In breve" ferma striscia e mezzatinta;
   il bottone "Pausa animazioni" nel footer (glc.js) le ferma tutte e ricorda la scelta. */
.banner__rel:hover .marquee__track, .banner__rel:focus-within .marquee__track,
.banner__rel:hover .halftone-inner, .banner__rel:focus-within .halftone-inner { animation-play-state: paused; }
html.glc-paused .marquee__track, html.glc-paused .halftone-inner, html.glc-paused .banner__sticker,
html.glc-paused .read__img, html.glc-paused .footer__sticker img, html.glc-paused .site-preview-scroll,
html.glc-paused .gs-logo path { animation-play-state: paused !important; }
/* i video (copertine, ottagono) partono al passaggio del mouse; su telefono e tablet partono da soli quando
   arrivano sullo schermo scorrendo (glc.js sezione 12). glc.js li ferma anche con "Pausa animazioni" */

/* ---------- 24. Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .marquee__track, .halftone-inner, .banner__sticker, .read__img, .footer__sticker img, .site-preview-scroll { animation: none !important; }
  .aka-card, .js .reveal { opacity: 1 !important; filter: none !important; rotate: none !important; animation: none !important; }
  .project-card:hover, .site-card:hover, .world:hover, .read-card:hover, .feature:hover, .video-frame:hover .video-frame__play,
  .footer .btn:hover, .footer__legal a:hover, .footer__legal button:hover { rotate: none !important; }
  .motion-toggle { display: none; } /* niente da mettere in pausa */
  .cover-card__video, .octagon__video { display: none; }
  .gs-logo path { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; } /* logo GS fermo e intero */
}

/* ---------- 25. Stampa ---------- */
@media print {
  .js .content, .js .reveal, .aka-card { opacity: 1 !important; filter: none !important; animation: none !important; }
  .nav, .wa-fab, .cookie-banner, .marquee, .motion-toggle, .skip-link { display: none !important; }
}

/* =====================================================================
   PAGINE INTERNE — blog, gintoneria, forum, privacy, cookie
   Livello aggiunto in coda: tutte le classi hanno il prefisso .pg- (più due
   aggiunte che sulla home non esistono: input[type=file] e .btn__arrow--left),
   quindi nessuna regola della homepage cambia. Riusa i token di sopra.
   Guscio:  <main class="main pg-main" id="contenuto" tabindex="-1">
   Stili di una sola pagina: css/glc-<pagina>.css, caricato DOPO questo file.
   Riferimento per chi costruisce le pagine: anteprima-glc/PAGINE-BRIEF.md
   ===================================================================== */

/* ---------- P0. Pagina interna: <body class="theme-minimal pg-page"> ---------- */
/* vecchie variabili di main.css ancora citate negli stili inline (HTML e JS) di blog.html e forum.html:
   qui puntano ai colori nuovi. Solo sulle pagine interne (la home non ha .pg-page). */
.pg-page {
  --text: var(--brown);
  --text-muted: color-mix(in oklab, var(--brown) 80%, var(--bg));
  --border: var(--brown);
  --bg2: var(--white);
  --card: var(--white);
  --accent-soft: var(--pink);
}
/* voce della pagina corrente nel menu (aria-current="page"; sulla home non c'è) */
.navbar__links a[aria-current="page"], .mobile-menu__links a[aria-current="page"] {
  text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
}

/* ---------- P1. Guscio e contenitori ---------- */
.pg-main { gap: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .pg-main { gap: 6rem; padding-bottom: 8rem; } }
.pg-wrap { width: 100%; max-width: 160rem; margin-inline: auto; }
.pg-wrap--narrow { max-width: 96rem; }
.pg-stack { display: flex; flex-direction: column; gap: 2.5rem; width: 100%; min-width: 0; }
@media (min-width: 768px) { .pg-stack { gap: 4rem; } }
.pg-stack--tight { gap: 1.5rem; }
@media (min-width: 768px) { .pg-stack--tight { gap: 2rem; } }

/* ---------- P2. Intestazione della pagina ---------- */
/* <header class="pg-head [pg-head--card] [pg-head--split]">
     <div class="pg-head__text"> .pg-back? · .pg-overline · h1.pg-title · .pg-intro|.pg-lead · .pg-meta? · .pg-actions? </div>
     <figure class="pg-illu">…</figure>   (facoltativa)
   </header> */
.pg-head {
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  width: 100%;
  text-align: center;
}
.pg-head__text { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; min-width: 0; }
.pg-head .pg-back { margin-bottom: 1rem; }
.pg-head .pg-actions { margin-top: 1.5rem; }
.pg-overline {
  font-family: var(--font-special);
  font-weight: 300;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  font-size: var(--fs-base);
  line-height: 1.25;
}
.pg-title {
  font-family: var(--font-titles);
  font-size: var(--fs-3xl);
  line-height: 1.05;
  -webkit-text-stroke: .02em currentColor;
  text-wrap: balance;
}
.pg-title--md { font-size: var(--fs-2xl); line-height: 1.1; }  /* titoli lunghi (articolo, discussione) */
.pg-intro { max-width: 60rem; font-size: var(--fs-base); line-height: 1.4; text-wrap: pretty; }
@media (min-width: 1024px) { .pg-intro { max-width: 75rem; } }
.pg-lead { font-size: var(--fs-xl); line-height: 1.15; font-weight: 600; text-wrap: balance; }
@media (min-width: 768px) { .pg-lead { max-width: 75%; } }
@media (min-width: 1280px) { .pg-lead { max-width: 66.6667%; } }
/* variante card lilla (come "aka" e "In breve") */
.pg-head--card {
  padding: 4rem 2rem;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-l);
}
@media (min-width: 768px) { .pg-head--card { padding: 6rem 5rem; } }
.pg-head--green { background: var(--green); }
/* variante a due colonne da 1024px: testo a sinistra, illustrazione a destra */
@media (min-width: 1024px) {
  .pg-head--split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 4rem;
    text-align: left;
  }
  .pg-head--split .pg-head__text { align-items: flex-start; }
  .pg-head--split .pg-actions, .pg-head--split .pg-meta { justify-content: flex-start; }
  .pg-head--split .pg-lead { max-width: none; }
  .pg-head--split .pg-illu { max-width: none; }
}

/* ---------- P3. Illustrazione (immagini di Giuseppe in assets/images/glc/) ---------- */
/* <figure class="pg-illu [pg-illu--frame] [pg-illu--gray]" data-glc-hover>
     <img src="assets/images/glc/…-poster-760.webp" alt="" width="760" height="570">
     <video class="pg-illu__video js-hover-video" data-src="assets/video/glc/….mp4" muted loop playsinline preload="none"
            disablepictureinpicture aria-hidden="true" tabindex="-1"></video>   (facoltativo: parte al passaggio del mouse, da 768px)
   </figure> */
.pg-illu { position: relative; width: 100%; max-width: 56rem; margin-inline: auto; }
.pg-illu > img, .pg-illu > picture, .pg-illu > picture > img { display: block; width: 100%; height: auto; }
/* come sulla home: il fondo bianco dei disegni sparisce sul beige/lilla */
.pg-illu img[src*="glc/"], .pg-illu__video { mix-blend-mode: multiply; filter: grayscale(var(--illu-gray, 0)) brightness(1.04); }
.pg-illu img[src*="glc/"] { transition: filter .15s var(--ease-in); }
.pg-illu figcaption {
  margin-top: 1rem;
  font-family: var(--font-special); font-weight: 300; font-size: 1.6rem; line-height: 1.3;
  text-align: center; -webkit-font-smoothing: auto;
}
.pg-illu__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .15s var(--ease-in), filter .15s var(--ease-in); pointer-events: none;
}
.pg-illu__video.has-video { opacity: 1; }
/* cornice (come la copertina "Gintoneria" e il blocco video) */
.pg-illu--frame { overflow: hidden; background: var(--bg); border: var(--bw) solid var(--brown); border-radius: var(--radius-m); }
@media (min-width: 768px) { .pg-illu--frame { border-radius: var(--radius-l); } }
/* grigio → colore al passaggio del mouse (come le copertine), solo da 768px e solo con un mouse vero:
   su telefoni e tablet (touch) resta a colori. Come sulla home il grigio va sul disegno (--illu-gray),
   non sulla figura: fondo e cornice restano del loro colore. */
@media (min-width: 768px) {
  .pg-illu--gray { background: var(--bg); }
}
@media (min-width: 768px) and (hover: hover) {
  .pg-illu--gray { --illu-gray: 1; }
  .pg-illu--gray:focus-within, [data-glc-hover]:focus-visible .pg-illu--gray { --illu-gray: 0; }
  .pg-illu--gray:hover, [data-glc-hover]:hover .pg-illu--gray { --illu-gray: 0; }
}
/* adesivo che dondola (come il doodle di "Dopo il lavoro"). Il bianco del disegno diventa trasparente
   con il filtro #glc-knockout (come il limone della home): funziona anche dentro contenitori sticky,
   ruotati o con z-index, dove il multiply non vedrebbe lo sfondo */
.pg-doodle {
  width: 12rem; height: auto;
  filter: url(#glc-knockout);
  animation: glc-wiggle 3.6s var(--ease-in-out) 1s infinite;
  transform-origin: 50% 85%;
}
@media (min-width: 768px) { .pg-doodle { width: 15rem; } }

/* ---------- P4. Testo lungo: articoli, informative, regolamenti ---------- */
.pg-prose {
  width: 100%;
  max-width: 40em;             /* ~70 caratteri per riga a ogni dimensione */
  margin-inline: auto;
  font-size: var(--fs-base);
  line-height: 1.55;
  text-align: left;
  overflow-wrap: break-word;
}
.pg-prose > * + * { margin-top: 1em; }
.pg-prose > :first-child { margin-top: 0; }
.pg-prose h2 {
  margin-top: 1.8em;
  font-family: var(--font-titles);
  font-size: calc(var(--fs-xl) * .8);
  line-height: 1.15;
  -webkit-text-stroke: .02em currentColor;
  text-wrap: balance;
}
.pg-prose h3 { margin-top: 1.5em; font-weight: 600; font-size: 1.1em; line-height: 1.3; }
.pg-prose h4 {
  margin-top: 1.4em;
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  line-height: 1.3;
}
.pg-prose h2 + *, .pg-prose h3 + *, .pg-prose h4 + * { margin-top: .6em; }
.pg-prose a {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  transition: all .1s var(--ease-in);
}
@media (hover: hover) { .pg-prose a:hover { text-decoration-line: none; } }
.pg-prose em, .pg-prose i { font-style: italic; }
.pg-prose ul > li { position: relative; padding-left: 1.5em; }
.pg-prose ul > li::before {
  content: ""; position: absolute; left: .3em; top: .6em;
  width: .5em; height: .5em;
  background: var(--pink);
  border: 1.5px solid var(--brown);
  border-radius: 50%;
}
.pg-prose ol { list-style: decimal; padding-left: 1.5em; }
.pg-prose ol > li { padding-left: .3em; }
.pg-prose ol > li::marker { font-weight: 600; }
.pg-prose li + li { margin-top: .5em; }
.pg-prose li > ul, .pg-prose li > ol { margin-top: .5em; }
.pg-prose blockquote {
  padding: 2rem 2.4rem;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-m);
  font-weight: 600;
  line-height: 1.4;
}
.pg-prose blockquote > * + * { margin-top: .8em; }
.pg-prose blockquote cite, .pg-prose blockquote footer {
  display: block;
  font-family: var(--font-special); font-weight: 300; font-style: normal; font-size: 1.6rem; -webkit-font-smoothing: auto;
}
/* nomi tecnici (cookie, file) nel carattere Bitcount del sito: niente monospace di sistema fuori dai blocchi di codice */
.pg-prose code, .pg-table code, .pg-code {
  padding: .05em .45em;
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  font-size: .9em;
  background: var(--green);
  border: 1px solid var(--brown);
  border-radius: .6rem;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.pg-prose pre {
  overflow-x: auto;
  padding: 1.6rem 2rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-m);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82em; line-height: 1.5;
}
.pg-prose pre code { padding: 0; font-family: inherit; font-weight: inherit; font-size: inherit; background: none; border: 0; border-radius: 0; overflow-wrap: normal; }
.pg-prose hr { height: 0; margin-block: 2.5em; border-top: var(--bw) solid var(--brown); }
.pg-prose img, .pg-prose video, .pg-prose iframe { max-width: 100%; height: auto; border: var(--bw) solid var(--brown); border-radius: var(--radius-m); }
.pg-prose figure { margin-block: 1.6em; }
.pg-prose figcaption {
  margin-top: .8rem;
  font-family: var(--font-special); font-weight: 300; font-size: 1.6rem; line-height: 1.3;
  text-align: center; -webkit-font-smoothing: auto;
}
.pg-prose mark { padding: 0 .15em; background: var(--green); color: inherit; }
.pg-prose small, .pg-small { font-size: 1.4rem; line-height: 1.45; }

/* tabelle (cookie policy): sempre dentro il contenitore che scorre di lato su telefono
   <div class="pg-table" role="region" aria-label="…" tabindex="0"><table>…</table></div> */
.pg-table {
  width: 100%;
  overflow-x: auto;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-m);
  -webkit-overflow-scrolling: touch;
}
.pg-table:focus-visible { outline: none; box-shadow: var(--focus); }
.pg-table table { width: 100%; min-width: 56rem; border-collapse: collapse; font-size: 1.6rem; line-height: 1.4; text-align: left; }
@media (min-width: 768px) { .pg-table table { font-size: 1.7rem; } }
.pg-table th {
  padding: 1.2rem 1.6rem;
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  white-space: nowrap;
  background: var(--pink);
  border-bottom: var(--bw) solid var(--brown);
}
.pg-table td { padding: 1.2rem 1.6rem; vertical-align: top; border-top: 1px solid color-mix(in oklab, var(--brown) 35%, transparent); }
.pg-table tbody tr:first-child td { border-top: 0; }
.pg-table th + th, .pg-table td + td { border-left: 1px solid color-mix(in oklab, var(--brown) 35%, transparent); }

/* ---------- P5. Card bianca e griglia ---------- */
/* <article class="pg-card [pg-card--pink|--green] [pg-card--lg]"> …
   <a class="pg-card pg-card--link" href="…"> (card intera cliccabile: inclinazione al passaggio del mouse) */
.pg-card {
  position: relative;
  display: flex; flex-direction: column; gap: 1.2rem;
  min-width: 0;
  padding: 2rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-m);
  text-align: left;
}
@media (min-width: 768px) { .pg-card { padding: 2.5rem 3rem 3rem; } }
.pg-card--pink { background: var(--pink); }
.pg-card--green { background: var(--green); }
.pg-card--lg { padding: 3rem 2rem; border-radius: var(--radius-l); }
@media (min-width: 768px) { .pg-card--lg { padding: 4rem; } }
.pg-card--center { align-items: center; text-align: center; }
.pg-card--link { transition: rotate .12s var(--ease-in), background-color .15s var(--ease-in); }
@media (hover: hover) {
  .pg-card--link:hover { rotate: 2deg; }
  .pg-card--link:nth-child(even):hover { rotate: -2deg; }
  .pg-card--link:hover .pg-card__cta { text-decoration-line: none; }
}
.pg-card--link:focus-visible { outline: none; box-shadow: var(--focus); }
/* immagine in testa alla card (a filo dei bordi) */
.pg-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: -2rem -2rem .4rem;
  overflow: hidden;
  background: var(--halftone), var(--bg);
  border-bottom: var(--bw) solid var(--brown);
  border-radius: calc(var(--radius-m) - var(--bw)) calc(var(--radius-m) - var(--bw)) 0 0;
}
@media (min-width: 768px) { .pg-card__media { margin: -2.5rem -3rem .4rem; } }
.pg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: filter .15s var(--ease-in); }
.pg-card__media img[src*="glc/"] { mix-blend-mode: multiply; filter: brightness(1.04); }
/* disegno isolato (doodle quadrato): intero e centrato sulla mezzatinta invece che ritagliato */
.pg-card__media--contain img { object-fit: contain; padding: 1rem; }
@media (min-width: 768px) and (hover: hover) {
  .pg-card--link .pg-card__media img { filter: grayscale(100%); }
  .pg-card--link:hover .pg-card__media img { filter: grayscale(0%); }
  .pg-card--link .pg-card__media img[src*="glc/"] { filter: grayscale(100%) brightness(1.04); }
  .pg-card--link:hover .pg-card__media img[src*="glc/"] { filter: brightness(1.04); }
  /* doodle trasparenti (card Scuola della home): niente multiply né schiarita, solo grigio → colore.
     Servono !important per battere la regola generale img[src*="-trasparente"] { filter: none !important } */
  .pg-card--link .pg-card__media img[src*="-trasparente"] { filter: grayscale(100%) !important; }
  .pg-card--link:is(:hover, :focus-visible) .pg-card__media img[src*="-trasparente"] { filter: none !important; }
}
.pg-card__label { font-family: var(--font-special); font-weight: 300; font-synthesis: none; font-size: 1.8rem; line-height: 1.3; -webkit-font-smoothing: auto; }
.pg-card__title { font-family: var(--font-titles); font-size: 2.6rem; line-height: 1.1; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .pg-card__title { font-size: clamp(2.6rem, 2.1vw, 3.4rem); } }
.pg-card__title--small { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); line-height: 1.25; }
.pg-card__text { font-size: var(--fs-base); line-height: 1.35; }
.pg-card__cta {
  width: fit-content;
  margin-top: auto; padding-top: .6rem;
  text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
  transition: all .1s var(--ease-in);
}
.pg-card--center .pg-card__cta { margin-inline: auto; }
@media (hover: hover) { a.pg-card__cta:hover { text-decoration-line: none; } }
/* griglia: 1 colonna, 2 da 768px, 3 da 1024px (--2: al massimo 2, --4: 4 da 1280px) */
.pg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; width: 100%; }
@media (min-width: 768px) { .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .pg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- P6. Due colonne (si impilano sotto 1024px) ---------- */
/* <div class="pg-cols [pg-cols--even|--aside-left]"> <div>contenuto</div> <aside class="pg-aside [pg-aside--sticky]">…</aside> </div> */
.pg-cols { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2.5rem; width: 100%; }
@media (min-width: 1024px) {
  .pg-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 4rem; }
  .pg-cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-cols--aside-left { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.pg-aside { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
@media (min-width: 1024px) { .pg-aside--sticky { position: sticky; top: 11rem; } }

/* ---------- P7. Avvisi, etichette, filtri, meta ---------- */
/* <div class="pg-notice [pg-notice--pink|--white]" role="note"><span class="pg-notice__icon" aria-hidden="true"><svg…></span>
     <div><strong class="pg-notice__title">Titolo</strong><p>Testo</p></div></div> */
.pg-notice {
  display: flex; align-items: flex-start; gap: 1.5rem;
  width: 100%;
  padding: 1.6rem 2rem;
  background: var(--green);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-m);
  font-size: 1.6rem; line-height: 1.45;
  text-align: left;
}
@media (min-width: 768px) { .pg-notice { padding: 2rem 2.5rem; font-size: 1.8rem; } }
.pg-notice--pink { background: var(--pink); }
.pg-notice--white { background: var(--white); }
.pg-notice > div { min-width: 0; }
.pg-notice__icon {
  display: grid; place-items: center;
  width: 4rem; height: 4rem; flex: none;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: 50%;
}
.pg-notice__icon svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pg-notice__title {
  display: block; margin-bottom: .3rem;
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  font-size: 1.8rem; line-height: 1.3;
}
.pg-notice a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* etichetta a pillola (Bitcount): tipo di cookie, categoria, "nuovo"… */
.pg-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  width: fit-content;
  padding: .2rem 1.1rem;
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  font-size: 1.4rem; line-height: 1.4; letter-spacing: .02em;
  max-width: 100%;
  vertical-align: middle;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
}
.pg-badge--green { background: var(--green); }
.pg-badge--white { background: var(--white); }
.pg-badge--solid { background: var(--brown); color: var(--bg); }
/* filtri a pillola (stesso aspetto di .filter-tab, che resta riservato al portfolio della home):
   attivo con .active, aria-pressed="true", aria-selected="true" o aria-current */
.pg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
@media (min-width: 768px) { .pg-chips { gap: 1.5rem; } }
.pg-chip {
  padding: .8rem 1.8rem;
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  font-size: var(--fs-base);
  line-height: 1.25;
  white-space: nowrap;
  background: transparent;
  transition: all .1s var(--ease-in);
}
.pg-chip.active, .pg-chip[aria-pressed="true"], .pg-chip[aria-selected="true"], .pg-chip[aria-current] { background: var(--brown); color: var(--bg); }
@media (hover: hover) { .pg-chip:hover { background: var(--brown); color: var(--bg); } }
.pg-chip:focus-visible { outline: none; box-shadow: var(--focus); }
@media (max-width: 399px) {
  .pg-chips { gap: .6rem; }
  .pg-chip { padding: .6rem 1.2rem; }
}
/* riga di dati (data, categoria, autore…) */
.pg-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem;
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  font-size: 1.6rem; line-height: 1.3;
}
.pg-head .pg-meta { justify-content: center; }
/* avatar tondo (iniziali o immagine) */
.pg-avatar {
  display: grid; place-items: center;
  width: 4.8rem; height: 4.8rem; flex: none;
  overflow: hidden;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: 50%;
  font-family: var(--font-titles); font-size: 1.8rem; line-height: 1;
  text-transform: uppercase;
}
.pg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pg-avatar--lg { width: 7.2rem; height: 7.2rem; font-size: 2.6rem; }
/* stato vuoto / caricamento */
.pg-empty {
  width: 100%;
  padding: 3rem 1rem;
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  font-size: var(--fs-base); line-height: 1.3;
  text-align: center;
}
.pg-divider { width: 100%; height: 0; border-top: var(--bw) solid var(--brown); }

/* ---------- P8. Link "indietro", gruppi di bottoni, moduli ---------- */
/* <a class="pg-back" href="index.html"><svg class="pg-back__arrow" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M14.5 8h-13M7 2.5 1.5 8 7 13.5"/></svg>Torna alla home</a>
   (anche <button type="button" class="pg-back">) */
.pg-back {
  display: inline-flex; align-items: center; gap: .8rem;
  width: fit-content;
  font-size: var(--fs-base); line-height: 1.25;
  text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
  transition: all .1s var(--ease-in);
}
.pg-back__arrow {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate .15s var(--ease-out-4);
}
@media (hover: hover) {
  .pg-back:hover { text-decoration-line: none; }
  .pg-back:hover .pg-back__arrow { translate: -.4rem 0; }
}
.pg-back:focus-visible { outline: none; box-shadow: var(--focus); border-radius: .6rem; }
/* freccia della home (.btn__arrow) girata verso sinistra, per un .btn "indietro" */
.btn__arrow--left { rotate: 180deg; }
/* gruppo di bottoni (.btn della home) */
.pg-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; }
.pg-actions--start { justify-content: flex-start; }
/* moduli: si usano .form-card, .form-row, .field, .form-consent, .captcha-row, .btn--solid della home.
   In più: campo file e nota sotto il campo */
.field input[type="file"] {
  padding: 1rem;
  border-radius: var(--radius-m);
  font-size: 1.6rem;
  cursor: var(--cursor-hover);
}
.field input[type="file"]::file-selector-button {
  margin-right: 1.2rem;
  padding: .5rem 1.4rem;
  font: inherit;
  color: var(--brown);
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  cursor: var(--cursor-hover);
  transition: background-color .1s var(--ease-in), color .1s var(--ease-in);
}
@media (hover: hover) { .field input[type="file"]::file-selector-button:hover { background: var(--brown); color: var(--bg); } }
.pg-hint { font-size: 1.4rem; line-height: 1.4; }

/* ---------- P9. Pausa, movimento ridotto, stampa (per le classi qui sopra) ---------- */
html.glc-paused .pg-doodle { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .pg-doodle { animation: none !important; }
  .pg-card--link:hover, .pg-card--link:nth-child(even):hover { rotate: none !important; }
  .pg-back:hover .pg-back__arrow { translate: none; }
  .pg-illu__video { display: none; }
}
@media print {
  .pg-illu__video, .pg-doodle { display: none !important; }
  .pg-table { overflow: visible; }
}

/* =====================================================================
   LOADER — js/glc-loader.js
   A ogni apertura del sito e a ogni ricarica (non passando da una pagina all'altra): lo script inline nel <head>
   (prima dei fogli di stile) mette html.glc-ld e carica js/glc-loader.js; senza JavaScript
   non esiste. Tutto è fixed sopra la pagina: quando sparisce non si sposta niente, e il
   contenuto resta nel DOM sotto il telo. Pagine admin escluse.
   ===================================================================== */
/* ---------- L1. Telo beige subito, prima che arrivi lo script ----------
   Se js/glc-loader.js non arriva (o arriva tardi), sparisce da solo dopo 2 s: il ritardo conta da quando
   il telo compare, quindi non resta più del limite del loader (LATE = 2 s in glc-loader.js). Un loader
   comparso prima ha il suo fondo opaco e copre la pagina da solo. */
html.glc-ld body::after {
  content: ""; position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  animation: glc-ld-failsafe .2s var(--ease-in) 1.8s forwards;
}
@keyframes glc-ld-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- L2. Schermata ---------- */
.glc-loader {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem;
  padding: 2rem 1.6rem calc(4.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  color: var(--brown);
  font-family: var(--font-body);
  text-align: center;
  -webkit-user-select: none; user-select: none;
  cursor: var(--cursor-hover);
  transition: opacity .3s var(--ease-in);
  /* riserva se lo script si interrompe: sparisce da solo, dopo il limite del loader
     (giro intero dell'animazione: al massimo ~6,5 s dal primo disegno + 0,3 s di dissolvenza) */
  animation: glc-ld-failsafe .3s var(--ease-in) 7s forwards;
}
.glc-loader.is-out { opacity: 0; pointer-events: none; }
.glc-loader__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ritratto nell'ottagono come la card "aka": fondo verde, disegno in multiply, bordo marrone */
.glc-loader__portrait { position: relative; flex: none; width: min(24rem, 58vw, 40vh); width: min(24rem, 58vw, 40svh); aspect-ratio: 1; }
.glc-loader__portrait::before { content: ""; position: absolute; inset: 0; background: var(--green); clip-path: url(#glcLoaderOct); }
.glc-loader__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  clip-path: url(#glcLoaderOct);
  mix-blend-mode: multiply;
}
/* l'animazione parte dal primo fotogramma (= il poster): scambio secco, senza due multiply sovrapposti */
.glc-loader__anim { opacity: 0; }
.glc-loader__portrait.is-anim .glc-loader__anim { opacity: 1; }
.glc-loader__portrait.is-anim .glc-loader__poster { opacity: 0; }
.glc-loader__border { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--brown); stroke-width: 2; pointer-events: none; }

/* barra: pillola marrone, riempimento lilla a strisce lime che scorrono */
.glc-loader__row { display: flex; align-items: center; gap: 1.2rem; width: min(34rem, 100%); }
.glc-loader__bar {
  position: relative; flex: 1 1 auto;
  height: 2.4rem; padding: .3rem;
  background: var(--white);
  border: 2px solid var(--brown);
  border-radius: 9999px;
  overflow: hidden;
}
.glc-loader__fill { position: relative; width: 0; height: 100%; overflow: hidden; background: var(--pink); border-radius: 9999px; }
.glc-loader__fill::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -2.4rem; right: 0;
  background: linear-gradient(135deg, #dcf5bd 25%, transparent 25% 50%, #dcf5bd 50% 75%, transparent 75%) 0 0 / 2.4rem 2.4rem;
  animation: glc-ld-stripes .9s linear infinite;
}
@keyframes glc-ld-stripes { to { transform: translateX(2.4rem); } }
.glc-loader__pct {
  flex: none; min-width: 4.2ch;
  font-family: var(--font-special); font-weight: 300; font-synthesis: none;
  font-size: 2.4rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: left; /* vicino alla barra; la larghezza riservata resta: nessun layout shift */
}
/* larghezza fissa: quando la frase cambia il riquadro non si sposta (nessun layout shift) */
.glc-loader__line { width: min(34rem, 100%); min-height: 1.25em; font-size: var(--fs-base); line-height: 1.25; text-wrap: balance; }
.glc-loader__skip {
  position: absolute; left: 1.6rem; right: 1.6rem; bottom: calc(1.8rem + env(safe-area-inset-bottom, 0px));
  font-size: 1.4rem; line-height: 1.3;
}
@media (min-width: 768px) {
  .glc-loader { gap: 2.4rem; }
  .glc-loader__portrait { width: min(28rem, 40vh); width: min(28rem, 40svh); }
  .glc-loader__row { width: 38rem; }
  .glc-loader__bar { height: 2.8rem; }
}

/* ---------- L3. Pausa, movimento ridotto, stampa ---------- */
html.glc-paused .glc-loader__fill::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .glc-loader__anim { display: none; }
  .glc-loader__fill::before { animation: none; }
}
@media print {
  .glc-loader, html.glc-ld body::after { display: none !important; }
}