.home-about { margin: 0 32px; border-top: 1px solid var(--rule); scroll-margin-top: -36px; --about-grey: #90928c; }
[data-theme="dark"] .home-about { --about-grey: #91958c; }
.about-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); min-height: 85svh; }
.home-about.about-pinned { height: 225svh; }
.about-pinned .about-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.about-signature { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 52px 32px 44px 0; }
.about-plasma { position: absolute; z-index: -1; inset: 132px 0 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 85%, transparent), radial-gradient(ellipse at 17% 38%, #000 8%, #000b 25%, #0003 55%, #0002 100%); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 85%, transparent), radial-gradient(ellipse at 17% 38%, #000 8%, #000b 25%, #0003 55%, #0002 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.about-plasma canvas { display: block; width: 100%; height: 100%; }
.about-label { font: 400 12px "Bitcount Grid Single", monospace; color: var(--muted); letter-spacing: .04em; }
.leo-signature { display: block; width: 68%; height: auto; align-self: center; margin-block: auto; overflow: visible; color: var(--ink); transform: translateY(-80px) rotate(-7deg); }
.signature-flourish { stroke: #9dd600; stroke-width: 5; }
.about-scroll-ready .leo-signature path { stroke-dasharray: 1; }
.about-copy { padding: clamp(40px, 5vw, 88px) 2vw clamp(40px, 5vw, 88px) clamp(32px, 4vw, 72px); align-self: center; }
.about-copy h2 { font-family: inherit; font-size: clamp(32px, 3.8vw, 58px); font-weight: 650; line-height: 1.45; letter-spacing: -.025em; margin: 0 0 38px; }
.about-copy p { font-family: inherit; font-size: clamp(23px, 2.25vw, 34px); font-weight: 500; line-height: 1.65; letter-spacing: 0; color: var(--ink); margin: 0; }
.about-copy mark { position: relative; display: inline-block; isolation: isolate; white-space: nowrap; font-weight: inherit; padding: 0 .035em; background: transparent; color: inherit; --marker-progress: 1; }
.about-copy mark::before { content: ""; position: absolute; z-index: -1; inset: 17% -.04em 11%; background: var(--highlight); opacity: .88; clip-path: polygon(1% 17%, 9% 7%, 18% 15%, 26% 2%, 35% 12%, 45% 5%, 56% 17%, 66% 2%, 76% 12%, 87% 0%, 99% 10%, 100% 78%, 91% 95%, 82% 83%, 73% 98%, 62% 85%, 52% 100%, 41% 88%, 32% 98%, 21% 83%, 11% 95%, 0% 85%); -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); -webkit-mask-size: calc(var(--marker-progress) * 100%) 100%; mask-size: calc(var(--marker-progress) * 100%) 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; transform: rotate(-.7deg); }
.about-copy mark:nth-of-type(2)::before { transform: rotate(.6deg); }
.about-scroll-ready .about-copy mark { --marker-progress: 0; }
.about-token { display: inline-block; white-space: nowrap; }
.about-glyph { display: inline-block; transform-origin: center; }
@media (max-width: 700px) {
  .home-about { margin: 0 22px; }
  .about-stage { grid-template-columns: 1fr; min-height: 0; }
  .about-signature { padding: 32px 0 24px; gap: 20px; }
  .about-plasma { inset: 76px 0 0; opacity: .65; }
  .leo-signature { width: min(232px, 68%); transform: translateY(-22px) rotate(-7deg); }
  .about-copy { padding: 36px 0 52px; }
  .about-copy h2 { font-size: 30px; margin-bottom: 28px; }
  .about-copy p { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-about.about-pinned { height: auto; }
  .about-pinned .about-stage { position: static; height: auto; min-height: 85svh; }
  .leo-signature { opacity: 1 !important; }
  .leo-signature path { stroke-dashoffset: 0 !important; }
  .about-glyph { transform: none !important; text-shadow: none !important; color: var(--ink) !important; }
  .about-copy mark { --marker-progress: 1 !important; }
  .about-copy mark .about-glyph { color: #242623 !important; }
}