/* ============================================================
   JAMES APTER — About Page Styles  (css/about.css)
   Requires: css/global.css
   ============================================================ */

.about-hero {
  padding: 80px var(--pad-x);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start;
  border-bottom: var(--border);
  min-height: calc(100vh - var(--nav-h));
}
.about-headline {
  font-family: var(--fd);
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 700; line-height: 1.0; letter-spacing: -2px; margin-bottom: 36px;
}
.about-body {
  display: flex; flex-direction: column; gap: 18px;
  font-size: 13px; line-height: 1.9; color: var(--gray); max-width: 440px;
}
.about-photo-frame {
  border: var(--border); background: var(--cream2);
  aspect-ratio: 1/1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; gap: 12px;
}
.about-photo-ph {
  font-family: var(--fd); font-weight: 700; font-size: 72px;
  color: var(--cream3); letter-spacing: -2px;
}
.about-photo-lbl {
  position: absolute; bottom: -1px; left: -1px;
  background: var(--yellow); border: var(--border);
  padding: 6px 14px; font-size: 10px; letter-spacing: 0.1em;
}

/* ── Propeller hat ────────────────────────────────────────── */
.hat-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: visible;
  cursor: pointer;
}
.hat-wrap .headshot {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hat-layer {
  position: absolute;
  left: 61.5%;
  transform: translateX(-50%);
  width: 54%;
  top: 11%;
  pointer-events: none;
}

.hat-hint {
  font-size: 10px; color: var(--gray-l);
  letter-spacing: 0.1em; margin-top: 10px; text-align: center;
}

/* Services */
.about-services { border-bottom: var(--border); padding: 80px var(--pad-x); }
.services-list  { display: flex; flex-direction: column; }
.service-row {
  display: grid; grid-template-columns: 48px 1fr 1fr;
  align-items: baseline; padding: 22px 0; gap: 20px;
  border-bottom: 1px solid var(--cream3);
}
.service-row:last-child { border-bottom: none; }
.service-num  { font-size: 10px; color: var(--gray); letter-spacing: 0.08em; }
.service-name { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
.service-desc { font-size: 12px; color: var(--gray); line-height: 1.6; }

@media (max-width: 760px) {
  .about-hero  { grid-template-columns: 1fr; gap: 40px; }
  .service-row { grid-template-columns: 40px 1fr; }
  .service-desc { display: none; }
}