/* MM Portfolio — foglio di stile unico.
   Tutto deriva da cinque token primitivi (--h, --s, --radius, --ratio via --fs-*, --d):
   il token playground li sposta e il sito intero segue. Valori di partenza = sito live
   (#8b5cf6 = hsl 258 90% 66%). */

/* 1. Token ---------------------------------------------------------------- */
:root {
  --h: 258;
  --s: 90%;
  --c: 1; /* saturazione normalizzata per l'OKLCH del tema chiaro: --s / 90% */
  --radius: 16px;
  --d: 1;
  /* scala tipografica del playground per i titoli a misura fissa: (rapporto / 1,25)^(n/2),
     scritti da tokens.js e parts/head-inline.php; 1 = scala del sito */
  --tk1: 1; --tk2: 1; --tk4: 1; --tk6: 1;
  --fs-0: 1rem; --fs-1: 1.25rem; --fs-2: 1.563rem; --fs-3: 1.953rem; --fs-4: 2.441rem; --fs-5: 3.052rem; --fs-6: 3.815rem;

  --bg: #050505;
  --bg-elevated: #0d0a12;
  --text: #f0f0f0;
  --text-2: rgba(240, 240, 240, .62);
  --border: rgba(255, 255, 255, .08);
  --glass-border: rgba(255, 255, 255, .14);
  --dot: rgba(255, 255, 255, .07);
  --nav-bg: rgba(8, 6, 12, .72);
  --shadow: rgba(0, 0, 0, .6);
  --accent: hsl(var(--h) var(--s) 66%);
  --accent-text: hsl(var(--h) var(--s) 77%);
  --accent-strong: hsl(var(--h) var(--s) 60%); /* fondo dei bottoni pieni: 5,6:1 col testo bianco */
  --accent-dim: hsl(var(--h) var(--s) 66% / .15);
  --accent-glow: hsl(var(--h) var(--s) 62% / .35);
  --glass-bg: hsl(var(--h) var(--s) 66% / .06);
  --glass-bg-hover: hsl(var(--h) var(--s) 66% / .12);
  --iso-base: hsl(var(--h) calc(var(--s) * .3) 34%);
  --iso-edge: hsl(var(--h) var(--s) 80% / .55);
  --numeral: hsl(var(--h) calc(var(--s) * .45) 30% / .55);
  --on-accent: var(--on-accent-dark, #fff); /* tokens.js imposta --on-accent-dark per le tinte chiare (tema scuro) */

  /* copertine delle card dei post: una proporzione sola per tutto il sito (blog, home, footer,
     menu), la stessa delle immagini fatte apposta in tools/post_art (Marco, 2026-10-09) */
  --post-card-ratio: 12 / 5;
  --font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --w-light: 300; --w-med: 500;

  --sp: calc(1.5rem * var(--d));
  /* niente contenitore fisso (richiesta di Marco, 2026-10-08): il sito va a tutta
     larghezza, e il margine laterale cresce con la finestra invece di fermarsi a 40px */
  --gutter: clamp(16px, 4vw, 120px);
  --header-h: 88px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .2s ease;
  --t-base: .3s ease;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #faf9fc;
  --bg-elevated: #f1edf9;
  --text: #17131f;
  --text-2: rgba(23, 19, 31, .64);
  --border: rgba(23, 19, 31, .1);
  --glass-border: rgba(23, 19, 31, .12);
  --dot: rgba(23, 19, 31, .06);
  --nav-bg: rgba(255, 255, 255, .74);
  --shadow: rgba(23, 19, 31, .14);
  /* nel tema chiaro la luminosita' HSL non basta: un lime al 50% su bianco fa 1,5:1.
     OKLCH ha la luminosita' percettiva, quindi il contrasto regge per ogni tinta del
     playground (misurato a passi di 15 gradi): testo 46% >= 5,5:1, accento 54% >= 3,9:1.
     +35: la tinta HSL dei token portata sulla scala OKLCH (viola 258 -> 293). */
  --accent: oklch(54% calc(.2 * var(--c)) calc(var(--h) + 35));
  --accent-text: oklch(46% calc(.2 * var(--c)) calc(var(--h) + 35));
  --accent-strong: oklch(46% calc(.2 * var(--c)) calc(var(--h) + 35));
  --on-accent: #fff;
  --accent-dim: hsl(var(--h) var(--s) 58% / .12);
  --accent-glow: hsl(var(--h) var(--s) 58% / .28);
  --glass-bg: hsl(var(--h) var(--s) 58% / .05);
  --glass-bg-hover: hsl(var(--h) var(--s) 58% / .1);
  --iso-base: hsl(var(--h) calc(var(--s) * .35) 84%);
  --iso-edge: hsl(var(--h) var(--s) 40% / .45);
  --numeral: hsl(var(--h) calc(var(--s) * .5) 70% / .45);
  color-scheme: light;
}

/* 1b. Alias dei nomi del child theme -------------------------------------- */
/* Gli stili portati con blog, privacy, contact e "Latest" (inc/ported/) usano i
   nomi dei token del child theme: qui puntano ai token nuovi, cosi' seguono
   anche loro il playground e il tema chiaro. */
:root {
  --bg-primary: var(--bg);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --accent-light: var(--accent-text);
  --border-subtle: var(--border);
  --font-display: var(--font-body);
  --font-button: var(--font-mono);
  --font-heading-weight: var(--w-med);
  --font-body-weight: var(--w-light);
  --radius-sm: calc(var(--radius) * .25);
  --radius-md: calc(var(--radius) * .5);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.75);
  --transition-fast: var(--t-fast);
  --transition-base: var(--t-base);
  --transition-slow: .6s var(--ease);
  --glass-bg-end: rgba(255, 255, 255, .02);
  --shadow-soft: var(--shadow);
  --shadow-strong: var(--shadow);
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* footer sempre in fondo, anche sulle pagine corte (Contact, 404): il <main>
     prende lo spazio che avanza. Header, intro, menu e pannelli sono fixed o
     sticky, quindi la colonna flex vede solo header, main e footer. */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .mm-footer { flex-shrink: 0; }
body::before { /* glow che segue l'accento + griglia di punti */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 92% -10%, var(--accent-glow), transparent 62%),
    radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 28px 28px;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--accent-text); text-underline-offset: .2em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, h3, h4 { font-weight: var(--w-med); line-height: 1.15; text-wrap: balance; margin: 0; }

.mono { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.mm-label { color: var(--text-2); }
.mm-muted { color: var(--text-2); }
.mm-small { font-size: .82rem; }
.mm-wrap { width: 100%; padding-inline: var(--gutter); }
.mm-section { padding-block: calc(var(--sp) * 2.5); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* contenuto invisibile finche' main.js non ha finito (parts/head-inline.php);
   se il JS non arriva, compare lo stesso dopo 3 s */
html.mm-init-pending main { visibility: hidden; animation: mm-show 0s 3s forwards; }
@keyframes mm-show { to { visibility: visible; } }

/* 3. Skip link ------------------------------------------------------------ */
.mm-skip {
  position: fixed; top: .75rem; left: .75rem; z-index: 1000; padding: .6em 1.1em;
  font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text); background: var(--bg-elevated); border: 1px solid var(--accent); border-radius: 4px;
  transform: translateY(calc(-100% - 1rem)); transition: transform var(--t-fast);
}
.mm-skip:focus { transform: none; }
main:focus { outline: none; }

/* 4. Bottoni, chip, pill ---------------------------------------------------- */
.mm-pill {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  padding: .7rem 1.15rem; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass-bg); color: var(--text);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.mm-pill:hover { border-color: var(--accent); background: var(--glass-bg-hover); }
.mm-pill--solid { background: var(--bg); border-color: var(--glass-border); }
.mm-pill kbd { font-family: var(--font-mono); font-size: .62rem; border: 1px solid var(--glass-border); border-radius: 4px; padding: 0 .35rem; color: var(--text-2); }
.mm-dial { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--accent), hsl(calc(var(--h) + 120) var(--s) 62%), hsl(calc(var(--h) + 240) var(--s) 62%), var(--accent)); }
.mm-plus { position: relative; width: 14px; height: 14px; display: inline-block; }
.mm-plus::before, .mm-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--t-base); }
.mm-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.mm-plus--x::before { transform: translate(-50%, -50%) rotate(45deg); }
.mm-plus--x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mm-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-border); background: none; cursor: pointer; color: var(--text-2); transition: color var(--t-fast), border-color var(--t-fast); }
.mm-icon-btn:hover { color: var(--text); border-color: var(--accent); }
.mm-icon-btn svg { width: 16px; height: 16px; }
.mm-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.mm-chip { display: inline-flex; width: fit-content; padding: .3rem .75rem; border: 1px solid var(--glass-border); border-radius: 999px; color: var(--text-2); text-decoration: none; transition: border-color var(--t-fast), color var(--t-fast); }
a.mm-chip:hover { border-color: var(--accent); color: var(--text); }
.mm-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--glass-border); background: none; color: var(--text); cursor: pointer; text-decoration: none; }
.mm-btn--accent { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.mm-btn--ghost:hover { border-color: var(--accent); }

/* 5. Header ----------------------------------------------------------------- */
.mm-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding-inline: var(--gutter);
  background: var(--nav-bg); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: transform .4s var(--ease);
}
.mm-header.is-hidden { transform: translateY(-100%); }
.mm-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); text-decoration: none; font-weight: var(--w-med); font-size: .8rem; text-transform: uppercase; line-height: 1.15; justify-self: start; }
.mm-brand small { display: block; text-transform: none; font-weight: var(--w-light); }
.mm-brand-mark { width: 34px; height: 34px; }
.mm-clock { color: var(--text-2); white-space: nowrap; }
.mm-header-tools { display: flex; align-items: center; gap: .6rem; justify-self: end; }
.mm-langs { display: flex; gap: .7rem; padding-right: .4rem; }
.mm-langs a { color: var(--text-2); text-decoration: none; }
.mm-langs a[aria-current], .mm-langs a:hover { color: var(--text); }
@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .mm-header { grid-template-columns: 1fr auto; }
  .mm-clock, .mm-langs { display: none; }
}
@media (max-width: 520px) { .mm-theme-toggle { display: none; } }

/* 6. Menu "dietro la pagina" ---------------------------------------------- */
/* Ripristinato dal child theme (style.css, sezione 27), richiesta di Marco del
   2026-10-08. Il menu non entra: sta fermo, ed e' la pagina che si ritira.
   .mm-frame e' un rettangolo fisso e vuoto con un'ombra da 100vmax che dipinge
   tutto quello che sta FUORI: chiuso non dipinge niente (ombra trasparente:
   su iOS un inset:0 non coincide con l'area visibile), aperto disegna la carta
   con gli angoli tondi. Il pannello sta sopra la cornice, tagliato da un
   clip-path che si apre con la stessa durata e la stessa curva: i due bordi
   restano incollati. Misure e curva (easeOutQuart, 600 ms) in
   md/menu-reveal/README.md. Niente stagger sulle voci: nel reference sono gia'
   ferme e a opacita' piena, e si leggono per la coda mentre la pagina scopre. */
:root {
  --side-w: clamp(300px, 27vw, 520px);
  --side-h: clamp(340px, 46vh, 440px);
  --side-gap: 15px;
  /* la pagina scivola dentro il proprio margine, ma solo per meta': con tutto il gutter
     il testo finiva a filo del bordo arrotondato della cornice, e sugli schermi larghi
     oltre (Marco, 2026-10-09: "non croppare la nav bar" sul blog). Resta sempre almeno
     mezzo gutter fra il bordo della carta e il contenuto. */
  --side-push: clamp(0px, calc(var(--gutter) * .5 - var(--side-gap)), 48px);
  --side-dur: .6s;
  --side-ease: cubic-bezier(.25, 1, .5, 1);
  --mm-side-ease: var(--side-ease); /* nome del child theme, lo usa la card Medium */
}
html { scrollbar-gutter: stable; }
html.mm-locked { overflow: hidden; }

.mm-frame {
  position: fixed; inset: 0; z-index: 79; pointer-events: none; border-radius: 0;
  box-shadow: 0 0 0 100vmax transparent;
  transition: box-shadow var(--side-dur) var(--side-ease), top var(--side-dur) var(--side-ease),
    right var(--side-dur) var(--side-ease), bottom var(--side-dur) var(--side-ease),
    left var(--side-dur) var(--side-ease), border-radius var(--side-dur) var(--side-ease);
}
.mm-frame::after { /* hairline: pagina e pannello sono scuri tutti e due */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--side-dur) var(--side-ease);
}
html.mm-side-open .mm-frame {
  top: var(--header-h); right: var(--side-w); bottom: var(--side-gap); left: var(--side-gap);
  border-radius: var(--radius); box-shadow: 0 0 0 100vmax var(--bg-elevated);
  pointer-events: auto; cursor: pointer;
}
html.mm-side-open .mm-frame::after { box-shadow: inset 0 0 0 1px var(--glass-border); }

/* la pagina trasla e basta: niente scala, come nel reference */
body > main, body > .mm-footer { transition: translate var(--side-dur) var(--side-ease); }
html.mm-side-open body > main, html.mm-side-open body > .mm-footer { translate: calc(-1 * var(--side-push)) 0; }

/* l'header resta sopra tutto, senza fondo: la carta comincia sotto di lui */
html.mm-side-open .mm-header { z-index: 85; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mm-menu-open .mm-plus::before, .mm-menu-open .mm-plus::after { transition: transform var(--side-dur) var(--side-ease); }
.mm-menu-open[aria-expanded="true"] .mm-plus::before { transform: translate(-50%, -50%) rotate(45deg); }
.mm-menu-open[aria-expanded="true"] .mm-plus::after { transform: translate(-50%, -50%) rotate(135deg); }

.mm-sidemenu {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--side-w); z-index: 80;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--header-h) clamp(24px, 2.4vw, 44px) 8vh;
  background: var(--bg-elevated); overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 0 100%); pointer-events: none;
  transition: clip-path var(--side-dur) var(--side-ease);
}
html.mm-side-open .mm-sidemenu { clip-path: inset(0 0 0 0); pointer-events: auto; }
.mm-sidemenu__label { margin: 0 0 clamp(20px, 3vh, 40px); font-size: .68rem; letter-spacing: .14em; color: var(--text-2); }
.mm-sidemenu nav { margin: 0; }
.mm-sidemenu-list { list-style: none; margin: 0; padding: 0; }
.mm-sidemenu-list a { position: relative; display: block; padding: .12em 0; text-decoration: none; }
.mm-sidemenu-list a span {
  font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.5; color: var(--text); transition: color var(--t-fast);
}
.mm-sidemenu-list a:hover span, .mm-sidemenu-list a[aria-current] span { color: var(--accent-text); }
/* il trattino segna la voce corrente, e compare anche all'hover e al focus (Marco, 2026-10-09) */
.mm-sidemenu-list a::before {
  content: "\2013"; position: absolute; left: -.85em; top: .12em;
  font-family: var(--font-mono); font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.5;
  color: var(--accent); opacity: 0; transition: opacity var(--t-fast);
}
.mm-sidemenu-list a[aria-current]::before,
.mm-sidemenu-list a:hover::before, .mm-sidemenu-list a:focus-visible::before { opacity: 1; }
@media (min-width: 992px) {
  .mm-sidemenu-list a { transition: transform .45s var(--side-ease); }
  .mm-sidemenu-list a:hover, .mm-sidemenu-list a:focus-visible { transform: translateX(16px); }
}
/* Invito a seguire su Instagram, sotto le voci (Marco, 2026-10-09) */
.mm-ig-follow {
  display: flex; align-items: center; gap: .85rem; margin-top: clamp(20px, 3.4vh, 36px); max-width: 360px;
  padding: .7rem .9rem; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) * .75);
  color: var(--text); text-decoration: none; transition: border-color var(--t-fast), background var(--t-fast);
}
.mm-ig-follow:hover, .mm-ig-follow:focus-visible { border-color: var(--accent); background: var(--accent-dim); }
.mm-ig-follow__icon { width: 26px; height: 26px; flex: none; color: var(--accent-text); }
.mm-ig-follow__text { display: grid; gap: .15rem; min-width: 0; }
.mm-ig-follow__cta { font-size: .95rem; }
.mm-ig-follow__handle { font-size: .62rem; color: var(--text-2); text-transform: none; letter-spacing: .04em; overflow-wrap: anywhere; }
.mm-ig-follow__arrow { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--text-2); transition: transform var(--t-fast); }
.mm-ig-follow:hover .mm-ig-follow__arrow { transform: translate(2px, -2px); color: var(--accent-text); }

@media (max-width: 767.98px) { .mm-ig-follow { margin-top: 14px; padding: .55rem .8rem; } }

/* lingua e tema: nell'header sopra i 900px, qui dentro sotto */
.mm-sidemenu-utils { display: none; }

/* Sotto i 1440 il menu scende dall'alto come fascia, e la pagina viene SPINTA
   giu' di quanto la fascia scende (meno l'header, che c'era gia'): la prima riga
   resta la prima riga, non tagliata dal bordo della carta. */
@media (max-width: 1439.98px) {
  .mm-sidemenu {
    left: 0; bottom: auto; width: auto; height: var(--side-h);
    padding: var(--header-h) var(--gutter) clamp(16px, 3vh, 32px);
    clip-path: inset(0 0 100% 0);
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 360px);
    grid-auto-rows: auto; align-content: center; column-gap: clamp(24px, 5vw, 80px);
  }
  .mm-sidemenu-list a { margin-left: .85em; }
  html.mm-side-open .mm-frame { top: var(--side-h); right: var(--side-gap); }
  html.mm-side-open body > main, html.mm-side-open body > .mm-footer { translate: 0 calc(var(--side-h) - var(--header-h)); }
}
@media (max-width: 991.98px) {
  .mm-sidemenu-list a span, .mm-sidemenu-list a::before { font-size: clamp(1.15rem, 5vw, 1.6rem); }
}
@media (max-width: 899.98px) {
  .mm-sidemenu-utils {
    display: flex; align-items: center; gap: 1rem;
    margin-top: clamp(22px, 4vh, 40px); padding-top: clamp(16px, 2.6vh, 28px); border-top: 1px solid var(--border);
  }
  .mm-sidemenu-utils .mm-langs { display: flex; font-size: .8rem; }
}
@media (max-width: 767.98px) {
  :root { --side-h: clamp(460px, 64vh, 560px); }
  .mm-sidemenu { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --side-dur: .01s; }
}
@keyframes mm-fade { from { opacity: 0; } }
@keyframes mm-rise { from { opacity: 0; transform: translateY(14px); } }

