.about-page { --about-dim:#7d7e79; }
.about-page.light { --about-dim:#62635f; }
.about-page .site-header { position:fixed; }

.about-intro {
  min-height:57.64rem;
  padding-top:16.25rem;
  padding-bottom:12.5rem;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--gutter);
  align-items:start;
}
.about-portrait { grid-column:1 / 3; justify-self:center; width:205.14px; height:197px; max-width:none; object-fit:fill; transform:translateX(50px); }
.about-intro-copy { grid-column:3 / 7; }
.about-intro h1 { margin:0; font-size:4rem; line-height:1.09375; letter-spacing:0; font-weight:300; }
.about-intro h1 strong { font-weight:600; }
.about-intro-copy > p { max-width:52rem; margin:2rem 0 0; color:#fff; font-size:1.25rem; line-height:1.5; letter-spacing:.02em; font-weight:300; }
body.light .about-intro-copy > p { color:#101010; }
.intro-lines .line-mask { display:block; overflow:hidden; }
.intro-lines .line-mask > span { display:block; transform:translate3d(0,108%,0); transition:transform 1.15s cubic-bezier(.16,1,.3,1); will-change:transform; }
.intro-lines.is-visible .line-mask > span { transform:translate3d(0,0,0); }
.intro-lines .line-mask:nth-child(2) > span { transition-delay:.09s; }
.intro-lines .line-mask:nth-child(3) > span { transition-delay:.18s; }
.line-group .line-mask { display:block; overflow:hidden; }
.line-group .line-mask > span { display:block; transform:translate3d(0,112%,0); transition:transform 1s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--line-index,0) * 65ms); will-change:transform; }
.line-group.is-visible .line-mask > span,.timeline-item.is-visible .line-group .line-mask > span { transform:translate3d(0,0,0); }

.about-section { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--gutter); padding-top:3.75rem; }
.about-label { grid-column:1 / 3; margin:0; font-size:1.5rem; line-height:1.25; font-weight:400; }

.timeline-section { padding-bottom:12.5rem; }
.timeline-list { position:relative; grid-column:3 / 7; min-height:94rem; display:flex; flex-direction:column; justify-content:space-between; }
.timeline-rail { position:absolute; top:0; left:-2.75rem; width:1px; height:var(--rail-end,100%); background:var(--line); }
.timeline-orb {
  position:absolute; z-index:2; left:50%; top:0; width:30px; height:30px; border-radius:50%; transform:translate3d(-50%,0,0);
  border:1px solid rgba(255,255,255,.34);
  background:radial-gradient(circle at 45% 42%,rgba(103,103,103,.88) 0%,rgba(75,75,75,.94) 48%,rgba(49,49,49,.98) 100%);
  box-shadow:inset 1px 1px 3px rgba(255,255,255,.34),inset -2px -2px 5px rgba(0,0,0,.28),0 4px 12px rgba(0,0,0,.18);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  will-change:transform;
}
body.light .timeline-orb { border-color:rgba(255,255,255,.78); background:radial-gradient(circle at 43% 39%,rgba(122,122,122,.72),rgba(75,75,75,.86) 55%,rgba(45,45,45,.93)); }
.timeline-item { min-height:17rem; }
.timeline-date { margin:0 0 .6rem; color:var(--about-dim); font-size:1.25rem; line-height:1.25; }
.timeline-item h3 { margin:0; font-size:2rem; line-height:1.25; letter-spacing:.02em; font-weight:400; }
.timeline-item > p:last-child { margin:.8rem 0 0; color:var(--about-dim); font-size:1.25rem; line-height:1.25; font-weight:300; }

.skills-section { min-height:44rem; padding-bottom:12.5rem; }
.skills-grid { grid-column:3 / 7; display:grid; grid-template-columns:1fr 1fr; column-gap:5rem; row-gap:6.25rem; }
.info-card h3 { margin:0 0 1rem; font-size:2rem; line-height:1.25; letter-spacing:.02em; font-weight:400; }
.info-card p { margin:0; color:var(--about-dim); font-size:.875rem; line-height:1.714; font-weight:300; }

