/* ADR-0084: compact brand guide; palette, typography, buttons and chrome stay shared. */
body .brand-page { --brand-border: color-mix(in srgb, var(--rade-color-text) 12%, var(--rade-color-surface)); max-width: 1152px; margin: 24px auto 48px; color: var(--rade-color-text); }
.brand-page *, .brand-page *::before, .brand-page *::after { box-sizing: border-box; }
body .brand-page :is(h1,h2,h3,p,figure) { margin: 0 !important; }
body .brand-page h1 { margin: 8px 0 12px !important; }
body .brand-page h2 { margin: 8px 0 0 !important; }
.brand-page p { color: var(--rade-color-text-muted); }
/* HEX and English specimens keep Latin digits instead of the site's ss01 substitution. */
body .brand-page :is(code,[lang="en"],[lang="en"] *) { font-feature-settings: "ss01" 0 !important; }
.brand-page :is(section[id],#brand-logo) { scroll-margin-top: calc(var(--rade-header-height, 80px) + 24px); }
.brand-eyebrow { display: block; font-size: var(--rade-text-caption-size); line-height: var(--rade-text-caption-line); font-weight: var(--rade-font-weight-medium); color: var(--rade-color-primary); }
.brand-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 32px; }
.brand-hero__copy { padding: 16px 0; }
.brand-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.brand-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--rade-text-body-size); font-weight: var(--rade-font-weight-medium); }
.brand-page a:focus-visible,.brand-page summary:focus-visible { outline: 3px solid var(--rade-color-primary); outline-offset: 4px; }
.brand-hero__art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 224px; padding: 32px; border-radius: 20px; background: var(--rade-persian); color: var(--rade-white); }
.brand-hero__art img { width: 230px; max-width: 100%; height: auto; }
.brand-hero__art span { font-size: var(--rade-text-caption-size); opacity: .8; }
.brand-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 24px 0 32px; padding: 8px 0; border-bottom: 1px solid var(--brand-border); }
.brand-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--rade-color-text-muted); font-size: var(--rade-text-body-size); text-decoration: none; }
.brand-nav a:hover,.brand-nav a[href="#brand-download"] { color: var(--rade-color-primary); }
.brand-section { margin: 40px 0; }
.brand-section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.brand-section__head > div { min-width: 0; }
.brand-section__head p { max-width: 350px; font-size: var(--rade-text-body-size); line-height: var(--rade-text-body-line); }
.brand-evolution { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; }
.brand-evolution figure { border: 1px solid var(--brand-border); border-radius: 16px; overflow: hidden; background: var(--rade-color-surface); }
.brand-evolution__preview { display: grid; place-items: center; height: 160px; padding: 24px; background: var(--rade-white); }
.brand-evolution__preview img { width: 235px; max-width: 100%; height: auto; }
.brand-evolution__new .brand-evolution__preview { background: color-mix(in srgb, var(--rade-maya) 10%, var(--rade-white)); }
.brand-evolution figcaption { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: var(--rade-text-body-size); }
.brand-evolution figcaption span { color: var(--rade-color-text-muted); font-size: var(--rade-text-caption-size); }
.brand-evolution__arrow { display: grid; place-items: center; color: var(--rade-color-primary); }
.brand-logos { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.brand-logo-card { display: flex; flex-direction: column; border: 1px solid var(--brand-border); border-radius: 16px; overflow: hidden; background: var(--rade-color-surface); }
.brand-logo-card__preview { display: grid; place-items: center; height: 160px; padding: 24px; }
.brand-logo-card__preview--light { background: var(--rade-white); color: var(--rade-black); }
.brand-logo-card__preview--dark { background: var(--rade-black); color: var(--rade-white); }
.brand-logo-card__preview--blue { background: var(--rade-persian); color: var(--rade-white); }
.brand-logo-card__preview img { width: 180px; max-width: 100%; height: auto; max-height: 112px; object-fit: contain; }
.brand-logo-card__preview img[src*="/default-logo/"] { width: 46px; }
.brand-logo-card__preview img[src*="favicon-"] { width: 88px; }
.brand-logo-card__info { display: flex; flex: 1; flex-direction: column; padding: 16px; }
body .brand-logo-card__info h3 { font-size: var(--rade-text-body-size); line-height: var(--rade-text-body-line); font-weight: var(--rade-font-weight-bold); }
.brand-logo-card__info p { font-size: var(--rade-text-caption-size); line-height: var(--rade-text-caption-line); }
.brand-logo-card__info > div { margin-bottom: 12px; }
.brand-file-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: auto; border: 1px solid var(--brand-border); border-radius: 8px; font-size: var(--rade-text-body-size); text-decoration: none !important; }
.brand-file-link:hover { background: var(--rade-color-primary-subtle); }
.brand-legacy { margin-top: 20px; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--rade-color-surface); }
.brand-legacy summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 20px; cursor: pointer; list-style: none; font-size: var(--rade-text-body-size); }
.brand-legacy summary::-webkit-details-marker { display: none; }
.brand-legacy summary span { margin-inline-start: auto; color: var(--rade-color-text-muted); font-size: var(--rade-text-caption-size); }
.brand-legacy[open] summary svg { transform: rotate(180deg); }
.brand-legacy__files { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 20px 20px; }
.brand-legacy__file { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 16px; border: 1px solid var(--brand-border); border-radius: 12px; text-decoration: none !important; }
body .brand-page a.brand-legacy__file.brand-logo-card__preview--dark { color: var(--rade-white); }
.brand-legacy__file img { width: 220px; max-width: 100%; height: auto; }
.brand-legacy__file span { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--rade-text-body-size); }
.brand-panel { border: 1px solid var(--brand-border); border-radius: 20px; background: var(--rade-color-primary-subtle); padding: 32px; }
.brand-type__intro p { margin-top: 16px !important; }
.brand-endnote { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--brand-border); font-size: var(--rade-text-body-size); }
.brand-colors { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.brand-color { min-width: 0; border: 1px solid var(--brand-border); border-radius: 16px; overflow: hidden; background: var(--rade-color-surface); }
.brand-color__swatch { display: grid; place-items: center; height: 132px; color: var(--rade-white); }
.brand-color--navy .brand-color__swatch { background: var(--rade-navy); }
.brand-color--persian .brand-color__swatch { background: var(--rade-persian); }
.brand-color--dodger .brand-color__swatch { background: var(--rade-dodger); }
.brand-color--maya .brand-color__swatch { background: var(--rade-maya); }
.brand-color--black .brand-color__swatch { background: var(--rade-black); }
.brand-color--white .brand-color__swatch { background: var(--rade-white); border-bottom: 1px solid var(--brand-border); }
.brand-color__label { display: grid; gap: 4px; padding: 16px 12px; }
.brand-color__label strong,.brand-color__label code { direction: ltr; text-align: right; font-family: inherit; font-size: var(--rade-text-body-size); line-height: var(--rade-text-body-line); background: transparent; padding: 0; color: var(--rade-color-text); }
.brand-color__label span { min-height: 22px; color: var(--rade-color-text-muted); font-size: var(--rade-text-caption-size); }
.brand-type { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
.brand-type__name { display: grid; gap: 4px; direction: ltr; text-align: right; margin-top: 24px; font-size: var(--rade-text-h3-size); font-weight: var(--rade-font-weight-bold); }
.brand-type__name span { color: var(--rade-color-text-muted); font-size: var(--rade-text-caption-size); font-weight: var(--rade-font-weight-regular); }
.brand-type__specimen { border: 1px solid var(--brand-border); border-radius: 20px; padding: 28px; background: var(--rade-color-surface); }
body .brand-type__specimen h3 { margin: 16px 0 20px !important; }
.brand-type__numbers { display: grid; gap: 8px; margin: 16px 0 24px; font-size: var(--rade-text-prose-size); font-weight: var(--rade-font-weight-bold); }
.brand-type__numbers span { direction: ltr; text-align: right; }
.brand-type__weights { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--brand-border); font-size: var(--rade-text-caption-size); }
.brand-type__weights span { display: grid; gap: 4px; direction: ltr; }
.brand-type__weights span:nth-child(2) { font-weight: var(--rade-font-weight-medium); }
.brand-type__weights span:nth-child(3) { font-weight: var(--rade-font-weight-bold); }
.brand-type__weights b { font-weight: inherit; }
.brand-applications { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.brand-applications figure { min-width: 0; }
.brand-mockup { display: flex; align-items: center; justify-content: center; gap: 20px; height: 260px; padding: 28px; border: 1px solid var(--brand-border); border-radius: 20px; overflow: hidden; }
.brand-mockup--digital { background: color-mix(in srgb, var(--rade-maya) 16%, var(--rade-white)); color: var(--rade-navy); }
.brand-mockup--digital > span { line-height: 1.9; font-size: var(--rade-text-body-size); }
.brand-mockup__app { display: grid; place-items: center; flex-shrink: 0; width: 100px; height: 100px; border-radius: 24px; background: var(--rade-persian); box-shadow: 0 16px 32px color-mix(in srgb, var(--rade-persian) 20%, transparent); transform: rotate(-10deg); }
.brand-mockup__app img { width: 30px; height: 63px; }
.brand-mockup--social { background: var(--rade-color-primary-subtle); }
.brand-mockup__post { display: grid; justify-items: start; gap: 12px; width: 210px; min-height: 200px; padding: 24px; border: 1px solid color-mix(in srgb, var(--rade-persian) 15%, var(--rade-white)); border-radius: 8px; background: var(--rade-white); color: var(--rade-navy); transform: rotate(6deg); }
.brand-mockup__post img { width: 24px; height: 50px; }
.brand-mockup__post strong { font-size: var(--rade-text-h5-size); line-height: var(--rade-text-h5-line); }
.brand-mockup__post > span { color: var(--rade-persian); font-size: var(--rade-text-caption-size); }
.brand-mockup--card { background: var(--rade-color-primary-subtle); }
.brand-mockup__card { position: relative; display: grid; align-content: space-between; width: 260px; height: 160px; padding: 20px; border-radius: 12px; background: var(--rade-persian); color: var(--rade-white); box-shadow: 0 16px 28px color-mix(in srgb, var(--rade-persian) 20%, transparent); transform: rotate(-9deg); }
.brand-mockup__card img { position: absolute; top: 20px; left: 20px; width: 25px; height: 53px; }
.brand-mockup__card strong { font-size: var(--rade-text-body-size); line-height: var(--rade-text-body-line); }
.brand-mockup__card > span { font-size: var(--rade-text-caption-size); }
.brand-applications figcaption { padding-top: 12px; text-align: center; color: var(--rade-color-text-muted); }

@media (max-width: 991.98px) {
    .brand-hero { gap: 24px; }
    .brand-hero__art { padding: 24px; }
    .brand-section__head { align-items: start; flex-direction: column; gap: 12px; }
    .brand-section__head p { max-width: none; }
    .brand-logos { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .brand-colors { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .brand-panel { padding: 24px; }
    .brand-type { gap: 24px; }
    .brand-mockup { padding: 20px 12px; gap: 12px; }
    .brand-mockup__app { width: 76px; height: 76px; border-radius: 20px; }
}
@media (max-width: 767.98px) {
    body .brand-page { margin: 20px auto 32px; }
    .brand-hero,.brand-type { grid-template-columns: 1fr; }
    .brand-hero { gap: 16px; }
    .brand-hero__copy { padding: 0; }
    .brand-hero__art { min-height: 156px; padding: 20px; gap: 12px; }
    .brand-hero__art img { width: 190px; }
    .brand-actions { gap: 12px 20px; margin-top: 16px; }
    .brand-nav { gap: 0 20px; margin: 16px 0 24px; }
    .brand-nav a { font-size: var(--rade-text-caption-size); }
    .brand-section { margin: 32px 0; }
    .brand-evolution { grid-template-columns: 1fr 24px 1fr; }
    .brand-evolution__preview { height: 125px; padding: 16px 12px; }
    .brand-evolution figcaption { align-items: start; flex-direction: column; gap: 4px; padding: 12px; }
    .brand-logos { gap: 12px; }
    .brand-logo-card__preview { height: 132px; padding: 16px 12px; }
    .brand-logo-card__preview img { max-height: 100px; }
    .brand-logo-card__info { padding: 12px; }
    .brand-legacy summary { padding: 12px; gap: 8px; flex-wrap: wrap; }
    .brand-legacy__files { grid-template-columns: 1fr; padding: 0 12px 12px; }
    .brand-colors { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .brand-color__swatch { height: 96px; }
    .brand-panel,.brand-type__specimen { padding: 20px; }
    .brand-applications { grid-template-columns: 1fr; gap: 20px; }
    .brand-mockup { height: 220px; }
    .brand-endnote { align-items: start; flex-direction: column; gap: 8px; }
}