/* Bop step cards: a three-step "how it works" row on cream. Outlined white cards (radius 24, padding 32/24), the
   middle one dropped lower, each topped by a numbered burst-badge that pulses on hover; the cards lift onto a hard ink
   slab (ink-shadow-lift "step"); a row of green hills rises behind their feet. For heyjay's checker strip under it,
   put a pattern-tape (<div class="ptape">) right after the section. Needs ../burst-badge/part.css + part.js and
   ../ink-shadow-lift/part.css. Defaults: heyjay.studio §8. */
.bsc {
  --bsc-base: #fffcf5;          /* section paper */
  --bsc-ink: #000;
  --bsc-card: #fff;             /* card fill */
  --bsc-radius: 24px;
  --bsc-pad: 32px 24px;
  --bsc-gap: 24px;
  --bsc-stagger: 48px;          /* how much lower the middle card sits (measured 48px at 1440) */
  --bsc-max: 1232px;            /* row width (1440 - 2 x 104 in the source) */
  --bsc-side: 5%;               /* side gutter */
  --bsc-badge: 112px;
  --bsc-hill: #299e00;          /* hill fill */
  --bsc-hill-h: 14.2cqw;        /* hill height: 14.2% of the section width (~204px at 1440, 55px at 390) */
  --bsc-foot: 120px;            /* paper under the cards: how deep they stand in the hills */
  --bsc-title-font: 400 32px/1.15 "Instrument Serif", "Editorial New", Georgia, serif;
  --bsc-text-font: 300 18px/1.5 Inter, system-ui, sans-serif;

  container-type: inline-size;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bsc-base); color: var(--bsc-ink);
}
.bsc__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bsc-gap); align-items: start;
  max-width: var(--bsc-max); margin: 0 auto var(--bsc-foot); padding: 0 var(--bsc-side); box-sizing: content-box;
}
.bsc__card {
  background: var(--bsc-card); border: 1px solid var(--bsc-ink); border-radius: var(--bsc-radius);
  padding: var(--bsc-pad); box-sizing: border-box; min-width: 0;
}
.bsc__card:nth-child(3n+2) { margin-top: var(--bsc-stagger); }
.bsc__card > .bb { --bb-size: var(--bsc-badge); display: grid; margin: 0 auto 24px; }
.bsc__title { font: var(--bsc-title-font); letter-spacing: -.01em; text-align: center; margin: 0 0 12px; }
.bsc__text { font: var(--bsc-text-font); margin: 0; }

/* hills: an SVG row drawn by part.js (data-bsc-hills = count), standing on the section's bottom edge */
.bsc__hills {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: var(--bsc-hill-h); display: block; overflow: visible;
}
.bsc__hills path { fill: var(--bsc-hill); stroke: var(--bsc-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* stack to one column under 992px of section width (source breakpoint); data-bsc-stack="640" moves it lower */
@container (max-width: 991px) {
  .bsc:not([data-bsc-stack]) .bsc__grid { grid-template-columns: minmax(0, 600px); justify-content: center; }
  .bsc:not([data-bsc-stack]) .bsc__card:nth-child(3n+2) { margin-top: 0; }
}
@container (max-width: 639px) {
  .bsc[data-bsc-stack="640"] .bsc__grid { grid-template-columns: minmax(0, 600px); justify-content: center; }
  .bsc[data-bsc-stack="640"] .bsc__card:nth-child(3n+2) { margin-top: 0; }
}
@container (max-width: 560px) {
  .bsc__grid { --bsc-foot: 48px; --bsc-side: 24px; }  /* phone: 24px gutters, cards stop 48px above the bottom edge */
}
/* no container queries: fall back to the window width */
@supports not (container-type: inline-size) {
  @media (max-width: 991px) {
    .bsc .bsc__grid { grid-template-columns: minmax(0, 600px); justify-content: center; }
    .bsc .bsc__card:nth-child(3n+2) { margin-top: 0; }
  }
}