/* ==========================================================================
   Collsta website — Section 3: Board customize / Make it yours

   Same scroll contract as the hero and Save anything: site.js writes ONE
   custom property, `--p` (0 → 1), onto `.bc`; every transform derives from it
   in CSS. Ordinary document scroll, sticky frame, no hijacking.

   One board is rebuilt in front of the reader, beat by beat:

     p 0.00 → 0.08   DEFAULT    plain board, grey cover, neutral accent
     p 0.08 → 0.22   COVER      the cover photo reveals behind the header
     p 0.22 → 0.34   ACCENT     the accent colour washes through the board
     p 0.34 → 0.44   EMOJI      🌴 lands in the title
     p 0.44 → 0.54   STICKER    the sticker drops onto the cover
     p 0.54 → 0.88   LAYOUT     the SAME six cards re-arrange:
                                grid → moodboard → list → moodboard
     p 0.88 → 1.00   FEATURED   one save is promoted; the board settles

   The layout beat blends four position sets additively — each stage finishes
   before the next begins, so the sums never overlap and the cards genuinely
   travel between layouts instead of cross-fading.

   Card visuals (.badge, .badge__mark--*, .fill--*) are REUSED from hero.css,
   like Save anything does. This file must load after it.
   ========================================================================== */

.bc{
  --p:0;
  --bc-runway:200vh;

  /* ---- beats ---- */
  --cover:clamp(0,calc((var(--p) - .08) / .14),1);
  --accent:clamp(0,calc((var(--p) - .22) / .12),1);
  --emoji:clamp(0,calc((var(--p) - .34) / .10),1);
  --sticker:clamp(0,calc((var(--p) - .44) / .10),1);

  /* layout hops — strictly sequential, never overlapping */
  --l1:clamp(0,calc((var(--p) - .54) / .12),1);   /* grid      → moodboard */
  --l2:clamp(0,calc((var(--p) - .68) / .10),1);   /* moodboard → list      */
  --l3:clamp(0,calc((var(--p) - .80) / .08),1);   /* list      → moodboard */

  --feat:clamp(0,calc((var(--p) - .88) / .12),1);

  position:relative;
  height:calc(100vh + var(--bc-runway));
  height:calc(100svh + var(--bc-runway));

  /* Transparent on purpose — `.cine__floor` paints this section's surface
     colour from a layer beneath the shared glow. An opaque background here
     would cut the atmosphere off at the section boundary. */
  background:transparent;

  /* Pulls the section up into the tail of Save anything, where the collected
     group has already settled. Runways are measured from offsetHeight, which
     margins do not affect, so neither section's scroll timing moves. */
  margin-top:calc(-1 * var(--cine-overlap,10.5vh));
}

.bc__pin{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-top:var(--nav-h);
  isolation:isolate;
}
@supports (overflow:clip){
  .bc__pin{overflow:clip}
}

.bc__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bc__blob{filter:blur(30px)}
/* Sideways bleed is fine — that edge sits at the viewport boundary. Vertical
   bleed is not: this pin clips its own overflow, so a blob hanging past the
   top or bottom gets sliced along an edge that travels through the viewport
   as the section scrolls in and out. Both are kept fully inside. */
.bc__blob--a{width:min(40vw,520px);aspect-ratio:1;top:5%;left:-10%;opacity:.34}
.bc__blob--b{width:min(34vw,440px);aspect-ratio:1;bottom:4%;right:-8%;opacity:.36}

/* ==========================================================================
   Copy
   ========================================================================== */
.bc__copy{
  position:relative;
  z-index:3;
  text-align:center;
  padding-top:clamp(14px,3vh,40px);
}
.bc__eyebrow-row{
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
  margin-bottom:clamp(12px,1.6vw,18px);
}
/* The one status flag for this section — the customize system is still being
   built, and it is said once rather than stamped on every control. */
.bc__status{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--lavender-pale);
  color:var(--navy);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.bc__status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--purple-bright);
}

