/* Luce di Casa — foglio di stile del sito.
   Sta qui, e non in style.css, perche Cloudflare su questo dominio ignora
   la query string (?ver=...): il solo modo di invalidare la cache di un CSS
   e cambiargli nome. Se modifichi questo file, rinominalo con la versione
   successiva (site-1-1-1.css) e aggiorna LDC_CSS in functions.php. */


/* =========================================================================
   1. FONT AUTOOSPITATI

   Tre file woff2, 216 KB in tutto (erano 369 KB). Sono variable font
   sottoinsiemate ai caratteri che questo sito usa davvero: latino base,
   accenti italiani e spagnoli, punteggiatura tipografica. Un carattere
   fuori da quel set (per esempio cirillico) ricadrebbe su Georgia.

   Assi tenuti solo dove servono:
   - Archivo: solo wght. L'asse wdth (larghezza) non lo usiamo mai e da solo
     pesava 54 KB.
   - Newsreader tondo: opsz + wght, perche il testo va da 200 a 400.
   - Newsreader corsivo: opsz + wght fissato a 300, il solo peso in cui il
     corsivo compare nel disegno (hero "Barbosa" e ", il sole"). Se un giorno
     servisse il corsivo a un altro peso, riscaricare il file con l'asse wght
     completo.

   Per rigenerarli: build-fonts.py nella cartella di lavoro del progetto.
   ========================================================================= */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/archivo-subset.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(../fonts/newsreader-subset.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 600;font-display:swap;
  src:url(../fonts/newsreader-italic-subset.woff2) format('woff2');}

/* =========================================================================
   2. TOKEN DI DESIGN  (valori identici al mockup "Luce di Casa")
   ========================================================================= */

:root{
  /* colori */
  --yn-bg:#FBF7F0;         /* fondo pagina            */
  --yn-ink:#2B2320;        /* testo principale        */
  --yn-ink-soft:#4A3D33;   /* testo attenuato         */
  --yn-body:#5C4E42;       /* corpo del testo         */
  --yn-muted:#7A6A57;      /* nav, citazioni piccole  */
  --yn-caption:#8A7A66;    /* didascalie              */
  --yn-gold-label:#B4956A; /* etichette di sezione    */
  --yn-line:#EBE2D3;       /* filetti                 */
  --yn-ph:#E8DCC8;         /* placeholder foto        */
  --yn-band:#EFE6D6;       /* fascia tramonto         */
  --yn-card:#F3EDE1;       /* card Merceditas         */
  --yn-link:#A8721A;
  --yn-link-hover:#6E4A0C;
  --acc:#D9A227;           /* accento                 */
  --radici:#C4552F;        /* fondo sezione Radici    */
  /* ritmo verticale e gutter orizzontale */
  --pad:clamp(76px,9vw,130px);
  --gut:clamp(20px,4.4vw,64px);
}

/* =========================================================================
   3. BASE
   ========================================================================= */

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--yn-bg);
  color:var(--yn-ink);
  font-family:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:var(--yn-link);text-decoration:none;}
a:hover{color:var(--yn-link-hover);}
::selection{background:#F3DFA8;color:var(--yn-ink);}
img{display:block;max-width:100%;height:auto;}

/* Il mockup non applica un reset globale di box-sizing: la geometria di alcuni
   flex item dipende dal content-box di default. Lo dichiaro esplicitamente
   perché il CSS dei blocchi di WordPress non lo alteri. */
.yn,.yn *,.yn *::before,.yn *::after{box-sizing:content-box;}

.yn{background:var(--yn-bg);overflow-x:hidden;}

/* focus visibile (accessibilità) */
.yn a:focus-visible,
.yn button:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:2px;}

