/* ==========================================================================
   De Caires Srl — foglio di stile unico
   ==========================================================================
   Una sola idea, portata fino in fondo: la pagina è divisa in due. A sinistra
   il bianco di De Caires Data, a destra il nero di De Caires Classics, e la
   cucitura cade sempre sul 50% esatto — nella foto, nel marchio, nei due
   pannelli. Il marchio "De Caires" è stampato due volte, in nero e in bianco,
   e ciascuna copia è ritagliata sulla propria metà: è la società che si legge
   allo stesso modo da entrambi i lati.

   Tipografia identica ai due siti figli (Cormorant Garamond + DM Sans). L'oro
   compare solo nei micro-testi e nei filetti: qui il contrasto è il soggetto,
   e l'oro deve restare un sussurro.
   ========================================================================== */

@import url('fonts.css');

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a { color: inherit; }
ul { list-style: none; }

/* ---- Token ---- */
:root {
  --black: #0A0A0A;
  --white: #FFFFFF;
  --cream: #F5F0E8;
  --gold: #B8960C;
  --gold-ink: #7E6400;   /* oro leggibile su bianco: 5,7:1 */
  --gold-lite: #D8B43A;  /* oro leggibile su nero */
  --ink-soft: #4A4A4A;
  --ink-soft-inv: rgba(245, 240, 232, 0.72);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max-width: 1160px;
  --space-s: clamp(0.75rem, 2vw, 1rem);
  --space-m: clamp(1.5rem, 4vw, 2.5rem);
  --space-l: clamp(4rem, 9vw, 7.5rem);
}

/* ---- Base ---- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.65;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }

p { color: var(--ink-soft); }

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-m);
}

.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.85rem;
}

.rule {
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  border: none;
  margin: 1.25rem 0;
}

.rule--center { margin-inline: auto; }

/* ---- Selettore lingua ---- */
.lang {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* Galleggia sopra la metà nera: si schiarisce da sé. */
  mix-blend-mode: difference;
}

.lang button {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
  transition: color 0.2s ease;
}

.lang button:hover,
.lang button[aria-pressed='true'] { color: #FFFFFF; }

.lang span {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  user-select: none;
}

/* ==========================================================================
   Hero: la foto a tutta pagina, il marchio a cavallo della cucitura
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Fondo di sicurezza: se la foto tarda o manca, la cesura resta.
     L'orientamento segue la foto: Umberto a sinistra sul nero,
     Francesca a destra sul bianco. */
  background: linear-gradient(to right, var(--black) 0 50%, var(--white) 50% 100%);
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* object-fit:cover con posizione centrata ritaglia in modo simmetrico:
   la cucitura della foto resta quindi sempre sul centro esatto della
   pagina, qualunque sia il rapporto della finestra. */
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Velo di protezione: scurisce il centro a sinistra e lo schiarisce a
   destra, così il marchio resta leggibile su entrambe le metà senza
   spegnere la foto ai bordi. I due volti stanno verso l'esterno, quindi
   il velo cade sullo sfondo e non sui visi. */
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 32% 38% at 28% 50%,
      rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.34) 58%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(ellipse 32% 38% at 72% 50%,
      rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.34) 58%, rgba(255, 255, 255, 0) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-m);
}

/* Il marchio, due volte: la copia bianca mostra solo la metà sinistra (che
   cade sul nero), quella nera solo la metà destra (che cade sul bianco).
   Stesso disegno, stesse dimensioni (634x176), quindi le due metà
   combaciano al pixel sulla cucitura. */
.splitmark {
  position: relative;
  width: min(520px, 76vw);
  margin: 0 auto 2rem;
  aspect-ratio: 634 / 176;
}

.splitmark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.splitmark__light { clip-path: inset(0 50% 0 0); }
.splitmark__dark  { clip-path: inset(0 0 0 50%); }

/* Filetto d'oro sulla cucitura: tiene insieme le due metà. */
.splitmark::after {
  content: '';
  position: absolute;
  top: -14%;
  bottom: -14%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, rgba(184, 150, 12, 0.85) 30%, rgba(184, 150, 12, 0.85) 70%, transparent);
}

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  letter-spacing: 0.03em;
  line-height: 1.45;
}

/* La frase attraversa la cucitura: metà scritta in nero, metà in bianco.
   Due copie sovrapposte e ritagliate, come il marchio. */
.hero__tagline {
  position: relative;
  display: inline-block;
}

.hero__tagline span {
  display: block;
}

/* Base chiara, perché la metà sinistra è nera; sopra, la stessa frase in
   nero ritagliata sulla metà destra. */
.tag__light { color: var(--cream); }

.tag__dark {
  position: absolute;
  inset: 0;
  color: var(--black);
  clip-path: inset(0 0 0 50%);
}

.hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lite);
  mix-blend-mode: difference;
}

/* ==========================================================================
   Racconto
   ========================================================================== */
