/* =====================================================================
   home.css — Stili SPECIFICI della homepage (index.html)
   ---------------------------------------------------------------------
   Le regole CONDIVISE da tutte le pagine (top-bar, menu, footer, link,
   colori/token, font) stanno in base.css. Qui c'è solo ciò che riguarda
   la home: hero, sezione "doppia natura", manifesto, citazione, ecc.

   ORDINE DEL FILE (in sequenza, come si scorre la pagina):
     1. Utility condivise nella home (contenitore, link a freccia)
     2. HERO ............... la prima schermata
     3. DOPPIA NATURA ...... le due schede Teoria / Pratica affiancate
     4. MANIFESTO .......... la fascia scura "ad effetto"
     5. CITAZIONE .......... la frase di Platone
     6. APPROCCIO .......... il testo editoriale a due colonne
     7. IL NOME ............ la nota finale sul nome "jabbah"
     8. RESPONSIVE ......... adattamenti per tablet e telefono

   NOTA SUI COLORI: i valori non sono mai scritti "a mano" qui; si usano
   le variabili --c-* (scala fredda blu/ardesia) e --w-* (accenti caldi
   terracotta/ambra) e i ruoli semantici (--ink, --link, --text-soft…),
   tutti definiti in base.css. Cambiando lì, cambia ovunque.
   ===================================================================== */


/* =====================================================================
   1. UTILITY CONDIVISE NELLA HOME
   ===================================================================== */

/* .shell — contenitore centrato a larghezza massima fissa (--shell),
   con i margini laterali (--gutter) che si restringono sul mobile.
   Si applica ai blocchi che devono allinearsi alla stessa "colonna". */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* .figure — contenitore di un'immagine ornamentale (la sfera armillare).
   Azzera i margini di default del tag <figure>. */
.figure { margin: 0; }

/* .figure figcaption — didascalia sotto la figura.
   (Al momento le didascalie sono state rimosse dall'HTML; la regola
   resta qui pronta all'uso se in futuro si volesse rimettere una
   scritta tipo "Fig. I · La sfera armillare".) */
.figure figcaption {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 1rem;
}
.figure figcaption b { color: var(--text-mute); font-weight: 700; }

/* .arrow-link — link testuale con una freccia "→" che scivola a destra
   al passaggio del mouse. Usato per i rimandi tra sezioni ("The theory →").
   Il colore rosso/terracotta è ereditato dalla regola generale dei link
   in base.css; qui si definisce solo peso, dimensione e micro-animazione. */
.arrow-link {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--link);
  display: inline-flex;     /* tiene testo e freccia sulla stessa riga */
  align-items: center;
  gap: 0.5em;
}
/* .arr — la freccia dentro al link; transition per lo scorrimento */
.arrow-link .arr { transition: transform 0.2s ease; }
.arrow-link:hover .arr { transform: translateX(4px); }   /* scivola a destra */


/* =====================================================================
   2. HERO — la prima schermata
   ---------------------------------------------------------------------
   Struttura HTML:
     section.hero
       img.hero__watermark      (filigrana grande sullo sfondo)
       div.hero__grid           (griglia a 2 colonne: testo | figura)
         div.hero__text         (occhiello, titolo, sommario, link)
         figure.hero__figure    (la sfera armillare "Fig. I")
   ===================================================================== */

/* .hero — la sezione contenitore; overflow:hidden taglia la filigrana
   che sborda, il bordo inferiore la separa dalla sezione successiva. */
.hero {
  position: relative;          /* àncora per la filigrana in position:absolute */
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

/* .hero__grid — la griglia interna a due colonne.
   1.15fr | 0.85fr = il testo occupa un po' più della figura.
   I clamp() rendono i padding fluidi tra mobile e desktop. */
.hero__grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter) clamp(3rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

/* .hero__text — la colonna sinistra (tutto il testo dell'hero). */
.hero__text {}

/* .hero__eyebrow — spazio sotto l'occhiello "An astrological hypothesis".
   Lo stile dell'occhiello (.eyebrow) è in base.css. */
.hero__eyebrow { margin-bottom: 1.6rem; }

/* .hero h1 — il titolone "Twelve bodies, twelve signs…".
   font-size in clamp(): scala da 2.6rem (mobile) fino a 5rem (desktop).
   line-height stretto (1.02) e letter-spacing negativo per un titolo
   serif compatto e d'impatto. text-wrap: balance distribuisce le righe. */
.hero h1 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.6rem;
  text-wrap: balance;
}
/* la parte in corsivo del titolo ("one architecture.") in terracotta */
.hero h1 em { font-style: italic; color: var(--w-terra); }

