/* Contact — a fresh sheet torn out of the sketchbook, taped to the wall. */

.page-contact { background: var(--primer); }

.c-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(118px, 17vh, 180px) var(--gutter) clamp(80px, 14vh, 150px);
}
.c-title { font-size: clamp(3.4rem, 1.6rem + 6.6vw, 8.4rem); }
.c-note { display: inline-block; margin-top: 14px; font-size: 1.35rem; color: var(--pink-ink); transform: rotate(-3deg); }
.c-lede { max-width: 26rem; margin-top: 24px; font-size: var(--fs-lead); line-height: 1.3; font-weight: 560; }
.c-direct {
  display: grid;
  gap: 14px;
  margin: 40px 0 0;
}
.c-direct > div { display: grid; gap: 2px; }
.c-direct dt { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--ink-soft); }
.c-direct dd { margin: 0; font-weight: 650; font-size: 1.25rem; overflow-wrap: anywhere; }

/* the sheet */
.c-sheet-wrap { position: relative; }
.c-sheet {
  position: relative;
  padding: clamp(32px, 4vw, 54px) clamp(22px, 4vw, 56px) clamp(30px, 4vw, 46px) clamp(36px, 5.5vw, 76px);
  background-color: #fff;
  background-image:
    linear-gradient(90deg, transparent calc(clamp(22px, 3.6vw, 48px) - 1px), rgba(232, 38, 28, .5) calc(clamp(22px, 3.6vw, 48px) - 1px) clamp(22px, 3.6vw, 48px), transparent clamp(22px, 3.6vw, 48px)),
    repeating-linear-gradient(180deg, transparent 0 37px, rgba(36, 72, 230, .14) 37px 38px);
  border: 4px solid var(--ink);
  border-radius: 4px;
  box-shadow: 14px 16px 0 var(--ink);
  transform: rotate(.9deg);
}
.c-sheet .tape--tl { top: -13px; left: 8%; transform: rotate(-6deg); }
.c-sheet .tape--tr { top: -11px; right: 10%; transform: rotate(5deg); }
.c-sheet__title {
  font-weight: 760;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.c-sheet__sub { margin-top: 8px; color: var(--ink-soft); }

.field { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend {
  display: block;
  padding: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
}
.field input, .field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 4px 9px;
  font-size: 1.15rem;
  line-height: 1.45;
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--ink);
  border-radius: 0;
  outline: none;
  transition: border-color .2s, background-color .2s;
}
.field textarea { min-height: 9.5em; resize: vertical; border: 3px solid var(--ink); border-radius: 4px; padding: 10px 12px; background: rgba(255, 255, 255, .7); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--cobalt); background: rgba(255, 200, 36, .16); }
.field input::placeholder, .field textarea::placeholder { color: #8f889b; }
.field [aria-invalid="true"] { border-color: var(--red); }
.field__error { margin-top: 6px; font-weight: 650; font-size: .98rem; color: #b5170f; }

.chips { display: flex; flex-wrap: wrap; gap: 10px 10px; }
.chips legend { width: 100%; margin-bottom: 10px; float: left; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block;
  padding: .35em .75em .42em;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.1;
  background: var(--primer);
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  cursor: pointer;
  transition: transform .25s var(--ease-pop), background-color .15s, box-shadow .25s var(--ease-pop);
}
.chip:hover span { transform: translateY(-2px) rotate(-1deg); }
.chip input:checked + span { background: var(--chip, var(--halo)); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.5deg); }
.chip input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.chip:nth-of-type(5n+1) { --chip: var(--halo); }
.chip:nth-of-type(5n+2) { --chip: var(--pink); }
.chip:nth-of-type(5n+3) { --chip: var(--teal); }
.chip:nth-of-type(5n+4) { --chip: #ffb35c; }
.chip:nth-of-type(5n+5) { --chip: #b9a3ff; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 30px; }
.c-send { font-size: 1.6rem; padding: .45em 1.2em .5em; }
.c-status { flex: 1 1 14rem; font-weight: 600; min-height: 1.4em; }
.c-status.is-error { color: #b5170f; }

/* sent: a tag sprayed across the sheet */
.c-sheet.is-sent .c-fields { opacity: .12; pointer-events: none; transition: opacity .4s; }
.c-sent {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}
.c-sent svg { width: min(88%, 520px); overflow: visible; }
.c-sent .tag-fill { fill: var(--pink); stroke: var(--ink); stroke-width: 7; paint-order: stroke fill; }
.c-sent .tag-drip { fill: var(--pink); }
.c-sent p { max-width: 24rem; font-weight: 650; font-size: 1.2rem; }
.js .c-sent svg { transform: scale(1.6) rotate(-10deg); opacity: 0; }
.c-sheet.is-sent .c-sent svg { transform: rotate(-6deg); opacity: 1; transition: transform .55s var(--ease-pop), opacity .15s; }
.c-sent .tag-drip { transform: scaleY(0); transform-origin: top; transform-box: fill-box; }
.c-sheet.is-sent .c-sent .tag-drip { transform: scaleY(1); transition: transform 1.2s var(--ease-out) .5s; }

@media (max-width: 860px) {
  .c-wrap { grid-template-columns: 1fr; padding-top: 104px; }
  .c-sheet { transform: none; box-shadow: 9px 10px 0 var(--ink); }
}