/* Project inquiry: a fill-in-the-blank letter, typed up on a typewriter.
   Palette from the manifesto, deepened so every color passes WCAG AA (4.5:1)
   on the paper color. */
@font-face { font-family: "Courier Prime"; src: url("fonts/CourierPrime-Regular-v11.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/CourierPrime-Italic-v11.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Homemade Apple"; src: url("fonts/HomemadeApple-Regular-v24.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/CourierPrime-Bold-v11.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

.inq {
  --inq-blue: #3b68b2;    /* 5.1:1 on paper */
  --inq-red: #c40000;     /* 5.8:1 */
  --inq-purple: #94458f;  /* 5.5:1 */
  --inq-olive: #6b6820;   /* 5.4:1 */
  --inq-teal: #236b7a;    /* 5.6:1 */
  --inq-orange: #a84e00;  /* 5.2:1 */
  --inq-ink: #111;
  --inq-muted: #5c5852;   /* 6.5:1 */
  --inq-placeholder: #6b665e; /* 5.3:1 */
  --inq-paper: #f7f6f2;   /* same cream the contact banner used */
  --inq-rule: #e2ddd2;
  --inq-type: "Courier Prime", "Courier New", Courier, monospace;
  --inq-serif: var(--inq-type);
  --inq-serif-italic: var(--inq-type);
  --inq-sans: var(--inq-type);
  position: relative;
  max-width: 920px;
  margin: -75px auto 0;   /* pulled 75px up, closer to the "Project Inquiry" heading */
  perspective: 1600px;
  font-family: var(--inq-type);
}
/* The theme sets `* { font-family: Suisse Intl }`; let type inherit inside the
   inquiry instead. Rules below that name a font still win (declared later). */
.inq * { font-family: inherit; font-style: inherit; }
.inq__letter p { font-size: inherit; line-height: inherit; }

.inq__card {
  position: relative;
  background: var(--inq-paper);
  border-radius: 20px;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 6vw, 80px) clamp(28px, 5vw, 56px);
  box-shadow: 0 1px 0 var(--inq-rule), 0 30px 60px -30px rgba(17, 17, 17, .25);
  transform-origin: 50% 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s;
}

/* ---- stamp / progress ---- */
.inq__stamp {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 74px;
  padding: 10px 8px 6px;
  display: grid;
  justify-items: center;
  gap: 4px;
  background: #fff;
  border: 2px dashed var(--inq-rule);
  border-radius: 6px;
  transform: rotate(6deg);
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), border-color .4s;
}
.inq__stamp img { width: 34px; height: auto; display: block; filter: grayscale(1); opacity: .45; transition: filter .4s, opacity .4s; }
.inq__stamp-count { font: 500 12px/1 var(--inq-sans); letter-spacing: .04em; color: var(--inq-muted); font-variant-numeric: tabular-nums; }
.inq.is-complete .inq__stamp { border-color: var(--inq-red); transform: rotate(-4deg) scale(1.08); }
.inq.is-complete .inq__stamp img { filter: none; opacity: 1; }
.inq.is-complete .inq__stamp-count { color: var(--inq-red); }

.inq__kicker {
  font: 500 13px/1.3 var(--inq-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inq-muted);
  margin: 0 90px 28px 0;
}

/* ---- the letter ---- */
.inq__letter {
  font-family: var(--inq-serif);
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.9;
  color: var(--inq-muted);
}
.inq__letter p { margin: 0 0 .9em; }

.inq__ph { transition: color .6s ease; }
.inq__ph[data-color="blue"]   { --c: var(--inq-blue); }
.inq__ph[data-color="red"]    { --c: var(--inq-red); }
.inq__ph[data-color="purple"] { --c: var(--inq-purple); }
.inq__ph[data-color="olive"]  { --c: var(--inq-olive); }
.inq__ph[data-color="teal"]   { --c: var(--inq-teal); }
.inq__ph[data-color="orange"] { --c: var(--inq-orange); }
.inq__ph.is-done { color: var(--c); }
.inq__ph.is-done.is-pop .inq__blank,
.inq__ph--block.is-done.is-pop .inq__lines { animation: inq-pop .5s cubic-bezier(.3, 1.8, .5, 1); }
.inq__blank { display: inline-block; }

@keyframes inq-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08) rotate(-1.5deg); }
  100% { transform: scale(1); }
}