/* utility */
.yn-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.yn-skip{position:absolute;left:-9999px;top:0;z-index:99;padding:12px 18px;background:var(--yn-ink);color:#FDF9F1;font:500 12px/1 'Archivo',sans-serif;letter-spacing:.16em;text-transform:uppercase;}
.yn-skip:focus{left:8px;top:8px;color:#FDF9F1;}

/* etichette numerate di sezione */
.yn-label{margin:0;font:500 11px/1 'Archivo',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--yn-gold-label);}
.yn-label--lh{line-height:1.6;}
.yn-label--light{color:#FBE3C7;letter-spacing:.26em;}

/* filetti accento */
.yn-rule{width:clamp(64px,7vw,92px);height:2px;background:var(--acc);margin:clamp(28px,3.6vw,46px) 0 clamp(24px,2.8vw,34px);}
.yn-rule--sm{width:clamp(56px,6vw,80px);height:2px;background:var(--acc);margin:0;flex:none;}

/* cornici foto */
.yn-frame{overflow:hidden;background:var(--yn-ph);}
.yn-frame img{width:100%;height:100%;object-fit:cover;}
.yn-frame--34{aspect-ratio:3/4;}
.yn-frame--45{aspect-ratio:4/5;}
.yn-frame--32{aspect-ratio:3/2;}
.yn-frame--dark{background:rgba(0,0,0,.12);}

/* paragrafi */
.yn-p{margin:0;font:400 clamp(15px,1.3vw,17px)/1.8 'Archivo',sans-serif;color:var(--yn-body);}
.yn-p--light{color:#FBE3C7;}

/* =========================================================================
   4. NAV
   ========================================================================= */

.yn-nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(20px,3vw,30px) var(--gut);
  border-bottom:1px solid var(--yn-line);
}
.yn-nav__brand{font:500 13px/1 'Archivo',sans-serif;letter-spacing:.2em;text-transform:uppercase;}
.yn-nav__links{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,34px);font:400 12px/1 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--yn-muted);}
.yn-nav a{color:var(--yn-muted);transition:color .18s ease;}
.yn-nav a:hover{color:var(--yn-ink);}

/* =========================================================================
   4bis. SELETTORE LINGUA
   Ultimo elemento del menu, in alto a destra: bandierina + codice della
   lingua corrente (IT / ES / NL). E un <details>: al clic sul riassunto si
   apre l'elenco delle altre lingue, senza JavaScript. Il micro-script nel
   footer lo richiude cliccando fuori e, se il menu uscirebbe dallo schermo
   a sinistra, lo allinea al bordo sinistro del selettore.
   ========================================================================= */

.yn-lang{position:relative;margin-left:clamp(0px,.6vw,8px);padding-left:clamp(16px,2.4vw,34px);border-left:1px solid var(--yn-line);}
.yn-lang__cur{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:var(--yn-muted);transition:color .18s ease;user-select:none;padding:8px 0;margin:-8px 0;}
.yn-lang__cur::-webkit-details-marker{display:none;}
.yn-lang__cur::marker{content:"";}
.yn-lang__cur:hover,.yn-lang[open] .yn-lang__cur{color:var(--yn-ink);}
.yn-lang__cur:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:2px;}
.yn-flag{display:block;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(43,35,32,.14);}
.yn-lang__chev{display:block;width:5px;height:5px;margin:-3px 0 0 -2px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .18s ease;}
.yn-lang[open] .yn-lang__chev{transform:rotate(-135deg);margin-top:2px;}
.yn-lang__menu{position:absolute;right:0;top:calc(100% + 14px);z-index:30;margin:0;padding:6px 0;list-style:none;min-width:176px;background:var(--yn-bg);border:1px solid var(--yn-line);box-shadow:0 14px 36px rgba(43,35,32,.12);}
.yn-lang--left .yn-lang__menu{right:auto;left:clamp(16px,2.4vw,34px);}
.yn-nav .yn-lang__item{display:flex;align-items:center;gap:12px;padding:11px 18px;margin:0;white-space:nowrap;font:400 13px/1 'Archivo',sans-serif;letter-spacing:.04em;text-transform:none;color:var(--yn-ink);}
.yn-nav .yn-lang__item:hover{background:var(--yn-card);color:var(--yn-ink);}

/* =========================================================================
   5. HERO
   ========================================================================= */

