/* ============================================================
   CONCEPTO P — BECOME A MEMBER (rooms/become.js)   P, 17, 18 and 23 October
   One key in one window, fixed over the whole page: the hero, the ring's
   places, the walk. The object hangs in front of the words and its shadow
   falls on the same white. Every word carries its class of the house's one
   scale on itself (type.css: .t-hero, .t-display, .t-title, .t-sub,
   .t-label, .t-label-s, .t-num-l in the glossy vinyl, answering the hand
   letter by letter; .t-lead, .t-body, .t-note in Bodoni Moda, clean ink),
   so nothing here sets a face, a size or a tracking: only where a word
   sits. 23 October (P: "too on the left and too small ike boxy"): the
   question is the page. No column and no block: each word is placed on the
   whole window, the question across its upper part, the answers in its
   lower band, the ways in its two bottom corners. Every word in full ink.
   Nothing is boxed, ruled or underlined, not even a field.
   ============================================================ */
.bm{
  --bm-ink:#141413;
  --g-l:max(var(--gutter), env(safe-area-inset-left));
  --g-r:max(var(--gutter), env(safe-area-inset-right));
  --top:calc(var(--nav-h) + clamp(10px, 4.2vh, 48px));
  --foot:clamp(16px, 4vh, 44px);
  position:relative; min-height:100vh; min-height:100svh;
  background:#FFFFFF; color:var(--bm-ink);
}
/* the object's window: the whole screen, never in the way of the hand */
.bm-stage{ position:fixed; inset:0; z-index:3; pointer-events:none; }
/* the letterhead's band kept clear of the scene: cut clean at its edge, never faded (23 October, P: no shading, no grey
   under the letterhead). The metal is hung wholly below it (become.js hung), so at rest nothing reaches the cut; only
   a piece on its way out of the window passes it */
