/* ==========================================================================
   BAUHAUS — loaded on a/bauhaus.html only.

   Every value below is this page's art direction (design/exhibit-art-
   direction.json, export: false): Aesthetary's choices, not Bauhaus rules.
   The record establishes no palette and no typeface; the downloads say so
   and carry none of this (claim-register.ts guards them).

   RED, YELLOW AND BLUE are defined in exactly one rule: on
   [data-role="stereotype"]. Anywhere else the variables are undefined and a
   shape falls back to ink, so a primary cannot leak into a diagram.

   Breakpoints are container widths of the page column (RESPONSIVE.md):
   desktop >= 1100px, tablet 700–1099px, mobile < 700px, measured on the
   page column. A container query measures the content box, so the desktop
   test is 1040px of content (the 1440 board: 1208px column less 2 × 56px
   gutters = 1096px, drawn as desktop).
   ========================================================================== */

@font-face { font-family: "BH Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "BH Archivo"; src: url("fonts/archivo-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "BH Plex Mono"; src: url("fonts/plex-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BH Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

.bh-page main {
  --ground: #ECE6DA; --ground2: #F4F0E8; --card: #F7F4EE; --ink: #1A1916; --ink2: #4A4740; --rule: #C9C1B2;
  --dark: #121210; --on-dark: #ECE6DA; --on-dark2: #B8B2A6; --verd: #2E5E4E; --ochre: #B7862B; --mid: #6E6A61;
  --debt-tx: #5A3700; --debt-bg: #F3E6C4; --debt-bd: #6A4300;
  --d: "BH Archivo", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m: "BH Plex Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: 56px;
  padding-inline: 0 !important;
  padding-block-end: 0 !important;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--d);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: clip;
}
.bh-page main *, .bh-page main *::before, .bh-page main *::after { box-sizing: border-box; }
:where(.bh-page) main :is(p, h1, h2, h3, h4, dl, dd, dt, figure, ul, ol, table, caption, blockquote) { margin: 0; }
:where(.bh-page) main :is(ul, ol) { padding: 0; list-style: none; }
:where(.bh-page) main :is(h1, h2, h3, h4) { font-weight: inherit; line-height: inherit; letter-spacing: inherit; overflow-wrap: normal; hyphens: none; }
:where(.bh-hero, .bh-rec, .bh-sheet) a { color: inherit; text-underline-offset: 3px; }
:where(.bh-hero, .bh-rec, .bh-sheet) a:hover { color: var(--verd); }
:where(.bh-hero, .bh-rec, .bh-sheet, .bh-dock) button { font: inherit; color: inherit; cursor: pointer; }
.bh-page main :is(a, button, summary, [tabindex], [role="slider"]):focus-visible,
.bh-sheet :is(a, button):focus-visible, .bh-dock:focus-visible { outline: 3px solid var(--verd); outline-offset: 3px; }
.bh-dark :is(a, button, summary, [tabindex], [role="slider"]):focus-visible { outline-color: #8FC7B2; }
.bh-page main .topbar { position: relative; z-index: 5; margin: 0; background: var(--ground); }
.bh-hero, .bh-rec { container: bh / inline-size; }
:where(.bh-page) main [hidden], .bh-sheet [hidden] { display: none !important; }
.bh-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bh-i { font-style: italic; }

/* THE STEREOTYPE — the only rule that defines primaries. */
[data-role="stereotype"] { --bh-r: #D8342A; --bh-y: #F2C230; --bh-b: #2656A6; }
.bh-p-r { fill: var(--bh-r); background: var(--bh-r); }
.bh-p-y { fill: var(--bh-y); background: var(--bh-y); }
.bh-p-b { fill: var(--bh-b); background: var(--bh-b); }

/* Type roles */
.bh-lab, .bh-cb, .bh-kick, .bh-caps, .bh-note, .bh-foot, .bh-from { font-family: var(--m); }
.bh-lab { font-size: 11px; line-height: 1.45; color: var(--ink2); }
.bh-cb { font-size: 11px; line-height: 1.4; color: var(--ink2); white-space: normal; font-weight: 400; letter-spacing: 0; }
.bh-kick { font-size: 13px; line-height: 1.4; margin-bottom: 20px !important; }
.bh-caps { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; font-weight: 500; }
.bh-note { font-size: 13px; line-height: 1.5; max-width: 62ch; }
.bh-foot { font-size: 12px; line-height: 1.5; }
.bh-dim { color: var(--ink2); }
.bh-debt {
  display: inline-block; font: 400 11px/1.3 var(--m); color: var(--debt-tx); background: var(--debt-bg);
  border: 1px dashed var(--debt-bd); padding: 2px 5px; vertical-align: baseline; letter-spacing: 0; font-style: normal; text-transform: none; text-decoration: none;
}
.bh-h2 { font-size: clamp(44px, 8.6cqi, 104px); line-height: .86; letter-spacing: -.045em; font-weight: 800; }
.bh-h2 b { font-weight: 800; }
.bh-h2 span { display: block; font-weight: 300; letter-spacing: -.05em; }
.bh-h2--m { font-size: clamp(30px, 4.6cqi, 56px); line-height: .95; letter-spacing: -.035em; margin-top: 32px !important; }
.bh-h2--m span { display: inline; font-weight: 200; }
.bh-h3 { font-size: clamp(26px, 4.3cqi, 52px); line-height: .95; letter-spacing: -.035em; }
.bh-h3 b { font-weight: 800; }
.bh-h3 span { font-weight: 300; }
.bh-h4 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px !important; }
.bh-lede { font-size: clamp(18px, 1.8cqi, 22px); line-height: 1.35; max-width: 52ch; margin-top: 18px !important; }
.bh-lede--s { font-size: clamp(17px, 1.6cqi, 20px); max-width: 62ch; }
.bh-sm-only, .bh-sm-inl { display: none !important; }
.bh-lg-inl { display: inline; }

/* Buttons */
.bh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  font: 600 14px/1 var(--d); border: 1px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none;
}
.bh-btn:hover { background: var(--ground2); color: var(--ink) !important; }
.bh-btn--solid { background: var(--ink); color: var(--ground) !important; }
.bh-btn--solid:hover { background: #33312b; color: var(--ground) !important; }
.bh-btn--sq { width: 44px; padding: 0; }
.bh-btn--wide { width: 100%; }
.bh-seg { display: flex; flex-wrap: wrap; }
.bh-seg__b { min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); margin: 0 -1px -1px 0; background: transparent; font: 600 13px/1 var(--d); }
.bh-seg__b[aria-pressed="true"] { background: var(--ink); color: var(--ground) !important; }

/* Why…? disclosures */
.bh-why { font: 400 12px/1.5 var(--m); max-width: 44ch; }
.bh-why summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; list-style: none; }
.bh-why summary::-webkit-details-marker { display: none; }
.bh-why summary::before { content: "▸"; width: 1.2em; flex: none; }
.bh-why[open] summary::before { content: "▾"; }
.bh-why__b > * + * { margin-top: 8px !important; }

/* Section rhythm */
.bh-sec { position: relative; padding: 96px var(--pad) 96px; border-top: 2px solid var(--ink); }
.bh-dark { background: var(--dark); color: var(--on-dark); border-top-color: var(--dark); }
.bh-dark .bh-lab, .bh-dark .bh-cb, .bh-dark .bh-note, .bh-dark .bh-dim { color: var(--on-dark2); }

/* ================================================================ HERO */
.bh-hero { position: relative; padding: 20px var(--pad) 40px; }
.bh-crumb ol { display: flex; gap: 8px; font: 400 12px/1 var(--m); color: var(--ink2); }
.bh-crumb li + li::before { content: "/"; margin-right: 8px; }
.bh-crumb a { color: var(--ink2); }
.bh-hero__head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 40px; padding-right: 260px; min-height: 420px; }
.bh-hero__meta { grid-column: 1; font: 400 12px/1.4 var(--m); text-transform: uppercase; letter-spacing: .02em; }
.bh-hero__h { grid-column: 1; font-size: clamp(64px, 16.2cqi, 196px); line-height: .82; font-weight: 800; font-stretch: 112%; font-variation-settings: "wdth" 112; letter-spacing: -.035em; margin: 12px 0 0 -0.04em !important; }
.bh-hero__sub { grid-column: 1; font-size: clamp(26px, 3.6cqi, 44px); font-weight: 300; letter-spacing: -.045em; margin-top: 36px !important; }
.bh-nav { position: absolute; top: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: 250px; }
.bh-nav__ring { border: 0; background: none; padding: 0; width: 176px; height: 176px; border-radius: 50%; }
.bh-ring { display: block; width: 100%; height: 100%; overflow: visible; }
.bh-ring circle { stroke: var(--ink); stroke-width: 1; }
.bh-ring__on { fill: var(--ink); }
.bh-ring__off { fill: var(--ground); }
.bh-ring__gap { fill: var(--ground); }
.bh-ring__t { font: 500 8px var(--m); fill: var(--ink); text-anchor: middle; letter-spacing: .04em; }
.bh-ring__t--inv { fill: var(--ground); }
.bh-why--ring { text-align: right; }
.bh-why--ring summary { justify-content: flex-end; }
.bh-why--ring .bh-why__b p { font-size: 12px; }

