/* The tide footer: the footer of a small surf school on a black page, the deep blue of the sea under the newsletter,
   three columns of links and the small print, and along its top edge the sea itself, with its surface, its foam and
   the things floating on it. */
:root {
  --page: #000000;          /* the page */
  --sea-far: #1a5866;       /* the waves furthest out */
  --sea-mid: #23808f;       /* the waves in the middle */
  --sea-top: #35b9bd;       /* the near water, just under its surface */
  --sea-deep: #0a3346;      /* the water where the footer starts */
  --deep: #061c29;          /* the footer at the bottom, the deep */
  --foam: #f1fbf9;          /* the foam on the crests */
  --glint: #fff3d2;         /* the sun glinting under the surface */
  --buoy: #f2553b;          /* the buoy */
  --board: #f4cf7a;         /* the board */
  --board-stripe: #e8613f;  /* the stripe along the board */
  --field: #0c3a4e;         /* the email field */
  --line: #1f5266;          /* the edge of the field, and the rule over the small print */
  --ink: #ecf8f6;           /* titles, the link pointed at, the button */
  --muted: #a3c6cb;         /* links and text */
  --faint: #7fa4ad;         /* the small print and the help under the field */
  --button-ink: #062433;    /* the word on the button */
  --focus: #8fe3d8;         /* the focus ring, and the thanks */
  --wrong: #ffad95;         /* an email that does not look right */
  --air: 62px;              /* the room over the sea for the crests */
  --drop: 30px;             /* how far under the calm surface the footer's own blue starts */
}

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

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the footer and its sea */
.tw {
  position: relative;
  width: min(1100px, 100%);
  padding-top: var(--air);
}

/* the sea is drawn on one canvas over the top edge: its water runs down into the footer's blue */
.tw__sea {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: calc(var(--air) + var(--drop) + 22px);
  /* a finger dragged sideways stirs the water; up and down still scrolls the page */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* the footer's blue starts a little under the calm surface, so a trough never shows its edge */
.tw__panel {
  position: relative;
  z-index: 1;
  padding: calc(var(--drop) + 28px) 48px 0;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, transparent 0, transparent var(--drop), var(--sea-deep) var(--drop), var(--deep) 100%);
  color: var(--muted);
}

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

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

.tw__title {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  font-weight: 620;
  font-stretch: 84%;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

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

.tw__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;
}

.tw__field:has(.tw__input:focus) {
  box-shadow: inset 0 0 0 1px var(--muted), 0 0 0 4px rgba(143, 227, 216, 0.12);
}

.tw__field.is-wrong,
.tw__field.is-wrong:has(.tw__input:focus) {
  box-shadow: inset 0 0 0 1px var(--wrong), 0 0 0 4px rgba(255, 173, 149, 0.14);
}

.tw__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 'Bricolage Grotesque Variable', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

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

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

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

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

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

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

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

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

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

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

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

.tw__send:focus {
  outline: none;
}

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

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

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

.tw__done {
  stroke-width: 2.6;
}

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

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

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

.tw__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;
}

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

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

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

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

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

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

/* a link pointed at: a little wave runs through its letters, each one lifted and tipped as it passes, and the word
   takes the colour of the foam */
.tw__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.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.tw__word {
  display: inline-block;
}

.tw__ch {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 80%;
}

.tw__link.is-on,
.tw__link:focus-visible {
  color: var(--ink);
}

.tw__link.is-on .tw__ch,
.tw__link:focus-visible .tw__ch {
  animation: tw-ride 0.62s cubic-bezier(0.3, 0.7, 0.4, 1) both;
  animation-delay: calc(var(--i) * 26ms);
}

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

  .tw__link:hover .tw__ch {
    animation: tw-ride 0.62s cubic-bezier(0.3, 0.7, 0.4, 1) both;
    animation-delay: calc(var(--i) * 26ms);
  }
}

/* a letter on the passing wave: up the face, tipped forward, over the crest and down the back with a small dip */
@keyframes tw-ride {
  0% {
    transform: none;
  }

  32% {
    transform: translateY(-4.5px) rotate(-7deg);
  }

  62% {
    transform: translateY(1.2px) rotate(3deg);
  }

  82% {
    transform: translateY(-0.6px) rotate(-1deg);
  }

  100% {
    transform: none;
  }
}

.tw__link:focus {
  outline: none;
}

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

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

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

.tw__mark {
  flex: none;
  width: 24px;
  height: 24px;
  margin-right: -6px;
  fill: none;
  stroke: var(--focus);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tw__name {
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  font-stretch: 84%;
}

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

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

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

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

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

  .tw__form {
    max-width: 480px;
  }

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

  .tw__base {
    flex-wrap: wrap;
  }
}

/* a phone: the columns stack, two side by side and the third under them */
@media (max-width: 600px) {
  .tw__panel {
    padding: calc(var(--drop) + 22px) 20px 0;
    border-radius: 0 0 24px 24px;
  }

  .tw__title {
    font-size: 24px;
  }

  .tw__field {
    --send-w: 108px;
    height: 54px;
  }

  .tw__input {
    padding-left: 18px;
  }

  /* room for two lines, so a longer message never moves the rest of the footer */
  .tw__note {
    min-height: 40px;
    margin-left: 18px;
  }

  .tw__top {
    gap: 22px;
  }

  .tw__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }

  .tw__head {
    margin-bottom: 6px;
  }

  /* a row a thumb can hit */
  .tw__link {
    padding: 6px 0;
  }

  .tw__base {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 24px;
  }

  .tw__hours {
    width: 100%;
  }

  .tw__legal {
    gap: 0 20px;
  }

  .tw__link--small {
    padding: 10px 0;
  }
}

/* la casella bassa dell'anteprima sul telefono: le tre colonne su una riga sola, misurate sulle parole, e spazi
   più stretti, così il piede si vede intero */
@media (max-width: 600px) and (max-height: 760px) {
  :root {
    --air: 50px;
  }

  .stage {
    padding: 10px 16px;
  }

  .tw__lede {
    margin-bottom: 14px;
  }

  .tw__note {
    min-height: 20px;
  }

  .tw__top {
    gap: 16px;
  }

  .tw__cols {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 8px;
  }

  .tw__link {
    padding: 3px 0;
    font-size: 13.5px;
  }

  .tw__base {
    margin-top: 16px;
    padding: 12px 0 14px;
  }

  .tw__link--small {
    padding: 3px 0;
    font-size: 13px;
  }
}

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

  /* nothing rides: the word only takes the foam's colour */
  .tw__link .tw__ch,
  .tw__link.is-on .tw__ch,
  .tw__link:focus-visible .tw__ch {
    animation: none;
  }
  @media (hover: hover) {
    .tw__link:hover .tw__ch {
      animation: none;
    }
  }
}