/* Manuela Vaccarini, bozza 2
   Chiaro sullo stile di yasudayuko.com: grigio chiarissimo, bianco, sabbia come tono più scuro, lilla.
   Pagina singola (landing): niente barra laterale né menu.
   Ogg (Sharp Type) si attiva da solo se il file è in fonts/ o installato sul Mac;
   finché manca, i titoli usano Cormorant. */

@font-face {
  font-family: "Ogg";
  src: local("Ogg Regular"), local("Ogg-Regular"),
       url("fonts/Ogg-Regular.woff2") format("woff2"),
       url("fonts/Ogg-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --fondo: #f2f2f0;
  --bianco: #ffffff;
  --inchiostro: #3b3734;
  --tenue: #6f6a65;
  --sabbia: #c7bba5;
  --sabbia-chiara: #e7e0d4;
  --lilla: #b6a8d6;
  --lilla-chiaro: #ece8f5;
  --lilla-scuro: #6e5fa0;
  --filo: #dedbd6;

  --serif: "Ogg", "Cormorant", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --margine: clamp(20px, 5vw, 80px);
  --sezione: clamp(96px, 16vh, 180px);
}

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

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1.1em; max-width: 34em; }

/* Le foto che mancano ancora restano un riquadro sabbia, senza icona rotta */
img { background: var(--sabbia-chiara); color: transparent; }

:focus-visible { outline: 2px solid var(--lilla-scuro); outline-offset: 3px; }

.salta {
  position: fixed; left: 12px; top: -60px; z-index: 50;
  background: var(--inchiostro); color: var(--bianco); padding: 8px 14px;
}
.salta:focus { top: 12px; }

/* ---------- Lingua ---------- */
.lingua {
  position: absolute; top: clamp(20px, 4vh, 40px); right: var(--margine); z-index: 5;
  display: flex; gap: 2px;
}
.lingua button {
  font: 500 13px/1 var(--sans); color: var(--tenue);
  background: none; border: 0; padding: 8px; cursor: pointer;
}
.lingua button[aria-pressed="true"] { color: var(--inchiostro); text-decoration: underline; text-decoration-color: var(--lilla); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Bottoni ---------- */
.azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 24px; border-radius: 999px;
  font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn--pieno { background: var(--lilla); color: var(--inchiostro); }
.btn--pieno:hover { background: var(--inchiostro); color: var(--bianco); }
.btn--filo { border: 1px solid var(--inchiostro); color: var(--inchiostro); }
.btn--filo:hover { background: var(--inchiostro); color: var(--bianco); }
.btn--scuro { background: var(--inchiostro); color: var(--bianco); }
.btn--scuro:hover { background: var(--lilla-scuro); }

.link { color: var(--inchiostro); text-underline-offset: 5px; text-decoration-color: var(--lilla); text-decoration-thickness: 2px; }
.link:hover { color: var(--lilla-scuro); }

/* ---------- Titoli ---------- */
.titolo {
  margin: 0 0 .6em;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.2vw, 64px); line-height: 1.05; letter-spacing: -.005em;
  color: var(--inchiostro);
  text-wrap: balance;
}

/* Parola gigante bianca sul grigio, come i caratteri di yasudayuko.com */
.fantasma {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--serif); font-size: clamp(140px, 24vw, 420px); line-height: .8;
  color: var(--bianco); white-space: nowrap;
  will-change: transform;
}

