/* ===================== FONT + RESET ===================== */
@font-face{
  font-family:"Public Pixel";
  src:url("./fonts/PublicPixel.ttf") format("truetype");
}
*{ margin:0; padding:0; box-sizing:border-box }

/* Forza TUTTI i paragrafi in monospace (override globale) */
/* + Uniforma dimensioni come i <p> della bio */
p{
  font-family: monospace !important;
  font-size: clamp(.82rem, 1.9vw, 1rem);
  line-height: 1.75;
  color: #eaeaea;
}

/* ===================== ROOT VARS ===================== */
:root{
  --fm-pink:#ff2f92;
}

html{ scroll-behavior:smooth; scroll-padding-top:90px }
html, body{ overflow-x: clip; }
body{
  font-family:"Public Pixel", monospace;
  background:#000; color:#fff;
}

/* utils */
.section-relative{ position:relative; }

/* ===================== NAVBAR ===================== */
.navbar{
  position:fixed; inset:0 0 auto 0; height:60px; background:transparent;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; z-index:1000;
  transition:background-color .25s, box-shadow .25s;
}
.navbar.is-solid{ background:#000; box-shadow:0 8px 30px rgba(0,0,0,.35) }

.nav-left{ display:flex; align-items:center; gap:1.6rem }
.nav-link{ text-decoration:none; color:#fff; font-size:.9rem; transition:color .18s; }
.nav-link:hover{ color:#09D8EE }
.nav-link.is-active{ color:var(--fm-pink) }
.nav-link:focus-visible{ outline:2px dashed #FFCB46; outline-offset:4px }

.nav-right{ display:flex; gap:.5rem }
.flag{ width:40px; cursor:pointer; transition:transform .2s }
.flag:hover{ transform:scale(1.1) }

.section-wrapper,.projects-section{ scroll-margin-top:90px }

/* burger (desktop hidden) */
.nav-burger{ display:none; }

/* ============ MOBILE NAV (≤ 820px) ============ */
@media (max-width: 820px){
  .navbar{
    height:56px; padding:0 1rem; background:#000;
    box-shadow:0 8px 30px rgba(0,0,0,.35);
  }
  .nav-left, .nav-right{ display:none; }

  .nav-burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:auto; cursor:pointer;
    background:#000; color:#fff;
    border:2px solid #fff; box-shadow:inset 0 0 0 3px #000, 4px 4px 0 #000;
    position:relative;
  }

  /* === 2 linee centrate → X centrata === */
  /* lo span non disegna più la terza linea */
  .nav-burger span{ display:none; }

  /* due barre solo con ::before / ::after */
  .nav-burger::before,
  .nav-burger::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:22px; height:2px; background:#fff;
    transform-origin:50% 50%;
    transition:transform .18s ease;
  }
  /* chiuso: una sopra e una sotto il centro, equidistanti */
  .nav-burger::before{ transform:translate(-50%, calc(-50% - 8px)); }
  .nav-burger::after { transform:translate(-50%, calc(-50% + 8px)); }
  /* aperto: croce perfettamente centrata */
  .nav-burger[aria-expanded="true"]::before{ transform:translate(-50%, -50%) rotate(45deg); }
  .nav-burger[aria-expanded="true"]::after { transform:translate(-50%, -50%) rotate(-45deg); }

  .mobile-menu[hidden]{ display:none !important; }
  .mobile-menu{ position:fixed; left:0; right:0; top:56px; background:#000; border-top:1px solid #222; z-index:9999; }
  .mobile-menu-panel{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:14px 16px 18px; }
  .mobile-link{
    text-decoration:none; color:#fff; font-family:"Public Pixel", monospace;
    font-size:1rem; line-height:1; letter-spacing:.04em; padding:.7rem 1rem; border:2px solid #fff;
    box-shadow:inset 0 0 0 3px #000, 4px 4px 0 #000; background:#000; width:100%; max-width:320px; text-align:center;
  }
  .mobile-link:focus-visible, .mobile-link:hover{ background:var(--fm-pink); color:#000; }
  .mobile-flags{ display:flex; gap:10px; margin-top:6px }
  .mobile-flags .flag{ width:36px; height:auto; display:block }
}

body.menu-open{ overflow:hidden; }

/* ===================== HERO ===================== */
.hero{
  position:relative;
  background:#000 url("./image/hero.png") center/cover no-repeat;
  height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding-top:60px; text-align:center;
}
.hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.25); pointer-events:none; }
.hero > *{ position:relative; z-index:1; }

.outline-text{
  font-size:12vw; color:transparent; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:4px #fff; paint-order:stroke fill; text-rendering:geometricPrecision;
  margin-bottom:.5em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
#scramble-text{ font-size:4vw; }

/* plants */
.hero .plant{ --scale:1.4; }
.plant{
  position:absolute; top:var(--top,auto); right:var(--right,auto);
  bottom:var(--bottom,auto); left:var(--left,auto);
  /* desktop invariato: clamp con cap a 40vw */
  width:clamp(140px, var(--w), 40vw);
  pointer-events:none; transform:translateY(var(--py,0px)) scale(var(--scale,1));
  will-change:transform; z-index:1;
}
.plant>img{ display:block; width:100%; height:auto; transform-origin:50% 100%; animation:plant-sway 6s ease-in-out infinite alternate; }
@keyframes plant-sway{ from{ transform:translateY(-2px) rotate(-1deg) } to{ transform:translateY(2px) rotate(1deg) } }

/* === MOBILE FIX (≤600px): centra le liane e rimuovi il cap a 40vw === */
@media (max-width:600px){
  .hero .plant{ --scale:2.4 !important; }
  .hero .outline-text{ font-size:clamp(64px, 18vw, 140px); }
  #scramble-text{ font-size:clamp(22px, 7vw, 40px); }

  /* micro-tuning positions for existing IDs only — MOBILE */
  /* Liane: centrale + larghezza = 2× rispetto alla tua var(--w) attuale */
  #liana-right-1{
      
      right: -6vw !important;
    left: auto !important;
    top: -4vh !important;
    width: clamp(140px, var(--w, 100vw), 80vw) !important;
    transform: translateY(var(--py,0)) scale(var(--scale,1)) !important;
     
  }

  #liana-left-1{
      left: -12vw !important;   /* leggermente più a sinistra */
    right: auto !important;
    top: -4vh !important;
    width: clamp(140px, var(--w, 100vw), 80vw) !important;
    transform: translateY(var(--py,0)) scale(var(--scale,1)) !important;
    
    
  }

  /* Pianta in basso a sinistra: solo un filo più a sinistra (dimensione invariata) */
  #plant-base-left{
      
    left: -12vw !important;   /* leggermente più a sinistra */
    right: auto !important;
    bottom: -10vh !important;
    width: clamp(140px, var(--w, 100vw), 80vw) !important;
    transform: translateY(var(--py,0)) scale(var(--scale,1)) !important;
  }

  /* (facoltativo, solo per coerenza esplicita) */
  #plant-base-right{
    right: -6vw !important;
    left: auto !important;
    bottom: -12vh !important;
    width: clamp(140px, var(--w, 100vw), 80vw) !important;
    transform: translateY(var(--py,0)) scale(var(--scale,1)) !important;
  }
}


