/* The snowy footer: the footer of a mountain hut on a white page, deep night blue, with the newsletter, three
   columns of links and the small print, and the hut's name in giant red letters along the bottom, where the snow
   settles. */
:root {
  --page: #ffffff;          /* the page */
  --night: #13233a;         /* the footer, at the top */
  --night-low: #182c46;     /* the footer, at the bottom */
  --field: #1c3150;         /* the email field and the round buttons */
  --line: #2c4566;          /* the edges of the field and the buttons, and the rule */
  --ink: #f1f5fa;           /* titles, the link pointed at, the button */
  --muted: #a9b9cd;         /* links and text */
  --faint: #8b9db5;         /* the small print and the help under the field */
  --button-ink: #13233a;    /* the word on the button */
  --name: #e8432f;          /* the hut's name, the red of its shutters */
  --snow: #f7fafd;          /* the snow that settles */
  --snow-shade: #b9cbe0;    /* the snow's shaded underside */
  --flake: #ffffff;         /* the flakes in the air */
  --focus: #9fd0ff;         /* the focus ring */
  --pointed: #ff7a63;       /* a link pointed at: the hut's red, lighter, so it reads on the night blue */
  --wrong: #ffb2a1;         /* an email that does not look right */
}

* {
  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: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- the footer */
.ft {
  position: relative;
  width: min(1040px, 100%);
  padding: 32px 36px 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-low) 100%);
  color: var(--muted);
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.14), 0 34px 60px -38px rgba(10, 22, 40, 0.6);
}

/* the flakes and the snow that settles, behind everything: the caps sit on top edges, so the things they sit on
   hide their feet and nothing is ever covered */
.ft__snow {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

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

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

.ft__title {
  margin: 0;
  color: var(--ink);
  font-size: 23px;
  font-weight: 700;
  font-stretch: 118%;
  line-height: 28px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ft__lede {
  margin: 8px 0 14px;
  font-size: 15px;
  line-height: 22px;
  text-wrap: pretty;
}

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

.ft__field:has(.ft__input:focus) {
  box-shadow: inset 0 0 0 1px var(--muted), 0 0 0 4px rgba(159, 208, 255, 0.12);
}

.ft__field.is-wrong,
.ft__field.is-wrong:has(.ft__input:focus) {
  box-shadow: inset 0 0 0 1px var(--wrong), 0 0 0 4px rgba(255, 178, 161, 0.14);
}

.ft__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(--focus);
  font: 450 16px/normal 'Archivo Variable', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

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

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

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

/* the button: the elastic pill, its word widening while the colour swells under the pointer */
.ft__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: 640 15px/1 'Archivo Variable', system-ui, sans-serif;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

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

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

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

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

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

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

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

.ft__send:focus {
  outline: none;
}

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

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

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

.ft__done {
  stroke-width: 2.6;
}

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

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

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

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

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

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

.ft__line.is-done svg {
  color: var(--focus);
}

/* ---------------------------------------------------------------- the links */
.ft__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ft__head {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  font-stretch: 112%;
  line-height: 20px;
  letter-spacing: 0;
}

/* on a computer the heading is a heading; on a phone it is the button that opens its column */
.ft__toggle {
  display: none;
}

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

/* a link pointed at: it turns the red of the hut's name, and fresh snow blows in from the left and settles on the
   top of its letters (on the canvas behind, like the big letters), so the word sinks a pixel under it */
.ft__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;
}

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

.ft__link.is-on,
.ft__link:focus-visible {
  color: var(--pointed);
}

.ft__link.is-on .ft__word,
.ft__link:focus-visible .ft__word {
  transform: translateY(1px);
}

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

  .ft__link:hover .ft__word {
    transform: translateY(1px);
  }
}

.ft__link:focus {
  outline: none;
}

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

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

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