/* 7. Intro ---------------------------------------------------------------- */
.mm-intro { display: none; }
html.mm-intro-on .mm-intro {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; align-content: center; gap: 1.5rem;
  background: var(--bg); color: var(--text);
  transition: clip-path .9s var(--ease), opacity .3s ease;
  clip-path: inset(0 0 0 0);
}
html.mm-intro-on .mm-intro.is-done { clip-path: inset(0 0 100% 0); }
.mm-intro-logo { position: relative; width: clamp(236px, 31.5vw, 353px); height: clamp(236px, 31.5vw, 353px); }
.mm-intro-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* gli SVG piatti sono il fallback: compaiono solo se intro.js non prende il posto entro .6 s */
.mm-intro-logo .mm-mark-pencil { color: var(--accent-text); filter: drop-shadow(0 0 18px var(--accent-glow)); animation: mm-fade .5s ease both .6s; }
.mm-intro-logo .mm-mark-ring { animation: mm-fade .5s ease both .6s; }
.mm-intro-logo.is-iso .mm-mark-pencil, .mm-intro-logo.is-iso .mm-mark-ring { display: none; }
/* marchio isometrico (assets/js/intro.js) con l'alone dei moduli della sezione 10. Colore
   (--iso-base) e opacita' come le scatole dei moduli della home (.25 + .6 * luce). L'opacita' e'
   del gruppo .mm-intro-iso-solid (quella della faccia di fronte, ~.75): cosi' l'alone traspare
   come nei moduli, ma le copie dello spessore non si sommano e le due meta' dell'anello non
   lasciano giunture. Dentro, ogni faccia e' piena e scurita in proporzione (--of, --os dal JS).
   Il viewBox e' piu' largo del logo: l'SVG deborda dal contenitore, cosi' il logo finale ha la
   misura di prima (max-width: none contro la regola base degli svg). */
.mm-intro-logo svg.mm-intro-iso { inset: -17.7%; width: 135.4%; height: 135.4%; max-width: none; animation: mm-fade .35s ease both; filter: drop-shadow(0 18px 28px var(--accent-glow)); }
.mm-intro-iso-solid { opacity: .75; }
.mm-intro-iso use { stroke-linejoin: round; }
.mm-intro-iso .edge { fill: none; stroke: var(--iso-edge); stroke-width: .8; }
.mm-intro-iso .sides use { fill: color-mix(in oklab, var(--iso-base) calc(var(--os, .8) * 100%), black); }
.mm-intro-iso .face { fill: color-mix(in oklab, var(--iso-base) calc(var(--of, 1) * 100%), black); stroke: var(--iso-edge); stroke-width: .8; }
.mm-intro-progress { display: grid; justify-items: center; gap: .5rem; color: var(--text-2); }
.mm-intro-bar { width: 96px; height: 1px; background: var(--border); }
.mm-intro-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
html.mm-intro-on { overflow: hidden; }

/* 8. Hero ----------------------------------------------------------------- */
.mm-hero { display: grid; gap: calc(var(--sp) * .8); padding-block: calc(var(--sp) * 3) calc(var(--sp) * 2.5); }
.mm-eyebrow { color: var(--text-2); }
.mm-display { font-size: min(calc(var(--fs-6) * 2), 15vw); line-height: .9; letter-spacing: -.02em; }
.mm-display > span { display: block; }
.mm-display .mm-solid { color: var(--accent); text-transform: uppercase; }
.mm-display .mm-outline { color: transparent; -webkit-text-stroke: 1.5px var(--text); text-transform: uppercase; }
.mm-hero-role { font-size: var(--fs-1); letter-spacing: 0; line-height: 1.4; color: var(--accent-text); margin-top: calc(var(--sp) * .8); }
.mm-hero-avail { margin: 0; color: var(--text-2); text-transform: none; letter-spacing: .02em; font-size: .9rem; }
.mm-hero-tagline { margin: 0; color: var(--accent-text); text-transform: none; letter-spacing: .02em; font-size: 1.05rem; }
.mm-hero-bio { max-width: 62ch; color: var(--text-2); }
.mm-iso--hero { max-width: 340px; }

/* 9. Card e "What I do" ------------------------------------------------------ */
.mm-card {
  position: relative; overflow: hidden; display: grid; align-content: start; gap: calc(var(--sp) * .7);
  padding: calc(var(--sp) * 1.2); border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-bg), transparent 70%), var(--bg-elevated);
  transition: border-color var(--t-base), border-radius var(--t-base);
}
.mm-card:hover { border-color: var(--accent-dim); }
.mm-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp); margin-top: var(--sp); }
@media (max-width: 1100px) { .mm-tracks { grid-template-columns: minmax(0, 1fr); } }
.mm-track-num { position: absolute; right: .5rem; top: -.15em; font-size: calc(var(--fs-6) * 2); line-height: 1; font-weight: var(--w-med); color: var(--numeral); pointer-events: none; }
.mm-track-name { position: relative; font-size: var(--fs-2); text-transform: none; letter-spacing: .02em; color: var(--text); }
.mm-track-intro { margin: 0; color: var(--text-2); position: relative; }
.mm-track-steps { margin: 0; padding-left: 1.1rem; display: grid; gap: .6rem; color: var(--text-2); font-size: .92rem; }
.mm-track-steps li::marker { color: var(--accent); }

/* 10. Moduli isometrici (assets/js/iso.js) ---------------------------------- */
.mm-iso { display: grid; place-items: center; aspect-ratio: 1.3; width: 100%; }
/* Nelle card della home il box ha un'altezza fissa e il disegno ci sta dentro: con
   l'altezza decisa dal viewBox ogni modulo era alto in modo diverso e i testi sotto
   partivano a quote diverse. */
.mm-iso--card { max-width: 320px; justify-self: center; aspect-ratio: 1.1; min-height: 0; position: relative; }
.mm-iso.mm-iso--card svg { position: absolute; inset: 0; height: 100%; }
.mm-iso svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 28px var(--accent-glow)); }
.mm-iso polygon { stroke: var(--iso-edge); stroke-width: .8; stroke-linejoin: round; }
.mm-iso .b { fill: var(--iso-base); }
.mm-iso .a { fill: var(--accent); }

/* 11. Pagine e contenuti a blocchi --------------------------------------- */
.mm-page { padding-block: calc(var(--sp) * 3); }
.mm-page-head { margin-bottom: calc(var(--sp) * 1.5); }
.mm-h1 { font-size: var(--fs-5); }
.mm-prose { max-width: 70ch; }
.mm-prose > * + * { margin-top: 1em; }
.mm-prose p { color: var(--text-2); margin-bottom: 0; }
.mm-prose h2 { font-size: var(--fs-3); margin-top: 2em; }
.mm-prose h3 { font-size: var(--fs-2); margin-top: 1.6em; }
.mm-prose img { border-radius: calc(var(--radius) * .75); }
.mm-prose figcaption { color: var(--text-2); font-size: .85rem; margin-top: .5rem; }

/* 12. Footer ----------------------------------------------------------------- */
/* Tre livelli, sul modello della chiusura della pagina Peterman: l'invito a scrivere
   (titolo grande, ultima parola in accento, CTA), poi le colonne (chi, dove trovarmi,
   cosa scrivo, lingua), poi la riga legale. Sulla Contact il primo livello non c'e'. */
.mm-footer { margin-top: calc(var(--sp) * 3); padding-top: clamp(40px, 6vw, 110px); border-top: 1px solid var(--border); }
.mm-f-close {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(28px, 5vw, 96px); border-radius: calc(var(--radius) * 1.5);
  border: 1px solid var(--glass-border);
  background: linear-gradient(140deg, var(--accent-dim), var(--glass-bg) 55%, transparent);
}
.mm-f-close::after { /* alone dell'accento nell'angolo, come la .close di Peterman */
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -180px; bottom: -260px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 65%); filter: blur(30px); pointer-events: none;
}
@media (min-width: 1100px) { /* titolo a sinistra, invito e CTA a destra in basso */
  .mm-f-close { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 120px); align-items: end; }
  .mm-f-eyebrow, .mm-f-title { grid-column: 1; }
  .mm-f-act { grid-column: 2; grid-row: 2; }
  .mm-f-act > .mm-f-lede { margin-top: 0; }
}
.mm-f-eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin: 0; }
.mm-f-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
.mm-f-title {
  margin: 1.1rem 0 0; font-weight: var(--w-med); font-size: calc(clamp(40px, 5.6vw, 128px) * var(--tk6, 1)); line-height: .98; letter-spacing: -.03em;
  max-width: 13ch; text-wrap: balance; text-transform: none;
}
.mm-f-title em { font-style: normal; color: var(--accent-text); }
.mm-f-lede { margin: 1.4rem 0 0; max-width: 46ch; font-size: var(--t-lede); line-height: 1.5; color: var(--text-2); }
.mm-f-cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.mm-f-cta .mm-btn { padding: .95rem 1.5rem; }
.mm-f-mail { font-size: clamp(.95rem, 1.1vw, 1.1rem); font-weight: var(--w-med); max-width: 100%; transition: background var(--t-fast), translate .3s var(--ease); }
.mm-f-mail span { overflow-wrap: anywhere; }
.mm-f-mail:hover { background: var(--accent); translate: 0 -2px; }
.mm-f-mail svg { width: 18px; height: 18px; flex: none; }

.mm-f-cols {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .8fr);
  gap: clamp(32px, 4vw, 80px); padding-block: clamp(48px, 6vw, 104px);
}
.mm-f-brand p { margin: 0; }
.mm-f-brand .mm-brand-mark { width: 44px; height: 44px; color: var(--text); }
.mm-f-name { margin-top: 1.1rem !important; font-size: var(--t-h3); font-weight: var(--w-med); letter-spacing: -.01em; }
.mm-f-brand .mm-muted { margin-top: .35rem !important; font-size: .92rem; line-height: 1.5; }
.mm-f-col > .mm-label { margin: 0 0 1.1rem; }
.mm-f-links { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.mm-f-links a {
  display: inline-flex; align-items: baseline; gap: .55rem; color: var(--text); text-decoration: none; font-size: 1.05rem;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease), color var(--t-fast);
}
.mm-f-links a:hover { color: var(--accent-text); background-size: 100% 1px; }
.mm-f-links a[aria-current] { color: var(--accent-text); }
.mm-f-links a[aria-current]::before { content: ""; align-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mm-f-links .mono { font-size: .62rem; text-transform: none; letter-spacing: .04em; }
.mm-f-post { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; gap: .35rem 1rem; color: inherit; text-decoration: none; }
.mm-f-post img { grid-row: span 2; width: 100%; height: auto; aspect-ratio: var(--post-card-ratio); object-fit: cover; border-radius: calc(var(--radius) * .5); border: 1px solid var(--glass-border); transition: scale .5s var(--ease); }
.mm-f-post-label { font-size: .62rem; color: var(--text-2); }
.mm-f-post-title { font-size: 1.05rem; line-height: 1.35; color: var(--text); transition: color var(--t-fast); }
.mm-f-post:hover .mm-f-post-title { color: var(--accent-text); }
.mm-f-post:hover img { scale: 1.04; }
.mm-f-more { display: inline-block; margin-top: 1.1rem; font-size: .66rem; color: var(--accent-text); text-decoration: none; }
.mm-f-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* la riga legale lascia libero l'angolo in basso a destra: li' galleggia il bottone dei token */
.mm-f-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .6rem 2rem;
  padding-block: 1.5rem; border-top: 1px solid var(--border);
  font-size: .82rem; color: var(--text-2);
}
@media (min-width: 641px) { /* il banner dei cookie e' piu' largo del bottone dei token */
  body:has(.mm-cookie:not([hidden])) .mm-f-legal { padding-right: 380px; }
}
.mm-f-legal p { margin: 0; }
.mm-f-legal-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: .66rem; }
.mm-f-legal a { color: var(--text-2); text-decoration: none; transition: color var(--t-fast); }
.mm-f-legal a:hover { color: var(--text); }

@media (max-width: 1100px) {
  .mm-f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mm-f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "else lang" "writing writing"; gap: 40px 24px; }
  .mm-f-brand { grid-area: brand; } .mm-f-else { grid-area: else; } .mm-f-lang { grid-area: lang; } .mm-f-writing { grid-area: writing; }
  body:has(.mm-cookie:not([hidden])) .mm-f-legal { padding-bottom: 140px; } /* il banner copre il fondo */
  .mm-f-cta .mm-btn { width: 100%; justify-content: center; }
}

/* 13. Banner cookie --------------------------------------------------------- */
/* In basso a destra, nel posto del bottone dei token: a sinistra copriva la bio della
   home. Finche' il banner aspetta una scelta il bottone non c'e' (sezione 14a) ed entra
   con la sua animazione appena il banner si chiude: mai due elementi fissi sul fondo. */
.mm-cookie {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 70; max-width: 340px;
  display: grid; gap: .65rem; padding: .85rem 1rem;
  background: var(--bg-elevated); border: 1px solid var(--glass-border); border-radius: 10px;
  box-shadow: 0 12px 32px -12px var(--shadow); animation: mm-rise .5s var(--ease);
}
.mm-cookie p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-2); }
.mm-cookie-actions { display: flex; gap: .5rem; }
.mm-cookie .mm-btn { padding: .4rem .9rem; font-size: .66rem; }
@media (max-width: 500px) {
  .mm-cookie { left: .5rem; right: .5rem; bottom: max(.5rem, env(safe-area-inset-bottom)); max-width: none; grid-template-columns: 1fr auto; align-items: center; padding: .6rem .75rem; }
  .mm-cookie p { font-size: .68rem; }
  .mm-cookie-actions { flex-direction: column; }
}

/* 14. Pannello dei token ---------------------------------------------------- */
/* Popup al centro, sopra uno sfondo trasparente e sfocato: il sito si vede ancora e
   cambia colore mentre si muovono i cursori (Marco, 2026-10-09). Due colonne: a
   sinistra i comandi, a destra quello che ne esce (token semantici e azioni). */
.mm-tokens-backdrop {
  position: fixed; inset: 0; z-index: 89;
  background: color-mix(in oklab, var(--bg) 30%, transparent);
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  animation: mm-fade .3s var(--ease);
}
@keyframes mm-fade { from { opacity: 0; } }
.mm-tokens {
  position: fixed; z-index: 90; inset: 0; margin: auto; height: fit-content;
  width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "head head" "ctl side";
  gap: 1.4rem 2rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: color-mix(in oklab, var(--bg-elevated) 92%, transparent);
  box-shadow: 0 40px 120px -30px var(--shadow), 0 0 0 1px var(--accent-dim);
  animation: mm-pop .4s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes mm-pop { from { opacity: 0; scale: .94; translate: 0 12px; } }
.mm-tokens[hidden], .mm-tokens-backdrop[hidden], .mm-cookie[hidden] { display: none; }
.mm-tokens-head { grid-area: head; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.mm-tokens-head h2 { font-size: var(--fs-2); line-height: 1.1; }
.mm-tokens-head p { margin: .45rem 0 0; font-size: .92rem; color: var(--text-2); max-width: 52ch; }
/* tondo vero: dentro un flex allineato in alto non si allunga piu' in altezza */
.mm-tokens-close { flex: none; align-self: flex-start; width: 44px; height: 44px; aspect-ratio: 1; padding: 0; border-radius: 50%; }
.mm-tokens-controls { grid-area: ctl; display: grid; gap: 1.15rem; align-content: start; }
.mm-tokens-side { grid-area: side; display: grid; gap: 1.1rem; align-content: start; padding: 1.1rem 1.2rem; border-radius: 14px; background: color-mix(in oklab, var(--bg) 55%, transparent); border: 1px solid var(--border); }
.mm-ctl { display: grid; gap: .4rem; }
.mm-ctl-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.mm-ctl label { font-size: .9rem; }
.mm-ctl output { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: .85rem; font-family: var(--font-mono); }
.mm-ctl input[type="range"] { width: 100%; accent-color: var(--accent); }
#mm-t-h { appearance: none; -webkit-appearance: none; height: 8px; border-radius: 99px; background: linear-gradient(90deg, hsl(0 var(--s) 62%), hsl(60 var(--s) 62%), hsl(120 var(--s) 62%), hsl(180 var(--s) 62%), hsl(240 var(--s) 62%), hsl(300 var(--s) 62%), hsl(360 var(--s) 62%)); }
#mm-t-h::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--text); }
#mm-t-h::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--text); }
.mm-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.mm-preset { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem .3rem .35rem; border-radius: 999px; border: 1px solid var(--glass-border); background: none; cursor: pointer; font-size: .8rem; }
.mm-preset i { width: 14px; height: 14px; border-radius: 50%; }
.mm-preset small { color: var(--text-2); }
.mm-preset[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-dim); }
.mm-tokens-readout { display: grid; gap: .7rem; }
.mm-tokens-readout table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mm-tokens-readout td { padding: .45rem 0; border-bottom: 1px dashed var(--border); vertical-align: top; }
.mm-tokens-readout td:first-child { font-family: var(--font-mono); color: var(--accent-text); padding-right: .6rem; white-space: nowrap; }
.mm-tokens-readout td:last-child { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mm-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); margin-right: .35rem; vertical-align: -1px; }
.mm-tokens-readout p { margin: 0; font-size: .84rem; color: var(--text-2); line-height: 1.5; }
.mm-tokens-readout b { color: var(--text); font-weight: var(--w-med); }
.mm-tokens-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .3rem; }
.mm-tokens-actions small { color: var(--text-2); font-size: .75rem; flex-basis: 100%; min-height: 1em; }
.mm-tokens-rig { margin: 0; font-size: .82rem; }
@media (max-width: 720px) {
  .mm-tokens { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "ctl" "side"; inset: auto 0 0; margin: 0 auto 12px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
}

/* 14a. Linguetta dei token -------------------------------------------------- */
/* Attaccata al bordo destro a meta' altezza, verticale. A riposo e' un po' rientrata
   nel bordo e il ventaglio ondeggia piano; al passaggio (o al focus) esce, il bordo
   colorato gira piu' in fretta, il ventaglio si apre e compare il fumetto a sinistra. */
@property --fab-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.mm-fab-wrap {
  position: fixed; right: 0; top: 50%; z-index: 75; translate: 0 -50%;
  transition: opacity .3s var(--ease), translate .4s var(--ease);
  animation: mm-fab-in .9s cubic-bezier(.34, 1.56, .64, 1) 1s both;
}
@keyframes mm-fab-in { from { opacity: 0; translate: 100% -50%; } }
.mm-fab {
  --fab-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fab-bg: color-mix(in oklab, var(--bg-elevated) 88%, transparent);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .75rem; cursor: pointer;
  padding: .7rem .65rem 1rem .55rem; border-radius: 18px 0 0 18px; border: 1.5px solid transparent; border-right: 0; color: var(--text);
  background:
    linear-gradient(var(--fab-bg), var(--fab-bg)) padding-box,
    conic-gradient(from var(--fab-a), var(--accent), hsl(calc(var(--h) + 120) var(--s) 62%), hsl(calc(var(--h) + 240) var(--s) 64%), var(--accent)) border-box;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: -14px 0 36px -18px var(--shadow), 0 0 30px -14px var(--accent-glow);
  translate: 8px 0;
  transition: translate .45s var(--fab-spring), box-shadow .4s var(--ease), padding .45s var(--fab-spring);
  animation: mm-fab-spin 16s linear infinite;
}
@keyframes mm-fab-spin { to { --fab-a: 360deg; } }
.mm-fab-label { writing-mode: vertical-rl; rotate: 180deg; font-size: .72rem; letter-spacing: .18em; transition: color var(--t-fast); }
.mm-fab-fan {
  position: relative; display: block; width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in oklab, var(--bg) 70%, transparent); border: 1px solid var(--glass-border);
}
.mm-fab-fan i {
  position: absolute; left: 50%; bottom: 8px; width: 10px; height: 22px; margin-left: -5px; border-radius: 3px;
  transform-origin: 50% 100%; transition: transform .5s var(--fab-spring);
  animation: mm-fab-sway 6s ease-in-out infinite;
}
.mm-fab-fan i:nth-child(1) { background: hsl(calc(var(--h) + 240) var(--s) 64%); transform: rotate(-18deg); animation-delay: -2s; }
.mm-fab-fan i:nth-child(2) { background: hsl(calc(var(--h) + 120) var(--s) 62%); transform: rotate(18deg); animation-delay: -4s; }
.mm-fab-fan i:nth-child(3) { background: var(--accent); transform: rotate(0); }
@keyframes mm-fab-sway { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
.mm-fab::after { /* l'onda che parte al passaggio */
  content: ""; position: absolute; inset: -2px 0 -2px -2px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--accent); border-right: 0; opacity: 0;
}
.mm-fab:hover, .mm-fab:focus-visible {
  translate: 0 0; padding-left: .8rem; padding-right: .9rem;
  box-shadow: -18px 0 44px -16px var(--shadow), 0 0 44px -10px var(--accent-glow);
  animation: mm-fab-spin 3s linear infinite;
}
.mm-fab:hover::after, .mm-fab:focus-visible::after { animation: mm-fab-ring .8s ease-out .15s; }
.mm-fab:hover .mm-fab-label, .mm-fab:focus-visible .mm-fab-label { color: var(--accent-text); }
.mm-fab:hover .mm-fab-fan i, .mm-fab:focus-visible .mm-fab-fan i { animation: none; transition-delay: .08s; }
.mm-fab:hover .mm-fab-fan i:nth-child(1), .mm-fab:focus-visible .mm-fab-fan i:nth-child(1) { transform: rotate(-58deg) translateY(-1px); }
.mm-fab:hover .mm-fab-fan i:nth-child(2), .mm-fab:focus-visible .mm-fab-fan i:nth-child(2) { transform: rotate(58deg) translateY(-1px); }
.mm-fab:hover .mm-fab-fan i:nth-child(3), .mm-fab:focus-visible .mm-fab-fan i:nth-child(3) { transform: translateY(-3px) scaleY(1.14); }
.mm-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.mm-fab:active { scale: .95; }
@keyframes mm-fab-ring { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 1.5 1.12; } }

