/* asquared · Grid Typography: the Contact page (contact/index.html).
   This page's own layout, after style.css and pages.css (PAGES.md). Use the
   tokens and the module from style.css; never restyle the shell (header,
   footer) or the shared components here.

   The page: the CONTACT title, the two desks and LinkedIn (the homepage's
   contact rows), then the form as a ruled list on the same subgrid: labels
   in columns 1-2, fields from column 3. The one mint field is the row being
   filled in (data-mint="hover", pages.css): it follows focus down the form,
   and the send row turns mint when the button is the active field. */

/* ---------- the desks ---------- */

/* style.css places .c-list in the homepage's "cl" area: here it takes the row */
.ct-desks { grid-area: auto / 1 / auto / -1; }

/* ---------- the form section ---------- */

.ct-h2 {
  grid-column: 1 / -1;
  font-weight: 600;
  font-size: clamp(30px, 1.1rem + 2.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.ct-intro {
  grid-column: 3 / span 4;
  margin-top: calc(var(--g) * 2);
}
.ct-intro p { max-width: 34em; text-wrap: pretty; }

.ct-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: calc(var(--g) * 4);
}

/* the error summary: a 2 px frame (never mint: mint is the active field) */
.ct-sum {
  grid-column: 3 / -1;
  margin-bottom: calc(var(--g) * 2);
  padding: max(16px, var(--g));
  box-shadow: inset 0 0 0 2px var(--ink);
}
.ct-sum[hidden] { display: none; }
.ct-sum-h { font-weight: 600; font-size: clamp(18px, 1rem + 0.35vw, 22px); line-height: 1.2; letter-spacing: -0.015em; }
.ct-sum-list { margin-top: 10px; display: grid; gap: 4px; }
.ct-sum-list a { font-weight: 500; }

/* ---------- the rows: the c-list's rules on the same subgrid ---------- */

.ct-rows {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  border-top: 1px solid var(--ink);
}
/* one unit of field inside each edge, so the active field's mint never runs
   flush to its type; the inner column lines stay the page's */
.ct-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: max(16px, var(--g)) var(--g) max(18px, calc(var(--g) * 1.1));
  border-bottom: 1px solid var(--hair);
}
/* one active field at a time: the shared rule in pages.css */

.ct-label {
  grid-column: 1 / span 2;
  padding-right: var(--g);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.ct-hint {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-2);
  text-wrap: pretty;
}
.ct-ctl { grid-column: 3 / -1; min-width: 0; }
.ct-ctl.is-short { grid-column: 3 / span 4; }

/* JS shows "Which app" only for app support; without JS it always shows */
html.js .ct-app:not(.is-shown) { display: none; }

/* ---------- fields: 1 px frames, square, on whole units ---------- */

.ct-input {
  display: block;
  width: 100%;
  height: max(48px, calc(var(--g) * 3));
  height: round(up, max(48px, calc(var(--g) * 3)), var(--g));
  margin: 0;
  padding: 0 max(12px, calc(var(--g) * 0.75));
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: clamp(17px, 0.9rem + 0.4vw, 22px);
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}
.ct-area {
  height: auto;
  min-height: max(168px, calc(var(--g) * 8));
  min-height: round(up, max(168px, calc(var(--g) * 8)), var(--g));
  padding-block: 12px;
  line-height: 1.45;
  resize: vertical;
}
.ct-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- options: square cells; the chosen one is ink with a lit cell ---------- */

.ct-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g);
}
.ct-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: max(44px, calc(var(--g) * 2));
  padding: 6px 14px;
  border: 1px solid rgba(17, 17, 17, 0.4);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-opt:hover { border-color: var(--ink); }
.ct-opt input {
  flex: none;
  width: 12px;
  height: 12px;
  margin: 0;
  border: 1.5px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.ct-opt input:checked { background: currentColor; }
.ct-opt:has(input:checked) { background: var(--ink); color: var(--ground); border-color: var(--ink); }
/* the focus ring goes round the whole option */
@supports selector(:has(*)) {
  .ct-opt input:focus-visible { outline: none; }
  .ct-opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
}
.ct-opts[aria-invalid="true"] .ct-opt { border-color: var(--ink); }

.ct-opt-app { padding-left: 8px; }
.ct-opt-app img {
  width: 28px;
  height: 28px;
  border-radius: 22.37%;
  outline: 1px solid rgba(17, 17, 17, 0.14);
  outline-offset: -1px;
}
.ct-opt small {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 400;
  opacity: 0.78;
}

/* ---------- errors: a marked cell and a plain sentence ---------- */

.ct-err {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.ct-err::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: currentColor;
}
.ct-err:empty { display: none; }

/* ---------- the send row ---------- */

.ct-send .ct-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g) calc(var(--g) * 2);
}
.ct-to { flex: 1 0 100%; min-width: 0; }
.ct-addr {
  font-size: clamp(22px, 0.6rem + 3vw, 58px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.034em;
  overflow-wrap: anywhere;
}
.ct-submit {
  gap: 10px;
  height: max(48px, calc(var(--g) * 3));
  height: round(up, max(48px, calc(var(--g) * 3)), var(--g));
  margin: 0;
  padding: 0 var(--g);
  border: 1px solid var(--ink);
  border-radius: 0;
  background-color: transparent;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
/* without the fills (JS off, reduced motion) the button inks at once */
html:not(.is-motion) .ct-submit:hover,
html:not(.is-motion) .ct-submit:focus-visible { background-color: var(--ink); color: var(--ground); }
.ct-how {
  flex: 1 1 18em;
  max-width: 30em;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
}
.ct-done {
  flex: 1 0 100%;
  max-width: 40em;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}
.ct-done:empty { display: none; }

/* ---------- phones: four columns, labels over their fields ---------- */

@media (max-width: 639px) {
  .ct-intro { grid-column: 1 / -1; margin-top: 16px; }
  .ct-form { margin-top: 40px; }
  .ct-sum { grid-column: 1 / -1; }
  .ct-row { padding-inline: calc(var(--g) * 2); }
  .ct-label { grid-column: 1 / -1; padding-right: 0; margin-bottom: 8px; }
  .ct-ctl,
  .ct-ctl.is-short { grid-column: 1 / -1; }
  .ct-opts { gap: calc(var(--g) * 2); }
  .ct-addr { font-size: clamp(20px, 6vw, 28px); }
  .ct-submit { padding: 0 calc(var(--g) * 3); }
}