/* Section: the four pillars. An eight-point star in four parts. On a wide
   screen the section holds still while the page scrolls: the star turns into
   place and one part arrives per pillar, so it is whole at the end.
   The script sets --p (0 to 1 through the section) and --q1 to --q4 (0 to 1
   per part); without it everything is simply shown complete. */
.pillars {
  background: var(--forest);
  color: var(--on-dark);
  padding-block: var(--section);
}
.pillars__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.pillars__aside {
  position: sticky;
  inset-block-start: calc(var(--header-h) + 2.5rem);
}
.pillars__title { font-size: clamp(2.1rem, 3.4vw + .8rem, 3.75rem); }
.pillars__intro {
  max-inline-size: 26rem;
  margin-block-start: 1.25rem;
  color: var(--on-dark-muted);
}

.star { color: var(--amber); overflow: visible; }
.star__part { fill: var(--amber); }
.star__lines { fill: none; stroke: currentColor; stroke-width: .6; }

.pillars__star {
  inline-size: min(100%, 19rem);
  margin-block-start: clamp(2rem, 4vw, 3.25rem);
  transform: rotate(calc((1 - var(--p, 1)) * -45deg));
}
.pillars__star .star__part {
  fill-opacity: var(--q, 1);
  transform: translate(calc((1 - var(--q, 1)) * var(--dx) * 16px), calc((1 - var(--q, 1)) * var(--dy) * 16px));
}
.pillars__star .star__part:nth-child(1) { --q: var(--q1, 1); --dx: 1; --dy: -1; }
.pillars__star .star__part:nth-child(2) { --q: var(--q2, 1); --dx: 1; --dy: 1; }
.pillars__star .star__part:nth-child(3) { --q: var(--q3, 1); --dx: -1; --dy: 1; }
.pillars__star .star__part:nth-child(4) { --q: var(--q4, 1); --dx: -1; --dy: -1; }
/* Not held still (short or narrow windows): parts arrive as each pillar is reached */
.pillars:not(.is-pinned) .pillars__star .star__part { transition: fill-opacity .5s, transform .5s; }

.pillar {
  display: grid;
  gap: .75rem 1.25rem;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-block-start: 1px solid var(--rule-on-dark);
}
.pillar:last-child { border-block-end: 1px solid var(--rule-on-dark); }
.pillar__name { font-size: clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem); }
.pillar__text {
  max-inline-size: 34rem;
  color: var(--on-dark-muted);
}
.pillar__glyph { display: none; }

/* The held version: wide and tall enough, motion allowed, script running */
@media (min-width: 53.76em) and (min-height: 46em) and (prefers-reduced-motion: no-preference) {
  .js .pillars { padding-block: 0; block-size: 280vh; }
  .js .pillars__inner {
    position: sticky;
    inset-block-start: var(--header-h);
    block-size: calc(100vh - var(--header-h));
    align-items: center;
  }
  .js .pillars__aside { position: static; }
  .js .pillars__star { inline-size: min(100%, 22rem); }
  .js .pillar { padding-block: 1.4rem; transition: opacity .5s; }
  .js .pillar:not(.is-lit) { opacity: .34; }
  .js .pillar__name { font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.125rem); }
}

@media (max-width: 53.75em) {
  .pillars__inner { grid-template-columns: minmax(0, 1fr); }
  .pillars__aside { position: static; }
  .pillars__star { display: none; }
  /* On a phone each pillar carries its own part of the star */
  .pillar { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .pillar__glyph { display: block; inline-size: 3rem; }
  .pillar__text { grid-column: 1 / -1; }
}