/* inline blanks */
.inq__blank {
  font: inherit;
  color: var(--c, var(--inq-ink));
  background: transparent;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  padding: 0 .1em;
  margin: 0 .05em;
  min-width: 3ch;
  max-width: 100%;
  line-height: 1.2;
  vertical-align: baseline;
  outline: none;
  transition: border-color .2s, background-color .2s;
  -webkit-appearance: none;
  appearance: none;
}
.inq__ph:not(.is-done) .inq__blank { color: var(--inq-ink); border-bottom-color: var(--inq-muted); }
.inq__blank::placeholder { color: var(--inq-placeholder); opacity: 1; font-style: italic; }
.inq__blank:focus {
  border-bottom-color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}

/* textareas on ruled lines */
.inq__ph--block { display: block; margin: 0 0 1.1em; }
.inq__ph--block > label:not(.inq__sticker), .inq__stickers legend { display: block; }
.inq__lines {
  display: block;
  width: 100%;
  margin-top: .2em;
  font: inherit;
  font-size: .8em;
  line-height: 1.75em;
  color: var(--inq-ink);
  background: transparent repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.75em - 2px), var(--inq-rule) calc(1.75em - 2px), var(--inq-rule) 1.75em);
  border: 0;
  padding: 0 .1em;
  border-radius: 0;
  box-shadow: none;
  resize: none;
  overflow: hidden;
  outline: none;
  min-height: 3.5em;
}
.inq__lines::placeholder { color: var(--inq-placeholder); opacity: 1; font-style: italic; }
.inq__lines:focus { background-color: color-mix(in srgb, var(--c) 6%, transparent); }
.inq__ph.is-done .inq__lines { color: var(--c); }

.inq__hint { font: italic 400 .6em/1 var(--inq-sans); letter-spacing: .02em; color: var(--inq-muted); vertical-align: middle; }

/* rubber-stamp tag, e.g. "Optional" */
.inq__tag {
  display: inline-block;
  margin-left: .4em;
  padding: .3em .6em .25em;
  font-size: .5em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inq-blue);
  border: 2px solid currentColor;
  border-radius: 4px;
  vertical-align: .35em;
  transform: rotate(-4deg);
}

/* ---- stickers ---- */
.inq__stickers { border: 0; padding: 0; margin: 0 0 1.2em; min-width: 0; }
.inq__stickers legend { padding: 0; margin-bottom: .4em; }
.inq__sticker {
  display: inline-block;
  position: relative;
  margin: .25em .35em .25em 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.inq__sticker input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.inq__sticker span {
  display: inline-block;
  font: 500 clamp(14px, 1.5vw, 17px)/1.2 var(--inq-sans);
  padding: .7em 1.1em;
  border-radius: 999px;
  border: 2px dashed color-mix(in srgb, var(--c) 55%, transparent);
  color: var(--c);
  background: transparent;
  transform: rotate(0);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  user-select: none;
}
.inq__sticker:hover span { transform: rotate(calc(var(--tilt, 0) * .5deg)) translateY(-2px); }
.inq__sticker input:checked + span {
  background: var(--c);
  color: #fff;
  border: 2px solid var(--c);
  transform: rotate(calc(var(--tilt, 0) * 1deg));
  box-shadow: 0 6px 0 -2px rgba(17, 17, 17, .15);
  animation: inq-slap .45s cubic-bezier(.3, 1.6, .5, 1);
}
.inq__sticker input:focus-visible + span { outline: 3px solid var(--inq-ink); outline-offset: 3px; }
@keyframes inq-slap {
  0% { transform: scale(1.35) rotate(calc(var(--tilt, 0) * -2deg)); box-shadow: 0 18px 24px -6px rgba(17, 17, 17, .25); }
  100% { transform: scale(1) rotate(calc(var(--tilt, 0) * 1deg)); }
}

/* ---- sign-off ---- */
.inq__signoff { color: var(--inq-ink); margin-top: 1.4em !important; }
.inq__signature {
  display: inline-block;
  font-family: "Homemade Apple", "Bradley Hand", cursive;
  font-style: normal;
  font-size: 1.15em;
  line-height: 1.6;
  margin-top: .25em;
  color: var(--inq-placeholder);
  transform: rotate(-4deg);
  transform-origin: left center;
  transition: color .4s, opacity .4s;
}
.inq__signature.is-signed { color: var(--inq-blue); opacity: 1; }

/* ---- send ---- */
.inq__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 24px; margin-top: 12px; }
.inq__send {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font: 700 18px/1 var(--inq-sans);
  color: #fff;
  background: var(--inq-ink);
  border: 0;
  border-radius: 999px;
  padding: 18px 28px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background-color .3s;
}
.inq__send:hover { transform: translateY(-2px) rotate(-1deg); }
.inq__send:active { transform: scale(.96); }
.inq__send:focus-visible { outline: 3px solid var(--inq-blue); outline-offset: 3px; }
.inq.is-complete .inq__send { background: var(--inq-red); }
.inq__send-icon { display: inline-block; transition: transform .3s; }
.inq__send:hover .inq__send-icon { transform: translateX(4px); }
.inq__send[disabled] { opacity: .6; cursor: progress; }
.inq__error { flex: 1 1 260px; margin: 0; font: 400 15px/1.4 var(--inq-sans); color: var(--inq-red); }

