:root{
    /* palette presa dall'intonaco di Salò: sabbia, ombra dipinta,
       terracotta delle orecchie, verde delle persiane */
    --calce:      #F6F1E7;
    --sabbia:     #E3D8C2;
    --ombra:      #C3B396;
    --creta:      #B0523A;
    --persiana:   #3A4C3B;

    --bg:         var(--calce);
    --superficie: #EDE5D5;
    --testo:      #2A3129;
    --testo-lieve:#5F6759;
    --filo:       rgba(42,49,41,.18);
    --accento:    var(--creta);
    --slot-linea: rgba(42,49,41,.28);

    --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
    --corpo:   "Karla", "Helvetica Neue", Arial, sans-serif;

    --misura: 34rem;          /* ~65 caratteri */
    --gutter: clamp(1rem, 5vw, 4rem);
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --calce:      #E9E0CC;
      --sabbia:     #39402F;
      --ombra:      #4C543C;
      --creta:      #CF7955;
      --persiana:   #8FA58B;

      --bg:         #1B1F17;
      --superficie: #232819;
      --testo:      #E9E0CC;
      --testo-lieve:#A79E88;
      --filo:       rgba(233,224,204,.20);
      --accento:    var(--creta);
      --slot-linea: rgba(233,224,204,.28);
    }
  }
  :root[data-theme="dark"]{
    --calce:      #E9E0CC;
    --sabbia:     #39402F;
    --ombra:      #4C543C;
    --creta:      #CF7955;
    --persiana:   #8FA58B;

    --bg:         #1B1F17;
    --superficie: #232819;
    --testo:      #E9E0CC;
    --testo-lieve:#A79E88;
    --filo:       rgba(233,224,204,.20);
    --accento:    var(--creta);
    --slot-linea: rgba(233,224,204,.28);
  }

  *,*::before,*::after{ box-sizing:border-box; }

  body{
    margin:0;
    background:var(--bg);
    color:var(--testo);
    font-family:var(--corpo);
    font-size:1.0625rem;
    line-height:1.72;
    -webkit-font-smoothing:antialiased;
  }

  /* ─── tipografia ─────────────────────────────────────────── */
  h1,h2,h3{ font-family:var(--display); font-weight:400; text-wrap:balance; margin:0; }
  h1{ font-size:clamp(3.2rem,13vw,7.5rem); line-height:.92; letter-spacing:-.015em; }
  h2{ font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.08; }
  h3{ font-size:clamp(1.15rem,2.2vw,1.4rem); line-height:1.25; }
  p{ margin:0; }
  a{ color:inherit; }

  .occhiello{
    font-family:var(--corpo);
    font-size:.72rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.18em;
    color:var(--testo-lieve);
    margin:0;
  }

  .guida{                       /* paragrafo d'apertura di sezione */
    font-family:var(--display);
    font-size:clamp(1.25rem,2.6vw,1.6rem);
    line-height:1.45;
    font-style:italic;
    color:var(--testo);
  }

  .prosa{ max-width:var(--misura); display:flex; flex-direction:column; gap:1.1em; }
  .prosa p + p{ margin:0; }

  /* ─── impalcatura ────────────────────────────────────────── */
  .sezione{
    padding-block:clamp(4rem,11vw,8rem);
    padding-inline:var(--gutter);
  }
  .sezione--stretta{ max-width:78rem; margin-inline:auto; }

  .intestazione-sezione{
    display:flex; flex-direction:column; gap:.9rem;
    max-width:var(--misura);
    margin-bottom:clamp(2rem,5vw,3.5rem);
  }

  /* ─── barra di navigazione ───────────────────────────────── */
  .barra{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
    display:flex; align-items:baseline; justify-content:space-between;
    gap:1rem 2rem; flex-wrap:wrap;
    padding:.85rem var(--gutter);
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--filo);
  }
  .barra__nome{
    font-family:var(--display); font-size:1.15rem; letter-spacing:.02em;
    text-decoration:none;
  }
  .barra__voci{ display:flex; gap:1.4rem; flex-wrap:wrap; }
  .barra__voci a{
    font-size:.78rem; text-transform:uppercase; letter-spacing:.13em;
    text-decoration:none; color:var(--testo-lieve);
    padding-bottom:2px; border-bottom:1px solid transparent;
  }
  .barra__voci a:hover,
  .barra__voci a:focus-visible{ color:var(--testo); border-bottom-color:var(--accento); }

  :where(a,button):focus-visible{ outline:2px solid var(--accento); outline-offset:3px; border-radius:2px; }

  section[id]{ scroll-margin-top:5.5rem; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

  /* ─── apertura ───────────────────────────────────────────── */
  .apertura{
    position:relative; overflow:hidden;
    padding-block:clamp(3.5rem,9vw,6.5rem) clamp(3rem,7vw,5rem);
    padding-inline:var(--gutter);
    border-bottom:1px solid var(--filo);
  }
  /* il muro: cerchi concentrici tono su tono, come sulla facciata gialla */
  .apertura::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:
      repeating-radial-gradient(circle at 88% 8%,
        var(--sabbia) 0 22px, var(--ombra) 22px 44px);
    opacity:.55;
    -webkit-mask-image:radial-gradient(circle at 88% 8%, #000 0 62%, transparent 86%);
    mask-image:radial-gradient(circle at 88% 8%, #000 0 62%, transparent 86%);
  }
  .apertura > *{ position:relative; z-index:1; }

  .apertura__testo{ max-width:46rem; display:flex; flex-direction:column; gap:1.5rem; }
  .apertura h1 .tondo{ font-style:italic; }
  .apertura__sottotitolo{
    font-family:var(--display); font-style:italic;
    font-size:clamp(1.2rem,3vw,1.85rem); line-height:1.35;
    max-width:24ch;
  }
  .apertura__dove{
    display:flex; align-items:center; gap:.7rem;
    font-size:.78rem; text-transform:uppercase; letter-spacing:.16em;
    color:var(--testo-lieve);
  }
  .apertura__dove::before{
    content:""; width:2.5rem; height:1px; background:var(--accento); flex:none;
  }

  /* ─── segnaposto fotografici ─────────────────────────────── */
  .slot{ margin:0; display:flex; flex-direction:column; gap:.7rem; }
  .slot__cornice{
    position:relative;
    aspect-ratio:var(--ratio, 3/2);
    max-width:100%;
    background:
      repeating-linear-gradient(-38deg,
        transparent 0 13px,
        color-mix(in srgb, var(--slot-linea) 22%, transparent) 13px 14px);
    background-color:var(--superficie);
    border:1px solid var(--filo);
    display:flex; flex-direction:column; justify-content:flex-end;
    gap:.35rem; padding:clamp(.9rem,2.5vw,1.4rem);
  }
  .slot__n{
    position:absolute; top:clamp(.7rem,2vw,1.1rem); left:clamp(.9rem,2.5vw,1.4rem);
    font-family:var(--display); font-size:1.5rem; line-height:1;
    color:var(--accento);
    font-variant-numeric:tabular-nums;
  }
  .slot__cosa{ font-size:.95rem; font-weight:500; line-height:1.35; }
  .slot__come{
    font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
    color:var(--testo-lieve);
  }
  .slot figcaption{ font-size:.85rem; color:var(--testo-lieve); line-height:1.5; max-width:38ch; }

  /* ─── il colore: la scala tono su tono ───────────────────── */
  .scala{ display:flex; flex-wrap:wrap; gap:0; max-width:46rem; border:1px solid var(--filo); }
  .scala__tono{
    flex:1 1 7rem; min-width:0;
    aspect-ratio:1/1.35;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:.7rem;
    font-size:.68rem; letter-spacing:.07em; text-transform:uppercase;
  }
  .scala__tono span{ display:block; }
  .scala__tono b{ display:block; font-weight:500; font-size:.8rem; letter-spacing:.02em; text-transform:none; }

  /* ─── le linee ───────────────────────────────────────────── */
  .linee{ width:100%; height:auto; display:block; }
  .linee path{ fill:none; stroke:var(--ombra); stroke-width:2; }
  .linee .marcata{ stroke:var(--accento); stroke-width:2.5; }

  /* ─── griglie ────────────────────────────────────────────── */
  .griglia{
    display:grid; gap:clamp(1.2rem,3vw,2.2rem);
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }
  .coppia{
    display:grid; gap:clamp(1.5rem,4vw,3.5rem);
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items:center;
  }

  /* ─── i cani: sguardi che sporgono dal muro ──────────────── */
  .muro{
    background:var(--sabbia);
    border-block:1px solid var(--filo);
  }
  .muro .slot__cornice{ background-color:color-mix(in srgb, var(--superficie) 70%, var(--sabbia)); }

  /* ─── biografia ──────────────────────────────────────────── */
  .studi{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .studi li{
    display:flex; flex-wrap:wrap; gap:.2rem 1.2rem;
    padding-block:.85rem;
    border-top:1px solid var(--filo);
  }
  .studi li:last-child{ border-bottom:1px solid var(--filo); }
  .studi b{ font-weight:500; flex:1 1 14rem; }
  .studi span{ color:var(--testo-lieve); font-size:.9rem; }

  /* ─── contatti ───────────────────────────────────────────── */
  .contatti{ background:var(--superficie); border-top:1px solid var(--filo); }
  .recapiti{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .recapiti li{ border-top:1px solid var(--filo); }
  .recapiti li:last-child{ border-bottom:1px solid var(--filo); }
  .recapiti a, .recapiti .voce{
    display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap;
    padding-block:1.15rem;
    text-decoration:none;
    font-family:var(--display); font-size:clamp(1.15rem,2.6vw,1.6rem);
  }
  .recapiti a:hover{ color:var(--accento); }
  .recapiti .etichetta{
    font-family:var(--corpo); font-size:.7rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--testo-lieve);
    flex:0 0 5.5rem;
  }

  .chiusa{
    padding:2.5rem var(--gutter) 3rem;
    border-top:1px solid var(--filo);
    font-size:.78rem; color:var(--testo-lieve);
    display:flex; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap;
  }

  /* ─── il branco che parla ────────────────────────────────── */
  /* quattro cani: due per riga, o quattro in fila. Mai tre più uno. */
  .branco{
    display:grid; gap:clamp(.8rem,2vw,1.5rem);
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  @media (min-width:58rem){
    .branco{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  }
  .cane{
    font:inherit; color:inherit; text-align:left;
    background:none; border:0; padding:0; cursor:pointer;
    display:flex; flex-direction:column; gap:.55rem;
    transition:opacity .3s ease;
  }
  .cane__ritratto{
    position:relative; aspect-ratio:1/1;
    background:
      repeating-linear-gradient(-38deg,
        transparent 0 13px,
        color-mix(in srgb, var(--slot-linea) 22%, transparent) 13px 14px);
    background-color:color-mix(in srgb, var(--superficie) 70%, var(--sabbia));
    border:1px solid var(--filo);
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  .cane__nome{
    font-family:var(--display); font-size:1.12rem; line-height:1.2;
  }
  .cane__dove{
    font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
    color:var(--testo-lieve); line-height:1.4;
  }
  .cane:hover .cane__ritratto,
  .cane:focus-visible .cane__ritratto{ border-color:var(--accento); }
  .cane[aria-pressed="true"] .cane__ritratto{
    border-color:var(--accento);
    box-shadow:inset 0 0 0 2px var(--accento);
  }
  /* quando uno parla, gli altri stanno a guardare */
  .branco[data-scelto] .cane[aria-pressed="false"]{ opacity:.42; }

  .parola{
    margin-top:clamp(1.8rem,4vw,3rem);
    border:1px solid var(--filo);
    background:color-mix(in srgb, var(--superficie) 82%, var(--bg));
    padding:clamp(1.2rem,3vw,2rem);
    display:flex; flex-direction:column; gap:1.2rem;
  }
  .parola__testa{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:1rem; flex-wrap:wrap;
    border-bottom:1px solid var(--filo); padding-bottom:.9rem;
  }
  .parola__chi{ display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; }
  .parola__chi b{ font-family:var(--display); font-weight:400; font-size:1.3rem; }
  .parola__chi span{
    font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
    color:var(--testo-lieve);
  }
  .parola__chiudi{
    font:inherit; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
    background:none; border:0; padding:.2rem 0; cursor:pointer;
    color:var(--testo-lieve); border-bottom:1px solid transparent;
  }
  .parola__chiudi:hover{ color:var(--testo); border-bottom-color:var(--accento); }

  .scambio{ display:flex; flex-direction:column; gap:1rem; }
  .battuta{ max-width:46ch; }
  .battuta--cane{
    font-family:var(--display); font-size:clamp(1.02rem,2.1vw,1.2rem);
    line-height:1.55;
  }
  .battuta--tu{
    align-self:flex-end; text-align:right;
    font-size:.92rem; color:var(--testo-lieve);
    border-right:2px solid var(--accento); padding-right:.8rem;
  }
  .battuta--attesa{ color:var(--testo-lieve); font-style:italic; }
  @media (prefers-reduced-motion:no-preference){
    .battuta{ animation:sale .45s ease both; }
  }
  @keyframes sale{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

  .forma{ display:flex; gap:.7rem; flex-wrap:wrap; }
  .forma input{
    font:inherit; flex:1 1 14rem; min-width:0;
    padding:.7rem .9rem;
    background:var(--bg); color:var(--testo);
    border:1px solid var(--filo);
  }
  .forma input::placeholder{ color:var(--testo-lieve); }
  .forma input:focus-visible{ outline:2px solid var(--accento); outline-offset:1px; }
  .forma button{
    font:inherit; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
    padding:.7rem 1.3rem; cursor:pointer;
    background:var(--accento); color:var(--calce);
    border:1px solid var(--accento);
  }
  .forma button:hover{ filter:brightness(1.08); }

  .spunti{ display:flex; gap:.5rem; flex-wrap:wrap; }
  .spunti button{
    font:inherit; font-size:.8rem; cursor:pointer;
    padding:.35rem .8rem;
    background:none; color:var(--testo-lieve);
    border:1px solid var(--filo); border-radius:999px;
  }
  .spunti button:hover{ color:var(--testo); border-color:var(--accento); }

  .solo-lettori{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }

  /* ─── le foto dentro i ritratti ──────────────────────────── */
  .cane__ritratto{ overflow:hidden; }
  .cane__ritratto img{
    display:block; width:100%; height:100%; object-fit:cover;
    transition:transform .5s ease;
  }
  .cane:hover .cane__ritratto img,
  .cane:focus-visible .cane__ritratto img{ transform:scale(1.04); }
  @media (prefers-reduced-motion:reduce){
    .cane__ritratto img{ transition:none; }
    .cane:hover .cane__ritratto img{ transform:none; }
  }

  /* ─── come nasce un cane: è una sequenza vera, quindi numerata ─ */
  .nascita{
    display:grid; gap:clamp(1rem,2.5vw,1.9rem);
    grid-template-columns:repeat(2, minmax(0, 1fr));
    counter-reset:passo;
  }
  @media (min-width:58rem){
    .nascita{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  }
  .passo{ margin:0; display:flex; flex-direction:column; gap:.75rem; }
  .passo img{
    display:block; width:100%; aspect-ratio:3/4; object-fit:cover;
    border:1px solid var(--filo);
  }
  .passo figcaption{ font-size:.92rem; line-height:1.55; color:var(--testo-lieve); }
  .passo b{
    display:block; counter-increment:passo;
    font-family:var(--display); font-weight:400; font-size:1.1rem;
    color:var(--testo); margin-bottom:.25rem;
  }
  .passo b::before{
    content:counter(passo, decimal-leading-zero) " · ";
    color:var(--accento); font-variant-numeric:tabular-nums;
  }

  /* ─── la testa come pezzo singolo ────────────────────────── */
  .due-pezzi{
    display:grid; gap:clamp(1rem,2.5vw,1.8rem); max-width:46rem;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .pezzo{ margin:0; display:flex; flex-direction:column; gap:.7rem; }
  .pezzo img{
    display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
    border:1px solid var(--filo);
  }
  .pezzo figcaption{ font-size:.88rem; color:var(--testo-lieve); }
  .nota-negozio{
    max-width:var(--misura); margin-top:1.7rem;
    padding-top:1.1rem; border-top:1px solid var(--filo);
    font-size:.9rem; color:var(--testo-lieve);
  }
  .nota-negozio a{ color:var(--testo); text-decoration-color:var(--accento); }

/* ─── voce di menù della pagina corrente ──────────────────── */
.barra__voci a[aria-current="page"]{
  color:var(--testo); border-bottom-color:var(--accento);
}

/* ─── sottobarra: le sezioni della pagina lunga ───────────── */
.sottobarra{
  display:flex; gap:1.3rem; flex-wrap:wrap;
  padding:.7rem var(--gutter);
  border-bottom:1px solid var(--filo);
  background:var(--superficie);
}
.sottobarra a{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--testo-lieve); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.sottobarra a:hover{ color:var(--testo); border-bottom-color:var(--accento); }

/* ─── le attività: la prima più grande, le altre in fila ──── */
.attivita{
  display:grid; gap:clamp(1rem,2.5vw,1.8rem);
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (min-width:58rem){
  .attivita{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .attivita .mestiere--primo{ grid-column:span 3; }
}
.mestiere{
  margin:0; display:flex; flex-direction:column; gap:.6rem;
  padding-top:1rem; border-top:1px solid var(--filo);
}
.mestiere h3{ font-size:clamp(1.15rem,2.3vw,1.45rem); }
.mestiere p{ font-size:.95rem; line-height:1.6; color:var(--testo-lieve); }
.mestiere a{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--testo); text-decoration-color:var(--accento); }
.mestiere--primo{
  border-top-width:2px; border-top-color:var(--accento);
}
.mestiere--primo h3{ font-size:clamp(1.6rem,3.4vw,2.2rem); }
.mestiere--primo p{ font-size:1.02rem; color:var(--testo); max-width:var(--misura); }
.mestiere__foto{
  display:grid; gap:.6rem; grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:.5rem;
}
.mestiere__foto img{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid var(--filo);
}

/* ─── in questo momento ───────────────────────────────────── */
.adesso{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.adesso li{ padding-block:1.2rem; border-top:1px solid var(--filo); }
.adesso li:last-child{ border-bottom:1px solid var(--filo); }
.adesso h3{ font-size:clamp(1.15rem,2.3vw,1.45rem); margin-bottom:.3rem; }
.adesso p{ font-size:.95rem; color:var(--testo-lieve); max-width:var(--misura); }
.adesso .quando{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accento); display:block; margin-bottom:.45rem;
}
.da-scrivere{
  font-size:.82rem; color:var(--testo-lieve); font-style:italic;
  border-left:2px solid var(--accento); padding-left:.7rem;
}


/* ─── gli appuntamenti già passati ────────────────────────── */
.gia-fatti{
  font-family:var(--corpo); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--testo-lieve);
  margin:clamp(2.4rem,5vw,3.4rem) 0 .8rem;
}
.adesso--passati li{ opacity:.68; }
.adesso--passati .quando{ color:var(--testo-lieve); }


/* sei elementi stanno meglio su tre colonne che su quattro */
@media (min-width:58rem){
  .nascita--tre{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}