/* ============================================================ ABOUT — ONE BIG BACKDROP, PARALLAX ON CURSOR + SCROLL ============================================================ */
.tm-ab-page { position: relative; }
.tm-ab-bg { position: fixed; inset: 0; overflow: hidden; }
.tm-ab-bg img {
  /* -8%/116% (not just -5%/110%) — the extra headroom covers the added scroll-driven
     downward drift on top of the existing cursor-follow range, so scrolling all the
     way down with the cursor also pointing down never runs the image out of cover */
  position: absolute; top: -8%; left: -8%; width: 116%; height: 116%;
  object-fit: cover; object-position: center 22%;
  transform: translate(0, 0) scale(1.04);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.tm-ab-bg canvas {
  position: absolute; top: -8%; left: -8%; width: 116%; height: 116%;
  opacity: 0; transition: opacity 0.7s ease, transform 0.5s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.tm-ab-bg canvas.tm-is-ready { opacity: 1; }
.tm-ab-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,6,0.4) 0%, rgba(5,5,6,0.3) 40%, rgba(5,5,6,0.45) 100%);
}
@media (hover: none) { .tm-ab-bg img { transform: none !important; transition: none; } .tm-ab-bg canvas { display: none; } }

.tm-ab-col { max-width: 1300px; margin: 0 auto; text-align: left; }
.tm-ab-hero { padding: calc(160px + var(--tm-top-offset, 0px)) 7vw 40px; }

.tm-ab-bio { padding: 30px 7vw 10px; }
.tm-ab-bio-inner p { font-weight: 300;
    letter-spacing: .015em;
    font-size: 16px;
    line-height: 1.75; font-weight: 300; opacity: 0.8; color: var(--ink); margin: 0 0 26px; }
.tm-ab-bio-inner p:last-child { margin-bottom: 0; }
.tm-ab-bio-inner strong { color: var(--primary); font-weight: 700; }

/* ============================================================ ABOUT — LINKS ============================================================ */
.tm-ab-cta { padding: 54px 8vw 150px; }
.tm-ab-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.tm-ab-link { font-family: var(--font-mono); font-weight: 500; font-size: clamp(13px, 1.5vw, 15px); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.tm-ab-link-sep { color: rgba(247, 242, 232, 0.35); font-family: var(--font-mono); font-size: 13px; }

@media (max-width: 560px) {
  .tm-ab-hero { padding: calc(118px + var(--tm-top-offset, 0px)) 7vw 30px; }
}