.bc__title{
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
  text-wrap:balance;
}
.bc__title-accent{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bc__sub{
  margin:clamp(10px,1.4vw,16px) auto 0;
  max-width:44rem;
  font-size:var(--fs-body-lg);
  line-height:var(--lh-body);
  color:var(--text-body);
  text-wrap:pretty;
}
.bc__sub b{font-weight:var(--fw-semibold);color:var(--navy)}

/* ==========================================================================
   Stage — option rails flanking the board
   ========================================================================== */
.bc__stage{
  position:relative;
  z-index:2;
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:clamp(120px,12vw,158px) minmax(0,1fr) clamp(120px,12vw,158px);
  align-items:center;
  /* `align-content:start` is what makes the beat above measurable. The row is
     auto-height and this pin is a fixed 100svh frame, so by default the row
     stretched to fill it and the group floated in the middle — the distance
     under the copy was whatever slack happened to be left over, which drifted
     with viewport height and only moved half a pixel per pixel of padding.
     Packed to the top, the padding below is the gap, exactly, at every height.
     `align-items:center` is untouched, so the rails still centre on the board
     and the scene's own composition is unchanged. */
  align-content:start;
  gap:clamp(14px,2.2vw,34px);
  padding-block:var(--section-copy-gap) clamp(40px,7vh,72px);
}

.bc-rail{display:flex;flex-direction:column;gap:clamp(12px,2vh,22px)}
.bc-rail--right{align-items:flex-end}

.bc-opt__label{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-meta);
}
.bc-rail--right .bc-opt__label{text-align:right}

/* ---- Cover presets ---- */
.bc-covers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bc-cover-chip{
  aspect-ratio:1;
  border-radius:9px;
  overflow:hidden;
  border:1.5px solid var(--border);
  background:var(--bg-soft);
  position:relative;
}
.bc-cover-chip img{width:100%;height:100%;object-fit:cover;display:block}
/* The chip that the scene actually applies, ringed as the cover beat lands. */
.bc-cover-chip--on::after{
  content:"";position:absolute;inset:-1.5px;border-radius:9px;
  border:2px solid var(--purple-bright);
  box-shadow:var(--glow-purple);
  opacity:var(--cover);
}

/* ---- Accent swatches ---- */
.bc-accents{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.bc-accent-chip{
  aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(13,15,60,.08);
  position:relative;
}
.bc-accent-chip--on::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--purple-bright);
  opacity:var(--accent);
}

