/* Chapter 7: three featured apps on the slab. */
.apps { position: relative; z-index: 1; padding: 0; background: var(--ground); }
.apps-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: 18px clamp(24px, 5vw, 80px);
  padding: calc(var(--bar-h) + 40px) var(--margin) clamp(32px, 6vh, 64px);
}
.apps-head h2 { grid-row: span 2; }
.apps-head p { font-size: var(--body-big); }
.apps-head .nv-btn { justify-self: start; }
.feature { position: relative; display: flex; align-items: flex-end; min-height: 100svh; padding: var(--margin); color: var(--ink); text-decoration: none; overflow: hidden; }
.feature-still img { object-position: center; }
.feature-copy { position: relative; display: grid; gap: 10px; width: min(36vw, 520px); }
.feature h3 { font-size: var(--type-big); line-height: 1.06; letter-spacing: -0.03em; }
.feature-copy span { font-size: var(--body-big); }
/* The slab stands on the left in the second still. */
@media (min-width: 761px) and (min-aspect-ratio: 1/1) {
  .feature[data-feature="1"] { justify-content: flex-end; }
}
/* The tall stills stand the slab high, and the crop keeps it there, clear of the copy. */
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .feature-still img { object-position: 50% 12%; }
}

@media (max-width: 760px) {
  .apps-head { grid-template-columns: minmax(0, 1fr); padding-top: 72px; }
  /* Three stills, swiped sideways. */
  .features { display: flex; gap: 10px; padding-inline: var(--margin); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .features::-webkit-scrollbar { display: none; }
  .feature { flex: 0 0 84vw; min-height: 74svh; padding: 18px; border-radius: 14px; scroll-snap-align: center; background: var(--ground-2); }
  .feature-copy { width: 100%; }
  .feature-still img { object-position: 50% 0; }
  /* In a sideways scroller the page's drift never moves, it only zooms the slab into the copy. */
  .tier-still .features .feature-still img { animation: none; }
}
@media (max-width: 760px) and (max-aspect-ratio: 1/1) {
  .feature { min-height: max(74svh, 600px); }
}

/* Computers: the words stand beside the slab, and each app's link is live only during its hold. */
.tier-full .apps { height: 295vh; }
.tier-full .apps-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ground); }
.tier-full .apps-head {
  position: absolute;
  left: var(--margin);
  bottom: var(--margin);
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: 44vw;
  padding: 0;
  pointer-events: none;
}
.tier-full .apps-head.held { pointer-events: auto; }
.tier-full .apps-head h2 { grid-row: auto; }
.tier-full .apps-head p { max-width: 30em; }
.tier-full .features { position: absolute; inset: 0; z-index: 1; display: block; padding: 0; overflow: visible; }
.tier-full .feature {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  min-height: 0;
  padding: var(--margin);
  border-radius: 0;
  background: none;
  overflow: visible;
  pointer-events: none;
}
.tier-full .feature-still { opacity: 0; }
.tier-full .feature-copy { width: 44vw; opacity: 0; }
.tier-full .feature.held .feature-copy, .tier-full .feature.held::after { pointer-events: auto; }
.tier-full .feature::after {
  content: '';
  position: absolute;
  left: var(--slab-l);
  bottom: var(--slab-b);
  width: calc(var(--slab-h) / 2.1);
  height: var(--slab-h);
}
.tier-full .feature:hover h3, .tier-full .feature:focus-visible h3 { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.12em; }
.tier-full .apps.scene-on .feature-still { display: none; }

@media (max-aspect-ratio: 1/1) {
  .tier-full .apps-head { left: var(--margin); right: var(--margin); width: auto; }
  .tier-full .feature-copy { width: 100%; }
}