/* Use the first section's fonts and accent. */
.about { position: relative; isolation: isolate; background: #4b5052; color: rgba(255,255,255,0.8); min-height: 100vh; padding: 48px 32px; font-family: "Cabin", sans-serif; }
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url("../img/openmic.jpg") center / cover no-repeat;
  filter: grayscale(1);
  pointer-events: none;
}
.about-inner { position: relative; max-width: 900px; min-height: calc(100vh - 96px); margin: 0 auto; display: flex; flex-direction: column; }
.path-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; min-height: calc(100vh - 96px); align-content: center; padding: 0; }
.path-card { display: block; text-decoration: none; appearance: none; border: 0; padding: 40px 24px; background: transparent; color: inherit; cursor: pointer; text-align: center; transition: color 250ms ease; }
.path-name { display: block; font-family: "Cabin", sans-serif; font-size: clamp(30px, 3.5vw, 44px); font-weight: 400; line-height: 1.4; }
.path-name { text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.path-name > span { position: relative; display: inline-block; color: #FF9800; }
.path-cursor { display: block; width: 28px; height: 28px; margin: 24px auto 0; color: rgba(255,255,255,0.8); animation: cursor-wobble 1s ease-in-out infinite alternate; }
@keyframes cursor-wobble {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}
.path-card:hover { color: #fff; }
.path-card:hover .path-cursor, .path-card:focus-visible .path-cursor { color: #FF9800; }
.about a:focus-visible, .about button:focus-visible { outline: 2px solid #FF9800; outline-offset: 5px; }
/* Preserve the original scaling animation and pop-up labels. */
.about .about-contact { position: absolute; bottom: -16px; left: 0; right: 0; height: auto; background: transparent; padding: 32px 0; flex-direction: row; flex-wrap: wrap; }
.about-contact a:focus-visible { transform: scale(1.5) translateY(2px); }
.about-contact a:focus-visible span { bottom: 80px; visibility: visible; opacity: 1; }
@media (max-width: 720px) {
  .about { padding: 36px 24px; }
  .about-inner { min-height: calc(100vh - 72px); }
  .path-grid { grid-template-columns: 1fr; gap: 32px; min-height: calc(100vh - 72px); padding: 0; }
  .path-card { padding: 24px 12px; }
  .path-name { font-size: 32px; }
  .about .about-contact a { width: 64px; height: 64px; padding: 16px; font-size: 32px; display: flex; justify-content: center; align-items: center; }
  .about .about-contact a span { margin: 0; }
  .about .about-contact a:hover span, .about .about-contact a:focus-visible span { bottom: 72px; }
}
@media (max-width: 480px) {
  .title h1 { font-size: clamp(42px, 12vw, 58px); text-align: center; }
  .title .nickname { font-size: 20px; }
  .title .tagline { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .title .arrow { animation: none; }
  .path-cursor { animation: none; transform: none; }
  .about * { transition: none; }
}

@media (max-width: 480px) {
  .about .about-contact a { width: calc(16.666% - 4px); padding: 12px; font-size: 28px; }
}