/* #how (owner P5) · blueprint 3.8 · CALL-E P05 "Bunting steps" on night.
   Header (eyebrow + H2 + lead) -> bunting of letter tiles spelling the step words (2 rows on desktop/tablet,
   one word per row on phones) -> 4 pegged step cards with small paper mocks:
   4 on one cord >= 1200 px, 2 x 2 on two cords 768-1199 px, one card per cord <= 767 px.
   Semantic variables only (dark mode is a variable swap). Activation sequence: js/how.js (.seq / .lit). */

#how .t-h2 { max-width: 12.5em; text-wrap: balance; }
#how .lead { max-width: 34em; }

/* ---------- bunting (kit .bunt/.brow/.bword/.bl): tile size fits the longest row, "doing -> certified" = 15.1 cells */
#how .hbunt {
  --hc: clamp(30px, calc((min(100vw, 1440px) - 2 * var(--gut) - 98px) / 15.1), 68px);
  margin-top: 56px;
}
#how .brow { --c: var(--hc); justify-content: flex-start; }
#how .bunt + .bunt { margin-top: 26px; }

/* ---------- step cards on the cord */
#how .steps { margin-top: 64px; }
#how .steps-list {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 28px; align-items: start;
}
#how .step-li { position: relative; }
/* one cord per row, drawn by the first card of the row (same line as the kit cord: 10 px above the card top) */
#how .step-li::before {
  position: absolute; z-index: 1; top: -24px; left: -100vw; right: -100vw; height: 28px;
  background: var(--cord-img) repeat-x 0 0 / 12px 28px; pointer-events: none;
}
#how .step-li:first-child::before { content: ""; }
#how .step-li .hg { --d: 0.1s; }
@media (width >= 1200px) {
  #how .step-li:nth-child(2) .hg { --d: 0.23s; }
  #how .step-li:nth-child(3) .hg { --d: 0.36s; }
  #how .step-li:nth-child(4) .hg { --d: 0.49s; }
}
@media (768px <= width <= 1199px) {
  #how .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #how .step-li:nth-child(3)::before { content: ""; }
  #how .step-li:nth-child(even) .hg { --d: 0.23s; }
}

#how .step { display: grid; gap: 14px; padding: 30px 22px 26px; }
#how .step-n { font-size: 15px; line-height: 1.2; }
#how .step .t-h3 { margin-top: 4px; }

/* the small paper mock inside each card (decorative, aria-hidden like the source) */
#how .mock {
  display: grid; align-content: center; gap: 10px; height: 148px; margin: 0; padding: 14px 16px;
  border-radius: 12px; background: var(--paper); list-style: none;
}
#how .step.cream .mock { background: var(--paper-ivory); }
#how .m1 .q { font-size: 16px; font-weight: 500; line-height: 1.3; }
#how .m1 .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
#how .m2 .day { display: flex; align-items: center; gap: 12px; }
#how .itile.xs { width: 30px; height: 30px; border-radius: 9px; }
#how .itile.xs img { width: 18px; height: 18px; }
#how .m3 { gap: 14px; }
#how .m3 li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.3; }
#how .m3 .todo { color: var(--fg2); }
#how .m4 { place-items: center; padding: 0; background: none; }
/* certificate thumbnail print: cream photo frame in both themes (the certificate itself is light paper) */
#how .print {
  --r: 2deg; display: block; max-width: 100%; padding: 6px; border-radius: 9px;
  background: var(--o); box-shadow: var(--sh-tag); transform: rotate(var(--r)); transform-origin: 50% 0;
}
#how .print img { display: block; width: 170px; max-width: 100%; height: auto; border-radius: 5px; }
/* the certificate sheet thumbnail: no extra frame, the image bleeds out by its transparent shadow margin */
#how .print.sheet { width: 196px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
#how .print.sheet img { width: 108.2%; max-width: none; margin: -4.1%; border-radius: 0; }

/* ---------- step activation ("steps light up in order", CALL-E idiom).
   js/how.js adds .seq to the section, then .lit to each card 240 + 210*i ms after the cards have hung in.
   Without JS or with reduced motion .seq is never set, so the final states in the HTML show. */
/* pre-activation states switch in instantly (no transition); the change to .lit animates */
#how.seq .step-li:not(.lit) :is(.wpill, .day, .box, .print),
#how.seq .step-li:not(.lit) .box::after { transition: none; }
#how.seq .step-li:not(.lit) .m1 .wpill.sel { background: var(--wp); color: var(--fg); }
#how.seq .step-li:not(.lit) .m2 .day { opacity: 0; transform: translateX(-10px); }
#how.seq .step-li:not(.lit) .m3 .box.on { background: transparent; border-color: var(--fg); }
#how.seq .step-li:not(.lit) .m3 .box.on::after { opacity: 0; transform: scale(0.5); }
#how.seq .step-li:not(.lit) .print { opacity: 0; }
#how.seq .step-li.lit .m1 .wpill { transition: background-color 0.35s var(--ease), color 0.35s var(--ease); }
#how.seq .step-li.lit .m2 .day { transition: opacity 0.45s var(--ease), transform 0.6s var(--ease); }
#how.seq .step-li.lit .m2 .day:nth-child(2) { transition-delay: 0.12s; }
#how.seq .step-li.lit .m2 .day:nth-child(3) { transition-delay: 0.24s; }
#how.seq .step-li.lit .print { animation: hangIn 1.3s var(--ease) both; }

/* ---------- phones: bunting one word per row (kit), cards one per cord */
@media (width <= 767px) {
  #how .hbunt { --hc: min(38px, calc((100vw - 2 * var(--gut) - 48px) / 9)); margin-top: 40px; }
  #how .bunt + .bunt { margin-top: calc(var(--hc) * 0.55 + 10px); }
  #how .steps { margin-top: 48px; }
  #how .steps-list { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  #how .step-li::before { content: ""; }
  #how .step { padding: 28px 22px 24px; }
}