/* =====================================================================
   ABOUT (about.html) · page-scoped additions on top of site.css.
   Tokens only, no hard-coded colours.
   ===================================================================== */

/* 1 · hero: the mission as a display-size lede, the fox beside it */
.about-mission {
  margin-top: 22px; max-width: 30ch;
  font: italic 500 clamp(1.45rem, 1.05rem + 1.45vw, 2.15rem)/1.32 var(--f-display);
  color: var(--ink); text-wrap: pretty;
}
.about-hero { padding-bottom: 24px; }   /* no banded edge on a neutral hero, so less air before section i */
.about-hero .plate-hero__grid { align-items: center; }
.about-fox { width: clamp(190px, 23vw, 290px); }
.about-fox img { width: 62%; height: auto; margin-top: 4%; }

/* 2 · origin: body aligned with the heading column of .sec-head (.sec-indent) */
.about-origin { max-width: calc(170px + 28px + 46ch); }
.about-origin p { font-size: 1.25rem; line-height: 1.55; }
.about-origin p + p { margin-top: .8em; color: var(--ink-2); }

/* 3 · principles: the link under the list */
.about-after { margin-top: 26px; }

/* 4 · founders: a little air above the disclosure (the styleguide used an inline style) */
.about-work { margin-top: 18px; }
/* side by side: the pending card stretches to the real entry's height so its
   dashed frame reads as a deliberately blank page, not a lopsided gap */
@media (min-width: 981px) {
  #founders .founder.is-placeholder { align-self: stretch; }
}
/* narrow two-up range: the absolutely placed stamp would sit on the head text,
   so drop the head below it */
@media (min-width: 981px) and (max-width: 1179px) {
  #founders .founder.is-placeholder .founder__head { padding-top: 40px; }
}
/* wide enough: give the long entry more width (the stamp clears the head here) */
@media (min-width: 1180px) {
  #founders .founders { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* 5 · next: two equal options, one CTA level, a quiet "or" between them */
.about-fork {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px;
  max-width: 880px;
}
.about-fork__opt {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 26px 22px;
  background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--radius);
}
.about-fork__opt .eyebrow { margin-bottom: 16px; }
.about-fork::after {   /* decorative "or" in the gutter */
  content: "or" / "";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  font: italic 700 1.125rem/1 var(--f-display); color: var(--ink-2);
  background: var(--bg); border: 1.5px solid var(--hair); border-radius: 50%;
}

/* three options (businesses, students, academics): no "or" mark, tighter gutter */
.about-fork:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1080px; }
.about-fork:has(> :nth-child(3))::after { content: none; }
@media (max-width: 900px) { .about-fork:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 560px; } }

@media (max-width: 720px) {
  .about-hero { padding-bottom: 0; }
  .about-mission { margin-top: 16px; }
  .about-origin p { font-size: 1.125rem; }
  .about-fork { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .about-fork__opt { padding: 20px 18px 18px; }
}
@media (forced-colors: active) { .about-fork::after { border-color: CanvasText; } }