/* ---------- Apertura ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr;
  column-gap: 20px;
  padding: clamp(28px, 5vh, 52px) var(--margine) 0;
  isolation: isolate;
  overflow-x: clip;
}
/* Fascia sabbia in alto: scalda l'apertura e toglie l'effetto troppo rosa */
.hero::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0 0 auto 0; height: 64%;
  background: var(--sabbia-chiara);
}
.hero__testa { grid-column: 1 / -1; position: relative; z-index: 2; margin-bottom: clamp(24px, 5vh, 48px); }
.hero__nome { margin: 0; font-family: var(--serif); font-size: clamp(48px, 6vw, 100px); line-height: .95; letter-spacing: -.01em; }
.hero__ruolo { margin: .35em 0 0; font-family: var(--serif); font-size: clamp(22px, 2vw, 32px); line-height: 1; color: var(--tenue); }
.hero__verticale {
  position: absolute; right: clamp(8px, 2vw, 32px); top: calc(clamp(20px, 4vh, 40px) + 44px); z-index: 0;
  writing-mode: vertical-rl;
  font-family: var(--serif); font-style: italic; font-size: clamp(120px, 19vh, 220px); line-height: 1;
  color: var(--bianco); pointer-events: none;
}
/* Ritratto scontornato su un riquadro del colore del muro originale (misurato dietro i capelli:
   #8f8780 a sinistra, #a49d95 a destra), così l'alone tra i ricci non si vede */
.hero__foto {
  grid-column: 1 / 10; grid-row: 2; align-self: end;
  margin: 0 0 0 calc(-1 * var(--margine)); position: relative; z-index: 1;
  height: clamp(480px, 84vh, 880px);
}
/* Il tortora resta pieno dietro testa e capelli, poi sfuma nel beige: niente riquadro.
   Il riquadro è più alto della foto, così la sfumatura avviene sopra la testa e non sui ricci.
   La maschera toglie gli ultimi bordi dritti: in alto e sul lato destro. */
.hero__foto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 74% 78% at 30% 70%,
    #a39b92 0%, #a39b92 64%, rgba(163, 155, 146, .6) 82%, rgba(163, 155, 146, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%), linear-gradient(to right, #000 52%, transparent 94%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%), linear-gradient(to right, #000 52%, transparent 94%);
  mask-composite: intersect;
}
.hero__foto img {
  position: absolute; left: 0; bottom: 0;
  height: 76%; width: auto; max-width: none;
  background: none;
}
.hero__carta {
  position: absolute; z-index: 2;
  top: 64%; translate: 0 -50%;
  /* a sinistra della scritta "Dubai" in verticale (margine + larghezza della scritta + aria) */
  right: calc(clamp(8px, 2vw, 32px) + clamp(120px, 19vh, 220px) + 24px);
  width: min(640px, calc((100% - 2 * var(--margine)) * .46));
  background: var(--bianco);
  padding: clamp(28px, 3.4vw, 52px);
}
.hero__frase {
  margin: 0 0 .5em;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 3.3vw, 52px); line-height: 1.05; text-wrap: balance;
}
.hero__carta > p { color: var(--tenue); }
.hero__carta .azioni { margin-top: 24px; }

/* Entrata, una volta sola al caricamento */
.hero__foto, .hero__carta { transition: opacity 1s ease, transform 1.3s cubic-bezier(.2,.7,.1,1); }
html.js .hero__foto { opacity: 0; transform: translateY(24px); }
html.js .hero__carta { opacity: 0; transform: translateY(40px); transition-delay: .2s; }
.pronta .hero__foto, .pronta .hero__carta { opacity: 1 !important; transform: none !important; }

/* ---------- Chi sono ---------- */
.chi {
  position: relative; overflow-x: clip;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px;
  padding: calc(var(--sezione) + 10vh) var(--margine) var(--sezione);
}
.chi .fantasma { top: calc(var(--sezione) - 2vh); right: -2vw; }
.chi__foto { grid-column: 1 / 7; grid-row: 1; margin: 0; position: relative; z-index: 1; }
.chi__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.chi__carta {
  grid-column: 6 / 13; grid-row: 1; align-self: end;
  position: relative; z-index: 2;
  margin-bottom: -6vh;
  background: var(--bianco);
  padding: clamp(28px, 4vw, 64px);
}

