.about-profile {
  --profile-border: rgb(255 255 255 / 16%);
  --profile-border-active: rgb(255 255 255 / 32%);
  --profile-radius: 6px;
  --profile-surface: linear-gradient(155deg, rgb(255 255 255 / 3.5%), rgb(255 255 255 / 0.8%));
  --profile-shadow: inset 0 1px 0 rgb(255 255 255 / 3%), 0 4px 16px -8px rgb(0 0 0 / 30%);
  max-width: 1160px;
  margin-inline: auto;
  padding-top: 0;
  padding-bottom: 0;
}
.about-profile :is(h1, h2, h3, h4, h5, h6):not(.profile-name) { text-transform: uppercase; }
.profile-intro, .profile-section {
  --section-background: #101010;
  border: 0;
  border-radius: 0;
  padding: clamp(128px, 16vw, 192px) clamp(28px, 5vw, 56px);
  margin-bottom: 0;
  background: var(--section-background);
  box-shadow: 0 0 0 100vmax var(--section-background);
  clip-path: inset(0 -100vmax);
  scroll-margin-top: 28px;
}
.profile-section[aria-labelledby="projects-title"] { --section-background: #171e28; }
.profile-section[aria-labelledby="music-title"] { --section-background: #241e26; }
.profile-section[aria-labelledby="background-title"] { --section-background: #192520; }
.profile-section[aria-labelledby="contact-title"] { --section-background: #202020; }
.profile-main-title, .profile-section h2 {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.profile-main-title { margin-bottom: 42px; }
.profile-main-title::after, .profile-section-heading::after {
  content: "";
  display: block;
  width: min(56%, 440px);
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 26%), transparent);
}
.profile-intro-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: stretch;
  gap: clamp(20px, 3vw, 36px);
}
.profile-intro-copy, .profile-portrait-frame, .profile-project,
.profile-content-block, .profile-media-slot, .profile-biography > p,
.profile-tools > div, .profile-contact-blocks > * {
  min-width: 0;
  border: 1px solid var(--profile-border);
  border-radius: var(--profile-radius);
  background: var(--profile-surface);
  box-shadow: var(--profile-shadow);
  padding: clamp(18px, 2.8vw, 28px);
}
.profile-name {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
}
.profile-name span { color: var(--muted); white-space: nowrap; }
.profile-roles { margin: 0 0 22px; color: var(--ink); font-size: 1rem; }
.profile-summary {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.8;
}
.profile-portrait-frame { position: relative; align-self: stretch; min-height: 0; padding: 0; overflow: hidden; }
.profile-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
.profile-portrait-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); pointer-events: none; }
.profile-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 26px; font-size: .9375rem; }
.profile-links a, .profile-detail-link { text-underline-offset: 5px; text-decoration-color: #777; }
.profile-links a:hover, .profile-detail-link:hover { text-decoration-color: #fff; }
.profile-intro-links a { display: inline-flex; align-items: baseline; gap: .3em; padding-block: 4px; font-weight: 700; text-decoration: none; transform-origin: center; transition: transform 160ms ease; }
.profile-intro-links a span { color: #898989; transition: color 160ms ease; }
.profile-intro-links a:is(:hover, :focus-visible) span { color: var(--ink); }
.profile-intro-links a:focus-visible { transform: scale(1.04); outline: 1px solid currentColor; outline-offset: 5px; }
@media (hover: hover) { .profile-intro-links a:hover { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .profile-intro-links a { transition: none; } }
.profile-section-heading { margin-bottom: 40px; text-align: center; }
.profile-index { margin: 0 0 10px; color: #a7a7a7; font-size: .875rem; font-variant-numeric: tabular-nums; letter-spacing: .16em !important; }
.profile-section-heading h2 { letter-spacing: .035em !important; }
.profile-section-body { min-width: 0; }
.profile-projects, .profile-biography { display: grid; gap: 28px; }
.profile-project, .profile-content-block, .profile-media-slot,
.profile-biography > p, .profile-tools > div, .profile-contact-blocks > * {
  padding: clamp(20px, 3vw, 32px);
}
.profile-project, .profile-contact-blocks > * {
  background-color: transparent;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.profile-project:focus-within, .profile-contact-blocks > :focus-within,
.profile-contact-blocks > :focus-visible {
  border-color: var(--profile-border-active);
  background-color: rgb(255 255 255 / 2%);
}
@media (hover: hover) and (pointer: fine) {
  .profile-project:hover, .profile-contact-blocks > :hover {
    border-color: var(--profile-border-active);
    background-color: rgb(255 255 255 / 2%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 8px 24px -12px rgb(0 0 0 / 40%);
    transform: translateY(-2px);
  }
}
.profile-content-block > p, .profile-biography > p,
.profile-project > p:not(.profile-category) {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
}
.profile-content-block > p, .profile-project > p:not(.profile-category) { margin-bottom: 18px; }
.profile-category { margin: 0 0 12px; color: var(--muted); font-size: .75rem; font-weight: 500; line-height: 1.6; letter-spacing: .1em !important; text-transform: uppercase; }
.profile-project h3 { font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1.2; margin: 0 0 12px; }
.profile-project h3 a { text-decoration: none; }
.profile-project h3 a { letter-spacing: .015em !important; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.profile-project h3 a:hover { text-decoration: underline; text-decoration-color: rgb(255 255 255 / 45%); }
.profile-detail-link { display: inline-flex; align-items: baseline; gap: 10px; font-size: .875rem; text-decoration-color: rgb(255 255 255 / 28%); transition: text-decoration-color 180ms ease; }
.profile-detail-link span { display: inline-block; color: var(--muted); transition: color 180ms ease, transform 180ms ease; }
.profile-detail-link:is(:hover, :focus-visible) span { color: var(--ink); transform: translate(2px, -2px); }
.profile-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 32px; }
.profile-media-slot h3 { margin: 0 0 18px; text-align: center; font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; }
.profile-media-blank { min-height: 150px; }
.profile-recording { min-width: 0; }
.profile-recording h4 { margin: 0 0 12px; color: var(--ink); font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.profile-recording p { margin: 0 0 20px; color: var(--ink-soft); font-size: .9375rem; line-height: 1.7; }
.profile-recording audio { display: block; width: 100%; max-width: 100%; }
.profile-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 0; }
.profile-tools dt { color: var(--muted); font-size: .75rem; font-weight: 500; margin-bottom: 12px; line-height: 1.6; letter-spacing: .08em !important; text-transform: uppercase; }
.profile-tools dd { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }
.profile-contact-blocks { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
.profile-contact-blocks > * { display: flex; align-items: center; justify-content: center; margin: 0; }
.profile-email { font-size: 1.125rem; overflow-wrap: anywhere; text-underline-offset: 6px; }
.profile-contact { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .profile-project, .profile-contact-blocks > *, .profile-detail-link,
  .profile-detail-link span, .profile-intro-links a, .profile-intro-links a span { transition: none; }
  .profile-project:hover, .profile-contact-blocks > :hover,
  .profile-detail-link:is(:hover, :focus-visible) span,
  .profile-intro-links a:is(:hover, :focus-visible) { transform: none; }
}
@media (max-width: 760px) {
  .profile-intro-content { grid-template-columns: minmax(0, 1fr) 160px; }
}
@media (max-width: 580px) {
  .profile-intro, .profile-section { padding: 112px 16px; }
  .profile-intro-content, .profile-media-grid, .profile-tools, .profile-contact-blocks { grid-template-columns: 1fr; }
  .profile-portrait-frame { grid-row: 1; display: flex; align-items: center; justify-content: center; }
  .profile-portrait { position: static; width: 140px; height: auto; }
  .profile-main-title, .profile-section-heading { margin-bottom: 24px; }
  .profile-project h3 { font-size: 1.75rem; }
  .profile-contact { margin-bottom: 0; }
}