/* ═══════════════════════════════════════════════════════════════════════
   RASTA Collective — application form
   ═══════════════════════════════════════════════════════════════════════ */

.apply {
  position: relative;
  padding-block: var(--section-y);
  border-top: 2px solid var(--rule-on-light);
}

.apply__inner {
  width: min(100% - var(--gutter) * 2, 900px);
  margin-inline: auto;
}

.apply__head { margin-bottom: var(--s-8); }
.apply__title { font-size: var(--t-h2); color: var(--ink); }
.apply__lead {
  margin-top: var(--s-3);
  font-size: var(--t-lead);
  color: var(--text-on-light-dim);
}

.form { display: grid; gap: var(--s-6); }


/* ── Question blocks ────────────────────────────────────────────────────
   Each question is a card carrying its own number, sharing the About
   section's chapter numbering. Four numbered steps read as a short, finite
   task; the same controls in one undivided column read as a long form. */

.q {
  position: relative;
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  padding-left: clamp(var(--s-7), 6vw, 84px);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--rule-on-light);
  border-radius: var(--radius);
  display: grid;
  gap: var(--s-4);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

/* The block the user is actually working in lifts off the page — a shadow and
   a maroon edge, not a darker outline. Darkening the border was the same move
   as the browser's own focus rectangle one level up, so the active card and
   the active field ended up shouting the same word twice. */
.q:focus-within {
  background: #fff;
  border-color: rgba(26, 22, 20, .12);
  box-shadow: 0 1px 2px rgba(26, 22, 20, .05),
              0 18px 40px -24px rgba(26, 22, 20, .38);
}

/* Which question you are in, read from the far edge of the card. Scales from
   the top so it draws downward rather than fading in place. */
.q::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.q:focus-within::after { transform: scaleY(1); }

.q::before {
  content: attr(data-step);
  position: absolute;
  top: clamp(var(--s-5), 3vw, var(--s-7));
  left: clamp(var(--s-4), 2.4vw, var(--s-5));
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--red);
  opacity: .55;
  transition: opacity var(--dur-base) var(--ease-out);
}
.q:focus-within::before { opacity: 1; }

.q__title { margin: 0; }

/* The fieldset variant already carries .either's own grid + rule; the card
   supersedes both. */
fieldset.q { border: 1px solid var(--rule-on-light); padding-top: clamp(var(--s-5), 3vw, var(--s-7)); }


/* ── Fields ─────────────────────────────────────────────────────────────── */

.field-row { display: grid; gap: var(--s-5); }

.field { display: grid; gap: var(--s-2); align-content: start; }

.field label {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
}

/* The questions are the voice of the form — they carry the weight.
   Scoped through .q so it outranks `.field label`, which is a class plus an
   element and would otherwise win against a lone class and flatten any
   question that happens to be a <label> back to a caption. */
.q .q__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

/* Stated in text, never colour alone. */
.req {
  font-weight: 500;
  color: var(--text-on-light-dim);
  text-transform: none;
  letter-spacing: 0;
}

/* On a field label this is small body type already. On a question title it
   inherits Anton at h3 size, where "(optional)" shouts as loudly as the
   question — so on those it becomes a tag riding the cap height instead. */
.q__title .req {
  font-family: var(--font-body);
  font-size: .46em;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  vertical-align: .42em;
  margin-left: .2em;
}

.field__hint,
.either__hint {
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--text-on-light-dim);
}

.field__error {
  display: flex;
  gap: .5em;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--red);
}
.field__error::before { content: "▲"; font-size: .8em; line-height: 1.8; }

/* Ruled, not boxed. A page of identical outlined rectangles is what made the
   form read as dead; an underline that thickens and darkens under the cursor
   gives each field a state to be in without adding another rectangle. */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
textarea {
  width: 100%;
  /* Shorter than a boxed control: with no box, the height reads as dead space
     between the label and its rule rather than as the control itself. */
  min-height: 42px;
  padding: var(--s-1) 0 var(--s-2);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--rule-on-light);
  border-radius: 0;
  color: var(--text-on-light);
  font-size: var(--t-lead);
  transition: border-color var(--dur-fast) var(--ease-out);
}
textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: var(--lh-body);
  font-size: var(--t-body);
  padding: var(--s-3);
  border: 2px solid var(--rule-on-light);
  background: #fff;
}

input:hover, textarea:hover { border-color: rgba(26, 22, 20, .35); }

/* No ring on the text controls at all. On a ruled field the outline draws a
   rectangle around a box that is deliberately invisible — a floating border
   enclosing nothing, which is exactly what it looked like. The rule itself is
   the control, so the rule is what takes the focus state: it goes maroon and
   gains a soft second line beneath it. Both a colour change well past 3:1 and
   a change in thickness, so it is not carried by colour alone. */
input:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--red);
}
input:focus-visible  { box-shadow: 0 2px 0 0 rgba(160, 14, 14, .2); }
textarea:focus-visible { box-shadow: 0 0 0 4px rgba(160, 14, 14, .1); }

/* Mouse users get the same treatment; only the ring is :focus-visible-gated. */
input:focus, textarea:focus { border-color: var(--red); }

