/* ======================================================================
     Impostazione visiva
     Un solo raggio di bordo (3px), nessuna ombra, filetti da 1px al posto
     dei riquadri colorati. Stessa disciplina del sito dello Studio, cosi'
     le due pagine sembrano della stessa realta'.
     ====================================================================== */
  :root{
    --forest:#2f5757;
    --forest-deep:#16302f;
    --forest-soft:#457373;
    --ocra:#d9a648;
    --ocra-deep:#ab7c2c;
    --ocra-label:#846121;
    --ocra-light:#e3bd77;
    --cream:#f5f1e8;
    --cream-warm:#ece7db;
    --cream-card:#fdfbf6;
    --ink:#16302f;
    --ink-soft:#3c5754;
    --muted:#5e6b67;
    --line:#dbd3c4;
    --line-dark:rgba(245,241,232,.18);
    --r:3px;
    --bar-h:92px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* L'attributo hidden vale solo come display:none del browser, che ha la
     specificita' piu' bassa: qualunque regola di questo foglio (per esempio
     .foot a{display:inline-block}) lo batteva e l'elemento restava visibile
     e cliccabile. Questa riga lo rende definitivo. */
  [hidden]{display:none!important}
  html{
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--bar-h) + 18px);
  }
  body{
    background:var(--cream);color:var(--ink);
    font-family:'Plus Jakarta Sans',sans-serif;line-height:1.7;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }
  ::selection{background:var(--forest);color:var(--cream)}
  img{max-width:100%}
  :where(a,button,[tabindex]):focus-visible{outline:2px solid var(--ocra-deep);outline-offset:3px}
  .wrap{max-width:1120px;margin:0 auto;padding:0 32px}
  h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;line-height:1.14;letter-spacing:-.01em}

  .skip{
    position:absolute;left:-9999px;top:0;z-index:200;
    background:var(--forest);color:var(--cream);padding:12px 18px;
    border-radius:0 0 var(--r) 0;font-size:14px;font-weight:600;text-decoration:none;
  }
  .skip:focus{left:0}

  .i{width:1em;height:1em;flex:0 0 auto;stroke:currentColor;fill:none;
     stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
  .i-fill{fill:currentColor;stroke:none}

  /* ---------- OCCHIELLO ----------
     Un filetto e un testo spaziato: la stessa etichetta in tutta la pagina,
     al posto della pastiglia arrotondata. */
  .eyebrow{
    font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ocra-label);display:flex;align-items:flex-start;gap:14px;
    margin-bottom:26px;line-height:1.5;
  }
  /* il filetto si allinea alla prima riga anche quando l'etichetta va a capo */
  .eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.55;flex:0 0 34px;margin-top:.72em}
  .eyebrow.centred{justify-content:center}
  .on-dark .eyebrow{color:var(--ocra-light)}

  /* ---------- BARRA SUPERIORE ---------- */
  .langbar{
    position:fixed;top:0;left:0;right:0;z-index:60;
    background:rgba(245,241,232,.94);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    height:var(--bar-h);
  }
  .langbar-inner{
    max-width:1120px;margin:0 auto;padding:0 32px;height:100%;
    display:flex;align-items:center;gap:18px;
  }
  .lb-home{display:block;flex:0 0 auto;line-height:0}
  .lb-logo{height:50px;width:auto;display:block}
  .lb-rule{width:1px;height:34px;background:var(--line);flex:0 0 1px;margin-left:-4px}
  .lb-lance{
    font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--forest-soft);
    /* Il motto e' lungo: va su due righe, spezzandosi solo dopo un "·"
       (dentro ogni voce gli spazi sono  ). Niente puntini di sospensione. */
    line-height:1.5;text-wrap:balance;overflow:hidden;min-width:0;
  }
  .bar-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
  .bar-btn{
    display:inline-flex;align-items:center;gap:8px;text-decoration:none;
    font-size:13.5px;font-weight:600;padding:11px 17px;border-radius:var(--r);
    white-space:nowrap;transition:background .2s,color .2s,border-color .2s;
  }
  .bar-btn .i{font-size:15px}
  .bar-btn.wa{background:var(--forest);color:var(--cream)}
  .bar-btn.wa:hover{background:var(--forest-deep)}
  .bar-btn.wa .i{font-size:16px}
  .bar-btn.line{color:var(--ink);border:1px solid var(--line);background:transparent}
  .bar-btn.line:hover{border-color:var(--forest);color:var(--forest)}
  .langswitch{display:flex;gap:1px;margin-left:12px;padding-left:14px;border-left:1px solid var(--line);flex:0 0 auto}
  .langswitch a,
  .langswitch button{
    font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
    background:transparent;color:var(--muted);border:1px solid transparent;
    padding:8px 11px;border-radius:2px;transition:background .2s,color .2s;letter-spacing:.08em;
  }
  .langswitch a{text-decoration:none;display:inline-block}
  .langswitch a:hover,
  .langswitch button:hover{color:var(--forest)}
  .langswitch a[aria-current="page"],
  .langswitch button[aria-pressed="true"]{background:var(--forest);color:var(--cream)}

  /* sotto i 1120px il motto andrebbe su tre righe: si toglie */
  @media (max-width:1119px){ .lb-rule,.lb-lance{display:none} }
  @media (max-width:900px){
    :root{--bar-h:78px}
    .lb-logo{height:42px}
    .langbar-inner{gap:10px}
    .langswitch{margin-left:8px;padding-left:10px}
  }
  /* tre pulsanti con l'etichetta non stanno piu' sotto i 760px (in albanese
     sono i piu' larghi): li' restano le sole icone */
  @media (max-width:760px){
    .bar-btn .lbl{display:none}
    .bar-btn{padding:11px 13px}
  }
  @media (max-width:600px){
    :root{--bar-h:66px}
    .langbar-inner{padding:0 18px;gap:8px}
    .lb-logo{height:32px}
    .bar-actions{gap:5px}
    .bar-btn{padding:10px 11px}
    .langswitch{margin-left:2px;padding-left:8px;gap:0}
    .langswitch a,
    .langswitch button{padding:9px 8px;font-size:11.5px;letter-spacing:.03em}
  }
  /* con tre pulsanti, sotto i 400px la barra usciva di 9px dal margine destro */
  @media (max-width:400px){ .bar-btn{padding:10px 9px} }

  /* ---------- APERTURA ---------- */
  .hero{padding:calc(var(--bar-h) + 60px) 0 56px;position:relative;background:var(--cream)}
  .hero h1{
    font-size:clamp(32px,5.6vw,58px);line-height:1.1;margin-bottom:26px;
    color:var(--forest-deep);max-width:860px;text-wrap:balance;
  }
  .hero h1 em{font-style:normal;color:var(--ocra-deep)}
  .hero .sub{font-size:clamp(16.5px,2.1vw,19.5px);color:var(--ink-soft);max-width:640px;margin-bottom:40px;line-height:1.72}
  .d-br{display:none}
  @media (min-width:861px){ .d-br{display:inline} }

  /* ---------- PULSANTI ---------- */
  .btn{
    font-family:inherit;font-size:15.5px;font-weight:600;cursor:pointer;text-decoration:none;
    padding:16px 24px;border:1px solid transparent;border-radius:var(--r);
    display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
    transition:background .2s,color .2s,border-color .2s;
  }
  .btn .i{font-size:17px}

  /* ---------- CONTATTI ----------
     Un solo modello in tutta la sezione Infortuni (apertura, sezione
     contatti, chiusura degli articoli): tre caselle impilate, una per
     contatto, con icona ed etichetta e senza numeri ne' indirizzi.
     Ordine fisso: WhatsApp (piena, accento), Chiamaci (piena, secondaria),
     Scrivici (solo bordo). Sul telefono sono impilate a tutta larghezza;
     dai 601px in su stanno affiancate, tre colonne uguali. */
  .contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:720px}
  .contacts .btn{width:100%;justify-content:center}
  .btn-accent{background:var(--ocra);color:var(--forest-deep)}
  .btn-accent:hover{background:var(--ocra-light)}
  .btn-second{background:var(--forest);color:var(--cream)}
  .btn-second:hover{background:var(--forest-deep)}
  .btn-outline{background:transparent;color:var(--ink);border-color:var(--forest-soft)}
  .btn-outline:hover{border-color:var(--forest);color:var(--forest)}
  /* sul verde scuro: la secondaria si schiarisce, altrimenti si confonde
     col fondo; il bordo resta, il testo passa al crema */
  .on-dark .btn-second{background:var(--forest-soft);color:#fff}
  .on-dark .btn-second:hover{background:var(--forest)}
  .on-dark .btn-outline{color:var(--cream)}
  .on-dark .btn-outline:hover{border-color:var(--ocra);color:var(--ocra)}

  /* ---------- SEZIONI ---------- */
  section{padding:92px 0}
  .hero + section{padding-top:80px}
  .on-dark{color:var(--cream)}
  .sec-forest{background:var(--forest)}
  .sec-deep{background:var(--forest-deep)}
  .sec-warm{background:var(--cream-warm)}

  h2.sec-h{font-size:clamp(26px,3.6vw,38px);color:var(--forest-deep);max-width:720px;margin-bottom:20px;text-wrap:balance}
  .on-dark h2.sec-h{color:#fff}
  .sec-intro{font-size:17.5px;color:var(--muted);max-width:660px;line-height:1.72}
  .on-dark .sec-intro{color:#b8cfc9}

  /* ---------- COSA TI SPETTA ----------
     Tre colonne separate da filetti verticali: niente schede, niente ombre. */
  .owed-intro{margin-bottom:56px}
  .twocol.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
  .ocard{
    padding:34px 34px 8px 0;position:relative;
    border-right:1px solid var(--line);
  }
  .ocard:nth-child(n+2){padding-left:34px}
  .ocard:last-child{border-right:0;padding-right:0}
  .ocard .ic{color:var(--forest-soft);margin-bottom:20px}
  .ocard .ic .i{font-size:26px}
  .ocard.b .ic{color:var(--ocra-deep)}
  .ocard .step{
    position:absolute;top:32px;right:34px;
    font-family:'Fraunces',serif;font-size:15px;line-height:1;font-weight:600;
    color:var(--muted);opacity:.5;letter-spacing:.1em;
  }
  .ocard:last-child .step{right:0}
  .ocard h3{font-size:20px;margin-bottom:12px;color:var(--forest-deep);padding-right:26px;text-wrap:balance}
  .ocard p{font-size:15.5px;color:var(--muted);line-height:1.75}
  .bridge{
    margin-top:52px;padding-top:34px;border-top:1px solid var(--line);
    font-family:'Fraunces',serif;font-size:clamp(19px,2.5vw,24px);
    color:var(--forest);font-weight:500;line-height:1.5;max-width:760px;text-wrap:balance;
  }
  .bridge b{color:var(--ocra-label);font-weight:600}

  /* ---------- COSA RISCHI ---------- */
  .stakes-inner{max-width:780px}
  .stakes h2{font-size:clamp(24px,3.4vw,34px);color:#fff;margin-bottom:22px;line-height:1.22;text-wrap:balance}
  .stakes p{font-size:17px;color:#b8cfc9;line-height:1.78;margin-bottom:0}
  .stakes .warn-strong{color:var(--ocra);font-weight:600}

  /* ---------- COME PUO FINIRE ---------- */
  .ending-inner{max-width:820px}
  .ending h2{font-size:clamp(24px,3.4vw,34px);color:var(--forest-deep);margin-bottom:26px;line-height:1.22;text-wrap:balance}
  .ending h2 em{font-style:normal;color:var(--ocra-deep)}
  .ending .two{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:38px;border-top:1px solid var(--line)}
  .ecard{padding:32px 34px 4px 0;border-right:1px solid var(--line)}
  .ecard:last-child{border-right:0;padding-right:0;padding-left:34px}
  .ecard .eic{color:var(--ocra-deep);margin-bottom:18px}
  .ecard .eic .i{font-size:25px}
  .ecard h3{font-size:19px;color:var(--forest-deep);margin-bottom:10px;line-height:1.3}
  .ecard p{font-size:15.5px;color:var(--muted);line-height:1.72;margin:0}

  /* ---------- CHI SIAMO ---------- */
  .who-grid{display:grid;grid-template-columns:.85fr 1fr;gap:64px;align-items:start}
  .who-photos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:34px}
  .who-photo img{
    /* height:auto e' necessario: gli attributi width/height dell'immagine
       valgono come stile e altrimenti battono aspect-ratio, allungando la foto */
    display:block;width:100%;height:auto;aspect-ratio:4/5;
    object-fit:cover;object-position:center top;border-radius:2px;
  }
  .who-photo .cap{padding-top:14px}
  .who-photo .cap .nm{font-family:'Fraunces',serif;font-size:16px;font-weight:600;color:var(--forest-deep);line-height:1.25}
  .who-photo .cap .rl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
  .who-sec h2{font-size:clamp(26px,3.6vw,38px);color:var(--forest-deep);margin-bottom:22px;text-wrap:balance}
  .who-body p{font-size:16.5px;color:var(--ink-soft);margin-bottom:20px;line-height:1.78}
  .who-body p:last-child{margin-bottom:0}
  .reassure{display:grid;margin-top:38px;border-top:1px solid var(--line)}
  .reassure .item{
    display:flex;gap:18px;align-items:flex-start;
    padding:22px 0;border-bottom:1px solid var(--line);
  }
  .reassure .item .ic{flex:0 0 auto;color:var(--forest-soft);padding-top:2px}
  .reassure .item .ic .i{font-size:21px}
  .reassure .item h3{font-size:15.5px;margin-bottom:3px;color:var(--forest-deep);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700}
  .reassure .item p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6}

  /* ---------- IL PERCORSO ---------- */
  .plan h2{margin-bottom:52px}
  .plan-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-dark)}
  .pstep{padding:32px 34px 6px 0;border-right:1px solid var(--line-dark)}
  .pstep:nth-child(n+2){padding-left:34px}
  .pstep:last-child{border-right:0;padding-right:0}
  .pnum{
    font-family:'Fraunces',serif;font-size:30px;line-height:1;font-weight:600;
    color:var(--ocra);margin-bottom:20px;padding-bottom:18px;
    border-bottom:1px solid var(--line-dark);
  }
  .pstep h3{font-size:19px;color:#fff;margin-bottom:12px;line-height:1.3;text-wrap:balance}
  .pstep p{font-size:15px;color:#b8cfc9;line-height:1.7;margin:0}

  /* ---------- CHIAMATA FINALE ---------- */
  .final{text-align:center}
  .final h2{font-size:clamp(26px,4vw,42px);margin-bottom:20px;line-height:1.16;color:#fff;text-wrap:balance}
  .final h2 em{font-style:normal;color:var(--ocra)}
  .final p{font-size:17px;color:#b8cfc9;max-width:560px;margin:0 auto 40px}
  .final .contacts{margin:0 auto}

  /* ---------- APPROFONDIMENTI ---------- */
  .posts{padding:84px 0;background:var(--cream);border-top:1px solid var(--line)}
  .posts-h{margin-bottom:16px}
  .posts-intro{margin-bottom:44px}
  .posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
  .post{
    display:flex;flex-direction:column;gap:11px;text-decoration:none;
    padding:30px 32px 30px 0;border-right:1px solid var(--line);
  }
  .post:nth-child(n+2){padding-left:32px}
  .post:last-child{border-right:0;padding-right:0}
  a.post{transition:color .25s}
  a.post:hover h3{color:var(--forest-soft)}
  .post-tag{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocra-label)}
  .post h3{font-family:'Fraunces',serif;font-size:18.5px;line-height:1.36;color:var(--forest-deep);text-wrap:balance;transition:color .25s}
  .post p{font-size:15px;color:var(--muted);line-height:1.7}
  .post-more{margin-top:auto;padding-top:12px;font-weight:700;font-size:14px;color:var(--forest-soft)}
  .post-soon{
    margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  }
  .post-soon::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ocra);flex:0 0 5px}

  /* ---------- FOOTER ---------- */
  footer{background:var(--forest-deep);color:#8fa89a;padding:56px 0 40px;border-top:1px solid rgba(255,255,255,.08)}
  .foot-top{
    display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;
    padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1);
  }
  .foot-logo{height:48px;width:auto;display:block;margin-bottom:16px;opacity:.9}
  .foot-brand{font-family:'Fraunces',serif;font-size:19px;color:#fff;font-weight:600}
  .foot-brand span{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;color:#8fa89a;font-weight:400;margin-top:8px;letter-spacing:.06em;line-height:1.6}
  .foot-col .l{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#7f988a;margin-bottom:14px}
  .foot-col a,.foot-col p{color:#c3d6d0;text-decoration:none;font-size:14.5px;line-height:1.75;display:block}
  .foot-col a{width:fit-content;padding:4px 0;transition:color .2s}
  .foot-col a:hover{color:var(--ocra)}
  .foot-bottom{padding-top:26px;font-size:12.5px;color:#7f988a;line-height:1.7;max-width:900px}
  @media (max-width:820px){
    .foot-top{grid-template-columns:1fr 1fr;gap:32px}
    .foot-col.brand-col{grid-column:1/-1}
  }
  @media (max-width:520px){ .foot-top{grid-template-columns:1fr;gap:28px} }
  .foot-bottom a{color:#8fa89a}
  .foot-privacy{display:block;margin-top:12px;width:fit-content;padding:4px 0}

  [data-lang]:not(.show){display:none!important}
  [data-lang].show{display:revert}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- ADATTAMENTO ---------- */
  @media (max-width:1000px){
    .who-grid{gap:44px}
    .ocard,.pstep,.ecard,.post{padding-right:24px}
    .ocard:nth-child(n+2),.pstep:nth-child(n+2),.post:nth-child(n+2){padding-left:24px}
    .ecard:last-child{padding-left:24px}
    .ocard .step{right:24px}
  }
  @media (max-width:900px){
    section{padding:70px 0}
    .hero{padding:calc(var(--bar-h) + 40px) 0 48px}
    .who-grid{grid-template-columns:1fr;gap:48px}
    .who-photos{max-width:440px;margin-bottom:32px}
    /* le colonne diventano un elenco: filetti orizzontali, nessuna scheda */
    .twocol.three,.plan-steps,.ending .two,.posts-grid{grid-template-columns:1fr}
    .ocard,.pstep,.ecard,.post{
      border-right:0;border-bottom:1px solid var(--line);
      padding:30px 0 30px 0!important;
    }
    .pstep{border-bottom-color:var(--line-dark)}
    .ocard:last-child,.pstep:last-child,.ecard:last-child,.post:last-child{border-bottom:0;padding-bottom:6px!important}
    .ocard .step{top:30px;right:0}
    .bridge{margin-top:40px;padding-top:28px}
  }
  @media (max-width:600px){
    section{padding:58px 0}
    .wrap{padding:0 18px}
    .contacts{grid-template-columns:1fr;gap:8px;max-width:none}
    .who-photos{gap:14px}
    .posts{padding:62px 0}
  }

  /* ---------- GIUSTIFICAZIONE ----------
     Solo sui blocchi larghi: nelle colonne strette apre "fiumi" bianchi. */
  @media (min-width:901px){
    .hero .sub,.sec-intro,.who-body p,.stakes p{
      text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;
    }
  }
  @media (max-width:900px){
    .hero .sub,.sec-intro,.who-body p,.stakes p{text-align:left;hyphens:none}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important}
    .reveal{opacity:1;transform:none}
    html{scroll-behavior:auto}
  }

  /* Avviso di copia: vedi lo script in fondo alla pagina. */
  .copy-toast{
    position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
    background:#16302f;color:#f5f1e8;border:1px solid rgba(245,241,232,.22);
    padding:13px 20px;border-radius:3px;font-size:14.5px;font-weight:500;
    font-family:inherit;line-height:1.4;max-width:calc(100% - 32px);text-align:center;
    box-shadow:0 14px 40px -18px rgba(0,0,0,.5);
    opacity:0;pointer-events:none;z-index:300;
    transition:opacity .22s ease, transform .22s ease;
  }
  .copy-toast.on{opacity:1;transform:translate(-50%,0)}
  @media (prefers-reduced-motion:reduce){ .copy-toast{transition:none} }

/* ======================================================================
   ARTICOLI  (/articoli/)
   Stesso sistema della pagina principale: un solo raggio, filetti da 1px,
   nessuna ombra. Qui si aggiungono soltanto gli stili del testo lungo.
   ====================================================================== */
.art-wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.art-head{padding-top:calc(var(--bar-h) + 56px)}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:26px}
.crumbs a{color:var(--forest-soft);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:var(--forest-soft)}
.crumbs span{margin:0 8px;opacity:.5}

.art-title{font-size:clamp(29px,4.2vw,46px);color:var(--forest-deep);line-height:1.14;
  max-width:820px;margin-bottom:20px;text-wrap:balance}
.art-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:var(--muted);padding-bottom:30px;border-bottom:1px solid var(--line)}
.art-meta .cat{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ocra-label)}

.art-body{max-width:720px;padding:44px 0 8px;font-size:17.5px;line-height:1.8;color:var(--ink-soft)}
.art-body > p{margin-bottom:24px}
.art-body h2{font-size:clamp(22px,2.8vw,28px);color:var(--forest-deep);margin:44px 0 16px;text-wrap:balance}
.art-body h3{font-size:19.5px;color:var(--forest-deep);margin:32px 0 12px}
.art-body ul,.art-body ol{margin:0 0 24px 22px}
.art-body li{margin-bottom:10px}
.art-body strong{color:var(--ink);font-weight:700}
.art-body a:not(.btn){color:var(--forest);text-decoration:none;border-bottom:1px solid var(--line)}
.art-body a:hover{border-bottom-color:var(--forest)}
.art-lead{font-size:19.5px;line-height:1.7;color:var(--ink);margin-bottom:32px}

/* richiamo dentro l'articolo */
.art-aside{border-left:2px solid var(--ocra);padding:4px 0 4px 22px;margin:32px 0;
  font-size:16.5px;line-height:1.72;color:var(--ink)}

/* chiusura: riporta al contatto */
.art-cta{margin:52px 0 0;padding:34px 0 0;border-top:1px solid var(--line)}
.art-cta h2{font-size:24px;color:var(--forest-deep);margin-bottom:12px}
.art-cta p{font-size:16.5px;color:var(--muted);margin-bottom:24px;max-width:620px}

.art-note{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);line-height:1.65;max-width:720px}

/* elenco degli articoli */
.art-list{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);margin-top:40px}
.art-item{display:block;text-decoration:none;padding:30px 0;border-bottom:1px solid var(--line)}
.art-item .cat{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ocra-label)}
.art-item h2{font-family:'Fraunces',serif;font-size:22px;color:var(--forest-deep);
  margin:10px 0 8px;line-height:1.34;transition:color .25s;text-wrap:balance}
a.art-item:hover h2{color:var(--forest-soft)}
.art-item p{font-size:16px;color:var(--muted);line-height:1.65;max-width:720px}
.art-item .when{font-size:13px;color:var(--muted);margin-top:10px}

@media (max-width:600px){
  .art-wrap{padding:0 18px}
  .art-body{font-size:16.5px;padding-top:34px}
  .art-lead{font-size:18px}
}

.posts-all{margin-top:30px;font-size:15.5px;font-weight:600}
.posts-all a{color:var(--forest-soft);text-decoration:none;border-bottom:1px solid var(--line);padding:4px 0;display:inline-block}
.posts-all a:hover{border-bottom-color:var(--forest-soft)}