/* Il giardino che sboccia */
:root {
  --carta: #f4ede0;              /* the page and the opening */
  --inchiostro: #1f3a2a;         /* the words */
  --inchiostro-tenue: rgba(31, 58, 42, 0.62);
  --accento: #c8462f;            /* the brand and the small details */
  --aiuola-poppy: #f6eee1;       /* the background of each bed */
  --aiuola-daisy: #e8efdc;
  --aiuola-tulip: #f8eada;
  --aiuola-cosmos: #efe6f1;
  --papavero: #d9412b;           /* the poppy */
  --papavero-cuore: #2a2620;
  --margherita: #fffdf5;         /* the daisy */
  --margherita-cuore: #f1b52f;
  --tulipano: #eaa424;           /* the tulip */
  --cosmos: #df5a9b;             /* the cosmos */
  --cosmos-cuore: #f3c534;
  --stelo: #4d7838;              /* stems, leaves and buds */
  --foglia: #6b9b45;
  --foglia-scura: #47752f;
  --bocciolo: #5d8b3c;
  --ape: #f1b52f;                /* the bees and the butterflies */
  --farfalla: #e8733a;
  --suolo: #5a3d2b;              /* the strip of earth at the bottom */
  --suolo-chiaro: #7c5841;
  --fine: #1f3a2a;               /* the closing band */
  --alto: 100vh;
  --alto-grande: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}
/* the still stage is as tall as the screen with the Safari bar pulled back */
@supports (height: 100lvh) {
  :root { --alto-grande: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  background: var(--carta);
}
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  color: var(--inchiostro);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }

/* ---------------------------------------------------------------- the header */
.testata {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 44px);
  pointer-events: none;
}
.testata > * { pointer-events: auto; }
.marchio {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 21px;
  font-weight: 650;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 40;
  letter-spacing: -0.01em;
}
.marchio span {
  font-style: italic;
  font-weight: 400;
  color: var(--accento);
}
.menu {
  display: flex;
  gap: 6px;
}
.menu a {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 560;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
  .menu a:hover {
    background: var(--inchiostro);
    color: var(--carta);
  }
}

