/* ───────────────────────────────────────────────────────────
   Telefono e tablet. Il desktop (≥1025 px col mouse) non legge niente di questo file:
   ogni regola sta dentro una media query che lui non attiva (lo controlla strumenti/lint_responsive.mjs).
   Caricato PER ULTIMO su ogni pagina: batte le regole dei file desktop senza toccarle.
   Soglie: telefono ≤760 · tablet verticale 761–1024 · compatto ≤1024 · dito (hover:none, pointer:coarse) solo comportamento.
   Decisioni: responsive/SPEC_FINALE.md. Ogni !important dice cosa batte.
   ─────────────────────────────────────────────────────────── */

/* ══ COMPATTO (telefono + tablet verticale) ══════════════════ */
@media (max-width: 1024px) {
  /* la barra: si nasconde scorrendo giù, torna scorrendo su; fondo pieno del colore della pagina, niente sfocatura.
     !important: batte lo style="" della nav e quello che scrive navBox() a ogni scroll */
  :is(.nav, nav[style*="position: fixed"]) { transition: transform .35s cubic-bezier(.6,0,.1,1), background-color .4s ease, border-color .4s ease !important;
    padding-left: max(20px, env(safe-area-inset-left)) !important; padding-right: max(20px, env(safe-area-inset-right)) !important;
    padding-top: max(16px, env(safe-area-inset-top)) !important; }
  html.fa-navsolid nav[style*="position: fixed"] { background: #050a0e !important; }   /* la home: sotto la barra c'è sempre il blu notte */
  html.fa-navsolid .nav { background: inherit !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html.fa-navhide:not([data-fa-menu="open"]) :is(.nav, nav[style*="position: fixed"]) { transform: translateY(-100%); }
  html[data-fa-menu="open"] :is(.nav, nav[style*="position: fixed"]) { transform: none; }

  /* le pagine progetto: prima schermata un po' più corta, così si vede che la pagina continua */
  main > .hero { min-height: 88svh; }
  main > .hero .hint { bottom: 24px; }

  /* comparse più rapide */
  .reveal { transform: translateY(16px); transition-duration: .5s, .5s; }

  /* le schermate a colore: una colonna, prodotto sopra, nome e testo sotto, tutto nella stessa schermata */
  .col:not(.sc):not(.ss) { grid-template-columns: 1fr; min-height: 0; align-content: center; row-gap: 28px; }
  .mark { min-height: 0; }   /* Natui, il marchio: niente schermata quasi intera per il logo */
  /* prima il titolo, poi lo slider: caroselli e video dopo il testo */
  .col .car, .col .vid { order: 0; }
  .col:not(.sc):not(.ss) .pk { order: 1; }   /* prima il titolo, poi il prodotto */
  .col:not(.sc):not(.ss) .txt { max-width: 62ch; }

  /* i caroselli: si trascinano col dito, niente riquadro scuro dietro le foto (un fondo voluto resta: è nello style) */
  .car .it { background: transparent; }
  .car .trk { overscroll-behavior-x: contain; }

  /* gli altri progetti: una fila da trascinare, nessun progetto da solo su una riga */
  .others .list { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 2 * 14px) / 2.4);
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--m)); padding: 0 var(--m); scroll-padding: 0 var(--m); }
  .others .list::-webkit-scrollbar { display: none; }
  .others .list > a { scroll-snap-align: start; }

  /* footer: bersagli da 44 px */
  .fa-copy { width: 44px; height: 44px; font-size: 14px; }
  .fa-soc a { min-height: 44px; display: inline-flex; align-items: center; }
  #contact.fa-foot { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

  /* il contametri accanto al sub, mentre il pollice scende (lo crea fa-motion.js solo al tocco) */
  #fa-scroll .fa-sb-m { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 10px/1 Archivo, 'Helvetica Neue', Helvetica, sans-serif;
    letter-spacing: .1em; white-space: nowrap; color: currentColor; opacity: .85; font-variant-numeric: tabular-nums; pointer-events: none; }
}

