/* ════════════════════════════════════════════════════════
   packstack.css — THE PACK AS AN OBJECT

   Markup: templates/website/_pack_stack.html
   Images: static/sample/framework-p*.jpg (generated —
           scripts/make_pack_sample.py)

   Its own stylesheet, for the reason regtimeline.css is: a graphic
   defined inside landing.css can only ever appear on the homepage.
   ════════════════════════════════════════════════════════ */

.pstack {
  background: #0d1a2e;
  padding: clamp(64px, 9vw, 104px) 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.pstack-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.pstack-title {
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-wrap: balance;
  margin: 0 0 18px;
}

.pstack-lede {
  font-size: clamp(0.98rem, 1.3vw, 1.075rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  max-width: 52ch;
  text-wrap: pretty;
  margin: 0 0 26px;
}

.pstack-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f59e0b;
  text-decoration: none;
  border-bottom: 1px solid rgba(245,158,11,0.4);
  padding-bottom: 3px;
  transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pstack-link:hover { border-bottom-color: #f59e0b; }

/* ── The stack ───────────────────────────────────────────────── */
/* Offsets, not rotations. A fanned pile is the reflex, and it is the
   wrong one here: the brand has 0px corners and no tilt anywhere else,
   so rotated pages read as a different site's graphic. Rectangles
   stepped on a fixed diagonal give the same depth and stay precise.

   The container is sized by its own aspect ratio and the pages are
   positioned inside it as percentages, so the whole stack scales as one
   object rather than drifting apart at other widths. */
.pstack-figure {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  justify-self: end;
}

/* Sized from the container's HEIGHT, not its width, and stepped by the same
   9% the tops advance: the front page's top is 27% and its height 73%, so the
   stack fills the figure exactly. Sized from the width instead, the pile
   overflows the section at every viewport and lands on the heading below —
   which is what it did first. */
.pstack-page {
  position: absolute;
  height: 73%;
  width: auto;
  /* The page's own proportions, stated before it loads. `width: auto` against
     a percentage height gives an unloaded image NO width — it lays out at 2px,
     and a lazy image measured at 2px is never fetched at all. Three of these
     four silently failed in production. The `width`/`height` attributes in the
     markup say the same thing; both are kept, because the attributes also stop
     the layout shifting and this line is what makes `height: 73%` resolve. */
  aspect-ratio: 620 / 877;
  display: block;
  border: 1px solid rgba(255,255,255,0.14);
  /* A hard offset shadow, no blur. Blur is the soft-SaaS tell and it is
     the one thing that would make a sharp-cornered brand look rounded. */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 14px 14px 0 rgba(3,8,17,0.55);
}

.pstack-page--4 { left: 38%; top: 0;   z-index: 1; }
.pstack-page--3 { left: 26%; top: 9%;  z-index: 2; }
.pstack-page--2 { left: 13%; top: 18%; z-index: 3; }
.pstack-page--1 { left: 0;   top: 27%; z-index: 4; }

@media (max-width: 900px) {
  .pstack-inner { grid-template-columns: minmax(0, 1fr); }
  .pstack-figure { justify-self: start; max-width: 420px; }
}