/*
 * NEXONOMY · ABOUT (quiet register)
 * The company / mission page as a plain written statement, the "thesis style"
 * (founder direction). Near-monochrome, single reading column, no product
 * mockups, no accent fills. Restraint is deliberate: it matches "craft and
 * candor, not volume" and the young-company stage. The bold register stays on
 * the homepage and the product / use-case pages (D-027). Same approved copy as
 * the bold draft; only the register changed. Italic emphasis is kept for voice
 * but carries no color.
 */

.about { max-width: 720px; margin: 0 auto; padding: 150px var(--section-px) 72px; }

/* the opening statement (a lede, not a display hero) */
.about__lede {
  font-family: var(--font-display);
  font-size: clamp(23px, 3vw, 28px); line-height: 1.3; letter-spacing: -0.5px;
  font-weight: var(--weight-medium); color: var(--color-text-primary);
}
.about__lede em { font-style: italic; }
.about__standfirst {
  margin-top: 20px; font-size: 17px; line-height: 28px; color: var(--color-text-secondary);
}

/* sections: a small mono kicker, a modest plain header, body */
.about__sec { margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--color-border); }
.about__kicker {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted);
}
.about__h {
  margin: 14px 0 0; font-family: var(--font-display);
  font-size: 21px; line-height: 1.26; letter-spacing: -0.4px;
  font-weight: var(--weight-medium); color: var(--color-text-primary);
}
.about__h em { font-style: italic; }
.about__p { margin-top: 14px; font-size: 16px; line-height: 27px; color: var(--color-text-secondary); }
.about__p + .about__p { margin-top: 14px; }

/* principles: a plain list, bold lead-in + sentence */
.about__list { margin: 22px 0 0; padding: 0; list-style: none; }
.about__item { margin-top: 18px; padding-left: 18px; border-left: 1px solid var(--color-border); }
.about__item:first-child { margin-top: 0; }
.about__item b { display: block; color: var(--color-text-primary); font-weight: var(--weight-medium); }
.about__item p { margin-top: 5px; font-size: 15px; line-height: 24px; color: var(--color-text-secondary); }

/* founders' note: a quiet set-apart pull-quote */
.about__quote-text {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 24px); line-height: 1.42; letter-spacing: -0.3px;
  font-weight: var(--weight-medium); font-style: normal; color: var(--color-text-primary);
}
.about__quote-cite {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px;
  margin-top: 18px; font-style: normal; font-size: 14px; color: var(--color-text-muted);
}
.about__author {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text-secondary); text-decoration: none; font-weight: var(--weight-medium);
  transition: color var(--duration-base) var(--ease-out);
}
.about__author:hover { color: var(--color-text-primary); }
.about__author:hover .about__in { opacity: 1; }
.about__in { width: 14px; height: 14px; flex: none; fill: currentColor; stroke: none; opacity: 0.55; transition: opacity var(--duration-base) var(--ease-out); }
.about__author-sep, .about__author-role { color: var(--color-text-muted); }

/* proof: a quiet line + a small muted logo */
.about__proof-logo {
  display: inline-flex; align-items: center; margin-top: 18px;
  background: #E8E4DC; border-radius: 8px; padding: 9px 15px; opacity: 0.62;
  transition: opacity var(--duration-base) var(--ease-out);
}
.about__proof-logo:hover { opacity: 0.85; }
.about__proof-logo img { display: block; width: 86px; height: auto; }

/* close: understated text links, no filled button */
.about__cta { margin-top: 16px; display: flex; gap: 24px; flex-wrap: wrap; }
.about__link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; color: var(--color-text-primary); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.22); padding-bottom: 2px;
  transition: border-color var(--duration-base) var(--ease-out);
}
.about__link:hover { border-color: var(--color-text-primary); }
.about__link .icon { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .about { padding-top: 128px; }
}