:root {
  --frame-rule: var(--c-page); --frame-marker: var(--c-page);
  --c-dark-text: #2C3E48; }
body { background: var(--c-primary); }
.page--full { padding: 0; }

.profile-page { position: relative; padding: 30px 20px 56px; }
@media (min-width: 700px) { .profile-page { padding-top: calc(var(--frame) + var(--bar) + 40px); } }
.profile-page::before,
.profile-page::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--c-page); }
.profile-page::before { left: var(--edge); }
.profile-page::after { right: var(--edge); }

.profile-title {
  width: fit-content; padding: 4px 12px 4px 14px; border-radius: 7px; background: var(--c-ink);
  font-family: var(--mono); font-weight: 500; font-size: 26px; letter-spacing: 0.055em; line-height: 1.35;
  color: var(--c-primary); white-space: nowrap;
}

.profile-photo {
  --sx: 4px; --sy: 4px; --c-shadow: rgb(0 0 0 / 0.34); aspect-ratio: 391 / 517; margin: 28px 0 0; overflow: hidden;
  border: 3px solid var(--c-ink); border-radius: 10px;
  box-shadow: 4px 4px 2px rgb(0 0 0 / 0.34);
  opacity: 0.85;
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }

.profile-story {
  margin-top: 28px;
  font-family: var(--sans); font-weight: 400; font-size: 16px; letter-spacing: 0.005em; line-height: 1.35;
  color: var(--c-dark-text);
}
.profile-story p + p { margin-top: 1.35em; } .profile-cta {
  display: flex; align-items: center; gap: 22px; width: fit-content; margin: 36px 0 0 auto;
  padding: 0.28em 0.5em; border-radius: 7px; background: var(--c-ink);
  font-family: var(--mono); font-weight: 700; font-size: clamp(28px, 5vw, 40px); letter-spacing: 0.025em; line-height: 1.22;
  color: var(--c-ink-light); text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease;
}
.profile-cta:hover { background: var(--c-slate); }
.profile-cta > span { opacity: 0.97; }
.profile-cta img { width: auto; height: 1.1em; transition: translate .2s ease; }
.profile-cta:hover img { translate: 6px 0; }

.site-footer--boxed { margin: 0 var(--edge) 20px; border: 1px solid var(--c-page); }

@media (prefers-reduced-motion: reduce) {
  .profile-cta, .profile-cta img { transition: none; }
}


@media (min-width: 700px) and (max-width: 1199px) {
  .profile-page > * { max-width: 720px; margin-inline: auto; }
  .profile-title { margin-inline: max(0px, (100% - 720px) / 2) auto; }
  .profile-photo { max-width: 440px; margin-inline: max(0px, (100% - 720px) / 2) auto; }
  .profile-story { font-size: 17px; }
  .profile-cta { margin-right: max(0px, (100% - 720px) / 2); }
}


@media (min-width: 1200px) {
  .page--full { --u: calc(100cqw / 1728); }

  .profile-page { height: calc(957 * var(--u)); padding: 0; }
  .profile-page::before { left: calc(20 * var(--u)); }
  .profile-page::after { right: auto; left: calc(1707 * var(--u)); }

  .at { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); margin: 0; }

  .profile-title {
    width: calc(152 * var(--u)); height: calc(45 * var(--u));
    padding: calc(4 * var(--u)) 0 0 calc(17.7 * var(--u)); border-radius: calc(7 * var(--u));
    font-size: calc(30 * var(--u)); line-height: calc(40.5 * var(--u));
  }

  .profile-photo {
    --sx: calc(4 * var(--u)); --sy: calc(4 * var(--u));
    width: calc(391 * var(--u)); height: calc(517 * var(--u));
    border-width: calc(3 * var(--u)); border-radius: calc(10 * var(--u));
    box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / 0.34);
  }

  .profile-story { width: calc(950 * var(--u)); font-size: calc(18 * var(--u)); }

  .profile-cta {
    justify-content: space-between; gap: 0;
    width: calc(313 * var(--u)); height: calc(56.86 * var(--u));
    padding: 0 calc(14.08 * var(--u)); border-radius: calc(3.79 * var(--u));
    font-size: calc(27.617 * var(--u));
  }
  .profile-cta > span { position: relative; top: calc(0.9 * var(--u)); }
  .profile-cta img { height: calc(41.7 * var(--u)); }

  .site-footer--boxed {
    height: calc(160 * var(--u));
    margin: 0 calc(20 * var(--u)) calc(33 * var(--u));
    padding: calc(48 * var(--u)) 0 0 calc(64 * var(--u));
  }
}