/* ============================================================
   CARPCORE — carpcore-contact.css
   Contact form built on the Nishikigoi Herbiary paper system.
   Inherits .cc-herb (paper, ink palette, halftone texture, hard-
   offset depth scale, wonky radii, #rough edges, fonts).
   HARD RULES (same as the system): no gradients, no blurred drop
   shadows, no glossy bevels. Depth = flat hard-offset shadows +
   hand-cut radii + overlap. Screen-printed, handcrafted — not UI.
   ============================================================ */

.cc-herb.cc-ct { padding-block: clamp(40px, 6vw, 80px); }

.cc-ct__in { max-width: 860px; margin-inline: auto; }

/* ── heading block ── */
.cc-ct__head {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  margin-bottom: clamp(26px, 4vw, 44px);
}
.cc-ct__intro { max-width: 54ch; }

/* ── form card: a taped sheet of paper ── */
.cc-ct__card {
  position: relative;
  background: var(--paper-l);
  border: 3px solid var(--ink);
  box-shadow: var(--sh-lg);
  border-radius: 13px 7px 15px 8px;
  padding: clamp(24px, 4vw, 44px);
}
.cc-ct__tape {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-2.4deg);
  width: 128px; height: 26px;
  background: rgb(var(--color-brand-white-rgb) / .45);
  border: 1px solid rgb(var(--color-foreground-rgb) / .3);
}

/* ── fields ── */
.cc-ct__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 26px); }
.cc-ct__field { display: flex; flex-direction: column; gap: 9px; }
.cc-ct__field--full { grid-column: 1 / -1; }

.cc-ct__label {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink);
}
.cc-ct__mark { width: 10px; height: 10px; border: 2px solid var(--ink); flex: none; }
.cc-ct__mark--coral { background: var(--coral); }
.cc-ct__mark--cer   { background: var(--cer); }
.cc-ct__mark--lime  { background: var(--lime); }

/* recessed paper field — depth is a HARD inset offset, no blur, no gloss */
.cc-ct__input {
  width: 100%;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 8px 5px 9px 6px;
  padding: 12px 14px;
  box-shadow: inset 3px 3px 0 rgb(var(--color-foreground-rgb) / .10);
  outline: none;
}
.cc-ct__input::placeholder { color: rgb(var(--color-foreground-rgb) / .4); font-weight: 600; }
.cc-ct__input:focus { border-color: var(--cer); background: var(--color-brand-white); }
.cc-ct__input:focus-visible { outline: 3px solid var(--cer); outline-offset: 2px; }
.cc-ct__input--area { resize: vertical; min-height: 156px; line-height: 1.5; }

/* ── foot ── */
.cc-ct__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 26px; flex-wrap: wrap;
}
.cc-ct__note {
  font-family: 'VT323', monospace;
  font-size: 17px; letter-spacing: .04em;
  color: var(--navy);
}
.cc-ct__send { font-size: 13px; }

/* ── flash messages ── */
.cc-ct__flash {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px; padding: 12px 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 9px 6px 10px 7px;
  box-shadow: var(--sh-sm);
}
.cc-ct__flash-msg {
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: .95rem;
  color: var(--ink); line-height: 1.4;
}

/* ── mobile ── */
@media (max-width: 760px) {
  .cc-ct__grid { grid-template-columns: 1fr; }
  .cc-ct__foot { justify-content: center; }
  .cc-ct__note { order: 2; width: 100%; text-align: center; }
  .cc-ct__send { order: 1; width: 100%; justify-content: center; }
}