/* ============================================================
   THE PILE. standard.html section#next: the six steps as cards that fall
   onto one another while the stage holds (position:sticky, never a pin).
   Tokens come from css/chrome.css (--gold, --wine, --linen, --obsidian,
   --hair, --hair-d, --r, --gut, --pad). Brand colours only, 5px corners,
   no shadow, no blur, no outlined type.

   Default layout is the STATIC one: a readable column (one wide below
   640px, two-up to 1023px, three-up above) that JS off, GSAP missing
   (html.no-gsap-pile), a narrow viewport and prefers-reduced-motion all
   share. The sticky stage and the hidden arming state exist only inside
   the one media block at the end, and only when html.js-on is set and
   html.no-gsap-pile is not: cards are hidden solely when GSAP will move
   them. ============================================================ */

.pile-outer{position:relative;margin-top:clamp(36px,5vh,60px)}
.pile-inner{position:relative}

/* floating prints: the published project photographs, small, calm, behind
   the cards. Only the sticky stage shows them (see the media block). */
.pile-prints{display:none}

.pile-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.pile-card{position:relative;border-radius:var(--r);padding:clamp(20px,2vw,30px);box-shadow:none}
.pile-gold{background:var(--gold);color:rgba(5,5,5,.78);border:1px solid var(--hair-d)}
.pile-wine{background:var(--wine);color:rgba(245,245,244,.78);border:1px solid var(--hair)}

.pile-card .step-num{font-family:Aboreto,Georgia,serif;font-weight:400;display:block;
  font-size:clamp(33px,3.4vw,50px);letter-spacing:-.02em;line-height:1}
.pile-card h3{font-family:Aboreto,Georgia,serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(16px,1.2vw,18px);letter-spacing:0;line-height:1.15;margin-top:12px}
.pile-card p{margin-top:11px;font-size:14.5px;line-height:1.7;max-width:36ch}
.pile-gold .step-num,.pile-gold h3{color:var(--obsidian)}
.pile-wine .step-num,.pile-wine h3{color:var(--linen)}

/* the payment + timeline meta between the h3 and the p (client, 2026-09-16):
   label rank (the .lbl plate caps), its parts separated by 3px squares, the
   site's dot idiom. Squares are gold on the wine card and obsidian on the gold
   card, so the separator reads on both surfaces; the text sits at 62% of the
   card's own ink. A span, not a p, so .pile-card p's 14.5px never wins. */
.pile-card .pile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  margin-top:8px;max-width:36ch}
.pile-card .pile-meta i{display:block;width:3px;height:3px;flex:none}
.pile-gold .pile-meta{color:rgba(5,5,5,.62)}
.pile-gold .pile-meta i{background:var(--obsidian)}
.pile-wine .pile-meta{color:rgba(245,245,244,.62)}
.pile-wine .pile-meta i{background:var(--gold)}

/* the asterisk line under the pile: the section's last label, after the
   runway, so on the sticky stage it appears once the pile has released */
.pile-note{display:block;margin-top:clamp(22px,3.4vh,34px);max-width:70ch;color:var(--l45)}

@media (max-width:1023px){
  .pile-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pile-steps{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- the stage.
   Desktop, motion allowed, JS on, GSAP present. The runway is 380vh; the
   stage sticks under the nav band and clips; the cards sit at the centre of
   the stage and start invisible, and js/pile.js drops them one by one on a
   scrubbed timeline. Every other state (mobile, reduced motion, no JS,
   no GSAP) never enters this block and keeps the static column above. */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  html.js-on:not(.no-gsap-pile) .pile-outer{height:380vh}
  html.js-on:not(.no-gsap-pile) .pile-inner{
    position:sticky;top:var(--pile-nav,84px);
    height:calc(100svh - var(--pile-nav,84px));
    min-height:min(520px,calc(100svh - 84px));
    overflow:hidden}
  html.js-on:not(.no-gsap-pile) .pile-prints{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
  html.js-on:not(.no-gsap-pile) .pile-prints figure{position:absolute;border-radius:var(--r);overflow:hidden;
    width:clamp(96px,11vw,176px);aspect-ratio:3/4;border:1px solid var(--hair);opacity:.72}
  html.js-on:not(.no-gsap-pile) .pile-prints img{width:100%;height:133%;object-fit:cover;object-position:50% 0%}
  html.js-on:not(.no-gsap-pile) .pp1{left:3%;top:16%}
  html.js-on:not(.no-gsap-pile) .pp2{right:4%;top:20%}
  html.js-on:not(.no-gsap-pile) .pp3{left:9%;bottom:14%}
  html.js-on:not(.no-gsap-pile) .pp4{right:8%;bottom:18%}
  html.js-on:not(.no-gsap-pile) .pile-steps{display:block;position:absolute;inset:0;z-index:2}
  /* hidden only here: GSAP's fromTo owns opacity and transform from now on */
  html.js-on:not(.no-gsap-pile) .pile-card{position:absolute;left:50%;top:50%;
    width:clamp(340px,28vw,420px);opacity:0}
  html.js-on:not(.no-gsap-pile) .pile-card:nth-child(1){z-index:1}
  html.js-on:not(.no-gsap-pile) .pile-card:nth-child(2){z-index:2}
  html.js-on:not(.no-gsap-pile) .pile-card:nth-child(3){z-index:3}
  html.js-on:not(.no-gsap-pile) .pile-card:nth-child(4){z-index:4}
  html.js-on:not(.no-gsap-pile) .pile-card:nth-child(5){z-index:5}
  html.js-on:not(.no-gsap-pile) .pile-card:nth-child(6){z-index:6}
}