/* The message in a bottle contact form: a sand-coloured card with a corner of the beach at sunset on the left (sky,
   sun, sea, a boat on the horizon, the water's edge, the bottle, its cork and the letter on the sand) and the form on
   the right, written on ruled paper. The scene is drawn 300 units wide and 360 high; the script draws the waves, the
   ink and the bottle's trip. All the colours are here, so the Playground palette can paint it again. */
:root {
  --page: #ffffff;          /* the page around the card */
  --card: #f7ecda;          /* the card */
  --sky-top: #f8d9b4;       /* the sky high up */
  --sky: #f4b28a;           /* the sky at the horizon */
  --sun: #fff1c9;           /* the sun */
  --sea-far: #4f9db0;       /* the sea at the horizon */
  --sea: #24697f;           /* the sea near the beach */
  --foam: #fdf6e8;          /* the foam and the glints */
  --sand: #f1d6a3;          /* the dry sand */
  --sand-low: #e2b97d;      /* the sand in front */
  --sand-wet: #c99a64;      /* the wet sand at the water's edge */
  --glass: #8fc7b6;         /* the bottle glass */
  --glass-dark: #4f8f80;    /* the edges of the glass */
  --cork: #c48a52;          /* the cork */
  --wood: #b98d62;          /* the driftwood */
  --paper: #fffaf0;         /* the letter */
  --ink: #233a5c;           /* the ink on the letter and the writing */
  --coral: #e2603f;         /* the button, the stamp and the twine */
  --text: #2c2418;          /* the text of the form */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

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

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

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

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

/* ---------------------------------------------------------------- the card */
.mare {
  width: min(840px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(10px, 3vw, 30px);
  align-items: center;
  padding: clamp(10px, 3vmin, 24px);
  border-radius: clamp(16px, 3vmin, 28px);
  background: var(--card);
  box-shadow: 0 1px 0 rgba(44, 36, 24, 0.06), 0 22px 44px -24px rgba(90, 60, 30, 0.5);
}

.mare__scene {
  display: grid;
  place-items: center;
  min-width: 0;
}

.scene {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(400px, 76vh);
}

.stop-sky-top { stop-color: var(--sky-top); }
.stop-sky { stop-color: var(--sky); }
.stop-sun { stop-color: var(--sun); }
.stop-sun-glow { stop-color: var(--sun); stop-opacity: 0; }
.stop-sea-far { stop-color: var(--sea-far); }
.stop-sea { stop-color: var(--sea); }
.stop-sand-wet { stop-color: var(--sand-wet); }
.stop-sand { stop-color: var(--sand); }
.stop-sand-low { stop-color: var(--sand-low); }
.stop-glass { stop-color: var(--glass); stop-opacity: 0.55; }
.stop-glass-light { stop-color: #e8fbf2; stop-opacity: 0.7; }
.stop-glass-dark { stop-color: var(--glass-dark); stop-opacity: 0.8; }
.stop-wood { stop-color: var(--wood); }
.stop-wood-light { stop-color: #dcc09c; }

/* the sky and the sea */
.cloud { fill: #fff3e4; opacity: 0.8; }
.cloud__light { fill: none; stroke: #ffffff; stroke-width: 1.4; stroke-linecap: round; opacity: 0.7; }
.sun { fill: var(--sun); }
.sun__glow { opacity: 0.85; }
.horizon { stroke: rgba(255, 240, 220, 0.5); stroke-width: 1; }
.boat__hull { fill: #3a3a4a; }
.boat__mast { stroke: #3a3a4a; stroke-width: 0.8; }
.boat__sail { fill: #fff6e6; }
.boat__jib { fill: #f7e3c8; }
.glint { fill: var(--foam); }
.wave { fill: none; stroke: rgba(255, 250, 238, 0.42); stroke-width: 1.2; stroke-linecap: round; }
.wave--far { stroke-width: 0.8; stroke: rgba(255, 250, 238, 0.3); }
.floater__ripple { fill: none; stroke: rgba(255, 250, 238, 0.7); stroke-width: 1.4; stroke-linecap: round; }

/* the beach */
.wash { fill: #6fb2bd; opacity: 0.85; }
.foam { fill: none; stroke: var(--foam); stroke-width: 2.6; stroke-linecap: round; opacity: 0.9; }
.grains circle { fill: rgba(120, 80, 40, 0.28); }
.grains circle.grain--light { fill: rgba(255, 245, 225, 0.7); }
.drift__grain { fill: none; stroke: rgba(80, 50, 25, 0.35); stroke-width: 1; stroke-linecap: round; }
.drift__knot { fill: rgba(80, 50, 25, 0.35); }
.shell__body { fill: #f6dccb; stroke: #c99a83; stroke-width: 0.8; }
.shell__rib { fill: none; stroke: #d7a891; stroke-width: 0.8; stroke-linecap: round; }
.shell__hinge { fill: #e7c2ad; }
.pebble { fill: #9a8f86; }
.pebble--light { fill: #c8bdb2; }

/* the bottle */
.bottle__shadow { fill: rgba(90, 55, 25, 0.24); }
.bottle__back { fill: rgba(60, 110, 100, 0.18); }
.bottle__body { fill: url(#mare-glass); stroke: rgba(40, 90, 80, 0.55); stroke-width: 1.2; }
[data-floater] .bottle__body { fill: rgba(143, 199, 182, 0.75); }
.bottle__lip { fill: var(--glass-dark); opacity: 0.8; }
.bottle__shine { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; opacity: 0.75; }
.bottle__shine--thin { stroke-width: 1.2; opacity: 0.5; }
.bottle__base { fill: none; stroke: rgba(40, 90, 80, 0.45); stroke-width: 1.4; stroke-linecap: round; }
.bottle__label { fill: #efe2c6; opacity: 0.8; }
.bottle__label-line { fill: none; stroke: rgba(120, 90, 50, 0.45); stroke-width: 1; stroke-linecap: round; }
.cork { fill: var(--cork); stroke: #9c6838; stroke-width: 0.7; }
.cork__top { fill: #d9a571; }
.cork__dot { fill: #8e5c30; }
.cork__dots { fill: none; stroke: #8e5c30; stroke-width: 0.8; stroke-dasharray: 1 2.2; }
.twine__coil { fill: none; stroke: var(--coral); stroke-width: 1.4; opacity: 0.85; }
.twine__end { fill: none; stroke: var(--coral); stroke-width: 1.2; stroke-linecap: round; }

/* the letter */
.letter__shadow { fill: rgba(90, 55, 25, 0.18); }
.paper { fill: var(--paper); stroke: rgba(150, 110, 60, 0.3); stroke-width: 0.6; }
.paper__top { fill: rgba(226, 96, 63, 0.08); }
.paper__rules path { fill: none; stroke: rgba(80, 130, 170, 0.22); stroke-width: 0.7; }
.paper__margin { stroke: rgba(226, 96, 63, 0.3); stroke-width: 0.7; }
.paper__from { font-family: 'Bricolage Grotesque Variable', sans-serif; font-size: 6.4px; font-weight: 600; fill: var(--ink); opacity: 0.75; letter-spacing: 0.02em; }
.paper__sign { font-family: 'Caveat Variable', cursive; font-size: 15px; font-weight: 640; fill: var(--ink); }
.paper__flourish { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.ink { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.blot { fill: var(--ink); }
.stamp { fill: #f9e2c8; stroke: var(--coral); stroke-width: 1; }
.stamp__petals ellipse { fill: none; stroke: var(--coral); stroke-width: 0.8; }
.stamp__ring { fill: none; stroke: var(--coral); stroke-width: 0.7; stroke-dasharray: 2 1.6; opacity: 0.8; }
.nib { fill: #6b6f7a; }
.nib__quill { stroke: #8a7a6a; stroke-width: 1; stroke-linecap: round; }
.nib__vane { fill: none; stroke: #e9dcc8; stroke-width: 2.4; stroke-linecap: round; }
.roll__paper { fill: var(--paper); stroke: rgba(150, 110, 60, 0.45); stroke-width: 0.7; }
.roll__end { fill: #f1e6d2; stroke: rgba(150, 110, 60, 0.45); stroke-width: 0.6; }
.roll__spiral { fill: none; stroke: rgba(150, 110, 60, 0.55); stroke-width: 0.6; }
.tie { fill: none; stroke: var(--coral); stroke-width: 1.3; stroke-linecap: round; }
.scene__edge { fill: none; stroke: rgba(44, 36, 24, 0.12); }

/* ---------------------------------------------------------------- the side: the form and the end, one on the other */
.mare__side {
  position: relative;
  display: grid;
  min-width: 0;
  align-items: center;
}

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

.mare__form {
  display: grid;
  gap: clamp(6px, 1.6vmin, 12px);
  padding: 4px 2px;
  min-width: 0;
}

.mare__kicker {
  margin: 0;
  font-size: clamp(9px, 1.2vmin + 4px, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}

.mare__title {
  margin: 0 0 2px;
  font-size: clamp(16px, 2.6vmin + 6px, 27px);
  font-weight: 720;
  font-stretch: 85%;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* a field: a strip of ruled paper with a coral margin line; the line under the writing turns into a wave when focused */
.field {
  position: relative;
  display: grid;
  padding: clamp(4px, 1vmin, 7px) clamp(10px, 2vmin, 14px) clamp(4px, 1vmin, 7px) clamp(16px, 2.6vmin, 22px);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent calc(clamp(16px, 2.6vmin, 22px) - 7px), rgba(226, 96, 63, 0.35) calc(clamp(16px, 2.6vmin, 22px) - 7px) calc(clamp(16px, 2.6vmin, 22px) - 6px), transparent calc(clamp(16px, 2.6vmin, 22px) - 6px)),
    var(--paper);
  box-shadow: 0 1px 0 rgba(150, 110, 60, 0.18), 0 6px 14px -10px rgba(90, 60, 30, 0.5);
  cursor: text;
  transform-origin: 0% 50%;
}

.field::after {
  content: "";
  position: absolute;
  left: clamp(16px, 2.6vmin, 22px);
  right: clamp(10px, 2vmin, 14px);
  bottom: 4px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 C 4 0, 8 0, 12 3 C 16 6, 20 6, 24 3' fill='none' stroke='%23233a5c' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 6px;
  opacity: 0;
  transition: opacity 0.25s;
  animation: mare-swell 1.6s linear infinite;
  animation-play-state: paused;
}

.field:focus-within::after,
.field.is-focus::after {
  opacity: 0.55;
  animation-play-state: running;
}

@keyframes mare-swell {
  to { background-position: 24px 0; }
}

.field__label {
  font-size: clamp(9px, 1.2vmin + 4px, 12px);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(35, 58, 92, 0.6);
  cursor: text;
}

.field__input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: 'Caveat Variable', cursive;
  font-weight: 560;
  font-size: clamp(19px, 2.6vmin + 9px, 28px);
  line-height: 1.1;
  outline: none;
  resize: none;
  caret-color: var(--coral);
}

textarea.field__input {
  height: 2.2em;
  overflow: hidden;
}

.field__err {
  position: absolute;
  right: 10px;
  top: clamp(4px, 1vmin, 7px);
  font-size: clamp(9px, 1.2vmin + 4px, 12px);
  font-weight: 700;
  color: #b23a1d;
  opacity: 0;
  max-width: 62%;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field.is-wrong {
  box-shadow: inset 0 -2px 0 rgba(178, 58, 29, 0.6), 0 6px 14px -10px rgba(90, 60, 30, 0.5);
}

.field.is-wrong .field__err {
  opacity: 1;
}

.field:focus-within,
.field.is-focus {
  box-shadow: 0 0 0 2px rgba(35, 58, 92, 0.18), 0 8px 18px -10px rgba(90, 60, 30, 0.55);
}

.mare__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.mare__note {
  font-size: clamp(10px, 1.2vmin + 5px, 13px);
  color: rgba(44, 36, 24, 0.6);
}

/* the send button: a coral pill with a little wave that rolls under the mouse */
.send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: clamp(40px, 6vmin + 10px, 52px);
  padding: 0 clamp(16px, 3vmin, 24px) 0 clamp(12px, 2.4vmin, 18px);
  border: 0;
  border-radius: 999px;
  background: var(--coral);
  color: #fff8ee;
  font: inherit;
  font-weight: 700;
  font-size: clamp(14px, 1.6vmin + 6px, 17px);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  transition: background-color 0.25s, transform 0.2s;
}

.send__wave {
  width: 1.4em;
  height: 0.9em;
  overflow: visible;
}

.send__wave path {
  fill: none;
  stroke: #fff8ee;
  stroke-width: 1.8;
  stroke-linecap: round;
  transition: transform 0.6s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.send__wave-low {
  opacity: 0.55;
}

@media (hover: hover) {
  .send:hover {
    background: #c94b2c;
  }
  .send:hover .send__wave path:first-child {
    transform: translateX(3px);
  }
  .send:hover .send__wave-low {
    transform: translateX(-2px);
  }
  .again:hover {
    background: rgba(226, 96, 63, 0.12);
  }
}

.send:focus-visible,
.again:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.send.is-pressed {
  transform: scale(0.96);
}

.send[disabled] {
  cursor: default;
}

/* ---------------------------------------------------------------- the end */
.done {
  display: grid;
  align-content: center;
  gap: clamp(6px, 1.6vmin, 12px);
  visibility: hidden;
}

.done__title {
  margin: 0;
  font-size: clamp(22px, 3.6vmin + 8px, 38px);
  font-weight: 780;
  font-stretch: 82%;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--sea);
}

.done__text {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(12px, 1.4vmin + 6px, 16px);
  line-height: 1.35;
  color: rgba(44, 36, 24, 0.75);
  overflow-wrap: anywhere;
}

.done__text span {
  font-weight: 700;
  color: var(--ink);
}

.again {
  justify-self: start;
  height: clamp(36px, 5vmin + 10px, 46px);
  padding: 0 clamp(14px, 2.6vmin, 20px);
  border: 2px solid var(--coral);
  border-radius: 999px;
  background: transparent;
  color: var(--coral);
  font: inherit;
  font-weight: 700;
  font-size: clamp(13px, 1.4vmin + 6px, 16px);
  cursor: pointer;
}

/* ---------------------------------------------------------------- a narrow card: the scene shrinks, the type tightens */
@media (max-width: 560px) {
  .mare {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 10px;
  }
  .mare__title {
    font-size: 16px;
  }
  .field__input {
    font-size: 19px;
  }
  .send {
    gap: 5px;
    padding: 0 12px 0 10px;
    font-size: 13px;
  }
  .mare__note {
    display: none;
  }
  .field__err {
    position: static;
    max-width: none;
    text-align: left;
    white-space: normal;
    display: none;
  }
  .field.is-wrong .field__err {
    display: block;
  }
}

@media (max-height: 520px) {
  .mare__form {
    gap: 5px;
  }
  textarea.field__input {
    height: 1.15em;
  }
}