/* About page: the Principles layout (after Anthropic's company page), with content from the
   Acorn overview. Bracket labels and numbered steps are the brand's "manifest" trace.
   Built on styles.css + v2/v2.css tokens. */

/* Shared type */
.ab-h1 { font-size: var(--title-size); line-height: 1.02; letter-spacing: -0.045em; font-weight: 500; text-wrap: balance; margin: 0; }
.ab-bracket { font: 400 .78rem/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 1.5rem; }
[data-tone="ink"] .ab-bracket { color: var(--on-dark-muted); }

/* Statement */
.v2 .section.ab-split-hero { padding-top: clamp(3.5rem, 8vw, 6.5rem); }
.ab-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem 5rem; align-items: end; }
.ab-split .ab-h1 { max-width: 15ch; }
.ab-split .v2-lede { margin: 0; }
.ab-sub { margin: 1rem 0 1.75rem; font-weight: 500; color: var(--forest); }
/* Hero with the acorn animation: words on the left, the acorn and its tree on the right */
.v2 .section.ab-grow-hero { position: relative; overflow: hidden; min-height: min(560px, calc(100svh - var(--nav-h) - 120px)); display: grid; align-items: center; padding-block: clamp(3rem, 5vw, 4.5rem); } /* short enough that The platform shows below it on load */
.ab-grow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ab-grow-hero .wrap { position: relative; z-index: 1; width: 100%; }
.ab-hero-copy { max-width: min(48%, 600px); }
.ab-hero-copy .ab-h1 { max-width: 14ch; margin-bottom: 1.25rem; }
.ab-h1--title { font-size: var(--title-size); }   /* "About Us": a page title, like "Our team" */
.ab-lead { margin: 0 0 1rem; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -0.025em; font-weight: 500; color: var(--ink); max-width: 24ch; text-wrap: balance; }
.ab-hero-copy .v2-lede { margin: 0; }

/* The platform: A · C · O · R, laid out like the mark */
.ab-purpose { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 3rem 5rem; align-items: start; }
.ab-purpose h2 { margin-bottom: 1rem; }
.ab-aside { margin: 1.5rem 0 0; padding-left: 1rem; border-left: 2px solid var(--mint); color: var(--forest); max-width: 36ch; }
.ab-acor { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ab-cell { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 2.4vw, 1.75rem); display: grid; gap: .5rem; align-content: start; min-height: 220px; background: var(--white); }
.ab-letter { font-size: clamp(3rem, 5vw, 4.5rem); line-height: .9; font-weight: 500; letter-spacing: -0.05em; color: var(--forest); }
.ab-cell h3 { margin: 1.25rem 0 0; font-size: 1.2rem; letter-spacing: -0.02em; font-weight: 500; }
.ab-cell p { margin: 0; color: var(--text-muted); line-height: 1.5; }
.ab-cell--ground { background: var(--forest); border-color: var(--forest); }
.ab-cell--ground .ab-letter { color: var(--mint); }
.ab-cell--ground h3 { color: var(--paper); }
.ab-cell--ground p { color: rgba(247, 243, 234, .78); }
/* The platform on Green Ink: dark cells, and Connect (the ground) filled in Mint */
.ab-platform .ab-cell { background: rgba(247, 243, 234, .04); border-color: var(--line-dark); }
.ab-platform .ab-letter { color: var(--mint); }
.ab-platform .ab-cell h3 { color: var(--paper); }
.ab-platform .ab-cell p { color: var(--on-dark-muted); }
.ab-platform .ab-cell--ground { background: var(--mint); border-color: var(--mint); }
.ab-platform .ab-cell--ground .ab-letter, .ab-platform .ab-cell--ground h3 { color: var(--ink); }
.ab-platform .ab-cell--ground p { color: rgba(14, 37, 27, .78); }
.ab-platform .ab-aside { color: var(--paper); }

/* How we work: the numbered job order */
.ab-values { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; }
.ab-values li { display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem 2.5rem; padding: 1.75rem 0; border-top: 1px solid var(--line-dark); align-items: baseline; }
.ab-values li:last-child { border-bottom: 1px solid var(--line-dark); }
.ab-values li > span { font: 400 .9rem/1 "Geist Mono", ui-monospace, monospace; color: var(--mint); }
.ab-values h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -0.025em; font-weight: 500; }
.ab-values p { margin: 0; color: var(--on-dark-muted); line-height: 1.55; }

/* The name */
.ab-origin { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 2rem 5rem; }
.ab-origin-head h2 { max-width: 12ch; }
.ab-origin-body > p { margin: 0 0 1.25rem; font-size: 1.1rem; line-height: 1.6; color: var(--text-muted); max-width: 60ch; }
.ab-cite { margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem; border-left: 2px solid var(--forest); }
.ab-cite p { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.3; letter-spacing: -0.025em; color: var(--ink); max-width: 34ch; text-wrap: pretty; }
.ab-cite footer { margin-top: 1rem; font: 400 .75rem/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* Acorn to oak */
.ab-handoff { margin: 0; font-size: var(--title-size); line-height: 1.02; letter-spacing: -0.05em; font-weight: 500; color: var(--on-dark); text-wrap: balance; }
.ab-handoff span { color: var(--mint); }
.ab-oak-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; margin-top: clamp(2rem, 4vw, 3rem); max-width: 980px; }
.ab-oak-body p { margin: 0; color: var(--on-dark-muted); line-height: 1.6; font-size: 1.05rem; }

/* Tablet and phone */
@media (max-width: 900px) {
  .ab-split, .ab-purpose, .ab-origin { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .v2 .section.ab-grow-hero { min-height: 0; align-items: end; padding-top: 230px; padding-bottom: 2.5rem; }
  .ab-hero-copy { max-width: none; }
  .ab-values li { grid-template-columns: 3rem minmax(0, 1fr); }
  .ab-values p { grid-column: 2; }
  .ab-cell { min-height: 180px; }
  .ab-oak-body { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .ab-acor { gap: 8px; }
  .ab-cell { min-height: 0; padding: 1rem; }
  .ab-letter { font-size: 2.4rem; }
  .ab-cell h3 { margin-top: .75rem; font-size: 1.05rem; }
  .ab-cell p { font-size: .9rem; }
}

/* How we work: Forest Green, to set it apart from the Green Ink platform section above */
.v2 #main > .ab-how { background-color: var(--forest); }
.ab-how .ab-values li { border-color: rgba(247, 243, 234, .16); }
.ab-how .ab-values p { color: rgba(247, 243, 234, .8); }