.yn-hero{display:flex;flex-wrap:wrap-reverse;align-items:stretch;}
.yn-hero__text{
  flex:1 1 40%;min-width:min(100%,340px);box-sizing:border-box;
  padding:clamp(56px,7vw,128px) var(--gut) clamp(44px,5vw,80px);
  display:flex;flex-direction:column;justify-content:space-between;gap:48px;
  min-height:clamp(0px,40vw,760px);
}
.yn-kicker{font:500 clamp(10px,1vw,12px)/1 'Archivo',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--yn-gold-label);}
.yn-hero__title{
  margin:clamp(18px,2.4vw,28px) 0 0;
  font:200 clamp(58px,8.4vw,126px)/.88 'Newsreader',Georgia,serif;
  color:var(--yn-ink);letter-spacing:-.03em;text-wrap:balance;
}
.yn-hero__title em{font-weight:300;font-style:italic;}
.yn-hero__lede{margin:0;max-width:26ch;font:300 clamp(22px,2.2vw,29px)/1.38 'Newsreader',Georgia,serif;color:var(--yn-ink-soft);text-wrap:pretty;}
.yn-scroll{display:flex;align-items:center;gap:14px;font:400 11px/1 'Archivo',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#A08E77;}
.yn-scroll:hover{color:var(--yn-ink);}
.yn-scroll span{width:40px;height:1px;background:#CDBEA6;display:block;flex:none;transition:width .25s ease;}
.yn-scroll:hover span{width:56px;}
.yn-hero__media{
  flex:1 1 56%;min-width:min(100%,320px);box-sizing:border-box;
  position:relative;background:var(--yn-ph);min-height:clamp(420px,60vw,880px);
}
.yn-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* =========================================================================
   6. 01 — CHI SONO
   ========================================================================= */

.yn-about{padding:var(--pad) var(--gut);}
.yn-about__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,4vw,60px);align-items:start;}
.yn-about__body{grid-column:span 2;min-width:0;display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);max-width:68ch;}
.yn-lead{margin:0;font:300 clamp(26px,3vw,38px)/1.32 'Newsreader',Georgia,serif;color:var(--yn-ink);text-wrap:pretty;}

/* dettaglio: spalla / acqua */
.yn-detail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(16px,2vw,28px);padding:0 var(--gut) var(--pad);
}
.yn-detail__note{display:flex;align-items:flex-end;padding-bottom:clamp(8px,2vw,26px);}
.yn-quote-sm{margin:0;max-width:34ch;font:300 clamp(20px,1.9vw,25px)/1.45 'Newsreader',Georgia,serif;color:var(--yn-muted);text-wrap:pretty;}

/* =========================================================================
   7. 02 — RADICI
   ========================================================================= */

.yn-roots{background:var(--radici);color:#FDF3E6;padding:var(--pad) var(--gut);}
.yn-roots__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(32px,4.6vw,72px);align-items:center;}
.yn-roots__body{grid-column:span 2;min-width:0;}
.yn-roots__quote{margin:clamp(22px,2.6vw,32px) 0 0;max-width:30ch;font:300 clamp(30px,3.6vw,50px)/1.2 'Newsreader',Georgia,serif;color:#FDF3E6;text-wrap:pretty;}
.yn-roots__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(20px,2.6vw,40px);margin-top:clamp(28px,3.4vw,44px);max-width:74ch;}

/* =========================================================================
   8. 03 — IMMAGINI (photo story)
   ========================================================================= */

.yn-story{padding:var(--pad) 0 0;}
.yn-story__head{padding:0 var(--gut) clamp(36px,4.4vw,64px);display:flex;flex-wrap:wrap;gap:20px;align-items:baseline;justify-content:space-between;}
.yn-story__intro{margin:0;max-width:40ch;font:300 clamp(20px,1.9vw,26px)/1.45 'Newsreader',Georgia,serif;color:var(--yn-body);text-wrap:pretty;}
.yn-story__rowA{padding:0 var(--gut);display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,28px);align-items:flex-end;}
.yn-story__rowB{padding:clamp(14px,2vw,28px) var(--gut) 0;display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,28px);align-items:flex-start;}
.yn-fx-a{flex:1 1 40%;min-width:min(100%,280px);}
.yn-fx-b{flex:1 1 56%;min-width:min(100%,300px);}
.yn-fx-c{flex:1 1 32%;min-width:min(100%,260px);}
.yn-fx-cap{flex:1 1 28%;min-width:min(100%,240px);display:flex;align-items:center;min-height:110px;}
.yn-cap{margin:0;max-width:28ch;font:400 clamp(14px,1.2vw,16px)/1.75 'Archivo',sans-serif;color:var(--yn-caption);}

