/* /brand only (ctl_brand adds it). Builds on site.css tokens and components. */
.bk-get{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:24px}
.bk-get p,.bk-note,.bk-fig figcaption{font-size:13px;color:var(--fg-3);text-wrap:pretty}
.bk-toc{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.bk-first{padding-top:32px}
.bk-h3{margin:48px 0 16px}
.bk-note{margin-top:12px}
.bk-panes,.bk-grid3,.bk-brand,.bk-type,.bk-two,.bk-donts{display:grid;gap:12px}
.bk-panes{grid-template-columns:2fr 1fr}
.bk-pane{display:grid;place-items:center;min-height:220px;padding:24px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.on-light{background:#fff}.on-dark{background:#0a0a0a}.on-grey{background:#8f8f8f}
.bk-pane img,.bk-prev img{max-width:100%;height:auto}
.bk-split{display:grid;grid-template-columns:1fr 1.25fr;gap:24px 56px;align-items:start;margin-top:56px}
.bk-split-0{margin-top:0}
.bk-split .h3{margin-bottom:10px}
.bk-split p{color:var(--fg-2)}
.bk-split p+p,.bk-kv+p{margin-top:12px}
.bk-fig,.bk-brand>div,.bk-type>div{padding:16px;border:1px solid var(--line);border-radius:var(--r)}
.bk-fig svg,.bk-donts .bk-d,.bk-mock>svg{display:block;width:100%;height:auto;margin:auto}
.bk-fig figcaption{margin-top:12px}
.bk-cons{max-width:440px}
.bk-d text{font:500 15px var(--mono);fill:var(--fg-2);text-anchor:middle}
.bk-d .l{text-anchor:start}
.bk-d .lt,.bk-d .xl{fill:var(--fg-3)}
.bk-d .in{fill:var(--bg)}
.bk-d .t{fill:var(--bg-2)}
.bk-d .g{fill:none;stroke:var(--line-2);stroke-width:.75}
.bk-d .o,.bk-d .m,.bk-d .q{fill:none;stroke:var(--fg-3)}
.bk-d .q{stroke-dasharray:4 4}
.bk-d .k,.bk-ink,.bk-d .serif,.bk-d .add{fill:var(--fg)}
.bk-d .x{fill:var(--bg-3);stroke:var(--line-2)}
.bk-d .r{fill:var(--line)}
.bk-d .h{stroke:var(--line)}
.bk-d .serif{font:34px Georgia,serif;text-anchor:start}
.bk-d .add{font:600 23px var(--font);text-anchor:start}
.bk-lk{position:relative}
.bk-lk span{position:absolute;right:0;padding-bottom:3px;font:500 12px var(--mono);color:var(--fg-3);transform:translateY(-100%)}
.bk-lk .a{top:34.2%}.bk-lk .b{top:65.8%}
.bk-two{grid-template-columns:2.5fr 1fr}
.bk-kv{margin-bottom:12px}
.bk-kv div{grid-template-columns:72px 1fr}
.bk-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 28px}
.bk-row+.bk-row{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.bk-row span{display:grid;justify-items:center;gap:8px}
.bk-row svg{width:auto;height:auto;margin:0}
.bk-row small,.bk-val small{font:12px var(--mono);color:var(--fg-3)}
.bk-grid3{grid-template-columns:repeat(3,1fr);gap:16px}
.bk-grid3 figcaption,.bk-donts p{display:flex;gap:8px;margin-top:10px;font-size:14px;color:var(--fg-2)}
.bk-grid3 .i,.bk-donts .i{margin-top:3px}
.bk-sm{aspect-ratio:2/1;min-height:0;padding:16px}
.bk-pane.bk-busy{padding:0}
.bk-busy svg{width:100%;height:100%}
.bk-profile,.bk-inline{display:flex;align-items:center;gap:12px;font-size:15px}
.bk-no .i{color:var(--err-text)}
.bk-dl{border:1px solid var(--line);border-radius:var(--r)}
.bk-dl>li{display:grid;grid-template-columns:256px 1fr;gap:24px;padding:20px}
.bk-dl>li+li{border-top:1px solid var(--line)}
.bk-dl p{margin-top:4px;font-size:14px;color:var(--fg-2)}
.bk-prev{display:grid;grid-template-columns:1fr 1fr;align-self:start;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bk-prev span{display:grid;place-items:center;height:96px;padding:8px 6px}
.bk-vars{display:grid;gap:8px;margin-top:14px}
.bk-vars div{display:flex;gap:6px}
.bk-vars dt{flex:none;width:76px;padding-top:6px;font-size:13px;font-weight:500}
.bk-vars dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bk-png{margin-left:6px;font-size:12px;color:var(--fg-3)}
.bk-donts{grid-template-columns:repeat(4,1fr);gap:24px 16px}
.bk-donts .bk-d{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.bk-donts p{font-size:13px}
.bk-brand,.bk-type{grid-template-columns:1fr 1fr;gap:16px}
.bk-brand>div{display:flex;flex-direction:column}.bk-brand .bk-val{margin-top:auto}
.bk-brand p{margin:4px 0 12px;font-size:14px;color:var(--fg-2)}
.bk-big{display:block;width:100%;height:88px;margin-bottom:14px;border:1px solid var(--line-2);border-radius:6px}
.bk-prose{max-width:none}
.bk-prose td:first-child{font-weight:600;color:var(--fg)}
.bk-prose code{font-weight:400;white-space:nowrap}
.bk-val{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;color:var(--fg)}
.bk-val+.bk-val{margin-top:10px}
.bk-val small{display:flex;flex-wrap:wrap;column-gap:10px;flex-basis:100%;margin-top:-4px;padding-left:28px}
.bk-val small>*{white-space:nowrap}
.bk-val b{font-weight:500;color:var(--fg-2)}
.bk-sw{width:20px;height:20px}
.bk-sw rect{stroke:var(--line-2)}
.bk-type>div{padding:24px}
.bk-spec{font-size:clamp(32px,1.2rem + 2.4vw,52px);font-weight:600;line-height:1.1;letter-spacing:-.04em;overflow-wrap:anywhere}
.bk-mono{font-family:var(--mono);letter-spacing:0}
.bk-pangram b,.bk-t4 b,.w6{font-weight:600}
.bk-pangram{margin-top:14px;font-size:18px;color:var(--fg-2)}
.bk-t5{font:13px var(--mono);overflow-wrap:anywhere}
.bk-weights{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:16px;font-size:15px}
.w5,.bk-t2{font-weight:500}
.bk-type p:last-child{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--fg-2)}
.bk-scale{margin:24px 0 16px}
.bk-t1{font-size:clamp(34px,1.5rem + 2.2vw,52px);font-weight:600;line-height:1.06;letter-spacing:-.04em}
.bk-t2{font-size:14px}
.bk-t3{font-size:13px;color:var(--fg-2)}
.bk-t4{font:17px var(--mono)}
.bk-boiler div{flex:1}
.bk-bl{display:block;font-size:12px;font-weight:500;color:var(--fg-3)}
.bk-contact>p:first-child{max-width:72ch;color:var(--fg-2)}
@media (max-width:899px){.bk-split,.bk-type{grid-template-columns:1fr}
.bk-prose table{min-width:0}.bk-prose thead{display:none}.bk-prose tr{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;padding:12px}.bk-prose tbody tr+tr{border-top:1px solid var(--line)}
.bk-prose td{display:block;padding:2px 0;border:0!important}.bk-prose td::before{content:attr(data-label);display:block;font-size:12px;font-weight:500;color:var(--fg-3)}
.bk-prose td:first-child{padding-bottom:6px}.bk-prose td:first-child::before{content:none}.bk-prose td:nth-child(-n+2){grid-column:1/-1}}
@media (max-width:759px){.bk-grid3{grid-template-columns:1fr}.bk-donts{grid-template-columns:1fr 1fr}.bk-dl>li{grid-template-columns:1fr;padding:16px}}
@media (max-width:559px){.bk-pane{min-height:132px;padding:16px}.bk-two,.bk-brand{grid-template-columns:1fr}.bk-two .bk-fig+.bk-fig svg{max-width:180px}.bk-scale .tool{grid-template-columns:1fr}.bk-scale .hint{white-space:normal}.bk-cons text{font-size:20px}.bk-val small{padding-left:0}}
@media (max-width:359px){.bk-prose tr{grid-template-columns:1fr}.bk-prose td:last-child{padding-top:10px}}
/* The logo panes keep their fixed black/white/grey: forced colors would blank them behind white or black art */
@media (forced-colors:active){.bk-pane,.bk-prev span,.bk-sw,.bk-big{forced-color-adjust:none}.bk-pane{border-color:CanvasText}}
@media print{.bk-pane,.bk-prev span{-webkit-print-color-adjust:exact;print-color-adjust:exact}}