/* P4 "Mushin to Banana Island" = the climb on a hand-painted Lagos signboard (client pick 8 Oct, billboard C of
   Design/variations/2026-10-08-climb-frame/billboard-c.html). Replaces the estate banner (archived in _archive/2026-10-08-climb-banner/).
   Every rule is scoped to #climb. Floors you can't reach yet are pencilled in; each one you reach paints in with a brush stroke.
   Nothing moves on hover. Reduced motion (OS or the footer toggle): no brush reveal, no demo autoplay. */
#climb button { font: inherit; color: inherit; }
#climb.sec { padding-top: var(--s6); }
@media (max-width: 599px) { #climb.sec { padding-top: var(--s4); } }
#climb .bb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#climb .cl-foot { text-align: center; margin: var(--s4) auto 0; max-width: 62ch; font-size: 15px; color: var(--ink-2); }
#climb .bb-strip__t { margin: 0; }
#climb .bb-arr { width: 52px; height: 52px; flex: none; padding: 0; border-radius: 16px; border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); background: var(--gold); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .08s, box-shadow .08s; }
#climb .bb-arr svg { width: 22px; height: 22px; }
#climb .bb-arr:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
#climb .bb-arr:disabled { background: var(--cotton); color: rgba(16,22,52,.4); cursor: default; box-shadow: 0 4px 0 rgba(16,22,52,.4); border-color: rgba(16,22,52,.4); }
#climb .bb-arr:focus-visible { outline: 3px solid var(--fuch); outline-offset: 3px; border-radius: 16px; }
#climb .bb-job { text-align: center; min-width: 0; }
#climb .bb-job__n { font: 800 22px/1 var(--display); font-variation-settings: "wdth" 85; text-transform: uppercase; }
#climb .bb-job__p { margin-top: 4px; font: 600 13px/1.3 var(--text); color: var(--ink-2); }
#climb .bb-job.is-swap { animation: bb-swap .4s var(--ease-settle); }
@keyframes bb-swap { from { transform: scale(.88); } }
#climb .bb-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
#climb .bb-dots i { width: 6px; height: 6px; border-radius: 6px; background: rgba(16,22,52,.3); transition: width .2s; }
#climb .bb-dots i.is-on { background: var(--ink); width: 16px; }
@media (prefers-reduced-motion: reduce) { #climb .bb-job.is-swap { animation: none; } #climb .bb-dots i { transition: none; } }
 .reduce-motion #climb .bb-job.is-swap { animation: none; } .reduce-motion #climb .bb-dots i { transition: none; } 


#climb .bb-scene { --b0: 112px; --bstep: 40px; --art: 140px; position: relative; max-width: 1180px; margin: 0 auto; }

/* floodlights on arms over the board, one per column */
#climb .bb-lamps { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(6, 1fr); height: 46px; margin: 0 16px; }
#climb .bb-lamp { position: relative; justify-self: center; width: 56px; }
#climb .bb-lamp::before { content: ""; position: absolute; left: 50%; bottom: -14px; width: 26px; height: 50px; border: 4px solid var(--ink); border-left: 0; border-bottom: 0; border-radius: 0 18px 0 0; translate: -4px 0; }
#climb .bb-lamp i { position: absolute; left: calc(50% - 22px); bottom: 2px; width: 30px; height: 16px; background: #3B4580; border: 2.5px solid var(--ink); border-radius: 10px 10px 4px 4px; }
#climb .bb-lamp i::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -5px; height: 4px; border-radius: 0 0 4px 4px; background: #565c7a; border: 2px solid var(--ink); border-top: 0; transition: background .2s; }
#climb .bb-lamp.is-on i::after { background: #FFE9A8; box-shadow: 0 2px 10px 2px rgba(255, 220, 120, .8); }
#climb .bb-lamp--gate { visibility: hidden; }

/* the board */
#climb .bb-board { position: relative; z-index: 2; padding: 10px; background: var(--ink); border-radius: 8px; box-shadow: 0 30px 50px -30px rgba(16,22,52,.6); }
#climb .bb-face { position: relative; overflow: hidden; border-radius: 3px; background: linear-gradient(#141B44, #1B2350 70%); color: var(--paper); }
#climb .bb-strip { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 2px solid rgba(255,252,247,.12); font: 600 13px/1.2 var(--text); color: rgba(255,252,247,.75); }
#climb .bb-strip__t { font: 800 20px/1 var(--display); font-variation-settings: "wdth" 80; text-transform: uppercase; color: var(--paper); letter-spacing: .01em; }
#climb .bb-strip__t span { color: var(--gold); }
#climb .bb-strip b { color: var(--paper); font-variant-numeric: tabular-nums; }

/* the skyline: six columns (five homes + the gate), each a stepped block with the house on top */
#climb .bb-sky { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; padding: 0 6px; height: calc(var(--b0) + 4 * var(--bstep) + var(--art) * .6 + 48px); }
#climb .bb-col { grid-row: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 0 5px; }
#climb .bb-cone { position: absolute; left: -10%; right: -10%; top: 0; bottom: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease-out);
  background: linear-gradient(180deg, rgba(255, 226, 140, .32), rgba(255, 226, 140, .08) 70%, rgba(255,226,140,0)); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
#climb .bb-col.is-lit .bb-cone { opacity: 1; }
#climb .bb-col.is-flick .bb-cone { animation: bb-flick .7s linear both; animation-delay: var(--d, 0ms); }
@keyframes bb-flick { 0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: .15; } 34% { opacity: .9; } 44% { opacity: .35; } 60%, 100% { opacity: 1; } }
#climb .bb-art { position: relative; width: 100%; max-width: var(--art); margin: 0 auto -2px; transition: opacity .35s, filter .35s; }
#climb .bb-art svg { display: block; width: 100%; }
#climb .bb-block { position: relative; height: calc(var(--b0) + var(--k) * var(--bstep)); padding: 10px 10px 0; border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; background: #2A3260; color: rgba(255,252,247,.55); transition: background .35s var(--ease-out), color .35s; }
#climb .bb-col.is-lit .bb-block { background: var(--bg); color: var(--ink); }
#climb .bb-col:not(.is-lit) .bb-art { opacity: .35; filter: grayscale(1) brightness(.7); }
#climb .bb-no { font: 800 13px/1 var(--text); opacity: .75; }
#climb .bb-col.is-here .bb-no { display: inline-block; opacity: 1; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 3px 6px; }
#climb .bb-t { margin-top: 6px; font: 800 20px/.92 var(--display); font-variation-settings: "wdth" 78; text-transform: uppercase; }
#climb .bb-a { margin-top: 4px; font: 600 12.5px/1.25 var(--text); opacity: .85; }
#climb .bb-a b { font: 800 14px/1 var(--display); font-variation-settings: "wdth" 88; font-variant-numeric: tabular-nums; opacity: 1; }
#climb .bb-tag { display: inline-block; margin-top: 6px; padding: 3px 7px; border: 2px solid currentColor; border-radius: 8px; font: 700 11.5px/1.15 var(--text); }
#climb .bb-col.is-lit .bb-tag { background: var(--fuch-soft); border-color: var(--ink); }
#climb .bb-col.is-lit.is-in .bb-tag { background: var(--green); }
#climb .bb-col.is-new .bb-block { animation: bb-new .9s var(--ease-out) .35s; }
@keyframes bb-new { 25% { box-shadow: inset 0 0 0 999px rgba(34,181,115,.35); } }
#climb .bb-tag .s { display: none; }

/* the gate: Ikoyi Golf Club at the end of the road */
#climb .bb-gate { align-self: end; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 10px; }
#climb .bb-gate img { width: min(100%, 104px); aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 3px solid var(--gold); }
#climb .bb-gate__pole { width: 8px; height: 46px; background: var(--ink); border-inline: 2px solid #3B4580; }
#climb .bb-gate p { margin-top: 8px; font: 800 18px/1 var(--display); font-variation-settings: "wdth" 80; color: var(--gold); text-transform: uppercase; }
#climb .bb-gate small { display: block; margin-top: 4px; font: 600 12px/1.3 var(--text); color: rgba(255,252,247,.75); }

/* the road: also the progress line to the gate */
#climb .bb-road { position: relative; height: 54px; background: #0D1230; border-top: 2.5px solid var(--ink); }
#climb .bb-road::before { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, rgba(255,252,247,.35) 0 18px, transparent 18px 32px); }
#climb .bb-road__fill { position: absolute; left: calc(100% / 12); top: 50%; height: 6px; margin-top: -3px; width: 0; background: var(--gold); border-radius: 6px; transition: width 1s var(--ease-settle); }
#climb .bb-token { position: absolute; top: 50%; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid var(--ink); background: var(--gold); box-shadow: 0 0 0 2.5px var(--paper); overflow: hidden; display: grid; place-items: center; font: 800 15px/1 var(--display); color: var(--ink); transition: left 1s var(--ease-settle); }
#climb .bb-token img { width: 100%; height: 100%; object-fit: cover; }

/* catwalk under the face: grating, rail and posts */
#climb .bb-walk { position: relative; z-index: 2; margin: 0 -14px; height: 34px; }
#climb .bb-walk__deck { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-linear-gradient(90deg, #3B4580 0 6px, #1B2350 6px 9px); border: 2.5px solid var(--ink); border-radius: 3px; }
#climb .bb-walk__rail { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--ink); border-radius: 3px; }
#climb .bb-walk__posts { position: absolute; left: 0; right: 0; top: 0; bottom: 10px; background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 48px); }

/* legs + the picker plate bolted under the board */
#climb .bb-base { position: relative; height: 196px; }
#climb .bb-leg { position: absolute; top: 0; bottom: 18px; width: 30px; background: repeating-linear-gradient(180deg, #3B4580 0 22px, #2C3466 22px 24px); border: 2.5px solid var(--ink); border-top: 0; }
#climb .bb-leg--l { left: 18%; } #climb .bb-leg--r { right: 18%; }
#climb .bb-ground { position: absolute; left: 6%; right: 6%; bottom: 0; height: 18px; border-top: 2.5px solid var(--ink); background: repeating-linear-gradient(90deg, #c9c3b3 0 40px, #bdb6a5 40px 42px); border-radius: 0 0 8px 8px; }
#climb .bb-plate { position: absolute; left: 50%; top: 22px; translate: -50% 0; width: min(520px, calc(64% - 30px)); padding: 16px 22px 12px; background: var(--white); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 6px 0 var(--ink); }
#climb .bb-plate::before { content: ""; position: absolute; inset: 6px; pointer-events: none; background: radial-gradient(circle, #9aa0b0 2.5px, transparent 3px) 0 0 / 7px 7px no-repeat, radial-gradient(circle, #9aa0b0 2.5px, transparent 3px) 100% 0 / 7px 7px no-repeat, radial-gradient(circle, #9aa0b0 2.5px, transparent 3px) 0 100% / 7px 7px no-repeat, radial-gradient(circle, #9aa0b0 2.5px, transparent 3px) 100% 100% / 7px 7px no-repeat; }
#climb .bb-hang { position: absolute; top: 0; width: 6px; height: 24px; background: var(--ink); }
#climb .bb-hang--l { left: calc(50% - min(200px, 24%)); } #climb .bb-hang--r { right: calc(50% - min(200px, 24%)); }
#climb .bb-sel { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 12px; align-items: center; }
#climb .bb-under { display: grid; justify-items: center; }
#climb .bb-under > * { grid-area: 1 / 1; }
#climb .bb-hint { margin-top: 6px; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--gold-soft); font: 700 12.5px/1.2 var(--text); color: var(--ink); opacity: 0; pointer-events: none; white-space: nowrap; }
#climb .bb-hint.is-on { animation: bb-hint 2s ease-in-out both; }
#climb .bb-under:has(.bb-hint.is-on) .bb-dots { visibility: hidden; }
@keyframes bb-hint { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 30%, 70% { transform: scale(1.06); } 50% { transform: scale(1); } 100% { opacity: 0; } }
#climb .bb-replay { display: block; margin: 4px auto 0; min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--ink-2); font: 700 14px/1 var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#climb .bb-replay:hover { color: var(--ink); }
#climb .bb-replay:focus-visible { outline: 3px solid var(--fuch); outline-offset: 2px; border-radius: 10px; }

/* phone: the full name of the floor you live on, printed under the skyline */
#climb .bb-here { display: none; padding: 8px 10px 10px; font: 600 12px/1.3 var(--text); color: rgba(255,252,247,.8); border-top: 2px solid rgba(255,252,247,.12); }
#climb .bb-here b { color: var(--paper); }

@media (max-width: 899px) {
  #climb .bb-scene { --b0: 70px; --bstep: 26px; --art: 90px; }
  #climb .bb-t { font-size: 15px; }
  #climb .bb-a { font-size: 11px; } #climb .bb-a b { font-size: 12px; }
  #climb .bb-tag { font-size: 10.5px; padding: 2px 5px; }
  #climb .bb-plate { width: min(480px, calc(100% - 32px)); }
  #climb .bb-leg--l { left: 10%; } #climb .bb-leg--r { right: 10%; }
  #climb .bb-walk { margin: 0 -6px; }
}
@media (max-width: 599px) {
  #climb .bb-scene { --b0: 86px; --bstep: 20px; --art: 56px; }
  #climb .bb-lh { display: none; }
  #climb .bb-lamps { margin: 0 4px; height: 36px; }
  #climb .bb-lamp { width: 40px; } #climb .bb-lamp::before { height: 38px; width: 18px; border-width: 3px; }
  #climb .bb-lamp i { width: 22px; height: 12px; left: calc(50% - 16px); }
  #climb .bb-board { padding: 6px; }
  #climb .bb-strip { padding: 10px; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; }
  #climb .bb-strip__t { font-size: 17px; }
  #climb .bb-sky { padding: 0 2px; }
  #climb .bb-col { padding: 0 2px; }
  #climb .bb-block { padding: 6px 4px 0; border-width: 2px; }
  #climb .bb-t, #climb .bb-a .r { display: none; }
  #climb .bb-a { margin-top: 4px; font-size: 10px; line-height: 1.15; }
  #climb .bb-a b { display: block; font-size: 11px; margin-top: 2px; }
  #climb .bb-no { font-size: 11px; }
  #climb .bb-col.is-here .bb-no { padding: 2px 3px; border-radius: 6px; }
  #climb .bb-tag { font-size: 10px; padding: 2px 3px; border-width: 1.5px; border-radius: 6px; }
  #climb .bb-tag .l { display: none; } #climb .bb-tag .s { display: inline; }
  #climb .bb-gate img { border-radius: 10px; border-width: 2px; }
  #climb .bb-gate__pole { height: 24px; width: 6px; }
  #climb .bb-gate p { font-size: 12px; }
  #climb .bb-gate small { font-size: 10px; }
  #climb .bb-road { height: 46px; }
  #climb .bb-token { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  #climb .bb-here { display: block; }
  #climb .bb-walk { margin: 0 -4px; height: 26px; }
  #climb .bb-base { height: 206px; }
  #climb .bb-leg { width: 22px; } #climb .bb-leg--l { left: 8%; } #climb .bb-leg--r { right: 8%; }
  #climb .bb-plate { width: calc(100% - 8px); padding: 14px 12px 10px; top: 22px; }
  #climb .bb-hang--l { left: 25%; } #climb .bb-hang--r { right: 25%; }
  #climb .bb-sel { grid-template-columns: 48px minmax(0,1fr) 48px; gap: 8px; }
  #climb .bb-sel .bb-arr { width: 48px; height: 48px; }
  #climb .bb-job__n { font-size: 19px; } #climb .bb-job__p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #climb .bb-col.is-flick .bb-cone, #climb .bb-col.is-new .bb-block { animation: none; }
  #climb .bb-hint.is-on { animation: none; opacity: 1; }
  #climb .bb-cone, #climb .bb-block, #climb .bb-art, #climb .bb-token, #climb .bb-road__fill { transition: none; }
}

  .reduce-motion #climb .bb-col.is-flick .bb-cone, .reduce-motion #climb .bb-col.is-new .bb-block { animation: none; }
  .reduce-motion #climb .bb-hint.is-on { animation: none; opacity: 1; }
  .reduce-motion #climb .bb-cone, .reduce-motion #climb .bb-block, .reduce-motion #climb .bb-art, .reduce-motion #climb .bb-token, .reduce-motion #climb .bb-road__fill { transition: none; }


/* ===== C · Hand-painted Lagos signboard: painted plywood on wooden posts, nails in the corners, brush-lettered title (Bricolage roughened
   by an SVG filter), floors you can't reach yet are only pencilled in, and each new floor paints in with a brush stroke. ===== */
#climb .bb-lamps { display: none; }
#climb .bb-board { padding: 0; background: none; box-shadow: none; }
#climb .bb-face { border-radius: 4px; border: 3px solid #4A2E14; color: #2B1A0C;
  background:
    radial-gradient(ellipse 30px 12px at 22% 38%, rgba(120,72,30,.25), transparent 70%),
    radial-gradient(ellipse 24px 10px at 78% 70%, rgba(120,72,30,.22), transparent 70%),
    repeating-linear-gradient(180deg, rgba(120,72,30,0) 0 9px, rgba(120,72,30,.08) 9px 10px, rgba(120,72,30,0) 10px 23px, rgba(120,72,30,.06) 23px 25px),
    linear-gradient(180deg, #EDCF98, #E2BE82);
  box-shadow: inset 0 0 0 10px rgba(255,252,247,.0), 0 24px 40px -24px rgba(43,26,12,.6); }
#climb .bb-face::before { /* painted cream border */ content: ""; position: absolute; inset: 10px; border: 6px solid #FFF6E2; border-radius: 6px; pointer-events: none; filter: url(#cl-paint); z-index: 0; }
#climb .nail { position: absolute; z-index: 7; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #E6E8EE, #8A8F9C 60%, #4F5360); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
#climb .nail--tl { left: 6px; top: 6px; } #climb .nail--tr { right: 6px; top: 6px; } #climb .nail--bl { left: 6px; bottom: 6px; } #climb .nail--br { right: 6px; bottom: 6px; }
#climb .bb-strip { position: relative; z-index: 1; padding: 26px 30px 6px; border: 0; color: #5B3A1A; flex-wrap: wrap; }
#climb .bb-strip__t { font: 800 clamp(30px, 4.6vw, 54px)/.9 var(--display); font-variation-settings: "wdth" 75; color: #B3262B; text-transform: uppercase; filter: url(#cl-paint); letter-spacing: -.005em; }
#climb .bb-strip__t span { color: #1F6B3A; }
#climb .bb-strip b { color: #2B1A0C; }
#climb .bb-sky { z-index: 1; }
#climb .bb-cone { display: none; }
/* not reached yet: only pencilled in */
#climb .bb-block { background: transparent; border: 2px dashed rgba(74,46,20,.45); color: rgba(74,46,20,.6); }
#climb .bb-col:not(.is-lit) .bb-art { opacity: .45; filter: grayscale(1) sepia(.6) contrast(.7); }
#climb .bb-col:not(.is-lit) .bb-tag { border-color: rgba(74,46,20,.45); }
/* reached: painted */
#climb .bb-block { isolation: isolate; }
#climb .bb-col.is-lit .bb-block { background: transparent; border-color: transparent; color: #2B1A0C; }
/* the paint sits on its own layer so the roughened edge never blurs the small type */
#climb .bb-col.is-lit .bb-block::before { content: ""; position: absolute; inset: -2px -2px 0; z-index: -1; background: var(--paint); border: 3px solid #2B1A0C; border-bottom: 0; border-radius: 6px 6px 0 0; filter: url(#cl-paint); }
#climb .bb-col:nth-child(2) { --paint: #F2B53A; } #climb .bb-col:nth-child(3) { --paint: #4CC08A; } #climb .bb-col:nth-child(4) { --paint: #F07FA7; } #climb .bb-col:nth-child(5) { --paint: #F2B53A; } #climb .bb-col:nth-child(6) { --paint: #4CC08A; }
#climb .bb-col.is-lit .bb-art { filter: url(#cl-paint); }
#climb .bb-col.is-lit .bb-tag { background: #FFF6E2; border-color: #2B1A0C; }
#climb .bb-col.is-lit.is-in .bb-tag { background: #FFF6E2; box-shadow: inset 0 -4px 0 #4CC08A; }
#climb .bb-col.is-here .bb-no { background: #FFF6E2; }
/* the brush stroke: a soft-edged mask sweeps left to right */
#climb .bb-col.is-flick .bb-block, #climb .bb-col.is-flick .bb-art { -webkit-mask: linear-gradient(100deg, #000 45%, transparent 55%) 100% 0 / 260% 100% no-repeat; mask: linear-gradient(100deg, #000 45%, transparent 55%) 100% 0 / 260% 100% no-repeat;
  animation: brush .7s cubic-bezier(.5,0,.3,1) both; animation-delay: var(--d, 0ms); }
