/* ————————————————————————————————————————
   sonARe — the collabs page
   loaded after site.css (a copy of the home stylesheet, kept here so
   this page does not depend on which stylesheet is live at the root); same rail, same thread, same hairlines.
   left column is the instrument (the number is a button, the line is
   the live signal, the hint says what will sound),
   right column is the sentence (.ch-pull) and the paragraph (.ch-body).
———————————————————————————————————————— */

/* ———— the opening ———— */

.st-opening {
  padding: clamp(132px, 20vh, 200px) var(--gutter) clamp(64px, 10vh, 112px) var(--rail);
}
.st-title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(34px, 5.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--porcelain);
  max-width: 15em;
  margin: clamp(18px, 3vh, 28px) 0 clamp(22px, 3.5vh, 34px);
  text-wrap: balance;
}
.st-how { display: block; margin-top: clamp(26px, 4vh, 40px); }
.st-lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.5;
  color: var(--porcelain-dim);
  max-width: 560px;
  text-wrap: pretty;
}

/* ———— what we do — one row per kind of work ———— */

.st-row {
  display: grid;
  grid-template-columns: clamp(140px, 18vw, 240px) minmax(0, 520px);
  gap: clamp(40px, 5vw, 80px);
  padding: clamp(40px, 6.5vh, 64px) var(--gutter) clamp(34px, 5vh, 52px) var(--rail);
  border-top: 1px solid var(--hairline);
}
/* the number is the control — press it and this kind of work sounds */
.st-play {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--porcelain-dim);
  cursor: pointer;
  transition: color var(--tick);
}
.st-play:hover { color: var(--porcelain); }
.st-row.sounding .st-play { color: var(--signal); }

/* the real signal while it sounds; a flat hairline when it does not */
.st-scope {
  display: block;
  width: 100%;
  height: 34px;
  margin: 14px 0 8px;
}
.st-hint {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track);
  line-height: 1.7;
  color: var(--porcelain-faint);
  text-wrap: balance;
  transition: color var(--tick);
}
.st-row.sounding .st-hint { color: var(--signal); }

.st-tags {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track);
  line-height: 1.7;
  color: var(--porcelain-faint);
  margin-top: -12px;
}
.st-say .ch-pull { margin-bottom: 12px; }
.st-say a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--porcelain-faint);
  transition: color var(--tick), text-decoration-color var(--tick);
}
.st-say a:hover { color: var(--porcelain); text-decoration-color: var(--porcelain); }

.st-contact {
  padding: clamp(72px, 12vh, 124px) var(--gutter) clamp(72px, 12vh, 124px) var(--rail);
  border-top: 1px solid var(--hairline);
}

/* ———— questions ———— */

.st-faq {
  padding: clamp(72px, 12vh, 124px) var(--gutter) clamp(72px, 12vh, 124px) var(--rail);
  border-top: 1px solid var(--hairline);
}
.st-faq h2.aside { font-weight: 400; }
.st-qs {
  margin-top: clamp(26px, 4vh, 40px);
  max-width: calc(clamp(140px, 18vw, 240px) + clamp(40px, 5vw, 80px) + 520px);
}
.st-q {
  display: grid;
  grid-template-columns: clamp(140px, 18vw, 240px) minmax(0, 520px);
  gap: clamp(40px, 5vw, 80px);
  padding: 22px 0 24px;
  border-top: 1px solid var(--hairline);
}
.st-q:last-child { border-bottom: 1px solid var(--hairline); }
.st-q h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: var(--porcelain);
  text-wrap: balance;
}
.st-q p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.st-q a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--porcelain-faint);
}
.st-q a:hover { color: var(--porcelain); text-decoration-color: var(--porcelain); }

/* ———— how it starts ———— */

.st-contact-say {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(19px, 2.3vw, 24px);
  line-height: 1.45;
  color: var(--porcelain);
  max-width: 560px;
  margin: clamp(22px, 3.5vh, 34px) 0 clamp(26px, 4vh, 40px);
  text-wrap: pretty;
}
.st-contact-next { color: var(--porcelain-dim); margin-top: calc(-1 * clamp(8px, 1.5vh, 16px)); }
.st-mail {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(22px, 3.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--porcelain);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--porcelain-faint);
  transition: border-color var(--tick);
  overflow-wrap: anywhere;
}
.st-mail:hover { border-bottom-color: var(--porcelain); }
.st-lang { display: block; margin-top: clamp(26px, 4vh, 40px); }

/* ———— small screens — one column, the number sits above the sentence ———— */

@media (max-width: 640px) {
  .st-opening { padding-top: 112px; }
  .st-row { grid-template-columns: 1fr; gap: 16px; }
  .st-scope { height: 30px; margin: 12px 0 6px; }
  .st-q { grid-template-columns: 1fr; gap: 8px; }
}