/* ---------------------------------------------------------------- the opening */
.apertura {
  position: relative;
  min-height: var(--alto-grande);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px clamp(16px, 6vw, 88px) 170px;
  background: var(--carta);
  overflow: hidden;
}
.apertura__etichetta {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accento);
}
.apertura__titolo {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(54px, 11vw, 168px);
  font-weight: 560;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.apertura__titolo em {
  font-weight: 380;
  color: var(--accento);
}
.riga {
  display: block;
  overflow: hidden;
  padding: 0.04em 0 0.1em;
  margin-bottom: -0.1em;
}
.riga > span { display: inline-block; }
.apertura__testo {
  max-width: 30ch;
  margin: 26px 0 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--inchiostro-tenue);
}
.apertura__cenno {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 34px 0 0;
  font-size: 14px;
  font-weight: 600;
}
.apertura__cenno svg {
  width: 16px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.apertura__terra {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  overflow: visible;
}

/* ---------------------------------------------------------------- the beds */
.aiuola {
  position: relative;
  height: calc(var(--alto-grande) * 2.4);
}
.aiuola--poppy { background: var(--aiuola-poppy); }
.aiuola--daisy { background: var(--aiuola-daisy); }
.aiuola--tulip { background: var(--aiuola-tulip); }
.aiuola--cosmos { background: var(--aiuola-cosmos); }
.palco {
  position: sticky;
  top: 0;
  height: var(--alto-grande);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.scheda {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: 'latino latino' 'nome testo' 'nome dati';
  column-gap: clamp(24px, 5vw, 80px);
  align-items: end;
  padding: 92px clamp(16px, 6vw, 88px) 0;
}
.scheda__latino {
  grid-area: latino;
  margin: 0 0 6px;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--accento);
}
.scheda__nome {
  grid-area: nome;
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(46px, 7.4vw, 112px);
  font-weight: 560;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.scheda__testo {
  grid-area: testo;
  max-width: 34ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--inchiostro-tenue);
}
.scheda__dati {
  grid-area: dati;
  display: flex;
  gap: 28px;
  margin: 16px 0 0;
}
.scheda__dati div { margin: 0; }
.scheda__dati dt {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}
.scheda__dati dd {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 600;
}
.giardino {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

/* ---------------------------------------------------------------- the drawing */
.stelo {
  fill: none;
  stroke: var(--stelo);
  stroke-linecap: round;
}
.foglia { fill: var(--foglia); }
.foglia__nervo {
  fill: none;
  stroke: var(--foglia-scura);
  stroke-width: 1;
  stroke-linecap: round;
}
.bocciolo { fill: var(--bocciolo); }
.bocciolo--scuro { fill: var(--foglia-scura); }
.petalo--poppy { fill: var(--papavero); }
.petalo--poppy.petalo--dietro { fill: color-mix(in srgb, var(--papavero) 80%, #5a120a); }
.cuore--poppy { fill: var(--papavero-cuore); }
.raggi--poppy {
  fill: none;
  stroke: var(--papavero-cuore);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.petalo--daisy {
  fill: var(--margherita);
  stroke: rgba(31, 58, 42, 0.16);
  stroke-width: 0.8;
}
.cuore--daisy { fill: var(--margherita-cuore); }
.petalo--tulip { fill: var(--tulipano); }
.petalo--tulip.petalo--dietro { fill: color-mix(in srgb, var(--tulipano) 72%, #7a3410); }
.petalo--cosmos { fill: var(--cosmos); }
.petalo--cosmos.petalo--dietro { fill: color-mix(in srgb, var(--cosmos) 82%, #4a0a2a); }
.cuore--cosmos { fill: var(--cosmos-cuore); }
.grana {
  fill: rgba(0, 0, 0, 0.18);
}
.presa {
  fill: transparent;
  cursor: pointer;
}
.suolo { fill: var(--suolo); }
.suolo__sasso { fill: var(--suolo-chiaro); }
.ape__corpo { fill: var(--ape); }
.ape__righe { fill: var(--papavero-cuore); }
.ali { fill: rgba(255, 255, 255, 0.78); stroke: rgba(31, 58, 42, 0.35); stroke-width: 0.8; }
.farfalla__ala { fill: var(--farfalla); }
.farfalla__ala--sotto { fill: color-mix(in srgb, var(--farfalla) 75%, #5a1c06); }
.farfalla__macchia { fill: rgba(255, 250, 235, 0.9); }
.farfalla__corpo { fill: var(--papavero-cuore); }
.antenne {
  fill: none;
  stroke: var(--papavero-cuore);
  stroke-width: 1;
  stroke-linecap: round;
}
.seme { fill: var(--suolo-chiaro); }
.germoglio {
  fill: none;
  stroke: var(--stelo);
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* ---------------------------------------------------------------- the close */
.fine {
  position: relative;
  min-height: calc(var(--alto) * 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 80px 16px;
  text-align: center;
  background: var(--fine);
  color: var(--carta);
}
.fine__frase {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(40px, 7vw, 104px);
  font-weight: 540;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.fine__frase em {
  display: block;
  font-weight: 360;
  color: var(--margherita-cuore);
}
.fine__bottone {
  position: relative;
  display: inline-flex;
  padding: 17px 32px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 640;
  color: var(--inchiostro);
  isolation: isolate;
}
.fine__bottone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--margherita-cuore);
  transition: transform 0.6s cubic-bezier(0.34, 1.8, 0.5, 1);
}
.fine__bottone span {
  display: inline-block;
  transition: letter-spacing 0.5s cubic-bezier(0.34, 1.6, 0.5, 1);
}
@media (hover: hover) {
  .fine__bottone:hover::before { transform: scale(1.08, 1.16); }
  .fine__bottone:hover span { letter-spacing: 0.04em; }
}

/* ---------------------------------------------------------------- the phone */
@media (max-width: 720px) {
  .menu { display: none; }
  .marchio { font-size: 19px; }
  .apertura { padding-bottom: 150px; }
  .apertura__terra { height: 130px; }
  .scheda {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'latino' 'nome' 'testo' 'dati';
    padding-top: 74px;
  }
  .scheda__latino { font-size: 15px; }
  .scheda__nome { margin-bottom: 10px; }
  .scheda__testo { font-size: 15px; }
  .scheda__dati { margin-top: 12px; gap: 22px; }
  .scheda__dati dd { font-size: 14px; }
}

/* ---------------------------------------------------------------- the low screen */
/* la casella dell'anteprima sul telefono (341 per 410): l'apertura, con la terra e i germogli, sta tutta in uno schermo */
@media (max-height: 520px) {
  .apertura { padding-top: 62px; padding-bottom: 100px; }
  .apertura__terra { height: 96px; }
  .apertura__etichetta { margin-bottom: 10px; font-size: 12px; }
  .apertura__titolo { font-size: clamp(42px, min(11vw, 11vh), 168px); }
  .apertura__testo { max-width: 34ch; margin-top: 12px; font-size: 15px; }
  .apertura__cenno { margin-top: 14px; }
}