html, body { background: #fff; color: #111; }
html[data-theme="dark"], [data-theme="dark"] body { background: #000; color: #fff; }
.branding-page { max-width: 1240px; margin: 0 auto; padding: 48px 40px 80px; }
.branding-back { font-size: 13px; color: inherit; opacity: .55; text-decoration: none; }
.branding-intro { margin: 64px 0 56px; }
.branding-eyebrow { font: 11px 'Meridian Sora', sans-serif; letter-spacing: .15em; opacity: .5; }
.branding-intro h1 { margin: 12px 0 16px; font-size: clamp(36px,5vw,54px); letter-spacing: -.04em; font-weight: 600; color: inherit; }
.branding-intro > p:last-child { font-size: 17px; opacity: .55; }
.branding-key { display: grid; grid-template-columns: 1fr 1fr; padding: 0 0 16px; font-size: 12px; opacity: .55; border-bottom: 1px solid #8885; }
.branding-section { border-bottom: 1px solid #8885; }
.branding-caption { display: flex; gap: 16px; align-items: baseline; margin: 24px 0 0; }
.branding-caption span { font: 11px 'Meridian Sora', sans-serif; opacity: .4; }
.branding-caption h2 { font-size: 15px; color: inherit; font-weight: 500; margin: 0; }
.branding-grid { display: grid; grid-template-columns: 1fr 1fr; }
.branding-color { min-width: 0; }
.branding-sample { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.branding-sample > small { font-size: 10px; opacity: .4; }
.branding-sample .meridian-brand { --brand-icon-size: 82px; --brand-type-size: 42px; gap: 18px; }
.branding-section[data-layout="vertical"] .meridian-brand { flex-direction: column; --brand-icon-size: 96px; --brand-type-size: 34px; gap: 14px; }
.branding-section[data-layout="symbol"] .meridian-brand { flex-direction: column; --brand-icon-size: 128px; --brand-type-size: 23px; gap: 12px; }
.branding-section[data-layout="name"] .meridian-brand { --brand-icon-size: 45px; --brand-type-size: 54px; gap: 12px; }
.branding-section[data-layout="symbol"] .branding-sample { min-height: 240px; }
.branding-assets { padding-top: 40px; }
.branding-symbols { margin-bottom: 48px; }
.branding-symbols .meridian-brand { --brand-icon-size: 96px; margin: 24px 0; }
.branding-assets h2 { font-size: 16px; color: inherit; }
.branding-assets p { font-size: 12px; opacity: .5; }
.branding-assets a { display: inline-block; margin: 12px 24px 0 0; color: inherit; font-size: 12px; text-decoration: none; border-bottom: 1px solid #8886; padding-bottom: 4px; }
@media (max-width: 760px) { .branding-page { padding: 28px 18px 50px; } .branding-intro { margin: 44px 0; } .branding-sample .meridian-brand { --brand-icon-size: 48px; --brand-type-size: 25px; gap: 7px; } .branding-section[data-layout="name"] .meridian-brand { --brand-icon-size: 26px; --brand-type-size: 29px; gap: 7px; } .branding-section[data-layout="vertical"] .meridian-brand { --brand-icon-size: 76px; --brand-type-size: 27px; } .branding-section[data-layout="symbol"] .meridian-brand { --brand-icon-size: 104px; --brand-type-size: 21px; } }
@media (max-width: 420px) { .branding-sample .meridian-brand { --brand-icon-size: 36px; --brand-type-size: 21px; } .branding-section[data-layout="name"] .meridian-brand { --brand-icon-size: 22px; --brand-type-size: 24px; } }