/* The meadow footer: a deep green footer on a white page, a strip of meadow growing along its top edge, the
   newsletter on the left, three columns of links on the right and the small print underneath. */
:root {
  --page: #ffffff;          /* the page */
  --soil: #1c3324;          /* the footer: the ground the meadow grows from */
  --field: #233d2c;         /* the email field */
  --line: #36503d;          /* the edge of the field, and the rule over the small print */
  --ink: #f3eedf;           /* titles, the link pointed at, the button */
  --muted: #b2bfaa;         /* links and text */
  --faint: #8a9b85;         /* the small print and the help under the field */
  --button-ink: #1c3324;    /* the word on the button */
  --sprout: #a9d17d;        /* the shoot that grows beside a link pointed at */
  --wrong: #ffab91;         /* an email that does not look right */
  --grass-far: #c3d3ab;     /* the blades at the back */
  --grass-mid: #86ad6a;     /* the blades in the middle */
  --grass-near: #3d6b41;    /* the blades in front */
  --sheen: #f1f5e2;         /* the light a blade catches when the wind bends it */
  --poppy: #e8543a;         /* the poppies that bloom */
  --cornflower: #5b73dc;    /* the cornflowers */
  --buttercup: #f3c53c;     /* the buttercups */
  --meadow: 84px;           /* how tall the strip of meadow over the footer is */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the footer and its meadow */
.pf {
  position: relative;
  width: min(1120px, 100%);
  padding-top: var(--meadow);
}

/* the meadow is drawn on one canvas over the top edge: the blades grow out of the footer's green */
.pf__meadow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: calc(var(--meadow) + 16px);
  /* a finger dragged sideways brushes the grass; up and down still scrolls the page */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.pf__panel {
  position: relative;
  z-index: 1;
  padding: 40px 48px 0;
  border-radius: 28px;
  background: var(--soil);
  color: var(--muted);
  box-shadow: 0 1px 2px rgba(20, 40, 26, 0.12), 0 34px 60px -38px rgba(20, 40, 26, 0.55);
}

.pf__top {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* ---------------------------------------------------------------- the newsletter */
.pf__form {
  margin: 0;
}

.pf__title {
  margin: 0;
  color: var(--ink);
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 27px;
  font-weight: 420;
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  font-optical-sizing: auto;
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.pf__lede {
  margin: 8px 0 18px;
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

.pf__field {
  --send-w: 116px;
  position: relative;
  height: 52px;
  border-radius: 999px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.25s ease;
}

.pf__field:has(.pf__input:focus) {
  box-shadow: inset 0 0 0 1px var(--muted), 0 0 0 4px rgba(243, 238, 223, 0.08);
}

.pf__field.is-wrong {
  box-shadow: inset 0 0 0 1px var(--wrong), 0 0 0 4px rgba(255, 171, 145, 0.14);
}

.pf__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 calc(var(--send-w) + 14px) 0 22px;
  border: 0;
  border-radius: inherit;
  outline: none;
  background: transparent;
  color: var(--ink);
  caret-color: var(--sprout);
  font: 450 16px/normal 'Instrument Sans Variable', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.pf__input::placeholder {
  color: var(--faint);
  opacity: 1;
}

/* the browser's autofill paints the field light blue: back to the field's own colours */
.pf__input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 60px var(--field) inset;
  caret-color: var(--sprout);
}

.pf__input[readonly] {
  color: var(--muted);
}

/* the button: the elastic pill, its word widening while the colour swells under the pointer */
.pf__send {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: var(--send-w);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--button-ink);
  font: 620 15px/1 'Instrument Sans Variable', system-ui, sans-serif;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.pf__send > * {
  grid-area: 1 / 1;
}

.pf__send-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ink);
  box-shadow: inset 0 -2px 0 rgba(28, 51, 36, 0.12);
  transition: inset 0.6s cubic-bezier(0.3, 1.7, 0.45, 1), transform 0.16s ease-out;
}

.pf__send-label {
  display: block;
  font-stretch: 88%;
  white-space: nowrap;
  transition: font-stretch 0.6s cubic-bezier(0.3, 1.7, 0.45, 1);
}

@media (hover: hover) and (pointer: fine) {
  .pf__send:not([aria-disabled='true']):hover .pf__send-bg {
    inset: -2px -4px;
  }

  .pf__send:not([aria-disabled='true']):hover .pf__send-label {
    font-stretch: 100%;
  }
}

.pf__send:not([aria-disabled='true']):active .pf__send-bg {
  transform: scale(1.03, 0.88);
}

.pf__send[aria-disabled='true'] {
  cursor: default;
}

.pf__send:focus {
  outline: none;
}

.pf__send:focus-visible {
  outline: 2px solid var(--sprout);
  outline-offset: 3px;
}

.pf__spin,
.pf__done {
  width: 22px;
  height: 22px;
  overflow: visible;
  opacity: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf__spin {
  stroke-width: 2.4;
  stroke-dasharray: 30 60;
}

.pf__done {
  stroke-width: 2.6;
}

/* the line under the field: help, then what went wrong, then the thanks */
.pf__note {
  position: relative;
  min-height: 20px;
  margin: 12px 0 0 22px;
  color: var(--faint);
  font-size: 13.5px;
  line-height: 20px;
}

.pf__line {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.pf__line.is-going {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}

.pf__line svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2.5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf__line.is-wrong {
  color: var(--wrong);
}

.pf__line.is-done {
  color: var(--ink);
}

.pf__line.is-done svg {
  color: var(--sprout);
}

/* ---------------------------------------------------------------- the links */
.pf__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  justify-self: end;
  width: min(100%, 540px);
  padding-top: 4px;
}

.pf__head {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 17px;
  font-weight: 450;
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  letter-spacing: 0;
}

.pf__cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a link pointed at: its word steps aside and a shoot grows in its place, two leaves unfurling */
.pf__link {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  border-radius: 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.pf__word {
  display: inline-block;
  transition: transform 0.55s cubic-bezier(0.3, 1.6, 0.45, 1);
}

.pf__sprout {
  position: absolute;
  left: -1px;
  top: 50%;
  width: 14px;
  height: 16px;
  margin-top: -9px;
  overflow: visible;
  fill: none;
  stroke: var(--sprout);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.pf__sprout .s-stem {
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
  transition: stroke-dashoffset 0.2s ease-in 0.12s;
}

.pf__sprout .s-leaf {
  fill: var(--sprout);
  stroke: none;
  transform-box: view-box;
  transform: scale(0) rotate(-40deg);
  transition: transform 0.18s ease-in;
}

.pf__sprout .s-left {
  transform-origin: 7px 9px;
}

.pf__sprout .s-right {
  transform-origin: 7px 10.6px;
  transform: scale(0) rotate(40deg);
}

/* out: the word and the shoot */
.pf__link.is-on,
.pf__link:focus-visible {
  color: var(--ink);
}

.pf__link.is-on .pf__word,
.pf__link:focus-visible .pf__word {
  transform: translateX(17px);
}

.pf__link.is-on .s-stem,
.pf__link:focus-visible .s-stem {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.28s ease-out 0.05s;
}

.pf__link.is-on .s-leaf,
.pf__link:focus-visible .s-leaf {
  transform: none;
  transition: transform 0.6s cubic-bezier(0.3, 1.7, 0.45, 1) 0.16s;
}

.pf__link.is-on .s-right,
.pf__link:focus-visible .s-right {
  transition-delay: 0.24s;
}

@media (hover: hover) and (pointer: fine) {
  .pf__link:hover {
    color: var(--ink);
  }

  .pf__link:hover .pf__word {
    transform: translateX(17px);
  }

  .pf__link:hover .s-stem {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.28s ease-out 0.05s;
  }

  .pf__link:hover .s-leaf {
    transform: none;
    transition: transform 0.6s cubic-bezier(0.3, 1.7, 0.45, 1) 0.16s;
  }

  .pf__link:hover .s-right {
    transition-delay: 0.24s;
  }
}

.pf__link:focus {
  outline: none;
}

/* the focus ring takes in the word where it has stepped to */
.pf__link::after {
  content: '';
  position: absolute;
  inset: -1px -24px -1px -7px;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--sprout);
  opacity: 0;
  pointer-events: none;
}

.pf__link--small::after {
  inset: -2px -20px -2px -7px;
}

.pf__link:focus-visible::after {
  opacity: 1;
}

/* ---------------------------------------------------------------- the small print */
.pf__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 30px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 13px;
}

.pf__mark {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
}

.pf__mark svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.pf__mark span:first-of-type {
  color: var(--ink);
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  font-variation-settings: 'SOFT' 100;
}

.pf__copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

/* the copyright sign, drawn: the character can turn into an emoji on some phones */
.pf__copy svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 1.1;
}

.pf__small {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 22px;
}

.pf__link--small {
  font-size: 13px;
  line-height: 20px;
  color: var(--faint);
}

.pf__link--small .pf__sprout {
  width: 12px;
  height: 14px;
  margin-top: -8px;
}

.pf__link--small.is-on .pf__word,
.pf__link--small:focus-visible .pf__word {
  transform: translateX(14px);
}

@media (hover: hover) and (pointer: fine) {
  .pf__link--small:hover .pf__word {
    transform: translateX(14px);
  }
}

/* for screen readers only */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- a narrower screen */
@media (max-width: 900px) {
  .pf__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .pf__cols {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .pf__panel {
    padding: 34px 22px 0;
    border-radius: 24px;
  }

  .pf__title {
    font-size: 25px;
  }

  .pf__field {
    --send-w: 108px;
  }

  .pf__input {
    padding-left: 18px;
  }

  .pf__note {
    margin-left: 18px;
  }

  .pf__cols {
    gap: 12px;
  }

  .pf__head {
    margin-bottom: 8px;
    font-size: 16px;
  }

  .pf__link {
    padding: 3px 0;
    font-size: 14px;
  }

  .pf__link.is-on .pf__word,
  .pf__link:focus-visible .pf__word {
    transform: translateX(14px);
  }

  .pf__link::after {
    inset: -1px -18px -1px -6px;
  }

  .pf__legal {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 32px;
  }
}

/* la casella bassa dell'anteprima sul telefono: il piede intero, con spazi più stretti e un prato più basso */
@media (max-width: 560px) and (max-height: 760px) {
  :root {
    --meadow: 64px;
  }

  .stage {
    padding: 10px 16px;
  }

  .pf__panel {
    padding-top: 26px;
  }

  .pf__lede {
    margin-bottom: 14px;
  }

  .pf__top {
    gap: 22px;
  }

  .pf__link {
    padding: 2px 0;
  }

  .pf__legal {
    gap: 8px;
    margin-top: 18px;
    padding: 12px 0 14px;
  }

  .pf__small {
    gap: 2px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf__word,
  .pf__send-label,
  .pf__send-bg {
    transition: none;
  }

  /* nothing moves: the word stays where it is and the shoot fades in beside it, already grown */
  .pf__link .pf__word,
  .pf__link.is-on .pf__word,
  .pf__link:focus-visible .pf__word {
    transform: none;
  }
  @media (hover: hover) {
    .pf__link:hover .pf__word {
      transform: none;
    }
  }

  .pf__sprout {
    left: -19px;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .pf__sprout .s-stem,
  .pf__sprout .s-leaf,
  .pf__sprout .s-right {
    transform: none;
    stroke-dashoffset: 0;
    transition: none;
  }

  .pf__link.is-on .pf__sprout,
  .pf__link:focus-visible .pf__sprout {
    opacity: 1;
  }

  /* the focus ring takes in the shoot on the left instead of the word's step on the right */
  .pf__link::after {
    inset: -1px -7px -1px -25px;
  }

  .pf__link--small::after {
    inset: -2px -7px -2px -24px;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .pf__link:hover .pf__sprout {
    opacity: 1;
  }
}