/* About page — builds on style.css (same tokens, ruler nav, [link]s, grid lines, CTA + footer)
   Design reference: Figma "Nupur" › About (node 534:165, 1440px wide) */

.page-about { --row-line: #e3e3e3; }

/* ---------- Intro ---------- */
.ab-intro {
  padding-top: 141px;
  display: grid; grid-template-columns: minmax(0, 587px) 261px; column-gap: clamp(40px, 8vw, 113px);
  align-items: start;
}
.ab-intro__text { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.ab-intro__title { font-family: var(--serif); font-size: 28px; line-height: 1.25; color: var(--black); letter-spacing: 0; }
.ab-intro__title em { font-style: italic; }
.ab-intro__me { color: #43854d; display: inline-block; transition: transform .45s cubic-bezier(.3,1.6,.5,1); transform-origin: 50% 80%; }
.ab-intro__title:hover .ab-intro__me { transform: rotate(-8deg) translateY(-2px); }
.ab-intro__copy { display: flex; flex-direction: column; gap: 20px; }
.ab-intro__copy p, .ab-intro__ask { font-size: 14px; line-height: 1.4; letter-spacing: -0.5px; color: var(--black); }
.ab-intro__ask { font-style: italic; }
.ab-intro__links { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--serif); font-size: 14px; line-height: 1.3; color: var(--text-light); }

.ab-intro__photo { margin: 26px 0 0; width: 261px; aspect-ratio: 261 / 322; overflow: hidden; }
.ab-intro__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ab-intro__photo:hover img { transform: scale(1.04); }

/* ---------- Experience + awards ---------- */
.ab-records {
  margin-top: 146px;
  display: grid; grid-template-columns: minmax(0, 544fr) minmax(0, 493fr); column-gap: clamp(48px, 7vw, 102px);
  align-items: start;
}
.ab-block { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ab-block__title { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.5px; color: var(--text-light); }
.ab-rows li {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--row-line);
  font-size: 14px; line-height: 1.4; letter-spacing: -0.5px; color: var(--text-light);
}
.ab-rows li:first-child { padding-top: 0; }
/* hover: an ink line sweeps along the rule and the company name nudges forward */
.ab-rows li::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.6,0,.2,1); }
.ab-rows li:hover::after { transform: scaleX(1); }
.ab-rows__main { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.ab-rows__main b { font-weight: 400; color: var(--black); display: inline-block; transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
.ab-rows__main i { font-style: normal; font-size: 16px; line-height: 1; }
.ab-rows li:hover .ab-rows__main b { transform: translateX(3px); }
.ab-rows__meta { flex: none; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Life ---------- */
.ab-life { margin-top: 105px; }
.ab-life__intro { margin: 0 auto; width: min(612px, calc(100% - 2 * var(--gutter))); display: flex; flex-direction: column; gap: 19px; text-align: center; }
.ab-life__title { font-size: 14px; line-height: 1.4; letter-spacing: -0.5px; color: var(--black); }
.ab-life__intro p { font-size: 14px; line-height: 1.4; letter-spacing: -0.5px; color: var(--black); }
.ab-life__intro em { font-family: var(--serif); font-style: italic; font-size: 1.12em; }

/* the pile: every piece is placed in Figma px, converted to % of the 1161 × 408 frame */
.ab-pile__scroller { margin-top: 126px; }
.ab-pile {
  position: relative; margin: 0 auto;
  width: min(1161px, calc(100vw - 2 * (var(--nav-x) + var(--nav-w) + 8px)));
  aspect-ratio: 1161 / 408;
}
.pc {
  position: absolute; margin: 0;
  left: calc(var(--x) / 1161 * 100%); top: calc(var(--y) / 408 * 100%);
  width: calc(var(--w) / 1161 * 100%); height: calc(var(--h) / 408 * 100%);
  object-fit: cover; user-select: none; -webkit-user-drag: none; touch-action: pan-y;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: transform .45s cubic-bezier(.3,1.45,.5,1), box-shadow .3s, filter .3s, opacity .5s;
}
.pc--cut { object-fit: contain; }
.pc--photo { background: #eef0ea; }
@media (hover: hover) and (pointer: fine) {
  .pc { cursor: grab; }
  .pc:hover { --sc: 1.05; --rot: var(--tilt, 2deg); z-index: 40; }
  .pc--photo:hover { box-shadow: 0 16px 30px -12px rgba(20,19,18,.35); }
  .pc--cut:hover { filter: drop-shadow(0 12px 14px rgba(20,19,18,.22)); }
  .pc.is-drag { cursor: grabbing; transition: box-shadow .3s, filter .3s; --sc: 1.07; --rot: 0deg; z-index: 60; }
  .pc--photo.is-drag { box-shadow: 0 24px 40px -14px rgba(20,19,18,.4); }
}
/* pieces tumble onto the table the first time the pile scrolls in */
html.js .ab-pile:not(.is-in) .pc { opacity: 0; --dy: 28px; --rot: var(--drop, -4deg); --sc: .94; }
html.js .ab-pile.is-in .pc { transition-delay: var(--d, 0s); }
html.js .ab-pile.is-settled .pc { transition-delay: 0s; }

/* ---------- Intro + reveal hooks (paired with css/motion.css) ---------- */
html.js.intro .ab-intro__title { animation: in-up .6s cubic-bezier(.2,.8,.2,1) .4s both; }
html.js.intro .ab-intro__copy > p { animation: in-up .6s cubic-bezier(.2,.8,.2,1) both; }
html.js.intro .ab-intro__copy > p:nth-child(1) { animation-delay: .55s; }
html.js.intro .ab-intro__copy > p:nth-child(2) { animation-delay: .65s; }
html.js.intro .ab-intro__copy > p:nth-child(3) { animation-delay: .75s; }
html.js.intro .ab-intro__ask, html.js.intro .ab-intro__links { animation: in-up .6s cubic-bezier(.2,.8,.2,1) .9s both; }
html.js.intro .ab-intro__photo { animation: pop .8s cubic-bezier(.3,1.4,.5,1) .5s both; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ab-intro { padding-top: 72px; }
  .ab-pile { width: min(1161px, calc(100vw - 2 * var(--gutter))); }
}
@media (max-width: 860px) {
  .ab-intro { padding-top: 48px; grid-template-columns: 1fr; row-gap: 40px; }
  .ab-intro__photo { margin-top: 0; width: min(261px, 72%); }
  .ab-records { grid-template-columns: 1fr; row-gap: 64px; margin-top: 96px; }
  .ab-life { margin-top: 96px; }
  /* the pile keeps its composition and becomes a strip you swipe through */
  .ab-pile__scroller { margin-top: 56px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px var(--gutter) 16px; }
  .ab-pile__scroller::-webkit-scrollbar { display: none; }
  .ab-pile { width: 820px; margin: 0; }
  .pc { touch-action: auto; }
}
@media (max-width: 560px) {
  .ab-intro__copy p, .ab-intro__ask, .ab-life__intro p, .ab-life__title { font-size: 15px; }
  .ab-intro__links { font-size: 16px; gap: 10px 14px; }
  .ab-rows li { flex-wrap: wrap; row-gap: 2px; }
  .ab-rows__main { white-space: normal; flex-wrap: wrap; row-gap: 0; }
  .ab-rows__meta { font-size: 13px; flex-basis: 100%; text-align: left; }
  .ab-block--awards .ab-rows__meta { flex-basis: auto; }
  .ab-pile { width: 700px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .ab-pile:not(.is-in) .pc { opacity: 1; --dy: 0px; --rot: 0deg; --sc: 1; }
}