.mm-fab-tip {
  position: absolute; right: calc(100% + 16px); top: 50%; width: min(290px, calc(100vw - 100px));
  display: grid; gap: .35rem; padding: .95rem 1.05rem 1rem; border-radius: 16px;
  background: var(--bg-elevated); border: 1px solid var(--accent-dim);
  box-shadow: 0 24px 50px -20px var(--shadow), 0 0 40px -18px var(--accent-glow);
  font-size: .86rem; line-height: 1.45; color: var(--text-2);
  opacity: 0; translate: 10px -50%; scale: .9; transform-origin: 100% 50%; pointer-events: none;
  transition: opacity .2s ease, translate .45s cubic-bezier(.34, 1.56, .64, 1), scale .45s cubic-bezier(.34, 1.56, .64, 1);
}
.mm-fab-tip::after { /* la punta del fumetto, verso la linguetta */
  content: ""; position: absolute; right: -6px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; rotate: 45deg;
  background: var(--bg-elevated); border-top: 1px solid var(--accent-dim); border-right: 1px solid var(--accent-dim);
}
.mm-fab-tip strong { color: var(--text); font-weight: var(--w-med); font-size: .95rem; padding-right: 2rem; }
.mm-fab-key { position: absolute; top: .8rem; right: .9rem; }
.mm-fab-key kbd { font-family: var(--font-mono); font-size: .62rem; border: 1px solid var(--glass-border); border-radius: 4px; padding: .05rem .4rem; color: var(--text-2); }
@media (hover: none) { .mm-fab-key { display: none; } .mm-fab-tip strong { padding-right: 0; } } /* niente tastiera sul telefono */
@media (hover: hover) {
  .mm-fab-wrap:has(.mm-fab:hover) .mm-fab-tip { opacity: 1; translate: 0 -50%; scale: 1; transition-delay: .25s; }
}
.mm-fab-wrap:has(.mm-fab:focus-visible) .mm-fab-tip { opacity: 1; translate: 0 -50%; scale: 1; }
/* richiamo sulla home (tokens.js, nudge): stessa uscita dell'hover, piu' l'onda due volte e il fumetto */
.mm-fab-wrap.is-nudge .mm-fab, .mm-fab-wrap.is-nudge-soft .mm-fab {
  translate: 0 0; padding-left: .8rem; padding-right: .9rem;
  box-shadow: -18px 0 44px -16px var(--shadow), 0 0 50px -8px var(--accent-glow);
  animation: mm-fab-spin 3s linear infinite, mm-fab-wiggle 1.2s var(--ease) .3s 2;
}
.mm-fab-wrap.is-nudge .mm-fab::after, .mm-fab-wrap.is-nudge-soft .mm-fab::after { animation: mm-fab-ring 1s ease-out .4s 2; }
.mm-fab-wrap.is-nudge .mm-fab-label, .mm-fab-wrap.is-nudge-soft .mm-fab-label { color: var(--accent-text); }
.mm-fab-wrap.is-nudge .mm-fab-fan i, .mm-fab-wrap.is-nudge-soft .mm-fab-fan i { animation: none; transition-delay: .2s; }
.mm-fab-wrap.is-nudge .mm-fab-fan i:nth-child(1), .mm-fab-wrap.is-nudge-soft .mm-fab-fan i:nth-child(1) { transform: rotate(-58deg) translateY(-1px); }
.mm-fab-wrap.is-nudge .mm-fab-fan i:nth-child(2), .mm-fab-wrap.is-nudge-soft .mm-fab-fan i:nth-child(2) { transform: rotate(58deg) translateY(-1px); }
.mm-fab-wrap.is-nudge .mm-fab-fan i:nth-child(3), .mm-fab-wrap.is-nudge-soft .mm-fab-fan i:nth-child(3) { transform: translateY(-3px) scaleY(1.14); }
.mm-fab-wrap.is-nudge .mm-fab-tip { opacity: 1; translate: 0 -50%; scale: 1; transition-delay: .5s; }
@keyframes mm-fab-wiggle {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -7deg; } 40% { rotate: 5deg; } 60% { rotate: -3deg; } 80% { rotate: 1deg; }
}
html.mm-tokens-on .mm-fab-wrap { opacity: 0; translate: 100% -50%; pointer-events: none; }
html.mm-side-open .mm-fab-wrap { opacity: 0; pointer-events: none; }
@media (max-width: 520px) {
  .mm-fab { gap: .55rem; padding: .55rem .45rem .8rem .45rem; translate: 6px 0; }
  .mm-fab-fan { width: 32px; height: 32px; }
  .mm-fab-fan i { width: 8px; height: 17px; margin-left: -4px; bottom: 7px; }
  .mm-fab-label { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-fab-wrap, .mm-fab, .mm-fab:hover, .mm-fab:focus-visible, .mm-fab-fan i, .mm-fab::after, .mm-tokens, .mm-tokens-backdrop { animation: none !important; }
}

/* 14c. Popup di conferma del form Contact ---------------------------------- */
.mm-sent { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; }
.mm-sent-backdrop {
  position: absolute; inset: 0; background: color-mix(in oklab, var(--bg) 35%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s var(--ease);
}
.mm-sent-box {
  position: relative; width: min(440px, 100%); display: grid; gap: 1.1rem; justify-items: start;
  padding: clamp(1.5rem, 4vw, 2.2rem); border-radius: 22px; border: 1px solid var(--glass-border);
  background: var(--bg-elevated); box-shadow: 0 40px 120px -30px var(--shadow), 0 0 0 1px var(--accent-dim);
  opacity: 0; scale: .94; translate: 0 14px;
  transition: opacity .3s var(--ease), scale .5s cubic-bezier(.34, 1.4, .64, 1), translate .5s cubic-bezier(.34, 1.4, .64, 1);
}
.mm-sent.is-in .mm-sent-backdrop, .mm-sent.is-in .mm-sent-box { opacity: 1; scale: 1; translate: 0 0; }
.mm-sent.is-out .mm-sent-backdrop, .mm-sent.is-out .mm-sent-box { opacity: 0; transition-duration: .2s; }
.mm-sent-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; aspect-ratio: 1; padding: 0; border-radius: 50%; }
.mm-sent-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-dim); color: var(--accent-text); }
.mm-sent-mark svg { width: 26px; height: 26px; fill: currentColor; }
.mm-sent.is-in .mm-sent-mark svg { animation: mm-sent-fly .9s cubic-bezier(.34, 1.4, .64, 1) .1s both; }
@keyframes mm-sent-fly { from { translate: -14px 12px; scale: .6; opacity: 0; } }
.mm-sent-box h2 { margin: 0; font-size: var(--fs-3); line-height: 1.05; }
.mm-sent-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; width: 100%; }
.mm-sent-step { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 12px; border: 1px solid var(--border); color: var(--text-2); }
.mm-sent-step svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mm-sent-step circle { stroke-dasharray: 66; stroke-dashoffset: 66; }
.mm-sent-step path { stroke-dasharray: 16; stroke-dashoffset: 16; stroke-width: 2; }
.mm-sent.is-in .mm-sent-step circle { animation: mm-draw .5s var(--ease) forwards; }
.mm-sent.is-in .mm-sent-step path { animation: mm-draw .35s var(--ease) forwards; }
.mm-sent.is-in .mm-sent-step:nth-child(1) circle { animation-delay: .35s; }
.mm-sent.is-in .mm-sent-step:nth-child(1) path { animation-delay: .7s; }
.mm-sent.is-in .mm-sent-step:nth-child(2) circle { animation-delay: 1s; }
.mm-sent.is-in .mm-sent-step:nth-child(2) path { animation-delay: 1.35s; }
.mm-sent.is-in .mm-sent-step:nth-child(1) { animation: mm-step-on .3s var(--ease) .7s forwards; }
.mm-sent.is-in .mm-sent-step:nth-child(2) { animation: mm-step-on .3s var(--ease) 1.35s forwards; }
@keyframes mm-draw { to { stroke-dashoffset: 0; } }
@keyframes mm-step-on { to { color: var(--text); border-color: var(--accent-dim); background: color-mix(in oklab, var(--accent-dim) 40%, transparent); } }
.mm-sent-box p { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
  .mm-sent *, .mm-sent-box, .mm-sent-backdrop { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
}

/* 14b. Case study ---------------------------------------------------------- */
.mm-cover { margin: 0; height: min(78vh, 56vw); min-height: 280px; overflow: hidden; background: var(--bg-elevated); }
.mm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .mm-cover { height: auto; aspect-ratio: 4 / 5; } }

.mm-project-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: calc(var(--sp) * 2);
  padding-block: calc(var(--sp) * 2.5) calc(var(--sp) * 2);
}
@media (max-width: 960px) { .mm-project-intro { grid-template-columns: minmax(0, 1fr); } }
.mm-project-hero { display: grid; align-content: start; gap: calc(var(--sp) * .7); }
.mm-project-title { font-size: min(var(--fs-6), 11vw); line-height: .95; letter-spacing: -.01em; }
.mm-project-title .mm-solid { display: block; color: var(--accent); text-transform: uppercase; }
.mm-project-skill { display: block; margin-top: .9rem; font-size: .75rem; color: var(--text-2); }
.mm-project-hero p { margin: 0; }
.mm-project-lede { color: var(--accent-text); font-size: var(--fs-1); line-height: 1.45; max-width: 36ch; }
.mm-project-lede p { margin: 0; }
.mm-iso--project { max-width: 260px; justify-self: start; margin-top: var(--sp); }

/* Risultati: i numeri grandi fra intro e contenuto, il cambio di scala che mancava
   ai case study. Con dati d'esempio (.mm-results--sample, solo in anteprima) i valori
   sono tratteggiati e c'e' l'avviso, perche' non vengano scambiati per veri. */
.mm-results { padding-block: calc(var(--sp) * .5) calc(var(--sp) * 2); display: grid; gap: 1rem; }
.mm-results-title { margin: 0; font-size: .72rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.mm-results-flag {
  justify-self: start; margin: 0; padding: .3rem .7rem; border-radius: 999px; font-size: .66rem; letter-spacing: .06em;
  color: var(--text); background: repeating-linear-gradient(135deg, var(--accent-dim) 0 6px, transparent 6px 12px); border: 1px dashed var(--accent);
}
.mm-results-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-top: 1px solid var(--border); }
.mm-result { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .5rem; padding: 1.4rem 1.3rem 1.4rem 0; border-bottom: 1px solid var(--border); }
.mm-result + .mm-result { padding-left: 1.3rem; border-left: 1px solid var(--border); }
.mm-result dd { margin: 0; font-size: min(var(--fs-6), 14vw); font-weight: var(--w-med); line-height: .9; letter-spacing: -.02em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.mm-result dt { font-size: .95rem; color: var(--text-2); max-width: 24ch; }
.mm-results--sample .mm-result dd { text-decoration: underline dashed var(--accent) 2px; text-underline-offset: .12em; }
@media (max-width: 560px) {
  .mm-result, .mm-result + .mm-result { padding: 1.1rem 0; border-left: 0; }
}

/* WordPress avvolge il contenuto dei gruppi in un contenitore interno per i temi
   classici: per la griglia della tabella e delle sezioni non deve esistere */
.mm-project-facts .wp-block-group__inner-container,
.mm-blocks .wp-block-group__inner-container { display: contents; }

/* la tabella dei fatti: etichetta a sinistra, testo a destra */
.mm-project-facts { border: 1px solid var(--glass-border); border-radius: var(--radius); background: linear-gradient(160deg, var(--glass-bg), transparent 70%), var(--bg-elevated); align-self: start; }
.mm-project-facts .mm-facts { display: contents; }
.mm-fact { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border); }
.mm-project-facts > :last-child, .mm-project-facts .mm-facts > :last-child { border-bottom: 0; }
.mm-fact h2, .mm-fact h3 { font-family: var(--font-mono); font-weight: 400; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); padding-top: .2rem; }
.mm-fact h2, .mm-fact h2, .mm-fact h3 { grid-column: 1; }
.mm-fact > :not(h2):not(h3), .mm-fact > .wp-block-group__inner-container > :not(h2):not(h3) { grid-column: 2; margin: 0; color: var(--text-2); font-size: .95rem; }
.mm-fact > :not(h2):not(h3) + :not(h2):not(h3) { margin-top: .6rem; }
@media (max-width: 560px) { .mm-fact { grid-template-columns: minmax(0, 1fr); gap: .4rem; } .mm-fact > :not(h2):not(h3), .mm-fact > .wp-block-group__inner-container > :not(h2):not(h3) { grid-column: 1; } }

/* corpo: i blocchi migrati da Semplice */
.mm-blocks { display: grid; gap: calc(var(--sp) * 3); padding-block: var(--sp) calc(var(--sp) * 3); }
.mm-blocks > .mm-section, .mm-blocks > .wp-block-group { width: 100%; padding-inline: var(--gutter); display: grid; gap: calc(var(--sp) * 1.4); }
.mm-blocks p, .mm-blocks li { color: var(--text-2); max-width: 68ch; }
.mm-blocks p { margin: 0; }
.mm-blocks a { color: var(--accent-text); }
.mm-blocks h2 { font-size: var(--fs-4); max-width: 22ch; margin-top: calc(var(--sp) * 1.5); }
.mm-blocks h2:first-child { margin-top: 0; }
.mm-blocks h3 { font-size: var(--fs-1); color: var(--text); }
.mm-blocks h2 + p { font-size: var(--fs-1); line-height: 1.5; }
.mm-blocks ul, .mm-blocks ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.mm-blocks li::marker { color: var(--accent); }
.mm-blocks .wp-block-columns { display: flex; gap: calc(var(--sp) * 1.5); align-items: center; }
.mm-blocks .wp-block-column { min-width: 0; display: grid; gap: 1rem; }
@media (max-width: 780px) {
  /* nowrap: sotto i 782px WordPress mette flex-wrap: wrap, e in colonna con flex-basis 75%
     la seconda colonna andava "a capo" a destra, fuori dallo schermo (Custom Metrics a 390) */
  .mm-blocks .wp-block-columns { flex-direction: column; flex-wrap: nowrap !important; align-items: stretch; }
  .mm-blocks .wp-block-column { flex-basis: auto !important; }
}
.mm-blocks .wp-block-image { margin: 0; }
.mm-blocks .wp-block-image img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) * .75); border: 1px solid var(--border); }
/* galleria: in Semplice era uno slider; qui un carosello a scorrimento con lo snap */
.mm-blocks .wp-block-gallery {
  display: flex; gap: 1rem; margin: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: .75rem;
}
.mm-blocks .wp-block-gallery > .wp-block-image { flex: 0 0 min(78%, 720px); scroll-snap-align: start; }
.mm-blocks .wp-block-gallery .wp-block-image img { height: min(62vh, 560px); width: 100%; object-fit: cover; }
/* blocchi HTML migrati: iframe di Figma e SVG dei loghi non devono sforare */
.mm-blocks .wp-block-html, .mm-blocks .mm-section > :not(.wp-block-columns) { min-width: 0; max-width: 100%; }
.mm-blocks iframe { max-width: 100%; border-radius: calc(var(--radius) * .75); }
.mm-blocks svg { max-width: 100%; }
.mm-blocks .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.mm-blocks .wp-block-button__link { display: inline-flex; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--glass-border); color: var(--text); text-decoration: none; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.mm-blocks .wp-block-button__link:hover { border-color: var(--accent); }

