/* Keep the existing navigation's typography and wipe on semantic buttons. */
button.nav-link {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  text-align: inherit;
  cursor: pointer;
}

.content-shade {
  position: fixed;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 13, 20, 0.38), rgba(5, 13, 20, 0.2) 42%, transparent 74%);
  opacity: 0;
  transition: opacity 320ms ease;
}

.content-shade.is-visible {
  opacity: 1;
}

.content-panel {
  --content-top: clamp(2rem, 20vh, 12rem);
  --content-left: clamp(1.7rem, 7.5vw, 8rem);
  position: fixed;
  z-index: 5;
  top: var(--content-top);
  left: var(--content-left);
  width: min(40rem, calc(100vw - var(--content-left) - 19rem));
  max-height: calc(100vh - var(--content-top) - 2rem);
  max-height: calc(100dvh - var(--content-top) - 2rem);
  padding: 0.6rem 0.9rem 1.4rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 223, 226, 0.22) transparent;
  color: rgba(240, 243, 244, 0.84);
  text-shadow: 0 1px 3px rgba(4, 12, 18, 0.95), 0 1px 14px rgba(4, 12, 18, 0.8);
  outline: none;
}

.content-panel[hidden] {
  display: none;
}

.content-panel:focus-visible {
  scrollbar-color: rgba(214, 223, 226, 0.45) transparent;
}

.profile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.profile-links .nav-link[aria-disabled="true"] {
  cursor: default;
}

.about-content {
  font-size: clamp(0.9rem, 1.14vw, 1.025rem);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: 0.025em;
  overflow-wrap: anywhere;
}

.about-content h2 {
  margin-bottom: 0.65rem;
  font-size: clamp(2rem, 2.65vw, 2.65rem);
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: 0.22em;
  color: var(--text);
}

.about-content p + p {
  margin-top: 1.05rem;
}

.about-content .about-intro {
  margin-bottom: 1.65rem;
  color: rgba(225, 233, 236, 0.7);
  line-height: 1.7;
  letter-spacing: 0.045em;
}

.about-content h3 {
  margin-top: 1.65rem;
  margin-bottom: 0.65rem;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.about-content .about-note {
  margin-top: 1.5rem;
  font-size: 0.8em;
  color: rgba(218, 228, 231, 0.5);
  letter-spacing: 0.055em;
}

/* A complete semantic copy stays available to assistive technology while the
   visual copy streams. No live region announces individual fragments. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .content-shade {
    background: linear-gradient(180deg, transparent 35%, rgba(5, 13, 20, 0.3) 70%);
  }

  .content-panel {
    --content-top: calc(30vh + 10.5rem);
    left: 1.7rem;
    right: 1.7rem;
    width: auto;
    max-height: calc(100vh - var(--content-top) - 1.7rem);
    max-height: calc(100dvh - var(--content-top) - 1.7rem);
  }

  .about-content h2 {
    font-size: 1.85rem;
  }
}

@media (max-height: 540px) and (min-width: 560px) {
  .content-shade {
    background: linear-gradient(90deg, rgba(5, 13, 20, 0.38), transparent 75%);
  }

  .content-panel {
    --content-top: 1.5rem;
    right: 13rem;
    width: auto;
    max-width: 40rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-shade {
    transition: none;
  }
}