/* ===================== BACKGROUND + SECTIONS ===================== */
.grid-background{
  background-image: linear-gradient(to right,#444 1px,transparent 1px), linear-gradient(to bottom,#444 1px,transparent 1px);
  background-size:40px 40px;
  display:flex; flex-direction:column; align-items:center;
  padding-bottom:14rem;
}

/* wrapper sezioni */
.section-wrapper{
  width:100%; max-width:100%;
  padding:6rem 2rem;                     /* default per tutte le sezioni */
  display:flex; flex-direction:column; align-items:center;
}

/* CURRICULUM + SKILLS: meno spazio sopra, più aria sotto */
#formazioni.section-wrapper,
#skills.section-wrapper{
  padding-top: clamp(1rem, 3vw, 2rem);   /* ↓ compatta sopra */
  padding-bottom: clamp(5rem, 8vw, 9rem);/* ↑ spazio sotto */
}

.section-content{
  background:#222; border:3px solid #fff; padding:2rem; width:100%; max-width:800px;
  font-size:.70rem; line-height:2; font-family:"Public Pixel",monospace; margin-bottom:3rem; font-weight:100;
}
.bio-container{ display:flex; align-items:flex-start; gap:2rem; flex-wrap:wrap; justify-content:center; margin-bottom:50px; max-width:1000px; }

/* headings on the left (desktop) */
#about .section-heading,
#formazioni .section-heading,
#skills .section-heading,
#works .section-heading{ width:100%; }

@media (min-width: 901px){
  #about .section-heading,
  #formazioni .section-heading,
  #skills .section-heading,
  #works .section-heading{ align-self: stretch; }
  #about .section-heading h2,
  #formazioni .section-heading h2,
  #skills .section-heading h2,
  #works .section-heading h2{
    text-align:left;
    margin-left: calc(40vw - min(550px, 50vw));
    margin-right:0;
  }
}
@media (max-width: 900px){
  #about .section-heading h2,
  #formazioni .section-heading h2,
  #skills .section-heading h2,
  #works .section-heading h2{ text-align:center; margin-left:0; margin-right:0; }
}

/* uniform section titles */
#about-title,
#formazioni-title,
#skills-title,
#works-title{
  font-family: "Public Pixel", monospace;
  font-size: clamp(20px, 9.5vw, 56px);
  line-height: .9; letter-spacing: .04em;
  --px: clamp(1px, 0.6vw, 3px);
  text-shadow:
    calc(-1 * var(--px)) calc( 1 * var(--px)) 0 #000,
    calc(-2 * var(--px)) calc( 2 * var(--px)) 0 #000,
    calc(-3 * var(--px)) calc( 3 * var(--px)) 0 #000,
    calc(-4 * var(--px)) calc( 4 * var(--px)) 0 #000,
    calc(-5 * var(--px)) calc( 5 * var(--px)) 0 #000,
    calc(-6 * var(--px)) calc( 6 * var(--px)) 0 #000;
  white-space: nowrap;
  margin: 8rem 0; /* default */
}

/* CURRICULUM + SKILLS: meno sopra, aria sotto */
#formazioni-title,
#skills-title{
  margin-top: clamp(1rem, 3vw, 2rem);          /* ↓ compatta sopra */
  margin-bottom: clamp(3.5rem, 6vw, 6.5rem);   /* ↑ aria sotto */
}

@media (max-width: 480px){
  #about-title, #formazioni-title, #skills-title, #works-title{ font-size: clamp(16px, 7vw, 40px); }
}
@media (max-width: 360px){
  #about-title, #formazioni-title, #skills-title, #works-title{ font-size: clamp(14px, 6.2vw, 34px); white-space: normal; }
}
/* ===================== CV ACCORDION ===================== */
.window-header{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem }
.window-header h3{ font-size:1rem; margin:0 }
.category-icon{ height:2em; width:auto }

/* ↑ PIÙ SPAZIO TRA LE CARD */
.formazioni-groups{
  display:flex;
  flex-direction:column;
  gap: clamp(3.6rem, 7.5vw, 5.6rem);
  width:100%;
  max-width:800px;
}

.formazione-card{
  position:relative; border:2px solid #fff; background:#222; padding:2rem;
  font-family:"Public Pixel",monospace; font-size:0.6rem; line-height:1.6; box-shadow:inset 0 0 0 3px #000;
}

/* ↓ ANNO PIÙ PICCOLO e LEGGERMENTE PIÙ IN BASSO (desktop) */
.anno-tag{
  position:absolute; left:-6rem; top:56%; transform:translateY(-50%);
  background:#db2fc3; color:#fff;
  padding:.22rem .6rem;
  font-size:1.2rem;           /* ridotto */
  border:2px solid #fff; white-space:nowrap;
}