.bm{ --bm-band:calc(var(--nav-h) + 18px); }
.bm-stage{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent var(--bm-band), #000 var(--bm-band));
          mask-image:linear-gradient(to bottom, transparent 0, transparent var(--bm-band), #000 var(--bm-band));
}
/* how far down the band reaches, for the room to hang the metal below it (and a breath more) */
.bm-band-probe{ position:absolute; left:0; top:0; width:0; visibility:hidden; pointer-events:none; height:calc(var(--bm-band) + 1.2vh); }
.bm-stage .kc{ position:absolute; inset:0; }

.bm-hero, .bm-p, .bm-walk{ z-index:2; box-sizing:border-box; }
/* every display word in the room's ink; a revealed letter is given room for its ascender, descender and overhang */
.bm :is(.bm-title, .bm-p-w, .bm-st-w, .bm-ask, .bm-ch-t, .bm-way, .bm-begin-w, .bm-kick-w, .bm-steps-n, .bm-f-pre, .bm-in, .bm-rb dd, .bm-rb dt, .bm-f-l, .bm-p-n){
  color:var(--bm-ink); -webkit-text-fill-color:var(--bm-ink);
}
.bm :is(.bm-title, .bm-p-w, .bm-ask) .cp-l{ padding:.24em .14em .32em; margin:-.24em -.14em -.32em; }
.bm :is(.bm-lead, .bm-p-t, .bm-prov, .bm-hint, .bm-said, .bm-note){ color:var(--bm-ink); }

/* ---------- THE FIRST SCREEN ----------
   "Become" from the left gutter above the ring, "a member" ending on the right gutter below it, the key crossing
   between them (v13, v12); the room's kicker over the first word; the line and Begin in the corner opposite. */
.bm-hero-in{ position:absolute; inset:0; }
.bm-kick{ position:absolute; left:var(--g-l); top:var(--top); margin:0; }
.bm-kick-w{ display:inline-block; padding:6px 0; }
.bm .bm-hero .bm-title{ position:absolute; inset:0; margin:0; pointer-events:none; cursor:default; filter:url(#cp-vinyl-xs) !important; }
.bm-hero .bm-t-l{ position:absolute; display:block; white-space:nowrap; pointer-events:auto; }
.bm-hero .bm-t-a{ left:var(--g-l); top:calc(var(--top) + 30px); }
.bm-hero .bm-t-b{ right:var(--g-r); bottom:calc(var(--foot) + var(--say-h, 17vh) + clamp(4px, 1.4vh, 16px)); }
/* the line and Begin in the corner opposite "Become" (v01, the small copy takes the opposite corner), under "a member" */
.bm-hero-say{ position:absolute; right:var(--g-r); bottom:var(--foot); max-width:min(19em, 40vw); text-align:right; }
.bm .bm-lead.t-lead{ margin:0; font-size:clamp(22px, 1.1vw + 14px, 32px) !important; line-height:1.3; }
.bm-begin{ margin:clamp(8px, 1.6vh, 18px) 0 0; }
.bm-begin-w{ border:0; background:none; padding:6px 0; margin:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
/* what comes after the name waits for it: the kicker, the line and Begin come up in reading order once it is in */
.bm-hero .bm-after{ opacity:0; transform:translate3d(0, 12px, 0);
  transition:opacity var(--slower) var(--settle), transform var(--slower) var(--settle); }
.bm.is-titled .bm-hero .bm-kick{ opacity:1; transform:none; transition-delay:.35s; }
.bm.is-titled .bm-hero .bm-lead{ opacity:1; transform:none; transition-delay:.85s; }
.bm.is-titled .bm-hero .bm-begin{ opacity:1; transform:none; transition-delay:1.15s; }

/* ---------- WHAT IT OPENS ----------
   One place at a time, its word at the house's largest size, running behind the ring that never moves from the
   middle; the word goes round it from place to place (v01: the top band, across the middle, the bottom band) and its
   line takes the corner opposite. */
.bm-p-w{ position:absolute; margin:0; cursor:default; white-space:nowrap; }
.bm-p-say{ position:absolute; max-width:min(22em, 34vw); }
.bm-p[data-band="0"] .bm-p-w{ left:var(--g-l); top:var(--top); }
.bm-p[data-band="0"] .bm-p-say{ right:var(--g-r); bottom:var(--foot); text-align:right; }
.bm-p[data-band="1"] .bm-p-w{ left:var(--g-l); right:var(--g-r); top:50%; transform:translate3d(0, -50%, 0); text-align:center; }
.bm-p[data-band="1"] .bm-p-say{ left:var(--g-l); bottom:var(--foot); }
.bm-p[data-band="2"] .bm-p-w{ left:var(--g-l); bottom:calc(var(--foot) + 1vh); }
.bm-p[data-band="2"] .bm-p-say{ right:var(--g-r); top:var(--top); text-align:right; }
.bm-p-n{ margin:0 0 .5em; }
.bm-p-t{ margin:0; }
/* the mark of a line P has not written yet: small, in the reading face, in full ink */
.bm-prov{ margin:10px 0 0; }
/* a place's number and lines come up a hush after its word begins, once the place is reached */
.bm-p .bm-arr{
  opacity:0; transform:translate3d(0, 12px, 0);
  transition:opacity var(--slow) var(--settle) calc(var(--hush) * 2), transform var(--slow) var(--settle) calc(var(--hush) * 2);
}
.bm-p.is-here .bm-arr{ opacity:1; transform:none; }

/* ---------- THE WALK ----------
   A question is a whole screen: its words across the upper part from the gutter, set to a balanced measure; what is
   answered in the lower band; Back and Continue in the two bottom corners; where the walk stands between them. */
.bm-walk{
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  /* the letterhead's band is never written under: a line leaving upward is cut at the band's edge, never shaded */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent calc(var(--nav-h) + 2px), #000 calc(var(--nav-h) + 2px));
          mask-image:linear-gradient(to bottom, transparent 0, transparent calc(var(--nav-h) + 2px), #000 calc(var(--nav-h) + 2px));
}
.bm-walk::-webkit-scrollbar{ display:none; }
.bm-step-host{ position:relative; min-height:100%; }
/* the keys of a phone are up: the question rises above them, with the ring (become.js keysLift, --kb) */
.bm-step-host{ transform:translate3d(0, calc(-1 * var(--kb, 0px)), 0); transition:transform .42s var(--settle); }
.bm-st{
  position:relative; box-sizing:border-box; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  padding:var(--top) var(--g-r) calc(var(--foot) - 6px) var(--g-l);
}
.bm-st[hidden]{ display:none; }
.bm-st-head{ flex:none; }
.bm-st-w{ margin:0; max-width:min(78vw, 15em); text-wrap:balance; cursor:default; }
/* a long question a step under the largest size, but never small: on a wide window its lines reach past the middle */
.bm .bm-st-w.t-display{ font-size:max(var(--t-display), min(10.6vw, 19vh)) !important; }
/* the read-back's title is split round the ring (v12, the title parted by the object): "Your" on the left, "key." past it */
.bm-st[data-step="ring"] .bm-st-w{ display:flex; justify-content:space-between; max-width:none; width:min(77vw, 100%); }
.bm-st-body{ position:relative; flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-end; min-height:0; }
.bm-st-ans{ max-width:min(50vw, 980px); }
/* beside the words, the answers keep off the ring: never past its left edge (--ring-l, from become.js) */
@media (min-width:760px) and (min-aspect-ratio:20/23){
  .bm-st:is([data-step="silver"], [data-step="draws"], [data-step="keeps"], [data-step="write"], [data-step="mark"]) .bm-st-ans{
    max-width:min(50vw, 980px, calc(var(--ring-l, 50vw) - var(--g-l) - 2vw));
  }
}

/* an answer: a word, every one in full ink; the one chosen in the gloss, the others matte (no swatches, no grey) */
.bm-ch{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 clamp(20px, 2.4vw, 46px); }
.bm-ch-w{
  display:inline-flex; align-items:center; min-height:48px; margin:0; padding:2px 0; border:0; background:none; cursor:pointer;
  -webkit-appearance:none; appearance:none; text-align:left;
}
.bm .bm-ch-w[aria-pressed="false"] .bm-ch-t{ filter:none; }
/* the one chosen is lifted, as its charm is on the ring: gloss and a lift, where a word under the hand or the keys
   takes the gloss alone */
.bm-ch-t{ display:inline-block; transition:transform var(--slow) var(--settle); }
.bm-ch-w[aria-pressed="true"] .bm-ch-t{ transform:translate3d(0, -.16em, 0); }

/* a field: its small label, and the value written at its own size; no line under it, the caret and the label carry it */
.bm-f{ display:block; margin:0 0 clamp(10px, 2vh, 22px); }
.bm-f:last-child{ margin-bottom:0; }
.bm-f-l{ display:block; margin:0 0 2px; }
.bm-f-row{ display:flex; align-items:baseline; gap:.18em; }
.bm-in{
  flex:1 1 auto; min-width:0; box-sizing:border-box; margin:0; padding:2px 0;
  border:0; border-radius:0; background:transparent; outline:none; box-shadow:none;
  -webkit-appearance:none; appearance:none; caret-color:var(--bm-ink);
}
.bm-in-text, .bm-st[data-step="tag"] .bm-in.t-title{ max-width:12em; }
.bm-in-num{ flex:0 1 auto; width:2.6em; max-width:2.6em; }
.bm .bm-in-num, .bm .bm-f-pre.t-hero{ font-size:min(var(--t-hero), 21vh) !important; line-height:1; }
.bm-in-mail{ max-width:24em; }
.bm-f-pre{ flex:none; }
/* an empty field shows its own name in its place, in full ink and in the display face's italic: a prompt in the
   house's own hand, the way a card is addressed, that the written word replaces in the upright. Once written, the
   word speaks for itself; its name stays for a reader of the screen, out of sight */
.bm-in::placeholder{ color:var(--bm-ink); -webkit-text-fill-color:var(--bm-ink); opacity:1; font-style:italic; letter-spacing:-.01em; }
.bm-f:not(.bm-f-own) .bm-f-l{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.bm-said{ margin:6px 0 0; }
.bm-said:empty{ display:none; }

/* the hints and the note: a Bodoni line in a corner of their own, away from the question */
.bm-hint, .bm-note{ position:absolute; right:0; margin:0; max-width:min(17em, 30vw); text-align:right; }
/* the engraving's hint stands under the field it explains, on the words' side: the key alone hangs in the other half */
.bm-st[data-step="engrave"] .bm-hint{ position:static; text-align:left; max-width:min(21em, 40vw); margin:clamp(8px, 1.6vh, 16px) 0 0; }
.bm-st[data-step="ring"] .bm-note{ bottom:clamp(6px, 1vh, 12px); }
/* the name and the address are written where their own names stand, at a size a hand finds */
.bm-st[data-step="tag"] .bm-f-l{ font-size:var(--t-lead) !important; letter-spacing:0 !important; text-transform:none !important; font-variant-caps:normal !important; line-height:1.2; }
/* the number's hint stands under the number it speaks of, in the words' column */
.bm-st[data-step="tag"] .bm-in-num{ width:2.2em; max-width:2.2em; }
.bm-st[data-step="tag"] .bm-hint{ position:static; text-align:left; max-width:min(21em, 34vw); margin:0 0 clamp(14px, 2.6vh, 30px); }
.bm-st[data-step="tag"] .bm-f[data-beat="1"]{ margin-bottom:4px; }
/* the name and the address are written on the line their own names stand on */
.bm-st[data-step="tag"] .bm-f:not([data-beat="1"]){ display:flex; align-items:baseline; gap:0 .7em; }
.bm-st[data-step="tag"] .bm-f:not([data-beat="1"]) .bm-f-l{ flex:none; margin:0; }
.bm-st[data-step="tag"] .bm-f:not([data-beat="1"]) .bm-f-row{ flex:1 1 auto; min-width:0; }
.bm .bm-st[data-step="tag"] .bm-in-num, .bm .bm-st[data-step="tag"] .bm-f-pre.t-hero{ font-size:min(var(--t-hero), 16vh) !important; }
.bm-st[data-step="tag"] .bm-f{ margin-bottom:clamp(8px, 1.3vh, 14px); }
/* a low window beside the words (a small laptop): the name, the number and the read-back are set a step smaller, so
   each of the two longest steps is still one view with its ways */
@media (max-height:720px) and (min-width:760px){
  .bm-st[data-step="tag"] .bm-f-l{ font-size:var(--t-label-s) !important; }
  .bm .bm-st[data-step="tag"] .bm-in-num, .bm .bm-st[data-step="tag"] .bm-f-pre.t-hero{ font-size:11vh !important; }
  .bm .bm-st[data-step="tag"] .bm-in.t-title{ font-size:min(var(--t-title), 5.6vh) !important; }
  .bm-st[data-step="tag"] .bm-f{ margin-bottom:6px; }
  .bm-st[data-step="tag"] .bm-hint{ margin-bottom:6px; }
  .bm-st[data-step="tag"] .bm-ways{ margin-top:10px; }
  .bm .bm-st[data-step="ring"] .bm-st-w{ font-size:min(var(--t-hero), 19vh) !important; }
  .bm .bm-rb dd{ font-size:min(var(--t-title), 5.4vh) !important; }
}

/* the ways: Back in the bottom-left corner, Continue in the bottom-right */
.bm-ways{ display:flex; justify-content:space-between; align-items:baseline; margin:clamp(14px, 4vh, 48px) 0 0; }
.bm-way{ margin:0; padding:6px 0; min-height:44px; border:0; background:none; cursor:pointer; -webkit-appearance:none; appearance:none; }
.bm-next{ margin-left:auto; }
.bm-walk.is-floor .bm-st[data-step="silver"] .bm-back{ visibility:hidden; }

/* where the walk stands, beside Back: the current numeral large, the others small, all in full ink; on the words' side
   of the scene, where the key hanging from the ring never reaches */
.bm-steps{
  position:absolute; left:calc(var(--g-l) + 7em); bottom:calc(var(--foot) - 6px); z-index:1;
  list-style:none; margin:0; padding:0; display:flex; align-items:baseline; gap:0 .95em;
}
.bm-steps li{ display:block; }
.bm-steps-n{ border:0; background:none; padding:8px 2px; margin:0; min-height:44px; cursor:pointer; -webkit-appearance:none; appearance:none; }

/* the read-back: the answers in one run of words, each with its label small over it; then the one action */
.bm-st[data-step="ring"] .bm-st-body{ justify-content:flex-start; }
.bm-st[data-step="ring"] .bm-st-ans{ flex:1 1 auto; display:flex; flex-direction:column; max-width:min(52vw, 1000px); padding-top:clamp(14px, 3.4vh, 40px); }
.bm-rb{ margin:0; display:flex; flex-wrap:wrap; gap:clamp(8px, 1.6vh, 18px) clamp(22px, 2.6vw, 48px); }
/* the read-back keeps to the words' side of the ring: never past its left edge (--ring-l, measured by become.js from
   the framing), in as many columns as fit there */
.bm-st[data-step="ring"] .bm-rb{ max-width:min(760px, calc(var(--ring-l, 40vw) - var(--g-l) - 2.4vw)); }
/* where the walk stands is not shown on the read-back: it is the end, and its ask and Back keep the foot */
.bm-walk[data-cur="ring"] .bm-steps{ display:none; }
.bm-rb-r{ display:flex; flex-direction:column; }
.bm-rb dt{ margin:0 0 1px; }
.bm-rb dd{ margin:0; overflow-wrap:anywhere; }
/* every answer a step under, together, when at their own size they would not stand in one view (become.js fitRb);
   and if that is still not one view, the ask a step under too and the read-back drawn in closer */
.bm .bm-st:is([data-fit="1"], [data-fit="2"]) .bm-rb dd{ font-size:var(--t-sub) !important; line-height:1.2; }
.bm .bm-st[data-fit="2"] .bm-rb{ gap:4px clamp(16px, 2vw, 36px); }
.bm .bm-st[data-fit="2"] .bm-st-ans{ padding-top:clamp(4px, 1vh, 12px); }
.bm .bm-st[data-fit="2"] .bm-ask-p{ padding-top:clamp(4px, 1vh, 12px); }
.bm .bm-st[data-fit="2"] .bm-ask.t-display{ font-size:var(--t-title) !important; }
.bm .bm-st[data-fit="2"] .bm-ways{ padding-top:4px; }
.bm-ask-p{ margin:auto 0 0; padding-top:clamp(10px, 2.4vh, 30px); }
.bm-st[data-step="ring"] .bm-ways{ margin-top:clamp(4px, 1.4vh, 18px); }
.bm-ask{ display:inline-block; padding:4px 0; white-space:nowrap; }
.bm .bm-ask.t-display{ font-size:min(var(--t-display), 7vw, 12vh) !important; }


/* the question that takes its answers right under it: the name, the number and the address */
.bm-st[data-step="tag"] .bm-st-body{ justify-content:flex-start; padding-top:clamp(8px, 2.4vh, 30px); }
.bm-st[data-step="tag"] .bm-st-ans{ flex:1 1 auto; }

/* ---------- ONE CARRIED MOVE (become.js goStep), inside a second ----------
   Arriving: each line of the question rises from a fifth of the window below (transform and opacity only), its ink
   climbing from 15 % (v01), the lines 0.1 s apart (--ln), the last landing with the ring at about 0.95 s; the answers,
   the hint and the ways rise last, 0.04 s apart (--k, eight at most). Leaving, in the frame of the press: the answers and
   the ways let go on the lift, the lines go up at full speed. Going back (--dir -1) the move retraces itself: the
   lines leave downward and the question before comes down from above. */
/* the vinyl is painted on each word once, inside its sleeve (.bm-lw, become.js): the sleeve is the layer that moves,
   so the gloss is carried as it was painted and never computed again in flight (the house's vinyl, the same filter at
   the same size: type.css) */
.bm .bm-st-w{ filter:none !important; }
.bm .bm-st-w .cp-lw{ filter:url(#cp-vinyl); }
.bm-lw{ display:inline-block; white-space:nowrap; will-change:transform, opacity; }
@media (max-width:759px){ .bm .bm-st-w .cp-lw{ filter:url(#cp-vinyl-s); } }
@media (prefers-reduced-transparency:reduce){ .bm .bm-st-w .cp-lw{ filter:none; } }
.bm-st-w:focus{ outline:none; }
/* what is answered, its hint and its ways: each its own layer for good, so nothing in it is painted again when it rises
   or lets go (a layer made for a move and dropped after it paints its words twice) */
.bm-st .bm-a{ will-change:transform, opacity; }
.bm-st.is-pre .bm-st-w .bm-lw{ transform:translate3d(0, calc(var(--dir, 1) * 20vh), 0); opacity:.15; transition:none; }
.bm-st.is-pre .bm-a{ opacity:0; transform:translate3d(0, calc(var(--dir, 1) * 5vh), 0); transition:none; }
/* the lines are counted back from the last: whatever the question's length, its last line lands with the ring
   (0.2 s + 0.44 s after the swap), the lines before it 0.1 s earlier each */
.bm-st.is-in .bm-st-w .bm-lw{
  --lnd:max(0s, calc(.2s - (var(--lines, 1) - 1 - var(--ln, 0)) * .1s));
  transform:none; opacity:1;
  transition:transform .44s var(--settle) var(--lnd), opacity .34s cubic-bezier(.33, .2, .4, 1) var(--lnd);
}
.bm-st.is-in .bm-a{
  opacity:1; transform:none;
  --kd:calc(.12s + min(var(--k, 0), 8) * .04s);
  transition:opacity .3s var(--settle) var(--kd), transform .36s var(--settle) var(--kd);
}
.bm-st.is-going .bm-a{ opacity:0; transform:translate3d(0, calc(var(--dir, 1) * -1.4vh), 0); transition:opacity .18s var(--lift), transform .2s var(--lift); }
.bm-st.is-out .bm-st-w .bm-lw{
  transform:translate3d(0, calc(var(--dir, 1) * -18vh), 0); opacity:0;
  /* gone by the swap (0.3 s): the last of three lines is clear by 0.25 s */
  transition:transform .28s var(--lift) calc(var(--ln, 0) * .025s), opacity .2s cubic-bezier(.6, 0, .9, .4) calc(var(--ln, 0) * .025s);
}

/* ---------- a phone, and any window taller than it is wide (become.js stacked) ----------
   The object hangs in the top of the window; the words come up under it, the answers one to a line (v21: a roll of
   large words). 07 is three beats (the name, the number, the address). Only the current numeral is shown. */
@media (max-width:759px), (max-aspect-ratio:20/23){
  .bm{ --top:calc(var(--nav-h) + 4svh); }
  .bm-hero .bm-t-a{ top:51svh; }
  .bm-hero .bm-t-b{ bottom:auto; top:calc(51svh + var(--t-hero) * .98); }
  .bm-hero-say{ max-width:none; right:var(--g-r); }
  .bm-p .bm-p-w, .bm-p[data-band] .bm-p-w{ left:var(--g-l); right:var(--g-r); top:50svh; bottom:auto; transform:none; text-align:left; white-space:normal; }
  .bm-p .bm-p-say, .bm-p[data-band] .bm-p-say{ left:var(--g-l); right:var(--g-r); top:auto; bottom:var(--foot); max-width:none; text-align:left; }
  .bm-st{ padding-top:48svh; }
  .bm-st-w{ max-width:none; }
  .bm .bm-st-w.t-display{ font-size:var(--t-display) !important; }
  .bm-st[data-step="ring"] .bm-st-w{ display:block; width:auto; }
  .bm-st-ans{ max-width:none; }
  .bm-st-body{ justify-content:flex-start; padding-top:clamp(10px, 2.4svh, 26px); }
  .bm-ch{ flex-direction:column; flex-wrap:nowrap; gap:0; }
  /* the six marks are short words: they run on in a line and wrap, so the question, its marks and its ways are one view */
  .bm-st[data-step="mark"] .bm-ch{ flex-direction:row; flex-wrap:wrap; gap:0 .55em; }
  .bm-st[data-step="ring"]{ padding-top:35svh; }
  .bm-ch-w{ min-height:44px; }
  .bm-hint, .bm-note, .bm-st[data-step="tag"] .bm-hint, .bm-st[data-step="engrave"] .bm-hint{ position:static; display:block; text-align:left; max-width:none; margin:clamp(8px, 1.6svh, 16px) 0 0; }
  .bm-st[data-step="tag"] .bm-f:not([data-beat="1"]){ display:block; }

  .bm-st[data-step="ring"] .bm-st-ans{ max-width:none; }
  /* the read-back on a phone: the answers run on two and three to a line under "Your key.", and the one action on
     one line, so the whole of it is one view */
  .bm-st[data-step="ring"] .bm-rb{ max-width:none; gap:clamp(6px, 1.2svh, 12px) clamp(16px, 5vw, 28px); }
  /* the answers at the size they were given in, all a step under together where that is not one view (fitRb) */
  .bm .bm-ask.t-display{ font-size:min(var(--t-display), 11vw) !important; }
  .bm-ways{ margin-top:auto; padding-top:clamp(14px, 3svh, 30px); }
  .bm-steps{ left:50%; transform:translate3d(-50%, 0, 0); }
  .bm-steps li:has(> .bm-steps-n:not([aria-current])){ display:none; }
  .bm-st[data-beat="0"] [data-beat]:not([data-beat="0"]),
  .bm-st[data-beat="1"] [data-beat]:not([data-beat="1"]),
  .bm-st[data-beat="2"] [data-beat]:not([data-beat="2"]){ display:none; }
  .bm .bm-in-num, .bm .bm-f-pre.t-hero{ font-size:var(--t-hero) !important; }
}

/* ---------- THE CEREMONY (P, 19 October): nothing scrolls; each scene is the whole screen ----------
   The scene being left lifts away on the lift, the next comes up on the settle from the side the hand
   carried it (--dir), while the key glides to what the scene is about and the water runs over the glass. */
html.bm-on, html.bm-on body{ overflow:hidden; overscroll-behavior:none; }
.bm{ height:100vh; height:100svh; min-height:0; overflow:hidden; overflow:clip; }
.bm-hero, .bm-places, .bm-walk{
  position:absolute; inset:0; min-height:0; height:100%;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate3d(0, calc(var(--dir, 1) * -18px), 0);
  transition:opacity .45s var(--lift), transform .5s var(--lift), visibility 0s linear .5s;
}
.bm[data-at="hero"] .bm-hero, .bm[data-at="places"] .bm-places, .bm[data-at="walk"] .bm-walk{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity .9s var(--settle) .25s, transform 1.1s var(--settle) .25s, visibility 0s linear 0s;
}
/* the walk keeps its own motion (one carried move): it comes in at once, its lines rising in it */
.bm[data-at="walk"] .bm-walk{ transition:opacity .3s var(--settle) .2s, transform .3s var(--settle) .2s, visibility 0s linear 0s; }
.bm[data-at="hero"], .bm[data-at="places"]{ cursor:pointer; }
/* what it opens: one place at a time in the same spot, the ring turned to it */
.bm-places .bm-p{ position:absolute; inset:0; min-height:0; opacity:0; transform:translate3d(0, 14px, 0); transition:opacity .5s var(--lift), transform .6s var(--lift); }
.bm-places .bm-p.is-cur{ opacity:1; transform:none; transition:opacity .9s var(--settle) .15s, transform 1s var(--settle) .15s; }

@media (prefers-reduced-motion:reduce){
  .bm-hero, .bm-places, .bm-walk, .bm-places .bm-p{ transition:none !important; transform:none !important; }
  .bm-st .bm-st-w .bm-lw, .bm-st .bm-a, .bm-p .bm-arr, .bm-hero .bm-after, .bm-step-host{ transition:none !important; }
  .bm-st.is-pre .bm-st-w .bm-lw, .bm-st.is-pre .bm-a{ opacity:1; transform:none; }
  .bm-ch-t{ transition:none; }
}

/* ============================================================
   THE WORD WHERE THE SIGN-UPS WERE
   There is no list: the foot, the Paper's colophon, the Editorial's Correo and the Members' face give the
   one word "Become a member", in the vinyl, to /vault/become.
   ============================================================ */
/* each is the scale's .t-title (type.css), set on the word by the page that makes it */
.foot-become, .pp-become, .edc-become, .mbr-become-w{ display:inline-block; padding:4px 0; }
.foot-become{ color:var(--ink); -webkit-text-fill-color:var(--ink); }
.pp-correo .pp-letter{ max-width:none; text-align:center; }
.pp-correo .pp-become{ color:var(--pp-ink, #1C1B1D); -webkit-text-fill-color:var(--pp-ink, #1C1B1D); }
.edc-f .edc-become{ align-self:flex-start; color:#141413; -webkit-text-fill-color:#141413; }
.mbr-become{ margin:clamp(22px, 3.6vh, 38px) 0 0; opacity:0; transform:translate3d(0, 10px, 0);
  transition:opacity var(--slow) var(--settle) calc(var(--hush) * 5), transform var(--slow) var(--settle) calc(var(--hush) * 5); }
.mbr.is-laid .mbr-become{ opacity:1; transform:none; }
.mbr-become-w{ color:var(--mb-ink, #1A1814); -webkit-text-fill-color:var(--mb-ink, #1A1814); }
@media (prefers-reduced-motion: reduce){ .mbr-become{ transition:none; } }
@media (prefers-reduced-transparency:reduce){ .foot-become, .pp-become, .edc-become, .mbr-become-w{ filter:none; } }

/* ---------- THE MEMBER'S OWN KEY (become.js gate) ----------
   A member who is here is never walked through joining: their key, the photographed ring Members hangs, stands in the
   gap between "Your" and "key." (v12: the title split round the object, at mid-height); who holds it in the corner
   under "Your", and Members under "key.". One screen, nothing scrolls, nothing is boxed. */
.bm-gate{ position:relative; height:100vh; height:100svh; min-height:520px; overflow:hidden; overflow:clip; }
.bm-gate-ring{ position:absolute; left:0; right:0; top:calc(var(--nav-h) + 1vh); bottom:1vh; z-index:1; }
.bm-gate-in{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.bm-gate-in :is(a, button){ pointer-events:auto; }
.bm .bm-gate-w{
  position:absolute; left:max(var(--gutter), env(safe-area-inset-left)); right:max(var(--gutter), env(safe-area-inset-right));
  top:50%; transform:translate3d(0, -58%, 0); margin:0;
  display:flex; justify-content:space-between; align-items:baseline; pointer-events:auto;
}
.bm-gate-w .bm-t-l{ display:block; }
.bm-gate-who{
  position:absolute; left:max(var(--gutter), env(safe-area-inset-left)); bottom:clamp(28px, 7vh, 84px); margin:0;
  display:flex; flex-direction:column; gap:6px; color:var(--bm-ink);
}
.bm-gate-n{ color:var(--bm-ink); -webkit-text-fill-color:var(--bm-ink); }
.bm-gate-name, .bm-gate-demo{ color:var(--bm-ink); }
.bm-gate-go{ position:absolute; right:max(var(--gutter), env(safe-area-inset-right)); bottom:clamp(24px, 6vh, 76px); margin:0; }
.bm-gate-to{ display:inline-block; padding:6px 0; color:var(--bm-ink); -webkit-text-fill-color:var(--bm-ink); }
.bm-gate .bm-after{ opacity:0; transform:translate3d(0, 14px, 0);
  transition:opacity var(--slower) var(--settle), transform var(--slower) var(--settle); }
.bm-gate.is-titled .bm-gate-who{ opacity:1; transform:none; transition-delay:.55s; }
.bm-gate.is-titled .bm-gate-go{ opacity:1; transform:none; transition-delay:.8s; }
/* a phone, and a window taller than it is wide: the key in the top of the window, the words under it */
@media (max-width:759px), (max-aspect-ratio:20/23){
  .bm-gate-ring{ top:calc(var(--nav-h) + 1svh); bottom:auto; height:min(54svh, 118vw); }
  .bm .bm-gate-w{ top:calc(var(--nav-h) + 1svh + min(54svh, 118vw) + 2svh); transform:none; justify-content:flex-start; gap:0 .26em; }
  .bm-gate-who{ bottom:auto; top:calc(var(--nav-h) + 1svh + min(54svh, 118vw) + 2svh + var(--t-hero) * 1.2); }
  .bm-gate-go{ bottom:clamp(20px, 5svh, 56px); }
}
@media (prefers-reduced-motion:reduce){ .bm-gate .bm-after{ transition:none; } }

/* 28 October: the question keeps to the words' side of the key, as the read-back does: it wraps before the ring's
   left edge (--ring-l, measured by become.js from the framing) and never runs under the silver */
@media (min-width:760px) and (min-aspect-ratio:20/23){
  .bm-st-w{ max-width:min(15em, calc(var(--ring-l, 62vw) - var(--g-l) - 2.4vw)); }
  .bm .bm-st-w.t-display{ font-size:min(max(var(--t-display), min(10.6vw, 19vh)), calc((var(--ring-l, 62vw) - var(--g-l)) / 5.6)) !important; }
}
/* the place's word and the house's two words stand over the silver, as the Registry sets its number over the plate:
   never hidden under the ring */
.bm-p, .bm-hero{ z-index:4; }
.bm-p .bm-p-say, .bm-hero .bm-hero-say{ position:absolute; }

/* ============================================================
   28 OCTOBER: THE WALK AS A FILM (rooms/become-cinema.js)
   The chapter's number crosses the turn at the size of the window, its figures rolling, in and out of focus; the
   question is gathered in ink and its glossy letters come into focus over it; the key is found in an exposure and
   the camera keeps moving in. The words, the ring and the one carried move are as they were.
   ============================================================ */
.bmc-no{
  position:fixed; left:var(--bmc-x, 62%); top:var(--bmc-y, 50%); z-index:2; pointer-events:none;
  display:flex; transform:translate(-50%, -50%) scale(1.18); opacity:0; filter:blur(18px);
  font-family:var(--display); font-weight:400; font-variant-numeric:lining-nums tabular-nums;
  font-size:min(78vh, 52vw); line-height:1; letter-spacing:-.04em; color:var(--ink, #1A1814);
}
.bmc-col{ display:block; height:1em; overflow:hidden; filter:url(#cp-vinyl); }
.bmc-strip{ display:flex; flex-direction:column; transform:translate3d(0, 0, 0); transition:transform .62s cubic-bezier(.7, 0, .2, 1); }
.bmc-col + .bmc-col .bmc-strip{ transition-delay:.06s; }
.bmc-d{ display:block; height:1em; line-height:1; text-align:center; }
.bmc-no.is-on{
  opacity:1; filter:blur(0); transform:translate(-50%, -50%) scale(1);
  transition:opacity .22s var(--settle), filter .42s var(--settle), transform .9s var(--settle);
}
.bmc-no.is-off{
  opacity:0; filter:blur(22px); transform:translate(-50%, calc(-50% + var(--dir, 1) * -4vh)) scale(.9);
  transition:opacity .38s var(--lift), filter .38s var(--lift), transform .6s var(--lift);
}
/* a phone, and any window taller than it is wide: the ring hangs at the head of the window, and so does the number */
@media (max-width:759px), (max-aspect-ratio:20/23){
  .bmc-no{ --bmc-x:50%; --bmc-y:30%; font-size:min(44vh, 84vw); }
}
/* the ink, over the words and under the ring */
.bmc-ink{ position:fixed; inset:0; width:100vw; height:100vh; z-index:2; pointer-events:none; transition:opacity .3s var(--settle); }
/* while the ink gathers, the glossy letters wait out of focus and come into focus over it */
.bm-st.is-inked.is-in .bm-st-w .bm-lw{
  transform:none; opacity:1; filter:blur(0);
  transition:opacity .5s var(--settle) .7s, filter .62s var(--settle) .7s;
}
.bm-st.is-inked.is-pre .bm-st-w .bm-lw, .bm-st.is-inked:not(.is-in) .bm-st-w .bm-lw{ opacity:0; filter:blur(10px); transform:none; }
.bm-st.is-inked .bm-st-w .bm-lw{ opacity:0; filter:blur(10px); }
/* leaving, the question goes out of focus as it goes */
.bm-st.is-out .bm-st-w .bm-lw{
  filter:blur(8px);
  transition:transform .28s var(--lift) calc(var(--ln, 0) * .025s), opacity .2s cubic-bezier(.6, 0, .9, .4) calc(var(--ln, 0) * .025s), filter .24s var(--lift);
}
/* the key: the window burns white for an instant, and the camera keeps moving in */
.bmc-flash{ position:fixed; inset:0; z-index:6; pointer-events:none; background:#FFFFFF; opacity:0; }
.bmc-flash.is-on{ animation:bmc-flash 1.3s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes bmc-flash{ 0%{ opacity:0; } 8%{ opacity:.96; } 100%{ opacity:0; } }
.bm .bm-stage{ transition:transform 1.2s var(--settle); transform-origin:62% 50%; }
.bm.is-finale .bm-stage{ transform:scale(1.06); transition:transform 9s cubic-bezier(.25, .1, .25, 1) .3s; }
@media (prefers-reduced-motion:reduce){
  .bmc-no, .bmc-ink, .bmc-flash{ display:none; }
  .bm.is-finale .bm-stage{ transform:none; }
}