/* About page — measured from the 1920px artboard (y offsets relative to the bottom of the nav) */
.about-page { position: relative; }
.about-top { position: relative; height: calc(993 * var(--u)); margin-top: 1px; }
.about-photo { position: absolute; left: calc(184 * var(--u)); top: calc(151 * var(--u)); width: calc(628 * var(--u)); height: calc(746 * var(--u)); }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-star-a { position: absolute; left: calc(125 * var(--u)); top: calc(88 * var(--u)); width: calc(138 * var(--u)); height: auto; }
.about-star-b { position: absolute; left: calc(1705 * var(--u)); top: calc(458 * var(--u)); width: calc(76 * var(--u)); height: auto; }

.about-copy { position: absolute; left: calc(880 * var(--u)); top: calc(260 * var(--u)); width: calc(800 * var(--u)); font-size: calc(24.3 * var(--u)); line-height: 1.2; }
.about-copy p { margin: 0; }
.about-copy p + p { margin-top: calc(17.1 * var(--u)); }
.about-copy .accent { color: var(--pink); font-weight: 500; }

.about-links { display: flex; align-items: flex-start; gap: calc(25 * var(--u)); margin-top: calc(74 * var(--u)); }
.about-in { display: block; width: calc(57 * var(--u)); height: calc(57 * var(--u)); color: var(--pink); transition: transform 0.2s ease; }
.about-in img { display: block; width: 100%; height: 100%; }
.about-resume { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: calc(169 * var(--u)); height: calc(59 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(15 * var(--u)); border: 1px solid var(--ink); color: var(--ink); font-weight: 500; line-height: 1; transition: border-color 0.2s ease, color 0.2s ease; }
.about-resume svg { width: calc(28 * var(--u)); height: auto; color: var(--pink); transition: transform 0.2s ease; }
.about-resume:hover, .about-resume:focus-visible { border-color: var(--pink); color: var(--pink); }
.about-resume:hover svg { transform: translateY(calc(2 * var(--u))); }
.about-in:hover { transform: translateY(calc(-2 * var(--u))); }

.about-rule { height: 1px; width: calc(1589 * var(--u)); margin-left: calc(187 * var(--u)); background: var(--ink); }

.about-facts { margin: 0; padding: calc(88 * var(--u)) 0 calc(110 * var(--u)) calc(185 * var(--u)); font-size: calc(24.3 * var(--u)); line-height: 1.2; }
.af-row { display: grid; grid-template-columns: calc(219 * var(--u)) calc(620 * var(--u)); }
.af-row + .af-row { margin-top: 1.2em; }
.af-row dt { font-weight: 500; }
.af-row dd { margin: 0; }
.af-row dd strong { font-weight: 500; }

.nav-links a[href$="about.html"] { color: var(--pink); }

/* Narrow desktop / tablet (901–1190px): the artboard no longer fits, so the same layout flows as two fluid columns */
@media (min-width: 901px) and (max-width: 1190px) {
  .about-top { height: auto; margin-top: 0; padding: 64px 40px 0; display: grid; grid-template-columns: 44% 1fr; column-gap: 44px; align-items: center; }
  .about-photo { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 628 / 746; }
  .about-star-a { left: 14px; top: 34px; width: 84px; }
  .about-star-b { display: none; }
  .about-copy { position: static; width: auto; font-size: 18px; line-height: 1.3; }
  .about-copy p + p { margin-top: 12px; }
  .about-links { margin-top: 34px; gap: 18px; }
  .about-in { width: 46px; height: 46px; }
  .about-resume { width: 138px; height: 47px; padding: 0 13px; font-size: 18px; }
  .about-resume svg { width: 23px; }
      .about-rule { width: auto; margin: 72px 40px 0; }
  .about-facts { padding: 60px 40px 80px; font-size: 18px; line-height: 1.3; }
  .af-row { grid-template-columns: 170px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .about-top { height: auto; padding: 34px 22px 0; display: flex; flex-direction: column; }
  .about-photo { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 628 / 746; }
  .about-star-a { left: 6px; top: 8px; width: 56px; }
  .about-star-b { display: none; }
  .about-copy { position: static; width: auto; font-size: 18px; line-height: 1.35; margin-top: 28px; }
  .about-copy p + p { margin-top: 14px; }
  .about-links { margin-top: 28px; gap: 14px; }
  .about-in { width: 48px; height: 48px; }
  .about-resume { width: 150px; height: 48px; padding: 0 14px; font-size: 18px; }
  .about-resume svg { width: 24px; }
      .about-rule { width: auto; margin: 40px 22px 0; }
  .about-facts { padding: 34px 22px 48px; font-size: 18px; line-height: 1.35; }
  .af-row { grid-template-columns: 1fr; row-gap: 2px; }
  .af-row + .af-row { margin-top: 24px; }
}