/* The contact page: one white card, centred, on a sweep of the masthead band's
   colours, warm to PostLever's blue, coming down from the top right behind it
   and off the right edge. The card holds the whole form, with each label beside
   its field on a wide screen, and turns into the thank-you once it is sent.
   Buttons and words are optizmo.css's and type.css's. */

.contact-band {
  position: relative;
  overflow: hidden;
  padding-block: 6.5rem var(--space-24);
  background: var(--paper-ground);
}

/* The sweep: the band's colours, warm to PostLever's blue, in a soft diagonal from the top right,
   behind the card and out past the right edge, fading away to the lower left. Every edge is a
   mask's feather, never a cut, and it is gone well before the section's foot, so the footer's
   own line meets white. A faint sheen of fine lines along it stands for the band's fibres. */
.contact-sweep {
  position: absolute;
  top: 0;
  right: 0;
  width: 78%;
  height: calc(100% - 15rem);
  background:
    repeating-linear-gradient(130deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px),
    linear-gradient(215deg, #2563EB 4%, #8B8FF6 24%, #F7748F 44%, #FB8C5A 62%);
  -webkit-mask-image: radial-gradient(115% 100% at 100% 0%, #000 22%, rgba(0, 0, 0, 0.55) 48%, transparent 78%);
  mask-image: radial-gradient(115% 100% at 100% 0%, #000 22%, rgba(0, 0, 0, 0.55) 48%, transparent 78%);
  opacity: 0.8;
  pointer-events: none;
}
/* On a phone, a soft glow at the top right only. */
@media (max-width: 599px) {
  .contact-sweep {
    width: 100%;
    height: 26rem;
    -webkit-mask-image: radial-gradient(90% 85% at 100% 0%, #000 10%, rgba(0, 0, 0, 0.4) 45%, transparent 75%);
    mask-image: radial-gradient(90% 85% at 100% 0%, #000 10%, rgba(0, 0, 0, 0.4) 45%, transparent 75%);
    opacity: 0.6;
  }
}

.contact-card {
  position: relative;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-10) var(--space-10) var(--space-8);
  background: var(--paper-ground);
  border-radius: var(--radius-lg, 16px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 24px 60px -24px rgba(30, 41, 80, 0.32);
}
@media (max-width: 599px) {
  .contact-card { padding: var(--space-8) var(--space-5) var(--space-6); }
}
/* Hidden means gone, whatever display a part of the card is given. */
.contact-card [hidden] { display: none !important; }

.contact-head { margin-bottom: var(--space-6); }
.contact-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--font-extrabold);
  font-size: clamp(1.75rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.contact-lead { margin: 0; font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); }
.contact-noscript {
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--paper-band);
}

/* ---- the form: a label beside each field from 600px, above it below ---- */

.contact-form { display: grid; gap: var(--space-5); }
.contact-row {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
@media (min-width: 600px) {
  .contact-row {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .contact-label { padding-top: 0.65rem; }
}
.contact-label {
  float: none;
  padding: 0;
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: 1.35;
}
.contact-optional { display: block; font-weight: var(--font-regular, 400); font-size: var(--text-sm); color: var(--color-text-muted); }
.contact-control { display: grid; gap: var(--space-2); min-width: 0; }

.contact-control input,
.contact-control textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--paper-line-hi);
  border-radius: var(--radius-md);
  background: var(--paper-ground);
  font: inherit;
  color: var(--color-text);
}
.contact-control textarea { min-height: 140px; resize: vertical; }
.contact-control input:focus,
.contact-control textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.contact-control [aria-invalid="true"] { border-color: #B42318; }
.contact-error { margin: 0; font-size: var(--text-sm); color: #B42318; }

/* The chips: radio buttons drawn as pills, one choice each, the arrow keys moving between them. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--paper-line-hi);
  border-radius: 999px;
  background: var(--paper-ground);
  font-weight: var(--font-medium, 500);
  color: var(--color-text);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.chips-small .chip span { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.chip input:hover + span { border-color: var(--color-accent); }
.chip input:checked + span {
  border-color: var(--color-accent-strong);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--paper-ground));
  color: var(--color-accent-strong);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Off the page for people; something filling in every field still finds it. */
.contact-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-send { margin-top: var(--space-2); }
/* Send, with the privacy notice beside it on a wide screen and below it on a phone, kept quiet. */
.contact-submit-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
@media (max-width: 599px) {
  .contact-submit-line { flex-direction: column; align-items: stretch; }
  .contact-send > .contact-label { display: none; }
}
.contact-submit:disabled { opacity: 0.6; cursor: progress; }
.contact-note { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--color-text-muted); }
.contact-note a {
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
}
.contact-note a:hover,
.contact-note a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.contact-note a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* The failure notice: a line under Send in the danger colour with a small icon, no box. The
   address is in ink, and its copy button sits right after it, kept on its line. */
.contact-failed {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: #B42318;
  line-height: 1.5;
}
.contact-failed p { margin: 0; text-wrap: pretty; }
.contact-failed-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.contact-failed-dot { fill: currentColor; stroke: none; }
.contact-address-line { white-space: nowrap; }
.contact-address {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  user-select: all;
  -webkit-user-select: all;
}
.contact-copy {
  display: inline;
  margin-left: 0.375rem;
  padding: 0.1rem 0.3rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.contact-copy svg {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-copy:hover { color: var(--color-text); }
.contact-copy:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- the thank-you ---- */

.contact-done-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--font-extrabold);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  letter-spacing: -0.03em;
}
.contact-done-title:focus { outline: none; }
.contact-done-lead { margin: 0 0 var(--space-8); font-size: var(--text-lg); color: var(--color-text-muted); }
.contact-done-lead strong { color: var(--color-text); }
.contact-next-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
}
.contact-next {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
  counter-reset: next;
}
.contact-next li {
  position: relative;
  padding-left: 2.25rem;
  counter-increment: next;
  line-height: 1.5;
  color: var(--color-text);
}
.contact-next li::before {
  content: counter(next);
  position: absolute;
  left: 0;
  top: -0.05rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--paper-ground));
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}