/* About — the desk section.
 *
 * This panel used to be a stock photograph of a desert. It is now three generated clips of
 * TJ at the desk, scrubbed by the visitor: scroll walks the camera 180° from behind him
 * around to face-on, then the mouse leans him out from behind the CRT.
 *
 * The clips are 1928x1076 (aspect 1.79182 — close to 16:9 but NOT it, so the number is a
 * token, never a hardcoded 16/9). Nothing is ever cropped and nothing is ever upscaled past
 * the source: the band's width is the smallest of the viewport, the source width, and what
 * the available height allows at that aspect.
 *
 * One switch worth knowing: --pk-ad-bot / the copy offset put the words OVER the bottom of
 * the band with a scrim. Raise --pk-ad-bot to ~230px and the band shrinks off the copy
 * instead — the "cinema" variant, copy in the black surround.
 */

.pk-ad {
  --pk-ad-ar: 1.79182;                 /* 1928 / 1076 */
  --pk-ad-gut: clamp(16px, 2.6vw, 44px);
  --pk-ad-top: 84px;                   /* clears the fixed nav */
  --pk-ad-bot: 56px;
  --pk-ad-avail: calc(100vh - var(--pk-ad-top) - var(--pk-ad-bot));
  --pk-ad-w: min(
    calc(100vw - 2 * var(--pk-ad-gut)),
    1920px,
    calc(var(--pk-ad-avail) * var(--pk-ad-ar))
  );
  --pk-ad-h: calc(var(--pk-ad-w) / var(--pk-ad-ar));
  /* the band is centred in the space between top and bottom padding, so its own bottom
     edge sits this far up from the viewport floor — the copy hangs off that, not off vh */
  --pk-ad-band-bottom: calc(var(--pk-ad-bot) + (var(--pk-ad-avail) - var(--pk-ad-h)) / 2);

  /* the section above ends on #1a1a1a — the page's own black. Matching it means the panel
     arrives with no seam; #101010 left a visible 10-value step across the full width. */
  --pk-ad-ground: #1a1a1a;
  background-color: var(--pk-ad-ground);

  /* The copy used to be exactly as wide as the band, so the first letter of "Operator-run."
     and the last word of the paragraph sat ON the band's left and right edges — the words
     read as stuck to the frame rather than placed inside it. They are now held inboard of
     the band by this much on each side. It scales with the viewport so the inset stays a
     proportion of the picture, not a fixed number that looks generous at 1920 and cramped
     at 1280. */
  --pk-ad-copy-inset: clamp(20px, 3.2vw, 68px);
}

/* styles.css sets .section.photo { height: 300vh } — one class more than .pk-ad, so the
   scroll budget has to be claimed at the same weight or it silently loses */
.section.photo.pk-ad { height: 420vh; }

.pk-ad .sticky-photo { background-color: var(--pk-ad-ground); }

/* the media box: centred inside the padded stage */
.pk-ad .cta-relativ {
  position: absolute;
  inset: var(--pk-ad-top) 0 var(--pk-ad-bot);
  display: grid;
  place-items: center;
}

.pk-ad .hero-overlay { display: none; }

.pk-ad__stage {
  position: relative;
  width: var(--pk-ad-w);
  aspect-ratio: 1928 / 1076;
  overflow: hidden;
  background-color: #0b0b0b;
}

.pk-ad__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the tilt clip's first frame is the orbit's last frame by construction, so the handover is
   a straight swap with nothing to cross-fade */
.pk-ad__vid--tilt { opacity: 0; }
.pk-ad.is-tilt .pk-ad__vid--tilt { opacity: 1; }
.pk-ad.is-tilt .pk-ad__vid--orbit { opacity: 0; }

/* only over the desk and the floor — the face never enters this */
.pk-ad__scrim {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(11, 11, 11, 0) 0%,
    rgba(11, 11, 11, 0.42) 48%,
    rgba(11, 11, 11, 0.86) 100%
  );
}

.pk-ad__hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font--second-font, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.pk-ad.is-tilt .pk-ad__hint { opacity: 1; }
.pk-ad.is-tilt.has-moved .pk-ad__hint { opacity: 0; }

/* copy sits on the band's own bottom edge, inset from its left and right */
.pk-ad .container.absolute {
  max-width: min(1400px, calc(var(--pk-ad-w) - 2 * var(--pk-ad-copy-inset)));
  inset: auto 0 calc(var(--pk-ad-band-bottom) + 30px);
  margin-inline: auto;
}

/* Copy balance (2026-08-13) — the "Talk to TJ" button was removed from this band
   (the nav's "Let's talk" already carries the CTA, and a second one over the film
   split the eye). With it gone the two columns are pure text, so they hang from a
   shared bottom baseline instead of top-aligning at unequal heights, and the right
   paragraph gets a real measure so it stops running to the band's edge. */
.pk-ad .grid-cta {
  align-items: end;
  column-gap: 64px;
}
.pk-ad .max-right { max-width: 520px; justify-self: end; }

@media screen and (max-width: 991px) {
  /* styles.css un-sticks this panel below 991 — the scrub needs it back */
  .pk-ad { --pk-ad-top: 76px; --pk-ad-bot: 44px; }
  .section.photo.pk-ad { height: 360vh; }
  .pk-ad .sticky-photo { position: sticky; top: 0; height: 100vh; }
}

/* Portrait screens — phones, and tablets held upright — get a short band and a tall page:
   at 768x1024 the band is only 406px high and the copy block is 217px of it, so overlaying
   the words would bury the shot. The copy drops below the band instead, which is also where
   the spare vertical room is. Landscape keeps the overlay. */
@media screen and (max-width: 767px), screen and (max-aspect-ratio: 4/5) {
  .pk-ad {
    --pk-ad-top: 96px;
    --pk-ad-gut: 16px;
  }
  .section.photo.pk-ad { height: 300vh; }
  .pk-ad .cta-relativ {
    inset: var(--pk-ad-top) 0 auto;
    display: block;
  }
  .pk-ad__stage { margin-inline: auto; }
  .pk-ad__scrim { display: none; }
  .pk-ad__hint { display: none; }
  .pk-ad .container.absolute {
    max-width: 100%;
    inset: calc(var(--pk-ad-top) + var(--pk-ad-h) + 26px) 0 auto;
    /* the copy sits BELOW the band here, so it lines up with the band's own edge rather
       than being inset from it — .grid-cta's 2% padding was landing the words at 8px, half
       the band's gutter, which read as neither aligned nor spaced. */
    padding-inline: var(--pk-ad-gut);
  }
  .pk-ad .grid-cta { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-ad__hint { display: none; }
}