/* .hero__lede — il paragrafo-sommario sotto al titolo, in corsivo serif.
   max-width in "ch" = limita la riga a ~40 caratteri per leggibilità. */
.hero__lede {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 40ch;
  margin: 0 0 2.2rem;
}

/* .hero__paths — la riga dei due link ("The theory →" / "The AI horoscope →").
   flex con wrap: vanno a capo se non c'è spazio. Filetto sopra come separatore. */
.hero__paths {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.2rem;            /* riga 1rem, colonna 2.2rem */
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

/* .hero__figure — la colonna destra con la sfera armillare. */
.hero__figure {
  position: relative;
  justify-self: center;        /* centra la figura nella sua cella */
}
/* l'immagine SVG dentro la figura: larghezza fluida + ombra morbida */
.hero__figure img {
  width: clamp(240px, 30vw, 380px);
  filter: drop-shadow(0 12px 30px rgba(30, 37, 51, 0.10));
}

/* .hero__watermark — la grande filigrana decorativa sullo sfondo dell'hero.
   position:absolute + z-index:-1 la mandano DIETRO al contenuto.
   opacity bassissima (0.05) = appena percettibile, quasi un fantasma. */
.hero__watermark {
  position: absolute;
  left: -14%;                  /* sborda a sinistra */
  top: 50%;
  transform: translateY(-50%); /* centratura verticale */
  width: min(60vw, 720px);
  opacity: 0.05;
  pointer-events: none;        /* non intercetta i click */
  z-index: -1;
}


/* =====================================================================
   3. DOPPIA NATURA — le due schede "Teoria" e "Pratica" affiancate
   ---------------------------------------------------------------------
   È il cuore della pagina: mette in evidenza le due anime del progetto.
   Struttura HTML:
     section.dual
       div.dual__head                       (occhiello + titolo centrati)
       div.dual__pair                       (griglia a 2 colonne)
         article.path-card.path-card--theory    (I — chiara, accento oro)
         article.path-card.path-card--practice  (II — scura, accento terracotta)
   ===================================================================== */

/* .dual — la sezione; fondo azzurrino freddo per staccarla dall'hero. */
.dual {
  background: var(--paper-cool);
  border-bottom: 1px solid var(--rule);
}

/* .dual__head — l'intestazione centrata sopra le due schede. */
.dual__head {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  text-align: center;
}
/* centra l'occhiello (.eyebrow è inline-flex, va centrato da solo) */
.dual__head .eyebrow { justify-content: center; margin-bottom: 1.2rem; }
/* il titolo "Two natures, one circle." */
.dual__head h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}
.dual__head h2 em { font-style: italic; }

/* .dual__pair — la griglia che mette le due schede FIANCO A FIANCO.
   1fr 1fr = due colonne uguali. Sul mobile diventa 1 colonna (vedi §8). */
.dual__pair {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* .path-card — la singola scheda (vale per entrambe).
   display:flex column + min-height uguale = le due schede hanno la
   stessa altezza e il piede (link/bottone) resta in fondo (margin-top:auto). */
.path-card {
  position: relative;          /* àncora per la decorazione d'angolo */
  overflow: hidden;            /* taglia la decorazione che sborda */
  padding: clamp(2rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  min-height: 30rem;
  border: 1px solid var(--rule);
}
/* --theory: la scheda I, carta calda con filo d'oro in alto */
.path-card--theory {
  background: var(--paper-warm);
  border-top: 3px solid var(--w-amber);
}
/* --practice: la scheda II, fondo inchiostro con filo terracotta in alto;
   il testo qui è chiaro (--c-powder) perché sta su fondo scuro */
.path-card--practice {
  background: var(--c-ink);
  border-top: 3px solid var(--w-terra);
  color: var(--c-powder);
}

/* .path-card__deco — l'ornamento (orbite/orologio) nell'angolo in basso a destra
   di ogni scheda, mezzo nascosto. Decorativo, non cliccabile. */
.path-card__deco {
  position: absolute;
  right: -16%;
  bottom: -12%;
  width: 62%;
  max-width: 300px;
  opacity: 0.5;
  pointer-events: none;
}
/* sulla scheda scura l'ornamento è un po' più tenue */
.path-card--practice .path-card__deco { opacity: 0.34; }

/* .path-card__num — il grande numero romano I / II in corsivo, color oro. */
.path-card__num {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--w-amber);
  margin-bottom: 1.2rem;
}
/* sulla scheda scura il numero è oro più chiaro (miele) per contrasto */
.path-card--practice .path-card__num { color: var(--w-honey); }

/* .path-card__kicker — l'etichettina maiuscola ("The theory" / "The practice"). */
.path-card__kicker {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 0.8rem;
}
.path-card--practice .path-card__kicker { color: var(--c-haze); }

/* h3 dentro la scheda — il titolo della scheda */
.path-card h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1.1rem;
  max-width: 16ch;
}
.path-card--practice h3 { color: var(--w-cream); }   /* chiaro su fondo scuro */
.path-card h3 em { font-style: italic; }