.mm-project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp); padding-bottom: calc(var(--sp) * 2); }
@media (max-width: 640px) { .mm-project-nav { grid-template-columns: minmax(0, 1fr); } }
.mm-project-nav-card { text-decoration: none; color: var(--text); grid-template-columns: minmax(0, 1fr) 120px; align-items: center; justify-items: start; }
.mm-project-nav-card .mm-label { color: var(--text-2); }
.mm-project-nav-card .mm-pcard-cta { margin-top: .2rem; }
.mm-project-nav-card > :not(.mm-iso) { grid-column: 1; }
.mm-project-nav-card strong { font-weight: var(--w-med); font-size: var(--fs-2); text-transform: uppercase; line-height: 1.1; }
.mm-iso--nav { grid-column: 2; grid-row: 1 / span 3; }
.mm-project-nav-card[rel="next"] { text-align: right; grid-template-columns: 120px minmax(0, 1fr); justify-items: end; }
.mm-project-nav-card[rel="next"] > :not(.mm-iso) { grid-column: 2; }
.mm-project-nav-card[rel="next"] .mm-iso--nav { grid-column: 1; }

/* 14c. Regole portate dal child theme per i contenuti migrati ---------------- */
/* colonne: la somma puo' superare il 100% con il gap, quindi si restringono */
.mm-blocks .wp-block-column { flex-shrink: 1; flex-grow: 0; }
/* colonna sola ma stretta in Semplice (3, 5, 6... su 12) */
@media (min-width: 781px) {
  .mm-blocks [class*="mm-w-"] { width: 100%; }
  .mm-blocks .mm-w-2 { max-width: 16.66%; } .mm-blocks .mm-w-3 { max-width: 25%; } .mm-blocks .mm-w-4 { max-width: 33.33%; }
  .mm-blocks .mm-w-5 { max-width: 41.66%; } .mm-blocks .mm-w-6 { max-width: 50%; } .mm-blocks .mm-w-8 { max-width: 66.66%; }
  .mm-blocks .mm-w-10 { max-width: 83.33%; } .mm-blocks .mm-w-11 { max-width: 91.66%; }
}
.mm-blocks .wp-block-group[class*="mm-w-"] { display: grid; gap: 1rem; }
/* versione desktop / versione telefono della stessa schermata (righe dei generatori) */
@media (min-width: 992px) { .mm-blocks .mm-only-mobile { display: none; } .mm-blocks .mm-row-pair { align-items: center; } }
@media (max-width: 991.98px) {
  .mm-blocks .mm-only-desktop { display: none; }
  .mm-blocks .mm-phone img { max-width: 320px; margin-inline: auto; }
  .mm-blocks .mm-board img { max-width: min(100%, 480px); margin-inline: auto; }
  .mm-blocks .mm-phone img, .mm-blocks .mm-board img { border: 0; }
  /* il testo prima dell'immagine, come nel child theme */
  .mm-blocks .mm-row-pair > .wp-block-column:not(:has(.wp-block-image)) { order: -1; }
  .mm-blocks .mm-hide-solo > .wp-block-column:has(.wp-block-image):not(:has(.mm-only-mobile)) { display: none; }
}
/* griglia dei wireframe di Miele: celle con respiro, ultima riga centrata */
.mm-blocks .mm-wf-cell { padding-bottom: calc(var(--sp) * 2); }
@media (min-width: 768px) { .mm-blocks .mm-wf-cell { padding-inline: 1.5rem; } }
.mm-blocks .mm-wf-cell-last-row:first-child { margin-left: auto; }
.mm-blocks .mm-wf-cell-last-row:last-child { margin-right: auto; }
.mm-blocks .mm-row-pair, .mm-blocks .wp-block-columns:has(.mm-wf-cell) { align-items: start; }
.mm-blocks .mm-wf-caption { color: var(--text-2); font-size: .9rem; padding-top: 1rem; }
.mm-blocks .mm-wf-shot img { border: 0; }

/* 14d. Progetto protetto -------------------------------------------------- */
.mm-protect { min-height: calc(100svh - var(--header-h)); display: grid; place-items: center; padding-block: calc(var(--sp) * 3); }
.mm-protect form { width: 100%; max-width: 560px; display: grid; gap: 1rem; }
.mm-protect-label { color: var(--accent-text); }
.mm-protect-title { font-size: calc(clamp(28px, 4vw, 44px) * var(--tk4, 1)); }
.mm-protect-ask { margin: 0 0 1rem; color: var(--text-2); font-size: 1.1rem; }
.mm-protect-ask a { color: var(--text); text-decoration-color: var(--accent); }
.mm-protect-fields { display: flex; gap: .75rem; }
.mm-protect-fields input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; font: inherit; color: var(--text); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 10px; }
.mm-protect-fields input:focus { outline: none; border-color: var(--accent); }
.mm-protect-fields .mm-btn { height: 52px; padding-inline: 1.5rem; border-radius: 10px; }
.mm-protect-wrong { color: #f87171; margin: 0; }
@media (max-width: 600px) { .mm-protect-fields { flex-direction: column; } }

/* 14e. Diagramma di flusso di Zara Home (contenuto HTML migrato): copiato senza
   modifiche da child-semplice/style.css, righe 7278-7468. */
/* ==========================================================================
   26. Il flusso a tessere di Zara Home — chip veri e connettori vettoriali
   (Marco 2026-09-13: "separate each slide, create a label that it's
   accessible both on dark and light mode ... create yourself the orange
   wires", poi "use real chips and vector connectors", poi "fix the connection
   on desktop as they're all incorrect")

   La sezione USER EXPERIENCE REVIEW era UNA immagine da 2016x4011 con undici
   wireframe collegati da fili arancioni: sul telefono ogni schermo finiva
   largo 72px. Ora e' un elenco di undici passi, e di quella board restano solo
   gli SCHERMI, riesportati dal file Figma a 3x.

   Tutto il resto e' pagina, non pixel:
   - l'etichetta e' un chip vero (`.mm-project-card-chip`, lo stesso componente
     della riga CATEGORY e delle card dell'elenco): segue il tema in chiaro
     come in scuro, si seleziona, si traduce, la legge uno screen reader;
   - i fili dentro la tessera sono SVG con viewBox nelle coordinate dello
     schermo (375x751 piu' 48 di corsia), quindi il pallino cade esattamente
     sull'elemento toccato a qualunque dimensione;
   - i fili FRA le tessere sono elementi CSS, perche' attraversano lo spazio
     fra righe e colonne, che si misura in rem e in percentuali della griglia,
     non nelle unita' dello schermo.

   ⚠️ LA DISPOSIZIONE E' QUELLA DELLA BOARD ORIGINALE: si legge per RIGHE
   (01 02 03 / 04 05 06 / 07 08 09 / 10 11), non per colonne. Il primo giro
   metteva i passi in colonne che si leggevano dall'alto in basso: la prima
   riga diceva 01, 05, 09 mentre tutte le frecce puntavano in giu', e il
   risultato era che nessun collegamento tornava. Da qui le due grammatiche:
   dentro la riga il filo va a DESTRA, a fine riga scende e torna a capo.
   ========================================================================== */
.mm-flow {
  --mm-flow-wire: #f18800;           /* l'arancione campionato dalla board */
  --mm-flow-lane: 94.09%;            /* x della corsia: 398 su 423 */
  --mm-flow-rowgap: 3.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* La percentuale non e' arbitraria: 4.1877% della griglia = 13.71% della
     tessera = le 58 unita' con cui l'SVG disegna il tratto fra due colonne.
     Se cambia questa, va cambiato GAP_U nello script che genera il markup. */
  column-gap: 4.1877%;
  row-gap: var(--mm-flow-rowgap);
  /* La sezione ha `data-gutter: no`: senza questo il flusso tocca i bordi
     della finestra mentre il resto della pagina sta a 30px (16 sul telefono). */
  padding-inline: clamp(1rem, 2.08vw, 1.875rem);
}

.mm-flow-step {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.75rem;
}

.mm-flow-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
  height: 3.4rem;                    /* fissa, non minima: le tessere devono
                                        restare alte uguali, o i fili fra una
                                        riga e l'altra non si allineano piu' */
  align-content: center;
}

.mm-flow-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--mm-flow-wire);
}

.mm-flow-media {
  position: relative;
  aspect-ratio: 423 / 751;           /* schermo 375 + corsia 48 */
  width: 100%;
}

/* Nessun bordo e nessun fondo aggiunti (Marco: "remove the white squared
   border around the zarahome ux screens"): i frame esportati da Figma hanno
   gia' il contorno dell'apparecchio, e un secondo bordo chiaro sopra li faceva
   sembrare incorniciati. */
.mm-flow-shot {
  position: absolute;
  left: 0;
  top: 0;
  width: 88.65%;                     /* 375 su 423 */
  height: 100%;
  object-fit: contain;
}

.mm-flow-wire-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;                 /* il tratto fra due colonne esce dal box */
  pointer-events: none;
}

/* Pallini e punte di freccia sono PIENI; le linee sono solo tracciate. */
.mm-flow-dot {
  fill: var(--mm-flow-wire);
  stroke: none;
}

/* Il tratto verticale che attraversa la fascia dell'etichetta: qui e' CSS e
   non SVG perche' quell'altezza dipende dal TESTO e non scala con il box
   dell'immagine. Serve quando il passo precedente sta SOPRA: sempre sul
   telefono, e sul desktop solo a inizio riga (dove il filo torna a capo). */
.mm-flow-label::after {
  content: "";
  position: absolute;
  left: calc(var(--mm-flow-lane) - 1px);
  width: 2px;
  top: calc(-1 * var(--mm-flow-rowgap));
  bottom: -0.75rem;
  background: var(--mm-flow-wire);
}

.mm-flow-step:first-child .mm-flow-label::after {
  display: none;                     /* il primo passo non viene da nessuna parte */
}

/* --------------------------------------------------------------------------
   Desktop: si legge per righe. Dentro la riga il filo va a destra; a fine riga
   scende, torna indietro sopra la riga successiva e rientra dall'alto.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* la grammatica verticale resta accesa solo dove il passo dopo sta sotto */
  .mm-flow-step .mm-flow-v { display: none; }
  .mm-flow-step .mm-flow-h { display: block; }

  /* fine riga (3°, 6°, 9°): l'uscita torna a essere verticale */
  .mm-flow-step:nth-child(3n) .mm-flow-h-out { display: none; }
  .mm-flow-step:nth-child(3n) .mm-flow-v { display: block; }
  .mm-flow-step:nth-child(3n) .mm-flow-v path:first-child { display: none; }

  /* inizio riga (1°, 4°, 7°, 10°): l'ingresso arriva dall'alto, non da sinistra */
  .mm-flow-step:nth-child(3n + 1) .mm-flow-h-in { display: none; }

  /* ...e in mezzo alla riga la fascia dell'etichetta non ha nessun filo */
  .mm-flow-step:not(:nth-child(3n + 1)) .mm-flow-label::after { display: none; }

  /* Il ritorno a capo, in due pezzi: la discesa sotto l'ultima tessera della
     riga e la traversa che torna indietro di due colonne fino alla corsia
     della prima tessera della riga dopo. Le percentuali sono della tessera:
     due tessere piu' due stacchi = 227.42%, la corsia sta a 94.09%. */
  .mm-flow-step:nth-child(3n):not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--mm-flow-lane) - 1px);
    top: 100%;
    height: calc(var(--mm-flow-rowgap) / 2);
    width: 2px;
    background: var(--mm-flow-wire);
  }

  .mm-flow-step:nth-child(3n):not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(100% + var(--mm-flow-rowgap) / 2 - 1px);
    left: -133.3332%;                /* 94.09% - 227.4232% */
    width: 227.4232%;
    height: 2px;
    background: var(--mm-flow-wire);
  }

  /* la discesa dentro la riga dopo parte da meta' stacco, non da tutto */
  .mm-flow-step:nth-child(3n + 1) .mm-flow-label::after {
    top: calc(-1 * var(--mm-flow-rowgap) / 2);
  }
}

/* --------------------------------------------------------------------------
   Telefono: una colonna sola, tutto verticale, e le rotaie si saldano.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mm-flow {
    grid-template-columns: 1fr;
    --mm-flow-rowgap: 2.2rem;
  }

  .mm-flow-step .mm-flow-h { display: none; }
  .mm-flow-step .mm-flow-v { display: block; }
}

.mm-blocks .mm-project-card-chip { display: inline-flex; width: fit-content; padding: .25rem .7rem; border: 1px solid var(--glass-border); border-radius: 999px; font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); background: var(--bg); }

/* 14f. Hero delle pagine ------------------------------------------------- */
.mm-hero--page { position: relative; padding-bottom: calc(var(--sp) * 2); }
.mm-hero-role-line { margin: 0; color: var(--accent-text); font-size: var(--fs-1); font-weight: var(--w-med); }
.mm-iso--corner { position: absolute; right: var(--gutter); top: calc(var(--sp) * 2); width: min(300px, 30vw); }
@media (max-width: 760px) { .mm-iso--corner { display: none; } }

/* 14g. Listing: gruppi per brand, card impilate mentre si scorre ----------- */
.mm-listing { display: grid; gap: calc(var(--sp) * 3); padding-bottom: calc(var(--sp) * 3); }
.mm-listing-brand { margin-bottom: var(--sp); }
.mm-listing-brand span { color: var(--accent-text); }
.mm-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--sp) * 1.2); }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .mm-stack-item { position: sticky; top: calc(var(--header-h) + 1rem + var(--i) * 14px); }
}
/* Gerarchia della card (Marco, 2026-10-08): quattro livelli e basta. In alto
   l'etichetta mono e il modulo; in basso, ancorati, titolo, una descrizione e
   l'azione. Modello: le slide della pagina Peterman (staging/index.html). */
.mm-pcard {
  text-decoration: none; color: var(--text);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "body media";
  column-gap: calc(var(--sp) * 1.5); min-height: min(64vh, 560px); align-content: stretch;
  box-shadow: 0 -18px 40px -24px var(--shadow);
}
.mm-pcard:hover { border-color: var(--accent); }
.mm-pcard-media { grid-area: media; margin: 0; align-self: stretch; border-radius: calc(var(--radius) * .75); overflow: hidden; background: var(--bg); }
.mm-pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.mm-pcard:hover .mm-pcard-media img { transform: scale(1.03); }
.mm-pcard-body { grid-area: body; display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--sp) * 1.2); min-width: 0; }
.mm-pcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.mm-pcard-index { color: var(--text-2); padding-top: .2rem; }
.mm-pcard-index b { font-weight: 400; color: var(--accent-text); }
.mm-iso--pcard { width: 120px; flex: none; margin: -.5rem -.25rem 0 0; }
.mm-pcard-main { display: grid; gap: 1.1rem; justify-items: start; }
.mm-pcard-text { margin: 0; color: var(--text-2); max-width: 44ch; }
/* l'azione: etichetta mono e un cerchio con la freccia, che si riempie al passaggio */
.mm-pcard-cta { display: inline-flex; align-items: center; gap: .8rem; margin-top: .4rem; color: var(--text); }
.mm-pcard-cta i {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-border);
  font-style: normal; font-family: var(--font-body); font-size: 1rem; line-height: 1;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-base);
}
.mm-pcard:hover .mm-pcard-cta i, .mm-project-nav-card:hover .mm-pcard-cta i { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); transform: translateX(4px); }
.mm-project-nav-card[rel="prev"]:hover .mm-pcard-cta i { transform: translateX(-4px); }
@media (max-width: 899px) {
  .mm-pcard { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "body"; row-gap: calc(var(--sp) * 1.1); min-height: 0; }
  .mm-pcard-media { aspect-ratio: 16 / 10; }
  .mm-pcard-body { gap: calc(var(--sp) * .8); }
  .mm-iso--pcard { width: 84px; margin-top: -1rem; }
}

/* 14h. About: bio con foto, contatti, timeline ----------------------------- */
.mm-about .mm-about-intro { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; column-gap: calc(var(--sp) * 2); }
.mm-about .mm-about-intro > .wp-block-group__inner-container > p,
.mm-about .mm-about-intro > p { grid-column: 1; }
.mm-about .mm-about-photo { grid-column: 2; grid-row: 1 / span 6; max-width: 360px; justify-self: end; }
.mm-about .mm-about-photo img { border-radius: var(--radius); filter: grayscale(1); }
@media (max-width: 760px) { .mm-about .mm-about-intro { grid-template-columns: minmax(0, 1fr); } .mm-about .mm-about-photo { grid-column: 1; grid-row: auto; justify-self: start; } }
.mm-about .mm-about-contact h2 { font-family: var(--font-mono); font-weight: 400; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); }
.mm-about .mm-about-contact h3 { font-family: var(--font-mono); font-weight: 400; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); margin-top: .5rem; }
.mm-timeline > h2, .mm-timeline > .wp-block-group__inner-container > h2 { font-family: var(--font-mono); font-weight: 400; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); margin-top: var(--sp); }
.mm-timeline { position: relative; }
.mm-tl-item { position: relative; display: grid; gap: .35rem; padding: 1.1rem 1.3rem 1.1rem 2.4rem; border: 1px solid var(--glass-border); border-radius: var(--radius); background: linear-gradient(160deg, var(--glass-bg), transparent 70%), var(--bg-elevated); max-width: 900px; }
.mm-tl-item::before { content: ""; position: absolute; left: 1.1rem; top: 1.5rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.mm-tl-item h3 { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-1); color: var(--text); }
.mm-tl-item h3 a { color: var(--accent-text); }
.mm-blocks .mm-tl-meta { color: var(--accent-text); font-size: .85rem; }
.mm-tl-cert { max-width: 280px; margin-top: .6rem !important; }
.mm-tl-cert img { border-radius: 8px; }

/* Timeline orizzontale (assets/js/timeline.js; reference: la pagina Peterman).
   Anni grandi in mono sopra una rotaia che si riempie mentre si scorre, un
   pallino per tappa, card alternate in altezza, durata come barretta. La
   traccia esce dal gutter fino ai bordi della finestra, come nel reference. */
