/* =========================================================
   About page
   Shares tokens, header, pills, polaroid and CTA with styles.css
   ========================================================= */

:root { --pink: #f7c1d4; --rule: #d9d9d9; }

.ab-page {
  width: min(1000px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding-top: calc(var(--header-h) + 56px);
}

.ab-title {
  margin: 0 0 72px;
  padding-left: 100px;
  font-weight: 900;
  font-size: clamp(64px, 9vw, 128px);
  line-height: .95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.ab-title .line { justify-content: flex-start; }

/* ---------- Sections + coloured frames ---------- */
.ab-section { position: relative; margin: 0 auto; }
.ab-section + .ab-section { margin-top: 120px; }
#bio, #work-history { max-width: 800px; }
#story { max-width: 1000px; }

.ab-label {
  display: inline-block;
  margin: 0 0 16px 24px;
  padding: 3px 5px;
  background: var(--frame-c);
  color: var(--label-ink);
}

.ab-frame { position: relative; padding: 56px; border: 1px solid var(--frame-c); }
.ab-handles { position: absolute; inset: -7px; pointer-events: none; }
.ab-handles i {
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--white);
  border: 1.5px solid var(--frame-c);
  transition: transform .5s var(--ease-back);
}
.ab-handles i:nth-child(1) { left: 0; top: 0; }
.ab-handles i:nth-child(2) { right: 0; top: 0; }
.ab-handles i:nth-child(3) { right: 0; bottom: 0; }
.ab-handles i:nth-child(4) { left: 0; bottom: 0; }
.js .ab-frame .ab-handles i { transform: scale(0); }
.ab-frame.is-in .ab-handles i { transform: scale(1); transition-delay: .3s; }

/* Floating name pills with cursors */
.ab-pill { position: absolute; z-index: 3; }
.ab-pill .pill { border-radius: 0 24px 24px 24px; }
.ab-pill .pill.blue { background: var(--blue); }
/* Cursor sits at the pill's top-left (overrides the hero pill's cursor position) */
.ab-pill .pill .pill-cursor { left: -23px; top: -18px; width: auto; height: auto; }
.ab-pill .pill .pill-cursor img { transform: none; }
.ab-pill-bio { right: -48px; top: 350px; }
.ab-pill-story { right: -40px; top: 560px; }
.ab-pill-work { right: -56px; top: 600px; }
.js .ab-pill .pill { opacity: 0; }
.ab-frame.is-in .ab-pill .pill { animation: pop-in .8s var(--ease-out) .6s both, bob 4.8s ease-in-out 1.5s infinite; }

/* ---------- Bio ---------- */
.ab-lead {
  margin: 0 0 40px;
  font-weight: 500;
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -1.4px;
}
.ab-inline { display: inline-block; height: 40px; margin: 0 4px; vertical-align: -6px; overflow: hidden; }
.ab-inline img { height: 100%; width: auto; }
.ab-inline:not(.ab-inline-shape) img { width: 34px; object-fit: cover; }
.ab-lead.is-in .ab-inline-shape img,
.ab-frame.is-in .ab-inline-shape img { animation: wiggle 3.2s ease-in-out 1.2s infinite; }

.ab-p { margin: 0 0 20px; font-weight: 500; font-size: 16px; line-height: 23px; }

.ab-notes { position: relative; height: 400px; margin-top: 28px; }
.ab-sticky {
  position: absolute;
  margin: 0;
  padding: 16px;
  background: var(--sand);
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  transition: transform .5s var(--ease-back);
}
.ab-sticky-1 { left: 0; top: 0; width: 400px; }
.ab-sticky-2 { left: 170px; top: 215px; width: 350px; transform: rotate(3deg); }
.ab-sticky:hover { transform: rotate(0) scale(1.02); }
.ab-polaroid { position: absolute; right: 24px; top: -6px; margin: 0; }
.ab-polaroid:hover .pol-card { transform: rotate(0) scale(1.06); }

/* ---------- Story ---------- */
.ab-row { display: grid; align-items: center; margin-bottom: 32px; }
.ab-row:last-of-type { margin-bottom: 0; }
.ab-row-left { grid-template-columns: minmax(0, 487px) minmax(0, 1fr); }
.ab-row-right { grid-template-columns: minmax(0, 1fr) minmax(0, 487px); }

.ab-card { padding: 32px; background: var(--bg); transition: transform .5s var(--ease-back); }
.ab-card:hover { transform: rotate(-1deg) scale(1.015); }
.ab-row-right .ab-card:hover { transform: rotate(1deg) scale(1.015); }
.ab-card-title { margin: 0 0 16px; font-weight: 500; font-size: 40px; line-height: 1.2; letter-spacing: -1.4px; }
.ab-card p { margin: 0; font-weight: 500; font-size: 16px; line-height: 23px; }

.ab-note { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 16px; }
.ab-note-right { transform: rotate(-9deg); }
.ab-note-left { transform: rotate(7deg); }
.ab-note .script-32 { font-size: 30px; }
.ab-arrow { flex: none; }
.ab-arrow path { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1s var(--ease-out) .4s; }
.ab-row.is-in .ab-arrow path { stroke-dashoffset: 0; }

/* ---------- Timeline ---------- */
.ab-timeline-title { margin: 0 0 24px; color: var(--muted); font-weight: 500; font-size: 24px; letter-spacing: -0.5px; }
.ab-job {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: 32px 0 56px;
  border-top: 1px solid var(--rule);
}
.ab-job:last-child { padding-bottom: 8px; }
.ab-job-title { margin: 0 0 12px; font-weight: 500; font-size: 40px; line-height: 1.15; letter-spacing: -1.4px; }
.ab-job-body p { margin: 0 0 18px; font-weight: 500; font-size: 16px; line-height: 23px; }

.ab-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.ab-chip.is-current { background: rgba(54, 197, 240, .15); border-color: var(--blue); }
.ab-chip img { width: 18px; height: 18px; }
.ab-chip-dots { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; }
.ab-chip-dots b { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* Small decorative company marks */
.ab-logo { display: flex; align-items: center; gap: 3px; height: 46px; }
.ab-logo i { display: block; }
.ab-logo-stripes i { width: 8px; height: 15px; transform: skewX(-24deg); }
.ab-logo-stripes i:nth-child(1) { background: #ff7a1a; }
.ab-logo-stripes i:nth-child(2) { background: #ff9640; }
.ab-logo-stripes i:nth-child(3) { background: #ffb366; }
.ab-logo-img img { display: block; width: 40px; height: auto; }
.ab-logo-app img { height: 40px; border-radius: 9px; }
.ab-logo-slants { flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; }
.ab-logo-slants i { width: 24px; height: 9px; transform: skewX(-35deg); }
.ab-logo-slants i:nth-child(1) { background: var(--blue); margin-left: 6px; }
.ab-logo-slants i:nth-child(2) { background: #465fff; }
.ab-logo-slants i:nth-child(3) { display: none; }
.ab-logo-dots i { width: 11px; height: 11px; border-radius: 50%; }
.ab-logo-dots i:nth-child(1) { background: var(--green); }
.ab-logo-dots i:nth-child(2) { background: var(--red); }
.ab-logo-dots i:nth-child(3) { background: var(--yellow); }

/* ---------- Side navigation ---------- */
.ab-side {
  position: fixed;
  left: clamp(16px, calc((100vw - 1000px) / 2 - 120px), 100px);
  top: calc(var(--header-h) + 52px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .12), 0 12px 32px -8px rgba(0, 0, 0, .14);
}
.js .ab-side { opacity: 0; transform: translateX(-24px); transition: opacity .6s ease .6s, transform .8s var(--ease-out) .6s; }
.is-loaded .ab-side { opacity: 1; transform: none; }
.ab-side-item {
  --side-cut: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 56px;
  padding: 10px 0 9px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
}
.ab-side-item:hover { background: var(--chip); --side-cut: var(--chip); }
.ab-side-item.is-active { background: var(--ink); color: var(--white); --side-cut: var(--ink); }
.ab-side-item svg { transition: transform .5s var(--ease-back); }
.ab-side-item:hover svg { transform: rotate(-12deg) scale(1.12); }

.cta.ab-cta { margin-top: 180px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .ab-side { display: none; }
}

@media (max-width: 1040px) {
  .ab-title { padding-left: 0; }
  .ab-pill-bio, .ab-pill-story, .ab-pill-work { right: -16px; }
}

@media (max-width: 900px) {
  .ab-frame { padding: 40px 32px; }
  .ab-lead { font-size: 32px; line-height: 38px; letter-spacing: -1px; }
  .ab-inline { height: 32px; vertical-align: -5px; }
  .ab-inline:not(.ab-inline-shape) img { width: 27px; }

  .ab-notes { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; height: auto; }
  .ab-sticky { position: static; width: auto; max-width: 420px; }
  .ab-sticky-2 { align-self: flex-end; }
  .ab-polaroid { position: static; align-self: center; order: 3; }

  .ab-row, .ab-row-left, .ab-row-right { grid-template-columns: 1fr; gap: 20px; }
  .ab-row-right .ab-note { order: 2; }
  .ab-note { justify-content: flex-start; }
  .ab-note-right, .ab-note-left { transform: rotate(-4deg); }
  .ab-row-right .ab-arrow { display: none; }
  .ab-row-left .ab-arrow { transform: rotate(90deg) scale(.7); }

  .ab-pill-bio { top: auto; bottom: 120px; }
  .ab-pill-story { top: auto; bottom: 40px; }
  .ab-pill-work { top: auto; bottom: 40px; }
}

@media (max-width: 600px) {
  .ab-page { padding-top: calc(var(--header-h) + 36px); }
  .ab-title { margin-bottom: 56px; }
  .ab-section + .ab-section { margin-top: 88px; }
  .ab-label { margin-left: 12px; }
  .ab-frame { padding: 32px 20px; }
  .ab-lead { font-size: 26px; line-height: 32px; letter-spacing: -0.6px; }
  .ab-inline { height: 26px; vertical-align: -4px; margin: 0 2px; }
  .ab-inline:not(.ab-inline-shape) img { width: 22px; }
  .ab-p, .ab-sticky, .ab-card p, .ab-job-body p { font-size: 15px; line-height: 22px; }
  .ab-card { padding: 24px 20px; }
  .ab-card-title { font-size: 28px; letter-spacing: -0.8px; }
  .ab-note .script-32 { font-size: 26px; }
  .ab-job { grid-template-columns: 1fr; gap: 6px; padding: 24px 0 40px; }
  .ab-job-title { font-size: 30px; letter-spacing: -0.8px; }
  .ab-pill { zoom: .85; }
  .cta.ab-cta { margin-top: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .ab-side, .js .ab-pill .pill { opacity: 1 !important; transform: none !important; }
  .js .ab-frame .ab-handles i { transform: none !important; }
  .ab-arrow path { stroke-dashoffset: 0 !important; }
}