/* Il caffè allo scroll */
:root {
  --fondo: #22170f;              /* the page, a dark roast */
  --fondo-palco: #2b1d14;        /* behind the cup */
  --carta: #f3e8d8;              /* the words */
  --carta-tenue: rgba(243, 232, 216, 0.64);
  --accento: #e8894a;            /* the brand and the small details */
  --tazza: #f6f1ea;              /* the ceramic */
  --tazza-ombra: #cfc4b6;
  --espresso: #2a140a;           /* the coffee as it lands */
  --crema: #b8743c;              /* the crema on top */
  --crema-chiara: #d49a5e;
  --misto: #c98c58;              /* the colour the milk lifts from below */
  --latte: #fbf5ea;              /* the milk of the leaf */
  --vapore: rgba(250, 240, 226, 0.62);
  --acciaio: #b9bcbf;            /* the jug and the machine */
  --acciaio-chiaro: #eef0f1;
  --acciaio-scuro: #6f7376;
  --macchina: #3a2e27;
  --legno: #6b3f22;
  --chicco: #7a4a2a;              /* the beans in the opening */
  --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(--fondo);
}
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  color: var(--carta);
  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(243, 232, 216, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.8, 0.5, 1);
}
@media (hover: hover) {
  .menu a:hover {
    background: var(--carta);
    color: var(--fondo);
    transform: translateY(-2px) scale(1.06);
  }
}

/* ---------------------------------------------------------------- the opening */
.apertura {
  position: relative;
  min-height: var(--alto-grande);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px clamp(16px, 6vw, 88px) 90px;
  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(52px, 10.5vw, 164px);
  font-weight: 560;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.apertura__titolo em,
.passo__titolo em,
.fine__frase em {
  font-weight: 360;
  color: var(--accento);
}
.riga {
  display: block;
  overflow: hidden;
  padding: 0.04em 0 0.12em;
  margin-bottom: -0.12em;
}
.riga > span { display: inline-block; }
.apertura__testo {
  max-width: 32ch;
  margin: 26px 0 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--carta-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;
}

.chicchi {
  position: absolute;
  right: clamp(16px, 9vw, 150px);
  bottom: clamp(70px, 16vh, 160px);
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.4vw, 18px);
}
.chicco {
  width: clamp(44px, 6vw, 92px);
  height: auto;
  overflow: visible;
  cursor: pointer;
}
.chicco:nth-child(2) { width: clamp(54px, 7.4vw, 112px); }
.chicco__corpo { fill: var(--chicco); }
.chicco__solco {
  fill: none;
  stroke: var(--fondo);
  stroke-width: 5;
  stroke-linecap: round;
}

/* ---------------------------------------------------------------- the cup's story */
.storia {
  position: relative;
  height: calc(var(--alto-grande) * 6);
  background: var(--fondo-palco);
}
.palco {
  position: sticky;
  top: 0;
  height: var(--alto-grande);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(16px, 4vw, 64px);
  padding: 80px clamp(16px, 6vw, 88px) 24px;
  overflow: hidden;
}
.racconto {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.ricetta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ricetta button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--carta-tenue);
  font: inherit;
  font-size: 14px;
  font-weight: 560;
  font-stretch: 100%;
  cursor: pointer;
  transition: color 0.35s ease, background-color 0.35s ease, font-stretch 0.5s cubic-bezier(0.34, 1.8, 0.5, 1), transform 0.5s cubic-bezier(0.34, 1.8, 0.5, 1);
}
.ricetta button.attiva {
  background: var(--carta);
  color: var(--fondo);
  font-stretch: 112%;
}
@media (hover: hover) {
  .ricetta button:hover {
    color: var(--carta);
    font-stretch: 116%;
    transform: translateY(-2px);
  }
  .ricetta button.attiva:hover { color: var(--fondo); }
}
.passi {
  position: relative;
  min-height: 18.5em;
}
.passo {
  position: absolute;
  inset: 0 0 auto;
}
.passo__etichetta {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accento);
}
.passo__titolo {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(40px, 5.6vw, 88px);
  font-weight: 560;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.passo__testo {
  max-width: 34ch;
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--carta-tenue);
}
.misura {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--carta-tenue);
}
.misura strong {
  margin-left: 10px;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--carta);
  font-variant-numeric: tabular-nums;
}
.misura strong span {
  display: inline-block;
  min-width: 2.2ch;
  text-align: right;
}
.scena {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(var(--alto-grande) - 104px);
  overflow: hidden;
}