.mm-timeline.mm-tl-ready { padding-inline: 0 !important; }
.mm-tl-ready > .wp-block-group__inner-container { display: grid; gap: 0; }
.mm-tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-inline: var(--gutter); margin-top: calc(var(--sp) * 1.5); }
.mm-tl-head > h2 { margin: 0 !important; font-family: var(--font-body) !important; font-weight: var(--w-med) !important; font-size: var(--fs-4) !important; letter-spacing: -.01em !important; text-transform: none; color: var(--text) !important; }
.mm-tl-count { color: var(--text-2); font-variant-numeric: tabular-nums; }
.mm-tl-count b { color: var(--accent-text); font-weight: 400; }
.mm-tl-hint { color: var(--text-2); margin-left: auto; }
.mm-tl-nav { display: flex; gap: .4rem; }
.mm-tl-prev svg { rotate: 180deg; }
.mm-tl-nav button:disabled { opacity: .35; cursor: default; border-color: var(--glass-border); }
@media (max-width: 640px) { .mm-tl-hint { display: none; } .mm-tl-nav { margin-left: auto; } }

.mm-tl-track {
  --yh: clamp(56px, 6vw, 96px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; cursor: grab; padding: 1.5rem 0 3rem;
}
.mm-tl-track::-webkit-scrollbar { display: none; }
.mm-tl-track:focus-visible { outline-offset: -2px; }
.mm-tl-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.mm-tl-track.is-dragging a { pointer-events: none; }
.mm-blocks .mm-tl-lane { position: relative; list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: clamp(16px, 2vw, 32px); width: max-content; }
.mm-tl-rail { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--yh) + 17px); height: 2px; background: var(--border); }
.mm-tl-rail i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), hsl(calc(var(--h) + 60) var(--s) 66%)); transform-origin: 0 50%; transform: scaleX(.04); transition: transform .25s linear; box-shadow: 0 0 14px var(--accent-glow); }

.mm-blocks .mm-tl-lane > li { max-width: none; color: inherit; }
.mm-blocks .mm-tl-lane > li::marker { content: none; }
.mm-tl-node { position: relative; flex: 0 0 clamp(280px, 24vw, 460px); scroll-snap-align: start; display: grid; align-content: start; }
.mm-tl-year {
  display: block; height: var(--yh); font-family: var(--font-mono); font-size: var(--yh); line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px var(--text-2); transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.mm-tl-node.is-active .mm-tl-year, .mm-tl-node:hover .mm-tl-year { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.mm-tl-dot { display: block; width: 14px; height: 14px; margin: 11px 0 22px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-shadow: 0 0 0 6px var(--accent-dim); transition: background .3s ease; }
.mm-tl-node.is-active .mm-tl-dot, .mm-tl-node.is-now .mm-tl-dot { background: var(--accent); }
.mm-tl-node.is-now .mm-tl-dot { animation: mm-tl-pulse 2.2s ease-out infinite; }
@keyframes mm-tl-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow), 0 0 0 6px var(--accent-dim); } 70% { box-shadow: 0 0 0 14px transparent, 0 0 0 6px var(--accent-dim); } 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 6px var(--accent-dim); } }
.mm-tl-node:nth-child(odd) .mm-tl-item { margin-top: 38px; } /* il primo figlio e' la rotaia: le card pari del contenuto scendono */

.mm-tl-ready .mm-tl-item {
  max-width: none; height: 100%; padding: 1.4rem 1.5rem 1.6rem; border-radius: calc(var(--radius) * 1.5);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), border-color .3s ease, box-shadow .4s ease;
}
.mm-tl-ready .mm-tl-item::before { display: none; }
.mm-tl-ready .mm-tl-item:hover { transform: translateY(-6px) rotate(-.8deg); border-color: var(--accent); box-shadow: 0 24px 60px -30px var(--accent-glow); }
.mm-tl-ready .mm-tl-item h3 { font-family: var(--font-body); font-weight: var(--w-med); font-size: var(--fs-2); line-height: 1.15; }
.mm-tl-ready .mm-tl-item h3 a { display: block; font-size: .62em; font-family: var(--font-mono); font-weight: 400; text-decoration: none; margin-top: .3rem; }
.mm-tl-ready .mm-tl-item p { font-size: .95rem; line-height: 1.55; }
.mm-tl-ready .mm-tl-meta { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem !important; }
.mm-tl-span { display: flex; align-items: center; gap: .55rem; color: var(--text-2); font-size: .66rem; margin-bottom: .4rem; }
.mm-tl-span i { flex: 0 1 auto; width: calc(var(--n) / var(--max, 4) * 72px); min-width: 10px; height: 4px; border-radius: 4px; background: var(--accent); opacity: .8; }
.mm-tl-span em { font-style: normal; color: var(--on-accent); background: var(--accent-strong); padding: .1rem .45rem; border-radius: 999px; }
.mm-tl-node.is-now .mm-tl-item { border-color: var(--accent); background: linear-gradient(160deg, var(--accent-dim), transparent 70%), var(--bg-elevated); }
.mm-tl-ready .mm-tl-cert { max-width: 100%; }

