/* About. The photo Polaroid is drawn in design px multiplied by --k (as on Home):
   1px at 1440, 0.66px at 768, 0.7px at 390. */
@layer base {

.about { display: flex; flex-direction: column; padding: 96px var(--pad) 120px; gap: 150px; }

/* ---------- Bio ---------- */
.bio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.bio-text { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 24px; font-size: 20px; line-height: 1.75; }
.bio-text h1 { margin: 0 0 8px 0; font-size: clamp(48px, 4.4444vw, 64px); line-height: 1.05; font-weight: 700; letter-spacing: -2px; }
.bio-text p { margin: 0; }
.bio-text a { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: transparent; }
.bio-text a.on { text-decoration-color: currentColor; }
.bio-art { grid-column: 9 / 13; padding-top: 40px; display: flex; justify-content: flex-end; --k: min(1px, calc((27.7778vw - 16px) / 384)); }

.photo-box { width: calc(380 * var(--k)); flex-shrink: 0; }
.photo { position: relative; width: calc(380 * var(--k)); transform: rotate(4deg); }
.photo .frame {
  width: 100%; box-sizing: border-box; background: #FFFCF4; border: calc(1.5 * var(--k)) solid #000;
  box-shadow: calc(10 * var(--k)) calc(10 * var(--k)) 0 #000; padding: calc(20 * var(--k)) calc(20 * var(--k)) 0;
}
.photo .shot { height: calc(440 * var(--k)); box-sizing: border-box; border: calc(1.5 * var(--k)) solid #000; overflow: hidden; }
.photo .shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.photo .foot-space { height: calc(70 * var(--k)); }
.photo .tape {
  position: absolute; left: calc(135 * var(--k)); top: calc(-18 * var(--k)); width: calc(110 * var(--k)); height: calc(34 * var(--k));
  background: rgba(0,0,0,.12); border: calc(1.5 * var(--k)) dashed #000; transform: rotate(6deg);
}

/* ---------- Hobbies ---------- */
.hobbies { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; align-items: start; }
.hobbies h2 { grid-column: 1 / 13; margin: 0; font-size: 48px; font-weight: 700; letter-spacing: -1px; }
.hobbies article { display: flex; flex-direction: column; gap: 18px; }
.hobbies article:nth-of-type(1), .hobbies article:nth-of-type(5) { grid-column: 1 / 6; }
.hobbies article:nth-of-type(2), .hobbies article:nth-of-type(6) { grid-column: 7 / 12; margin-top: 72px; }
.hobbies article:nth-of-type(3) { grid-column: 2 / 7; }
.hobbies article:nth-of-type(4) { grid-column: 8 / 13; margin-top: 72px; }
.hobbies h3 {
  margin: 0; align-self: flex-start; background: #000; color: #FAF3E1; font-size: 20px; font-weight: 700; letter-spacing: 1.5px;
  padding: 8px 16px; border-radius: 3px; transform: rotate(var(--tilt)); opacity: 0; transition: opacity 0.2s;
}
.hobbies h3.on { opacity: 1; }
.hobbies p { margin: 0; font-size: 19px; line-height: 1.7; }

@media (max-width: 1024px) {
  .about { padding: 64px 32px 96px; gap: 96px; }
  .bio { grid-template-columns: minmax(0, 1fr) 35.1563vw; column-gap: 32px; }
  .bio-text { grid-column: auto; gap: 20px; font-size: 18px; }
  .bio-text h1 { font-size: clamp(38px, 6.25vw, 48px); letter-spacing: -1.5px; }
  .bio-art { grid-column: auto; padding-top: 30px; justify-content: center; --k: 0.085938vw; }
  .photo-box { height: calc(546 * var(--k)); }

  .hobbies { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 48px; }
  .hobbies h2 { grid-column: 1 / -1; font-size: 40px; }
  .hobbies article:nth-of-type(n) { grid-column: auto; margin-top: 0; }
  .hobbies article:nth-of-type(even) { margin-top: 48px; }
  .hobbies h3 { font-size: 18px; padding: 7px 14px; }
  .hobbies p { font-size: 17px; }
}

@media (max-width: 600px) {
  .about { padding: 40px 16px 72px; gap: 72px; }
  .bio { display: flex; flex-direction: column; align-items: stretch; gap: 48px; }
  .bio-text { gap: 18px; font-size: 17px; }
  .bio-text h1 { font-size: 40px; letter-spacing: -1px; }
  .bio-art { padding-top: 0; --k: min(1px, calc((100vw - 32px) / 511.43)); }

  .hobbies { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .hobbies h2 { font-size: 32px; }
  .hobbies article:nth-of-type(even) { margin-top: 0; }
  .hobbies h3 { font-size: 17px; }
  .hobbies p { font-size: 16px; }
}

/* Current page in the nav */
.navlinks a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

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

}