/* The discipline field: 12 × 8 on desktop. */
.bh-field { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(64px, auto)); gap: 8px; margin-top: 56px; }
.bh-card { grid-area: var(--gp); position: relative; min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.bh-card--slot { border: 1px solid var(--ink); background: repeating-linear-gradient(135deg, rgba(26,25,22,.13) 0 1px, transparent 1px 8px), #E2DACB; }
.bh-card--ref { border: 1px solid var(--ink); background: var(--card); }
.bh-card--dc { border: 1px dashed #6B665C; }
.bh-card--dark { background: #1C1B18; color: var(--on-dark); border-color: #1C1B18; }
.bh-card--dark .bh-lab { color: var(--on-dark2); }
.bh-card--stereo { border: 1px solid var(--ink); background: #fff; }
.bh-card__triad { width: 92px; height: 40px; }
.bh-card__n { font: 700 15px/1.1 var(--d); letter-spacing: -.01em; overflow-wrap: anywhere; }
.bh-card__s { font: 400 11px/1.45 var(--m); margin-top: 2px !important; }
.bh-card__d { margin-top: 4px !important; }
.bh-card__open { display: none; }
.bh-field__cap { grid-area: 7 / 10 / 9 / 13; align-self: end; font: 400 12px/1.5 var(--m); }
.bh-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; margin-top: 48px; }
.bh-intro__p { font-size: clamp(19px, 1.8cqi, 22px); line-height: 1.35; max-width: 34ch; }
.bh-facts { font: 400 12px/1.5 var(--m); }
.bh-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 4px 0; }
.bh-facts dt { color: var(--ink2); }
.bh-read { margin-top: 40px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 4px 0 16px; font: 400 12px/1.5 var(--m); }
.bh-read summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.bh-read__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.bh-read__h { font-weight: 500; }

/* The hero's load animation (JS adds the classes; nothing is hidden without it). */
.bh-field.is-anim .bh-card:not(.bh-card--stereo) { opacity: 0; }
.bh-field.is-anim.is-in .bh-card { opacity: 1; transition: opacity 300ms ease calc(var(--i) * 40ms); }
.bh-flood { position: absolute; z-index: 3; inset: 0; background: #fff; display: grid; place-items: center; transform-origin: 0 0; pointer-events: none; }
.bh-flood svg { width: 60%; height: 60%; }

/* =============================================================== LEARN */
.bh-comp__g { display: grid; grid-template-columns: minmax(0, 470fr) 150px minmax(0, 480fr); gap: 0; margin-top: 44px; border-top: 2px solid var(--ink); }
.bh-comp__hist { padding: 28px 28px 28px 0; border-right: 1px solid var(--ink2); }
.bh-comp__hist dl > div { margin-top: 16px; }
.bh-comp__hist dt { font: 400 12px/1.4 var(--m); color: var(--ink2); }
.bh-comp__hist dd { font-size: 20px; line-height: 1.3; margin-top: 2px; }
.bh-comp__big { font-weight: 700; font-size: 24px !important; }
.bh-funnel { display: flex; flex-direction: column; align-items: center; padding: 28px 0; border-right: 1px solid var(--ink2); }
.bh-funnel__v { width: 150px; height: 470px; flex: 1; }
.bh-funnel__h { display: none; }
.bh-funnel figcaption { text-align: center; margin-top: 8px; }
.bh-comp__short { padding: 28px 0 28px 24px; }
.bh-comp__short li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--rule); }
.bh-comp__ic svg { width: 100px; height: 34px; }
.bh-comp__ic .bh-triad { width: 92px; height: 40px; }
.bh-abc { font-size: 26px; font-weight: 500; }
.bh-comp__t { font-size: 17px; font-weight: 700; }
.bh-comp__d { font: 400 12px/1.5 var(--m); margin-top: 2px !important; }
.bh-comp__end { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; margin-top: 48px; }
.bh-comp__end .bh-h3 { font-size: clamp(34px, 5.3cqi, 64px); }
.bh-o, .bh-o1, .bh-o2, .bh-o3, .bh-o6, .bh-o15 { fill: none; stroke: var(--ink); }
.bh-o { stroke-width: 2; } .bh-o1 { stroke-width: 1; } .bh-o2 { stroke-width: 2; } .bh-o3 { stroke-width: 3; } .bh-o6 { stroke-width: 6; } .bh-o15 { stroke-width: 1.5; }
.bh-f { fill: var(--ink); }
.bh-gap { fill: var(--ground); stroke: var(--ink); }
.bh-dash { stroke-dasharray: 4 5; } .bh-dash3 { stroke-dasharray: 3 3; } .bh-dash6 { stroke-dasharray: 4 6; }
.bh-a25 { stroke-opacity: .25; } .bh-a50 { stroke-opacity: .5; } .bh-a30 { stroke-opacity: .3; }
.bh-svgt { font: 400 11px var(--m); fill: var(--ink); }
.bh-svgt--s { font-size: 10px; } .bh-svgt--g { fill: var(--ink2); font-size: 12px; }
.bh-svgt--inv { fill: var(--ground); } .bh-svgt--dim { fill: var(--on-dark2); font-size: 9px; }
.bh-svgd { font: 800 26px var(--d); fill: var(--ink); } .bh-svgd--s { font-size: 12px; }
.bh-band-f { fill: #D9D2C3; }
.bh-ol, .bh-ol2 { fill: none; stroke: var(--on-dark); } .bh-ol2 { stroke-width: 2; }
.bh-fl { fill: var(--on-dark); }
.bh-om { fill: none; stroke: var(--mid); } .bh-os { fill: none; stroke: #3A3833; }
.bh-oo { fill: none; stroke: var(--ochre); stroke-width: 2; } .bh-oo1 { fill: none; stroke: var(--ochre); }
.bh-ochre { fill: var(--ochre); } .bh-ochre-l { stroke: var(--ochre); stroke-width: 3; }
.bh-tube { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }

/* Tendencies: five columns, dark Unreliable */
.bh-tiers { display: grid; grid-template-columns: 140px minmax(0, 230fr) minmax(0, 266fr) minmax(0, 266fr) minmax(0, 266fr); margin-top: 32px; border: 2px solid var(--ink); }
.bh-tier { padding: 18px 16px; border-right: 1px solid var(--ink); min-width: 0; }
.bh-tier:last-child { border-right: 0; }
.bh-tier summary, .bh-tier__h { list-style: none; display: flex; flex-direction: column; gap: 6px; font: 400 11px/1.4 var(--m); cursor: default; }
.bh-tier summary::-webkit-details-marker { display: none; }
.bh-tier__n { font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.bh-tier__c { display: none; }
.bh-tier__g { color: var(--ink2); }
.bh-tier ul { display: flex; flex-direction: column; gap: 6px; margin-top: 12px !important; font-size: 16px; line-height: 1.25; }
.bh-tier--necessary { background: var(--card); }
.bh-tier__dash { font-size: 40px; line-height: 1; margin: 12px 0 !important; }
.bh-tier__none { font: 400 12px/1.4 var(--m); }
.bh-tier--unreliable { background: var(--dark); color: var(--on-dark); }
.bh-tier--unreliable .bh-tier__g { color: var(--on-dark2); }
.bh-tier--unreliable li { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bh-tend .bh-foot { margin-top: 20px !important; max-width: none; }

/* Three Bauhauses */
.bh-per__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.bh-per__why { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.bh-per__strip { display: flex; margin-top: 40px; border: 2px solid var(--ink); min-height: 720px; }
.bh-per__p { position: relative; min-width: 0; }
.bh-per__p--w { flex: 6; background: #E6D7BA; border-right: 2px solid var(--ink); }
.bh-per__p--d { flex: 7; background: #D7DBD6 linear-gradient(90deg, rgba(26,25,22,.14) 1px, transparent 1px) 0 0 / 78px 100%; border-right: 2px solid var(--ink); }
.bh-per__p--b { flex: 1; min-width: 72px; background: var(--dark); color: var(--on-dark); }
.bh-per__in { padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.bh-per__in > p:not(.bh-lab) { font-size: 17px; line-height: 1.4; }
.bh-per__yr { display: none; }
.bh-per__n { font-size: clamp(48px, 7.3cqi, 88px); line-height: .9; letter-spacing: -.04em; font-weight: 800; }
.bh-per__p--w .bh-per__n { font-stretch: 125%; font-variation-settings: "wdth" 125; }
.bh-per__p--d .bh-per__n { font-stretch: 100%; }
.bh-per__k { font-size: 30px !important; font-weight: 300; letter-spacing: -.02em; }
.bh-per__p--w .bh-per__k { font-stretch: 125%; font-variation-settings: "wdth" 125; }
.bh-per__p--d .bh-per__k { font-weight: 500; }
.bh-cut { position: relative; height: 150px; }
.bh-cut i { position: absolute; bottom: 0; display: block; }
.bh-cut i:nth-child(1) { left: 0; width: 22%; height: 72%; background: #B7862B; transform: rotate(-2deg); }
.bh-cut i:nth-child(2) { left: 24%; width: 16%; height: 92%; background: #8E3B2E; transform: rotate(2deg); }
.bh-cut i:nth-child(3) { left: 42%; width: 24%; height: 56%; background: #5B4A7A; transform: rotate(-1deg); }
.bh-cut i:nth-child(4) { left: 69%; width: 12%; height: 66%; background: #D9C8A4; border: 1px solid var(--ink); transform: rotate(4deg); }
.bh-ref { border: 1px solid var(--ink); background: var(--card); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.bh-ref--dc { border-style: dashed; background: transparent; }
.bh-ref__t { font: 700 17px/1.15 var(--d); }
.bh-ref__s { font: 400 11px/1.45 var(--m); }
.bh-per__refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bh-per__s { font: 400 12px/1.5 var(--m) !important; }
.bh-per__bh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bh-per__vert { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; gap: 20px; align-items: center; font-stretch: 62%; font-variation-settings: "wdth" 62; margin: 0 auto; }
.bh-per__vert b { font-size: 34px; font-weight: 800; letter-spacing: -.01em; }
.bh-per__vert span { font-size: 16px; }
.bh-per__closed { font: 400 11px/1.3 var(--m); text-align: center; margin-top: auto !important; }
.bh-per__p--b .bh-per__in { height: 100%; padding: 20px 8px; align-items: center; }
.bh-ruler { position: relative; height: 34px; margin-top: 8px; border-top: 1px solid var(--ink); font: 400 12px/1 var(--m); }
.bh-ruler span { position: absolute; top: 8px; left: calc(var(--y) / 14 * 100%); }
.bh-ruler span:nth-child(3) { transform: translateX(-100%); padding-right: 4px; }
.bh-ruler span:last-child { transform: translateX(-100%); left: 100%; }
.bh-per__after { font: 400 13px/1.5 var(--m); text-align: right; margin-top: 4px !important; }
.bh-per__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; margin-top: 24px; font: 400 13px/1.6 var(--m); }
.bh-per__dir { grid-column: 1 / -1; }

/* =========================================================== WORKSHOPS */
.bh-ws__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.bh-ws__top .bh-note { margin-top: 12px !important; }
.bh-ws__ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 280px; text-align: right; }
.bh-deck { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: 10px; margin-top: 40px; }
.bh-deck__i { min-width: 0; display: flex; }
.bh-deck__i > div { display: flex; flex: 1; min-width: 0; }
.bh-deck__i[data-card="typography"] { grid-column: 1 / 5; grid-row: 1; }
.bh-deck__i[data-card="furniture"] { grid-column: 5 / 8; grid-row: 1; }
.bh-deck__i[data-card="textiles"] { grid-column: 8 / 13; grid-row: 1; }
.bh-deck__i[data-card="theatre"] { grid-column: 1 / 5; grid-row: 2 / 4; }
.bh-deck__i[data-card="painting"] { grid-column: 5 / 8; grid-row: 2 / 4; }
.bh-deck__i[data-card="architecture"] { grid-column: 8 / 11; grid-row: 2 / 4; }
.bh-deck__i[data-card="photography"] { grid-column: 11 / 13; grid-row: 2 / 4; }
.bh-w { flex: 1; min-width: 0; min-height: 290px; padding: 18px; border: 1px solid var(--ink); display: flex; flex-direction: column; gap: 12px; }
.bh-w__h { font: 400 12px/1.4 var(--m); text-transform: uppercase; }
.bh-w__h b { font-weight: 500; }
.bh-w svg { width: 100%; max-height: 220px; margin: auto 0; }
.bh-w--type { background: var(--ground2) repeating-linear-gradient(180deg, transparent 0 23px, rgba(26,25,22,.12) 23px 24px); }
.bh-w__big { font-size: clamp(30px, 3.4cqi, 44px); font-weight: 800; letter-spacing: -.035em; line-height: .95; margin: auto 0 !important; text-align: center; }
.bh-w__big span { display: block; font-weight: 400; font-size: .45em; letter-spacing: -.01em; }
.bh-w--furn { background: #DDE0DC; }
.bh-w--tex { background: repeating-linear-gradient(90deg, #5B4A7A 0 9px, #B7862B 9px 18px), #B7862B; position: relative; justify-content: space-between; }
.bh-w--tex { background:
  repeating-linear-gradient(0deg, rgba(91,74,122,.55) 0 5px, transparent 5px 10px),
  repeating-linear-gradient(90deg, #5B4A7A 0 6px, #B7862B 6px 14px, #8E3B2E 14px 17px); }
.bh-w--tex .bh-w__h { align-self: flex-start; background: var(--dark); color: var(--on-dark); padding: 6px 10px; }
.bh-w--tex .bh-lab { align-self: flex-start; background: var(--card); color: var(--ink); padding: 3px 6px; }
.bh-w--arch { background: var(--ground); }
.bh-w--photo, .bh-w--stage { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.bh-w--stage { background: #22211C; }
.bh-w--photo .bh-lab, .bh-w--stage .bh-lab { color: var(--on-dark2); }
.bh-w--paint { background: var(--card); }
.bh-w--flat { background: #fff; align-items: center; justify-content: center; gap: 10px; }
.bh-w--flat .bh-triad--v { width: 60px; height: 160px; }
.bh-w__fl { font: 400 12px/1 var(--m); }
.bh-deck.is-flat .bh-deck__i { grid-column: auto; grid-row: auto; }
.bh-deck.is-flat { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bh-ws__flatmsg { margin-top: 32px; }
.bh-live:empty { display: none; }
.bh-ws > .bh-note { margin-top: 24px !important; }

/* =========================================================== TYPOGRAPHY */
.bh-ty__top, .bh-col__top, .bh-cmp__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.bh-ty__top .bh-why { max-width: 330px; }
.bh-ty__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; align-items: start; }
.bh-fig figcaption { font: 400 12px/1.5 var(--m); margin-top: 10px; }
.bh-slot { position: relative; border: 1px solid var(--ink); background: var(--card); padding: 10px; aspect-ratio: 352 / 300; display: flex; flex-direction: column; justify-content: space-between; }
.bh-slot--empty { background: repeating-linear-gradient(135deg, rgba(26,25,22,.13) 0 1px, transparent 1px 8px), #E2DACB; }
.bh-fig--catalogue-1923 .bh-slot { background: var(--card); }
.bh-fig--poelzig .bh-slot, .bh-slot--tall { aspect-ratio: 3 / 4; }
.bh-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bh-slot__t { font: 700 18px/1.2 var(--d); }
.bh-slot__s { font: 400 11px/1.45 var(--m); margin-top: 4px !important; }
.bh-myth { margin-top: 44px; border-top: 2px solid var(--ink); }
.bh-myth__hd, .bh-myth__r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.bh-myth__hd { font: 500 12px/1 var(--m); text-transform: uppercase; border-bottom-color: var(--ink); }
.bh-myth__m { font-size: clamp(18px, 1.8cqi, 22px); }
.bh-myth__r > span:last-child { font-size: 17px; line-height: 1.35; }
.bh-ty > .bh-note { margin-top: 24px !important; max-width: none; }

/* =============================================================== COLOUR */
.bh-col__top .bh-lede { max-width: 440px; }
.bh-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.bh-swatch__c { display: grid; grid-template-columns: 1fr 1fr; height: 170px; position: relative; }
.bh-swatch__c i { display: block; position: relative; }
.bh-swatches figcaption { font: 400 12px/1.4 var(--m); margin-top: 10px; }
.bh-swatch--rel i:first-child { background: #2B2723; } .bh-swatch--rel i:last-child { background: #E6DFD3; }
.bh-swatch--rel i::after { content: ""; position: absolute; inset: 37% 28%; background: #8F887C; }
.bh-swatch--con .bh-swatch__c { grid-template-columns: 2fr 1fr; } .bh-swatch--con i:first-child { background: #B7862B; } .bh-swatch--con i:last-child { background: #5B4A7A; }
.bh-swatch--int i:first-child { background: #8E3B2E; } .bh-swatch--int i:last-child { background: #D9C8A4; }
.bh-swatch--int i::after { content: ""; position: absolute; inset: 26% 34%; background: #AD6A50; }
.bh-swatch--mat .bh-swatch__c { display: block; background: repeating-linear-gradient(90deg, #2E5E4E 0 3px, #8FB5A5 3px 5px); }
.bh-swatch--mat i { display: none; }
.bh-swatch--sur .bh-swatch__c { display: block; background: linear-gradient(180deg, #737780 0 50%, #92959C 50%, #5E6168 100%); }
.bh-swatch--sur i { display: none; }
.bh-col > .bh-lab { margin-top: 12px !important; }
.bh-band { display: grid; grid-template-columns: 240px minmax(0, 1fr) 60px minmax(0, 1fr); gap: 40px; align-items: center; background: var(--dark); color: var(--on-dark); padding: 34px; margin-top: 40px; }
.bh-band .bh-lab, .bh-band .bh-cb { color: var(--on-dark2); }
.bh-band__tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 110px; margin-bottom: 12px; }
.bh-band__tri i { display: block; }
.bh-band__h { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.bh-band__h--l { font-weight: 300; }
.bh-band__a p:not(.bh-band__h), .bh-band__b p:not(.bh-band__h) { font: 400 12px/1.5 var(--m); margin: 10px 0 !important; }
.bh-band__arr { font-size: 40px; text-align: center; }

/* ============================================================= GEOMETRY */
.bh-geo__g { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; margin-top: 32px; }
.bh-geo__ctl .bh-seg { flex-direction: column; }
.bh-geo__ctl .bh-seg__b { text-align: left; justify-content: flex-start; margin: 0 0 -1px 0; }
.bh-geo__cap { font: 400 13px/1.5 var(--m); margin: 16px 0 8px !important; min-height: 3em; }
.bh-geo__stage { border: 1px solid var(--ink); background: var(--ground2); aspect-ratio: 620 / 440; }
.bh-geo__s { width: 100%; height: 100%; display: block; }
.bh-geo__s[hidden] { display: none; }

/* ========================================================== COMPOSITION */
.bh-cmp__top .bh-why { max-width: 350px; }
.bh-cmp__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; margin-top: 40px; }
.bh-fig--cmp { padding-right: 20px; border-right: 2px solid var(--ink); }
.bh-cmp__list { padding-left: 28px; }
.bh-cmp__list li { display: grid; grid-template-columns: 180px minmax(0, 1fr) 160px; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.bh-cmp__t { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.bh-cmp__d { font-size: 17px; }
.bh-cmp__list .bh-note { margin-top: 20px !important; }

/* ============================================================== DARKROOM */
.bh-cam .bh-h2 { color: var(--on-dark); }
.bh-cam__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; margin-top: 40px; }
.bh-cam__txt .bh-note { margin-top: 16px !important; }
.bh-cam__txt .bh-debt { margin-top: 12px; }
.bh-cam__words { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin: 32px 0 8px !important; }
.bh-cam__d { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.bh-dg { border: 1px solid #5A5750; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 290px; }
.bh-dg svg { width: 100%; height: auto; margin: auto 0; }
.bh-dg--dc { border-style: dashed; }
.bh-dg__n { font: 700 17px/1.2 var(--d); margin-top: auto !important; }
.bh-crop__field { position: relative; height: 140px; background: repeating-linear-gradient(135deg, rgba(236,230,218,.14) 0 1px, transparent 1px 8px); touch-action: none; }
.bh-crop__frame { position: absolute; width: 40%; height: 72%; left: calc(var(--cx, 50) * 1%); top: calc(var(--cy, 50) * 1%); transform: translate(-50%, -50%); border: 2px solid var(--on-dark); cursor: grab; }
.bh-crop__ctl { display: flex; flex-wrap: wrap; gap: 4px; }
.bh-crop__ctl .bh-btn { border-color: var(--on-dark2); color: var(--on-dark); min-height: 44px; }
.bh-crop__ctl .bh-btn:hover { background: #2A2925; color: var(--on-dark) !important; }
.bh-crop__cap { font: 400 12px/1.4 var(--m); min-height: 2.8em; }

/* ============================================================= MATERIAL */
.bh-mats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
.bh-mats__s { height: 182px; border: 1px solid var(--ink); }
.bh-mats figcaption { font-size: 20px; font-weight: 700; margin-top: 8px; }
.bh-mats--steel { background: repeating-linear-gradient(90deg, #7E838C 0 2px, #9DA2AA 2px 5px, #6C7179 5px 6px); }
.bh-mats--glass { background: #C9D4D1; position: relative; }
.bh-mats--glass::before, .bh-mats--glass::after { content: ""; position: absolute; border: 1px solid #6C7A77; background: rgba(236,242,240,.5); }
.bh-mats--glass::before { left: 18%; top: 14%; width: 56%; height: 60%; }
.bh-mats--glass::after { left: 34%; top: 30%; width: 50%; height: 56%; background: rgba(160,185,178,.45); }
.bh-mats--wood { background: repeating-linear-gradient(170deg, #B7834F 0 6px, #A56F3E 6px 9px, #C28E58 9px 14px); }
.bh-mats--textile { background: repeating-linear-gradient(0deg, rgba(90,70,40,.45) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(90,70,40,.45) 0 1px, transparent 1px 7px), #D9C9A3; }
.bh-mats--paper { background: #F3EFE5; position: relative; }
.bh-mats--paper::before { content: ""; position: absolute; left: 8%; right: 8%; top: 12%; height: 2px; background: var(--ink); box-shadow: 0 10px 0 -0px var(--ink); width: 76%; }
.bh-mats--photographic { background: #1C1B18; position: relative; }
.bh-mats--photographic::before { content: ""; position: absolute; left: 30%; top: 26%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ECE6DA; }
.bh-mats--photographic::after { content: ""; position: absolute; left: 52%; top: 50%; width: 30%; height: 17%; background: #CFC6B4; }
.bh-mat > .bh-lab { margin-top: 12px !important; }
.bh-wm__h { display: flex; align-items: center; gap: 24px; margin-top: 56px !important; }
.bh-wm__arr { width: 116px; height: 2px; background: var(--ink); position: relative; flex: none; }
.bh-wm__arr::after { content: ""; position: absolute; right: -2px; top: -6px; width: 12px; height: 12px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.bh-wm { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 24px !important; border: 2px solid var(--verd); }
.bh-wm__i { display: flex; flex-direction: column; gap: 16px; padding: 14px; min-height: 206px; border-right: 1px solid var(--ink2); }
.bh-wm__i:last-child { border-right: 0; }
.bh-wm__i--code { background: var(--dark); color: var(--on-dark); }
.bh-wm__k { font-size: 18px; font-weight: 800; text-transform: uppercase; }
.bh-wm__v { flex: 1; display: flex; align-items: center; }
.bh-wm__d { font: 400 12px/1.4 var(--m); }
.bh-wm__aa { font-size: 32px; font-weight: 800; }
.bh-wm__img { width: 100%; height: 60px; background: repeating-linear-gradient(135deg, rgba(26,25,22,.25) 0 1px, transparent 1px 7px), #D9D2C3; }
.bh-wm__vp { display: flex; align-items: flex-end; gap: 4px; } .bh-wm__vp i { display: block; border: 1px solid var(--ink); } .bh-wm__vp i:first-child { width: 52px; height: 36px; } .bh-wm__vp i:last-child { width: 26px; height: 46px; }
.bh-wm__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; background: var(--ink); color: var(--ground); font-weight: 700; }
.bh-wm__time { width: 100%; height: 6px; background: var(--rule); } .bh-wm__time i { display: block; width: 62%; height: 100%; background: var(--ink); }
.bh-wm__data { font-size: 30px; font-weight: 400; letter-spacing: -.02em; }
.bh-wm__code { font: 400 12px/1.4 var(--m); }
.bh-mat > .bh-lede { margin-top: 24px !important; }

/* ============================================================= FUNCTION */
.bh-fn__g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; margin-top: 32px; align-items: start; }
.bh-fn__g .bh-note { margin-top: 20px !important; }
.bh-unrel { background: var(--dark); color: var(--on-dark); padding: 24px 20px; }
.bh-unrel .bh-lab, .bh-unrel .bh-cb { color: var(--on-dark2); }
.bh-unrel__l { font-size: 20px; line-height: 1.4; margin: 10px 0 !important; }
.bh-unrel__l s { text-decoration-thickness: 1.5px; }
.bh-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ink); }
.bh-pick__q > p { font-size: 18px; line-height: 1.4; margin: 14px 0 20px !important; }
.bh-pick__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); background: transparent; font: 600 14px/1 var(--d); }
.bh-chip[aria-pressed="true"] { background: var(--ink); color: var(--ground) !important; }
.bh-pick__a { border: 2px solid var(--verd); padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.bh-pick__n { font: 500 12px/1.4 var(--m); color: var(--verd); margin-bottom: 12px !important; }
.bh-pick__k { font: 400 12px/1.4 var(--m); margin-top: 10px !important; }
.bh-pick__v { font-size: 20px; line-height: 1.25; }
.bh-pick__v--b { font-weight: 700; }
.bh-pick__a .bh-lab { margin-top: 16px !important; }

/* =========================================================== NEIGHBOURS */
.bh-lin { margin-top: 40px; }
.bh-lin__h { width: 100%; height: auto; display: block; }
.bh-lin__v { display: none; }
.bh-lin figcaption { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bh-xr { display: inline-block; font: 400 11px/1.4 var(--m); border: 1px solid var(--ink); padding: 2px 5px; }
.bh-cmpr { display: grid; grid-template-columns: 1fr 1fr; margin-top: 32px; border-top: 2px solid var(--ink); }
.bh-cmpr > div { padding: 24px 28px 24px 0; }
.bh-cmpr > div + div { border-left: 1px solid var(--ink); padding-left: 28px; }
.bh-cmpr__h { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 10px !important; }
.bh-cmpr p { font-size: 18px; line-height: 1.5; }
.bh-go { font-weight: 700; font-size: 17px; }
.bh-nb > .bh-note { margin-top: 16px !important; max-width: none; }
.bh-nb3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--ink); }
.bh-nb3__h { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px !important; }
.bh-nb3 p:not(.bh-note) { font-size: 17px; line-height: 1.45; }
.bh-nb3 p + p, .bh-nb3 .bh-debt { margin-top: 10px !important; }
.bh-idx { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--ink); }
.bh-idx ul { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 0 32px; }
.bh-idx a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.bh-idx__t { font-size: 24px; letter-spacing: -.01em; }
.bh-idx__s { font: 400 12px/1 var(--m); white-space: nowrap; }

/* ============================================================ TEN AREAS */
.bh-areas__top { display: flex; align-items: center; gap: 28px; }
.bh-ring--build { width: 120px; height: 120px; flex: none; }
.bh-areas__top .bh-kick { margin-bottom: 8px !important; }
.bh-areas__pre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--ink); }
.bh-legend { font: 400 12px/1.5 var(--m); }
.bh-legend div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 4px 0; }
.bh-legend dt { font-weight: 500; }
.bh-areas__hd { display: grid; grid-template-columns: 194px minmax(0, 1fr) 300px; gap: 24px; font: 400 12px/1 var(--m); text-transform: uppercase; margin-top: 40px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.bh-area { border-bottom: 1px solid var(--ink); padding: 22px 0 28px; display: grid; grid-template-columns: 194px minmax(0, 1fr); column-gap: 24px; }
.bh-area summary { list-style: none; display: flex; flex-direction: column; gap: 4px; cursor: default; pointer-events: none; }
.bh-area summary::-webkit-details-marker { display: none; }
.bh-area__n { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.bh-area__p { font: 500 12px/1.5 var(--m); display: flex; flex-direction: column; }
.bh-area__pn { font-weight: 400; color: var(--ink2); }
.bh-area__b { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
.bh-rules { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bh-rules td:nth-child(2) { width: 24%; } .bh-rules td:nth-child(3) { width: 26%; }
.bh-rules th, .bh-rules td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); }
.bh-rules th[scope="row"] { font-size: 17px; font-weight: 400; line-height: 1.3; width: 50%; }
.bh-rules td { font: 400 11px/1.45 var(--m); }
.bh-sig { display: block; }
.bh-sig__sc { color: var(--ink2); }
.bh-area__q { font-size: 14px; line-height: 1.5; margin-top: 10px !important; }
.bh-area__d { margin-top: 8px !important; display: flex; flex-wrap: wrap; gap: 4px; }
.bh-area__tr { border: 1px dashed var(--verd); background: var(--ground2); padding: 12px; font-size: 15px; line-height: 1.4; }
.bh-area__tr .bh-lab { margin-top: 8px !important; }
.bh-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.bh-screen p:not(.bh-lab) { font-size: 14px; line-height: 1.5; }
.bh-screen p + p { margin-top: 8px !important; }

/* ========================================================= TRANSLATIONS */
.bh-tr__banner { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; background: var(--verd); color: #F4F0E8; padding: 26px; margin-top: 32px; }
.bh-tr__banner p:last-child { font-size: 19px; line-height: 1.45; }
.bh-tr__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.bh-spec { border: 1px dashed var(--verd); background: var(--ground2); padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bh-spec--btn { grid-column: 1 / 8; } .bh-spec--nav { grid-column: 8 / 13; } .bh-spec--mod { grid-column: 1 / 7; } .bh-spec--form { grid-column: 7 / 13; } .bh-spec--img { grid-column: 1 / 13; }
.bh-spec__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bh-spec__hd h3 { font-size: 22px; font-weight: 700; }
.bh-from { font-size: 11px; line-height: 1.5; margin-top: auto !important; }
.bh-btns { display: flex; flex-wrap: wrap; gap: 16px 12px; }
.bh-btns li { display: flex; flex-direction: column; gap: 6px; }
.bh-btns__l { font: 400 11px/1 var(--m); }
.bh-enrol { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; background: var(--ink); color: var(--ground); font-weight: 700; font-size: 16px; border: 2px solid var(--ink); }
.bh-enrol.is-hover { padding-right: 28px; }
.bh-enrol.is-focus { outline: 3px solid var(--verd); outline-offset: 3px; }
.bh-enrol.is-pressed { background: var(--ground2); color: var(--ink); border-top-width: 6px; }
.bh-enrol.is-disabled { background: transparent; color: var(--ink2); border: 2px dashed var(--ink2); }
.bh-snav { border-top: 2px solid var(--ink); }
.bh-snav li { display: flex; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--rule); font-size: 18px; }
.bh-snav li[aria-current] { border-left: 8px solid var(--ink); font-size: 21px; padding-left: 10px; }
.bh-snav span { font: 400 11px/1 var(--m); }
.bh-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bh-mods__ev { border-top: 6px solid var(--ink); padding-top: 12px; }
.bh-mods__d { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.bh-mods__ph { border-top: 1px solid var(--ink); padding-top: 10px; }
.bh-hatch { background: repeating-linear-gradient(135deg, rgba(26,25,22,.22) 0 1px, transparent 1px 6px), #D6CEBF; }
.bh-mods__ph .bh-hatch { height: 90px; }
.bh-mods__t { font-weight: 700; font-size: 17px; margin-top: 8px !important; }
.bh-mods__s { font: 400 11px/1.4 var(--m); }
.bh-form__g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.bh-form__l { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.bh-form__i { display: block; border: 2px solid var(--ink); background: #fff; padding: 12px; font-size: 16px; min-height: 48px; }
.bh-form__f.is-err .bh-form__i { border-width: 4px; }
.bh-form__e { display: block; font: 400 11px/1.4 var(--m); margin-top: 6px; }
.bh-imod { position: relative; display: grid; grid-template-columns: 40% minmax(0, 1fr); min-height: 280px; }
.bh-imod__ph { grid-row: 1 / 3; display: flex; align-items: flex-end; padding: 10px; }
.bh-imod__h { grid-column: 2; align-self: end; margin-left: -60px !important; background: var(--ground2); padding: 8px 12px; font-size: clamp(36px, 5.3cqi, 64px); font-weight: 800; letter-spacing: -.04em; line-height: .92; border-top: 2px solid var(--ink); }
.bh-imod__n { grid-column: 2; font: 400 11px/1.4 var(--m); padding: 8px 12px; }

/* =============================================================== MOTION */
.bh-stage { position: relative; background: var(--dark); color: var(--on-dark); aspect-ratio: 1096 / 420; margin-top: 32px; overflow: hidden; }
.bh-stage__l, .bh-stage__r { position: absolute; top: 16px; font: 400 11px/1 var(--m); color: var(--on-dark); z-index: 2; }
.bh-stage__l { left: 20px; } .bh-stage__r { right: 16px; }
.bh-stage__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bh-stage__axis { stroke-dasharray: 1200; stroke-dashoffset: 0; }
.bh-stage__v { position: absolute; top: 9.5%; bottom: 4.8%; width: 1px; background: var(--ochre); left: var(--ax, 16.4%); }
.bh-stage__plane { position: absolute; background: var(--on-dark); left: var(--px, 10.9%); top: var(--py, 59.5%); width: var(--pw, 10.9%); height: var(--ph, 19%); transform: rotate(var(--pr, 0deg)); }
.bh-stage[data-at="1"] { --px: 47.4%; --py: 35.7%; --pw: 16.4%; --ph: 28.6%; --pr: -12deg; --ax: 55.6%; }
.bh-stage[data-at="2"] { --px: 82.1%; --py: 16.7%; --pw: 8.2%; --ph: 42.9%; --pr: 0deg; --ax: 86.2%; }
@media (prefers-reduced-motion: no-preference) {
  .bh-stage__plane { transition: left 600ms cubic-bezier(.6,0,.2,1), top 600ms cubic-bezier(.6,0,.2,1), width 600ms cubic-bezier(.6,0,.2,1), height 600ms cubic-bezier(.6,0,.2,1), transform 600ms cubic-bezier(.6,0,.2,1); }
  .bh-stage__v { transition: left 600ms cubic-bezier(.6,0,.2,1); }
  .bh-stage.is-moving .bh-stage__axis { animation: bh-draw 600ms cubic-bezier(.6,0,.2,1); }
  @keyframes bh-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
}
.bh-mo__g { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; margin-top: 20px; }
.bh-spec-l { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bh-spec-l div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 0; }
.bh-spec-l div + div { border-top: 1px solid var(--rule); }
.bh-spec-l dt { font: 400 11px/1.5 var(--m); }
.bh-spec-l dd { font-size: 16px; line-height: 1.35; }

/* ======================================================= COUNTEREXAMPLE */
.bh-cx__brief { font: 400 13px/1.5 var(--m); }
.bh-cx__ctl { margin: 20px 0 24px; }
.bh-cx__passes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bh-cx__p, .bh-cx__two { transition: opacity 200ms; }
.bh-cx__p { display: flex; flex-direction: column; gap: 10px; }
.bh-cx [data-lit="false"] { opacity: .45; }
.bh-cx__h { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.bh-cx__q { list-style: decimal !important; padding-left: 18px !important; font: 400 12px/1.5 var(--m); }
.bh-pst { position: relative; overflow: hidden; border: 1px solid var(--ink); }
.bh-pst--s { height: 340px; background: #fff; }
.bh-pst__tri { position: absolute; inset: 0; }
.bh-pst__c { position: absolute; left: 7%; top: 9%; width: 37%; aspect-ratio: 1; border-radius: 50%; }
.bh-pst__t { position: absolute; right: 5%; top: 32%; width: 34%; height: auto; }
.bh-pst__q { position: absolute; left: 23%; top: 53%; width: 26%; aspect-ratio: 1; }
.bh-pst__tri--pale > * { opacity: .35; }
.bh-pst__w { position: absolute; left: 20px; bottom: 34px; font-size: 26px; font-weight: 500; line-height: 1; }
.bh-pst__w--pale { opacity: .5; }
.bh-pst__f { position: absolute; left: 20px; bottom: 12px; font-size: 9px; }
.bh-pin { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 11px/26px var(--m); text-align: center; }
.bh-pst--plain { background: var(--ground2); padding: 20px; display: flex; flex-direction: column; color: var(--ink2); }
.bh-pst__list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.bh-pst__ghost { width: 100%; height: 110px; margin-top: auto; }
.bh-ghost { fill: none; stroke: #8C877C; stroke-dasharray: 3 4; }
.bh-cx__two { margin-top: 40px; padding-top: 26px; border-top: 2px solid var(--ink); }
.bh-cx__twohd { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.bh-cx__twohd .bh-h2--m { margin-top: 0 !important; }
.bh-cx__twohd .bh-note { max-width: 300px; }
.bh-cx__res { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
.bh-res { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bh-res .bh-cx__h { font-size: 24px; }
.bh-res .bh-pst { container: pst / inline-size; aspect-ratio: 534 / 560; }
.bh-pst--a { background: var(--ground2); }
.bh-pst__img { position: absolute; left: 0; top: 0; width: 44%; height: 58%; display: flex; align-items: flex-end; padding: 8px; }
.bh-pst__clock { position: absolute; right: 5%; top: 4.6%; width: 22.5%; }
.bh-pst__time { position: absolute; right: 5%; top: 28%; font-size: 3.8cqi; font-weight: 700; }
.bh-pst__ax { position: absolute; left: 44%; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.bh-pst--a .bh-pst__date { position: absolute; left: 3.4%; top: 61.8%; font-size: 24cqi; font-weight: 800; letter-spacing: -.05em; line-height: .8; }
.bh-pst__title { position: absolute; left: calc(44% + 3.4%); right: 3.4%; top: 39%; font-size: 5.6cqi; font-weight: 700; line-height: 1.02; }
.bh-pst--a .bh-pst__ev { position: absolute; left: calc(44% + 3.4%); top: 52.8%; font-size: 3cqi; }
.bh-pst--a .bh-pst__room { position: absolute; left: 3.4%; bottom: 3.6%; font-size: 3.4cqi; font-weight: 700; }
.bh-pst--b { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.bh-pst__mat { position: absolute; left: -1.5%; top: -5.4%; font-size: 33cqi; font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.bh-pst__sp { position: absolute; left: 4%; right: 4%; top: 44.6%; display: flex; justify-content: space-between; font-size: 10cqi; font-weight: 200; font-stretch: 125%; font-variation-settings: "wdth" 125; }
.bh-pst__sp i { font-style: normal; }
.bh-pst__line { position: absolute; inset: 0; width: 100%; height: 100%; }
.bh-pst--b .bh-pst__ev { position: absolute; left: 5.6%; top: 84%; font-size: 2.4cqi; }
.bh-pst__dt { position: absolute; right: 6.7%; top: 64.6%; text-align: right; display: flex; flex-direction: column; }
.bh-pst__dt b { font-size: 8.2cqi; font-weight: 800; letter-spacing: -.03em; line-height: .9; }
.bh-pst__dt i { font-style: normal; font-size: 3.7cqi; font-weight: 700; }
.bh-pst--b .bh-pst__room { position: absolute; right: 5.6%; bottom: 4.6%; border: 2px solid var(--on-dark); padding: 1.1cqi 2.2cqi; font-size: 3cqi; font-weight: 700; }
.bh-ans { width: 100%; border-collapse: collapse; }
.bh-ans th, .bh-ans td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
.bh-ans th { font-size: 15px; font-weight: 400; width: 30%; }
.bh-ans td:nth-child(2) { font-size: 15px; line-height: 1.35; }
.bh-ans td.bh-cb { width: 26%; }
.bh-less { margin-top: 56px; }
.bh-less__h { font-size: clamp(56px, 11.9cqi, 144px); line-height: .88; letter-spacing: -.05em; }
.bh-less__h b { font-weight: 800; }
.bh-less__h span { font-weight: 200; }
.bh-less .bh-lab { margin-top: 20px !important; }

/* ============================================================== CLOSING */
.bh-close { padding-block: 80px 96px; }
.bh-close__h { font-size: clamp(56px, 12.4cqi, 150px); line-height: .84; letter-spacing: -.05em; color: var(--on-dark); }
.bh-close__h b { display: block; font-weight: 800; }
.bh-close__h span { display: block; font-weight: 200; margin: 28px 0 0 27.5% !important; }
.bh-close__t { margin: 56px 0 0 27.5%; max-width: 580px; }
.bh-close__t p:first-child { font-size: 20px; line-height: 1.5; }
.bh-close__t .bh-lab { margin-top: 40px !important; }

/* ============================================================== SOURCES */
.bh-src__h { font-size: clamp(56px, 8.6cqi, 104px); line-height: .86; letter-spacing: -.045em; }
.bh-src__h span { font-weight: 200; margin-right: .3em; }
.bh-src__h b { font-weight: 800; }
.bh-counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--ink); margin-top: 32px; }
.bh-counts div { padding: 16px 12px; border-right: 1px solid var(--ink); }
.bh-counts div:last-child { border-right: 0; }
.bh-counts dt { font: 400 11px/1.4 var(--m); }
.bh-counts dd { font-size: 28px; font-weight: 800; margin-top: 8px; }
.bh-counts--debt { background: var(--debt-bg); color: var(--debt-tx); }
.bh-src > .bh-lab { margin-top: 12px !important; }
.bh-srcs { margin-top: 28px; border-top: 2px solid var(--ink); }
.bh-src__r { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr) 220px; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.bh-src__t { font-size: 16px; font-weight: 700; line-height: 1.25; }
.bh-src__w { font: 400 12px/1.5 var(--m); }
.bh-src__d { display: flex; flex-wrap: wrap; gap: 4px; align-content: start; }
.bh-src > .bh-note { margin-top: 20px !important; max-width: none; }
.bh-src__two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; }
.bh-src__two .bh-why { max-width: none; }
.bh-debtlist { max-width: none; margin-top: 20px; }
.bh-debtlist ul { list-style: disc !important; padding-left: 18px !important; columns: 2; column-gap: 40px; }
.bh-debtlist li { break-inside: avoid; margin-bottom: 6px; }
.bh-src__links { font: 400 12px/1.5 var(--m); margin-top: 24px !important; }
.bh-src__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px !important; }

/* ========================================================= DOCK + SHEETS */
.bh-dock { position: fixed; z-index: 30; top: 72px; right: 24px; width: 72px; height: 72px; border-radius: 50%; border: 0; padding: 0; background: var(--ground); box-shadow: 0 0 0 1px var(--ink); }
.bh-dock[hidden] { display: none; }
.bh-sheet { border: 2px solid var(--ink); background: var(--ground); color: var(--ink); padding: 0; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: 88px 24px auto auto; font-family: var(--d); }
.bh-sheet::backdrop { background: rgba(18, 18, 16, .45); }
.bh-sheet__b { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.bh-sheet__h { font: 500 12px/1 var(--m); text-transform: uppercase; }
.bh-sheet__ring { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.bh-ring--sheet { width: 120px; height: 120px; }
.bh-sheet__targets { display: flex; flex-direction: column; gap: 4px; }
.bh-sheet__t { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--ink); font-weight: 600; text-decoration: none; }
.bh-sheet__t[aria-current="true"] { background: var(--ink); color: var(--ground) !important; }
.bh-sheet__list { border-top: 1px solid var(--ink); }
.bh-sheet__list a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 16px; }
.bh-sheet__list li[data-ring="workshops"] a { padding-left: 16px; }
.bh-sheet__list li[data-ring="build"] a { padding-left: 32px; }
.bh-sheet__why { font: 400 12px/1.5 var(--m); }
.bh-sheet__why p + p { margin-top: 8px; }
.bh-sheet--card .bh-card { position: static; min-height: 0; }

/* ================================================================ TABLET */
@container bh (max-width: 1039px) {
  .bh-page main { --pad: 32px; }
  .bh-hero, .bh-sec { --pad: 32px; }
  .bh-field { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(64px, auto); }
  .bh-card { grid-area: var(--gpt); }
  .bh-field__cap { grid-area: 9 / 1 / 10 / 9; margin-top: 8px; }
  .bh-hero__h { font-size: 15cqi; }
  .bh-hero__head { grid-template-columns: minmax(0, 1fr) 190px; column-gap: 24px; padding-right: 0; min-height: 0; }
  .bh-nav { position: static; grid-column: 2; grid-row: 1 / span 3; max-width: 190px; }
  .bh-nav__ring { width: 140px; height: 140px; }
  .bh-comp__g { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); }
  .bh-comp__short li { grid-template-columns: 110px minmax(0, 1fr); }
  .bh-tiers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bh-tier--necessary { grid-column: span 2; border-bottom: 1px solid var(--ink); }
  .bh-tier--principles { grid-column: span 4; border-bottom: 1px solid var(--ink); border-right: 0; }
  .bh-tier--strong, .bh-tier--common, .bh-tier--unreliable { grid-column: span 2; }
  .bh-per__refs { grid-template-columns: 1fr; }
  .bh-per__vert b { font-size: 24px; } .bh-per__vert span { font-size: 13px; }
  .bh-per__in { padding: 24px 18px; }
  .bh-deck__i[data-card] { grid-column: span 6; grid-row: auto; }
  .bh-deck__i[data-card="textiles"], .bh-deck__i[data-card="painting"] { grid-column: span 6; }
  .bh-deck.is-flat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bh-ty__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-fig--poelzig { grid-column: 1 / -1; max-width: 60%; }
  .bh-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-band { grid-template-columns: 1fr 1fr; gap: 24px; }
  .bh-band__arr { display: none; }
  .bh-geo__g { grid-template-columns: 1fr; }
  .bh-geo__ctl .bh-seg { flex-direction: row; }
  .bh-cmp__list li { grid-template-columns: 130px minmax(0, 1fr); }
  .bh-cmp__list li .bh-cb { grid-column: 2; }
  .bh-cam__g { grid-template-columns: 1fr; }
  .bh-mats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-wm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bh-wm__i { border-bottom: 1px solid var(--ink2); }
  .bh-fn__g, .bh-pick { gap: 32px; }
  .bh-nb3 { grid-template-columns: 1fr 1fr; }
  .bh-idx { grid-template-columns: 1fr; gap: 16px; }
  .bh-area { grid-template-columns: 150px minmax(0, 1fr); }
  .bh-area__b { grid-template-columns: 1fr; }
  .bh-areas__hd { grid-template-columns: 150px minmax(0, 1fr); }
  .bh-areas__hd span:last-child { display: none; }
  .bh-spec--btn, .bh-spec--nav, .bh-spec--mod, .bh-spec--form { grid-column: 1 / -1; }
  .bh-mo__g { grid-template-columns: 1fr; }
  .bh-src__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bh-src__d { grid-column: 1 / -1; }
  .bh-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-counts div:nth-child(3) { border-right: 0; }
  .bh-counts div:nth-child(-n+3) { border-bottom: 1px solid var(--ink); }
  .bh-close__h span, .bh-close__t { margin-left: 12% !important; }
}

/* ================================================================ MOBILE */
@container bh (max-width: 699px) {
  .bh-hero, .bh-sec { --pad: 16px; }
  .bh-sec { padding-block: 56px; }
  .bh-sm-only { display: flex !important; } .bh-sm-inl { display: inline !important; } .bh-tabs.bh-sm-only { display: grid !important; }
  .bh-lg-only, .bh-lg-inl { display: none !important; }
  .bh-kick { font-size: 12px; margin-bottom: 12px !important; }
  .bh-h2 { font-size: clamp(40px, 12cqi, 56px); }
  .bh-hero__head { grid-template-columns: minmax(0, 1fr); margin-top: 24px; padding-right: 0; }
  .bh-nav { display: none; }
  .bh-hero__h { font-size: 22cqi; margin-top: 8px !important; }
  .bh-hero__sub { font-size: 7.6cqi; margin-top: 16px !important; }
  .bh-field { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(54px, auto); gap: 6px; margin-top: 24px; }
  .bh-card { grid-area: var(--gpm); padding: 6px; }
  .bh-card .bh-lab, .bh-card__s { display: none; }
  .bh-card--stereo .bh-lab { display: block; font-size: 9px; }
  .bh-card__triad { width: 60px; height: 26px; }
  .bh-card__n { font-size: 12px; }
  .bh-card__d .bh-debt { font-size: 9px; padding: 1px 3px; }
  .bh-card__open { display: block; position: absolute; inset: 0; width: 100%; background: transparent; border: 0; }
  .bh-field__cap { grid-area: auto; grid-column: 1 / -1; font-size: 11px; }
  .bh-intro { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  .bh-facts div { grid-template-columns: 90px 1fr; }
  .bh-read__g { grid-template-columns: 1fr; gap: 12px; }
  .bh-comp__g { grid-template-columns: 1fr; border-top: 0; }
  .bh-comp__hist { padding: 0; border: 0; }
  .bh-funnel { border: 0; padding: 20px 0 0; }
  .bh-funnel__v { display: none; }
  .bh-funnel__h { display: block; width: 100%; height: 80px; }
  .bh-comp__short { padding: 12px 0 0; }
  .bh-comp__short li { grid-template-columns: 1fr; gap: 4px; }
  .bh-comp__ic { display: none; }
  .bh-comp__end { grid-template-columns: 1fr; gap: 16px; }
  .bh-tiers { display: flex; flex-direction: column; border: 0; }
  .bh-tier { border: 0; border-top: 1px solid var(--ink); padding: 12px 0; }
  .bh-tier--necessary { order: 1; border: 2px solid var(--ink); padding: 14px; background: var(--card); }
  .bh-tier--strong { order: 2; } .bh-tier--principles { order: 3; } .bh-tier--common { order: 4; } .bh-tier--unreliable { order: 5; padding: 12px; }
  .bh-tier summary { flex-direction: row; flex-wrap: wrap; align-items: center; cursor: pointer; min-height: 44px; gap: 8px; }
  .bh-tier summary::before { content: "▸"; } .bh-tier[open] summary::before { content: "▾"; }
  .bh-tier__c { display: inline; }
  .bh-tier__dash { display: none; }
  .bh-tier__none { font: 400 20px/1.25 var(--d); }
  .bh-per__top { flex-direction: column; align-items: flex-start; }
  .bh-per__strip { flex-direction: column; min-height: 0; border: 0; }
  .bh-per__p { display: grid; grid-template-columns: 44px minmax(0, 1fr); border: 1px solid var(--ink) !important; border-bottom-width: 0 !important; }
  .bh-per__p--w { min-height: 360px; } .bh-per__p--d { min-height: 420px; background-size: 60px 100%; } .bh-per__p--b { min-height: 60px; border-bottom-width: 1px !important; }
  .bh-per__yr { display: flex; flex-direction: column; justify-content: space-between; font: 400 11px/1 var(--m); padding: 8px 4px; border-right: 1px solid var(--ink); background: var(--ground); color: var(--ink); }
  .bh-per__in { padding: 16px 14px; }
  .bh-per__n { font-size: 14cqi; }
  .bh-per__k { font-size: 22px !important; }
  .bh-per__p--b .bh-per__in { padding: 12px 14px; align-items: flex-start; justify-content: center; }
  .bh-per__bh { position: static !important; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-size: 22px; font-weight: 800; font-stretch: 62%; font-variation-settings: "wdth" 62; letter-spacing: -.01em; }
  .bh-per__vert, .bh-per__closed { display: none; }
  .bh-ruler { display: none; }
  .bh-per__after { text-align: left; margin-top: 12px !important; }
  .bh-per__notes { grid-template-columns: 1fr; }
  .bh-ws__top { flex-direction: column; align-items: flex-start; }
  .bh-deck { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-top: 24px; padding-bottom: 8px; scrollbar-width: thin; }
  .bh-deck__i[data-card] { flex: 0 0 300px; scroll-snap-align: start; }
  .bh-deck.is-flat .bh-deck__i { flex: 0 0 300px; }
  .bh-w { min-height: 340px; }
  .bh-deck__nav { align-items: center; justify-content: space-between; margin-top: 12px; }
  .bh-deck__n { font: 400 13px/1 var(--m); }
  .bh-ws__ctl.bh-sm-only { max-width: none; margin-top: 12px; }
  .bh-ty__top, .bh-col__top, .bh-cmp__top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bh-ty__figs { grid-template-columns: 1fr; }
  .bh-fig--universal .bh-slot { aspect-ratio: 4 / 3; }
  .bh-fig--poelzig { max-width: none; } .bh-fig--poelzig .bh-slot { max-height: 480px; width: auto; aspect-ratio: 3 / 4; margin: 0 auto; }
  .bh-myth__hd { display: none; }
  .bh-myth__r { grid-template-columns: 1fr; gap: 6px; }
  .bh-swatches { grid-template-columns: 1fr 1fr; }
  .bh-swatch--sur { grid-column: 1 / -1; }
  .bh-swatch__c { height: 100px; }
  .bh-band { grid-template-columns: 1fr; padding: 18px; }
  .bh-band__arr { display: block; text-align: left; transform: rotate(90deg); width: 40px; }
  .bh-geo__g { gap: 16px; }
  .bh-geo__ctl { order: 2; }
  .bh-geo__ctl .bh-seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bh-geo__ctl .bh-seg__b { padding: 0 2px; font-size: 12px; justify-content: center; text-align: center; margin: 0 -1px 0 0; }
  .bh-geo__stage { order: 1; aspect-ratio: auto; height: 290px; }
  .bh-geo__s text { display: none; }
  .bh-cmp__g { grid-template-columns: 1fr; }
  .bh-fig--cmp { padding: 0 0 20px; border: 0; }
  .bh-cmp__list { padding-left: 22px; margin-left: 24px; border-left: 2px solid var(--ink); }
  .bh-cmp__list li { grid-template-columns: 1fr; gap: 2px; }
  .bh-cmp__list li .bh-cb { grid-column: 1; }
  .bh-cam__d { grid-template-columns: 1fr 1fr; }
  .bh-dg { min-height: 171px; padding: 10px; }
  .bh-crop { grid-column: 1 / -1; }
  .bh-cam__words { font-size: 26px; }
  .bh-mats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-mats__s { height: 100px; }
  .bh-mats figcaption { font-size: 15px; }
  .bh-wm__h { gap: 12px; flex-wrap: wrap; } .bh-wm__arr { width: 48px; }
  .bh-wm { grid-template-columns: 1fr 1fr; }
  .bh-wm__i--code { grid-column: 1 / -1; }
  .bh-wm__i { min-height: 150px; border-bottom: 1px solid var(--ink2); }
  .bh-fn__g { grid-template-columns: 1fr; gap: 24px; }
  .bh-pick { grid-template-columns: 1fr; }
  .bh-lin__h { display: none; } .bh-lin__v { display: block; width: 100%; height: auto; max-width: 358px; }
  .bh-cmpr { grid-template-columns: 1fr; }
  .bh-cmpr > div + div { border-left: 0; border-top: 1px solid var(--ink); padding-left: 0; }
  .bh-nb3 { grid-template-columns: 1fr; }
  .bh-idx ul { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .bh-idx__t { font-size: 20px; }
  .bh-areas__top { gap: 16px; } .bh-ring--build { width: 72px; height: 72px; }
  .bh-areas__pre { grid-template-columns: 1fr; gap: 16px; }
  .bh-legend div { grid-template-columns: 110px 1fr; }
  .bh-areas__hd { display: none; }
  .bh-area { grid-template-columns: 1fr; padding: 0; }
  .bh-area summary { pointer-events: auto; cursor: pointer; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 56px; padding: 12px 0; }
  .bh-area summary::before { content: "▸"; font-size: 14px; } .bh-area[open] summary::before { content: "▾"; }
  .bh-area__n { font-size: 22px; }
  .bh-area__b { padding-bottom: 20px; }
  .bh-rules, .bh-rules tbody, .bh-rules tr, .bh-rules th, .bh-rules td { display: block; }
  .bh-rules tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .bh-rules th, .bh-rules td { border: 0; padding: 0; width: auto !important; }
  .bh-rules td { display: inline; }
  .bh-rules td + td::before { content: " · "; }
  .bh-sig { display: inline; }
  .bh-screen { grid-template-columns: 1fr; }
  .bh-tr__banner { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .bh-tr__g { display: flex; flex-direction: column; }
  .bh-spec { padding: 16px; }
  .bh-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .bh-snav li { padding: 12px; }
  .bh-mods { grid-template-columns: 1fr; }
  .bh-form__g { grid-template-columns: 1fr; }
  .bh-imod { grid-template-columns: 1fr; min-height: 0; }
  .bh-imod__ph { grid-row: auto; height: 180px; }
  .bh-imod__h, .bh-imod__n { grid-column: 1; margin-left: 0 !important; }
  .bh-stage { aspect-ratio: 358 / 260; }
  .bh-stage__l { left: 10px; top: 10px; right: 10px; }
  .bh-stage__r { top: auto; bottom: 10px; right: 10px; }
  .bh-mo__g { grid-template-columns: 1fr; }
  .bh-spec-l div { grid-template-columns: 1fr; gap: 2px; }
  .bh-cx__ctl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bh-cx__passes { display: block; }
  .bh-cx[data-step="0"] .bh-cx__p:not([data-p="0"]), .bh-cx[data-step="1"] .bh-cx__p:not([data-p="1"]), .bh-cx[data-step="2"] .bh-cx__p:not([data-p="2"]) { display: none; }
  .bh-cx:is([data-step="3"], [data-step="4"]) .bh-cx__passes { display: none; }
  .bh-cx:not([data-step="3"]):not([data-step="4"]) .bh-cx__two { display: none; }
  .bh-cx [data-lit] { opacity: 1 !important; }
  .bh-cx__two { margin-top: 0; padding-top: 0; border-top: 0; }
  .bh-cx__twohd { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bh-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .bh-tabs button { min-height: 48px; border: 1px solid var(--ink); background: transparent; font: 600 14px/1 var(--d); }
  .bh-tabs button[aria-selected="true"] { background: var(--ink); color: var(--ground) !important; }
  .bh-cx__res { display: block; margin-top: 12px; }
  .bh-res[hidden] { display: none; }
  .bh-less__h { font-size: 11.5cqi; }
  .bh-close__h { font-size: 58px; }
  .bh-close__h span, .bh-close__t { margin-left: 48px !important; }
  .bh-close__h span { margin-top: 16px !important; }
  .bh-close__t { margin-top: 32px; }
  .bh-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-counts div { border-right: 1px solid var(--ink) !important; border-bottom: 1px solid var(--ink); }
  .bh-counts div:nth-child(2n) { border-right: 0 !important; }
  .bh-src__r { grid-template-columns: 1fr; gap: 6px; }
  .bh-src__two { grid-template-columns: 1fr; gap: 0; }
  .bh-debtlist ul { columns: 1; }
  .bh-src__act { flex-direction: column; } .bh-src__act .bh-btn { width: 100%; }
}

/* The hero's own gutter: a container query cannot restyle its container, so
   the hero reads the viewport (rail hidden below 960px). */
@media (max-width: 1279px) { .bh-page main { --pad: 32px; } }
@media (max-width: 767px) { .bh-page main { --pad: 16px; } }

/* Mobile navigator (viewport, because it is fixed to the screen). */
@media (max-width: 699px) {
  .bh-dock { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; width: 56px; height: 56px; }
  .bh-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0 0; border-width: 2px 0 0; max-height: 85vh; }
  .bh-sheet__targets .bh-sheet__t { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .bh-page main *, .bh-page main *::before, .bh-page main *::after { transition: none !important; animation: none !important; }
}

/* Found in research (Design Completion Campaign, 2026-09-29): sourced findings
   set in the room's own mono notes, marked with their label. Kandinsky's
   pairing is drawn in ink outline with the colour named in words, so the
   primaries stay where they belong: in the stereotype specimens. */
.bh-found { margin-top: 14px; }
.bh-found--mat { border-left: 2px solid var(--ink); padding-left: 14px; margin: 18px 0; max-width: 70ch; }
.bh-found--mat .bh-note { margin: 6px 0 0; }
.bh-kq { margin: 14px 0 0; }
.bh-kq svg { width: min(228px, 100%); height: auto; display: block; }
.bh-kq__t { text-anchor: middle; font-size: 11px; }
.bh-kq figcaption { font: 12px/1.5 var(--m); margin-top: 6px; max-width: 46ch; }
.bh-band .bh-kq .bh-o { stroke: var(--on-dark); }
.bh-band .bh-kq .bh-kq__t { fill: var(--on-dark2); }