/* ══ TABLET VERTICALE (761–1024) ═════════════════════════════ */
@media (min-width: 761px) and (max-width: 1024px) {
  .facts .grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .facts .row { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
  .facts .intro { font-size: 22px; }

  /* ritmo: 136 px fra due sezioni, mai sommato due volte */
  main > section:not(.hero):not(.col) { padding-top: 60px; padding-bottom: 60px; }
  main > section.credits + section.credits { padding-top: 0; }
  main > section.facts:not(.hero):not(.col) { padding-top: 40px; }

  .col:not(.sc):not(.ss) { padding-top: 88px; padding-bottom: 88px; }
  .col:not(.sc):not(.ss) .pk { width: min(460px, 56vw); justify-self: center; }
  .col .car { width: 100%; }
  .car .trk { grid-auto-columns: calc((100% - var(--g)) / 1.3); }   /* una foto e il pezzo di quella dopo */
  .car .ar { width: 48px; height: 48px; }
  .vid.reel video { height: min(74svh, 760px); }

  .range .row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ══ TELEFONO (≤760) ═════════════════════════════════════════ */
@media (max-width: 760px) {
  /* "Contattami" esce dalla barra e va in fondo al menu */
  :is(.nav, nav[style*="position: fixed"]) .fa-pill { display: none; }
  .nav .logo-l img { height: 34px !important; }   /* batte lo style="" del logo */

  /* ritmo: 96 px fra due sezioni */
  main > section:not(.hero):not(.col) { padding-top: 40px; padding-bottom: 40px; }
  main > section.credits + section.credits { padding-top: 0; }
  main > section.facts:not(.hero):not(.col) { padding-top: 24px; }
  .facts .row { margin-top: 40px; gap: 32px; }
  .facts .intro { font-size: 19px; }
  .disc { margin-top: 0; }

  /* la gamma: quattro per riga, l'ultima riga centrata invece di un orfano a sinistra */
  .range .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .range .row:has(> img:nth-child(3):last-child), .range .row:has(> img:nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* la panoramica a tre riquadri: si trascina col dito, si vede il pezzo del successivo */
  .chain { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; gap: 12px; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--m)); padding: 0 var(--m); scroll-padding: 0 var(--m); }
  .chain::-webkit-scrollbar { display: none; }
  .chain .pf { scroll-snap-align: start; }
  .pf figcaption { letter-spacing: .1em; }

  /* le schermate a colore: prodotto, nome, gusto e testo dentro lo stesso schermo */
  .col:not(.sc):not(.ss) { padding-top: 64px; padding-bottom: 64px; row-gap: 20px; }
  .col:not(.sc):not(.ss) .pk { width: min(64vw, 46svh); justify-self: center; }
  .col h3 { margin-bottom: 12px; }
  .col .fl { margin-bottom: 12px; }
  .col .q, .lab { letter-spacing: .1em; }

  /* caroselli: una foto e il 14% della successiva, niente frecce (si trascina) */
  .car .trk { grid-auto-columns: 86%; --g: 10px; }
  .car .ars { display: none; }
  .car .it { max-height: 64svh; }
  .vid.reel video { height: auto; width: 100%; max-height: 74svh; }

  /* altri progetti: card grandi, quella dopo si vede a metà */
  .others .list { grid-auto-columns: 72%; }
  .others .nm { font-size: 18px; }

  /* footer: "Scrivimi" a tutta larghezza alto 56, base e ora affiancate, social come pulsanti */
  .fa-foot-btn { width: 100%; min-height: 56px; box-sizing: border-box; }
  .fa-foot-cols { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .fa-foot-cols .fa-fc:nth-child(2), .fa-foot-cols .fa-fc:nth-child(4) { grid-column: 1 / -1; }
  .fa-foot-cols .fa-fc:nth-child(2) { order: -1; }
  .fa-fc .fa-soc { gap: 10px; }
  .fa-fc .fa-soc .fa-fl { padding: 0 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; }
  .fa-fc .fa-soc .fa-fl .fa-strike { display: none; }

  /* il menu: "Contattami" come pulsante largo in fondo (lo crea fa-motion.js solo sul telefono) */
  .fa-menu-cta { position: absolute; left: 24px; right: 24px; bottom: calc(32px + env(safe-area-inset-bottom)); height: 56px;
    display: flex; align-items: center; justify-content: center; border-radius: 100px; background: #fff; color: #050a0e;
    font: 600 15px/1 Archivo, 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: .02em; text-decoration: none;
    opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1); }
  #fa-menu.is-open .fa-menu-cta { opacity: 1; transform: none; transition-delay: .35s; }
  .fa-menu-wrap { top: 46%; }
}

/* telefono piccolo (SE, 375) */
@media (max-width: 760px) and (max-width: 400px) {
  .fa-foot-cols { grid-template-columns: 1fr 1fr; }   /* batte la colonna unica sotto 400 */
}

/* ══ DITO, qualunque larghezza (anche iPad orizzontale): solo comportamento ═══ */
@media (hover: none) and (pointer: coarse) {
  html { -webkit-tap-highlight-color: transparent; }
  /* niente hover rimasti attaccati dopo un tocco */
  .others a:hover .cv { transform: none; }
  .others a:hover .nm { color: inherit; }
  .range .row img:hover { transform: none !important; }   /* batte il !important dell'hover della gamma */
  .ccap:hover { color: inherit; border-color: rgba(255,255,255,.3); }
  /* al tocco una voce del menu si cancella con la sua linea a mano, poi si entra (fa-motion.js aspetta 220 ms) */
  .fa-item.fa-tap .fa-fill { clip-path: inset(0 0 0 0); transition-duration: .22s; }
  a, button { touch-action: manipulation; }
  :is(.fa-foot-btn, .fa-menu-cta, .others a, .car .ar, .fa-copy):active { transform: scale(.98); }
}

/* ══ RIDUCI MOVIMENTO, solo su telefono e tablet ═════════════ */
@media (prefers-reduced-motion: reduce) and (max-width: 1024px) {
  :is(.nav, nav[style*="position: fixed"]) { transition: none !important; }
  .fa-menu-cta { transition: none; }
}

/* ═════════════════════════════════════════════════════════════
   HOME (fase 2)
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* lavori: niente anteprima laterale, card con la copertina intera dentro la riga */
  #fa-works { grid-template-columns: 1fr; }
  .fa-stage { display: none; }
  .fa-prow { grid-template-columns: 1fr auto; row-gap: 14px; padding: 22px 0; }
  .fa-pn { grid-column: 1; grid-row: 1; }
  .fa-pd { grid-column: 2; grid-row: 1; flex-direction: row; gap: 14px; }
  .fa-pth { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .fa-pname { grid-column: 1 / -1; grid-row: 3; }
  .fa-pt { white-space: normal; }
  .fa-plist.dim .fa-prow { opacity: 1; }
  .fa-pm, .fa-pk { font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.7); }

  /* Approccio: il titolo, poi il numero fermo in alto col suo fondo, sotto le quattro fasi in colonna; niente schermate nere.
     !important: battono gli style="" che la versione desktop scrive su numero e titolo */
  .fa-ap-dive { height: auto; }
  .fa-ap-stage { position: relative; height: auto; overflow: visible; padding: 72px var(--fa-m, 24px) 72px; }
  .fa-ap-veil, .fa-ap-strip { display: none; }
  .fa-ap-hw { position: static; transform: none; width: auto; margin: 0 0 56px; }
  .fa-ap-hw .fa-ap-h, .fa-ap-l { opacity: 1 !important; }
  html:not(.fa-apmob) .fa-ap-hw .fa-ap-h, html:not(.fa-apmob) .fa-ap-hw .fa-ap-hand { transform: none !important; }
  .fa-ap-w[data-k="1"], .fa-ap-w[data-k="2"] { visibility: visible !important; }
  .fa-ap-w[data-k="2"] { position: static; transform: none; margin-top: .1em; }
  .fa-ap-hw .fa-ap-i, .fa-ap-hw .fa-ap-hand { opacity: 1 !important; }
  .fa-ap-numw { position: sticky; top: 0; left: auto; z-index: 2; margin: 0 calc(-1 * var(--fa-m, 24px)) 24px; padding: calc(64px + env(safe-area-inset-top)) var(--fa-m, 24px) 14px;
    transform: none !important; opacity: 1 !important; filter: none !important; background: transparent; transition: background-color .3s ease; }
  /* il fondo scuro solo quando il numero è fermo in alto (prima sembrava un rettangolo nero sotto la frase) */
  .fa-ap-numw.stuck { background: linear-gradient(#050a0e 82%, rgba(5,10,14,0)); }
  .fa-ap-tl, .fa-ap-tr, .fa-ap-bl, .fa-ap-br { position: relative; top: auto; right: auto; bottom: auto; left: auto; max-width: none; align-items: flex-start; text-align: left; }
  .fa-ap-s { margin: 0 0 48px; opacity: .4; transform: none; transition: opacity .4s ease; }
  .fa-ap-s.on { opacity: 1; }
  .fa-ap-s.past { opacity: .4; }
  .fa-ap-n { font-size: 26px; }
  .fa-ap-d { font-size: 16px; line-height: 1.55; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  :root { --fa-m: 6vw; }
  #work, #about { padding-left: 6vw !important; padding-right: 6vw !important; }   /* battono lo style="" delle sezioni */
  .fa-plist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; border-bottom: 0; }
  .fa-h1 { font-size: clamp(48px, 6.6vw, 68px); }   /* "DOVE LE IDENTITÀ" su una riga dentro i margini */
  .fa-hero-in { padding: 0 6vw; justify-content: flex-end; padding-bottom: 30svh; }
  #fa-badge { top: auto; bottom: 8svh; right: 6vw; margin-top: 0; }
  .fa-ap-num { font-size: 22vw; }
  .fa-ap-s { max-width: 62ch; }
}
@media (max-width: 760px) {
  #work { padding-top: 40px !important; }   /* batte il !important del modello della pagina */
  .fa-ap-num { font-size: 28vw; }
  /* "Marchi da zero. Fino in fondo." grande come gli altri titoli (Lavoriamo insieme): "MARCHI", poi "DA ZERO.", poi la scritta a mano */
  .fa-big { font-size: clamp(34px, 12vw, 60px); }
  .fa-big .fa-bl:first-child .fa-bi { display: block; white-space: normal; }   /* "MARCHI" / "DA ZERO.": l'a capo lo mette fa-motion.js */
  .fa-big .fa-bl:first-child .fa-bi > .fa-fill { white-space: nowrap; }
  .fa-big .fa-handline { font-size: 1.04em; }   /* "Fino in fondo." sta nella riga senza far stringere il titolo */
  /* la banda "Disponibile" ripete la mail che c'è subito dopo nel footer: sul telefono si toglie */
  .fa-band { display: none; }
  #fa-badge { right: 20px; }   /* batte il right:7vw senza condizioni */
  .fa-stack { width: min(300px, 72vw); }
}
@media (hover: none) and (pointer: coarse) {
  /* il primo lavoro non parte barrato: al tocco la linea a mano non resta attaccata.
     !important: batte la linea accesa dalla riga attiva (.fa-prow.on) */
  .fa-prow .fa-strike path { stroke-dashoffset: 1 !important; }
  #fa-badge { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* ═════════════════════════════════════════════════════════════
   SCENE SPECIALI (fase 3)
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Insomnia, la stylescape: scorre di lato allo scroll come sul desktop, si entra già zoomati; sotto cambiano i capitoli */
  .ss-pin { padding-top: 64px; }
  .ss-band { padding-top: 18px; padding-bottom: 28px; }
  .ss-cap h3 { font-size: 26px; margin-bottom: 8px; }

  /* Trip Gaming, il segno: la tavola vera inquadrata sulla parte utile (24–76% della larghezza), così è grande */
  #tg-bloop, #mi-etichettati { height: 200svh; }

  /* Made In: i post in attesa passano sotto il testo e fuori dal palco, mai sopra le parole */
  #mi-etichettati .stage { overflow: hidden; }
  #mi-etichettati .mi-row .txt { position: relative; z-index: 2; background: #000; padding-top: 18px; }
  .mi-stack { position: relative; z-index: 1; }
  .mi-row4 { flex-wrap: wrap; }
  .mi-row4 img:nth-child(n) { flex: 1 1 40%; }   /* stesso peso delle regole che fissano le larghezze sul desktop */

  /* Logofolio: sul telefono la striscia (tavole alte 20 px) lascia il posto alla griglia, una tavola per riga */
  .col.lf { display: none; }
  .lf-all { display: flex; }
  .lf-all .lf-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 1024px) {
  /* Trip Gaming, il segno: la tavola vera inquadrata sulla parte utile (24–76% della larghezza), così è grande */
  .tg-board { overflow: hidden; }
  .tg-board img { width: 192.3%; max-width: none; margin-left: -46.2%; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  /* Bloop sul tablet: la tavola centrata a 60vw sopra la didascalia, non piccola a destra in un palco vuoto */
  .bl-row { grid-template-columns: 1fr; justify-items: center; }
  .bl-fig { order: -1; height: auto; width: 60vw; }
}

/* ── HOME, sue correzioni del 19/10/2026 ── */
@media (max-width: 760px) {
  /* il bollino in alto a sinistra, sopra INTO THE BLUE; il titolo scende un po' per lasciare posto all'invito a scorrere */
  #fa-badge { left: 24px; right: auto; top: calc(120px + env(safe-area-inset-top)); bottom: auto; margin-top: 0; }
  .fa-hero-in { justify-content: flex-start; padding-top: calc(296px + env(safe-area-inset-top)); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }   /* subito sotto il bollino (finisce a 252): 44 px d'aria */
  /* "scorri per immergerti" come sul desktop, con la freccia che scende, ma in orizzontale in basso a sinistra */
  #hero .fa-explore { display: flex; flex-direction: row; align-items: center; gap: 10px; left: 24px; bottom: calc(26px + env(safe-area-inset-bottom)); }
  #hero .fa-explore span { writing-mode: horizontal-tb; }
}
@media (max-width: 1024px) {
  /* a menu aperto la barra resta trasparente e sempre al suo posto (la versione piena copriva l'acqua del menu) */
  html[data-fa-menu="open"] :is(.nav, nav[style*="position: fixed"]) { background: transparent !important; border-color: transparent !important; transform: none !important; }
}
@media (hover: none) and (pointer: coarse) {
  /* dopo un tocco l'hover del pulsante del menu restava attaccato: una linea corta, "un pezzo di hamburger" */
  #nav-burger:hover span:first-child { width: 26px; }
  #nav-burger:hover span:last-child { opacity: 1; }
}

/* ── 19/10, seconde note ── */
@media (max-width: 760px) {
  /* "Marchi da zero. Fino in fondo.": sul telefono senza la finestrella dei lavori */
  .fa-win-pack { display: none; }
}
@media (max-width: 1024px) {
  /* le frecce ↗ diventano una freccia disegnata (su iPhone erano emoji): la mette fa-motion.js solo qui */
  .fa-arw { display: inline-block; width: .8em; height: .8em; vertical-align: -.08em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
  /* le schermate a colore entrano come una scena: il prodotto o lo slider sale e si posa, poi il testo.
     Solo se il JS c'è (html.fa-anim), così senza JS non resta niente nascosto */
  html.fa-anim .col:not(.sc):not(.ss) > .txt,
  html.fa-anim .col:not(.sc):not(.ss) > .pk img,
  html.fa-anim .col:not(.sc):not(.ss) .car .trk,
  html.fa-anim .col:not(.sc):not(.ss) .vid video { transition: opacity .9s cubic-bezier(.6,0,.1,1), transform 1s cubic-bezier(.6,0,.1,1); }
  html.fa-anim .col:not(.sc):not(.ss):not(.fa-in) > .pk img,
  html.fa-anim .col:not(.sc):not(.ss):not(.fa-in) .car .trk,
  html.fa-anim .col:not(.sc):not(.ss):not(.fa-in) .vid video { opacity: 0; transform: translateY(56px) scale(.94); }
  html.fa-anim .col:not(.sc):not(.ss):not(.fa-in) > .txt { opacity: 0; transform: translateY(28px); }
  html.fa-anim .col.fa-in:not(.sc):not(.ss) > .txt { transition-delay: .18s; }
}
@media (hover: none) and (pointer: coarse) {
  /* in fondo alla pagina "Risali", come sul desktop: in basso a destra, bersaglio grande */
  #fa-scroll .fa-sb-up { display: flex; left: auto; right: 14px; width: auto; margin: 0; align-items: flex-end; padding: 12px 10px;
    bottom: calc(10px + env(safe-area-inset-bottom)); }
  #fa-scroll.at-bed .fa-sb-m { opacity: 0; }   /* in fondo parla "Risali", non il contametri */
}

@media (max-width: 1024px) {
  /* home: la copertina che gira nella card ha l'onda dell'acqua, come la cornice del desktop */
  .fa-pth img.fa-cyc { filter: url(#fa-ripple); will-change: transform; }
}

@media (max-width: 1024px) {
  /* "Le idee facili / galleggiano. / io vado più giù." in tre tempi come sul desktop: la frase resta ferma a un terzo
     dello schermo mentre si scorre (la sposta il JS con --apy), LE IDEE FACILI glitcha in GALLEGGIANO. nello stesso
     punto, poi si scrive a mano "io vado più giù.", poi parte il numero con le fasi. Senza JS o con riduci movimento resta tutto fermo e visibile */
  html.fa-apmob .fa-ap-hw { height: 150svh; margin: 0; text-align: center; }
  /* ferma la tiene il browser (sticky), non il codice: è l'unico modo perché sull'iPhone resti liscia.
     La parola ha sotto un margine alto quanto la riga a mano, così le due si staccano insieme alla fine */
  html.fa-apmob .fa-ap-hw .fa-ap-h { position: sticky; top: calc(50svh - (var(--ap-h, 40px) + var(--ap-hand, 64px)) / 2); margin-bottom: var(--ap-hand, 64px) !important; transform: none !important; }
  html.fa-apmob .fa-ap-hw .fa-ap-hand { position: sticky; top: calc(50svh - (var(--ap-h, 40px) + var(--ap-hand, 64px)) / 2 + var(--ap-h, 40px) + 6px); margin-top: calc(6px - var(--ap-hand, 64px)) !important; transform: none !important; }
  html.fa-apmob .fa-ap-hw .fa-ap-w[data-k="2"] { position: absolute; left: 50%; top: 0; margin: 0; translate: -50% 0; }
  html.fa-apmob .fa-ap-hw:not(.show2) .fa-ap-w[data-k="2"], html.fa-apmob .fa-ap-hw.show2 .fa-ap-w[data-k="1"] { visibility: hidden !important; }
  html.fa-apmob .fa-ap-hw.show2 .fa-ap-w[data-k="2"], html.fa-apmob .fa-ap-hw:not(.show2) .fa-ap-w[data-k="1"] { visibility: visible !important; }
  html.fa-apmob .fa-ap-hw .fa-ap-hand { margin-left: auto; margin-right: auto; clip-path: inset(-20% 100% -20% 0) !important; transition: clip-path .7s cubic-bezier(.6,0,.1,1); }
  html.fa-apmob .fa-ap-hw .fa-ap-hand.on { clip-path: inset(-20% -10% -20% 0) !important; }
}

/* ── testi sul telefono (19/10): niente righe vuote, niente a capo forzati nelle descrizioni brevi ── */
@media (max-width: 760px) {
  .col .txt > br { display: none; }   /* l'a capo fra la pillola e il testo faceva una riga vuota */
  .col .d br, .ss-cap .d br, .sc .lead br, .mi-print .d br { display: none; }   /* le frasi si seguono: "…del lookbook. Il marchio bianco sul nero." */
  .col .d, .ss-cap .d, .sc .lead, .disc, .credits p, .fa-ap-d { text-wrap: pretty; }
  main h3, main blockquote, .sc .big, .mi-q { text-wrap: balance; }   /* titoli e citazioni: righe bilanciate, mai una parola sola in fondo */
}
@media (max-width: 760px) {
  /* nei testi la parola col glitch resta una parola normale: così lo spazio che non va a capo la tiene con quella prima */
  main blockquote .fa-gw, main p .fa-gw, main blockquote .fa-gt, main p .fa-gt { display: inline; }
}
@media (max-width: 760px) {
  /* Made In, le citazioni: ogni verso su una riga sua non ci sta, scritto così grande; sul telefono la citazione scorre come un testo unico */
  .sc blockquote.mi-q .l { display: inline; }
  .sc blockquote.mi-q .l::after { content: " "; }
  .mi-q br { display: none; }
}

/* ── 19/10, iPad in verticale: la prima schermata composta come sul telefono ──
   bollino sopra, titolo sotto, il gruppo al centro un po' più in alto (non più in fondo con mezzo schermo vuoto);
   "scorri per immergerti" in orizzontale in basso, sullo stesso filo del titolo. Vale anche per l'iPad mini (744). */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
  #hero { --hm: 6vw; --bd: clamp(132px, 17vw, 180px); }
  .fa-h1 { font-size: clamp(48px, 7.1vw, 80px); }   /* "DOVE LE IDENTITÀ" all'88% della riga, come sul telefono */
  /* il gruppo (bollino + 48 + titolo + sottotitolo ≈ 37,6vw + 100 px) sta al centro, alzato del 4% */
  #fa-badge { width: var(--bd); height: var(--bd); left: var(--hm); right: auto; bottom: auto; margin-top: 0;
    top: calc(46svh - 18.8vw - 50px); }
  .fa-badge-num { padding-top: calc(var(--bd) * .41); font-size: calc(var(--bd) * .14); }
  #fa-badge::after { inset: calc(var(--bd) * .19); }
  .fa-hero-in { padding: calc(46svh - 18.8vw - 50px + var(--bd) + 48px) var(--hm) 0; justify-content: flex-start; }
  #hero .fa-explore { display: flex; flex-direction: row; align-items: center; gap: 10px; left: var(--hm); bottom: calc(32px + env(safe-area-inset-bottom)); }
  #hero .fa-explore span { writing-mode: horizontal-tb; }
}
@media (min-width: 700px) and (max-width: 760px) and (orientation: portrait) {
  #hero { --hm: 24px; }   /* l'iPad mini segue i margini del resto della pagina, che lì è quella del telefono */
}
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  /* il marchio e il menu sullo stesso filo del titolo e dei lavori (6vw), non a 20 px */
  :is(.nav, nav[style*="position: fixed"]) { padding-left: 6vw !important; padding-right: 6vw !important; }   /* batte il max(20px) del compatto */
}

/* ── 19/10, Made In rifatta come Behance: telefono e iPad ── */
@media (max-width: 760px) {
  /* la prima fila di foto (4 affiancate) diventa due coppie, ognuna alla stessa altezza (larghezza = proporzione) */
  #mi-immagine .mi-gr:first-child { flex-wrap: wrap; }
  #mi-immagine .mi-gr:first-child figure:nth-child(1) { flex: 0 0 calc((100% - 8px) * .313); }
  #mi-immagine .mi-gr:first-child figure:nth-child(2) { flex: 0 0 calc((100% - 8px) * .687); }
  #mi-immagine .mi-gr:first-child figure:nth-child(3) { flex: 0 0 calc((100% - 8px) * .320); }
  #mi-immagine .mi-gr:first-child figure:nth-child(4) { flex: 0 0 calc((100% - 8px) * .680); }
  #mi-concept .mi-sk img { width: 100%; }               /* lo schizzo del marchio a tutta colonna, non al 70% */
  #mi-concept .mi-anim video { width: 100%; }
  #mi-video .mi-play { width: 60px; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  #mi-concept .mi-sk img { width: 84%; }
  #mi-concept .mi-anim video { width: min(100%, 52svh); }
}
/* Made In, il titolo della domanda: tre righe senza parole sole (QUANTO INCIDONO / LE ETICHETTE / NELLA NOSTRA VITA?), la più lunga = 13 em */
@media (max-width: 1024px) { #mi-domanda .mi-h .mb { display: inline; } }
@media (max-width: 760px) { #mi-domanda .mi-h { font-size: calc((100vw - 48px) / 13.2); } }
@media (min-width: 761px) and (max-width: 1024px) { #mi-domanda .mi-h { font-size: min(60px, 88vw / 13.2); } }

/* ── 19/10, controllo pre-pubblicazione ── */
@media (min-width: 761px) and (max-width: 1024px) {
  /* Approccio: il contametri fermo in alto si sbloccava proprio sopra l'ultima fase (PRESENTAZIONE). Sotto l'ultima fase
     uno spazio alto quanto il contametri (22vw di numero + i margini): si sblocca sul vuoto */
  .fa-ap-stage { padding-bottom: calc(22vw + 60px); }
}