/* clubs-c06.css — For Clubs C06 (the introductory session), "Staircase"
   (chosen by Alessandro on 8 Oct 2026). No photo, no lead, no button: the
   three steps climb from the heading to the top right, each standing on its
   tread under a large numeral, and the Vermilion stair line draws itself
   tread by riser as the section arrives. Below 1024 px each tread is longer
   than the last, its numeral standing at its far end. Classes stair-;
   behaviour in clubs.js.

   Motion: clubs.js sets html.stair-anim (only when motion is allowed and
   IntersectionObserver exists), .stair-on on each step as it arrives (on
   desktop all three at once, staggered here) and .stair-instant on anything
   already on screen. Transitions live on the arrived state only, so the
   waiting state is taken at once and only the arrival moves. Without the
   script, under reduced motion or before html.stair-anim, the staircase is
   complete. */
.stair {
  /* numeral size: 72 px on phones, at most 112 px (from 1536 px; 12 Oct
     2026, Alessandro approved after the mobile/desktop size checks: it grew
     to 136 px, the only size still growing on 1920-2560 px screens) */
  --stair-n: clamp(4.5rem, 2.2rem + 5vw, 7rem);
  --stair-nbox: calc(var(--stair-n) * 0.8);             /* its line box */
  --stair-rise: clamp(6.25rem, 3rem + 5vw, 9.5rem);     /* riser height */
  --stair-stroke: 3px;
}
.stair__title { margin: 0 0 var(--space-7); max-width: 12ch; }
.stair__steps { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--space-8); }
.stair__step { position: relative; }
.stair__n {
  display: block;
  height: var(--stair-nbox);
  font-size: var(--stair-n);
  line-height: 0.8;
  font-weight: var(--weight-strong);
  font-variation-settings: var(--type-display-axes);
  letter-spacing: var(--tracking-h1);
  color: var(--on-text);
}
.stair__tread {
  display: block;
  height: var(--stair-stroke);
  margin: var(--space-3) 0 var(--space-5);
  background: var(--color-brand-energy);
  transform-origin: left center;
}
.stair__riser { display: none; }
.stair__step h3 { margin: 0 0 var(--space-3); }
.stair__step p { margin: 0; max-width: var(--measure); }
/* phones and tablets: each tread is longer than the last, its numeral
   standing at its far end */
@media (max-width: 1023px) {
  .stair__step:nth-child(1) { --stair-w: 34%; }
  .stair__step:nth-child(2) { --stair-w: 67%; }
  .stair__step:nth-child(3) { --stair-w: 100%; }
  .stair__n, .stair__tread { width: var(--stair-w, 100%); }
  .stair__n { text-align: right; }
}
/* desktop: the staircase on the 12-column grid; the heading stands at its
   foot (it shares the first step's columns, above the first tread) */
@media (min-width: 1024px) {
  .stair__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
  .stair__title { grid-column: 1 / span 4; grid-row: 1; margin: 0; max-width: none; }
  .stair__steps { grid-column: 1 / -1; grid-row: 1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: 0; align-items: start; }
  .stair__step { grid-row: 1; padding-right: var(--space-4); }
  .stair__step:nth-child(1) { grid-column: 1 / span 4; margin-top: calc(2 * var(--stair-rise)); }
  .stair__step:nth-child(2) { grid-column: 5 / span 4; margin-top: var(--stair-rise); }
  .stair__step:nth-child(3) { grid-column: 9 / span 4; padding-right: 0; }
  /* each tread runs into the gutter on both sides to meet the risers */
  .stair__tread { margin-left: calc(var(--grid-gutter) / -2); margin-right: calc(var(--grid-gutter) / -2 - var(--stair-stroke) - var(--space-4)); }
  .stair__step:nth-child(1) .stair__tread { margin-left: 0; }
  .stair__step:nth-child(3) .stair__tread { margin-right: 0; }
  .stair__riser {
    display: block;
    position: absolute;
    left: calc(var(--grid-gutter) / -2);
    top: calc(var(--stair-nbox) + var(--space-3));
    width: var(--stair-stroke);
    height: calc(var(--stair-rise) + var(--stair-stroke));
    background: var(--color-brand-energy);
    transform-origin: center bottom;
  }
}

/* ---- motion ---- */
/* anything already on screen when the script runs is shown at once */
.stair-instant, .stair-instant * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .stair-anim .stair__step:not(.stair-on) .stair__tread { transform: scaleX(0); }
  .stair-anim .stair__step:not(.stair-on) .stair__riser { transform: scaleY(0); }
  .stair-anim .stair__step:not(.stair-on) .stair__n { opacity: 0; }
  .stair-anim .stair__step:not(.stair-on) :is(h3, p) { opacity: 0; transform: translateY(16px); }
  .stair-anim .stair__step.stair-on .stair__tread { transition: transform var(--stair-tdur, 600ms) var(--stair-tease, var(--ease-out)) var(--stair-t, 0ms); }
  .stair-anim .stair__step.stair-on .stair__riser { transition: transform 120ms linear var(--stair-r, 0ms); }
  /* no forwards fill: the layer drops when it ends */
  .stair-anim .stair__step.stair-on .stair__n { animation: stair-climb 560ms var(--ease-out) var(--stair-t, 0ms) backwards; }
  .stair-anim .stair__step.stair-on :is(h3, p) {
    transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
    transition-delay: calc(var(--stair-t, 0ms) + 140ms);
  }
  .stair-anim .stair__step.stair-on p { transition-delay: calc(var(--stair-t, 0ms) + 220ms); }
}
/* desktop: one climb, tread 1 → riser 2 → tread 2 → riser 3 → tread 3 */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .stair { --stair-tdur: 380ms; --stair-tease: linear; }
  .stair__step:nth-child(2) { --stair-r: 380ms; --stair-t: 500ms; }
  .stair__step:nth-child(3) { --stair-r: 880ms; --stair-t: 1000ms; }
}
@keyframes stair-climb {
  0% { opacity: 0; transform: translateY(40%); }
  60% { opacity: 1; transform: translateY(-6%); }
  100% { opacity: 1; transform: none; }
}

/* print (10 Oct 2026): a step's numeral never ends a page apart from its
   title and text */
@media print {
  .stair__step { break-inside: avoid; }
}