/* home.css — additive supplement for the for-hire home.
   Loaded AFTER styles.css; reuses its :root variables. No :root/body/grain here. */

/* Hero CTA buttons — one aligned row closed; composer claims the full row open */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; margin-top: 0.4rem; }
.btn { display: inline-block; box-sizing: border-box; padding: 0.62rem 1.25rem; border-radius: 999px; font-size: 0.92rem; line-height: 1.4; letter-spacing: 0.01em; border: 1px solid transparent; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, filter 0.3s ease; }
.btn-primary { background: var(--ember); color: #1c130c; font-weight: 500; }
.btn-primary:hover { filter: brightness(1.08); color: #16100a; border-color: transparent; }
.btn-ghost { color: var(--ink-soft); border: 1px solid var(--hairline); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ember-soft); }

/* Closed: the hero composer is just its pill. Open: it takes the whole row,
   so the ghost pill wraps below the box instead of floating beside it. */
.inquiry-hero { flex: 0 1 auto; min-width: 0; }
.inquiry-hero[open] { flex-basis: 100%; }

/* Small screens: both pills stack, full-width, centred — equal weight */
@media (max-width: 560px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn, .inquiry-hero > summary.btn { display: block; width: 100%; text-align: center; }
  .inquiry-hero .inquiry-box { max-width: none; }
}

/* Offering call-to-action link (was inline on the felt site) */
.offering-link { display: inline-block; margin-top: 0.9rem; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-muted); border-bottom: none; transition: color 0.25s ease; }
.offering-link:hover { color: var(--ink); }

/* The honest fine print — humility, stated plainly */
.honest {
  margin-top: 2rem;
  padding: 1.2rem 0 0.2rem 1.4rem;
  border-left: 2px solid var(--ember-soft);
}
.honest-kicker {
  margin: 0 0 0.6rem;
  color: var(--ember);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.honest p:not(.honest-kicker) {
  margin: 0 0 0.9rem;
  color: var(--ink-soft);
  font-size: 0.99rem;
  line-height: 1.72;
}

/* Credentials line + stack chips */
.creds { margin: 1.3rem 0 0; color: var(--ink-muted); font-size: 0.9rem; line-height: 1.65; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.chips li { font-size: 0.8rem; color: var(--ink-soft); border: 1px solid var(--hairline); border-radius: 999px; padding: 0.26rem 0.72rem; }

/* Labs / LOFL */
.spine { margin: 0.5rem 0 0; color: var(--ink-muted); font-style: italic; font-size: 0.95rem; line-height: 1.6; }
.lofl-list { display: grid; gap: 0.7rem; margin: 1.4rem 0 0; }
.lofl-row { display: grid; grid-template-columns: var(--tag-col) 1fr; gap: 1rem; align-items: baseline; padding-top: 0.85rem; border-top: 1px dashed var(--hairline-dashed); }
.lofl-row:first-child { padding-top: 0; border-top: 0; }
.lofl-row > a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--ember-soft); }
.lofl-row > a:hover { color: #f7edd8; border-bottom-color: var(--ember); }
.lofl-row p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; }
.lofl-row p em { color: var(--ink); font-style: italic; }

@media (max-width: 560px) {
  .lofl-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Fair-rate callout under the offers */
.fair-callout {
  margin-top: 1.8rem;
  padding: 1.3rem 1.4rem 1.35rem;
  border: 1px solid var(--ember-soft);
  border-radius: 4px;
  background: rgba(203, 136, 84, 0.05);
}
.fair-callout-kicker {
  margin: 0 0 0.5rem;
  color: var(--ember);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fair-callout-line {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.7;
}
.fair-callout .btn-ghost { border-color: var(--ember-soft); color: var(--ink); }
.fair-callout .btn-ghost:hover { border-color: var(--ember); }

/* ── Inquiry composer (three actions per mailto) ───────────────────── */
.inquiry { display: block; }
.inquiry > summary { list-style: none; cursor: pointer; }
.inquiry > summary::-webkit-details-marker { display: none; }
.inquiry > summary.btn { display: inline-block; }
.inquiry > summary.offering-link { display: inline-block; margin-top: 0.9rem; }
.inquiry[open] > summary.btn-primary { filter: brightness(1.05); }
.reach-mail { color: var(--ink); border-bottom: 1px solid var(--ember-soft); display: inline; }
.inquiry[open] .reach-mail, .inquiry > summary:hover .reach-mail { border-bottom-color: var(--ember); }

.inquiry-box {
  margin-top: 1rem;
  padding: 1.1rem 1.15rem 1rem;
  background: rgba(18, 14, 11, 0.55);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  max-width: 34rem;
}
.inquiry-hero .inquiry-box { margin-top: 1.2rem; }

/* Rooted motion: the box arrives, it doesn't pop */
.inquiry[open] .inquiry-box { animation: inquiry-in 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes inquiry-in {
  from { opacity: 0; transform: translateY(0.4rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .inquiry[open] .inquiry-box { animation: none; }
}

.inquiry-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 7.5rem;
  resize: vertical;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(232, 221, 208, 0.14);
  border-radius: 3px;
  color: inherit;
  font-family: "Spectral", serif;
  font-size: 0.95rem;
  line-height: 1.55;
  padding: 0.65rem 0.85rem;
  outline: none;
  transition: border-color 0.25s;
}
.inquiry-text:focus { border-color: rgba(232, 221, 208, 0.38); }

.inquiry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
  align-items: baseline;
  margin-top: 0.85rem;
  font-size: 0.85rem;
}
.inquiry-copy {
  background: transparent;
  border: 1px solid rgba(232, 221, 208, 0.28);
  border-radius: 3px;
  color: inherit;
  font-family: "Spectral", serif;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.inquiry-copy:hover, .inquiry-copy:focus {
  background: rgba(232, 221, 208, 0.08);
  border-color: rgba(232, 221, 208, 0.45);
  outline: none;
}
.inquiry-copy.is-copied { color: var(--ember); border-color: var(--ember-soft); }
.inquiry-actions a { color: var(--ink-soft); border-bottom: 1px solid var(--ember-soft); }
.inquiry-actions a:hover { color: var(--ink); border-bottom-color: var(--ember); }