/* ---------------------------------------------------------------- the drawing */
.stop-tazza { stop-color: var(--tazza); }
.stop-tazza-ombra { stop-color: var(--tazza-ombra); }
.stop-acciaio { stop-color: var(--acciaio); }
.stop-acciaio-chiaro { stop-color: var(--acciaio-chiaro); }
.stop-acciaio-scuro { stop-color: var(--acciaio-scuro); }
.stop-crema { stop-color: var(--crema); }
.stop-macchina { stop-color: var(--macchina); }
.stop-crema-chiara { stop-color: var(--crema-chiara); }
.stop-crema-bordo { stop-color: color-mix(in srgb, var(--crema) 70%, var(--espresso)); }
.stop-misto { stop-color: var(--misto); }
.piattino-ombra { fill: rgba(0, 0, 0, 0.3); }
.piattino-incavo { fill: color-mix(in srgb, var(--tazza-ombra) 60%, var(--tazza)); }
.ombra-tazza { fill: rgba(60, 35, 20, 0.22); }
.manico {
  fill: none;
  stroke: var(--tazza-ombra);
  stroke-width: 20;
  stroke-linecap: round;
}
.manico-luce {
  fill: none;
  stroke: var(--tazza);
  stroke-width: 9;
  stroke-linecap: round;
  transform: translate(-3px, -3px);
}
.bordo {
  fill: none;
  stroke: var(--tazza);
  stroke-width: 6;
}
.bordo--davanti { stroke-width: 5; }
.riflesso {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 7;
  stroke-linecap: round;
}
.espresso { fill: var(--espresso); }
.macchia { fill: color-mix(in srgb, var(--crema) 55%, var(--espresso)); }
.cerchio {
  fill: none;
  stroke: var(--crema-chiara);
  stroke-width: 2;
}
.foglia {
  fill: var(--latte);
  stroke: color-mix(in srgb, var(--crema) 80%, var(--espresso));
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.gambo {
  fill: none;
  stroke: var(--latte);
  stroke-width: 3.2;
  stroke-linecap: round;
}
.filo-caffe { fill: var(--espresso); }
.goccia { fill: var(--espresso); }
.filo-latte { fill: var(--latte); }
.ricciolo {
  fill: none;
  stroke: var(--vapore);
  stroke-width: 8;
  stroke-linecap: round;
}
.macchina-riga { fill: rgba(255, 255, 255, 0.08); }
.legno { fill: var(--legno); }
.beccuccio { fill: var(--acciaio-scuro); }
.manico-brocca {
  fill: none;
  stroke: var(--acciaio-scuro);
  stroke-width: 11;
  stroke-linecap: round;
}
.brocca-bordo {
  fill: none;
  stroke: var(--acciaio-chiaro);
  stroke-width: 3;
  stroke-linecap: round;
}
.brocca-luce {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 7;
  stroke-linecap: round;
}
.presa {
  fill: transparent;
  cursor: pointer;
}

/* ---------------------------------------------------------------- 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(--carta);
  color: var(--fondo);
}
.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;
  color: color-mix(in srgb, var(--accento) 75%, var(--fondo));
}
.fine__bottone {
  position: relative;
  display: inline-flex;
  padding: 17px 32px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 640;
  font-stretch: 100%;
  color: var(--carta);
  isolation: isolate;
}
.fine__bottone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--fondo);
  transition: transform 0.6s cubic-bezier(0.34, 1.8, 0.5, 1);
}
.fine__bottone span {
  display: inline-block;
  transition: font-stretch 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 { font-stretch: 118%; }
}

/* ---------------------------------------------------------------- the phone */
@media (max-width: 720px) {
  .menu { display: none; }
  .marchio { font-size: 19px; }
  .palco {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    padding: 68px 16px 12px;
  }
  .racconto { gap: 14px; }
  .ricetta button { padding: 5px 9px; font-size: 13px; }
  .passo__etichetta { margin-bottom: 8px; font-size: 12px; }
  .passo__titolo { font-size: clamp(32px, 9.6vw, 44px); }
  .passo__testo { margin-top: 10px; font-size: 15px; }
  .passi { min-height: 10.9em; }
  .misura { font-size: 11px; line-height: 1; }
  .misura strong { margin-left: 8px; font-size: 19px; }
  .scena { max-height: none; min-height: 0; }
}

/* ---------------------------------------------------------------- the low screen */
/* la casella dell'anteprima sul telefono (341 per 410): l'apertura sta tutta in uno schermo */
@media (max-height: 520px) {
  .apertura { padding-top: 64px; padding-bottom: 24px; }
  .apertura__etichetta { margin-bottom: 10px; font-size: 12px; }
  .apertura__titolo { font-size: clamp(40px, min(10.5vw, 11vh), 164px); }
  .apertura__testo { margin-top: 14px; font-size: 15px; }
  .apertura__cenno { margin-top: 18px; }
  .chicchi { bottom: 24px; }
}