/* p dentro la scheda — il corpo testo */
.path-card p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 1rem;
  max-width: 38ch;
}
.path-card--practice p { color: var(--c-haze); }
/* le parole in grassetto dentro il testo */
.path-card strong { font-weight: 600; color: var(--ink); }
.path-card--practice strong { color: var(--w-cream); }

/* .path-card__foot — il piede della scheda (link o bottone).
   margin-top:auto lo spinge in fondo, così entrambe le schede hanno il
   piede allineato anche se i testi sono di lunghezza diversa. */
.path-card__foot { margin-top: auto; padding-top: 1.6rem; }
/* sulla scheda scura il link a freccia è color miele */
.path-card--practice .arrow-link { color: var(--w-honey); }
.path-card--practice .arrow-link:hover { color: var(--w-cream); }

/* .btn-solid — il bottone pieno terracotta ("Request your chart").
   Usato nella scheda Pratica come invito all'azione principale. */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--w-terra);
  color: var(--w-cream);
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.8rem 1.4rem;
  border-radius: 3px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn-solid:hover {
  background: var(--w-brick);  /* mattone, più scuro */
  color: var(--w-cream);
  transform: translateY(-1px); /* si solleva di 1px */
}
.btn-solid .arr { transition: transform 0.2s ease; }
.btn-solid:hover .arr { transform: translateX(3px); }


/* =====================================================================
   4. MANIFESTO — la fascia scura "ad effetto"
   ---------------------------------------------------------------------
   Il momento cinematografico della pagina: fondo inchiostro, sfera
   armillare luminosa di lato, titolo con corsivo color miele.
   Struttura HTML:
     section.manifesto
       img.manifesto__bg          (sfera armillare ampia, sfondo)
       div.manifesto__inner       (griglia 2 colonne: testo | figura)
         div.manifesto__text
         figure.manifesto__figure (la sfera "Fig. II")
   ===================================================================== */

/* .manifesto — sezione a tutta larghezza, fondo inchiostro, testo chiaro. */
.manifesto {
  background: var(--c-ink);
  color: var(--c-powder);
  position: relative;
  overflow: hidden;
}

/* .manifesto__bg — la grande sfera armillare di sfondo, a destra, semi-trasparente. */
.manifesto__bg {
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: min(70vw, 760px);
  opacity: 0.14;
  pointer-events: none;
}

/* .manifesto__inner — la griglia interna (testo a sinistra, figura a destra).
   z-index:1 la tiene SOPRA alla sfera di sfondo. */
.manifesto__inner {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* qui l'occhiello è color miele (sta su fondo scuro) */
.manifesto .eyebrow { color: var(--w-honey); margin-bottom: 1.4rem; }
/* il titolo "An old circle, read with new eyes." */
.manifesto h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--w-cream);
  margin: 0 0 1.6rem;
  text-wrap: balance;
}
.manifesto h2 em { font-style: italic; color: var(--w-honey); }
/* i paragrafi del manifesto, in grigio-azzurro chiaro */
.manifesto p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--c-haze);
  margin: 0 0 1.1rem;
  max-width: 44ch;
}
.manifesto strong { color: var(--w-cream); font-weight: 600; }
.manifesto .arrow-link { color: var(--w-honey); margin-top: 0.6rem; }
.manifesto .arrow-link:hover { color: var(--w-cream); }
/* la figura (sfera Fig. II) nella colonna destra */
.manifesto__figure { justify-self: center; }
.manifesto__figure img { width: clamp(220px, 26vw, 360px); }
/* la didascalia eventuale, in toni scuri-coerenti */
.manifesto__figure figcaption { color: var(--c-slate); }
.manifesto__figure figcaption b { color: var(--c-haze); }


/* =====================================================================
   5. CITAZIONE — la frase di Platone
   ---------------------------------------------------------------------
   Struttura HTML:
     section.quote
       div.quote__inner
         div.quote__mark    (le grandi virgolette aperte)
         blockquote         (il testo della citazione)
         p.quote__attr      (l'attribuzione "— Plato, Phaedrus")
   ===================================================================== */