.yn-band{margin-top:clamp(44px,5.6vw,88px);background:var(--yn-band);display:flex;flex-wrap:wrap;align-items:stretch;}
.yn-band__media{flex:1 1 44%;min-width:min(100%,300px);position:relative;background:var(--yn-ph);min-height:clamp(420px,46vw,720px);}
.yn-band__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.yn-band__text{flex:1 1 46%;min-width:min(100%,300px);padding:clamp(36px,5vw,84px) var(--gut);display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.2vw,28px);}
.yn-band__quote{margin:0;max-width:26ch;font:300 clamp(26px,3.2vw,42px)/1.25 'Newsreader',Georgia,serif;color:var(--yn-ink);text-wrap:pretty;}
.yn-band__p{max-width:44ch;}

/* =========================================================================
   9. 04 — LE COSE CHE MI TENGONO SU
   ========================================================================= */

.yn-loves{padding:var(--pad) var(--gut);}
.yn-loves__label{margin-bottom:clamp(28px,3.4vw,46px);}
.yn-loves__list{display:flex;flex-direction:column;}
.yn-love{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(8px,2vw,40px);align-items:baseline;
  padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--yn-line);
}
.yn-love:last-child{border-bottom:1px solid var(--yn-line);}
.yn-love__title{margin:0;font:300 clamp(34px,4.2vw,58px)/1.05 'Newsreader',Georgia,serif;color:var(--yn-ink);letter-spacing:-.02em;}
.yn-love__title em{font-style:italic;color:var(--acc);}
.yn-love__p{grid-column:span 2;min-width:0;margin:0;max-width:52ch;font:400 clamp(15px,1.3vw,17px)/1.75 'Archivo',sans-serif;color:var(--yn-body);}

/* =========================================================================
   10. 05 — MERCEDITAS
   ========================================================================= */

.yn-merce{padding:0 var(--gut) var(--pad);}
.yn-merce__card{background:var(--yn-card);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch;gap:0;overflow:hidden;}
.yn-merce__media{min-height:clamp(240px,30vw,420px);position:relative;background:var(--yn-ph);}
.yn-merce__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.yn-merce__text{padding:clamp(32px,4vw,66px);display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2vw,26px);}
.yn-merce__h{margin:0;max-width:26ch;font:300 clamp(26px,2.8vw,38px)/1.25 'Newsreader',Georgia,serif;color:var(--yn-ink);text-wrap:pretty;}
.yn-merce__p{max-width:46ch;}
.yn-cta{
  display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
  font:500 12px/1 'Archivo',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yn-ink);border-bottom:2px solid var(--acc);padding-bottom:8px;
  transition:color .18s ease,border-color .18s ease;
}
.yn-cta:hover{color:var(--yn-link-hover);border-bottom-color:var(--yn-link-hover);}

/* =========================================================================
   11. 06 — SCRIVIMI
   ========================================================================= */