.story {
  padding: var(--space-l) 0;
  background: var(--white);
  border-bottom: 1px solid rgba(184, 150, 12, 0.22);
}

.story__inner {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.story p {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.9;
  margin-bottom: 1.4rem;
}

.story p:last-child { margin-bottom: 0; }

.story strong {
  font-weight: 400;
  color: var(--black);
}

/* ==========================================================================
   I due volti
   ========================================================================== */
.faces__head {
  padding: var(--space-l) 0 var(--space-m);
  text-align: center;
}

.faces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* nessun gap: le due metà si toccano, come nella foto */
}

.face {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.75rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
  text-decoration: none;
  transition: background 0.45s ease, color 0.45s ease;
}

.face__mark {
  height: clamp(2.1rem, 3.6vw, 2.9rem);
  width: auto;
  margin-bottom: 0.4rem;
}

/* Le due copie del marchio si scambiano al passaggio del mouse, perché il
   pannello si inverte. invert(1) non tocca il canale alfa: il tratto passa
   da nero a bianco (e viceversa) e lo sfondo resta trasparente, quindi basta
   un solo file per marchio invece di due. */
.face__mark--alt {
  display: none;
  filter: invert(1);
}

.face h3 { letter-spacing: 0.01em; }

.face p {
  font-size: 0.95rem;
  line-height: 1.85;
  flex: 1;
}

.face__go {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.25s ease;
}

.face__go::after { content: '\2192'; }
.face:hover .face__go { gap: 0.95rem; }

/* --- metà chiara: De Caires Data --- */
.face--light {
  background: var(--white);
  color: var(--black);
}

.face--light .eyebrow { color: var(--gold-ink); }
.face--light .rule { background: var(--gold); }
.face--light p { color: var(--ink-soft); }
.face--light .face__go { color: var(--gold-ink); }

/* --- metà scura: De Caires Classics --- */
.face--dark {
  background: var(--black);
  color: var(--cream);
}

.face--dark .eyebrow { color: var(--gold-lite); }
.face--dark .rule { background: var(--gold-lite); }
.face--dark h3 { color: var(--cream); }
.face--dark p { color: var(--ink-soft-inv); }
.face--dark .face__go { color: var(--gold-lite); }

/* L'inversione al passaggio del mouse: ogni pannello diventa l'altro.
   È il gesto della pagina, ripetuto in piccolo. */
@media (hover: hover) {
  .face--light:hover { background: var(--black); color: var(--cream); }
  .face--light:hover p { color: var(--ink-soft-inv); }
  .face--light:hover .eyebrow,
  .face--light:hover .face__go { color: var(--gold-lite); }
  .face--light:hover .rule { background: var(--gold-lite); }

  .face--dark:hover { background: var(--white); color: var(--black); }
  .face--dark:hover h3 { color: var(--black); }
  .face--dark:hover p { color: var(--ink-soft); }
  .face--dark:hover .eyebrow,
  .face--dark:hover .face__go { color: var(--gold-ink); }
  .face--dark:hover .rule { background: var(--gold); }

  .face:hover .face__mark { display: none; }
  .face:hover .face__mark--alt { display: block; }
}

/* ==========================================================================
   Piè di pagina
   ========================================================================== */
.footer {
  background: var(--white);
  border-top: 1px solid rgba(184, 150, 12, 0.22);
  padding: var(--space-l) 0 var(--space-m);
  text-align: center;
}

.footer__mark {
  height: 2.2rem;
  width: auto;
  margin: 0 auto 1.5rem;
}

.footer__where {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.footer__links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1.75rem 0;
}

.footer__links a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer__links a:hover { opacity: 0.6; }

.footer__legal {
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  padding-top: var(--space-s);
  margin-top: var(--space-s);
  font-size: 0.72rem;
  line-height: 1.9;
  color: rgba(10, 10, 10, 0.45);
}

/* ==========================================================================
   Adattamento
   ========================================================================== */
@media (max-width: 860px) {
  /* In verticale la foto verrebbe ritagliata fino a perdere le due teste:
     meglio mostrarla intera, con la cesura che continua sotto. */
  .hero {
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--white);
  }

  .hero__photo {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .hero__photo::after { display: none; }

  .hero__inner {
    width: 100%;
    padding: clamp(2.25rem, 8vw, 3.5rem) var(--space-m) clamp(2.75rem, 9vw, 4rem);
    background: linear-gradient(to right, var(--black) 0 50%, var(--white) 50% 100%);
  }

  .hero__scroll { display: none; }

  /* Su una colonna sola l'ordine di lettura diventa verticale: la metà
     scura va sopra, come nella foto va a sinistra. */
  .faces { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Sotto questa soglia la frase su due colori diventa illeggibile:
     si torna a una riga sola, in nero su bianco. */
  .hero__inner { background: var(--white); }
  .splitmark__light { display: none; }
  .splitmark__dark { clip-path: none; }
  .splitmark::after { display: none; }
  .tag__light { color: var(--black); }
  .tag__dark { display: none; }
}