/* entrata: le card salgono in sequenza la prima volta che la traccia si vede */
.mm-tl-node { transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.mm-tl-pending .mm-tl-node { opacity: 0; translate: 40px 0; }
@media (max-width: 640px) {
  .mm-tl-node { flex-basis: 78vw; }
  .mm-tl-node:nth-child(odd) .mm-tl-item { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .mm-tl-node { transition: none; } .mm-tl-node.is-now .mm-tl-dot { animation: none; } }

/* 14h2. Contact (page-contact.php) ------------------------------------------ */
.mm-contact2 { padding-block: calc(var(--sp) * 2.5) calc(var(--sp) * 3); }
.mm-contact2 .column { position: relative; }
.mm-c-eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; color: var(--text-2); }
.mm-c-live { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); animation: mm-c-live 2s ease-out infinite; flex: none; }
@keyframes mm-c-live { 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.mm-c-title { margin: 0 0 calc(var(--sp) * 2.2); padding-right: min(360px, 26vw); font-size: calc(clamp(2.6rem, 7.4vw, 9rem) * var(--tk6, 1)); line-height: .95; letter-spacing: -.035em; text-wrap: balance; }
.mm-c-line { display: block; }
.mm-outline-text { color: transparent; -webkit-text-stroke: 1.5px var(--text); }
.mm-c-accent { color: var(--accent); }
.mm-c-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mm-c-w > span { display: inline-block; translate: 0 105%; transition: translate .9s cubic-bezier(.2, .8, .2, 1) var(--d); }
.mm-c-title.is-in .mm-c-w > span { translate: 0 0; }
.mm-contact2 { overflow-x: clip; }
.mm-contact2 .mm-contact-whatsapp-badge { right: var(--gutter); width: clamp(200px, 20vw, 300px); height: clamp(200px, 20vw, 300px); }
@media (max-width: 900px) {
  .mm-c-title { padding-right: 0; }
  .mm-c-title { margin-bottom: 0; }
  .mm-contact2 .mm-contact-whatsapp-badge { position: static; display: block; width: 150px; height: 150px; margin: -.5rem 0 1rem auto; }
}

.mm-c-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (max-width: 960px) { .mm-c-grid { grid-template-columns: minmax(0, 1fr); } }

.mm-contact2 .mm-c-form {
  display: grid; gap: 1.1rem; padding: clamp(20px, 2.6vw, 40px); border-radius: calc(var(--radius) * 1.5);
  border: 1px solid var(--glass-border); background: linear-gradient(160deg, var(--glass-bg), transparent 60%), var(--bg-elevated);
}
.mm-contact2 .mm-c-form-title { font-size: var(--fs-3); }
.mm-c-topics { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mm-c-topics legend { margin-bottom: .6rem; padding: 0; }
.mm-contact2 .mm-c-topic {
  padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--glass-border); background: none; color: var(--text-2); cursor: pointer; font-size: .9rem;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.mm-contact2 .mm-c-topic:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.mm-contact2 .mm-c-topic[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.mm-c-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 600px) { .mm-c-row { grid-template-columns: minmax(0, 1fr); } }
/* etichette che salgono: input prima, label dopo, cosi' :placeholder-shown la raggiunge */
.mm-contact2 .mm-c-field { position: relative; display: block; margin: 0; }
.mm-contact2 .mm-c-field input, .mm-contact2 .mm-c-field textarea {
  width: 100%; display: block; padding: 1.45rem 1rem .6rem; border-radius: calc(var(--radius) * .75);
  border: 1px solid var(--glass-border); background: var(--bg); color: var(--text); font: inherit; font-size: 1rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mm-contact2 .mm-c-field textarea { resize: vertical; min-height: 9rem; }
.mm-contact2 .mm-c-field input:focus, .mm-contact2 .mm-c-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.mm-contact2 .mm-c-field label {
  position: absolute; left: 1rem; top: 1.05rem; margin: 0; pointer-events: none; color: var(--text-2);
  font-family: var(--font-body); font-size: 1rem; text-transform: none; letter-spacing: 0;
  transform-origin: 0 0; transition: transform .25s var(--ease), color .2s ease;
}
.mm-contact2 .mm-c-field :is(input, textarea):focus + label,
.mm-contact2 .mm-c-field :is(input, textarea):not(:placeholder-shown) + label { transform: translateY(-.6rem) scale(.72); color: var(--accent-text); }
.mm-c-send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.mm-contact2 .mm-c-submit {
  display: inline-flex; align-items: center; gap: .7rem; padding: .95rem 1.6rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent-strong); color: var(--on-accent); font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  transition: box-shadow .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.mm-contact2 .mm-c-submit svg { width: 18px; height: 18px; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.mm-contact2 .mm-c-submit.mm-c-submit:hover:not(:disabled) { background: var(--accent-strong); color: var(--on-accent); box-shadow: 0 14px 36px -12px var(--accent-glow); transform: translateY(-2px); }
.mm-contact2 .mm-c-submit:hover svg { transform: translateX(5px); }
.mm-contact2 .mm-c-submit:disabled { opacity: .6; cursor: progress; }
.mm-contact2 .mm-form-status { margin: 0; font-size: .9rem; color: var(--text-2); }

.mm-c-side { display: grid; gap: 1rem; }
.mm-c-or { margin: 0; }
.mm-c-side .mm-card { gap: .5rem; padding: 1.2rem 1.3rem; }
.mm-c-time { font-family: var(--font-mono); font-size: calc(clamp(2.6rem, 4.4vw, 4.4rem) * var(--tk4, 1)); line-height: 1; letter-spacing: -.04em; color: var(--text); }
.mm-c-time i { font-style: normal; animation: mm-c-blink 1s steps(1) infinite; }
@keyframes mm-c-blink { 50% { opacity: .2; } }
.mm-c-state { margin: 0; color: var(--text-2); font-size: .92rem; display: flex; gap: .55rem; align-items: baseline; }
.mm-c-state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); translate: 0 -1px; }
.mm-c-clock.is-on .mm-c-state::before { background: #34d399; box-shadow: 0 0 10px rgba(52, 211, 153, .7); }
.mm-c-mail { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.mm-c-mail > .mm-label { grid-column: 1 / -1; }
.mm-c-big { color: var(--text); text-decoration: none; font-size: calc(clamp(1rem, 1.35vw, 1.3rem) * var(--tk1, 1)); font-weight: var(--w-med); overflow-wrap: anywhere; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--ease), color .2s ease; padding-bottom: 2px; justify-self: start; }
.mm-c-big:hover { color: var(--accent-text); background-size: 100% 2px; }
.mm-c-copy { padding: .45rem .9rem; font-size: .66rem; }
.mm-c-copy.is-done { border-color: #34d399; color: #34d399; }
.mm-c-links { margin-top: .25rem; }
@media (prefers-reduced-motion: reduce) { .mm-c-live, .mm-c-time i { animation: none; } }

/* 14i. Logos: griglia dei marchi ------------------------------------------- */
/* un marchio per riga, grande, con la scheda sotto (inc/logos.php) */
.mm-blocks .mm-logo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: visible; scroll-snap-type: none; padding: 0; border-top: 1px solid var(--border); }
.mm-blocks .mm-logo-grid > .wp-block-image { flex: none; width: auto !important; margin: 0 !important; }
/* pagine il cui contenuto non e' diviso in sezioni (Logos): stessa griglia dell'hero */
.mm-logos.mm-blocks, .mm-about.mm-blocks { padding-inline: 0; }
.mm-logos.mm-blocks > * { width: 100%; padding-inline: var(--gutter); }
.mm-logos.mm-blocks > p { max-width: calc(68ch + var(--gutter) * 2); margin-inline: 0 auto; }
.mm-blocks .mm-logo-grid > .wp-block-image { display: grid; gap: 0; padding-block: clamp(28px, 4vw, 64px); border-bottom: 1px solid var(--border); }
.mm-logo-stage {
  --stage-h: clamp(240px, 38vw, 560px);
  display: grid; place-items: center; height: var(--stage-h); border-radius: calc(var(--radius) * 1.5); overflow: hidden;
  background: none; border: 1px solid var(--glass-border); /* niente fondo ne' bagliore viola (Marco, 2026-10-08) */
  transition: border-color .3s ease;
}
.mm-blocks .mm-logo-grid .wp-block-image:hover .mm-logo-stage { border-color: var(--accent-dim); }
.mm-blocks .mm-logo-grid .wp-block-image:hover .mm-logo-ink { transform: scale(1.04); }
.mm-blocks .mm-logo-grid .mm-logo-spec {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: baseline; column-gap: clamp(16px, 2.4vw, 40px); row-gap: .4rem;
  margin: 1.25rem 0 0; padding: 0; text-align: left; position: static; background: none; color: var(--text-2); font-size: inherit;
}
/* le didascalie delle gallerie di WordPress sono assolute sopra l'immagine, con un
   velo scuro e un selettore lungo: qui la scheda sta SOTTO, nel flusso */
.mm-blocks .wp-block-gallery.mm-logo-grid figure.wp-block-image figcaption.mm-logo-spec {
  position: static !important; inset: auto !important; max-height: none; overflow: visible; width: auto; background: none !important;
  color: var(--text-2); text-shadow: none; font-size: inherit; text-align: left; padding: 0; margin: 1.25rem 0 0;
}
.mm-logo-year:last-child { grid-column: 3 / -1; justify-self: end; }
/* la galleria "ritagliata" di WordPress mette figura, contenitore e immagine in flex con
   object-fit: cover, con selettori :not(#individual-image) (forza di un id): stessa forza qui */
.mm-logo-grid figure.wp-block-image:not(#mm-x) { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-items: stretch; flex: none; height: auto; width: 100% !important; }
.mm-logo-grid figure.wp-block-image:not(#mm-x):not(#mm-y) > .mm-logo-stage { display: grid; place-items: center; flex: none; height: var(--stage-h); }
/* Il logo al 50% della larghezza del box, centrato, mai tagliato (Marco, 2026-10-08).
   .mm-logo-ink e' una finestra con le proporzioni del SEGNO (inc/logos.php): larga
   il 50%, al massimo 300px (Marco, 2026-10-08), o meno se un marchio alto supererebbe il 70% dell'altezza del box; la
   tavola SVG vi e' spostata sopra in modo che il segno la riempia. Niente overflow
   nascosto: il resto della tavola e' trasparente, quindi nulla si puo' tagliare.
   Le regole sull'img devono battere la galleria "ritagliata" (1,4,2): due id. */
.mm-logo-ink {
  position: relative; display: block; flex: none;
  width: min(50%, 300px, calc(var(--stage-h) * .7 * var(--r))); aspect-ratio: var(--r);
  transition: transform .8s var(--ease);
}
.mm-logo-grid figure.wp-block-image:not(#mm-x):not(#mm-y) .mm-logo-ink img {
  position: absolute; left: var(--ix); top: var(--iy); width: var(--iw); height: auto; aspect-ratio: var(--vr);
  max-width: none !important; /* la galleria mette max-width: 100% !important */
  flex: none; object-fit: fill; padding: 0; border: 0; border-radius: 0; transition: filter .2s ease;
}
/* senza misura (logo nuovo, tools/logos_ink.py non rilanciato): tavola intera, contenuta */
.mm-logo-grid figure.wp-block-image:not(#mm-x):not(#mm-y) .mm-logo-stage > img {
  flex: none; width: 100%; height: 100%; object-fit: contain; padding: 0; border: 0; border-radius: 0;
}
.mm-logo-grid figure.wp-block-image:not(#mm-x) figcaption.mm-logo-spec { flex: none; }
.mm-logo-n { color: var(--accent-text); }
.mm-logo-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; min-width: 0; }
.mm-logo-id strong { font-weight: var(--w-med); font-size: var(--fs-3); line-height: 1.1; color: var(--text); letter-spacing: -.01em; }
.mm-logo-role { color: var(--text-2); }
.mm-logo-year { font-size: var(--fs-2); letter-spacing: -.02em; text-transform: none; color: transparent; -webkit-text-stroke: 1px var(--text-2); }
/* "See it online": etichetta centrata in verticale nel bottone (Marco, 2026-10-08).
   La riga della scheda e' allineata sulla linea di base, che col mono lasciava il
   testo alto: il bottone si centra sulla riga e il testo nel bottone, in flex. */
.mm-blocks .mm-logo-grid .mm-logo-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; align-self: center;
  min-height: 40px; padding: 0 1rem; line-height: 1;
  color: var(--text); text-decoration: none; border: 1px solid var(--glass-border); border-radius: 999px; white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast);
}
.mm-blocks .mm-logo-grid .mm-logo-link span { display: block; line-height: 1; }
/* la galleria ritagliata da' a ogni <a> nella figura width/height 100% e flex 1 0 0% */
.mm-logo-grid figure.wp-block-image:not(#mm-x):not(#mm-y) .mm-logo-link { flex: none; width: auto; height: auto; }
.mm-blocks .mm-logo-grid .mm-logo-link:hover { border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 700px) {
  .mm-blocks .mm-logo-grid .mm-logo-spec { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mm-logo-link { grid-column: 2 / -1; justify-self: start; }
  .mm-logo-stage { --stage-h: 64vw; }
}
/* i loghi sono SVG neri ("*_black.svg", disegnati per lo sfondo chiaro): bianchi solo
   nel tema scuro. Regola portata da child-semplice/style.css, sezione 9. */
:root:not([data-theme="light"]) img[src*="_black.svg"] { filter: invert(1) brightness(1.3); }
:root:not([data-theme="light"]) img[src*="_black.svg"]:hover { filter: invert(1) brightness(1.3) drop-shadow(0 0 12px var(--accent-glow)); }
/* sulla pagina Logos niente bagliore viola, neanche al passaggio */
:root:not([data-theme="light"]) .mm-logo-grid img[src*="_black.svg"]:hover { filter: invert(1) brightness(1.3); }

/* 14j. Pagine portate dal child theme (blog, servizi, contact, privacy, 404, "Latest").
   Prima la compatibilita' con i contenitori di Semplice che il loro markup usa,
   poi le regole estratte da child-semplice/style.css con tools/extract_css.py
   (prefissi mm-contact, mm-form-, mm-legal, mm-hl-, mm-home-latest, mm-404, mm-badge). */
.mm-ported { overflow-x: clip; }
.mm-ported > .content-block, .mm-ported > section, .mm-ported > div:not(.mm-wrap) { width: 100%; }
.mm-ported .container, .mm-ported .mmb-wrap, .mm-ported > .mmb-article, .mm-ported > article { max-width: none; padding-inline: var(--gutter); }
.mm-ported .row { display: flex; flex-wrap: wrap; gap: var(--sp); }
.mm-ported .column { flex: 1 1 0; min-width: 0; }
.mm-ported .column-content + .column-content { margin-top: 1rem; }
.mm-ported--contact .mm-hero-name-solid, .mm-ported--contact .mm-hero-name-solid p { overflow-wrap: anywhere; font-size: min(var(--fs-6), 10.5vw); line-height: .95; font-weight: var(--w-med); color: var(--accent); text-transform: uppercase; margin: 0; }
.mm-ported .mm-eyebrow { display: block; margin-bottom: 1rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.mm-ported { padding-block: calc(var(--sp) * 2) calc(var(--sp) * 2); }
.mm-ported--latest { padding-top: 0; }
.mm-iso--404 { max-width: 280px; margin-block: var(--sp); }
.mm-ported--404 .mm-hero-name-solid h1 { font-size: min(var(--fs-5), 11vw); line-height: 1.05; }

.mm-about-glass-badge.mm-badge-ready {
  opacity: 1;
}
.mm-badge-circle {
  width: 100%;
  height: 100%;
  
  perspective: var(--mm-badge-perspective, 600px);
  perspective-origin: center;
}
.mm-badge-word {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  transform-style: preserve-3d;
  animation: mm-badge-spin 20s linear infinite;
  font-family: var(--font-display);
  
  font-weight: 600;
  font-variation-settings: normal;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.mm-badge-char {
  position: absolute;
  
  transform: rotateY(calc(var(--char-index) * var(--mm-badge-step))) translateZ(var(--mm-badge-radius, 105px));
  
  transform-style: preserve-3d;
}
.mm-badge-char-face {
  backface-visibility: hidden;
}
.mm-badge-char-face-back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
}
@keyframes mm-badge-spin {
  from {
    transform: rotateX(14deg) rotateY(0deg);
  }
  to {
    transform: rotateX(14deg) rotateY(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mm-badge-word {
    animation: none;
    transform: rotateX(14deg);
  }
}
.mm-contact-page .column {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}
.mm-contact-page .mm-hero-name-solid {
  margin-bottom: 3rem;
}
.mm-contact-page .column {
  
  position: relative;
}
.mm-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 4rem;
  align-items: start;
}
@media (max-width: 900px) {
  .mm-contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.mm-contact-info-list {
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mm-contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.mm-contact-info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.mm-contact-info-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mm-contact-info-item a,
.mm-contact-info-item span:not(.mm-contact-info-label) {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}
.mm-contact-info-item a:hover {
  color: var(--accent-light);
}
.mm-contact-info-links {
  display: flex;
  
  gap: 0.5rem;
}
.mm-contact-whatsapp-badge {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 337px;
  height: 337px;
  transform: rotate(30deg);
  transition: transform var(--transition-fast);
}
.mm-contact-whatsapp-badge:hover {
  transform: rotate(30deg) scale(1.05);
}
@media (max-width: 900px) {
  .mm-contact-whatsapp-badge {
    position: static;
    transform: none;
    margin: 2rem 0 0;
  }
  .mm-contact-whatsapp-badge:hover {
    transform: scale(1.05);
  }
}
.mm-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.mm-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mm-form-field label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mm-form-field input,
.mm-form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.75em 1em;
  resize: vertical;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.mm-form-field input:focus,
.mm-form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--glass-bg-hover);
}
.mm-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.mm-form-submit {
  align-self: flex-start;
  padding: 0.7em 2em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.mm-form-submit:hover:not(:disabled) {
  border-color: var(--accent);
  background: linear-gradient(120deg, var(--accent-dim), rgba(167, 139, 250, 0.12));
  color: var(--accent-light);
  box-shadow: 0 0 24px -8px var(--accent-glow);
}
.mm-form-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.mm-form-status {
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-height: 1.3em;
  margin: 0;
}
.mm-form-status-success {
  color: var(--accent-light);
}
.mm-form-status-error {
  color: #f87171;
}
@media (min-width: 900px) {
  .sections:has(> .mm-contact-page) {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px);
  }
  .sections:has(> .mm-contact-page) > .mm-contact-page {
    flex: 1 0 auto;
  }
}
.mm-contact-info-item .mm-contact-info-note {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--text-secondary);
	max-width: 32ch;
}
.mm-404 .content-wrapper {
  max-width: 46rem;
}
.mm-404-code {
  position: relative;
  display: inline-block;
  margin: 0.4rem 0 1.1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(clamp(5rem, 21vw, 12.5rem) * var(--tk6, 1));
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  -webkit-user-select: none;
  user-select: none;
}
.mm-404-code::before {
  content: attr(data-code);
  position: absolute;
  left: 0.11em;
  top: 0.05em;
  color: var(--accent);
  opacity: 0.34;
}
.mm-404-intro {
  max-width: 34rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.mm-404-inspector {
  max-width: 30rem;
  margin: 2rem 0 2.25rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.mm-404-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.62rem 1rem;
  border-top: 1px solid var(--glass-border);
}
.mm-404-row:first-child {
  border-top: none;
}
.mm-404-inspector dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.mm-404-inspector dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-primary);
  text-align: right;
  overflow-wrap: anywhere;
}
.mm-404-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.mm-404-actions .column-content {
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .mm-404-code::before {
    animation: mm404Drift 7s ease-in-out infinite alternate;
  }
}
@media (max-width: 600px) {
  .mm-404-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .mm-404-inspector dd {
    text-align: left;
  }
}
.mm-home-latest {
  padding: clamp(72px, 9vw, 140px) 0 clamp(40px, 5vw, 80px);
}
.mm-home-latest .mm-hl-inner {
  max-width: none;
  margin: 0 auto;
}
.mm-home-latest .mm-hl-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.mm-home-latest .mm-hl-label,
.mm-home-latest .mm-hl-kicker,
.mm-home-latest .mm-hl-cta,
.mm-home-latest .mm-hl-more a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mm-home-latest .mm-hl-label {
  color: var(--accent-light);
}
.mm-home-latest h2.mm-hl-heading {
  font-family: var(--font-display) !important;
  font-weight: var(--font-heading-weight) !important;
  font-size: calc(clamp(30px, 3.4vw, 52px) * var(--tk4, 1)) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}
.mm-home-latest .mm-hl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.mm-home-latest a.mm-hl-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: linear-gradient(160deg, var(--glass-bg), var(--glass-bg-end));
  color: inherit;
  text-decoration: none !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, box-shadow 0.4s;
}
.mm-home-latest a.mm-hl-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 24px 60px -30px var(--accent-glow);
}
.mm-home-latest a.mm-hl-card--ext {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text-secondary) 60%, transparent);
}
.mm-home-latest a.mm-hl-card--ext:hover {
  border-style: solid;
}
.mm-home-latest .mm-hl-media {
  display: block;
  aspect-ratio: 960 / 504; /* la card del progetto tiene la sua; quella del post sotto */
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
}
.mm-home-latest .mm-hl-media--post { aspect-ratio: var(--post-card-ratio); }
.mm-home-latest .mm-hl-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mm-home-latest a.mm-hl-card:hover .mm-hl-media img {
  transform: scale(1.04);
}
.mm-home-latest .mm-hl-kicker {
  display: block;
  padding: 26px 28px 0;
  color: var(--accent-light);
}
.mm-home-latest .mm-hl-title {
  display: block;
  padding: 14px 28px 0;
  font-family: var(--font-display);
  font-weight: var(--font-heading-weight);
  font-size: calc(clamp(20px, 1.6vw, 26px) * var(--tk2, 1));
  line-height: 1.25;
  color: var(--text-primary);
}
.mm-home-latest .mm-hl-desc {
  display: block;
  padding: 12px 28px 0;
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.mm-home-latest .mm-hl-cta {
  display: block;
  margin-top: auto;
  padding: 24px 28px 28px;
  color: var(--accent-light);
}
.mm-home-latest .mm-hl-cta i {
  display: inline-block;
  font-style: normal;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mm-home-latest a.mm-hl-card:hover .mm-hl-cta i {
  transform: translateX(6px);
}
.mm-home-latest a.mm-hl-card--ext:hover .mm-hl-cta i {
  transform: translate(4px, -4px);
}
.mm-home-latest .mm-hl-more {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 28px;
}
.mm-home-latest .mm-hl-more a {
  color: var(--text-secondary);
  text-decoration: none !important;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 4px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.mm-home-latest .mm-hl-more a:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}
@media (max-width: 767px) {
  .mm-home-latest .mm-hl-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mm-home-latest .mm-hl-kicker,
  .mm-home-latest .mm-hl-title,
  .mm-home-latest .mm-hl-desc,
  .mm-home-latest .mm-hl-cta {
    padding-left: 22px;
    padding-right: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mm-home-latest a.mm-hl-card,
  .mm-home-latest .mm-hl-media img,
  .mm-home-latest .mm-hl-cta i {
    transition: none !important;
  }
}


/* 14k. Card Medium nel menu laterale: regole estratte dal child theme (prefisso mm-medium-card) */
.mm-medium-card {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-top: clamp(32px, 6vh, 64px);
  color: var(--text-secondary);
  text-decoration: none;
}
.mm-medium-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}
.mm-medium-card__logo {
  width: 1.75em;
  height: auto;
  flex: none;
  fill: currentColor;
}
.mm-medium-card__arrow {
  width: 14px;
  height: 14px;
  flex: none;
  margin-left: auto;
  transition: transform 0.45s var(--mm-side-ease);
}
.mm-medium-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--post-card-ratio);
  object-fit: cover;
  margin-top: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.mm-medium-card__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mm-medium-card:hover .mm-medium-card__head,
.mm-medium-card:focus-visible .mm-medium-card__head { color: var(--accent-light); }
.mm-medium-card:hover .mm-medium-card__arrow,
.mm-medium-card:focus-visible .mm-medium-card__arrow { transform: translate(2px, -2px); }
.mm-medium-card:hover .mm-medium-card__img,
.mm-medium-card:focus-visible .mm-medium-card__img {
  border-color: var(--accent);
  box-shadow: 0 0 24px -8px var(--accent-glow);
}
@media (max-width: 1439.98px) {
  .mm-sidemenu > :not(.mm-medium-card) { grid-column: 1; }
  .mm-medium-card {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin-top: 0;
  }
}
@media (max-width: 767.98px) {
  .mm-medium-card {
    grid-column: 1;
    grid-row: auto;
    order: 10;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas: "img head" "img title";
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    max-width: none;
    margin-top: clamp(16px, 2.6vh, 28px);
  }
  .mm-medium-card__head { grid-area: head; }
  .mm-medium-card__img {
    grid-area: img;
    margin-top: 0;
    border-radius: var(--radius-sm);
  }
  .mm-medium-card__title {
    grid-area: title;
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    clip: auto;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text-primary);
  }
}

.mm-sidemenu .mm-medium-card { max-width: 360px; }

/* 15. Transizioni fra pagine (View Transitions cross-document) ------------- */
/* La parallasse fra pagine, riportata dal child theme (style.css, "I VALORI DI
   STREETBEAT, LETTI DAL LORO CSS", 2026-09-10), richiesta di Marco del 2026-10-08.
   Due strati a velocita' diverse: la pagina vecchia sale piano (18vh), si
   rimpicciolisce appena e sfuma; quella nuova sale da sotto come una carta
   (100vh) con gli angoli alti tondi. L'header sta fermo sopra le due.
   La curva e' quella del menu (sezione 6, easeOutQuart), su richiesta di Marco
   ("match the menu, make it smoother"). La durata no: a 600 ms la carta copriva
   il 90% dello schermo in ~200 ms, e fra due pagine impaginate uguali (titolo in
   alto a sinistra su fondo scuro, come home e About) si leggeva come uno scambio
   e non come un movimento ("still feels too fast", 2026-10-09). Ora 1,1 s, e la
   carta parte .15 s dopo la pagina vecchia: si vede prima la pagina che se ne
   va, poi quella che arriva.
   Per la fluidita' si animano solo transform e opacity, che girano sul
   compositor senza ridisegnare niente:
   - via il blur sulla pagina vecchia: e' un filtro ricalcolato a ogni
     fotogramma su uno snapshot a tutto schermo, la voce piu' cara (misurato:
     a 1440 dimezzava i fotogrammi in Chrome senza GPU);
   - angoli fermi: la carta arriva in cima sotto l'header, quindi gli angoli
     tondi non si vedono mai sparire e non serve animare il clip-path;
   - niente ombra: il clip-path degli angoli la tagliava comunque.
   Con la navigazione cross-document lo snapshot vecchio lo tiene il browser e
   quello nuovo e' vivo: i titoli che salgono parola per parola (sezione 16) si
   muovono dentro la carta che arriva. Tutto e' sotto html:not(.mm-theme-vt):
   il cambio di tema (sezione 17) e' una View Transition della stessa pagina e
   resta com'e'. Senza l'API (Firefox) la navigazione e' normale. */
:root {
  --mm-pt-dur: 1.1s;
  --mm-pt-in-delay: .15s;
  --mm-pt-ease: var(--side-ease, cubic-bezier(.25, 1, .5, 1));
  --mm-pt-out-rise: 18vh;
  --mm-pt-out-scale: .985;
  --mm-pt-card-rise: 100vh;
  --mm-pt-card-scale: .92;
  --mm-pt-card-radius: 20px;
}
/* l'adesione resta fuori da qualsiasi @media: dentro (no-preference) Chrome a
   volte non la vede ancora quando arriva la pagina nuova e scarta la transizione
   ("ViewTransition opt-in disabled", misurato 2026-10-09). Col movimento ridotto
   la toglie la sezione 16. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  /* il fondo dietro gli snapshot: senza, alcuni browser mostrano bianco */
  html:not(.mm-theme-vt)::view-transition { background: var(--bg); }
  /* plus-lighter (il default) somma le luminosita' dei due snapshot: su fondo
     scuro schiarisce a meta' corsa. Con normal la carta nuova copre la vecchia. */
  html:not(.mm-theme-vt)::view-transition-image-pair(root) { isolation: auto; }
  html:not(.mm-theme-vt)::view-transition-old(root),
  html:not(.mm-theme-vt)::view-transition-new(root) { mix-blend-mode: normal; }
  html:not(.mm-theme-vt)::view-transition-old(root) {
    animation: mm-vt-out var(--mm-pt-dur) var(--mm-pt-ease) both;
    transform-origin: 50% 42%;
  }
  /* opaca dal primo fotogramma: la pagina nuova copre la vecchia invece di
     dissolversi con lei (con un'opacita' di partenza compare un fotogramma
     scuro, misurato sul live il 2026-09-10) */
  html:not(.mm-theme-vt)::view-transition-new(root) {
    animation: mm-vt-in var(--mm-pt-dur) var(--mm-pt-ease) var(--mm-pt-in-delay) both;
    transform-origin: 50% 100%;
    clip-path: inset(0 round var(--mm-pt-card-radius) var(--mm-pt-card-radius) 0 0);
  }

  /* l'header non viaggia con la pagina: resta fermo sopra. Si vede solo quello
     nuovo (lingua e voce corrente sono gia' quelle giuste), anche se sulla
     pagina vecchia era nascosto dallo scroll. */
  html:not(.mm-theme-vt)::view-transition-group(mm-header) { z-index: 100; animation: none; }
  html:not(.mm-theme-vt)::view-transition-old(mm-header) { animation: none; opacity: 0; }
  html:not(.mm-theme-vt)::view-transition-new(mm-header) { animation: none; mix-blend-mode: normal; }
}
@keyframes mm-vt-out {
  to { opacity: 0; transform: translateY(calc(var(--mm-pt-out-rise) * -1)) scale(var(--mm-pt-out-scale)); }
}
@keyframes mm-vt-in {
  from { transform: translateY(var(--mm-pt-card-rise)) scale(var(--mm-pt-card-scale)); }
}
.mm-header { view-transition-name: mm-header; }

/* 16. Movimento ridotto ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}

/* 16. Gerarchia tipografica (richiesta di Marco, 2026-10-08) ------------------
   Modello: la pagina Peterman (staging/index.html). Titoli grandi senza maiuscolo,
   l'ultima parola nel colore d'accento, parole che salgono una alla volta; molta
   aria sotto la barra; sezioni con etichetta numerata, numero gigante sfumato
   dietro e H2 grande; corpo a 18px. Il maiuscolo resta solo al mono delle etichette. */
:root {
  --t-hero: calc(clamp(44px, 6.6vw, 168px) * var(--tk6, 1));
  --t-h2: calc(clamp(32px, 3.6vw, 72px) * var(--tk4, 1));
  --t-h3: calc(clamp(20px, 1.5vw, 26px) * var(--tk2, 1));
  --t-lede: calc(clamp(18px, 1.45vw, 30px) * var(--tk1, 1));
  --t-body: clamp(16px, 1.1vw, 19px);
  --air-top: clamp(72px, 13vh, 190px);
}
.mm-hero, .mm-hero--page { padding-top: var(--air-top); }
.mm-hero > .mm-eyebrow, .mm-project-hero > .mm-eyebrow, .mm-about-hero-text > .mm-eyebrow, .mm-home-hero-text > .mm-eyebrow { display: inline-flex; align-items: center; gap: .7rem; color: var(--text-2); }
.mm-hero > .mm-eyebrow::before, .mm-project-hero > .mm-eyebrow::before, .mm-about-hero-text > .mm-eyebrow::before, .mm-home-hero-text > .mm-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }

