/* The About page. Built on the site's tokens and Ubuntu so it reads as the
   same product, with a type scale of its own: this page is read rather than
   used, so it is set larger than the guide, and set again for each class of
   screen instead of shrinking one size to fit them all.

   Layout: an opening band, then sections in an editorial grid, the label and
   heading in a narrow column and the text in a wide one. On a phone the two
   columns stack. */

/* ---- type scale, per screen class -------------------------------------- */
.about-page {
  --a-body: 15px;   --a-lead: 17px;  --a-small: 13px;
  --a-h1: 34px;     --a-h2: 25px;    --a-h3: 17px;
  --a-mission: 21px;
  --a-gutter: 16px; --a-section: 52px; --a-measure: 66ch;
}
@media (min-width: 641px) {       /* tablets */
  .about-page {
    --a-body: 16px;   --a-lead: 19px;  --a-small: 13.5px;
    --a-h1: 44px;     --a-h2: 29px;    --a-h3: 18px;
    --a-mission: 25px;
    --a-gutter: 32px; --a-section: 72px;
  }
}
@media (min-width: 1024px) {      /* laptops and desktops */
  .about-page {
    --a-body: 17px;   --a-lead: 21px;  --a-small: 14px;
    --a-h1: 56px;     --a-h2: 33px;    --a-h3: 19px;
    --a-mission: 30px;
    --a-gutter: 40px; --a-section: 96px;
  }
}
@media (min-width: 1440px) {      /* large displays */
  .about-page {
    --a-body: 18px;   --a-lead: 22px;  --a-small: 14.5px;
    --a-h1: 64px;     --a-h2: 37px;    --a-h3: 20px;
    --a-mission: 33px;
    --a-section: 112px;
  }
}

/* Scoped to the page body: the shared footer keeps its own sizes. */
.about-main { font-size: var(--a-body); line-height: 1.75; }
.about-main p { font-size: var(--a-body); }

/* ---- frame ------------------------------------------------------------- */
.about-main { max-width: 1160px; margin: auto; padding: 0 var(--a-gutter); }
.about-main > section { padding: var(--a-section) 0; border-bottom: 1px solid var(--line); }
.about-main > section:last-of-type { border-bottom: 0; }
.about-main .guide-eyebrow { font-size: 11px; letter-spacing: 2.2px; color: var(--accent); }
.about-main h2 { font-size: var(--a-h2); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; margin: 14px 0 0; }
.about-main h3 { font-size: var(--a-h3); font-weight: 500; letter-spacing: -.01em; }

/* ---- the opening band -------------------------------------------------- */
/* A quiet tint behind the opening, full width, without leaving the column:
   the shadow paints the band and the clip keeps it from spilling vertically. */
.about-hero {
  position: relative;
  padding: calc(var(--a-section) * .9) 0 var(--a-section) !important;
  background: color-mix(in srgb, var(--accent) 5%, var(--glass));
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--accent) 5%, var(--glass));
  clip-path: inset(0 -100vmax);
}
.about-hero h1 {
  font-size: var(--a-h1); line-height: 1.06; letter-spacing: -.035em; font-weight: 500;
  margin: 22px 0 30px; max-width: 15ch; color: var(--text);
}
.about-hero p { max-width: var(--a-measure); color: var(--text); }
.about-lead { font-size: var(--a-lead) !important; line-height: 1.65; letter-spacing: -.005em; }
.about-hero .about-lead { margin-bottom: 26px; }

/* ---- editorial sections ------------------------------------------------ */
.about-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.about-section-body > :first-child { margin-top: 0; }
.about-section-body p { max-width: var(--a-measure); }
@media (min-width: 1024px) {
  .about-section:not(.about-section-wide) { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; }
  .about-section:not(.about-section-wide) .about-section-head { position: sticky; top: 104px; align-self: start; }
  .about-section-wide .about-section-head { margin-bottom: 18px; }
}

/* ---- what it does ------------------------------------------------------ */
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 0 22px; }
.about-grid article {
  position: relative; padding: 28px 26px 26px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--shell); overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* A hairline of the accent along the top edge: the card's one ornament. */
.about-grid article::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: .7;
}
.about-grid article:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--accent) 60%, transparent);
}
.about-grid h3 { margin: 0 0 10px; }
.about-grid p { margin: 0; font-size: calc(var(--a-body) - 1.5px) !important; line-height: 1.7; }
.about-usp {
  padding: 28px 30px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--shell)), var(--shell) 60%);
}
.about-usp h3 { margin: 0 0 8px; }
.about-usp p { margin: 0; }

