/* YOU — pagina "You Toolkit". Canvas assoluto 1920x3307, coordinate = Figma (frame 93:4260, origine 24556,-101). */
:root{--teal:#008b95;--ink:#1d1d1b;--azzurro:#bbdde6;--white:#fff}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Poppins",sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
.fit{position:relative;width:100%;overflow:hidden;height:calc(2200px * var(--s,1))}
.canvas{position:absolute;top:0;left:50%;transform:translateX(-50%) scale(var(--s,1));transform-origin:top center;width:1920px;height:2200px;overflow:hidden;z-index:1}
.canvas>*{position:absolute}

/* BANDE full-width DIETRO il canvas boxed (Y = coord canvas × --s). Vedi lessons.md. */
.bands{position:absolute;inset:0;width:100%;z-index:0;overflow:hidden;pointer-events:none}
.bands span{position:absolute;left:0;width:100%;display:block}
.bands .b-hero{top:calc(185px*var(--s,1));height:calc(934px*var(--s,1));background:var(--teal);overflow:hidden}
.bands .b-hero::before{content:"";position:absolute;inset:0;background:url("assets/texture-92_4228.png") center top/cover no-repeat;opacity:.4}

/* header .hd* + footer .ft* → chrome.css (condivisi) */

/* HERO teal */
/* HERO: sfondo teal ora in .bands full-width */
.hero-title{left:160px;top:291px;width:896px;color:#fff;font-family:"Madimi One";font-weight:400;font-size:48px;line-height:1.1}
.hero-heart{left:160px;top:413px;width:35px;height:auto;z-index:2}
.hero-body{left:222px;top:419px;width:834px;color:#fff;font-family:"Poppins";font-weight:400;font-size:26px;line-height:38px}
.hero-body p{margin-bottom:36px}
.hero-body p:last-child{margin-bottom:0}
.hero-body b{font-weight:600}
.hero-photo{left:1161px;top:291px;width:757px;height:542px;border-radius:35px;object-fit:cover;z-index:2}

/* FILO */
.wires{position:absolute;left:0;top:0;width:1920px;height:3307px;z-index:1;pointer-events:none}

/* BOTTONI categoria (azzurri, r65) */
.cat{width:704px;background:var(--azzurro);border-radius:65px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;text-align:center;padding:0 30px}
.cat .t{font-family:"Madimi One";font-weight:400;font-size:36px;color:var(--teal);line-height:1.1}
.cat .s{font-family:"Poppins";font-weight:400;font-size:18px;color:var(--teal);margin-top:4px}   /* feedback2: rollback nomi lunghi + sottotitoli; centro colonna fermo su x=928 (dietro il filo) */
.cat1{left:576px;top:1309px;height:112px}
.cat2{left:576px;top:1498px;height:112px}
.cat3{left:576px;top:1687px;height:153px}
.cat4{left:576px;top:1920px;height:112px;background:#fff;border:2px solid var(--azzurro)}   /* "Tutti gli articoli": resta com'è (screenshot-3 "va bene"); fondo bianco copre il filo a x=928 */
.cat4 .t{font-size:24px}
/* ingresso selezionato: stessa inversione dei tag */
.cat.active,.m-cats a.active{background:var(--teal)}
.cat.active .t,.cat.active .s,.m-cats a.active .t,.m-cats a.active .s{color:#fff}
.heart-end{left:910px;top:2166px;width:35px;height:auto;z-index:2}
.fig-desk{left:219px;top:2047px;width:111px;height:auto;z-index:2}
.fig-couple{left:1583px;top:2032px;width:87px;height:auto;z-index:2}

/* ARTICOLI — sezione responsive fuori dal canvas (post reali, filtrabili) */
.articles{background:var(--azzurro);padding:70px 26px 96px}
.art-wrap{max-width:1560px;margin:0 auto}
.art-filters{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:54px}
.art-filters button{font-family:"Poppins",sans-serif;font-weight:500;font-size:16px;text-transform:uppercase;letter-spacing:.4px;color:var(--teal);background:#fff;border:2px solid var(--teal);border-radius:40px;padding:11px 26px;cursor:pointer;transition:background .15s,color .15s}
.art-filters button:hover,.art-filters button.active{background:var(--teal);color:#fff}
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:44px 40px}
.art-card{display:block;text-decoration:none;color:var(--teal)}
/* height:auto è obbligatorio, non cosmetico: WP stampa width/height sull'immagine in evidenza
   (es. 1024×683) e con entrambe le dimensioni già risolte il browser ignora l'aspect-ratio →
   le card diventavano verticali (493×683). Vedi lessons.md. */
.art-card img,.art-card .ph{display:block;width:100%;height:auto;aspect-ratio:491/328;object-fit:cover;border-radius:35px;background:#cfe6ee}
.art-tag{display:inline-block;font-family:"Poppins",sans-serif;font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.4px;margin-top:16px}
.art-card h3{font-family:"Poppins",sans-serif;font-weight:700;font-size:22px;line-height:1.2;margin-top:6px}
.art-card p{font-family:"Poppins",sans-serif;font-weight:400;font-size:18px;line-height:1.3;margin-top:6px}
.art-card:hover h3{text-decoration:underline}
.art-empty{grid-column:1/-1;text-align:center;color:var(--teal);font-family:"Poppins",sans-serif;font-size:18px;padding:24px 0}

/* MOBILE */
.mobile{display:none}
@media(max-width:1023px){ .fit{display:none} .mobile{display:block} }
.m-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
.m-hd img{width:118px;height:auto}
.m-hd details{position:relative}
.m-hd summary{list-style:none;cursor:pointer;font-size:26px;color:var(--teal);line-height:1;padding:4px 8px}
.m-hd summary::-webkit-details-marker{display:none}
.m-hd nav{position:absolute;right:0;top:40px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.14);border-radius:12px;padding:16px 22px;display:flex;flex-direction:column;gap:14px;min-width:190px;z-index:5}
.m-hd nav a{color:var(--teal);text-decoration:none;font-weight:500;font-size:17px}
.m-hd nav a.active{font-weight:700}
.m-hero{background:var(--teal);color:#fff;padding:40px 26px;position:relative;overflow:hidden}
.m-hero::before{content:"";position:absolute;inset:0;background:url("assets/texture-92_4228.png") center/cover no-repeat;opacity:.15}
.m-hero>*{position:relative}
.m-hero h1{font-family:"Madimi One";font-weight:400;font-size:38px;color:#fff}
.m-hero p{font-weight:400;font-size:17px;line-height:1.55;margin-top:18px;color:#fff}
.m-hero p b{font-weight:600}
.m-hero img{display:block;width:min(100%,300px);height:auto;border-radius:18px;margin:26px auto 0}   /* M1: foto mobile più contenuta e centrata */
.m-cats{padding:30px 26px 34px;display:flex;flex-direction:column;gap:16px}   /* feedback3 F5: il padding-bottom era 0 → "Tutti gli articoli" (bordo trasparente) finiva a filo della fascia azzurra e sembrava tagliato */
.m-cats a{display:block;background:var(--azzurro);border-radius:30px;padding:18px 24px;text-decoration:none;text-align:center}
.m-cats .t{display:block;font-family:"Madimi One";color:var(--teal);font-size:22px}
.m-cats .s{display:block;font-family:"Poppins";color:var(--teal);font-size:15px;margin-top:2px}   /* feedback2: sottotitoli anche su mobile */
.m-cats a:last-child{background:transparent;border:2px solid var(--azzurro)}   /* T1: "Tutti gli articoli" secondario anche su mobile */
.m-cats a:last-child .t{font-size:18px}
/* .articles a larghezza stretta (mobile) */
@media(max-width:640px){
  .articles{padding:44px 20px 64px}
  .art-grid{grid-template-columns:1fr;gap:34px}
  .art-filters{gap:12px;margin-bottom:36px}
  .art-filters button{font-size:14px;padding:9px 20px}
  .art-card h3{font-size:20px}
  .art-card p{font-size:16px}
}