/* about-contact.css — /about + /contact pages. Loaded after page.css. */

/* ── Shared narrow column ───────────────────────────────── */
.ac-hero {
  padding: 96px 0 56px;
  border-bottom: 1px solid var(--hairline);
}
.ac-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 28px;
}
.ac-h {
  font-size: clamp(44px, 6vw, 84px) !important;
  max-width: 14ch;
  margin: 0;
}
.ac-h em { color: var(--accent); }
.ac-lede {
  margin-top: 32px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ── Section grid (label gutter + main column) ──────────── */
.ac-section {
  padding: 72px 0;
  border-top: 1px solid var(--hairline);
}
.ac-section:first-of-type { border-top: 0; }
.ac-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 64px;
}
@media (max-width: 820px) {
  .ac-grid { grid-template-columns: 1fr; gap: 24px; }
}
.ac-side {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-top: 6px;
}
.ac-main { max-width: 64ch; }
.ac-main p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--fg); }
.ac-main p + p { margin-top: 1.2em; }
.ac-main p em { font-style: italic; color: var(--fg); }
.ac-main strong { font-weight: 600; }
.ac-main h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 1.8em 0 0.5em;
  letter-spacing: -0.005em;
}
html.dir-editorial .ac-main h3 { font-weight: 400; font-style: italic; }

/* ── Form (contact page) ───────────────────────────────── */
.ac-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ac-field { display: flex; flex-direction: column; gap: 8px; }
.ac-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ac-label .req { color: var(--accent); margin-left: 4px; }
.ac-input, .ac-textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 10px 0;
  outline: none;
  transition: border-color .15s ease;
  width: 100%;
}
.ac-input:focus, .ac-textarea:focus {
  border-bottom-color: var(--accent);
}
.ac-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
  font-family: inherit;
}
.ac-help {
  font-size: 13px;
  color: var(--fg-muted);
  font-style: italic;
}

.ac-radios { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.ac-radio {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  font-size: 16px;
  color: var(--fg);
}
.ac-radio input { display: none; }
.ac-radio-dot {
  width: 16px; height: 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color .12s ease;
}
.ac-radio:hover .ac-radio-dot { border-color: var(--accent); }
.ac-radio input:checked + .ac-radio-dot {
  border-color: var(--accent);
}
.ac-radio input:checked + .ac-radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
}

.ac-submit {
  align-self: flex-start;
  margin-top: 8px;
}

/* ── Direct contact list ───────────────────────────────── */
.ac-direct {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px 24px;
  font-size: 16px;
  font-family: var(--font-mono);
}
.ac-direct dt {
  color: var(--fg-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: center;
}
.ac-direct dd { margin: 0; }
.ac-direct dd a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.ac-direct dd a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Beliefs (about page) ──────────────────────────────── */
.ac-beliefs {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.45;
  color: var(--fg);
  margin: 1em 0;
  text-wrap: pretty;
}
html.dir-editorial .ac-beliefs { font-weight: 400; }
.ac-beliefs strong {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}
html.dir-editorial .ac-beliefs strong { font-style: italic; font-family: var(--font-display); }

/* ── About / contact closing CTA bar ───────────────────── */
.ac-cta {
  border-top: 1px solid var(--hairline);
  padding: var(--pad-section) 0;
  background: var(--bg-soft);
}
.ac-cta-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 24px;
}
.ac-cta-h {
  font-size: clamp(36px, 4.8vw, 64px) !important;
  margin: 0 0 32px;
  max-width: 18ch;
}

/* ── Form-success state ────────────────────────────────── */
.ac-success {
  border: 1px solid var(--hairline-strong);
  padding: 28px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 12px;
}
.ac-success-h {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
}
.ac-success p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-muted); }