/* BRAND WEB SEMANTIC EDITION */
/* Merge after shared onespace.css. Asset URLs are relative to the assets folder.
   This stylesheet owns only .bw-guide; it does not change navigation or footer. */
@font-face{font-family:BWPlayfair;src:url('/web/content/7037/OSPlayfair-Regular.woff2?unique=072e82769f6f') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:BWPlayfair;src:url('/web/content/7038/OSPlayfair-Bold.woff2?unique=d42efe5f7dd9') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:BWSmiley;src:url('/web/content/7041/OSSmiley.woff2?unique=1db5f5d15421') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:BWHonorCN;src:url('/web/content/7040/OSHonorCN-Regular.woff2?unique=884b6aa4452c') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:BWHonorCN;src:url('/web/content/7025/OSHonorCN-Bold.woff2?unique=da744d9d91b9') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:BWSourceHan;src:url('/web/content/7032/OSSourceHan-Regular.woff2?unique=e93a3f48ef5b') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:BWSourceHan;src:url('/web/content/7042/OSSourceHan-Bold.woff2?unique=c8b33f9f51a4') format('woff2');font-weight:700;font-display:swap}
.bw-guide{--bw-olive:#484D49;--bw-beige:#F2EDE7;--bw-cream:#F9F7F4;--bw-umber:#563929;--bw-carbon:#2C2C2C;--bw-muted:#605C53;--bw-line:#D3D3D3;background:var(--bw-cream);color:var(--bw-carbon);font-family:OSHonor,sans-serif;font-size:16px;line-height:1.7;font-synthesis:none;overflow-wrap:break-word}
.bw-guide *{box-sizing:border-box;min-width:0}
.bw-guide :where(h1,h2,h3,h4,p,figure,ul,ol){margin:0}
.bw-guide :where(h1,h2,h3,h4){font-family:OSHonor,sans-serif;font-weight:600;color:var(--bw-olive)}
.bw-guide img{display:block;max-width:100%;height:auto}
.bw-guide a{color:inherit;text-underline-offset:5px}
.bw-guide a:focus-visible,.bw-guide button:focus-visible,.bw-guide input:focus-visible{outline:2px solid var(--bw-olive);outline-offset:4px}
.bw-guide :where(section[id]){scroll-margin-top:calc(var(--os-nav-height,88px) + 24px)!important}
.bw-guide code{font-family:OSHonor,sans-serif;font-size:14px;white-space:normal}
.bw-guide .bw-eyebrow{font-size:12px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;color:var(--bw-muted)}
.bw-guide .bw-intro{padding:88px max(48px,calc((100vw - 1344px)/2));background:var(--bw-beige);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr);column-gap:72px;row-gap:24px}
.bw-guide .bw-intro>.bw-eyebrow{grid-column:1/-1}
.bw-guide .bw-intro h1{font-size:clamp(48px,5.3vw,76px);line-height:1.08;letter-spacing:-.04em;grid-row:2/4}
.bw-guide .bw-intro>p:not(.bw-eyebrow){max-width:390px;font-size:22px;line-height:1.55;align-self:end}
.bw-guide .bw-intro>a{align-self:start;justify-self:start;padding:8px 0;min-height:44px;border-bottom:1px solid var(--bw-olive);text-decoration:none;font-size:16px}
.bw-guide .bw-intro>a span{margin-left:30px}
.bw-guide .bw-shell{display:grid;grid-template-columns:178px minmax(0,1fr);max-width:1440px;margin:auto;gap:56px;padding:64px 48px 100px}
.bw-guide .bw-sidebar{position:sticky;top:calc(var(--os-nav-height,88px) + 28px);align-self:start;max-height:calc(100dvh - var(--os-nav-height,88px) - 56px);overflow-y:auto}
.bw-guide .bw-nav{display:flex;flex-direction:column;margin-top:24px}
.bw-guide .bw-nav a{display:flex;align-items:center;min-height:44px;padding:9px 0;text-decoration:none;font-size:15px;border-bottom:1px solid transparent}
.bw-guide .bw-nav a:hover{color:var(--bw-umber);border-color:var(--bw-line)}
.bw-guide .bw-group{margin-bottom:100px}
.bw-guide .bw-group:last-child{margin-bottom:0}
.bw-guide .bw-group-heading{padding:24px 0 32px;border-top:2px solid var(--bw-olive);margin-bottom:16px}
.bw-guide .bw-group-heading h2{font-size:42px;line-height:1.24;letter-spacing:-.025em}
.bw-guide .bw-group-heading>p{max-width:720px;color:var(--bw-muted);margin-top:14px;font-size:18px;line-height:1.6}
.bw-guide .bw-topic{padding:36px 0 52px;border-bottom:1px solid var(--bw-line)}
.bw-guide .bw-topic:last-child{border-bottom:0;padding-bottom:0}
.bw-guide .bw-topic-heading{margin-bottom:28px}
.bw-guide .bw-topic-heading h3{font-size:30px;line-height:1.28;letter-spacing:-.02em}
.bw-guide .bw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0}
.bw-guide .bw-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.bw-guide .bw-figure>img{width:100%;background:var(--bw-beige)}
.bw-guide .bw-figure figcaption{display:flex;flex-direction:column;gap:7px;margin-top:14px;font-size:14px;line-height:1.57;color:var(--bw-muted)}
.bw-guide .bw-figure figcaption>strong{font-weight:600;color:var(--bw-carbon);font-size:17px;line-height:1.4}
.bw-guide .bw-visual-character img{aspect-ratio:424/332;object-fit:cover}
.bw-guide .bw-example{display:grid;grid-template-columns:minmax(0,1fr)}
.bw-guide .bw-example>img,.bw-guide .bw-example>.bw-example-mark{grid-area:1/1}
.bw-guide .bw-example>figcaption{grid-row:2}
.bw-guide .bw-example-mark{align-self:end;justify-self:end;z-index:2;display:grid;place-items:center;width:28px;height:28px;margin:0 13px 13px 0;border:1px solid currentColor;border-radius:50%;background:#fff;font:600 18px/1 OSHonor,sans-serif}
.bw-guide .bw-example-mark-top{align-self:start;margin:4px 4px 0 0;box-shadow:0 0 0 3px #fff}
.bw-guide .bw-example-correct>.bw-example-mark{color:var(--bw-olive);font-size:15px}
.bw-guide .bw-example-incorrect>.bw-example-mark{color:#A14A45}
.bw-guide .bw-manifesto{background:var(--bw-beige);padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-top:32px}
.bw-guide .bw-manifesto>p:first-child{font-weight:600;font-size:36px;line-height:1.3;color:var(--bw-olive)}
.bw-guide .bw-manifesto>p:last-child{color:var(--bw-muted);max-width:300px}
.bw-guide .bw-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:32px}
.bw-guide .bw-rule{border-left:2px solid var(--bw-line);padding-left:18px}
.bw-guide .bw-rule h4{font-size:21px;line-height:1.35;letter-spacing:-.015em;margin-bottom:10px}
.bw-guide .bw-rule p{font-size:15px;line-height:1.75;color:var(--bw-muted);max-width:740px}
.bw-guide .bw-card{background:var(--bw-beige);padding:26px}
.bw-guide .bw-card h4{font-size:22px;line-height:1.35;letter-spacing:-.015em}
.bw-guide .bw-card p{font-size:15px;line-height:1.72;margin-top:12px;color:var(--bw-muted)}
.bw-guide .bw-card h4:not(:first-child){margin-top:32px}
.bw-guide .bw-card.bw-dark{background:var(--bw-olive);color:var(--bw-beige)}
.bw-guide .bw-card.bw-dark h4{color:var(--bw-beige)}
.bw-guide .bw-card .bw-specimen{color:var(--bw-olive)}
.bw-guide .bw-card.bw-dark :is(h4,p,.bw-specimen){color:var(--bw-cream)}
.bw-guide .bw-logo-grid{grid-template-columns:1.5fr 1fr 1fr}
.bw-guide .bw-logo-card>div{height:180px;display:flex;align-items:center;justify-content:center;background:var(--bw-beige);padding:24px}
.bw-guide .bw-logo-card h4{font-size:18px;line-height:1.4;margin:14px 0 7px}
.bw-guide .bw-logo-card p{font-size:13px;line-height:1.65;color:var(--bw-muted)}
.bw-guide .bw-logo-horizontal img{width:100%;height:auto}
.bw-guide .bw-logo-stacked img{width:170px;height:auto}
.bw-guide .bw-logo-icon img{width:84px;height:84px}
.bw-guide .bw-measure-summary{display:flex;flex-wrap:wrap;gap:32px;margin-bottom:32px}
.bw-guide .bw-measure-summary>p{flex:1 1 160px;background:var(--bw-beige);padding:20px}
.bw-guide .bw-measure-summary strong{display:block;font-size:36px;line-height:1.3;color:var(--bw-olive);font-weight:600}
.bw-guide .bw-measure-summary span{display:block;margin-top:8px;font-size:13px;line-height:1.55;color:var(--bw-muted)}
.bw-guide .bw-wide-diagram{padding:20px;background:var(--bw-beige)}
.bw-guide .bw-wide-diagram img{background:var(--bw-beige)}
.bw-guide .bw-measurements>figure{background:var(--bw-beige);padding:20px}
.bw-guide .bw-measurements img{height:210px;object-fit:contain;background:var(--bw-beige)}
.bw-guide .bw-geometry{grid-template-columns:1fr}
.bw-guide .bw-geometry>figure{padding:20px;background:var(--bw-beige)}
.bw-guide .bw-geometry img{max-height:300px;object-fit:contain;background:var(--bw-beige)}
.bw-guide .bw-callout{padding:20px 24px;margin:28px 0;background:var(--bw-beige);border-left:3px solid var(--bw-umber);font-size:17px;line-height:1.7}
.bw-guide .bw-note{margin:18px 0;color:var(--bw-muted);font-size:14px;line-height:1.65}
.bw-guide .bw-avatar>img{width:100%;max-width:210px;aspect-ratio:1;object-fit:contain;margin:auto;background:#fff}
.bw-guide .bw-avatar{padding:24px;background:var(--bw-beige)}
.bw-guide .bw-favicons>div{display:flex;gap:28px;min-height:80px;align-items:center;margin-top:12px}
.bw-guide .bw-favicons img:first-child{width:16px;height:16px}.bw-guide .bw-favicons img:last-child{width:32px;height:32px}
.bw-guide .bw-cobrand{display:flex;align-items:center;justify-content:center;gap:40px;padding:48px 20px;background:var(--bw-beige);margin-top:24px}
.bw-guide .bw-cobrand>img{width:34%;max-width:280px}
.bw-guide .bw-cobrand>span{height:64px;border-left:1px solid var(--bw-olive)}
.bw-guide .bw-cobrand>p{font-size:20px;color:var(--bw-muted)}
.bw-guide .bw-logo-surface{padding:30px 20px;display:flex;min-height:150px;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--bw-line)}
.bw-guide .bw-logo-surface>img{width:100%;max-width:240px;margin:auto}
.bw-guide .bw-logo-surface>p{font-size:13px}
.bw-guide .bw-comparison img{aspect-ratio:650/221;object-fit:contain}
.bw-guide .bw-misuse{grid-template-columns:repeat(2,minmax(0,1fr))}
.bw-guide .bw-misuse figure{padding:14px;background:var(--bw-beige)}
.bw-guide .bw-misuse img{aspect-ratio:424/101;object-fit:contain;background:#fff}
.bw-guide .bw-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.bw-guide .bw-swatch>div{height:220px;padding:12px;display:flex;align-items:end;border:1px solid var(--bw-line)}
.bw-guide .bw-swatch h4{font-size:16px;line-height:1.5;margin-top:14px}
.bw-guide .bw-swatch>p{font-size:13px;color:var(--bw-muted);margin-top:5px}
.bw-guide .bw-distribution{display:flex;height:88px;margin:36px 0 12px;border:1px solid var(--bw-line)}
.bw-guide .bw-status-list{display:grid;gap:12px}
.bw-guide .bw-status{display:grid;grid-template-columns:130px 1fr;gap:4px 16px;padding:20px 24px;align-items:center}
.bw-guide .bw-status strong{font-weight:600;font-size:18px;line-height:1.4}
.bw-guide .bw-status p{font-size:14px;line-height:1.65;color:var(--bw-muted)}
.bw-guide .bw-status code{grid-column:2;font-size:12px}
.bw-guide .bw-state-samples{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:32px 6px}
.bw-guide .bw-state-samples span{padding:12px 16px;background:var(--bw-olive);color:#fff;text-align:center;font-size:14px}
.bw-guide .bw-state-samples .bw-state-hover{background:#393E3A}.bw-guide .bw-state-samples .bw-state-pressed{background:#2C2C2C}.bw-guide .bw-state-samples .bw-state-focus{outline:2px solid var(--bw-olive);outline-offset:4px}
.bw-guide .bw-demo-button{border:0;border-radius:0;background:var(--bw-olive);color:#fff;font:600 16px/24px OSHonor,sans-serif;min-height:48px;padding:12px 24px;cursor:pointer}
.bw-guide .bw-demo-button:hover{background:#393E3A}.bw-guide .bw-demo-button:active{background:#2C2C2C}
.bw-guide .bw-contrast{padding:24px;border:1px solid var(--bw-line);display:flex;flex-direction:column;gap:14px}
.bw-guide .bw-contrast>p{font-size:22px;font-weight:600;line-height:1.45}.bw-guide .bw-contrast>strong{font-size:30px;font-weight:600}.bw-guide .bw-contrast>span{font-size:14px}.bw-guide .bw-contrast>code{font-size:12px}
.bw-guide .bw-table-wrap{margin:32px 0;max-width:100%}
.bw-guide .bw-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;line-height:1.6}
.bw-guide .bw-table caption{caption-side:top;text-align:left;color:var(--bw-olive);font-size:20px;font-weight:600;margin-bottom:18px}
.bw-guide .bw-table :is(th,td){padding:16px 14px;vertical-align:top;border-bottom:1px solid var(--bw-line);font-weight:400}
.bw-guide .bw-table thead th{background:var(--bw-olive);color:#fff;font-size:12px;font-weight:600}
.bw-guide .bw-table tbody th{font-weight:600;width:20%}
.bw-guide .bw-table tbody tr:nth-child(odd){background:var(--bw-beige)}
.bw-guide .bw-type-map{display:grid;gap:16px}
.bw-guide .bw-type-row{display:grid;grid-template-columns:1fr 1fr 1.35fr;background:var(--bw-beige);gap:24px;padding:26px}
.bw-guide .bw-type-row h4{font-size:20px;line-height:1.35}.bw-guide .bw-type-row>div>p:not(.bw-specimen){font-size:12px;line-height:1.6;margin-top:10px;color:var(--bw-muted)}
.bw-guide .bw-type-row>div>span{display:block;font-size:12px;line-height:1.55;color:var(--bw-muted)}
.bw-guide .bw-specimen{font-size:30px!important;line-height:1.45!important;margin-top:20px!important;font-synthesis:none;font-style:normal;overflow-wrap:normal}
.bw-guide .bw-specimen.bw-smiley{font-size:34px!important}
.bw-guide .bw-honor{font-family:OSHonor,sans-serif;font-weight:400}.bw-guide .bw-honor-bold{font-family:OSHonor,sans-serif;font-weight:600}
.bw-guide .bw-honor-cn{font-family:BWHonorCN,sans-serif;font-weight:400}.bw-guide .bw-honor-cn-bold{font-family:BWHonorCN,sans-serif;font-weight:700}
.bw-guide .bw-playfair{font-family:BWPlayfair,serif;font-weight:400}.bw-guide .bw-playfair-bold{font-family:BWPlayfair,serif;font-weight:700}
.bw-guide .bw-source{font-family:BWSourceHan,serif;font-weight:400}.bw-guide .bw-source-bold{font-family:BWSourceHan,serif;font-weight:700}
.bw-guide .bw-smiley{font-family:BWSmiley,sans-serif;font-weight:400}
.bw-guide .bw-web-example{margin:28px 0;border:1px solid var(--bw-line);background:var(--bw-beige)}
.bw-guide .bw-current-website{container-type:inline-size;overflow:hidden;background:var(--bw-cream)}
.bw-guide .bw-current-website a{color:inherit;text-decoration:none}
.bw-guide .bw-mini-hero{position:relative;aspect-ratio:1.58;isolation:isolate;color:#fff;overflow:hidden}
.bw-guide .bw-mini-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bw-guide .bw-mini-hero:after{content:'';position:absolute;inset:0;background:rgba(44,44,44,.48);z-index:-1}
.bw-guide .bw-mini-hero>nav{display:flex;justify-content:flex-end;gap:2.4cqw;padding:4.3cqw 3cqw;font-size:1.5cqw;border-bottom:1px solid #ffffff30}
.bw-guide .bw-mini-intro{margin:4cqw 7cqw 0 28cqw;max-width:64cqw}
.bw-guide .bw-mini-intro>strong{display:block;font-size:2.8cqw;line-height:1.25;letter-spacing:-.07cqw}
.bw-guide .bw-mini-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:2cqw;background:var(--bw-cream);color:var(--bw-carbon)!important;padding:.8cqw 1cqw  .8cqw 1.6cqw;margin-top:2.5cqw;font-size:1.5cqw;line-height:1.4}
.bw-guide .bw-mini-cta>b{padding:.4cqw .8cqw;background:var(--bw-umber);color:#fff;font-size:2cqw}
.bw-guide .bw-mini-brand{position:absolute;bottom:4cqw;left:28cqw;right:7cqw}
.bw-guide .bw-mini-brand img{width:100%;height:auto}
@media(min-width:1100px){
 .bw-guide #brand-layout-grid>.bw-current-website{position:relative;align-self:stretch;min-height:0}
 .bw-guide #brand-layout-grid>.bw-current-website>.bw-mini-hero{position:absolute;inset:0;aspect-ratio:auto;height:100%}
}
.bw-guide .bw-current-website a:hover{text-decoration:underline}
.bw-guide .bw-example-nav{padding:20px 24px;background:var(--bw-olive);color:#fff;display:flex;gap:32px;justify-content:space-between;align-items:center}
.bw-guide .bw-example-nav>img{width:160px}.bw-guide .bw-example-nav>span{font-size:12px;line-height:1.7}
.bw-guide .bw-example-hero{position:relative;min-height:250px;display:grid;place-items:center;overflow:hidden}
.bw-guide .bw-example-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65)}
.bw-guide .bw-example-hero>div{position:relative;text-align:center;padding:24px;color:#fff}
.bw-guide .bw-example-hero strong{font-size:28px;font-weight:600;line-height:1.5}.bw-guide .bw-example-hero p{font-size:20px;margin-top:16px}
.bw-guide .bw-example-content{padding:28px}.bw-guide .bw-example-content>h4{font-size:24px;line-height:1.35}.bw-guide .bw-example-content ul{display:flex;flex-wrap:wrap;gap:12px;padding:0;list-style:none;margin:24px 0}.bw-guide .bw-example-content li{flex:1 1 120px;padding:12px;background:var(--bw-cream);font-size:13px}
.bw-guide .bw-example-content>div{display:grid;grid-template-columns:1fr 1fr;gap:24px}.bw-guide .bw-example-content>p{margin-top:22px;font-size:15px;line-height:1.7;color:var(--bw-muted)}
.bw-guide .bw-bio{background:var(--bw-beige);padding:28px;margin:28px 0}.bw-guide .bw-bio h4{font-size:12px;line-height:1.5;letter-spacing:.05em;text-transform:uppercase}.bw-guide .bw-bio p{font-size:18px;line-height:1.65;margin:8px 0 24px}.bw-guide .bw-bio p:last-child{margin-bottom:0}
.bw-guide .bw-avatar-pair>figure{padding:24px;background:var(--bw-beige)}
.bw-guide .bw-avatar-pair>figure>img{width:210px;height:210px;object-fit:contain;margin:auto;max-height:none}
.bw-guide .bw-avatar-pair>.bw-avatar>img{border-radius:50%;overflow:hidden}
.bw-guide .bw-profile>img{width:100%;max-width:270px;margin:auto;object-fit:contain}
.bw-guide .bw-profile-layout{align-items:start}
.bw-guide .bw-profile-guidance-only{grid-template-columns:1fr}
.bw-guide .bw-profile-guidance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.bw-guide .bw-profile-guidance>div+div{border-left:2px solid var(--bw-line);padding-left:32px}
.bw-guide .bw-artwork{background:var(--bw-beige);padding:18px}
.bw-guide .bw-artwork>img{width:100%;height:auto;max-height:560px;object-fit:contain;object-position:top}
.bw-guide .bw-covers>figure>img{max-height:540px}
.bw-guide .bw-readability img{aspect-ratio:424/339;object-fit:contain}
.bw-guide .bw-subtitle-example{grid-template-columns:minmax(0,560px);justify-content:center}
.bw-guide .bw-anatomy{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.bw-guide .bw-anatomy .bw-card{padding:18px}.bw-guide .bw-anatomy h4{font-size:18px}.bw-guide .bw-anatomy p{font-size:13px;line-height:1.65}
.bw-guide .bw-formats{grid-template-columns:1fr 1fr}.bw-guide .bw-formats>figure:last-child{grid-column:1/-1}.bw-guide .bw-formats>figure:last-child>img{max-height:440px}
.bw-guide .bw-formats>figure,.bw-guide .bw-library>figure{display:grid;grid-template-rows:280px auto;align-content:start;height:100%}
.bw-guide .bw-formats>figure>img,.bw-guide .bw-library>figure>img{width:auto;height:auto;max-width:100%;max-height:280px;justify-self:start;align-self:end;object-fit:contain;object-position:left bottom;border:1px solid var(--bw-line);box-sizing:border-box}
.bw-guide .bw-formats figcaption,.bw-guide .bw-library figcaption{align-self:start;width:100%}
.bw-guide .bw-library{grid-template-columns:1fr 1fr;align-items:stretch}.bw-guide .bw-library>figure:last-child{grid-column:1/-1}
.bw-guide .bw-offer{align-items:start}
.bw-guide .bw-carousel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;padding:0;gap:24px;margin:28px 0}
.bw-guide .bw-carousel li{padding:28px;background:var(--bw-beige);border:1px solid var(--bw-line)}
.bw-guide .bw-carousel img{width:180px;max-width:70%;margin-bottom:60px}.bw-guide .bw-carousel h4{font-size:28px;line-height:1.4}.bw-guide .bw-carousel p{font-size:17px;margin-top:22px}
.bw-guide .bw-font-sources{list-style:none;padding:0}
.bw-guide .bw-font-sources li{padding:22px 0;border-bottom:1px solid var(--bw-line)}
.bw-guide .bw-font-sources a{font-size:22px;line-height:1.5;display:inline-block;min-height:44px}.bw-guide .bw-font-sources p{font-size:15px;color:var(--bw-muted);margin-top:4px}
.bw-guide .bw-filename{display:block;margin-top:18px;overflow-wrap:anywhere}
.bw-guide .bw-checklist{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bw-guide .bw-checklist li{background:var(--bw-beige)}.bw-guide .bw-checklist label{display:flex;gap:16px;padding:24px;cursor:pointer;align-items:start}
.bw-guide .bw-checklist input{appearance:auto;accent-color:var(--bw-olive);width:22px;height:22px;flex:0 0 22px;margin-top:3px}
.bw-guide .bw-checklist label>span{display:flex;flex-direction:column;gap:8px}.bw-guide .bw-checklist strong{font-size:18px;font-weight:600}.bw-guide .bw-checklist label>span>span{font-size:14px;color:var(--bw-muted)}
@media(max-width:1150px){
 .bw-guide .bw-shell{grid-template-columns:150px minmax(0,1fr);gap:32px;padding:48px 32px 80px}
 .bw-guide .bw-type-row{grid-template-columns:1fr 1fr}.bw-guide .bw-type-row>div:first-child{grid-column:1/-1}
 .bw-guide .bw-palette{grid-template-columns:repeat(3,minmax(0,1fr))}
 .bw-guide .bw-logo-grid{grid-template-columns:1fr 1fr}.bw-guide .bw-logo-grid>div:first-child{grid-column:1/-1}
 .bw-guide .bw-grid:not(.bw-two,.bw-geometry,.bw-logo-grid,.bw-misuse,.bw-covers,.bw-formats,.bw-library,.bw-subtitle-example,.bw-anatomy){grid-template-columns:repeat(2,minmax(0,1fr))}
 .bw-guide .bw-anatomy{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:800px){
 .bw-guide{font-size:16px;line-height:1.75}
 .bw-guide .bw-intro{padding:56px 24px;grid-template-columns:1fr;gap:22px}.bw-guide .bw-intro h1{font-size:48px;grid-row:auto}.bw-guide .bw-intro>p:not(.bw-eyebrow){font-size:18px;max-width:440px}
 .bw-guide .bw-shell{display:block;padding:32px 24px 72px}
 .bw-guide .bw-sidebar{position:relative;top:auto;max-height:none;overflow:visible;padding-bottom:28px;margin-bottom:36px;border-bottom:1px solid var(--bw-line)}
 .bw-guide .bw-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin-top:12px}.bw-guide .bw-nav a{font-size:14px}
 .bw-guide .bw-group{margin-bottom:68px}.bw-guide .bw-group-heading{padding-top:20px;padding-bottom:16px}.bw-guide .bw-group-heading h2{font-size:32px;line-height:1.3}.bw-guide .bw-group-heading p{font-size:16px}
 .bw-guide .bw-topic{padding:28px 0 40px}.bw-guide .bw-topic-heading h3{font-size:25px;line-height:1.36}
 .bw-guide .bw-rules{gap:22px;margin-top:28px}.bw-guide .bw-rule h4{font-size:19px}.bw-guide .bw-rule p{font-size:14px}
 .bw-guide .bw-grid{gap:20px}.bw-guide .bw-contrast{padding:20px}
 .bw-guide .bw-table{display:block}.bw-guide .bw-table caption{display:block;font-size:20px}
 .bw-guide .bw-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .bw-guide .bw-table tbody{display:grid;gap:18px}.bw-guide .bw-table tr{display:block;border:1px solid var(--bw-line);padding:18px;background:var(--bw-beige)}
 .bw-guide .bw-table :is(th,td){display:block;width:auto!important;padding:8px 0;border:0;font-size:15px}
 .bw-guide .bw-table tbody th{font-size:18px;color:var(--bw-olive)}
 .bw-guide .bw-table td::before{content:attr(data-label);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.025em;color:var(--bw-muted);margin-bottom:4px}
 .bw-guide .bw-anatomy{grid-template-columns:1fr 1fr}
 .bw-guide .bw-example-mark{width:24px;height:24px;margin:0 10px 10px 0;font-size:16px}.bw-guide .bw-example-mark-top{margin:4px 4px 0 0}.bw-guide .bw-example-correct>.bw-example-mark{font-size:13px}
 .bw-guide .bw-profile-guidance{grid-template-columns:1fr;gap:24px}
 .bw-guide .bw-profile-guidance>div+div{border-left:0;border-top:2px solid var(--bw-line);padding:24px 0 0}
}
@media(max-width:540px){
 .bw-guide .bw-shell{padding-left:20px;padding-right:20px}.bw-guide .bw-intro{padding:48px 20px}.bw-guide .bw-intro h1{font-size:44px}
 .bw-guide .bw-grid,.bw-guide .bw-grid:not(.bw-two,.bw-geometry,.bw-logo-grid,.bw-misuse,.bw-covers,.bw-formats,.bw-library,.bw-subtitle-example,.bw-anatomy){grid-template-columns:1fr}
 .bw-guide .bw-grid>figure:last-child{grid-column:auto}.bw-guide .bw-logo-grid>div:first-child{grid-column:auto}
 .bw-guide .bw-logo-grid .bw-logo-card>div{height:180px}.bw-guide .bw-logo-horizontal img{max-width:280px}
 .bw-guide .bw-visual-character{grid-template-columns:1fr!important}.bw-guide .bw-visual-character img{aspect-ratio:424/332}
 .bw-guide .bw-manifesto{grid-template-columns:1fr;padding:26px;gap:24px}.bw-guide .bw-manifesto>p:first-child{font-size:32px}
 .bw-guide .bw-rules{grid-template-columns:1fr}.bw-guide .bw-card{padding:24px}.bw-guide .bw-card p{font-size:16px}
 .bw-guide .bw-measure-summary{gap:12px}.bw-guide .bw-measure-summary>p{flex-basis:90px;padding:12px}.bw-guide .bw-measure-summary strong{font-size:30px}.bw-guide .bw-measure-summary span{font-size:12px}
 .bw-guide .bw-wide-diagram,.bw-guide .bw-measurements>figure,.bw-guide .bw-geometry>figure{padding:12px}
 .bw-guide .bw-measurements img{height:auto;max-height:230px}
 .bw-guide .bw-geometry img{height:auto;max-height:none}
 .bw-guide .bw-callout{padding:18px;font-size:16px}
 .bw-guide .bw-cobrand{gap:22px;padding:28px 18px}.bw-guide .bw-cobrand>p{font-size:13px}.bw-guide .bw-cobrand>span{height:44px}
 .bw-guide .bw-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.bw-guide .bw-swatch>div{height:170px}
 .bw-guide .bw-status{grid-template-columns:1fr;padding:20px;gap:8px}.bw-guide .bw-status code{grid-column:auto}
 .bw-guide .bw-state-samples{grid-template-columns:1fr 1fr;gap:20px}.bw-guide .bw-contrast>p{font-size:24px}
 .bw-guide .bw-type-row{grid-template-columns:1fr;padding:24px;gap:24px}.bw-guide .bw-type-row>div:first-child{grid-column:auto}
 .bw-guide .bw-specimen{font-size:30px!important}.bw-guide .bw-type-row>div:not(:first-child){border-top:1px solid var(--bw-line);padding-top:20px}
 .bw-guide .bw-example-nav{flex-direction:column;align-items:start;gap:18px;padding:20px}.bw-guide .bw-example-nav>span{font-size:11px}
 .bw-guide .bw-example-hero strong{font-size:26px}.bw-guide .bw-example-content{padding:20px}.bw-guide .bw-example-content>div{grid-template-columns:1fr;gap:16px}
 .bw-guide .bw-artwork{padding:16px}.bw-guide .bw-avatar-pair>figure>img{width:210px;height:210px}
 .bw-guide .bw-bio{padding:24px}.bw-guide .bw-bio p{font-size:17px}
 .bw-guide .bw-carousel{grid-template-columns:1fr}.bw-guide .bw-carousel img{margin-bottom:40px}
 .bw-guide .bw-checklist{grid-template-columns:1fr}.bw-guide .bw-checklist label{padding:22px}
}
@media(prefers-reduced-motion:reduce){.bw-guide *{scroll-behavior:auto!important;transition:none!important}}

/* Compact reference layout: pair diagrams; group short examples and rules. */
@media(min-width:801px){
 .bw-guide .bw-intro{padding-top:56px;padding-bottom:56px;column-gap:40px}
 .bw-guide .bw-shell{max-width:1600px;grid-template-columns:154px minmax(0,1fr);gap:32px;padding:44px 36px 72px}
 .bw-guide .bw-group{margin-bottom:64px}
 .bw-guide .bw-group-heading{padding:20px 0 24px;margin-bottom:8px}
 .bw-guide .bw-topic{padding:24px 0 32px}
 .bw-guide .bw-topic-heading{margin-bottom:20px}
 .bw-guide .bw-grid{gap:16px;margin:20px 0}
 .bw-guide .bw-rules{gap:20px 24px;margin-top:24px}
 .bw-guide .bw-rule{padding-left:14px}
 .bw-guide .bw-rule h4{margin-bottom:7px}
 .bw-guide .bw-rule p{line-height:1.65}
 .bw-guide .bw-card{padding:20px}
 .bw-guide .bw-card h4:not(:first-child){margin-top:24px}
 .bw-guide .bw-manifesto{padding:24px;gap:24px;margin-top:24px}
 .bw-guide .bw-geometry{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bw-guide .bw-geometry>figure,.bw-guide .bw-measurements>figure{padding:14px}
 .bw-guide .bw-geometry img{width:100%;height:230px;max-height:none;object-fit:contain}
 .bw-guide .bw-wide-diagram img{max-height:260px;object-fit:contain}
 .bw-guide .bw-callout{padding:16px 20px;margin:20px 0}
 .bw-guide .bw-measure-summary{gap:16px;margin-bottom:20px}
 .bw-guide .bw-measure-summary>p{padding:16px}
 .bw-guide .bw-swatch>div{height:170px}
 .bw-guide .bw-status-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .bw-guide .bw-status{grid-template-columns:1fr;gap:6px;padding:18px 20px}
 .bw-guide .bw-status code{grid-column:1}
 .bw-guide .bw-type-row{padding:20px;gap:20px}
 .bw-guide .bw-table-wrap{margin:24px 0}
 .bw-guide .bw-table :is(th,td){padding:12px}
 .bw-guide .bw-bio{display:grid;grid-template-columns:1fr 2fr;gap:10px 28px;padding:20px 24px;margin:20px 0}
 .bw-guide .bw-bio>h4:first-child{grid-column:1;grid-row:1}
 .bw-guide .bw-bio>p:nth-child(2){grid-column:1;grid-row:2;margin:0;font-size:18px}
 .bw-guide .bw-bio>h4:nth-child(3){grid-column:2;grid-row:1}
 .bw-guide .bw-bio>p:last-child{grid-column:2;grid-row:2;margin:0;font-size:18px}
 .bw-guide .bw-artwork{padding:14px}
 .bw-guide .bw-covers>figure>img{max-height:380px}
 .bw-guide .bw-subtitle-example{grid-template-columns:minmax(0,400px)}
 .bw-guide .bw-subtitle-example img{max-height:420px}
 .bw-guide .bw-carousel{gap:16px;margin:20px 0}
 .bw-guide .bw-carousel li{padding:20px}
 .bw-guide .bw-carousel img{margin-bottom:32px}
 .bw-guide .bw-carousel h4{font-size:24px}
 .bw-guide .bw-carousel p{font-size:16px;margin-top:16px}
 .bw-guide .bw-font-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
 .bw-guide .bw-font-sources li{padding:16px 0}
 .bw-guide .bw-font-sources a{font-size:20px}
 .bw-guide .bw-checklist{gap:16px}
 .bw-guide .bw-checklist label{padding:18px;gap:12px}
}
@media(min-width:1100px){
 .bw-guide .bw-rules:has(>.bw-rule:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
 .bw-guide .bw-misuse,.bw-guide .bw-type-examples,.bw-guide .bw-formats,.bw-guide .bw-library{grid-template-columns:repeat(3,minmax(0,1fr))}
 .bw-guide .bw-formats>figure:last-child,.bw-guide .bw-library>figure:last-child{grid-column:auto}
 .bw-guide .bw-formats>figure>img,.bw-guide .bw-formats>figure:last-child>img,.bw-guide .bw-library>figure>img{width:auto;height:auto;max-width:100%;max-height:280px;object-fit:contain;object-position:left bottom;justify-self:start;align-self:end}
 .bw-guide .bw-carousel{grid-template-columns:repeat(4,minmax(0,1fr))}
 .bw-guide .bw-checklist{grid-template-columns:repeat(3,minmax(0,1fr))}
 .bw-guide .bw-font-sources{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1440px){
 .bw-guide .bw-misuse{grid-template-columns:repeat(4,minmax(0,1fr))}
 .bw-guide .bw-misuse figure{padding:12px}
 .bw-guide .bw-status-list,.bw-guide .bw-checklist{grid-template-columns:repeat(4,minmax(0,1fr))}
 .bw-guide .bw-rules:has(>.bw-rule:nth-child(4)):not(:has(>.bw-rule:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Pair a full application example with its accompanying rules. */
@media(min-width:1100px){
 .bw-guide #brand-video-covers,.bw-guide #brand-layout-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:28px;align-items:start}
 .bw-guide #brand-video-covers>*,.bw-guide #brand-layout-grid>*{grid-column:1/-1}
 .bw-guide #brand-video-covers>.bw-subtitle-example,.bw-guide #brand-layout-grid>.bw-web-example{grid-column:1;margin:20px 0 0}
 .bw-guide #brand-video-covers>.bw-subtitle-example{grid-template-columns:minmax(0,1fr)}
 .bw-guide #brand-video-covers>.bw-rules{grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr));margin:20px 0 0;gap:24px 18px}
 .bw-guide #brand-layout-grid>.bw-rules{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 0;gap:18px}
 .bw-guide #brand-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:start}
 .bw-guide #brand-offers>.bw-topic-heading{grid-column:1/-1}
 .bw-guide #brand-offers>.bw-offer{display:contents}
 .bw-guide #brand-offers>.bw-offer>.bw-artwork{grid-column:1;grid-row:2/4;margin:0}
 .bw-guide #brand-offers>.bw-offer>.bw-card{grid-column:2;grid-row:2;margin:0}
 .bw-guide #brand-offers>.bw-rules{grid-column:2;grid-row:3;grid-template-columns:1fr;gap:18px;margin:24px 0 0}
 .bw-guide #brand-layout-grid .bw-example-nav{flex-wrap:wrap;gap:12px;padding:16px}
 .bw-guide #brand-layout-grid .bw-example-content{padding:20px}
}