/* missing-field nudge */
.inq .is-missing .inq__blank, .inq .is-missing.inq__lines, .inq__stickers.is-missing legend { animation: inq-shake .45s; }
.inq .is-missing .inq__blank { border-bottom-color: var(--inq-red) !important; background: color-mix(in srgb, var(--inq-red) 8%, transparent); }
.inq__ph--block.is-missing .inq__lines { background-color: color-mix(in srgb, var(--inq-red) 6%, transparent); }
.inq__stickers.is-missing legend { color: var(--inq-red); }
@keyframes inq-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* honeypot */
.inq__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---- sending: the letter folds and flies off ---- */
.inq.is-sending .inq__card { animation: inq-fold 1.1s cubic-bezier(.6, 0, .4, 1) forwards; pointer-events: none; }
@keyframes inq-fold {
  0%   { transform: none; }
  30%  { transform: rotateX(28deg) scale(.92); }
  55%  { transform: rotateX(60deg) scale(.6) rotate(-3deg); opacity: 1; }
  100% { transform: translate(40vw, -60vh) rotateX(70deg) rotate(18deg) scale(.15); opacity: 0; }
}
.inq.is-returning .inq__card { animation: inq-return .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes inq-return { from { transform: translateY(40px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }

.inq__done {
  text-align: center;
  padding: clamp(40px, 10vw, 120px) 20px;
  outline: none;
}
.inq__done:not([hidden]) { animation: inq-return .7s cubic-bezier(.2, .8, .2, 1) both; }
.inq__done-big { font: 400 clamp(44px, 8vw, 96px)/1.05 var(--inq-serif); color: var(--inq-ink); margin: 0 0 .3em; }
.inq__done-big span { color: var(--inq-blue); }
.inq__done-small { font: 400 18px/1.5 var(--inq-sans); color: var(--inq-muted); margin: 0; }

/* confetti: shapes from the Basis "B" mark */
.inq-confetti { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; will-change: transform, opacity; }

@media (max-width: 640px) {
  .inq__card { border-radius: 14px; }
  .inq__stamp { width: 58px; padding: 8px 6px 5px; }
  .inq__stamp img { width: 26px; }
  .inq__kicker { margin-right: 70px; }
  .inq__actions { justify-content: stretch; }
  .inq__send { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .inq *, .inq *::before, .inq *::after { animation: none !important; transition: none !important; }
  .inq.is-sending .inq__card { opacity: 0; }
}

/* thank-you postmark: their city + today's date, stamped on at an angle */
.inq__done { position: relative; }
.inq__postmark {
  width: 132px; height: 132px; margin: 0 auto 18px; border-radius: 50%;
  border: 3px double var(--inq-blue); color: var(--inq-blue);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font: 700 11px/1.15 var(--inq-sans); letter-spacing: .08em; text-align: center; padding: 14px;
  transform: rotate(-12deg); opacity: .85;
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(59,104,178,.10) 9px 11px);
}
.inq__postmark-date { border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; padding: 3px 4px; }
.inq__done:not([hidden]) .inq__postmark { animation: inq-stamp .45s cubic-bezier(.3, 1.6, .5, 1) .35s both; }
@keyframes inq-stamp { from { transform: rotate(-12deg) scale(1.9); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .inq__done:not([hidden]) .inq__postmark { animation: none; } }