.brandbook{padding-bottom:64px}.bb-intro{grid-template-columns:1.3fr 1fr;align-items:center;gap:48px;padding-block:64px;display:grid}.bb-intro h1{max-width:14ch}.bb-intro .living-art{max-height:440px}.bb-status{border-left:3px solid var(--gl-accent);max-width:56ch;color:var(--gl-on-surface-soft);padding-left:20px;font-size:1rem}.bb-layout{border-top:1px solid var(--gl-line);grid-template-columns:220px minmax(0,1fr);gap:64px;display:grid}.bb-nav{align-self:start;padding-top:40px;font-size:1rem;position:sticky;top:24px}.bb-nav a{text-underline-offset:5px;gap:14px;padding:10px 0;display:flex}.bb-nav span{color:var(--gl-on-surface-soft)}.bb-nav p{color:var(--gl-on-surface-soft);margin-top:28px;font-size:.9375rem}.bb-section{border-bottom:1px solid var(--gl-line);padding-block:48px 56px;scroll-margin-top:24px}.bb-section>h2{max-width:20ch;font-size:clamp(2rem,3.5vw,3.5rem)}.bb-source{margin-block:28px}.bb-principles{grid-template-columns:repeat(3,1fr);gap:20px;margin-block:32px;display:grid}.bb-principles span{background:var(--gl-surface-soft);border-radius:4px 40px 4px 4px;padding:24px 20px}.bb-principles strong{font-family:var(--gl-font-serif);font-size:1.5rem;font-weight:600}.bb-voice p:has(>strong:first-child){background:var(--gl-surface-soft);border-left:2px solid var(--gl-accent);padding:24px}.bb-fonts{gap:24px;margin-block:32px;display:grid}.bb-font{background:var(--gl-surface-soft);border-radius:4px 48px 4px 4px;min-width:0;padding:32px}.bb-font h3{letter-spacing:0;border-bottom:1px solid var(--gl-line-strong);padding-bottom:16px;font-size:1.125rem}.bb-font small{color:var(--gl-on-surface-soft);font-weight:400}.bb-specimen{overflow-wrap:anywhere;font-size:clamp(1.5rem,2.7vw,2.25rem);line-height:1.4}.bb-specimen p{margin-bottom:.8em}.bb-specimen .bb-glyphs{margin-bottom:0;font-size:1.125rem}.bb-palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px;margin-block:32px;display:grid}.bb-palette figure,.bb-artboard figure{min-width:0;margin:0}.bb-swatch{border:1px solid var(--gl-line);border-radius:4px 32px 4px 4px;height:108px}.bb-palette figcaption{padding-top:10px;font-size:.9375rem}.bb-palette code,.bb-palette output{overflow-wrap:anywhere;display:block}.bb-palette code{color:var(--gl-on-surface-soft)}.bb-composition{background:var(--gl-accent-soft);border-radius:4px 64px 4px 4px;margin-block:40px;padding:40px}.bb-composition p{max-width:44ch}.bb-artboard{grid-template-columns:1fr 1fr;align-items:center;gap:32px;margin-block:40px;display:grid}.bb-artboard figcaption,.bb-mark p{color:var(--gl-on-surface-soft);margin-top:24px;font-size:.9375rem}.bb-mark{min-width:0}.bb-mark .living-brand{flex-wrap:wrap}.bb-examples{grid-template-columns:1fr 1fr;gap:24px;margin-block:32px;display:grid}.bb-examples article{background:var(--gl-surface-soft);border-radius:4px 48px 4px 4px;padding:28px}.bb-examples h3{font-size:1.5rem}.bb-examples .eyebrow{font-size:.8125rem}.bb-back{text-underline-offset:5px;font-size:1rem}@media (width<=1000px){.bb-layout{grid-template-columns:1fr;gap:0}.bb-nav{border-bottom:1px solid var(--gl-line);flex-wrap:wrap;gap:8px 24px;padding-block:24px;display:flex;position:static}.bb-nav p{flex-basis:100%;margin:8px 0}.bb-intro{gap:24px}}@media (width<=600px){.bb-intro{grid-template-columns:1fr;padding-block:36px}.bb-intro .living-art{max-height:300px}.bb-principles,.bb-artboard,.bb-examples{grid-template-columns:1fr}.bb-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.bb-section{padding-block:36px}.bb-font,.bb-composition{padding:24px}.bb-principles{gap:12px}.bb-principles span{padding:20px}.bb-mark .living-brand{flex-wrap:nowrap}.bb-mark .living-brand span{font-size:1.25rem}}