@keyframes brush { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
#climb .bb-gate p { color: #B3262B; filter: url(#cl-paint); }
#climb .bb-gate small { color: #5B3A1A; }
#climb .bb-gate img { border-color: #2B1A0C; border-radius: 6px; }
#climb .bb-gate__pole { background: #4A2E14; border-color: #2B1A0C; }
/* the painted road: progress + your token */
#climb .bb-road { z-index: 1; background: transparent; border-top: 3px solid #2B1A0C; margin: 0 16px 18px; }
#climb .bb-road::before { background: repeating-linear-gradient(90deg, rgba(43,26,12,.55) 0 22px, transparent 22px 36px); filter: url(#cl-paint); }
#climb .bb-road__fill { background: #B3262B; filter: url(#cl-paint); }
#climb .bb-token { border-color: #2B1A0C; box-shadow: 0 0 0 3px #FFF6E2; }
#climb .bb-here { color: #5B3A1A; border-color: rgba(74,46,20,.25); position: relative; z-index: 1; margin: -12px 16px 12px; }
#climb .bb-here b { color: #2B1A0C; }
#climb .bb-walk { display: none; }
/* wooden posts, chains and the little painted picker sign */
#climb .bb-base { height: 230px; }
#climb .bb-leg { width: 34px; background: linear-gradient(90deg, #7A4A22, #9A6232 45%, #6B3E1E); border: 2.5px solid #2B1A0C; border-top: 0; bottom: 18px; }
#climb .bb-leg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 30px, rgba(43,26,12,.25) 30px 32px); }
#climb .bb-ground { background: #8C6A43; border-color: #2B1A0C; }
#climb .bb-hang { width: 8px; height: 40px; background: radial-gradient(circle at 50% 50%, transparent 0 2px, #6F7380 2.5px 4px, transparent 4.5px) 0 0 / 8px 9px repeat-y; }
#climb .bb-plate { top: 40px; background: #FFF6E2; border: 3px solid #2B1A0C; border-radius: 6px; box-shadow: 0 10px 18px -10px rgba(43,26,12,.5); }
#climb .bb-plate::before { background: radial-gradient(circle, #8A8F9C 2.5px, transparent 3px) 0 0 / 7px 7px no-repeat, radial-gradient(circle, #8A8F9C 2.5px, transparent 3px) 100% 0 / 7px 7px no-repeat; }
#climb .bb-plate .bb-arr { background: #F2B53A; border-color: #2B1A0C; box-shadow: none; border-radius: 10px; }
#climb .bb-plate .bb-arr:disabled { background: transparent; border-style: dashed; }
#climb .bb-plate .bb-job__n { color: #B3262B; filter: url(#cl-paint); }
#climb .bb-plate .bb-job__p { color: #5B3A1A; }
#climb .bb-plate .bb-dots i { background: rgba(74,46,20,.35); } #climb .bb-plate .bb-dots i.is-on { background: #2B1A0C; }
#climb .bb-hint { background: #FFF6E2; border-color: #2B1A0C; }
@media (max-width: 599px) {
  #climb .bb-strip { padding: 22px 18px 4px; }
  #climb .bb-face::before { inset: 6px; border-width: 4px; }
  #climb .nail { width: 9px; height: 9px; left: auto; }
  #climb .nail--tl { left: 4px; top: 4px; } #climb .nail--tr { right: 4px; top: 4px; } #climb .nail--bl { left: 4px; bottom: 4px; } #climb .nail--br { right: 4px; bottom: 4px; }
  #climb .bb-road { margin: 0 8px 12px; }
  #climb .bb-here { margin: -6px 8px 10px; }
  #climb .bb-sky { padding: 0 8px; }
  #climb .bb-leg { width: 24px; }
  #climb .bb-plate { top: 36px; }
}
@media (prefers-reduced-motion: reduce) { #climb .bb-col.is-flick .bb-block, #climb .bb-col.is-flick .bb-art { animation: none; -webkit-mask: none; mask: none; } }
 .reduce-motion #climb .bb-col.is-flick .bb-block, .reduce-motion #climb .bb-col.is-flick .bb-art { animation: none; -webkit-mask: none; mask: none; }
/* tablet: the columns are too narrow for full labels, so homes show number + price + shifts (as on phones) and the full name sits under the skyline */
@media (min-width: 600px) and (max-width: 899px) {
  #climb .bb-scene { --b0: 96px; --bstep: 24px; }
  #climb .bb-t, #climb .bb-a .r, #climb .bb-lh, #climb .bb-tag .l { display: none; }
  #climb .bb-tag .s { display: inline; }
  #climb .bb-a { font-size: 12px; } #climb .bb-a b { display: block; font-size: 14px; margin-top: 2px; }
  #climb .bb-tag { font-size: 12px; }
  #climb .bb-here { display: block; }
}
#climb .cl-foot + .cl-foot { margin-top: 4px; }

/* client 9 Oct: no Replay buttons */
#climb .bb-replay { display: none !important; }