/* ---- Emoji + sticker picks ---- */
.bc-picks{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bc-pick{
  width:clamp(30px,3.2vw,38px);aspect-ratio:1;
  border-radius:11px;
  display:grid;place-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  font-size:clamp(15px,1.7vw,19px);
  line-height:1;
  position:relative;
}
.bc-pick img{width:78%;height:78%;object-fit:contain;display:block}
.bc-pick--on::after{
  content:"";position:absolute;inset:-3px;border-radius:13px;
  border:2px solid var(--purple-bright);
}
.bc-pick--emoji-on::after{opacity:var(--emoji)}
.bc-pick--sticker-on::after{opacity:var(--sticker)}

/* ---- Layout picker ---- */
.bc-layouts{display:flex;gap:7px;justify-content:flex-end}
.bc-layout-chip{
  width:clamp(34px,3.6vw,42px);aspect-ratio:1;
  border-radius:10px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  display:grid;place-items:center;
  position:relative;
}
.bc-layout-chip svg{width:60%;height:60%}
.bc-layout-chip::after{
  content:"";position:absolute;inset:-3px;border-radius:12px;
  border:2px solid var(--purple-bright);
  opacity:0;
}
/* Each chip is lit only while its own layout is the one on screen. */
.bc-layout-chip--grid::after{opacity:calc(1 - var(--l1))}
.bc-layout-chip--mood::after{opacity:calc(var(--l1) - var(--l2) + var(--l3))}
.bc-layout-chip--list::after{opacity:calc(var(--l2) - var(--l3))}

/* ==========================================================================
   The board
   ========================================================================== */
.bc-board-col{display:flex;justify-content:center;min-width:0}

.bc-board{
  --accent-neutral:#9AA3B8;
  --accent-pick:var(--purple-bright);
  --bc-accent:var(--accent-neutral);

  position:relative;
  width:100%;
  max-width:clamp(420px,52vw,600px);
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform:scale(calc(.985 + var(--feat) * .015));
}
/* The accent is one interpolated colour rather than a stack of cross-faded
   copies, so a single property drives every accented part of the board. */
/* A deeper cut of the same accent, used wherever the accent carries white
   text: the accent at full strength measures 4.5:1 against white, which small
   bold labels do not clear. Same hue family, legible. */
.bc-board{--bc-accent-ink:#5A4FA8}
@supports (color:color-mix(in oklab,red,blue)){
  .bc-board{
    --bc-accent:color-mix(in oklab,
      var(--accent-pick) calc(var(--accent) * 100%),
      var(--accent-neutral));
    --bc-accent-ink:color-mix(in oklab,var(--bc-accent) 72%,var(--navy));
  }
}

/* ---- Cover ---- */
.bc-board__cover{
  position:relative;
  height:clamp(78px,11vh,108px);
  background:linear-gradient(160deg,#E9E7F2,#D9D7E6);
  overflow:hidden;
}
.bc-board__cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:var(--cover);
  transform:scale(calc(1.06 - var(--cover) * .06));
}

/* ---- Sticker ---- */
.bc-sticker{
  position:absolute;
  right:clamp(14px,3vw,30px);
  top:clamp(30px,5vh,54px);
  z-index:4;
  width:clamp(52px,6.4vw,74px);
  transform:
    translate3d(0,calc((1 - var(--sticker)) * -22px),0)
    rotate(calc(-12deg + var(--sticker) * 6deg))
    scale(calc(.7 + var(--sticker) * .3));
  opacity:var(--sticker);
  filter:drop-shadow(0 10px 18px rgba(13,15,60,.24));
  pointer-events:none;
}
.bc-sticker img{width:100%;height:auto;display:block}

/* ---- Header ---- */
.bc-board__head{
  position:relative;
  display:flex;align-items:flex-start;gap:12px;
  padding:12px clamp(14px,1.6vw,20px) 10px;
  border-bottom:1px solid var(--border);
}
.bc-board__emoji{
  position:relative;
  flex:none;
  width:clamp(42px,4.6vw,56px);aspect-ratio:1;
  margin-top:-26px;
  border-radius:16px;
  border:3px solid #fff;
  box-shadow:var(--shadow-md);
  background:linear-gradient(150deg,#FFE7E9,#FF9AA3 46%,#B8ABF2);
  display:grid;place-items:center;
  font-size:clamp(19px,2.2vw,25px);
  line-height:1;
}
.bc-board__emoji span{
  opacity:var(--emoji);
  transform:scale(calc(.4 + var(--emoji) * .6));
}
.bc-board__meta{flex:1;min-width:0}
.bc-board__title{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:clamp(15px,1.6vw,19px);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
}
.bc-board__title-emoji{
  opacity:var(--emoji);
  transform:scale(calc(.3 + var(--emoji) * .7));
  display:inline-block;
}
.bc-board__desc{
  margin-top:3px;
  font-size:11.5px;line-height:1.35;color:var(--text-meta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Members sit here already so the Together section can grow straight out of
   this board — no collaboration behaviour is implemented yet. */
.bc-board__people{display:flex;align-items:center;gap:7px;margin-top:7px}
.bc-board__avatars{display:flex}
.bc-board__avatar{
  width:19px;height:19px;border-radius:50%;
  border:2px solid #fff;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:8px;color:#fff;
}
.bc-board__avatar + .bc-board__avatar{margin-left:-6px}
.bc-board__avatar--a{background:linear-gradient(160deg,#FFB3B9,#FF7A85)}
.bc-board__avatar--b{background:linear-gradient(160deg,#C9BEF7,#735CFF)}
.bc-board__avatar--c{background:linear-gradient(160deg,#B8ABF2,#0D0F3C)}
.bc-board__avatar--add{
  background:var(--bg-soft);color:var(--text-meta);
  border-style:dashed;border-color:var(--border);
  font-size:11px;
}
.bc-board__people-text{font-size:10.5px;color:var(--text-meta)}
.bc-board__count{
  flex:none;align-self:flex-start;
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--bc-accent-ink);
  color:#fff;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10px;white-space:nowrap;
}

/* ==========================================================================
   Card canvas — one set of cards, four arrangements
   ========================================================================== */
.bc-canvas{
  position:relative;
  height:clamp(268px,34vh,340px);
  padding:0;
}

.bc-card{
  position:absolute;
  left:50%;top:50%;
  width:152px;
  /* Tile height and the caption's offset are one value — the caption is
     absolutely positioned, so if they drift apart the grid rows silently run
     past the bottom of the board. */
  --tile-h:106px;
  /* Additive blend across the four layout states. Each hop is finished before
     the next starts, so the terms never fight. */
  --x:calc(var(--gx) + (var(--mx) - var(--gx)) * var(--l1)
                     + (var(--lx) - var(--mx)) * var(--l2)
                     + (var(--mx) - var(--lx)) * var(--l3));
  --y:calc(var(--gy) + (var(--my) - var(--gy)) * var(--l1)
                     + (var(--ly) - var(--my)) * var(--l2)
                     + (var(--my) - var(--ly)) * var(--l3));
  --s:calc(1 + (var(--ms) - 1) * var(--l1)
             + (var(--ls) - var(--ms)) * var(--l2)
             + (var(--ms) - var(--ls)) * var(--l3));
  --r:calc(0deg + var(--mr) * var(--l1)
                - var(--mr) * var(--l2)
                + var(--mr) * var(--l3));
  transform:translate3d(calc(-50% + var(--x)),calc(-50% + var(--y)),0) rotate(var(--r)) scale(var(--s));
  will-change:transform;
}

.bc-card__tile{
  position:relative;
  height:var(--tile-h);
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
/* Meta rides under the tile in grid, disappears in moodboard, and swings out
   to the right in list. */
.bc-card__meta{
  position:absolute;
  left:0;top:var(--tile-h);
  width:152px;
  padding-top:7px;
  text-align:left;
  --mtx:calc(0px + (var(--lmx) - 0px) * var(--l2) + (0px - var(--lmx)) * var(--l3));
  --mty:calc(0px + (var(--lmy) - 0px) * var(--l2) + (0px - var(--lmy)) * var(--l3));
  transform:translate3d(var(--mtx),var(--mty),0) scale(calc(1 + var(--l2) * 1.5 - var(--l3) * 1.5));
  transform-origin:0 50%;
  opacity:calc(1 - var(--l1) + var(--l2) - var(--l3));
}
.bc-card__title{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:11.5px;line-height:1.25;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bc-card__sub{
  margin-top:2px;
  font-size:10px;color:var(--text-meta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Tile fills. `.fill--vid` / `.fill--stay` come from hero.css; these are the
   three this section adds, in the same gradient language. */
.bc-fill--place{background:#F1EFF9}
.bc-fill--reel{background:linear-gradient(155deg,#FFE7E9,#FF9AA3 62%,#E16D7B)}
.bc-fill--shop{background:linear-gradient(150deg,#E4ECFF,#B8ABF2 58%,#8E7CE8)}
.bc-fill--read{background:linear-gradient(160deg,#F5F3FA,#C9BEF7)}
.bc-tile-glyph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:26px;line-height:1;opacity:.9;
}

/* Featured promotion at the end of the story. */
.bc-card--feature .bc-card__tile{
  box-shadow:calc(var(--feat) * 0px) calc(var(--feat) * 14px) calc(var(--feat) * 34px) rgba(13,15,60,.2),var(--shadow-sm);
  border-color:color-mix(in oklab,var(--bc-accent) calc(var(--feat) * 100%),var(--border));
}
.bc-feature-flag{
  position:absolute;top:7px;left:7px;
  z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:var(--radius-pill);
  background:var(--bc-accent-ink);
  color:#fff;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:8.5px;letter-spacing:.06em;
  opacity:var(--feat);
  transform:translate3d(0,calc((1 - var(--feat)) * -6px),0);
}

/* ---- Layout coordinate sets -------------------------------------------
   grid  : 3 × 2, uniform
   mood  : staggered, varied scale, slight rotation, meta hidden
   list  : one column at 0.4 scale, meta swung out to the right
   ---------------------------------------------------------------------- */
/* List-mode caption offset, in the card's LOCAL units — the card itself is at
   0.4 scale there, so an on-screen gap of g needs g / 0.4 here. The caption's
   own 2.5 counter-scale is what brings the text back to normal size. */
.bc-card{--lmx:187px;--lmy:-72px}

/* Grid rows are asymmetric on purpose: the card box is only as tall as its
   tile (the caption is absolute), so centring on the tile alone would hang
   the bottom row's captions past the board. These offsets centre the block
   INCLUDING both captions.
   Moodboard y values also account for each card's own scale, so no tile
   reaches up into the board header. */
.bc-card--1{--gx:-166px;--gy:-97px; --mx:-172px;--my:-84px;--ms:1.02;--mr:-2deg; --lx:-86px;--ly:-125px;--ls:.4}
.bc-card--2{--gx:0px;   --gy:-97px; --mx:-6px;  --my:-98px;--ms:.8; --mr:1.5deg; --lx:-86px;--ly:-75px; --ls:.4}
.bc-card--3{--gx:166px; --gy:-97px; --mx:158px; --my:-78px;--ms:.94;--mr:-1deg;  --lx:-86px;--ly:-25px; --ls:.4}
.bc-card--4{--gx:-166px;--gy:53px;  --mx:-160px;--my:74px; --ms:.88;--mr:2deg;   --lx:-86px;--ly:25px;  --ls:.4}
.bc-card--5{--gx:0px;   --gy:53px;  --mx:4px;   --my:58px; --ms:1.1;--mr:-1.5deg;--lx:-86px;--ly:75px;  --ls:.4}
.bc-card--6{--gx:166px; --gy:53px;  --mx:166px; --my:92px; --ms:.78;--mr:1deg;   --lx:-86px;--ly:125px; --ls:.4}

/* ==========================================================================
   Board character row — same system, five different vibes
   ========================================================================== */
.bc-chars{
  position:relative;
  /* Pulled up into the pin's exit travel and given a shorter top pad: this is
     the payoff of the customize scene, not a new section starting far below
     it. The overlap stops short of the finished board so it is never covered
     while still on screen. */
  /* The room this can borrow is the slack under the board inside the pin. That
     slack is not a fixed number and it is not proportional to the viewport
     either: the pin grows with the frame while the board is a fixed height, so
     it is (roughly) 0.65 x viewport minus the fixed stack above it — measured
     94px at 900 tall and 211px at 1080. The old tiered pull could not track
     that, so the finished board and this heading drifted apart on exactly the
     tall screens where the section already had the most air: the heading sat
     97px under the board at 900 and 153px at 1080.

     Following the slack instead keeps that distance constant. The -511 leaves
     a ~20px ledge so this section's own surface never rides up over the
     finished board, and the clamp stops the calc going negative on short
     frames or unbounded on very tall ones. */
  --bc-chars-pull:clamp(24px,calc(65vh - 511px),320px);
  margin-top:calc(-1 * var(--bc-chars-pull,3vh));
  /* Was clamp(40px,5vw,72px): 72px of inset directly under a gap this section
     exists to close. */
  padding-block:clamp(24px,2.2vw,32px) clamp(40px,5.4vw,76px);
  background:var(--surface-soft);
}
.bc-chars__head{text-align:center;margin-bottom:clamp(22px,3vw,36px)}
.bc-chars__title{
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:var(--fs-h3);letter-spacing:var(--ls-tight);color:var(--navy);
}
.bc-chars__sub{
  margin-top:8px;font-size:var(--fs-small);color:var(--text-meta);
}
.bc-chars__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
}

.bc-char{
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out);
}
.bc-char:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.bc-char__cover{height:clamp(78px,9vw,104px);position:relative;overflow:hidden}
.bc-char__cover img{width:100%;height:100%;object-fit:cover;display:block}
.bc-char__body{padding:0 14px 14px;position:relative}
.bc-char__emoji{
  width:38px;aspect-ratio:1;margin-top:-19px;
  border-radius:12px;border:3px solid #fff;
  box-shadow:var(--shadow-sm);
  display:grid;place-items:center;font-size:17px;line-height:1;
}
.bc-char__title{
  margin-top:8px;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:14.5px;letter-spacing:var(--ls-tight);color:var(--navy);
}
.bc-char__desc{margin-top:3px;font-size:11.5px;color:var(--text-meta)}
.bc-char__sources{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}
.bc-char__src{
  padding:3px 8px;border-radius:var(--radius-pill);
  background:var(--bg-soft);border:1px solid var(--border);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:9px;color:var(--text-meta);white-space:nowrap;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Taller frames leave more unused space under the pinned board, so they can
   afford to pull the character row further up into it. */

@media (max-width:1100px){
  .bc__stage{grid-template-columns:clamp(104px,11vw,132px) minmax(0,1fr) clamp(104px,11vw,132px)}
  .bc-covers{grid-template-columns:repeat(4,1fr);gap:5px}
  .bc-chars__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Mobile: the rails become one strip that names the beat ---------------
   Five option groups flanking a board does not survive 375px, and stacking
   them would bury the board. Instead the board takes the full width and a
   single strip underneath shows only the control the story is touching right
   now — the same beats, told one at a time.
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .bc{--bc-runway:168vh;--cine-overlap:8vh}
  .bc__pin{min-height:0}
  /* The shared copy → visual beat costs ~23px more here than the old local
     value did, and this pin is a fixed 100svh frame that clips. That is taken
     back out of the copy's own top inset and the stage's bottom inset so the
     section's total height is unchanged and the option rail is no worse off
     than it already was. */
  .bc__copy{padding-top:clamp(4px,0.9vh,14px)}
  .bc__title{font-size:clamp(26px,7vw,38px)}
  .bc__sub{font-size:15.5px;max-width:32rem}

  .bc__stage{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(6px,1.15vh,12px);
    padding-block:var(--section-copy-gap) clamp(2px,0.5vh,8px);
  }
  .bc-board{max-width:100%}
  .bc-canvas{height:clamp(232px,30vh,286px)}
  .bc-card{width:clamp(104px,29vw,126px);--tile-h:78px}
  .bc-card__meta{width:clamp(104px,29vw,126px)}

  /* Tighter coordinate sets for the narrower canvas. Grid columns are pulled
     in so the outer tiles clear the board's own padding, and the rows are
     offset the same asymmetric way as on desktop. */
  .bc-card{--lmx:139px;--lmy:-57px}
  .bc-card--1{--gx:-106px;--gy:-76px;--mx:-104px;--my:-66px;--lx:-61px;--ly:-96px}
  .bc-card--2{--gx:0px;   --gy:-76px;--mx:-4px;  --my:-82px;--lx:-61px;--ly:-58px}
  .bc-card--3{--gx:106px; --gy:-76px;--mx:104px; --my:-58px;--lx:-61px;--ly:-20px}
  .bc-card--4{--gx:-106px;--gy:38px; --mx:-104px;--my:52px; --lx:-61px;--ly:18px}
  .bc-card--5{--gx:0px;   --gy:38px; --mx:2px;   --my:40px; --lx:-61px;--ly:56px}
  .bc-card--6{--gx:106px; --gy:38px; --mx:106px; --my:66px; --lx:-61px;--ly:94px}

  /* One strip, and only the group whose beat is running is shown. */
  .bc-rail{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:0;
    position:relative;
    min-height:64px;
  }
  .bc-rail--right{align-items:center}
  .bc-opt{
    position:absolute;
    left:50%;top:50%;
    transform:translate3d(-50%,-50%,0);
    display:flex;flex-direction:column;align-items:center;gap:7px;
  }
  .bc-opt__label,.bc-rail--right .bc-opt__label{text-align:center;margin-bottom:0}
  .bc-covers{grid-template-columns:repeat(8,1fr);gap:5px;width:min(300px,86vw)}
  .bc-accents{grid-template-columns:repeat(8,1fr);gap:6px;width:min(258px,76vw)}
  .bc-picks{flex-wrap:nowrap;justify-content:center}
  .bc-pick{width:34px}

  /* Each group is on screen only for its own beat. Cover starts visible so
     the strip is never empty while the board is still in its default state. */
  .bc-opt--cover  {opacity:calc(1 - var(--accent))}
  .bc-opt--accent {opacity:calc(var(--accent) - var(--emoji))}
  .bc-opt--emoji  {opacity:calc(var(--emoji) - var(--sticker))}
  .bc-opt--sticker{opacity:calc(var(--sticker) - var(--l1))}
  .bc-opt--layout {opacity:var(--l1)}

  .bc-chars__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bc-char__cover{height:82px}
}

@media (max-width:480px){
  .bc-chars__grid{grid-template-columns:minmax(0,1fr);max-width:340px;margin-inline:auto}
}

/* Short desktop frames: the board has to lose height before the canvas does. */
@media (max-height:820px) and (min-width:821px){
  .bc__pin{min-height:0}
  .bc-canvas{height:clamp(244px,30vh,286px)}
  .bc-card__tile{height:100px}
  .bc-card__meta{top:100px}
}

/* ==========================================================================
   Reduced motion
   The runway collapses, the pin releases, and the board renders FINISHED —
   cover, accent, emoji, sticker, featured item, moodboard layout. The default
   state is shown beside it as a small static "before", so the difference the
   section is about is still legible without any movement.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .bc{
    --bc-runway:0px;
    height:auto;
    --cover:1;--accent:1;--emoji:1;--sticker:1;
    --l1:1;--l2:0;--l3:0;--feat:1;
    /* No animated tail to reclaim here — pulling up would just collide the
       two sections. */
    --cine-overlap:0px;
  }
  .bc-chars{--bc-chars-pull:0px}
  .bc__pin{
    position:relative;
    height:auto;
    min-height:0;
    padding-block:calc(var(--nav-h) + 32px) 64px;
  }
  .bc__stage{
    grid-template-columns:minmax(0,1fr);
    padding-block:clamp(24px,4vh,44px);
  }
  .bc-canvas{height:320px}
  .bc-rail{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:22px}
  .bc-rail--right{align-items:flex-start}
  .bc-opt{position:static;transform:none;opacity:1}
  .bc-opt__label,.bc-rail--right .bc-opt__label{text-align:left}
  .bc-covers,.bc-accents{width:auto}
  .bc-card,.bc-card__meta,.bc-sticker,.bc-board{transition:none}
  .bc-before{display:block}
}

/* The static "before" board, only ever shown under reduced motion. */
.bc-before{display:none;margin-top:clamp(28px,4vw,44px);text-align:center}
.bc-before__label{
  display:block;margin-bottom:12px;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-meta);
}
.bc-before__card{
  display:inline-block;width:min(300px,80vw);
  border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);overflow:hidden;text-align:left;
}
.bc-before__cover{height:58px;background:linear-gradient(160deg,#E9E7F2,#D9D7E6)}
.bc-before__body{padding:12px 14px}
.bc-before__title{
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:14px;color:var(--navy);
}
.bc-before__desc{margin-top:3px;font-size:11px;color:var(--text-meta)}
.bc-before__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.bc-before__cell{aspect-ratio:4/3;border-radius:8px;background:var(--bg-soft);border:1px solid var(--border)}