/* ══════════════════════════════════════════════════════════════════
   IL RITMO
   Un sistema solo di spazi e di scale, usato dalla home e dalla About.
   Prima ogni pagina aveva i suoi numeri e si vedeva: stessi elementi
   con respiri diversi da una pagina all'altra.

   Tre misure verticali e basta:
     --r1  il respiro fra due sezioni
     --r2  lo stacco dentro una sezione
     --r3  lo stacco fra due paragrafi

   E un asse solo: --wrap, la stessa colonna di tutto il resto del sito.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --r1:clamp(76px,10vw,148px);
  --r2:clamp(30px,4vw,52px);
  --r3:clamp(14px,1.6vw,22px);
  --wrap:1080px;
}

.ph-wrap{
  width:min(var(--wrap), calc(100% - 2 * var(--pad,clamp(22px,5vw,72px))));
  margin:0 auto;
}

/* ── LA FOTOGRAFIA ─────────────────────────────────────────────────
   La foto e' verticale, 1466 per 2202. Messa in una banda larga e bassa
   veniva ritagliata al centro: quasi tutto muro, con la testa che sbuca
   dal bordo. Un ritratto verticale non puo' fare da apertura orizzontale.
   Qui sta in verticale, nella sua forma, dentro i margini della pagina
   e non a filo dello schermo: cosi non taglia la pagina in due meta'.
   Il testo le sta accanto e parte dalla stessa riga. */
.ph-hero{
  display:grid;
  grid-template-columns:minmax(0,var(--pt-col,38%)) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);
  align-items:end;
  padding:var(--r1) 0 0;
}
/* width al cento per cento e margini a zero, dichiarati: la regola di
   allineamento del sito mette margin auto su quello che sta nel corpo
   pagina, e in una griglia i margini automatici spengono lo stiramento.
   Il riquadro si restringeva sul contenuto, che qui e' vuoto, e usciva
   largo zero pixel. */
.ph-shot{
  position:relative;width:100% !important;margin:0 !important;
  overflow:hidden;border-radius:2px;
  aspect-ratio:2/3;
  background:#0a0708 url("/img/hero.webp") 50% 12% / cover no-repeat;
}
.ph-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, transparent 62%, rgba(8,5,6,.55) 100%);
}
.ph-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:0 clamp(12px,1.4vw,18px) clamp(10px,1.2vw,14px);
  font-family:var(--mono,ui-monospace,monospace);
  font-size:.52rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(224,218,208,.55);pointer-events:none;
}

/* ── L'APERTURA ────────────────────────────────────────────────────
   Sull'asse della pagina, come tutto il resto. */
.ph-open{padding:var(--r1) 0}
.ph-hero + .ph-open{padding-top:var(--r2)}

.ph-date{
  font-family:var(--mono,ui-monospace,monospace);font-size:.54rem;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(163,157,184,.55);
  margin:0 0 var(--r2);padding-bottom:1em;
  border-bottom:1px solid rgba(236,234,244,.14);
  max-width:var(--wrap);
}
.ph-h1{
  font-family:var(--disp,"Cormorant",Georgia,serif);font-weight:300;
  font-size:clamp(3rem,6.4vw,6.4rem);line-height:.98;letter-spacing:-.015em;
  color:#f4f2f8;margin:0 0 .34em;max-width:16ch;text-wrap:balance;
}
.ph-lede{
  font-family:var(--disp,"Cormorant",Georgia,serif);font-weight:300;
  font-size:clamp(1.5rem,2.9vw,2.1rem);line-height:1.4;
  color:#e8e4f2;margin:0;max-width:24ch;
}
.ph-p{
  font-family:var(--sans,system-ui,sans-serif);font-weight:300;
  font-size:1.06rem;line-height:1.85;color:#a8a2b8;
  margin:var(--r2) 0 0;max-width:44ch;
}

@media(max-width:860px){
  .ph-hero{grid-template-columns:1fr;gap:var(--r2);padding-top:var(--r2)}
  .ph-shot{aspect-ratio:3/4;background-image:url("/img/hero-mob.webp");background-position:50% 16%}
  .ph-h1,.ph-lede,.ph-p{max-width:none}
}

/* ── ALLINEAMENTO ──────────────────────────────────────────────────
   Le classi ph- sono nuove, quindi la regola generale che centra
   titoli e paragrafi nel corpo pagina le prende in pieno. */
html body:not(#_):not(#__):not(#___):not(#____)
:is(.ph-date,.ph-h1,.ph-lede,.ph-p,.ph-wrap,.ph-cap){
  text-align:left !important;text-align-last:left !important;
  margin-left:auto !important;margin-right:auto !important;
}
html body:not(#_):not(#__):not(#___):not(#____)
:is(.ph-date,.ph-h1,.ph-lede,.ph-p){margin-left:0 !important;margin-right:0 !important}
html body:not(#_):not(#__):not(#___):not(#____) .ph-cap{
  display:flex !important;justify-content:space-between !important;
}
@media(max-width:860px){
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______)
  :is(.ph-date,.ph-h1,.ph-lede,.ph-p,.ph-cap){
    text-align:left !important;text-align-last:left !important;
    margin-left:0 !important;margin-right:0 !important;max-width:none !important;
  }
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) .ph-cap{
    display:flex !important;justify-content:space-between !important;
  }
}

/* ══ IL FOLIO ══════════════════════════════════════════════════════
   Le riviste numerano tutto. Si scrive nell'attributo data-folio del
   markup, lo stile e' uno solo. ══════════════════════════════════ */
section[data-folio]{position:relative}
section[data-folio]::before{
  content:attr(data-folio);
  position:absolute;top:clamp(26px,3.4vw,40px);
  right:max(var(--pad,clamp(22px,5vw,72px)), calc((100% - 1080px) / 2));
  font-family:var(--mono,ui-monospace,monospace);font-size:.54rem;letter-spacing:.26em;
  color:rgba(163,157,184,.34);pointer-events:none;
}
@media(max-width:860px){ section[data-folio]::before{display:none} }