/* ---- mission ----------------------------------------------------------- */
.about-mission {
  font-size: var(--a-mission) !important; line-height: 1.4; letter-spacing: -.02em; font-weight: 400;
  color: var(--text); max-width: 26em !important; margin: 0 0 26px;
  padding-left: 22px; border-left: 2px solid var(--accent);
}

/* ---- founder ----------------------------------------------------------- */
.about-founder {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px;
  padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line); border-radius: 18px;
  background: var(--shell);
}
@media (min-width: 900px) {
  .about-founder { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
  .about-portrait { position: sticky; top: 104px; }
}
.about-portrait { margin: 0; }
.about-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 726;
  border-radius: 12px; background: var(--raised);
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -32px rgb(0 0 0 / .55);
}
.about-name { margin: 0; font-size: calc(var(--a-h2) - 3px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.about-role { margin: 8px 0 0 !important; font-size: var(--a-body) !important; font-weight: 500; color: var(--accent); }
.about-discipline { margin: 2px 0 0 !important; font-size: var(--a-small) !important; color: var(--dim); }
.about-bio { margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--line); }
.about-bio p { max-width: 64ch; }
.about-affiliation-note { margin-top: 18px; font-size: calc(var(--a-small) - 1px) !important; color: var(--faint); }

/* Profile links as words in a row, hairline-separated. */
.about-links { display: flex; flex-wrap: wrap; list-style: none; margin: 18px 0 0; padding: 0; font-size: var(--a-small); }
.about-links li + li { border-left: 1px solid var(--line-hi); }
.about-links a { display: inline-block; padding: 1px 14px; color: var(--doc-link); text-decoration: none; font-weight: 500; }
.about-links li:first-child a { padding-left: 0; }
.about-links a:hover { text-decoration: underline; }
.about-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- company ----------------------------------------------------------- */
.about-facts { display: grid; margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--shell); }
.about-facts > div {
  display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 20px;
  padding: 15px 22px; border-top: 1px solid var(--line); font-size: var(--a-small);
}
.about-facts > div:first-child { border-top: 0; }
.about-facts > div:nth-child(even) { background: color-mix(in srgb, var(--raised) 35%, transparent); }
.about-facts dt { color: var(--faint); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; padding-top: 3px; }
.about-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; font-size: calc(var(--a-small) + 1px); }

/* ---- closing ----------------------------------------------------------- */
.about-cta { padding: var(--a-section) 0 calc(var(--a-section) * .8) !important; }
.about-cta-panel {
  text-align: center; padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px);
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--shell);
}
.about-cta-panel h2 { margin: 0 0 10px; font-size: calc(var(--a-h2) + 4px); }
.about-cta-panel p { color: var(--text); margin: 0 auto; max-width: 42ch; }
.about-cta-panel .guide-actions { justify-content: center; margin: 28px 0 0; }
.about-cta-panel .btn { height: 44px; padding: 0 22px; font-size: 14px; }

/* Body copy brightens while in view and mutes again after scrolling past;
   labels and attribution notes remain intentionally secondary. */
.can-reveal .about-main p:not(.about-role):not(.about-discipline):not(.about-affiliation-note) {
  color: var(--dim);
  transition: color .8s cubic-bezier(.2, .7, .2, 1);
}
.can-reveal .about-main p.is-visible:not(.about-role):not(.about-discipline):not(.about-affiliation-note) {
  color: var(--text);
}

/* ---- phones ------------------------------------------------------------ */
@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; gap: 14px; }
  .about-grid article { padding: 22px 20px 20px; }
  .about-usp { padding: 22px 20px; }
  .about-mission { padding-left: 16px; }
  .about-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .about-links li + li { border-left: 0; }
  .about-links a, .about-links li:first-child a { padding: 0; }
  .about-facts > div { grid-template-columns: 1fr; gap: 3px; padding: 13px 16px; }
  .about-facts dt { padding-top: 0; }
  .about-cta-panel .guide-actions { flex-direction: column; align-items: stretch; }
}

/* Scroll reveal. A short rise and fade, once per block. Only applied when the
   page has opted in (motion allowed, observer available), so without script
   or with reduced motion every block is simply there. */
.can-reveal .reveal, .can-reveal .reveal-group > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.can-reveal .reveal.is-visible, .can-reveal .reveal-group > .is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .about-grid article, .about-grid article:hover { transition: none; transform: none; }
}
body.about-page .site-footer-note, body.about-page .site-footer-company { display: none; }