.tools-section { min-height:31.5rem; padding-bottom:12.5rem; }
.tools-list { grid-column:3 / 7; margin:0; font-size:2rem; line-height:1.45; letter-spacing:.02em; font-weight:400; }
.tools-list i { display:inline-block; width:.36em; height:.36em; margin-inline:.28em; border-radius:50%; overflow:hidden; color:transparent; font-size:1em; line-height:1; vertical-align:.12em; border:1px solid rgba(255,255,255,.28); background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.5),rgba(112,112,109,.72) 42%,rgba(47,47,46,.92) 100%); box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset -1px -1px 3px rgba(0,0,0,.28),0 2px 5px rgba(0,0,0,.16); }
body.light .tools-list i { border-color:rgba(0,0,0,.12); background:radial-gradient(circle at 38% 32%,#fff,rgba(170,170,166,.78) 48%,rgba(88,88,85,.86)); }

.about-work { padding-top:0; border-top:0; }
.about-page .contact { padding-top:12.5rem; }

@media (max-width:1100px) {
  .about-intro h1 { font-size:clamp(2.9rem,5.1vw,4rem); }
  .about-intro-copy > p { font-size:1rem; }
  .timeline-item h3,.info-card h3,.tools-list { font-size:1.65rem; }
  .timeline-item > p:last-child { font-size:1rem; }
}

@media (max-width:820px) {
  .about-intro { min-height:auto; padding-top:9rem; padding-bottom:8rem; grid-template-columns:1fr; }
  .about-portrait { grid-column:1; justify-self:start; width:min(205.14px,58vw); height:auto; margin-bottom:3.5rem; transform:none; }
  .about-intro-copy { grid-column:1; }
  .about-intro h1 { font-size:clamp(2.3rem,8.3vw,4rem); }
  .about-intro-copy > p { margin-top:2rem; }
  .about-section { grid-template-columns:1fr; padding-top:2.5rem; }
  .about-label { grid-column:1; margin-bottom:4rem; }
  .timeline-section,.skills-section,.tools-section { padding-bottom:8rem; }
  .timeline-list { grid-column:1; min-height:87rem; padding-left:3.25rem; }
  .timeline-rail { left:1rem; }
  .skills-grid { grid-column:1; grid-template-columns:1fr 1fr; gap:4rem 2rem; }
  .tools-list { grid-column:1; font-size:clamp(1.45rem,5vw,2rem); }
  .about-work { padding-top:0; }
  .about-page .contact { padding-top:8rem; }
}

@media (max-width:520px) {
  .about-intro { padding-top:7.5rem; }
  .about-intro h1 { font-size:25px; line-height:1.25; letter-spacing:0; font-weight:400; }
  .about-intro-copy > p { font-size:16px; line-height:1.42; letter-spacing:0; font-weight:300; text-wrap:pretty; }
  .about-intro h1 .line-mask,.about-intro-copy > p .line-mask { display:inline; height:auto; overflow:visible; }
  .about-intro h1 .line-mask > span,.about-intro-copy > p .line-mask > span { display:inline; transform:none; }
  .about-intro h1 .line-mask:not(:last-child)::after,.about-intro-copy > p .line-mask:not(:last-child)::after { content:" "; }
  .about-page .contact { padding-top:4rem; }
  .about-label { margin-bottom:3rem; }
  .timeline-list { min-height:92rem; }
  .timeline-item { min-height:19rem; }
  .timeline-item h3 { font-size:1.45rem; }
  .skills-grid { grid-template-columns:1fr; row-gap:4rem; }
  .about-work { padding-top:0; }
}

@media (prefers-reduced-motion:reduce) {
  .line-group .line-mask > span,.intro-lines .line-mask > span { transform:none; }
}