/* .quote — fascia su carta calda, centrata. */
.quote {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule-warm);
}
.quote__inner {
  max-width: 860px;            /* colonna stretta = riga di lettura comoda */
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
  text-align: center;
}
/* .quote__mark — le grandi virgolette decorative, color ambra. */
.quote__mark {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 4rem;
  line-height: 0.5;
  color: var(--w-amber);
  margin-bottom: 1.5rem;
  height: 2rem;
}
/* il testo citato, in corsivo serif grande */
.quote blockquote {
  margin: 0;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;           /* evita righe orfane brutte */
}
/* .quote__attr — l'attribuzione sotto la citazione */
.quote__attr {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  margin-top: 1.8rem;
}
.quote__attr a { color: var(--link); }   /* il link "Phaedrus" in terracotta */


/* =====================================================================
   6. APPROCCIO — il testo editoriale a due colonne
   ---------------------------------------------------------------------
   Struttura HTML:
     section.approach
       div.approach__grid
         p.approach__lead     (la frase-guida a sinistra, "appiccicata")
         div.approach__body   (4 paragrafi su 2 colonne)
   ===================================================================== */

.approach {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
/* .approach__grid — griglia: colonna stretta (frase-guida) + colonna larga (testo).
   0.8fr | 1.2fr. Sul mobile diventa una colonna sola (vedi §8). */
.approach__grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6.5rem) var(--gutter);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  background-color: var(--white);
}
/* .approach__lead — la frase-guida grande in corsivo indaco.
   position:sticky + top:90px = resta "appiccicata" sotto la barra mentre
   si scorre il testo accanto (effetto editoriale). */
.approach__lead {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--w-brick);
  margin: 0;
  align-self: start;
  position: sticky;
  top: 90px;
}
/* .approach__body — il blocco di testo, suddiviso in DUE colonne giornale.
   columns: 2 = il browser spezza i paragrafi su due colonne automaticamente. */
.approach__body {
  columns: 2;
  column-gap: 2.6rem;
}
.approach__body p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.97rem;
  line-height: 1.78;
  color: var(--text-soft);
  margin: 0 0 1em;
  break-inside: avoid;         /* un paragrafo non si spezza tra due colonne */
}
.approach__body p:first-child { margin-top: 0; }
.approach__body strong { color: var(--ink); font-weight: 600; }


/* =====================================================================
   7. IL NOME — la nota finale "Why jabbah project"
   ---------------------------------------------------------------------
   Struttura HTML:
     section.name-note
       div.name-note__inner
         img.name-note__mark   (piccola sfera armillare a sinistra)
         div                   (titolo + 2 paragrafi)
   ===================================================================== */

.name-note { background: var(--bg); }
/* griglia: la figurina (auto = larga quanto serve) + il testo (1fr) */
.name-note__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
/* .name-note__mark — la piccola sfera armillare a fianco del testo */
.name-note__mark {
  width: 130px;
  opacity: 0.9;
}
/* il titolo "Why jabbah project" in corsivo */
.name-note h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--ink);
  margin: 0 0 1.1rem;
}
/* la parte <em> qui è il NOME "jabbah project": dritto e in grassetto */
.name-note h3 em { font-style: normal; font-weight: 600; }
.name-note p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-soft);
  margin: 0 0 0.9rem;
  max-width: 62ch;
}
.name-note strong { color: var(--ink); font-weight: 600; }


/* =====================================================================
   8. RESPONSIVE — adattamenti per schermi stretti
   ---------------------------------------------------------------------
   Le sezioni nascono a 2 colonne (desktop). Qui sotto, man mano che lo
   schermo si restringe, le facciamo diventare a 1 colonna impilata.
   ===================================================================== */

/* --- TABLET / schermi medi (sotto i 900px) --- */
@media (max-width: 900px) {
  /* HERO: una colonna; la figura va SOPRA il testo (order:-1) */
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__figure { order: -1; }
  .hero__figure img { width: clamp(200px, 50vw, 300px); }

  /* MANIFESTO: una colonna; anche qui la figura va sopra */
  .manifesto__inner { grid-template-columns: 1fr; }
  .manifesto__figure { order: -1; }

  /* APPROCCIO: una colonna; la frase-guida smette di essere "appiccicata" */
  .approach__grid { grid-template-columns: 1fr; }
  .approach__lead { position: static; }
}

/* --- TELEFONO / schermi piccoli (sotto i 760px) --- */
@media (max-width: 760px) {
  /* DOPPIA NATURA: le due schede si impilano una sotto l'altra */
  .dual__pair { grid-template-columns: 1fr; }
  .path-card { min-height: 0; }   /* niente altezza minima forzata */

  /* APPROCCIO: il testo torna a UNA sola colonna (più leggibile) */
  .approach__body { columns: 1; }

  /* IL NOME: figurina e testo si impilano; la sfera si rimpicciolisce */
  .name-note__inner { grid-template-columns: 1fr; }
  .name-note__mark { width: 96px; }
}