.contenuto-formazione{ display:flex; flex-direction:column; gap:.75rem }
.accordion-item{ border:2px solid #fff; background:#111 }

.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.25rem 1rem 1.5rem; background:transparent; border:0; color:#fff; text-align:left; cursor:pointer;
}
.accordion-trigger .title{ font-size:1rem; line-height:1.2; font-family:"Public Pixel",monospace }
.accordion-trigger:focus-visible{ outline:2px dashed #FFCB46; outline-offset:4px }
.chevron{ display:inline-block; transition:transform .2s; font-size:1.2rem }

.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .26s ease; padding:0 1.5rem; background:#1a1a1a; position:relative; }
.accordion-trigger[aria-expanded="true"] + .accordion-panel{ padding-top:.5rem; padding-bottom:1rem; overflow:visible }
.accordion-trigger[aria-expanded="true"] .chevron{ transform:rotate(180deg) }

/* panel content */
.game-window{ background:transparent; padding:0; color:#fff; }
.game-window .window-content{ background:#000; border:2px solid #fff; box-shadow:inset 0 0 0 3px #000; padding:1rem; }
.game-window .description, .game-window .description p, .game-window .description li{ line-height:inherit; }

.window-content{ display:grid; grid-template-columns:minmax(280px,1fr) minmax(220px,1fr); align-items:center; justify-items:center; gap:1.5rem; }
.window-content .description{ text-align:center; max-width:500px; }
.window-content .images-row{ width:100%; display:flex; justify-content:center; align-items:center; }
.window-content img{ max-width:100%; height:auto; width:clamp(160px,26vw,240px); display:block; margin:0 auto; }
.window-content .desc-sub{ grid-column:1/-1; justify-self:center; margin-top:.4rem; font-family:"Public Pixel",monospace; line-height:inherit; }

.images-row{ display:grid; gap:12px }
.project-media{ margin:0; display:grid; gap:10px; justify-items:center; text-align:center }
.project-media img{ width:100%; height:auto; display:block }
.pixel-btn{ display:inline-flex; align-items:center; gap:.5rem; margin:0 auto }

@media (max-width:900px){
  .accordion-panel .window-content, .window-content{ grid-template-columns:1fr; gap:1rem; }
  .accordion-panel .images-row,.images-row{ justify-content:center }
  .window-content img{ width:clamp(140px,48vw,220px) }
}

/* testi dentro al CV */
.formazioni-groups .accordion-panel .description p,
.formazioni-groups .accordion-panel p.desc-sub,
.formazioni-groups .accordion-panel .window-content p{ font-family:"Public Pixel",monospace; color:#ddd; }

/* micro-tuning CV */
#formazioni .accordion-panel .window-header h3{ font-size:.85rem; line-height:1; }
#formazioni .window-content h3{ font-size: clamp(1rem, 2.1vw, 1.25rem); line-height:1; margin-bottom:1rem; }
#formazioni .window-content .desc-sub{ color:#bdbdbd; margin-top:.9rem; }
#formazioni .accordion-panel .description p,
#formazioni .accordion-panel .window-content p{ color:#ddd; }

/* responsive extras CV */
/* Badge anno più basso anche su tablet/mobile */
@media (max-width:1100px){
  .formazione-card{ overflow:visible }
  .formazione-card .anno-tag{
    top:-10px; left:-18px; transform:none; z-index:2; /* ↓ scende rispetto a -18px */
    font-size: clamp(1rem, 4.6vw, 1.15rem);
    padding:.18rem .5rem;
  }
}
@media (max-width:600px){
  .formazione-card .anno-tag{
    top:-22px; left:-10px;            /* ↓ scende rispetto a -40px */
    font-size: clamp(.9rem, 5vw, 1.05rem);
    padding:.16rem .45rem;
  }
}

/* ↑ PIÙ SPAZIO TRA LE CARD – coerente con il valore sopra */
.formazioni-groups{ gap: clamp(3.6rem, 7.5vw, 5.6rem); }
/* ===================== /CV ACCORDION ===================== */

/* =================== fine CV ACCORDION =================== */

/* ===================== SKILLS ===================== */
.skills-grid{ width:100%; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
@media (max-width:1000px){ .skills-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){  .skills-grid{ grid-template-columns:1fr } }

.skill-card{ background:#111; border:2px solid #fff; box-shadow:inset 0 0 0 3px #000, 6px 6px 0 #000; padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.skill-card .window-header{ display:flex; align-items:center; gap:.5rem; margin-bottom:.3rem }
.skill-card .window-header h3{ font-size:1.3rem; margin:0 }
.skill-card .window-content{ background:#000; border:2px solid #fff; box-shadow:inset 0 0 0 3px #000; padding:1rem; display:grid; grid-template-columns:1fr; gap:.8rem; }
.skill-card .description{ font-family:"Public Pixel",monospace; color:#ddd; font-size:.70rem; text-align:center; line-height:1.6; }

/* brand hover */
#skills .skill-card .window-header h3,
#skills .skill-card .window-content,
#skills .skill-card .description{ transition: color .25s ease, background .25s ease; }

/* bordo/ombra al passaggio */
#skills .skill-card:is(:hover, :focus-within){
  border-color:var(--brand,#888);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand,#888) 35%, transparent);
}
#skills .skill-card:is(:hover, :focus-within) .window-content{ border-color:var(--brand,#888); }

/* TESTO: estendi il colore anche ai figli della descrizione */
#skills .skill-card:is(:hover, :focus-within)
  :where(.window-header h3, .description, .description :is(p, li, a, strong, em)){
  color: var(--brand, #888);
}

/* ===== CANVA ===== */
/* Imposta il brand per bordi/ombre (altrimenti resta grigio) */
#skills .skill-card[data-brand="canva"]{
  /* fallback solido */
  --brand:#00C4CC;
  /* mix tra i due colori del gradiente, dove supportato */
  --brand: color-mix(in oklab, #7B2FFF 45%, #00C4CC 55%);
}

/* Gradiente su TUTTO il testo (titolo + descrizione + paragrafi) */
#skills .skill-card[data-brand="canva"]:is(:hover, :focus-within)
  :where(.window-header h3, .description, .description :is(p, li, a, strong, em)){
  background: linear-gradient(90deg, #7B2FFF 0%, #00C4CC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (prefers-reduced-motion:no-preference){
  #skills .skill-card[data-brand="canva"]:is(:hover, :focus-within)
    :where(.window-header h3, .description, .description :is(p, li, a, strong, em)){
    background-size:200% 100%;
    animation:canva-sheen 2.5s ease infinite;
  }
  @keyframes canva-sheen{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
  }
}

/* link a tutta card */
#skills .skill-card .skill-link{ display:block; color:inherit; text-decoration:none; }
#skills .skill-card .skill-link:focus-visible{ outline:3px dashed var(--brand,#888); outline-offset:6px; }
#skills .skill-card .skill-link:focus:not(:focus-visible){ outline:none; }
#skills .skill-icon{ width:32px; height:32px; flex:0 0 auto; image-rendering:pixelated; transition:transform .15s ease, outline-color .25s ease, box-shadow .25s ease; }
#skills .skill-card .skill-link:is(:hover, :focus-visible) .skill-icon{
  transform:scale(1.05);
  outline:2px solid var(--brand,#888);
  outline-offset:3px; border-radius:8px;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--brand,#888) 35%, transparent);
}
@media (max-width:600px){ #skills .skill-icon{ width:26px; height:26px; } }


/* ===== CANVA sheen ===== */
/* Titolo + descrizione + paragrafi devono usare il gradiente, non il semplice color */
#skills .skill-card[data-brand="canva"]:is(:hover, :focus-within)
  :where(.window-header h3, .description, .description :is(p, li, a, strong, em)){
  background: linear-gradient(90deg, #7B2FFF 0%, #00C4CC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  /* necessario perché altrove viene messo un color “brand” */
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (prefers-reduced-motion:no-preference){
  #skills .skill-card[data-brand="canva"]:is(:hover, :focus-within)
    :where(.window-header h3, .description, .description :is(p, li, a, strong, em)){
    background-size:200% 100%;
    animation:canva-sheen 2.5s ease infinite;
  }
  @keyframes canva-sheen{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
  }
}

/* link a tutta card */
#skills .skill-card .skill-link{ display:block; color:inherit; text-decoration:none; }
#skills .skill-card .skill-link:focus-visible{ outline:3px dashed var(--brand,#888); outline-offset:6px; }
#skills .skill-card .skill-link:focus:not(:focus-visible){ outline:none; }
#skills .skill-icon{ width:32px; height:32px; flex:0 0 auto; image-rendering:pixelated; transition:transform .15s ease, outline-color .25s ease, box-shadow .25s ease; }
#skills .skill-card .skill-link:is(:hover, :focus-visible) .skill-icon{
  transform:scale(1.05);
  outline:2px solid var(--brand,#888);
  outline-offset:3px; border-radius:8px;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--brand,#888) 35%, transparent);
}
@media (max-width:600px){ #skills .skill-icon{ width:26px; height:26px; } }


/* ===================== SLANTED SEPARATORS ===================== */
.work-separator{ position:relative; height:160px; background:transparent; overflow:visible; isolation:isolate; margin-top:-90px; margin-bottom:100px; z-index:999; pointer-events:none; }
.work-separator::before{ content:""; position:absolute; left:50%; top:50%; width:160vw; height:220px; background:#FFCB46; transform:translate(-50%,-50%) rotate(-7deg); z-index:0; }
.work-ticker{ position:absolute; left:50%; top:50%; width:220vw; transform:translate(-50%,-50%) rotate(-7deg); z-index:1 }
.work-track{ display:inline-flex; align-items:center; animation:work-scroll 30s linear infinite; will-change:transform }
.work-chunk{ flex:0 0 auto; padding-right:3rem; white-space:nowrap; font-family:"Public Pixel",monospace; font-size:clamp(1.2rem,2.6vw,2rem); letter-spacing:.08rem; color:#000; text-transform:uppercase; }
@keyframes work-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (max-width:900px){ .work-separator{ height:110px; margin-top:-70px; margin-bottom:-70px } .work-separator::before{ height:150px } .work-chunk{ padding-right:2rem; font-size:clamp(1rem,3.6vw,1.6rem) } }
@media (max-width:600px){ .work-separator{ height:80px; margin-top:-48px; margin-bottom:-48px } .work-separator::before{ height:110px } .work-ticker{ width:230vw } .work-chunk{ padding-right:1.2rem; font-size:clamp(.9rem,4.2vw,1.3rem) } }

.full-bleed, .work-separator, .projects-section, .showreel-section{ max-width:100vw; }

/* ===================== CTA PORTFOLIO ===================== */
.projects-section{ padding:0 1.5rem }
.portfolio-cta{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center;
  max-width:1200px;
  margin:300px auto;                      /* desktop invariato */
  padding:4rem 1.5rem 6rem;
}
.art-left{ margin:0; padding:0; box-shadow:inset 0 0 0 3px #000 }
.art-left img{ display:block; width:100%; height:auto }
.cta-right{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:1rem }
.cta-title{ font-size:clamp(1.2rem,3.6vw,2rem); letter-spacing:.06rem }
/* Paragrafi CTA ereditano le dimensioni globali */
.cta-sub{ font-family:"Public Pixel",monospace; color:#ddd; }

.pixel-btn{
  --btn-bg:#09D8EE; --btn-fg:#000;
  margin-top:.5rem; display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--btn-fg); background:var(--btn-bg);
  border:2px solid #fff; box-shadow:inset 0 0 0 3px #000, 6px 6px 0 #000;
  padding:.9rem 1.3rem; font-size:1rem; text-transform:uppercase;
  transition:transform .1s, box-shadow .1s, background .15s, color .15s, border-color .15s;
}
.pixel-btn .btn-icon{ width:22px; height:22px }
.pixel-btn:hover,.pixel-btn:focus-visible{ background:var(--fm-pink); color:#000; border-color:#fff; transform:translate(-2px,-2px); box-shadow:inset 0 0 0 3px #000, 10px 10px 0 #000 }
.pixel-btn:active{ transform:translate(0,0); box-shadow:inset 0 0 0 3px #000, 6px 6px 0 #000 }

/* tablet */
@media (max-width:900px){
  .portfolio-cta{ grid-template-columns:1fr; gap:1.5rem; padding:3rem 1rem 4rem }
  .cta-right{ align-items:center; text-align:center }
  .cta-sub{ max-width:none }
}

/* telefono: compattiamo lo spazio prima/dopo */
@media (max-width:640px){
  .portfolio-cta{
    margin: clamp(40px, 10vw, 80px) auto;   /* ↓ da 300px */
    padding: 2rem 1rem 3rem;                /* ↓ */
    gap: 1rem;                              /* leggermente più compatta */
  }
}



/* ===================== /CTA PORTFOLIO ===================== */
/* ===================== SHOWREEL ===================== */
.showreel-section{
  background:#000;
  padding:0 1.5rem 6rem;
  margin-bottom:20rem;                      /* desktop invariato */
}
.video-card{ position:relative; max-width:1200px; margin:0 auto; box-shadow:inset 0 0 0 3px #000 }
#clip-ae .video-embed, #showreel .video-embed{
  position:static; display:block; width:min(100%,900px); aspect-ratio:16/9;
  background:#000; border:2px solid #fff; box-shadow:inset 0 0 0 3px #000, 6px 6px 0 #000; margin:0 auto;
}
@media (max-width:900px){
  #clip-ae .video-embed, #showreel .video-embed{ width:88%; box-shadow:inset 0 0 0 3px #000, 4px 4px 0 #000 }
}
.showreel-caption{
  width:min(900px,90vw);
  margin:.8rem auto 2.4rem;
  text-align:center; font-family:monospace; font-size:1rem; line-height:1.6; color:#ddd;
}
.showreel-caption + .work-separator{ margin-top:200px }
@media (max-width:900px){ .showreel-caption + .work-separator{ margin-top:36px } }

/* telefono: stringiamo lo spazio tra Clip AE e Showreel */
@media (max-width:640px){
  .showreel-section{
    padding: 0 1rem 3.5rem;  /* ↓ padding inferiore */
    margin-bottom: 6rem;     /* ↓ da 20rem */
  }
  .showreel-caption{ margin:.6rem auto 1.4rem; } /* testo più vicino al video */
}



/* ===================== /SHOWREEL ===================== */

/* ===================== WORKS (filters + grid) ===================== */
.works-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 2rem; justify-content:center; }
.filter-btn{
  background:transparent; color:#fff; border:2px solid #fff; box-shadow:inset 0 0 0 3px #000, 4px 4px 0 #000;
  font-size:.9rem; padding:.6rem .9rem; cursor:pointer; text-transform:lowercase; transition:transform .08s, box-shadow .08s, background .12s, color .12s; font-family:"Public Pixel";
}
.filter-btn:hover{ transform:translate(-2px,-2px); box-shadow:inset 0 0 0 3px #000, 8px 8px 0 #000; background:#09D8EE; color:#000; }
.filter-btn.is-active,.filter-btn[aria-selected="true"]{ background:var(--fm-pink); color:#000 }
.filter-btn.is-active:hover,.filter-btn[aria-selected="true"]:hover{ background:#09D8EE; color:#000 }
.filter-btn:focus-visible{ outline:3px dashed #FFCB46; outline-offset:4px }

.works-grid{ width:100%; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; }
@media (max-width:1000px){ .works-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .works-grid{ grid-template-columns:1fr } }

.project-card{ position:relative; background:#111; border:2px solid #fff; box-shadow:inset 0 0 0 3px #000, 6px 6px 0 #000; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s; }
@media (hover:hover){ .project-card:hover{ transform:translateY(-6px) scale(1.02); z-index:10; box-shadow:0 10px 30px rgba(0,0,0,.35) } }
.project-card .media{ aspect-ratio:16/10; background:#000; overflow:hidden; position:relative }
.project-card .media img,.project-card .media video{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .35s; }
.project-card .media video{ filter:contrast(1.05) saturate(1.1) }
/* overlay hover già esistente */
.project-card .media::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .25s; z-index:2 }
@media (hover:hover){ .project-card:hover .media::after{ background:rgba(0,0,0,.35) } .project-card:hover .media img,.project-card:hover .media video{ transform:scale(1.05) } }
.project-card .hover-info{ position:absolute; left:0; right:0; bottom:0; padding:.75rem 1rem; color:#fff; font-family:"Public Pixel", monospace; font-size:.95rem; line-height:1.4; opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s; z-index:3; pointer-events:none; }
@media (hover:hover){ .project-card:hover .hover-info{ opacity:1; transform:translateY(0) } }
.project-card .meta{ padding:.9rem 1rem 1.1rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; position:relative; z-index:2; overflow:visible }
.project-card .title{ font-size:1.05rem; margin-right:auto }
.badge{ font-family:"Public Pixel", monospace; font-size:.70rem; color:#000; background:#09D8EE; border:2px solid #fff; padding:.15rem .45rem; box-shadow:inset 0 0 0 2px #000 }
.badge-wip{ background:#FFCB46 }
.project-card .ribbon{ position:absolute; top:10px; left:-40px; background:#FFCB46; color:#000; font-size:.8rem; padding:.35rem 2.2rem; transform:rotate(-20deg); border:2px solid #000; box-shadow:0 0 0 2px #fff, 6px 6px 0 #000; z-index:6; }

/* cards linked */
.project-card.is-link .card-link{ display:block; color:inherit; text-decoration:none; outline:none }
.project-card.is-link .link-title{ color:#09D8EE; transition:color .25s }
.project-card.is-link:hover .link-title,
.project-card.is-link .card-link:focus-visible .link-title{ color:var(--fm-pink) }
.project-card.is-link .card-link:focus-visible{ outline:3px dashed #FFCB46; outline-offset:6px }
.project-card.is-link .ext-pill{ position:absolute; right:10px; top:10px; z-index:4; font-weight:bold; font-size:1rem; background:#fff; color:#000; border:2px solid #000; box-shadow:0 0 0 2px #fff, 4px 4px 0 #000; padding:.15rem .4rem; opacity:.9; transition:transform .15s, opacity .15s; }
.project-card.is-link:hover .ext-pill{ transform:translateY(-2px); opacity:1 }

/* === WIP ribbon obliqua "IN PROGRESS" — versione compatta/alta-sinistra === */
/* La card deve avere .has-wip-ribbon e la .media il data-wip-label */
.project-card.has-wip-ribbon .badge-wip{ display:none !important; }

/* Variabili per ritocchi rapidi (desktop) */
.project-card.has-wip-ribbon{
  --wip-top:18%;                    /* più in alto */
  --wip-left:32%;                   /* spostata verso sinistra */
  --wip-rot:-18deg;                 /* leggera rotazione */
  --wip-h:28px;                     /* ALTEZZA banda più piccola */
  --wip-w:170%;                     /* LARGHEZZA banda ridotta */
  --wip-pad:clamp(12px,4vw,24px);   /* padding interno */
  --wip-fs: clamp(.90rem, 2.4vw, 1rem); /* testo più piccolo */
}

/* Nastro + testo (usiamo ::before; ::after resta l’overlay hover) */
.project-card.has-wip-ribbon .media::before{
  content: attr(data-wip-label);
  position:absolute;
  left:var(--wip-left);
  top:var(--wip-top);
  transform: translate(-50%, -50%) rotate(var(--wip-rot));
  width:var(--wip-w);
  height:var(--wip-h);
  background:#FFCB46;

  /* cornice “pixel” coerente con il tema */
  box-shadow:
    inset 0 0 0 3px #000,   /* bordo interno nero a pixel */
    0 0 0 2px #fff,         /* filetto bianco esterno */
    6px 6px 0 #000;         /* ombra “pixel” */

  display:flex; align-items:center; justify-content:center;
  padding:0 var(--wip-pad);
  font-family:"Public Pixel", monospace;
  font-size:var(--wip-fs);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#000;
  white-space:nowrap;
  z-index:5;                /* sopra l’overlay (z-index:2) */
  pointer-events:none;

  /* contorno del testo a pixel per massima leggibilità */
  text-shadow:
    -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000,
    -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000;
}

/* TABLET ≤1000px — leggermente più lunga e più centrata */
@media (max-width:1000px){
  .project-card.has-wip-ribbon{
    --wip-top:20%;
    --wip-left:34%;
    --wip-rot:-17deg;
    --wip-h:26px;
    --wip-w:190%;
    --wip-pad:clamp(12px,5vw,26px);
    --wip-fs: clamp(.88rem, 2.8vw, .98rem);
  }
}

/* MOBILE ≤640px — ancora un po’ più lunga e più bassa */
@media (max-width:640px){
  .project-card.has-wip-ribbon{
    --wip-top:22%;
    --wip-left:36%;
    --wip-rot:-16deg;
    --wip-h:24px;
    --wip-w:210%;
    --wip-pad:clamp(10px,5.5vw,24px);
    --wip-fs: clamp(.84rem, 3.6vw, .94rem);
  }
}


/* ===================== FOOTER ===================== */
.full-bleed{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw }
.footer{ padding-block:36px; border-top:1px solid #222; background:#000; color:#eaeaea }
.footer-credit{ margin-top:1.5rem; text-align:center }
.logo-gradient{ font-family:"Public Pixel",monospace; text-transform:uppercase; letter-spacing:.06em; font-size:1rem; background:linear-gradient(90deg,#ff2f92 0%,#7a3df0 50%,#09d8ee 100%); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; background-size:200% 100%; transition:background-position .4s; }
.logo-gradient:hover{ background-position:100% 0 }

/* ===================== AI BADGE ===================== */
.ai-flag{ position:absolute; right:36px; bottom:12px; display:block; z-index:9990; }
.ai-flag img{ display:block; width:clamp(24px, 4vw, 36px); height:auto; }
.ai-flag__label{ position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); white-space:nowrap; padding:.28rem .55rem; border:2px solid #fff; background:#000; color:#fff; box-shadow:inset 0 0 0 3px #000, 4px 4px 0 #000; font-family:monospace; font-size:.85rem; z-index:10000; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease; }
.ai-flag:hover .ai-flag__label, .ai-flag:focus-within .ai-flag__label{ opacity:1; visibility:visible; }
.project-card .meta{ position:relative; overflow:visible; }
.ai-flag.ai-flag--meta{ right:10px; bottom:10px; }

/* === FIX consolidato per overflow nei pannelli/accordion (mobile) === */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* wrapping solo nell’area CV */
#formazioni :is(h1,h2,h3,h4,h5,h6,p){ overflow-wrap:anywhere; word-break:normal; }
/* media sempre contenuti */
:where(img,video,iframe){ max-width:100%; height:auto; display:block; }

/* trigger */
.accordion-trigger{ min-width:0; }
.accordion-trigger .title{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.accordion-trigger .chevron{ flex:0 0 auto; }

/* header del pannello */
.window-header{ min-width:0; }
.window-header h3,.desc-h3{
  max-inline-size:100%;
  min-width:0;
  overflow-wrap:anywhere;
  line-height:1.15;
}

/* griglia contenuto pannello */
.window-content{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:900px){ .window-content{ grid-template-columns:1fr; } }

/* immagini */
.window-content img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain;
}
.window-content .images-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px;
}
.window-content .images-row img{
  flex:1 1 clamp(120px,40%,200px);
  max-height:clamp(140px,40vh,320px);
}

/* evita scorrimento orizzontale residuo nel panel */
.accordion-panel{ overflow-x:clip; }

/* fallback anti-scroll orizzontale su vecchi Safari/Android */
html,body{ overflow-x:hidden; }
/* --- ACCORDION click & layout hardening --- */

/* Evita che qualcosa copra il bottone */
.formazione-card { position: relative; }
.anno-tag { pointer-events: none !important; z-index: 1 !important; }

/* Il trigger deve stare sopra */
.accordion-item,
.accordion-trigger {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0;
}

/* Migliora il tap su mobile */
.accordion-trigger {
  -webkit-tap-highlight-color: rgba(255,255,255,.2);
  touch-action: manipulation;
}

/* Titoli molto lunghi: spezza ovunque e non far crescere oltre il box */
.accordion-trigger .title,
.window-header h3,
.desc-h3 {
  overflow-wrap: anywhere;
  word-break: normal;
  max-inline-size: 100%;
}

/* Evita che il chevron salti di riga */
.accordion-trigger .chevron {
  flex: 0 0 auto;
}

/* Pannello: nessun overflow orizzontale, transizione fluida con max-height */
.accordion-panel {
  overflow: hidden !important;
  will-change: max-height;
}

/* Griglia interna: non far “spingere” le colonne */
.window-content {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}
@media (max-width: 900px) {
  .window-content { grid-template-columns: 1fr; }
}

/* Media dentro i pannelli sempre contenuti */
.window-content .images-row { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.window-content img,
.window-content video,
.window-content iframe {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

/* Spazio “di sicurezza” per dispositivi problematici */
@media (max-width: 420px) {
  .accordion-trigger { padding-right: 1.25rem !important; padding-left: 1rem !important; }
  .accordion-trigger .title { font-size: 0.95rem !important; }
  #formazioni .accordion-panel .window-header h3 { font-size: 0.82rem !important; }
}
/* ===== BIO – layout a riquadri alternati (versione semplice/robusta) ===== */
.bio-rows{
  width: min(1100px, 92vw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vw, 34px);
}

/* Riga con due colonne: testo + media */
.bio-row{
  --pad: clamp(14px, 2.8vw, 22px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(14px, 2.4vw, 22px);
  align-items: center;
}
.bio-row--flip{ grid-template-columns: 0.9fr 1.1fr; }
.bio-row--flip .bio-text{ order: 2; } /* testo a destra */
.bio-row--flip .bio-media{ order: 1; }

/* Card testo – quadrato nero semplice, niente color-mix */
.bio-text{
  background: #0b0b0b;                 /* solido, sempre supportato */
  border: 2px solid #fff;
  box-shadow: inset 0 0 0 3px #000, 6px 6px 0 #000;
  padding: var(--pad);
  font-family: monospace;               /* più leggibile del pixel font sui paragrafi lunghi */
  font-size: clamp(.82rem, 1.9vw, 1rem);
  line-height: 1.75;
  color: #eaeaea;
  /* limite tipografico per evitare pagine “piene di testo” su desktop */
  max-width: 65ch;
}
.bio-text p + p{ margin-top:.75em; }

/* Colonne */
.bio-col{ min-width: 0; }
.bio-media{
  position: relative;
  display: grid;
  gap: 10px;
  max-width: 100%;
}

/* Immagini: dimensioni “safe” e coerenti, senza trasformazioni */
/* Immagini: NESSUN bordo bianco, mantieni solo l'ombra pixel nera */
.bio-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border:0;                      /* ← rimosso il bordo bianco */
    /* ← ombra “pixel” nera */
}

/* Immagine che “sbuca” a destra: senza bordo, con cap di larghezza */
.media-pop-right{ overflow: visible; }
.media-pop-right img{
  width: min(420px, 45vw);
  height:auto;
  border:0;                      /* ← niente bordo */
      /* ← solo ombra */
  transform:none;
}


/* Griglie media opzionali (semplici) */
.media-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.media-grid.grid-3{ grid-template-columns: repeat(3, 1fr); }
.media-grid.grid-4{ grid-template-columns: repeat(2, 1fr); }

/* “Stack” di due foto (solo offset minimo tramite margini) */
.media-stack-2{ display: grid; gap: 10px; }
.media-stack-2 .ph-1,
.media-stack-2 .ph-2{
  width: min(360px, 46vw);
  justify-self: start;
}
.media-stack-2 .ph-2{ margin-left: 10px; margin-top: 12px; }

/* Responsivo */
@media (max-width: 900px){
  .bio-row,
  .bio-row--flip{ grid-template-columns: 1fr; }
  .bio-text{ max-width: none; }                     /* su mobile lascia respirare */
  .media-pop-right img{ width: min(88vw, 520px); }
  .media-grid.grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .media-grid{ grid-template-columns: 1fr; }
}

/* Tooltip e interazioni (semplici, coerenti con il tuo JS) */
.bio-tooltip{
  /* prima era fixed: così non “segue” più la viewport quando scrolli */
  position: absolute;
  left: -9999px;
  top: -9999px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  box-shadow: 0 0 0 2px #fff, 4px 4px 0 #000;
  padding: .28rem .55rem;
  font-family: monospace;
  font-size: .85rem;
  pointer-events: none;
  z-index: 10000;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s linear;
}
.bio-tooltip.is-visible{ opacity: 1; }

.tooltip-zone{
  position: relative;
  display: inline-block;
  touch-action: manipulation;
}

/* Clickabile per il toggle immagine */
.bio-media img.bio-toggle{
  cursor: pointer;
  pointer-events: auto;
}

/* Mobile/Tablet: quando la card ha .tapped, mostra overlay come su hover */
@media (hover: none) {
  .project-card.tapped .media::after{ background: rgba(0,0,0,.35); }
  .project-card.tapped .hover-info{ opacity: 1; transform: translateY(0); }
}
/* --- Fix generali per evitare lo "sbordo" a dx su mobile --- */
.bio-rows{
  padding-inline: clamp(10px, 4vw, 16px);   /* respiro ai lati */
  max-width: 100%;                           /* mai oltre viewport */
}

/* Le immagini non devono mai superare il contenitore */
.bio-media{
  justify-items: center;                     /* centra le media */
}
.bio-media img{
  max-width: 100%;
  height: auto;
}

/* L'immagine "che sbuca" a destra: su desktop ok, su mobile no */
.media-pop-right img{
  width: min(420px, 45vw);
}
@media (max-width: 900px){
  .media-pop-right{ overflow: hidden; }      /* niente overflow su mobile */
  .media-pop-right img{
    width: 100%;                             /* mostra tutta manoit.png */
  }
}

/* --- Stack 1 colonna e ordine corretto su mobile --- */
@media (max-width: 900px){
  .bio-row,
  .bio-row--flip{
    grid-template-columns: 1fr;              /* una colonna */
  }

  /* su mobile: SEMPRE testo prima, immagine dopo */
  .bio-row .bio-text,
  .bio-row--flip .bio-text{ order: 1; }
  .bio-row .bio-media,
  .bio-row--flip .bio-media{ order: 2; }

  /* il "quadrato" testuale si ridimensiona bene */
  .bio-text{
    max-width: none;
    font-size: clamp(.9rem, 3.8vw, 1rem);
    line-height: 1.7;
    box-shadow: inset 0 0 0 2px #000, 4px 4px 0 #000; /* ombra un filo più piccola */
  }
}

/* Ottimizzazione extra per telefoni stretti */
@media (max-width: 560px){
  .bio-text{
    padding: clamp(12px, 4.5vw, 18px);
  }
}
/* footer delle card “elastico” e coerente */
.project-card .meta{
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* allinea titolo + tag a sinistra */
  position: relative;
  padding-right: 56px;        /* spazio per l'icona AI */
  min-height: 96px;           /* regola a gusto (88–112px) */
}

.project-card .title{
  margin: 0 0 .25rem 0;
}

/* i badge vivono in un contenitore semantico */
.meta-tags{
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: auto;           /* spinge i tag in basso */
  align-self: flex-start;     /* resta ancorato a sinistra */
  justify-content: flex-start;
}

/* assicura l'icona AI in basso a destra */
.ai-flag.ai-flag--meta{
  position: absolute;
  right: 10px;
  bottom: 10px;
}
/* Il box del pannello fa da riferimento e lascia spazio al badge AI */
.window-content{
  position: relative;
  padding-bottom: 46px; /* evita che il testo "invada" l'icona in basso */
}

/* Icona AI nel CV: stessa posizione delle card */
.ai-flag.ai-flag--cv{
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
}

/* IMPORTANTISSIMO: annulla le regole globali su .window-content img */
.ai-flag.ai-flag--cv img{
  width: clamp(24px, 4vw, 36px) !important;
  height: auto !important;
  max-width: none !important;
  display: block;
}
/* ===================== ABOUT HUD (videogame box) ===================== */
.about-hud{
  /* --- VARIABILI DESKTOP (override su mobile più sotto) --- */
  --col-portrait: clamp(100px, 12vw, 140px); /* larghezza colonna foto */
  --gap: clamp(12px, 2.2vw, 20px);           /* gap griglia */
  --pad: clamp(12px, 2.4vw, 20px);           /* padding box */
  --hud-closed: clamp(46px, 7vw, 65px);      /* lato quadratino chiuso */
  --name-fs: clamp(1.4rem, 4.6vw, 2rem);     /* dimensione nome */
  --text-fs: clamp(1.2rem, 3vw, 1.4rem);     /* testo nel riquadro */
  --ico-w: clamp(26px, 4vw, 32px);           /* larghezza icone riga */

  /* badge sotto la foto (valori base, poi “open” aumenta) */
  --badge-size: clamp(32px, 6.5vw, 64px);
  --badge-gap:  clamp(10px, 1.6vw, 16px);

  /* icona “CLICK!” esterna (desktop) */
  --click-size:  clamp(170px, 25vw, 280px);
  --click-off-x: 60px;   /* quanto esce a sinistra */
  --click-off-y: 70px;   /* quanto esce in alto    */

  /* --- layout/box --- */
  width: fit-content;
  max-width: min(1100px, 92vw);
  margin: 0 auto clamp(24px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: var(--col-portrait) auto;
  grid-template-rows: auto 1fr;
  gap: var(--gap);

  border: 2px solid #fff;
  box-shadow: inset 0 0 0 3px #000, 6px 6px 0 #000;
  background: #000;
  padding: var(--pad);

  position: relative;   /* àncora per “CLICK!” */
  overflow: visible;
}

/* --- “CLICK!” esterno, visibile SOLO a riquadro chiuso --- */
.about-hud::before{
  content:"";
  position:absolute;
  top: 0; left: -12rem;
  width: var(--click-size);
  height: var(--click-size);
  background: url("./image/click.png") center/contain no-repeat;
  image-rendering: pixelated;
  /* posiziono fuori in alto-sx tramite translate con offset */
  transform: translate(calc(-1 * var(--click-off-x)),
                       calc(-1 * var(--click-off-y)));
  opacity: 0;           /* nascosto quando aperto */
  pointer-events: none; /* non intercetta click */
  z-index: 5;
  transition: opacity .18s ease;
}
.about-hud.is-collapsed::before{ opacity: 1; }

/* --- foto/ritratto --- */
.hud-portrait{
  grid-row: 1 / span 2;
  position: relative;           /* ospita il badge */
  margin: 0; padding: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid #fff;
  box-shadow: inset 0 0 0 3px #000;
  background: #000;
  overflow: visible;
  cursor: pointer;
}
.hud-portrait img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* --- badge “i” sotto la foto: appare SOLO quando aperto --- */
.hud-portrait .hud-badge{
  position: absolute;
  left: 50%; bottom: 0;
  width: var(--badge-size);
  height: var(--badge-size);
  transform: translate(-50%, calc(100% + var(--badge-gap))) scale(.9);
  background: url("./image/info.png") center/contain no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .28s ease, width .28s ease, height .28s ease;
}
.about-hud:not(.is-collapsed) .hud-portrait .hud-badge{
  /* stato APERTO: badge più grande/più giù */
  --badge-size: clamp(80px, 11vw, 128px);
  --badge-gap:  clamp(28px, 3.5vw, 40px);
  opacity: 1;
  transform: translate(-50%, calc(100% + var(--badge-gap))) scale(1);
}

/* --- etichetta nome --- */
.hud-name{
  align-self: start;
  justify-self: start;
  border: 2px solid #fff;
  box-shadow: inset 0 0 0 3px #000;
  padding: .55rem .9rem;
  line-height: 1;
  font-family: "Public Pixel", monospace;
  font-size: var(--name-fs);
  letter-spacing: .04em;
  background: #000;
  color: #fff;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* --- riquadro testo (bio/contatti) + animazione collasso --- */
.hud-text{
  grid-column: 2;
  border: 2px solid #fff;
  box-shadow: inset 0 0 0 3px #000;
  padding: clamp(12px, 2.6vw, 20px);
  background: #000;

  max-width: 9999px;
  max-height: 9999px;
  transition: max-width .35s ease, max-height .35s ease, padding .2s ease, opacity .2s ease;
  will-change: max-width, max-height, padding, opacity;

  position: relative; /* serve all’icona “info” nel box chiuso */
}
.hud-text p{
  font-family: monospace !important;
  font-size: var(--text-fs);
  line-height: 1.9;
  color: #eaeaea;
}
.hud-text p + p{ margin-top: 1rem; }

/* icona “info” che riempie il quadratino quando CHIUSO */
.hud-text::before{
  content: "";
  position: absolute; inset: 0;
  background: url("./image/info.png") center/80% no-repeat;
  image-rendering: pixelated;
  opacity: 0; transform: scale(.96);
  transition: opacity .22s ease, transform .28s ease;
  pointer-events: none; z-index: 2;
}
.about-hud.is-collapsed .hud-text{
  max-width: var(--hud-closed);
  max-height: var(--hud-closed);
  padding: 8px;
  overflow: hidden;
  opacity: .95;
  pointer-events: none;
}
.about-hud.is-collapsed .hud-text > *{ opacity: 0; }
.about-hud.is-collapsed .hud-text::before{ opacity: 1; transform: scale(1); }

/* --- righe con icone --- */
.hud-text .hud-item{
  display: flex;
  align-items: center;
  gap: .6rem;
  line-height: 1.7;
  margin: 0;
}
.hud-ico{
  width: var(--ico-w);
  height: auto;
  image-rendering: pixelated;
  flex: 0 0 auto;
  margin-right: clamp(10px, 1.8vw, 16px);
  margin-top: clamp(6px, 1.2vw, 12px);
  margin-bottom: clamp(6px, 1.2vw, 12px);
  /* filter: invert(1) brightness(100%); */
}

/* --- link nel box --- */
.hud-text a{
  color: #eaeaea;
  text-decoration: none;
  word-break: break-word;
}
.hud-text a:hover,
.hud-text a:focus-visible{
  color: var(--fm-pink);
  text-decoration: underline;
}

/* --- focus accessibile --- */
.about-hud :is(.hud-name, .hud-portrait, .hud-text):focus-visible{
  outline: 3px dashed #FFCB46;
  outline-offset: 4px;
}

/* ===================== MOBILE (≤640px) — solo override mirati ===================== */
@media (max-width: 640px){
  /* variabili “one shot”: compatto, titolo e testi più piccoli, click meno invadente */
  .about-hud{
    --col-portrait: clamp(62px, 17vw, 82px);
    --gap: 10px;
    --pad: 12px;
    --hud-closed: clamp(36px, 8.6vw, 46px);

    --name-fs: clamp(.72rem, 3.9vw, .96rem);
    --text-fs: clamp(.84rem, 3.2vw, .98rem);
    --ico-w: clamp(14px, 3.6vw, 18px);

    --click-size: clamp(88px, 26vw, 120px);
    --click-off-x: 6px;
    --click-off-y: 8px;
  }

  .hud-name{
    padding: .32rem .5rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* resta su una riga */
    letter-spacing: .01em;
  }
  .hud-text{ padding: 10px; }
  .hud-text .hud-item{ gap: .48rem; }

  /* email: non andare a capo; se non entra → ellissi */
  .hud-text a[href^="mailto:"]{
    font-size: clamp(.78rem, 3vw, .92rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: inline-block; max-width: 100%;
  }

  /* badge “i” un filo più contenuto quando APERTO */
  .about-hud:not(.is-collapsed) .hud-portrait .hud-badge{
    --badge-size: clamp(30px, 7.6vw, 42px);
    --badge-gap:  clamp(8px, 3.2vw, 14px);
  }
}
/* Desktop: tieni pure il tuo left:-12rem; */

/* Mobile: avvicina di pochi pixel e annulla la translate desktop */
@media (max-width: 640px){
  .about-hud::before{
    width: 26px;
    height: 26px;  
    left: 
        -1rem;   /* leggermente fuori a sinistra */
    top:  -6px;   /* leggermente sopra */
    transform: none; /* niente translate, così non somma gli offset */
  }
}

/* Spazio sotto l'HUD — versione più ampia */
.about-hud{
  margin-bottom: clamp(140px, 12vw, 220px); /* ↑ più distacco su desktop */
}

@media (max-width: 640px){
  .about-hud{
    margin-bottom: clamp(90px, 16vw, 160px); /* ↑ più distacco su mobile */
  }
}