.mm-title {
  margin: 0; font-weight: var(--w-med); font-size: var(--t-hero); line-height: .98; letter-spacing: -.03em;
  max-width: 14ch; text-transform: none; color: var(--text); text-wrap: balance;
}
.mm-title em { font-style: normal; color: var(--accent-text); }
.mm-title .mm-w { display: inline-block; animation: mm-word .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms + .05s); }
html.mm-intro-on .mm-title .mm-w { animation-play-state: paused; }
@keyframes mm-word { from { opacity: 0; transform: translateY(.6em) rotate(2deg); } }
.mm-title--home { max-width: none; font-size: calc(clamp(56px, 10vw, 230px) * var(--tk6, 1)); line-height: .92; }
.mm-title .mm-hero-role { display: block; font-size: var(--t-lede); letter-spacing: 0; line-height: 1.4; color: var(--text-2); margin-top: calc(var(--sp) * .9); font-weight: var(--w-light); }
.mm-hero-role-line { font-size: var(--t-lede) !important; font-weight: var(--w-light) !important; color: var(--text-2) !important; max-width: 40ch; margin-top: .4rem !important; }
.mm-hero-bio, .mm-hero-bio p { font-size: var(--t-lede); line-height: 1.5; max-width: 52ch; }
.mm-hero-bio p { color: var(--text-2); }
.mm-hero-bio strong, .mm-hero-bio b { color: var(--text); font-weight: var(--w-med); }
.mm-hero--page .mm-prose, .mm-hero--page .mm-prose p { font-size: var(--t-lede); max-width: 52ch; }

/* case study */
.mm-project-intro { padding-top: clamp(48px, 8vh, 120px); }
.mm-project-title { font-size: calc(clamp(44px, 6vw, 140px) * var(--tk6, 1)); max-width: 16ch; }
.mm-project-skill { display: block; margin-top: 1.1rem; font-size: var(--t-lede); font-weight: var(--w-light); letter-spacing: 0; line-height: 1.35; color: var(--text-2); }
.mm-project-lede { color: var(--text); font-size: var(--t-lede); line-height: 1.5; max-width: 40ch; }

/* titoli di sezione dei case study: etichetta numerata sopra, numero gigante sfumato
   dietro (come i contachilometri della pagina Peterman). Si numera l'H2, non la
   sezione: su molti progetti piu' H2 stanno nella stessa sezione migrata. */
.mm-project-body { counter-reset: mm-sec; }
.mm-project-body h2 { position: relative; isolation: isolate; counter-increment: mm-sec; margin-top: clamp(56px, 8vw, 140px) !important; }
.mm-project-body h2:first-child { margin-top: clamp(24px, 3vw, 48px) !important; }
.mm-project-body h2::before {
  content: counter(mm-sec, decimal-leading-zero) " —"; display: block; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 400; letter-spacing: .1em; color: var(--accent-text);
}
.mm-project-body h2::after {
  content: counter(mm-sec, decimal-leading-zero); position: absolute; z-index: -1; left: calc(-.04em - .1em); bottom: calc(-.18em - .1em);
  /* il gradiente e' dipinto solo dentro il box (background-clip: text): con letter-spacing negativo
     il box finisce prima dell'ultima cifra e ne taglia il bordo destro. Il padding allarga il box
     (e il left/bottom compensano), senza spostare la cifra. */
  padding: .1em .22em .1em .1em;
  font-size: calc(clamp(150px, 17vw, 360px) * var(--tk6, 1)); font-weight: 600; line-height: 1; letter-spacing: -.07em; pointer-events: none;
  color: transparent; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 34%, transparent), transparent 80%);
  -webkit-background-clip: text; background-clip: text; opacity: .8;
}
.mm-blocks h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.025em; max-width: 20ch; text-transform: none; }
.mm-blocks h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.01em; }
.mm-blocks p, .mm-blocks li { font-size: var(--t-body); line-height: 1.65; max-width: 64ch; }
.mm-blocks h2 + p { font-size: var(--t-lede); line-height: 1.5; max-width: 52ch; color: var(--text-2); }
.mm-blocks p strong, .mm-blocks li strong { color: var(--text); font-weight: var(--w-med); }

/* card: titoli grandi senza maiuscolo, una descrizione leggibile, etichette mono piccole */
.mm-pcard-title { margin: 0; font-size: calc(clamp(36px, 4.4vw, 88px) * var(--tk4, 1)); font-weight: var(--w-med); line-height: .98; letter-spacing: -.035em; text-transform: none; text-wrap: balance; }
.mm-pcard-text { font-size: var(--t-body); line-height: 1.6; }
.mm-listing-brand { font-size: .75rem; }
.mm-track-name { font-family: var(--font-body); font-weight: var(--w-med); font-size: calc(clamp(28px, 2.6vw, 48px) * var(--tk4, 1)); line-height: 1; letter-spacing: -.03em; text-transform: none; }
.mm-track-intro { font-size: var(--t-body); line-height: 1.55; }
.mm-track-steps { font-size: .95rem; }
.mm-project-nav-card strong { font-size: calc(clamp(26px, 2.6vw, 48px) * var(--tk4, 1)); letter-spacing: -.03em; text-transform: none; line-height: 1; }

/* Contact sullo stesso registro */
.mm-c-title { font-size: var(--t-hero); line-height: .98; letter-spacing: -.03em; font-weight: var(--w-med); max-width: 16ch; }
.mm-outline-text { color: var(--text); -webkit-text-stroke: 0; }
.mm-c-accent { color: var(--accent-text); }
.mm-contact2 { padding-top: var(--air-top); }

@media (prefers-reduced-motion: reduce) { .mm-title .mm-w { animation: none; } }

/* 16b. About: foto accanto al titolo, adesivi, percorso ------------------------ */
.mm-about-hero { grid-template-columns: minmax(0, 44rem) minmax(260px, 460px); justify-content: start; align-items: center; column-gap: clamp(40px, 6vw, 110px); }
.mm-about-hero-text { display: grid; gap: calc(var(--sp) * .8); align-content: center; }
.mm-about-lede p { margin: .6rem 0 0; font-size: var(--t-lede); line-height: 1.5; color: var(--text-2); max-width: 46ch; }
.mm-about-lede a { color: var(--text); }
.mm-about-portrait {
  --mx: 0; --my: 0; position: relative; justify-self: center; width: min(100%, 460px); perspective: 1100px;
  animation: mm-photo-in 1.2s .35s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes mm-photo-in { from { opacity: 0; transform: rotate(5deg) translateY(40px); } }
.mm-about-frame {
  border-radius: calc(var(--radius) * 1.75); overflow: hidden; border: 1px solid var(--glass-border);
  box-shadow: 0 40px 90px -40px var(--shadow), 0 0 0 10px var(--accent-dim);
  transform: rotate(2.5deg) rotateY(calc(var(--mx) * 8deg)) rotateX(calc(var(--my) * -8deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.mm-about-frame figure { margin: 0 !important; max-width: none !important; }
.mm-about-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0 !important; border: 0 !important; filter: grayscale(1) contrast(1.05); transition: filter .6s ease, transform .6s ease; transform: scale(1.04) translate(calc(var(--mx) * -2%), calc(var(--my) * -2%)); }
.mm-about-portrait:hover .mm-about-frame img { filter: none; }
.mm-about-portrait:hover .mm-about-frame { box-shadow: 0 50px 110px -40px var(--accent-glow), 0 0 0 10px var(--accent-dim); }
.mm-sticker {
  position: absolute; z-index: 2; padding: .55rem 1rem; border-radius: 999px; white-space: nowrap; pointer-events: none;
  transform: translate(calc(var(--mx) * 18px), calc(var(--my) * 12px)) rotate(var(--r, 0deg));
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
  animation: mm-bob 5s ease-in-out infinite;
}
@keyframes mm-bob { 50% { translate: 0 -6px; } }
.mm-sticker--hello {
  --r: -9deg; top: -18px; left: -26px; padding: .7rem 1.3rem; font-size: calc(clamp(22px, 2vw, 34px) * var(--tk2, 1)); font-weight: var(--w-med); letter-spacing: -.02em;
  background: var(--accent-strong); color: var(--on-accent); box-shadow: 0 16px 40px -14px var(--accent-glow);
}
.mm-sticker--place { --r: 4deg; bottom: 18%; right: -30px; background: var(--bg-elevated); border: 1px solid var(--glass-border); color: var(--text); animation-delay: -1.6s; }
.mm-sticker--years { --r: -3deg; bottom: -16px; left: 14%; background: color-mix(in oklab, var(--bg) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--accent); color: var(--accent-text); animation-delay: -3.2s; }
.mm-about-portrait:hover .mm-sticker--hello { --r: -16deg; }
.mm-about-portrait:hover .mm-sticker--place { --r: 10deg; }
@media (max-width: 1240px) { .mm-sticker--place { right: -6px; } }
@media (max-width: 860px) {
  .mm-about-hero { grid-template-columns: minmax(0, 1fr); }
  .mm-about-portrait { width: min(78%, 360px); margin: calc(var(--sp) * 1.5) auto calc(var(--sp) * .5); }
  .mm-sticker--place { right: -12px; }
  .mm-sticker--hello { left: -12px; }
}

/* percorso: quattro tappe su una linea, un puntino che la percorre */
.mm-route { padding-block: calc(var(--sp) * 2) calc(var(--sp) * 1); }
.mm-route-list { position: relative; list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.mm-route-list::before { content: ""; position: absolute; left: 0; right: 0; top: calc(1.4rem + 7px); height: 2px; background: repeating-linear-gradient(90deg, var(--glass-border) 0 8px, transparent 8px 14px); }
.mm-route-list::after {
  content: ""; position: absolute; top: calc(1.4rem + 3px); left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); animation: mm-travel 7s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes mm-travel { 0% { left: 0; } 90%, 100% { left: calc(75% + 8px); } }
.mm-route-stop { position: relative; display: grid; gap: .25rem; align-content: start; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.mm-route-stop:hover { transform: translateY(-4px); }
.mm-route-year { color: var(--text-2); height: 1.4rem; }
.mm-route-dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); margin-bottom: .6rem; position: relative; z-index: 1; }
.mm-route-stop:last-child .mm-route-dot { background: var(--accent); box-shadow: 0 0 0 6px var(--accent-dim); }
.mm-route-stop strong { font-weight: var(--w-med); font-size: calc(clamp(26px, 2.6vw, 48px) * var(--tk4, 1)); line-height: 1; letter-spacing: -.03em; }
.mm-route-note { color: var(--text-2); font-size: var(--t-body); }
@media (max-width: 760px) {
  .mm-route-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .mm-route-list::before, .mm-route-list::after { display: none; }
}

/* il resto della bio su due colonne, vicino al titolo e non piu' accanto a una foto lontana */
.mm-about .mm-about-intro { display: block; }
.mm-about .mm-about-intro > .wp-block-group__inner-container { display: block; columns: 2 340px; column-gap: clamp(32px, 5vw, 96px); }
.mm-about .mm-about-intro p { break-inside: avoid; max-width: none; margin: 0 0 1.1rem; }
@media (prefers-reduced-motion: reduce) { .mm-sticker, .mm-route-list::after, .mm-about-portrait { animation: none; } }

/* 17. Cambio di tema (assets/js/header.js) ------------------------------------ */
/* Dissolvenza incrociata fra le due palette (Marco, 2026-10-09: "smooth, non a
   bersaglio" al posto del cerchio dal bottone). Le animazioni sono quelle di default
   delle View Transitions (vecchia che sfuma, nuova che compare, in plus-lighter: la
   luminosita' non cala a meta'), qui solo piu' lente e con una curva morbida. Vale per
   la pagina e per l'header, che ha un view-transition-name suo (sezione 15). */
html.mm-theme-vt::view-transition-old(*),
html.mm-theme-vt::view-transition-new(*) {
  animation-duration: .9s;
  animation-timing-function: cubic-bezier(.45, 0, .2, 1);
}
html.mm-theme-vt::view-transition-group(*) { animation-duration: .9s; }
/* senza View Transitions: i colori sfumano */
html.mm-theme-fade, html.mm-theme-fade *, html.mm-theme-fade *::before, html.mm-theme-fade *::after {
  transition: background-color .9s ease, color .9s ease, border-color .9s ease, fill .9s ease, stroke .9s ease, box-shadow .9s ease !important;
}

/* S1. Home: titoli di sezione, numeri delle card "What I do", tipi di articolo ------
   Richieste di Marco del 2026-10-08 (sessione 1, md/fase2/sessions/1-home.md). */

/* Titoli di sezione della home ("What I do", "Latest") e etichette dei gruppi della
   listing: lo stile di prima, etichetta mono maiuscola, ma piu' grande (12px -> 17px) e
   con un trattino d'accento davanti, come gli eyebrow degli hero (Marco, 2026-10-08,
   terzo giro: il titolo grande a --t-h2 era troppo). Ognuno tiene il suo colore. Il
   trattino e' inline-block e non flex: in un flex lo spazio fra "Swydo" e "(3)" sparisce. */
.mm-sec-title,
.mm-home-latest .mm-hl-label.mm-sec-title,
.mm-listing-brand.mm-label {
  margin: 0 !important; font-family: var(--font-mono) !important; font-weight: 400 !important;
  font-size: 17px !important; line-height: 1.3 !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; max-width: none;
}
.mm-listing-brand.mm-label { margin-bottom: var(--sp) !important; }
.mm-sec-title::before, .mm-listing-brand.mm-label::before {
  content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px;
  margin: -.15em .75rem 0 0; background: var(--accent);
}
#mm-tracks-h { color: var(--text-2); }
.mm-home-latest .mm-hl-label.mm-sec-title { display: block; color: var(--accent-light) !important; }

/* Numeri delle card: escono dai bordi della card (sopra e a destra) e li ritaglia la
   sezione, non la card. Dietro il contenuto della card (isolation + z-index -1), sopra
   il suo fondo; fuori dalla card il numero di una card finisce sotto la card successiva,
   quello dell'ultima sotto il bordo della sezione. Sfumato verso il basso come i
   numeri dei case study. overflow: clip non crea un contenitore di scorrimento. */
.mm-tracks-sec { overflow: clip; }
.mm-tracks-sec .mm-tracks { margin-top: clamp(64px, 7vw, 140px); }
.mm-track { overflow: visible; isolation: isolate; }
.mm-track-num {
  z-index: -1; top: -.4em; right: -.16em; left: auto;
  font-size: calc(clamp(170px, 15vw, 340px) * var(--tk6, 1)); font-weight: 600; line-height: .8; letter-spacing: -.07em;
  color: transparent;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 70%, transparent) 0%, color-mix(in oklab, var(--accent) 22%, transparent) 50%, transparent 82%);
  -webkit-background-clip: text; background-clip: text;
  transition: transform .6s var(--ease);
}
.mm-track:hover .mm-track-num { transform: translate(-.03em, .03em); }
@media (max-width: 1100px) {
  /* una colonna: il numero sale nello spazio fra una card e l'altra, che si allarga */
  .mm-tracks-sec .mm-tracks { row-gap: clamp(72px, 14vw, 120px); }
}
@media (prefers-reduced-motion: reduce) { .mm-track-num { transition: none; } }

/* Tipi di articolo: un colore per "blog" (articolo su questo sito) e uno per "medium"
   (link esterno), con una chip in alto a destra sopra la copertina. Tinte fisse, fuori
   dalla ruota del playground; OKLCH perche' la luminosita' sia percettiva. Misurato:
   tema scuro testo >= 11:1 sul fondo delle card, inchiostro scuro sulla chip >= 11:1;
   tema chiaro testo >= 5,2:1, bianco sulla chip >= 6:1. */
:root {
  --kind-blog: oklch(80% .13 170);
  --kind-medium: oklch(83% .14 78);
  --kind-ink: #050505;
}
:root[data-theme="light"] {
  --kind-blog: oklch(47% .085 175);
  --kind-medium: oklch(51% .12 58);
  --kind-ink: #fff;
}
.mm-hl-card--blog, .mmb-post--blog { --kind: var(--kind-blog); }
.mm-hl-card--ext, .mmb-post--ext { --kind: var(--kind-medium); }

.mm-kind {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--kind-ink); background: var(--kind);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55);
}
.mm-kind svg { width: 20px; height: auto; fill: currentColor; }

/* home, card "Latest": la chip sta nella copertina; senza copertina, nell'angolo della card */
.mm-home-latest a.mm-hl-card { position: relative; }
.mm-home-latest .mm-hl-media { position: relative; }
.mm-home-latest a.mm-hl-card--blog,
.mm-home-latest a.mm-hl-card--ext { border-color: color-mix(in oklab, var(--kind) 45%, transparent); }
.mm-home-latest a.mm-hl-card--blog:hover,
.mm-home-latest a.mm-hl-card--ext:hover { border-color: var(--kind); box-shadow: 0 24px 60px -30px color-mix(in oklab, var(--kind) 55%, transparent); }
.mm-home-latest a.mm-hl-card--blog .mm-hl-kicker, .mm-home-latest a.mm-hl-card--blog .mm-hl-cta,
.mm-home-latest a.mm-hl-card--ext .mm-hl-kicker, .mm-home-latest a.mm-hl-card--ext .mm-hl-cta { color: var(--kind); }
.mm-home-latest a.mm-hl-card--blog > .mm-kind:first-child,
.mm-home-latest a.mm-hl-card--ext > .mm-kind:first-child { position: static; margin: 26px 28px 0 auto; }

/* indice del blog: stesse tinte su cornice, data e link (l'indice ha il suo <style>
   inline dopo main.css, quindi qui serve una specificita' piu' alta) */
.mmb-index a.mmb-post.mmb-post--blog,
.mmb-index a.mmb-post.mmb-post--ext { border-color: color-mix(in oklab, var(--kind) 45%, transparent); }
.mmb-index a.mmb-post.mmb-post--blog:hover,
.mmb-index a.mmb-post.mmb-post--ext:hover { border-color: var(--kind); box-shadow: 0 24px 60px -30px color-mix(in oklab, var(--kind) 55%, transparent); }
.mmb-index a.mmb-post.mmb-post--blog .mmb-post-meta, .mmb-index a.mmb-post.mmb-post--blog .mmb-post-read,
.mmb-index a.mmb-post.mmb-post--ext .mmb-post-meta, .mmb-index a.mmb-post.mmb-post--ext .mmb-post-read { color: var(--kind); }
.mmb-index .mmb-post .mmb-post-img--none { min-height: 60px; }

/* S6. About (card "Get in touch", Education a mazzo) + badge WhatsApp della Contact
   (richieste di Marco, 2026-10-08) ---------------------------------------------- */

/* "Get in touch": la card che rompe il ritmo fra la bio e Experience. Esce dal
   flusso (page-about.php), e' l'unica cosa piena di colore della pagina, storta,
   con un nastro di testo che le passa dietro di traverso. */
