/* ABOUT SECTION — Figma 2822:16, 1920 px artboard. */
.about { --about-copy-size: 4.0625vw; --about-text-gap: 6.25vw; --about-section-gap: 20.729vw; --shader-text-gap: 260px; --shader-overhang: 5.68cqw; position: relative; container-type: inline-size; background: var(--color-bg); color: var(--color-text); min-height: 161.094vw; padding-top: var(--about-section-gap); }
.about-greeting { margin: 0 var(--page-inset) 0 24.167%; font-size: var(--about-copy-size); line-height: .9; font-weight: 500; height: .9em; }
.about-cursor { font-size: .65em; font-weight: 300; position: relative; top: -2px; animation: about-cursor 1s step-end infinite; }
@keyframes about-cursor { 50% { opacity: 0; } }
.about-bio { margin: var(--about-text-gap) var(--page-inset) 0; font-size: var(--about-copy-size); font-weight: 500; line-height: 1; letter-spacing: 0; text-indent: 0; }
.about-portrait { display: inline-block; width: 4.167vw; height: 4.167vw; border-radius: 50%; object-fit: cover; vertical-align: middle; margin: -.15em -.02em; transform: translateY(calc(-.08em - 4px)); }
.about-socials { display: flex; flex-direction: column; align-items: flex-start; margin: var(--about-text-gap) var(--page-inset) 0 25.521%; font-size: max(16px, 1.25vw); font-weight: 500; line-height: 1; }
.about-socials a { color: inherit; text-decoration: none; transition: opacity .2s; }
.about-socials a:hover { opacity: .55; }
.about-socials a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.about-art { width: 17.24%; aspect-ratio: 331 / 333; margin: calc(var(--shader-text-gap) + var(--shader-overhang)) auto 0; }
.about-ascii { display: block; width: 100%; height: 100%; }
.about-expertise { text-align: center; margin-top: calc(var(--shader-text-gap) + var(--shader-overhang)); }
.about-expertise h2 { margin: 0 0 1.406vw; font-size: max(12px, .625vw); line-height: .9; opacity: .3; font-weight: 500; }
.about-expertise ul { list-style: none; padding: 0 var(--page-inset); margin: 0; font-size: max(24px, 2.5vw); line-height: 1; font-weight: 500; }
@media (max-width: 767px) {
 .about { --about-copy-size: clamp(27px, 5.6vw, 43px); --about-text-gap: 64px; --about-section-gap: 120px; --shader-text-gap: 150px; --shader-overhang: 7.9cqw; min-height: auto; padding: var(--about-section-gap) 0 160px; }
 .about-greeting { margin-left: var(--page-inset); font-size: var(--about-copy-size); }
 .about-bio { font-size: var(--about-copy-size); margin-top: var(--about-text-gap); text-indent: 0; }
 .about-portrait { width: 1em; height: 1em; }
 .about-socials { font-size: 18px; line-height: 1.15; margin: var(--about-text-gap) var(--page-inset) 0; }
 .about-art { width: 24%; }
 .about-expertise h2 { font-size: 12px; margin-bottom: 24px; }
 .about-expertise ul { font-size: clamp(24px, 5vw, 38px); }
}
@media (prefers-reduced-motion: reduce) { .about-cursor { animation: none; } }



/* Extra transparent canvas area lets particles leave the triangle slot. */
.about { overflow: clip; }
.about-art { position: relative; }
.about-ascii { position: absolute; width: 600%; height: 600%; left: -250%; top: -250%; pointer-events: none; }
.about-greeting, .about-bio, .about-socials, .about-expertise { position: relative; z-index: 1; }

.about-greeting-mask { overflow: clip; overflow-clip-margin: 4px; }
.about-greeting-mask > span { display: block; }

.about-indent { display: inline-block; width: calc(24.167vw - var(--page-inset)); }
@media(max-width:767px) { .about-indent { display:none; } }

/* Keep the raised portrait inside the reveal clipping area without moving text. */
.about-bio > .about-reveal-line-mask:first-child {
  padding-top: 20px;
  margin-top: -20px;
}

/* The VY silhouette ends above its layout slot: compensate that empty canvas area
   so the visible gaps above and below the logo are both 180px (scale 8, SVG 580×287). */

/* Figma ABOUT SECTION 2826:147–148: beginning of selected works. */
.about { min-height: 0; padding-bottom: max(160px, 20.833333vw); }
.selected-works {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; padding: 0 var(--page-inset) max(80px, 11.25vw);
  color: var(--color-text); background: var(--color-bg);
}
.selected-works-title, .selected-works-years {
  margin: 0; font-size: 10.677083333vw; font-weight: 600;
  line-height: 1; letter-spacing: -.04em;
}
.selected-works-title { flex: 0 1 auto; }
.selected-works-years { flex: 0 0 auto; text-align: right; white-space: nowrap; }


/* Figma Mobile-welcome 2826:172, 375px: shared 95px text axis. */
@media(max-width:767px) {
 .about { --about-copy-size:24px; --about-section-gap:182px; }
 .about-greeting { margin-left:25.333333%; height:1em; line-height:1; }
 .about-bio { margin-top:76px; }
 .about-indent { display:inline-block; width:calc(25.333333vw - var(--page-inset)); }
 .about-portrait { width:24px; height:24px; margin-left:3.12px; margin-right:-3.28px; transform:translate(-4px, -4.12px); }
 .about-socials { margin-top:71px; margin-left:25.333333%; font-size:16px; line-height:1; }
}

/* Allow glyph overshoot and negative tracking inside the section-title reveal masks. */
.selected-works .about-reveal-line-mask {
  overflow: visible !important;
  clip-path: inset(-.12em -.18em);
}

@media (min-width: 1440px) {
  .about-expertise ul { font-size: 72px; }
}

/* Per-digit roll, with glyph bleed independent of the line reveal. */
.years-digit-mask { display:inline-block; height:1em; vertical-align:top; overflow:visible; clip-path:inset(calc(.14em - 4px) -.18em calc(.12em - 4px)); }
.years-digit-track { display:block; position:relative; }
.years-digit-track > span { display:block; height:1.4em; line-height:1; }

.years-digit-track > span + span { position:absolute; top:0; left:0; width:100%; }

/* Desktop: reduce the central ASCII artwork by 10%. */
@media(min-width:992px) { .about-art { width:15.516%; } }