/* ==========================================================================
   About — positions measured from the original Squarespace page at 1361px wide.
   1 --u = 1px of that layout, so it scales with the window like the original.
   ========================================================================== */

.ab { --u: calc(100vw / 1361); --red: #b53033; overflow: hidden; }
.ab-sec { position: relative; }
.ab-heading { display: contents; }
.ab-clip { position: absolute; inset: 0; overflow: hidden; }
.ab-abs { position: absolute; }
.ab-stroke { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.ab-stroke path { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---------- Section 1: red, "Who is Malik Tijōn?" + bio + portrait ---------- */
.ab-intro { height: calc(1310 * var(--u)); z-index: 2; }
.ab-intro .ab-clip { clip-path: url(#ab-clip-intro); background: var(--red); }

.ab-who {
  left: calc(28 * var(--u)); top: calc(207 * var(--u)); width: calc(208 * var(--u)); margin: 0; text-align: left; letter-spacing: -0.01em;
  font-size: calc(52 * var(--u)); line-height: calc(27.5 * var(--u)); padding-top: calc(24 * var(--u)); color: #fff;
}
.ab-star { left: calc(138 * var(--u)); top: calc(207 * var(--u)); width: calc(99 * var(--u)); height: calc(68 * var(--u)); object-fit: contain; }
.ab-logo { left: calc(193 * var(--u)); top: calc(168 * var(--u)); width: calc(263 * var(--u)); height: calc(186 * var(--u)); object-fit: contain; }
.ab-q { left: calc(483 * var(--u)); top: calc(207 * var(--u)); margin: 0; font-size: calc(65.5 * var(--u)); line-height: calc(107 * var(--u)); color: #fff; }
.ab-dot { left: calc(413 * var(--u)); top: calc(247 * var(--u)); width: calc(99 * var(--u)); height: calc(68 * var(--u)); object-fit: contain; }

.ab-bio { left: calc(28 * var(--u)); top: calc(325 * var(--u)); width: calc(647 * var(--u)); color: #fff; }
.ab-bio p { font-size: calc(22.6 * var(--u)); line-height: 1.5; margin: 0 0 calc(16 * var(--u)); }
.ab-bio em { font-style: italic; }

/* Portrait: still photo, plays the animated version on hover (long-press on phones) */
.ab-portrait { left: calc(741 * var(--u)); top: calc(207 * var(--u)); width: calc(593 * var(--u)); aspect-ratio: 2160 / 2475; overflow: hidden; cursor: pointer; }
.ab-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease-in-out; }
.ab-portrait .gif { opacity: 0; }
.ab-portrait:hover .static, .ab-portrait.is-playing .static { opacity: 0; }
.ab-portrait:hover .gif, .ab-portrait.is-playing .gif { opacity: 1; }

/* ---------- Section 2: photo background, "Check out some of my stuff" ---------- */
.ab-more { height: calc(517 * var(--u)); margin-top: calc(-27 * var(--u)); z-index: 1; }
.ab-more .ab-clip { clip-path: url(#ab-clip-more); background: #000; }
.ab-more__bg { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50.76% 0%; }
.ab-more__shade { inset: 0; background: rgba(0,0,0,.45); }
.ab-more h2 { left: calc(28 * var(--u)); top: calc(145 * var(--u)); width: calc(1306 * var(--u)); text-align: center; margin: 0; font-size: calc(65.5 * var(--u)); line-height: 1; color: #fff; }
.ab-more__btn {
  left: calc(521 * var(--u)); top: calc(303 * var(--u)); width: calc(318 * var(--u)); height: calc(66 * var(--u));
  display: grid; place-items: center; background: #fff; color: #000; text-decoration: none; border-radius: calc(10 * var(--u));
  font-family: var(--body); font-size: max(13px, calc(16 * var(--u))); transition: background .3s, color .3s, transform .4s var(--ease-out);
}
.ab-more__btn:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.ab-more__spark { left: calc(467 * var(--u)); top: calc(342 * var(--u)); width: calc(99 * var(--u)); height: calc(68 * var(--u)); object-fit: contain; pointer-events: none; }

/* The footer tucks under the wave like the original */
body:has(.ab) .site-footer { margin-top: calc(-30 * var(--u)); padding-top: calc(80 * var(--u)); }

/* ---------- Phones: stack into a column ---------- */
@media (max-width: 760px) {
  .ab-intro, .ab-more { height: auto; }
  .ab-more { margin-top: -48px; }
  .ab-more .ab-clip { padding-top: 120px !important; }
  body:has(.ab) .site-footer { margin-top: -40px; padding-top: 70px; }
  .ab-clip { position: relative; }
  .ab-intro .ab-clip { padding: 120px 16px 70px; display: flex; flex-direction: column; gap: 22px; }
  .ab-intro .ab-clip > * { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .ab-heading { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; position: relative; }
  .ab-heading > * { position: relative !important; left: auto !important; top: auto !important; }
  .ab-who { width: 80px; font-size: 32px; line-height: 18px; padding-top: 10px; }
  .ab-star { width: 40px; height: 30px; margin-right: -10px; }
  .ab-logo { width: 170px; height: 110px; }
  .ab-q { font-size: 40px; line-height: 1; }
  .ab-dot { display: none; }
  .ab-bio p { font-size: 17px; margin-bottom: 14px; }
  .ab-portrait { aspect-ratio: 1; width: 100% !important; }
  .ab-portrait img { object-position: top center; }

  .ab-more .ab-clip { padding: 90px 16px 100px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
  .ab-more__bg, .ab-more__shade { position: absolute; }
  .ab-more h2, .ab-more__btn { position: relative; left: auto; top: auto; width: auto; }
  .ab-more h2 { font-size: 40px; }
  .ab-more__btn { width: 100%; max-width: 320px; height: 52px; border-radius: 10px; }
  .ab-more__spark { display: none; }
}

/* "is" sits a little lower and a touch to the right of "Who" */
.ab-who__is { display: inline-block; margin-left: calc(19 * var(--u)); transform: translateY(calc(10 * var(--u))); }
@media (max-width: 760px) { .ab-who__is { margin-left: 12px; transform: translateY(6px); } }
@media (max-width: 760px) { .ab-heading { justify-content: flex-start; } }