.mm-about-band { position: relative; overflow-x: clip; padding-block: calc(var(--sp) * 2.5) calc(var(--sp) * 3); }
.mm-about-ticker {
  position: absolute; left: -10vw; right: -10vw; top: 50%; translate: 0 -50%; rotate: -5deg; overflow: hidden; pointer-events: none;
  padding-block: .15em; border-block: 1px solid var(--glass-border); background: var(--glass-bg);
}
.mm-about-ticker-run { display: flex; width: max-content; animation: mm-ticker 48s linear infinite; }
.mm-about-ticker-run span {
  flex: none; white-space: nowrap; padding-right: .35em; font-size: calc(clamp(56px, 9vw, 168px) * var(--tk6, 1)); font-weight: var(--w-med); line-height: 1.05;
  letter-spacing: -.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px color-mix(in oklab, var(--text) 32%, transparent);
}
.mm-about-ticker-run i { font-style: normal; font-size: .45em; vertical-align: .45em; color: var(--accent); -webkit-text-stroke: 0; }
@keyframes mm-ticker { to { translate: -50% 0; } }

.mm-about-card {
  --mx: 0; --my: 0; --line: color-mix(in srgb, currentColor 42%, transparent);
  position: relative; z-index: 1; max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr); gap: clamp(28px, 4vw, 80px); align-items: end;
  padding: clamp(28px, 4.2vw, 72px); border-radius: calc(var(--radius) * 2); color: var(--on-accent);
  background:
    radial-gradient(color-mix(in srgb, currentColor 16%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
    radial-gradient(120% 120% at 100% 100%, hsl(calc(var(--h) - 35) var(--s) 34% / .7), transparent 60%),
    var(--accent-strong);
  box-shadow: 0 70px 120px -60px var(--accent-glow), 0 30px 60px -34px var(--shadow);
  transform: rotate(-2deg) perspective(1400px) rotateY(calc(var(--mx) * 5deg)) rotateX(calc(var(--my) * -5deg));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.mm-about-card-text { display: grid; gap: 1rem; align-content: start; }
.mm-about-card-eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.mm-about-card h2 { margin: 0; font-size: calc(clamp(44px, 6.6vw, 124px) * var(--tk6, 1)); font-weight: var(--w-med); line-height: .92; letter-spacing: -.045em; color: inherit; max-width: 12ch; text-wrap: balance; }
.mm-about-card-lede { margin: .4rem 0 0; font-size: var(--t-lede); line-height: 1.45; max-width: 44ch; opacity: .92; }
.mm-about-card-lede a { color: inherit; }
.mm-about-card-actions { display: grid; gap: 1rem; }
.mm-about-card-go {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.2rem 1.15rem 1.6rem; border-radius: 999px;
  background: var(--text); color: var(--bg); text-decoration: none; font-size: calc(clamp(18px, 1.5vw, 26px) * var(--tk2, 1)); font-weight: var(--w-med); letter-spacing: -.01em;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.mm-about-card-go svg { width: 2.2em; height: 2.2em; padding: .55em; border-radius: 50%; background: var(--accent-strong); color: var(--on-accent); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.mm-about-card-go:hover { transform: translateY(-3px) rotate(1deg); box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .55); }
.mm-about-card-go:hover svg { transform: rotate(-45deg); }
.mm-about-card-go:focus-visible, .mm-about-card-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mm-about-card-go:focus-visible { outline-color: var(--on-accent); }
.mm-about-card-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mm-about-card-links a {
  display: inline-flex; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--line); color: inherit; text-decoration: none;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; transition: background .2s ease, border-color .2s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.mm-about-card-links a:hover { background: color-mix(in srgb, currentColor 14%, transparent); border-color: currentColor; transform: translateY(-2px); }
/* entrata legata allo scroll: la card arriva piu' storta e si raddrizza (dove c'e' animation-timeline) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mm-about-card { animation: mm-card-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes mm-card-in { from { rotate: 7deg; translate: 0 90px; scale: .92; } to { rotate: 0deg; translate: 0 0; scale: 1; } }
  }
}
@media (max-width: 860px) {
  .mm-about-card { grid-template-columns: minmax(0, 1fr); align-items: start; transform: rotate(-1.2deg); }
}
@media (max-width: 640px) {
  .mm-about-band { padding-block: calc(var(--sp) * 2); }
  .mm-about-card { border-radius: calc(var(--radius) * 1.5); }
  .mm-about-card-go { padding: 1rem 1rem 1rem 1.3rem; }
}

/* Education: una fila di carte sovrapposte invece di una seconda traccia (assets/js/education.js).
   Indice a sinistra; a destra la carta attiva e, sotto il suo lato destro, le altre in fila
   fino al bordo. --k e' la distanza dalla carta attiva, --step quanto spunta ognuna. */
.mm-blocks .mm-edu-side > h2 {
  margin: 0 !important; font-family: var(--font-body) !important; font-weight: var(--w-med) !important; font-size: var(--fs-4) !important;
  letter-spacing: -.01em !important; text-transform: none; color: var(--text) !important;
}
.mm-edu.mm-edu-ready { padding-top: calc(var(--sp) * 1.5); }
.mm-edu-grid { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: clamp(28px, 3.5vw, 64px); align-items: center; }
.mm-edu-side { display: grid; gap: 1.4rem; align-content: start; }
.mm-blocks .mm-edu-side > h2 { margin-bottom: .6rem !important; }
.mm-blocks .mm-edu-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mm-blocks .mm-edu-index li { max-width: none; }
.mm-edu-index button {
  position: relative; display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 1rem; align-items: baseline; width: 100%;
  padding: 1rem 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text-2); font: inherit; text-align: left; cursor: pointer;
  transition: color .2s ease, padding .45s var(--ease);
}
.mm-edu-index li:last-child button { border-bottom: 1px solid var(--border); }
.mm-edu-index button::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); transition: width .55s var(--ease); }
.mm-edu-index button:hover { color: var(--text); }
.mm-edu-index button[aria-selected="true"] { color: var(--text); padding-left: .9rem; }
.mm-edu-index button[aria-selected="true"]::before { width: 100%; }
.mm-edu-index button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-edu-y { color: var(--accent-text); font-size: .72rem; letter-spacing: .06em; }
.mm-edu-n { font-size: var(--t-body); font-weight: var(--w-med); line-height: 1.3; }
.mm-edu-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mm-blocks .mm-edu-hint { margin: 0; color: var(--text-2); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }

.mm-edu-deck {
  --n: 5; --cw: min(580px, 64cqw); --step: calc((100cqw - var(--cw)) / (var(--n) - 1));
  container-type: inline-size; display: grid; justify-items: start; padding-block: 24px; touch-action: pan-y;
}
.mm-edu-card {
  --k: 0; --dx: 0; --lift: 0;
  grid-area: 1 / 1; width: var(--cw); display: grid; align-content: start; gap: 1.2rem; padding: 14px 14px 1.6rem;
  border-radius: calc(var(--radius) * 1.5); border: 1px solid var(--glass-border); background: var(--bg-elevated);
  box-shadow: -24px 0 50px -30px var(--shadow), 0 30px 70px -36px var(--shadow); cursor: pointer; user-select: none; -webkit-user-select: none;
  transform-origin: 100% 50%;
  transform:
    translate(calc(var(--dx) * 1px + var(--k) * var(--step)), calc(var(--lift) * -1px))
    rotate(calc(var(--dx) * .04deg))
    scale(calc(1 - var(--k) * .025));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, border-color .3s ease;
}
/* le carte sotto: fondo pieno, contenuto smorzato, cosi' il mazzo si legge come mazzo */
.mm-edu-card:not(.is-top) { border-color: color-mix(in oklab, var(--accent) 22%, var(--glass-border)); }
.mm-edu-card > * { transition: opacity .4s ease; }
.mm-edu-card:not(.is-top) > * { opacity: .5; }
.mm-edu-card:not(.is-top):hover { --lift: 10; border-color: var(--accent); }
.mm-edu-card:not(.is-top):hover > * { opacity: .85; }
.mm-edu-card.is-top { border-color: color-mix(in oklab, var(--accent) 55%, var(--glass-border)); box-shadow: 0 40px 90px -40px var(--accent-glow), 0 30px 70px -36px var(--shadow); }
.mm-edu-card.is-top { cursor: grab; }
.mm-edu-card.is-top:hover { --lift: 6; }
.mm-edu-card.is-dragging { transition: none; cursor: grabbing; }
/* la carta che lascia il primo posto si abbassa un attimo mentre scivola in fondo alla fila */
.mm-edu-card.is-flying { animation: mm-edu-fly .6s cubic-bezier(.3, .7, .3, 1); }
@keyframes mm-edu-fly { 45% { translate: 0 6%; } }
.mm-edu-face {
  display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border);
  background: radial-gradient(circle at 25% 15%, var(--accent-dim), transparent 60%), var(--bg);
}
.mm-edu-face.has-cert { padding: 12px; }
.mm-blocks .mm-edu-face .mm-tl-cert { margin: 0 !important; width: 100%; height: 100%; max-width: none; }
.mm-blocks .mm-edu-face .mm-tl-cert img { width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 6px; pointer-events: none; -webkit-user-drag: none; }
.mm-edu-year { font-family: var(--font-mono); font-size: calc(clamp(80px, 9vw, 168px) * var(--tk6, 1)); line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.mm-blocks .mm-edu-card .mm-tl-item { max-width: none; padding: 0 .5rem; border: 0; background: none; gap: .4rem; }
.mm-edu-card .mm-tl-item::before { display: none; }
.mm-edu-card .mm-tl-item h3 { font-family: var(--font-body); font-weight: var(--w-med); font-size: var(--fs-2); line-height: 1.15; }
.mm-edu-card .mm-tl-meta { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem !important; }
.mm-edu-card .mm-tl-item p { font-size: .98rem; line-height: 1.55; }
/* entrata: le carte arrivano tutte una sull'altra e si aprono in fila */
.mm-edu-pending .mm-edu-card { --k: 0 !important; opacity: 0; translate: 0 40px; }
.mm-edu-card { transition-property: transform, opacity, border-color, translate; }
@media (max-width: 900px) {
  .mm-edu-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .mm-edu-side { display: contents; }
  .mm-blocks .mm-edu-side > h2 { order: -1; margin-bottom: 0 !important; }
  .mm-edu-index, .mm-edu-ctrl, .mm-blocks .mm-edu-hint { order: 1; }
  .mm-edu-deck { --cw: 80cqw; padding-block: 8px; }
  .mm-blocks .mm-edu-index { display: flex; flex-wrap: wrap; gap: .4rem; }
  .mm-edu-index button, .mm-edu-index li:last-child button { display: block; padding: .5rem .85rem; border: 1px solid var(--glass-border); border-radius: 999px; }
  .mm-edu-index button::before { display: none; }
  .mm-edu-index button[aria-selected="true"] { padding-left: .85rem; background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
  .mm-edu-index button[aria-selected="true"] .mm-edu-y { color: inherit; }
  .mm-edu-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 640px) {
  .mm-blocks .mm-edu-hint { display: none; }
  .mm-edu-deck { --cw: 84cqw; }
}

/* Contact: il badge WhatsApp. Stessa idea (anello di testo che gira, link a WhatsApp),
   ma attorno a una bolla di chat che sta scrivendo e, al passaggio, saluta.
   L'anello si inclina verso il mouse e accelera sopra il badge (mm-contact-form.js). */
.mm-contact2 .mm-wa-badge { --wa-x: 0; --wa-y: 0; --mm-badge-radius: clamp(80px, 8.4vw, 124px); --mm-badge-perspective: 800px; transform: none; border-radius: 50%; }
.mm-contact2 .mm-wa-badge:hover { transform: none; }
.mm-contact2 .mm-wa-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.mm-wa-badge .mm-badge-circle { position: relative; }
.mm-wa-tilt {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateZ(-16deg) rotateX(calc(var(--wa-y) * -16deg)) rotateY(calc(var(--wa-x) * 16deg));
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.mm-wa-badge .mm-badge-word { color: var(--accent-text); font-size: calc(clamp(14px, 1.15vw, 18px) * var(--tk1, 1)); }
.mm-wa-badge .mm-badge-char-face-back { opacity: .32; }
.mm-wa-core {
  position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; margin: -16% 0 0 -16%;
  display: grid; place-items: center; transform: rotateZ(16deg) translateZ(1px);
  animation: mm-wa-float 4.2s ease-in-out infinite;
}
.mm-wa-core::before { content: ""; position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-glow), transparent); }
.mm-wa-bubble { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--accent-strong); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.mm-wa-dots { position: relative; display: flex; gap: 12%; width: 46%; justify-content: center; translate: 0 -6%; transition: opacity .25s ease, scale .35s cubic-bezier(.34, 1.56, .64, 1); }
.mm-wa-dots i { flex: none; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--on-accent); animation: mm-wa-dot 1.3s ease-in-out infinite; }
.mm-wa-dots i:nth-child(2) { animation-delay: .16s; }
.mm-wa-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes mm-wa-dot { 0%, 60%, 100% { translate: 0 0; opacity: .5; } 30% { translate: 0 -45%; opacity: 1; } }
.mm-wa-hi { position: absolute; translate: 0 -6%; color: var(--on-accent); font-weight: var(--w-med); font-size: calc(clamp(15px, 1.35vw, 22px) * var(--tk1, 1)); letter-spacing: -.01em; white-space: nowrap; opacity: 0; scale: .5; transition: opacity .25s ease, scale .4s cubic-bezier(.34, 1.56, .64, 1); }
.mm-wa-online { position: absolute; right: 4%; top: 6%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: #34d399; border: 3px solid var(--bg); animation: mm-c-live 2s ease-out infinite; }
.mm-wa-shadow { position: absolute; left: 50%; bottom: 6%; width: 58%; height: 9%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-glow), transparent); animation: mm-wa-breathe 4.2s ease-in-out infinite; }
@keyframes mm-wa-float { 50% { translate: 0 -7%; } }
@keyframes mm-wa-breathe { 50% { scale: .78; opacity: .55; } }
.mm-wa-badge:is(:hover, :focus-visible) .mm-wa-dots { opacity: 0; scale: .4; }
.mm-wa-badge:is(:hover, :focus-visible) .mm-wa-hi { opacity: 1; scale: 1; }
.mm-wa-badge:is(:hover, :focus-visible) .mm-wa-bubble { transform: scale(1.1) rotate(-8deg); }
@media (max-width: 900px) {
  .mm-contact2 .mm-wa-badge { width: 190px; height: 190px; --mm-badge-radius: 74px; }
  .mm-wa-badge .mm-badge-word { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-about-ticker-run, .mm-wa-core, .mm-wa-dots i, .mm-wa-online, .mm-wa-shadow, .mm-edu-card.is-flying { animation: none; }
  .mm-about-card, .mm-edu-card, .mm-wa-tilt, .mm-edu-index button { transition: none; }
}

/* 16c. Home: ritratto illustrato accanto al titolo (2026-10-09) -----------------
   Stesso trattamento della foto della About (cornice inclinata, mouse, adesivi:
   classi .mm-about-portrait/.mm-about-frame/.mm-sticker riusate), ma col ritratto a
   linee di Marco in SVG: colore dal tema, si scopre con una tendina dal basso
   all'arrivo, al passaggio un'eco sfalsata nell'accento, come una stampa fuori registro. */
.mm-home-hero { grid-template-columns: minmax(0, 1fr) minmax(240px, 420px); align-items: center; column-gap: clamp(32px, 5vw, 96px); }
.mm-home-hero-text { display: grid; gap: calc(var(--sp) * .8); align-content: center; min-width: 0; }
.mm-home-portrait { width: min(100%, 420px); }
.mm-home-frame {
  display: grid; place-items: end center; aspect-ratio: 4 / 5; color: var(--text);
  background:
    radial-gradient(70% 60% at 50% 35%, var(--accent-dim), transparent 70%),
    radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--bg-elevated);
}
.mm-portrait-svg {
  display: block; width: auto; height: 94%; max-width: 100%; overflow: visible;
  transform: translate(calc(var(--mx, 0) * -2%), calc(var(--my, 0) * -2%));
  filter: drop-shadow(0 0 0 transparent);
  clip-path: inset(0 0 0 0);
  animation: mm-portrait-in 1.6s .5s cubic-bezier(.65, 0, .35, 1) both;
  transition: filter .5s var(--ease), transform .5s cubic-bezier(.2, .8, .2, 1), color .4s ease;
}
html.mm-intro-on .mm-portrait-svg, html.mm-intro-on .mm-home-portrait { animation-play-state: paused; }
@keyframes mm-portrait-in { from { clip-path: inset(100% 0 0 0); } }
.mm-home-portrait:hover .mm-portrait-svg { filter: drop-shadow(7px 5px 0 var(--accent)); color: var(--text); }
.mm-sticker--open { --r: 5deg; bottom: 12%; right: -26px; display: inline-flex; align-items: center; gap: .55rem; background: var(--bg-elevated); border: 1px solid var(--glass-border); color: var(--text); animation-delay: -2.2s; }
.mm-sticker--open svg { width: 14px; height: 14px; color: var(--accent); animation: mm-poke 1.6s ease-in-out infinite; }
@keyframes mm-poke { 0%, 60%, 100% { transform: translate(0, 0); } 30% { transform: translate(-3px, -3px); } }
/* all'hover l'invito ha gia' fatto il suo lavoro: si fa da parte */
.mm-home-portrait:hover .mm-sticker--open { --r: 11deg; opacity: 0; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }
@media (hover: none) { .mm-sticker--open { display: none; } }
@media (max-width: 1240px) { .mm-sticker--open { right: -6px; } }
@media (max-width: 860px) {
  .mm-home-hero { grid-template-columns: minmax(0, 1fr); }
  .mm-home-portrait { width: min(72%, 320px); margin: calc(var(--sp) * 1.5) auto calc(var(--sp) * .5); }
  .mm-home-portrait .mm-sticker--hello { left: -12px; }
}
@media (prefers-reduced-motion: reduce) { .mm-portrait-svg { animation: none; } }

/* Banner della documentazione di Rig, sulla case Rig fra intro e contenuto. */
.mm-docs-banner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 2.5rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-dim), var(--glass-bg) 70%);
}
.mm-docs { margin-block: calc(var(--sp) * .5) calc(var(--sp) * 2); }
.mm-docs-copy { display: grid; gap: .7rem; max-width: 70ch; }
.mm-docs-title { margin: 0; font-size: var(--fs-3); font-weight: var(--w-med); line-height: 1.1; letter-spacing: -.01em; }
.mm-docs-copy p { margin: 0; color: var(--text-2); }
.mm-docs-cta { white-space: nowrap; padding: .95rem 1.5rem; }
@media (max-width: 760px) { .mm-docs-banner { grid-template-columns: minmax(0, 1fr); } .mm-docs-cta { justify-self: start; } }