/* How it is set up (track 08), direction B. Written Wed 4 Nov 2026 by Claude (builder B2-2). Prefix bh-.
   Uses b/b.css tokens only. Old road styles: harness.css.bak-2026-11-04-B2. */
.bh-hero { padding: clamp(48px, 7vw, 110px) 0 clamp(56px, 7vw, 110px); }
.bh-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.bh-hero .b-h1 { font-size: clamp(60px, 8.6vw, 156px); }
.bh-hero .b-lead { margin-top: 0; }
@media (max-width: 900px) { .bh-hero-in { grid-template-columns: 1fr; } .bh-hero .b-h1 { font-size: clamp(54px, 15vw, 110px); } }

/* why: three plain statements */
.bh-three { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.bh-three li { padding-top: 16px; border-top: 3px solid var(--b-fg); }
.bh-three .b-h3 { font-size: clamp(34px, 3.4vw, 56px); }
.bh-three p { margin: 12px 0 0; color: var(--b-mute); max-width: 34ch; }
@media (max-width: 760px) { .bh-three { grid-template-columns: 1fr; } }

/* the five layers: a bold numbered poster list */
.bh-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--b-fg); }
.bh-list li { display: grid; grid-template-columns: clamp(110px, 14vw, 220px) minmax(0, 1fr); gap: 8px clamp(20px, 3vw, 48px); padding: clamp(24px, 3vw, 40px) 0; border-bottom: 2px solid var(--b-fg); }
.bh-n { font: 900 clamp(72px, 9vw, 160px)/.8 var(--b-disp); color: var(--b-acc); }
.bh-h { margin: 0; font: 900 clamp(40px, 4.6vw, 80px)/.9 var(--b-disp); text-transform: uppercase; }
.bh-p { margin: 14px 0 0; max-width: 56ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; }
.bh-ex { margin: 14px 0 0; max-width: 62ch; color: var(--b-mute); font-size: 15px; }
.bh-ex b { display: block; margin-bottom: 4px; font: 400 var(--b-fs-5)/1.3 var(--b-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--b-fg); }
@media (max-width: 620px) { .bh-list li { grid-template-columns: 1fr; } .bh-n { font-size: 72px; } }

/* the picker */
.bh-form { display: flex; gap: 12px; flex-wrap: wrap; }
.bh-form input { flex: 1 1 320px; min-width: 0; min-height: 64px; padding: 0 18px; border: 3px solid var(--b-fg); border-radius: 4px; background: var(--b-card); color: var(--b-fg); font: 600 clamp(17px, 1.7vw, 24px)/1.2 var(--b-sans); }
.bh-form input:focus { outline: none; border-color: var(--b-acc); }
.bh-form .b-btn { min-height: 64px; }
.bh-try { margin: 14px 0 0; color: var(--b-mute); font-size: 15px; }
.bh-eg { padding: 0; border: 0; background: none; color: var(--b-fg); font: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--b-acc); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.bh-eg:focus-visible { outline: 3px solid var(--b-fg); outline-offset: 2px; }
.bh-out { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); align-items: start; margin: 36px 0 28px; }
.bh-nums { flex-wrap: nowrap; }
.bh-nums dd { color: var(--b-fg); }
.bh-nums > div:last-child dd { color: var(--b-acc); }
.bh-card { min-height: 150px; padding: 18px 22px; border: 3px solid var(--b-fg); background: var(--b-card); }
.bh-card.on { border-color: var(--b-acc); }
.bh-card-k { margin: 0; font: 400 var(--b-fs-5)/1.3 var(--b-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--b-mute); }
.bh-card-h { margin: 6px 0 0; font: 900 clamp(30px, 3vw, 46px)/.92 var(--b-disp); text-transform: uppercase; }
.bh-card-p { margin: 8px 0 0; max-width: 60ch; color: var(--b-mute); }
.bh-card-l { display: inline-block; margin-top: 10px; font-weight: 600; text-decoration-color: var(--b-acc); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 760px) { .bh-out { grid-template-columns: 1fr; } }

.bh-names { list-style: none; margin: 0; padding: 18px 0 0; border-top: 2px solid var(--b-fg); columns: 4 210px; column-gap: 28px; }
.bh-names li { break-inside: avoid; padding: 5px 0; font-size: 15px; line-height: 1.3; color: var(--b-mute); transition: color .15s ease; }
.bh-names li.scan { color: var(--b-fg); }
.bh-names li.hit { color: var(--b-acc); font-weight: 600; }
.bh-names li.hit::before { content: "→ "; }
.bh-note { margin: 22px 0 0; }

.bh-end .b-p { margin-top: 18px; }
html[data-motion=off] .bh-names li { transition: none; }
@media (prefers-reduced-motion: reduce) { .bh-names li { transition: none; } }