/* PROVI — contact, and the shared field styles the intake page reuses.

   Fields are numbered like a spec sheet. The studio's vocabulary is drawings,
   provisions and foresight, and a numbered sheet is what that language looks
   like applied to a form. intake.html loads this file too, so a field there
   looks exactly like the field that carried its answer across. */

/* Any display rule below would otherwise beat the hidden attribute, and the
   form, the conditional fields and the sent notice all rely on it. */
[hidden]{display:none !important}

.ct-head{padding-block:clamp(3.5rem,11vh,7rem) clamp(1.5rem,4vh,2.5rem)}
.ct-head .display{max-width:16ch}
.ct-head .lede{max-width:42rem}

.ct-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
  padding-bottom:clamp(4rem,11vh,7rem);
}
@media(min-width:940px){
  .ct-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}

/* ---------- fields ---------- */
.ct-form{display:grid;gap:0}

/* border:0 first, because some of these are <fieldset>s, which carry a UA
   border and padding. min-width:0 because a fieldset defaults to min-content
   and will not shrink inside a grid column without it. */
.ct-field{
  border:0;
  border-top:1px solid var(--line);
  margin:0;
  padding:1.4rem 0;
  min-width:0;
}
legend.ct-label{padding:0;width:100%;display:flex}
/* The last field closes with a rule. :last-of-type cannot do this: it matches
   by element, and a <fieldset> followed by <div>s (and a honeypot div, and
   the send row) put the closing line in the wrong places. */
.ct-field:not(:has(~ .ct-field)){border-bottom:1px solid var(--line)}

.ct-label{
  display:flex;align-items:baseline;gap:.7rem;
  margin-bottom:.7rem;
  font-size:.9rem;color:var(--paper);
}
.ct-num{
  font-family:var(--font-display);font-weight:400;
  font-size:.62rem;letter-spacing:.18em;
  color:var(--accent-text);
  flex:none;
}
.ct-opt{
  margin-left:auto;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-faint);
}

.ct-input,.ct-textarea,.ct-select{
  width:100%;
  background:rgba(10,10,12,.55);
  border:1px solid var(--line-strong);
  color:var(--paper);
  font:inherit;font-size:1rem;
  padding:.8rem .9rem;
  border-radius:2px;
  transition:border-color .2s,background-color .2s;
}
.ct-textarea{resize:vertical;min-height:7rem;line-height:1.6}
.ct-input::placeholder,.ct-textarea::placeholder{color:var(--paper-faint)}
.ct-input:hover,.ct-textarea:hover{border-color:var(--accent-dim)}
.ct-input:focus,.ct-textarea:focus{
  border-color:var(--accent);
  background-color:rgba(242,241,236,.04);
  outline:none;
}

/* Errors appear only after a submit attempt, and clear as soon as the field
   becomes valid. */
.ct-err{display:none;margin-top:.5rem;font-size:.76rem;color:#C9A0A0}
.ct-field.is-invalid .ct-err{display:block}
.ct-field.is-invalid .ct-input,
.ct-field.is-invalid .ct-textarea{border-color:#8A5A5A}

/* The honeypot. Off screen rather than display:none, because some bots skip
   fields that are not rendered. */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- the path chooser ----------
   Radios as cards: the difference between the two is worth a sentence each,
   which a native radio row has nowhere to put. */
.ct-paths{display:grid;gap:.6rem}
@media(min-width:560px){.ct-paths{grid-template-columns:repeat(2,1fr)}}
.ct-path{
  position:relative;overflow:hidden;
  border:1px solid var(--line-strong);
  padding:.8rem .85rem;cursor:pointer;
  transition:border-color .2s,background-color .2s;
}
.ct-path:hover{border-color:var(--accent-dim)}
.ct-path input{position:absolute;opacity:0;pointer-events:none}
.ct-path b{
  display:block;font-weight:500;font-size:.88rem;color:var(--paper);
  margin-bottom:.2rem;
}
.ct-path span{display:block;font-size:.74rem;line-height:1.45;color:var(--paper-dim)}
.ct-path:has(input:checked){border-color:var(--accent);background-color:var(--accent-soft)}
.ct-path:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.ct-path > *{position:relative;z-index:1}

/* ---------- send ---------- */
.ct-send{margin-top:1.8rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.ct-send .btn{min-width:16rem;justify-content:center}
.ct-send .btn:disabled{opacity:.6;cursor:progress}
.ct-note{margin-top:1rem;font-size:.8rem;line-height:1.6;color:var(--paper-dim)}
.ct-note:empty{display:none}
.ct-note a{color:var(--accent-text);border-bottom:1px solid var(--accent-dim)}

/* ---------- beside the form ---------- */
.ct-side{
  border:1px solid var(--line);
  background:rgba(20,20,22,.5);
  padding:clamp(1.1rem,2vw,1.6rem);
}
@media(min-width:940px){.ct-side{position:sticky;top:calc(var(--nav-h) + 1.5rem)}}
.ct-next h3{
  font-family:var(--font-display);font-weight:400;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-text);
  padding-bottom:.8rem;margin-bottom:.9rem;
  border-bottom:1px solid var(--accent-dim);
}
.ct-next ol{margin:0;padding:0;list-style:none;counter-reset:step}
.ct-next li{
  counter-increment:step;
  position:relative;padding-left:1.6rem;margin-bottom:.7rem;
  font-size:.84rem;line-height:1.6;color:var(--paper-dim);
}
.ct-next li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:.1rem;
  font-family:var(--font-display);font-size:.58rem;letter-spacing:.1em;
  color:var(--paper-faint);
}

/* ---------- sent ---------- */
.ct-sent{
  border:1px solid var(--accent-dim);
  padding:clamp(1.1rem,2vw,1.6rem);
  position:relative;overflow:hidden;
  font-size:.95rem;line-height:1.65;color:var(--paper-dim);
}
.ct-sent > *{position:relative;z-index:1}
.ct-sent b{display:block;color:var(--accent-text);font-weight:500;margin-bottom:.4rem;font-size:1.05rem}

@media(prefers-reduced-motion:reduce){
  .ct-input,.ct-textarea,.ct-path{transition:none}
}