.ft__mark {
  flex: none;
  width: 28px;
  height: 28px;
  overflow: visible;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ft__mark .m-hill {
  stroke: var(--muted);
}

.ft__mark .m-hut {
  fill: var(--name);
  stroke: none;
}

.ft__mark .m-door {
  fill: var(--night);
  stroke: none;
}

.ft__mark .m-snow {
  fill: var(--snow);
  stroke: none;
}

.ft__name {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  font-stretch: 118%;
}

.ft__copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

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

/* the round buttons: the snow settles on them too, and a pointer shakes it off */
.ft__social {
  display: flex;
  gap: 12px;
}

.ft__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  transition: color 0.25s ease, box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.ft__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ft__icon.is-on {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .ft__icon:hover {
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--muted);
  }
}

.ft__icon:focus {
  outline: none;
}

.ft__icon:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

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

.ft__link--small {
  padding: 3px 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--faint);
}

/* ---------------------------------------------------------------- the hut's name */
.ft__giant {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 28px;
  /* the letters are cut at their foot by their own clip, so they can bounce up out of the box */
  overflow: visible;
  fill: var(--name);
  /* a finger dragged sideways sweeps the snow off; up and down still scrolls the page */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* 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) {
  .ft__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .ft__form {
    max-width: 480px;
  }

  /* the name and the copyright on their own line, the round buttons and the legal links under them */
  .ft__base {
    flex-wrap: wrap;
  }

  .ft__brand {
    width: 100%;
  }
}

/* a phone: the columns fold away behind their headings, one tap opens each */
@media (max-width: 720px) {
  .ft {
    padding: 28px 20px 22px;
    border-radius: 24px;
  }

  .ft__title {
    font-size: 22px;
  }

  /* a button a thumb can hit: 44 pixels */
  .ft__field {
    --send-w: 96px;
    height: 56px;
  }

  .ft__input {
    padding-left: 18px;
  }

  .ft__note {
    margin-left: 18px;
  }

  .ft__top {
    gap: 24px;
  }

  .ft__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 0;
    border-bottom: 1px solid var(--line);
  }

  .ft__head {
    margin: 0;
  }

  .ft__head-text {
    display: none;
  }

  .ft__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-stretch: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .ft__toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.45, 1);
  }

  .ft__toggle[aria-expanded='true'] svg {
    transform: rotate(180deg);
  }

  .ft__toggle:focus {
    outline: none;
  }

  .ft__toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    border-radius: 6px;
  }

  .ft__list {
    overflow: hidden;
  }

  .ft__list[data-closed] {
    display: none;
  }

  .ft__list li:last-child {
    padding-bottom: 10px;
  }

  /* a whole row to tap */
  .ft__list .ft__link {
    display: block;
    padding: 11px 2px;
  }

  .ft__list .ft__link .ft__word {
    vertical-align: top;
  }

  .ft__base {
    margin-top: 0;
    padding-top: 22px;
    border-top: 0;
  }

  .ft__legal {
    gap: 0 18px;
  }

  .ft__icon {
    width: 44px;
    height: 44px;
  }

  .ft__link--small {
    padding: 12px 0;
  }

  .ft__giant {
    margin-top: 24px;
  }
}

/* la casella bassa dell'anteprima sul telefono: righe più basse e spazi più stretti, così il piede si vede intero
   col nome sotto */
@media (max-width: 720px) and (max-height: 760px) {
  .stage {
    padding: 10px 16px;
  }

  .ft {
    padding: 20px 20px 16px;
  }

  .ft__field {
    height: 52px;
  }

  .ft__top {
    gap: 14px;
  }

  .ft__toggle {
    min-height: 40px;
  }

  .ft__list .ft__link {
    padding: 8px 2px;
  }

  .ft__base {
    gap: 8px 28px;
    padding-top: 14px;
  }

  .ft__icon {
    width: 38px;
    height: 38px;
  }

  .ft__link--small {
    padding: 6px 0;
  }

  .ft__giant {
    width: 88%;
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ft__send-label,
  .ft__send-bg,
  .ft__word,
  .ft__toggle svg {
    transition: none;
  }

  /* nothing moves: the word stays where it is and the snow on it fades in */
  .ft__link .ft__word,
  .ft__link.is-on .ft__word,
  .ft__link:focus-visible .ft__word {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .ft__link:hover .ft__word {
    transform: none;
  }
}