::placeholder { color: #A6998F; opacity: 1; }

[aria-invalid="true"] { border-color: var(--red) !important; }
input[aria-invalid="true"] { background: linear-gradient(rgba(160, 14, 14, .05), rgba(160, 14, 14, .05)); }

.either.has-error textarea,
.either.has-error input[type="url"] { border-color: var(--red); }
.either.has-error .dropzone {
  border-color: var(--red);
  border-style: solid;
  background: linear-gradient(rgba(160, 14, 14, .05), rgba(160, 14, 14, .05));
}


/* ── Either/or ──────────────────────────────────────────────────────────── */

.either {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  min-width: 0;   /* fieldsets default to min-content sizing and would
                     otherwise refuse to shrink inside the grid */
}

/* Real radios, styled as a segmented switch: arrow-key traversal, a shared
   group name and :checked styling all come free, and none of it would with
   buttons. The inputs stay focusable (sr-only is clip-path, not display:none). */
.either__switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.either__switch input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  clip-path: inset(50%);
}
.either__switch label {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--s-5);
  border: 2px solid var(--rule-on-light);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text-on-light-dim);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.either__switch label:hover { border-color: var(--ink); color: var(--ink); }

.either__switch input:checked + label {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}
/* The ring has to follow the hidden input onto its visible label. */
.either__switch input:focus-visible + label {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 var(--focus-halo-w) var(--focus-halo);
}

.either__or {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-on-light-dim);
  padding-inline: var(--s-1);
}

.either__panel { display: grid; gap: var(--s-2); }
.either__panel[hidden] { display: none; }


/* ── Dropzone ───────────────────────────────────────────────────────────── */

.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--s-3);
  min-height: 132px;
  padding: var(--s-5);
  background: #fff;
  border: 2px dashed var(--rule-on-light);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
/* An arrow rising out of a tray. Carried as a mask over a solid brand fill
   rather than an <img> or three copies of inline SVG: it stays one rule, it
   inherits the palette, and there is no extra request. Same flat, square-cap
   register as the crop marks already composited into the banner artwork. */
.dropzone::before {
  content: "";
  width: 30px;
  height: 30px;
  background: var(--red);
  -webkit-mask: var(--upload-icon) center / contain no-repeat;
          mask: var(--upload-icon) center / contain no-repeat;
  transition: transform var(--dur-base) var(--ease-out);
}
:root {
  --upload-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M12 15V3M7 8l5-5 5 5M3 16v5h18v-5'/%3E%3C/svg%3E");
}
.dropzone:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.dropzone:hover::before { transform: translateY(-3px); }

/* The real <input type=file> is sr-only, so the ring has to be relayed here
   or a keyboard user gets no focus indication on any upload control. */
.dropzone:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 var(--focus-halo-w) var(--focus-halo);
  border-color: var(--red);
  border-style: solid;
}
.dropzone.is-over {
  border-color: var(--red);
  border-style: solid;
  background: #fff;
}

.dropzone__cta {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text-on-light);
}
.dropzone__cta u { text-decoration-thickness: 2px; text-underline-offset: 3px; }


/* ── File chips ─────────────────────────────────────────────────────────── */

.chips { display: grid; gap: var(--s-2); }
.chips:empty { display: none; }

.chip {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}
.chip__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-small);
  font-weight: 600;
}
.chip__size {
  flex: 0 0 auto;
  font-size: var(--t-micro);
  color: var(--text-on-light-dim);
  font-variant-numeric: tabular-nums;
}
.chip__remove {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-on-light-dim);
  cursor: pointer;
}
.chip__remove:hover { background: var(--red); color: var(--paper); }


/* ── Foot ───────────────────────────────────────────────────────────────── */

.form__foot {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  padding-top: var(--s-7);
  border-top: 2px solid var(--rule-on-light);
}

.form__summary {
  display: flex;
  gap: .5em;
  padding: var(--s-3) var(--s-4);
  width: 100%;
  background: #FFF1EF;
  border-left: 4px solid var(--red);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--red-deep);
}

.btn--submit { min-width: 220px; }
.btn--submit.is-busy { pointer-events: none; }

.form__legal { font-size: var(--t-micro); color: var(--text-on-light-dim); max-width: 52ch; }


/* ── Thank you ──────────────────────────────────────────────────────────── */

.thanks {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  padding: var(--s-8) 0;
}
.thanks[hidden] { display: none; }
.thanks:focus-visible { outline-offset: 8px; }

.thanks__mark {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 1;
  color: var(--red);
}
.thanks__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: var(--lh-display);
  text-transform: uppercase;
  color: var(--ink);
}
.thanks__body { max-width: 52ch; color: var(--text-on-light-dim); }
.thanks__body strong { color: var(--ink); font-weight: 700; }
.thanks__body--quiet { font-size: var(--t-small); }


/* ── ≥640 ───────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row .field:last-child { grid-column: 1 / -1; }
}

/* ── ≥1024: name / phone / email across ─────────────────────────────────── */
@media (min-width: 1024px) {
  .field-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-row .field:last-child { grid-column: auto; }
}

/* Touch: no hover affordances to lean on, so make the targets unmissable. */
@media (hover: none) {
  .dropzone { min-height: 140px; }
  .dropzone:hover { border-color: var(--rule-on-light); background: rgba(255, 255, 255, .6); }
  .chip__remove { width: var(--tap-min); height: var(--tap-min); }
}