.yn-contact{background:var(--yn-ink);color:#F6EFE4;padding:var(--pad) var(--gut) clamp(48px,6vw,80px);}
.yn-contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(32px,4vw,64px);align-items:start;}
.yn-contact__h{margin:clamp(20px,2.4vw,30px) 0 0;max-width:24ch;font:200 clamp(32px,4.4vw,58px)/1.1 'Newsreader',Georgia,serif;color:#FDF9F1;letter-spacing:-.02em;text-wrap:pretty;}
.yn-contact__list{display:flex;flex-direction:column;gap:4px;}
.yn-contact__item{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:clamp(18px,2vw,24px) 0;border-top:1px solid #4A3F38;color:#FDF9F1;
  transition:color .18s ease;
}
.yn-contact__item:last-child{border-bottom:1px solid #4A3F38;}
.yn-contact__val{font:300 clamp(22px,2.4vw,30px)/1.2 'Newsreader',Georgia,serif;overflow-wrap:anywhere;}
.yn-contact__tag{font:400 11px/1 'Archivo',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#A08E77;flex:none;transition:color .18s ease;}
.yn-contact__item:hover{color:#FFFDF8;}
.yn-contact__item:hover .yn-contact__tag{color:var(--acc);}
.yn-foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-top:clamp(48px,6vw,90px);font:400 11px/1.6 'Archivo',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--yn-muted);}
.yn-foot a{color:var(--yn-muted);}
.yn-foot a:hover{color:#A08E77;}

/* =========================================================================
   12. PAGINE INTERNE  (privacy policy, articoli, 404)
   ========================================================================= */

.yn-doc{padding:clamp(56px,7vw,110px) var(--gut) var(--pad);max-width:74ch;margin:0 auto;box-sizing:border-box;}
.yn-doc__title{margin:0 0 clamp(24px,3vw,40px);font:300 clamp(34px,5vw,58px)/1.1 'Newsreader',Georgia,serif;color:var(--yn-ink);letter-spacing:-.02em;text-wrap:balance;}
.yn-doc__meta{margin:0 0 clamp(20px,2.4vw,30px);font:500 11px/1 'Archivo',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--yn-gold-label);}
.yn-doc__body{font:400 clamp(15px,1.3vw,17px)/1.8 'Archivo',sans-serif;color:var(--yn-body);}
.yn-doc__body h2{margin:2.2em 0 .6em;font:300 clamp(24px,2.6vw,32px)/1.25 'Newsreader',Georgia,serif;color:var(--yn-ink);}
.yn-doc__body h3{margin:1.8em 0 .5em;font:400 clamp(19px,2vw,23px)/1.3 'Newsreader',Georgia,serif;color:var(--yn-ink);}
.yn-doc__body p,.yn-doc__body ul,.yn-doc__body ol{margin:0 0 1.4em;}
.yn-doc__body img{margin:1.8em 0;}
.yn-doc__body blockquote{margin:1.8em 0;padding-left:clamp(16px,2vw,26px);border-left:2px solid var(--acc);font:300 clamp(19px,2vw,24px)/1.5 'Newsreader',Georgia,serif;color:var(--yn-muted);}
.yn-doc__back{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(32px,4vw,56px);font:500 12px/1 'Archivo',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--yn-ink);border-bottom:2px solid var(--acc);padding-bottom:8px;}
.yn-doc__back:hover{color:var(--yn-link-hover);border-bottom-color:var(--yn-link-hover);}

.yn-list{padding:clamp(56px,7vw,110px) var(--gut) var(--pad);}
.yn-list__item{padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid var(--yn-line);}
.yn-list__item:last-child{border-bottom:1px solid var(--yn-line);}
.yn-list__title{margin:0 0 .4em;font:300 clamp(26px,3vw,38px)/1.2 'Newsreader',Georgia,serif;letter-spacing:-.02em;}
.yn-list__title a{color:var(--yn-ink);}
.yn-list__title a:hover{color:var(--yn-link);}

/* =========================================================================
   13. AREE DI TOCCO
   Nel mockup i link della nav sono alti 12px: sul telefono si centrano male.
   Allargo solo l'area cliccabile con padding + margin negativo di pari
   valore: il margin box resta identico, quindi il layout non si muove di
   un pixel, ma il bersaglio arriva a 28px (minimo WCAG 2.2 = 24px).
   ========================================================================= */

.yn-nav a{padding:8px 6px;margin:-8px -6px;}
.yn-scroll{padding:9px 0;margin:-9px 0;}
.yn-cta{padding-top:6px;margin-top:-6px;}