@import url("landing.css?v=19");

/* About page. Builds on the landing page's type, sections, cards and motion;
   only the pieces unique to this page live here. */

/* ---------------------------------------------------------------- hero */
.ab-hero { padding: 64px 0 84px; }
.ab-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 56px; align-items: center;
}
.ab-hero-copy h1 { font-size: clamp(36px, 5.2vw, 60px); }
.ab-hero-copy .lede em { font-style: italic; color: var(--foreground); }

.ab-portrait { margin: 0; justify-self: center; width: min(400px, 100%); position: relative; }
.ab-portrait-frame {
  position: relative; border-radius: 22px; padding: 6px;
  background: conic-gradient(from 210deg, var(--c0), var(--c2), var(--c3), var(--c1), var(--c4), var(--c0));
  box-shadow: var(--shadow-3);
  transform: rotate(-2deg); transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.ab-portrait:hover .ab-portrait-frame { transform: rotate(0deg) scale(1.01); }
.ab-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 7 / 8; object-fit: cover;
  border-radius: 17px; background: var(--muted);
}
.ab-portrait figcaption {
  position: absolute; left: -18px; bottom: 26px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 11px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--border); box-shadow: var(--shadow-2);
}
.ab-portrait figcaption strong { font-family: var(--font-serif); font-weight: 400; font-size: 18px; letter-spacing: -.01em; }
.ab-portrait figcaption span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.ab-portrait figcaption .ab-linkedin {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); text-decoration: none;
}
.ab-portrait figcaption .ab-linkedin span {
  font: inherit; letter-spacing: 0; text-transform: none; color: inherit;
}
.ab-portrait figcaption .ab-linkedin:hover { color: var(--foreground); text-decoration: underline; }
@media (max-width: 860px) {
  .ab-hero-in { grid-template-columns: 1fr; gap: 44px; }
  .ab-portrait { width: min(340px, 86%); }
  .ab-portrait figcaption { left: -10px; }
}
@media (prefers-reduced-motion: reduce) { .ab-portrait-frame { transform: none; transition: none; } }

/* ---------------------------------------------------------------- articles by the author */
.ab-articles { padding: 8px 0 72px; }
.ab-articles h2 { margin-bottom: 22px; }
.ab-article-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.ab-article-list a {
  display: grid; gap: 5px; padding: 18px 20px; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.ab-article-list a:hover {
  border-color: color-mix(in srgb, var(--foreground) 22%, var(--border));
  box-shadow: var(--shadow-2); transform: translateY(-1px);
}
.ab-art-title { font-family: var(--font-serif); font-size: 21px; line-height: 1.25; letter-spacing: -.012em; color: var(--foreground); }
.ab-art-dek { font-size: 15px; line-height: 1.55; color: var(--muted-foreground); }
.ab-art-meta { font-size: 13px; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .ab-article-list a { transition: none; } .ab-article-list a:hover { transform: none; } }

/* ---------------------------------------------------------------- story */
.ab-narrow { max-width: 720px; }
.ab-story p { font-size: 17px; line-height: 1.75; color: var(--muted-foreground); margin: 0 0 20px; }
.ab-story p strong, .ab-story p em { color: var(--foreground); }
.ab-quote {
  margin: 36px 0; padding: 4px 0 4px 26px; border-left: 3px solid transparent;
  border-image: linear-gradient(var(--c0), var(--c2)) 1;
  font-family: var(--font-serif); font-size: clamp(21px, 2.6vw, 27px); line-height: 1.4;
  letter-spacing: -.012em; color: var(--foreground);
}
.ab-sign {
  margin-top: 28px !important; font-family: var(--font-serif); font-style: italic;
  font-size: 20px !important; color: var(--foreground) !important;
}

/* ---------------------------------------------------------------- pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .pillars { grid-template-columns: 1fr; max-width: 640px; } }
.pillar {
  display: flex; flex-direction: column; padding: 26px 26px 24px;
  border: 1px solid var(--border); border-radius: calc(var(--r-card) + 4px); background: var(--card);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.pillar:hover { box-shadow: var(--shadow-3); border-color: var(--muted-foreground); transform: translateY(-3px); }
.pillar-soon { background: linear-gradient(180deg, var(--muted), var(--card)); border-style: dashed; }
.pillar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.pillar-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--faint); }
.status {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--border);
}
.status i { width: 7px; height: 7px; border-radius: 50%; }
.status-live i { background: var(--c2); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c2) 55%, transparent);
                 animation: pulse 2.2s ease-out infinite; }
.status-soon i { background: var(--c3); }
.pillar h3 { font-size: 28px; margin: 0 0 12px; letter-spacing: -.02em; }
.pillar p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--muted-foreground); }
.pillar-facts { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pillar-facts li {
  display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--muted-foreground);
  padding-top: 8px; border-top: 1px solid var(--border);
}
.pillar-facts b {
  font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--foreground);
  min-width: 3.4em;
}
.pillar-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--foreground); text-decoration: none;
}
.pillar-link .arrow { transition: transform .16s; }
.pillar-link:hover .arrow { transform: translateX(4px); }
.pillar-link.is-muted { color: var(--faint); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .status-live i { animation: none; } }

/* ---------------------------------------------------------------- why */
.why-grid .feature:nth-child(4) .ico { background: color-mix(in srgb, var(--c3) 18%, transparent); color: var(--c3); }
.why-grid .feature:nth-child(5) .ico { background: color-mix(in srgb, var(--c4) 16%, transparent); color: var(--c4); }
.why-grid .feature:nth-child(6) .ico { background: color-mix(in srgb, var(--c6) 16%, transparent); color: var(--c6); }
.why-grid .feature a { color: var(--foreground); }

/* ---------------------------------------------------------------- who */
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
            background: var(--border); border: 1px solid var(--border);
            border-radius: var(--r-card); overflow: hidden; margin-top: 12px; }
@media (max-width: 900px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } }
.who { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; background: var(--card);
       transition: background .2s; }
.who:hover { background: var(--muted); }
.who b { font-weight: 600; font-size: 15px; }
.who span { font-size: 14px; color: var(--muted-foreground); line-height: 1.55; }

/* ---------------------------------------------------------------- numbers */
.stats-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .stats-6 { grid-template-columns: repeat(2, 1fr); } }