/* ---------- La gestione ---------- */
.gestione {
  margin: 0 var(--margine);
  padding: var(--sezione) clamp(24px, 5vw, 80px) calc(var(--sezione) + 8vw);
  background: var(--bianco);
}
.gestione__corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(32px, 6vw, 96px); }
.gestione__testa { position: sticky; top: 12vh; align-self: start; }
.gestione__testa > p:not(.titolo) { color: var(--tenue); }
.passi { list-style: none; margin: 0; padding: 0; }
.passo {
  display: grid; grid-template-columns: clamp(64px, 8vw, 120px) minmax(0, 1fr); gap: 0 24px;
  padding: 34px 0 28px;
  border-top: 1px solid var(--filo);
}
.passo:last-child { border-bottom: 1px solid var(--filo); }
.passo__n {
  grid-row: 1 / 3;
  font-family: var(--serif); font-size: clamp(64px, 7vw, 112px); line-height: .8;
  color: var(--lilla);
}
.passo h3 {
  margin: 4px 0 10px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1;
}
.passo p { margin: 0; color: var(--tenue); }

/* ---------- Il libro ---------- */
.libro {
  position: relative; height: 230vh; overflow-x: clip;
  margin-top: -6vw;
  background: var(--sabbia);
}
/* Bordi fatti di fogli sovrapposti che scorrono (main.js sposta ogni foglio) */
.pagine {
  position: absolute; left: -50%; width: 200%; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.pagine--sopra { bottom: 100%; height: clamp(90px, 12vw, 200px); }
.pagine--sotto { top: 100%; height: clamp(60px, 7vw, 120px); }
.foglio { stroke: rgba(59, 55, 52, .14); stroke-width: 1; vector-effect: non-scaling-stroke; will-change: transform; }
.pagine--sopra .foglio:nth-child(1) { fill: #f8f6f2; }
.pagine--sopra .foglio:nth-child(2) { fill: #efeae2; }
.pagine--sopra .foglio:nth-child(3) { fill: #e5ddd0; }
.pagine--sopra .foglio:nth-child(4) { fill: #d8cdbb; }
.pagine--sotto .foglio:nth-child(1) { fill: #e5ddd0; }
.foglio--ultimo { fill: var(--sabbia) !important; }

.libro__palco {
  position: sticky; top: 0; height: 100svh; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 64px);
  padding: 0 var(--margine);
  overflow: hidden;
}
.libro__sotto { font-family: var(--serif); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.25; max-width: 22em; }
.libro .btn { margin-top: 10px; }

/* Il libro in 3D: la copertina e tre fogli girano attorno al dorso */
.tomo {
  --w: clamp(200px, 19vw, 300px);
  --aperto: 0;
  justify-self: center;
  width: calc(var(--w) * 2); height: calc(var(--w) * 1.5);
  perspective: 2200px;
  transform: translateX(calc((1 - var(--aperto)) * -25%));
}
.tomo__libro { position: relative; margin-left: 50%; width: var(--w); height: 100%; transform-style: preserve-3d; }
.tomo__frontespizio, .tomo__foglio { position: absolute; inset: 0; }
.tomo__frontespizio {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 18px;
  padding: 14%;
  background: #fbfaf7;
  box-shadow: 0 30px 60px -34px rgba(59,55,52,.5), inset 10px 0 18px -12px rgba(59,55,52,.25);
}
.tomo__autore { font-size: clamp(10px, .8vw, 12px); color: var(--tenue); }
.tomo__titolo { font-family: var(--serif); font-size: clamp(24px, 2.3vw, 36px); line-height: 1; }
.tomo__sotto { font-size: clamp(9px, .7vw, 11px); line-height: 1.45; color: var(--tenue); }
.tomo__foglio {
  --g: 0;
  transform-origin: 0 50%;
  transform: rotateY(calc(var(--g) * -178deg));
  transform-style: preserve-3d;
}
.faccia {
  position: absolute; inset: 0; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.faccia--retro { transform: rotateY(180deg); }
.faccia--righe { background: #fbfaf7; box-shadow: inset 10px 0 18px -12px rgba(59,55,52,.2); }
.faccia--righe::before {
  content: ""; position: absolute; inset: 15% 14% 18%;
  background: repeating-linear-gradient(to bottom, transparent 0 13px, rgba(59,55,52,.13) 13px 14px);
}
.faccia--interno { background: var(--sabbia-chiara); }
.tomo__copertina img { object-fit: cover; box-shadow: 0 30px 60px -30px rgba(59,55,52,.55); background: none; }

/* ---------- Contatti ---------- */
.contatti {
  margin: 0 var(--margine);
  padding: var(--sezione) clamp(24px, 5vw, 80px);
  background: var(--lilla-chiaro);
}
.contatti__titolo {
  margin: 0 0 .4em; max-width: 9em;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(52px, 8vw, 140px); line-height: .95;
}
.contatti__invito { font-size: clamp(17px, 1.3vw, 20px); }
.contatti .azioni { margin: 28px 0 64px; }
.contatti__altri { display: flex; flex-wrap: wrap; gap: 24px 64px; margin: 0; }
.contatti__altri dt { font-size: 14px; color: var(--tenue); }
.contatti__altri dd { margin: 0; }

/* ---------- Piede ---------- */
.piede {
  position: relative; overflow: hidden;
  padding: 48px var(--margine) 0;
  font-size: 14px; color: var(--tenue);
  overflow: clip;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
}
.piede p { margin: 0; }
.piede__nome {
  flex-basis: 100%;
  font-family: var(--serif); font-size: 12.2vw; line-height: .8; white-space: nowrap;
  color: #a39b92;
  margin: 40px 0 -0.12em -0.04em;
}

/* ---------- WhatsApp fisso e cartellino bozza ---------- */
.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 18;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lilla); color: var(--inchiostro);
  box-shadow: 0 10px 30px -12px rgba(59,55,52,.45);
  transition: opacity .3s, transform .3s, background-color .2s, color .2s;
}
.wa svg { width: 26px; height: 26px; fill: currentColor; }
.wa:hover { background: var(--inchiostro); color: var(--bianco); }
html.js .wa:not(.wa--su) { opacity: 0; transform: translateY(16px); pointer-events: none; }

.bozza {
  position: fixed; left: 16px; bottom: 16px; z-index: 18; margin: 0;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.85); border: 1px solid var(--filo);
  color: var(--tenue); font-size: 12px;
  backdrop-filter: blur(6px);
}

/* ---------- Tablet e telefono ---------- */
@media (max-width: 900px) {
  .hero { min-height: 0; padding-bottom: 0; }
  .hero { padding-top: 84px; }
  .hero__testa { margin-bottom: 0; }
  .hero__verticale { display: none; }
  .hero__foto { grid-column: 1 / -1; height: 64svh; margin: -6svh calc(-1 * var(--margine)) 0; }
  .hero__foto::before {
    background: radial-gradient(ellipse 95% 72% at 50% 70%, #a39b92 0%, #a39b92 64%, rgba(163, 155, 146, .6) 82%, rgba(163, 155, 146, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
  }
  .hero__foto { overflow-x: clip; }
  .hero__foto img { left: 50%; transform: translateX(-50%); height: 78%; }
  .hero__carta { position: relative; top: auto; right: auto; width: auto; translate: none; grid-column: 2 / 13; grid-row: 3; margin: -12vh 0 0; }

  .chi { padding-top: var(--sezione); }
  .chi__foto { grid-column: 1 / 10; }
  .chi__carta { grid-column: 1 / 13; grid-row: 2; margin: -14vh 0 0 8%; }

  .gestione { margin: 0; }
  .gestione__corpo { grid-template-columns: 1fr; }
  .gestione__testa { position: static; margin-bottom: 32px; }

  .libro { height: 220vh; }
  .libro__palco { grid-template-columns: 1fr; align-content: center; gap: 28px; padding-top: 60px; }
  .tomo { --w: min(40vw, 190px); }


  .contatti { margin: 0; }

  .bozza { position: absolute; left: 16px; bottom: auto; top: 22px; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .btn { width: 100%; justify-content: center; }
  .libro__palco p:not(.libro__sotto) { display: none; }
  .libro__palco .titolo { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .hero__foto, html.js .hero__carta { opacity: 1; transform: none; transition: none; }
  .fantasma, .foglio { transform: none !important; }
}