/* assets/css/pages/about.css - shipped copy. Comments removed at build time by tools/strip-comments.mjs.
   Not minified: the names, the line breaks and the indentation are the author's own. */
body { background: var(--ink); }

.climb {
  background:
    radial-gradient(90% 70% at 78% 22%, rgba(58,39,88,.12), transparent 65%),
    var(--ink);
  padding-bottom: var(--sec-pad, 88px);
}

.climb .page-kicker {
  color: var(--iv-faint);
  letter-spacing: var(--t-kicker-track, .16em);
}

.climb .page-h1 {
  margin: 16px 0 0;
  font-size: var(--t-display-size, clamp(32px, 4.5vw, 52px));
  font-weight: var(--t-display-weight, 600);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: rgba(243, 238, 228, var(--t-head-alpha, .84));
}

#founder { scroll-margin-top: calc(var(--nav-h, 64px) + 16px); }

.climb-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-top: var(--head-gap, 40px);
}
.climb-text   { grid-column: 1 / 8; }
.climb-visual { grid-column: 9 / 13; }

.climb-body {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .004em;
  max-width: 60ch;
  color: var(--iv-dim);
}

.altitude-line {
  margin: 32px 0;
  color: var(--iv-faint);
}

.founder {
  margin-top: var(--topic-gap, 48px);
  border-top: var(--hair, 1px) solid var(--iv-hair);
  padding-top: var(--block-pad, 20px);
}

.founder-name {
  margin: 8px 0 0;
  font-size: clamp(18px, 5vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ivory);
}

.founder-role { margin: 0; }

.founder-body {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .004em;
  max-width: 62ch;
  color: var(--iv-dim);
}

.climb-visual {
  margin: 0;
  border: var(--hair, 1px) solid var(--iv-hair);
  aspect-ratio: 4 / 5;
  align-self: start;
  overflow: hidden;
}
.climb-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) brightness(0.46);
  -webkit-mask-image: url("/assets/img/climb-contour.webp");
          mask-image: url("/assets/img/climb-contour.webp");
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-source-type: luminance;
          mask-mode: luminance;
}

html.js .climb [data-seq] {
  transition: opacity var(--t-fade, 300ms) var(--ease-wipe, cubic-bezier(.6, .1, .2, 1));
}
html.js:not(.seq-done) .climb [data-seq]:not(.is-in) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js .climb [data-seq] { opacity: 1 !important; transition: none !important; }
}

@media (max-width: 1023px) {
  .climb-visual { grid-column: 8 / 13; }
}

@media (max-width: 840px) {
  .climb-grid   { grid-template-columns: 1fr; row-gap: 0; }
  .climb-text   { display: contents; }
  .climb-visual { grid-column: auto; order: 1; margin-top: 8px; max-width: 420px; }
  .founder      { order: 2; }
}