/* Editorial manual; all interface colors follow the portal's theme.css. */
body[data-page-kind="brand-manual"] { margin: 0; color: var(--text-color); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
body[data-page-kind="brand-manual"] *, body[data-page-kind="brand-manual"] *::before, body[data-page-kind="brand-manual"] *::after { box-sizing: border-box; }
body[data-page-kind="brand-manual"] :is(a, button):focus-visible { outline: 3px solid var(--accent-color); outline-offset: 4px; }
body[data-page-kind="brand-manual"] a { color: var(--accent-color); text-underline-offset: .2em; }
body[data-page-kind="brand-manual"] p { line-height: 1.6; }
body[data-page-kind="brand-manual"] button { font: inherit; }
.brand-skip { position: fixed; left: 1rem; top: -5rem; z-index: 20; padding: .75rem; background: var(--bg-surface); }
.brand-skip:focus { top: .5rem; }
.brand-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 3vw, 3rem); border-bottom: 1px solid var(--border-color); }
.brand-home { display: inline-flex; align-items: center; gap: .7rem; font-weight: 700; text-decoration: none; color: var(--text-color) !important; }
.brand-header-context { font-weight: 400; color: var(--text-muted); }
.brand-header-actions, .brand-download-actions { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.brand-button { display: inline-flex; justify-content: center; align-items: center; gap: .7rem; min-height: 44px; padding: .6rem 1rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-surface); color: var(--text-color) !important; text-decoration: none; font-weight: 600; cursor: pointer; }
.brand-button:hover { background: var(--bg-surface-2); }
.brand-button-primary { background: var(--text-color); color: var(--bg-surface) !important; border-color: var(--text-color); }
.brand-button-primary:hover { background: var(--brand-text); border-color: var(--brand-text); }
.brand-layout { max-width: 1600px; margin: auto; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.brand-index { position: sticky; top: 0; align-self: start; display: grid; gap: .25rem; padding: 2.5rem 1.25rem 2rem 2rem; }
.brand-index > a { display: flex; align-items: center; min-height: 44px; gap: .85rem; color: var(--text-muted) !important; text-decoration: none; border-radius: 8px; padding: .5rem; }
.brand-index > a:hover { color: var(--text-color) !important; background: var(--bg-surface-2); }
.brand-index > a span { font-family: var(--font-mono); font-size: .7rem; }
.brand-index .brand-back { margin-top: 2rem; font-size: .875rem; }
.brand-main { min-width: 0; padding: 0 clamp(1.25rem, 4.3vw, 5.5rem); border-left: 1px solid var(--border-color); }
.brand-eyebrow { margin: 0 0 .8rem; text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; font-weight: 650; color: var(--text-muted); }
.brand-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 2rem; }
.brand-hero h1 { font-size: clamp(3.3rem, 7.7vw, 7.2rem); line-height: .96; letter-spacing: -.055em; font-weight: 720; margin: 1.6rem 0; }
.brand-hero h1 em { font-style: normal; color: var(--brand-text); }
.brand-lead { max-width: 34rem; font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--text-muted); }
.brand-engineering { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 400; }
.brand-home .brand-mark { font-size: 1.25rem; }
.brand-signature-art { max-width: 800px; }
.brand-hero-signature, .brand-logo-stage { display: grid; place-items: center; }
.brand-hero-signature { min-height: 190px; margin: 2.5rem 0 1.6rem; padding: 2rem; background: var(--bg-surface-2); border: 1px solid var(--border-color); border-radius: 16px; }
.brand-meta { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; color: var(--text-muted); font-size: .8rem; }
.brand-section { scroll-margin-top: 1.5rem; border-top: 1px solid var(--border-color); padding: 3rem 0; }
.brand-section-heading { display: flex; align-items: start; gap: 1rem; margin-bottom: 1.4rem; }
.brand-number { font-family: var(--font-mono); font-size: .75rem; color: var(--brand-text); padding-top: .15rem; }
.brand-section h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 650; letter-spacing: -.035em; margin: 0; }
.brand-section h3 { font-size: 1.1rem; margin: 0 0 .65rem; font-weight: 650; }
.brand-section > p { max-width: 65ch; margin: 1rem 0 1.6rem; }
.brand-two, .brand-three { display: grid; gap: 1rem; margin: 1.5rem 0; }
.brand-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brand-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-card { padding: clamp(1.1rem, 2vw, 1.6rem); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; min-width: 0; }
.brand-card p { margin: 0 0 1rem; color: var(--text-muted); }
.brand-card p:last-child { margin-bottom: 0; }
.brand-note { font-size: .9rem; color: var(--text-muted); }
.brand-logo-stage { min-height: 170px; border: 1px solid var(--border-color); border-radius: 14px; padding: 1.5rem; }
/* Fixed brand specimens deliberately show both substrates in either UI theme. */
[data-page-kind="brand-manual"] [data-sample-theme="light"] { background: #fff; color: var(--brand-palette-navy); }
[data-page-kind="brand-manual"] [data-sample-theme="dark"] { background: #1f2b38; color: #e6edf5; }
.brand-theme-example { margin: 0; overflow: hidden; border: 1px solid var(--border-color); border-radius: 14px; }
.brand-theme-stage { display: grid; place-items: center; min-height: 190px; padding: 1.5rem; }
.brand-theme-stage img { display: block; width: 100%; height: auto; }
.brand-favicon-examples .brand-theme-stage { display: flex; align-items: flex-end; justify-content: center; gap: 1.5rem; min-height: 140px; }
.brand-favicon-size { display: grid; justify-items: center; gap: .6rem; }
.brand-favicon-size img { width: var(--favicon-size); height: var(--favicon-size); }
.brand-favicon-size span { font-size: .8rem; }
.brand-theme-example figcaption { display: grid; gap: .25rem; padding: 1rem 1.25rem; border-top: 1px solid currentColor; font-size: .8rem; }
.brand-theme-example figcaption span { opacity: .85; }
.brand-palette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.brand-swatch { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.brand-swatch-color { height: 96px; border-bottom: 1px solid var(--border-color); }
.brand-swatch-color--logo-teal { background: var(--brand-logo-bg); }.brand-swatch-color--logo-cream { background: var(--brand-logo-ink); }
.brand-swatch-color--navy { background: var(--brand-palette-navy); }.brand-swatch-color--magenta { background: var(--brand-palette-brand); }.brand-swatch-color--brand-light { background: var(--brand-palette-brand-text-light); }.brand-swatch-color--brand-dark { background: var(--brand-palette-brand-text-dark); }.brand-swatch-color--link-light { background: var(--brand-palette-link-light); }.brand-swatch-color--link-dark { background: var(--brand-palette-link-dark); }
.brand-swatch-copy { padding: 1rem; }.brand-swatch-copy h3 { font-size: 1rem; }
.brand-swatch-copy p { font-size: .9rem; color: var(--text-muted); }
.brand-swatch-copy small { color: var(--text-muted); overflow-wrap: anywhere; }
.brand-copy { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 44px; background: var(--bg-surface-2); border: 1px solid var(--border-color); border-radius: 7px; color: var(--text-color); cursor: pointer; padding: .5rem; }
.brand-copy span { font-size: .75rem; color: var(--accent-color); }.brand-copy:hover { border-color: var(--accent-color); }
.brand-table-wrap { overflow-x: auto; margin-top: 2rem; }
.brand-table-wrap table { width: 100%; text-align: left; border-collapse: collapse; font-size: .9rem; }
.brand-table-wrap caption { text-align: left; padding: .5rem 0 1rem; font-weight: 650; }
.brand-table-wrap :is(th, td) { padding: .8rem; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.brand-table-wrap th { font-weight: 600; }.brand-table-wrap code { overflow-wrap: anywhere; }
.brand-type-specimen { font-size: 6rem; line-height: 1.1; letter-spacing: -.05em; margin: 1rem 0; }.brand-alphabet { font-size: .9rem; overflow-wrap: anywhere; }
.brand-type-reading .brand-type-specimen, .brand-reading-sample { font-family: var(--font-reading); }.brand-reading-sample { font-size: 1.35rem; line-height: 1.7 !important; color: var(--text-color) !important; }
.brand-clearspace { display: flex; align-items: center; justify-content: center; gap: 1rem; border: 1px dashed var(--accent-color); border-radius: 4px; margin: 1.25rem 0; padding: 1.3rem; }.brand-clearspace .brand-mark { font-size: 2.5rem; }.brand-measure { color: var(--accent-color); font: .85rem var(--font-mono); }
.brand-rule-list { padding-left: 1.1rem; margin: 0; line-height: 1.65; }.brand-rule-list li + li { margin-top: .6rem; }
.brand-dos .brand-eyebrow { color: var(--brand-text); }
.brand-section .brand-registered-name { font-size: 2.4rem; font-weight: 720; letter-spacing: -.045em; line-height: 1.2; color: var(--brand-text); }
.brand-registered-name sup { display: inline-block; margin-inline-start: .12em; font-size: .35em; line-height: 1; vertical-align: super; letter-spacing: 0; }
.brand-application { display: flex; align-items: center; gap: 1.5rem; padding: 2rem; border-radius: 14px; background: var(--bg-surface-2); border: 1px solid var(--border-color); margin-top: 2rem; }.brand-application .brand-mark { font-size: 2.4rem; }.brand-application h3 { font-size: clamp(1.4rem, 2.7vw, 2rem); letter-spacing: -.03em; }.brand-application p { margin: .4rem 0; }.brand-application a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.brand-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }.brand-asset { overflow: hidden; border-radius: 12px; border: 1px solid var(--border-color); }.brand-asset-preview { height: 160px; display: grid; place-items: center; padding: 1.4rem; }.brand-asset-image { display: block; max-width: 100%; max-height: 110px; }.brand-asset-image--horizontal { width: 100%; }.brand-asset-image--symbol { width: 76px; }.brand-asset-image--stacked { width: 130px; }.brand-asset-info { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; }.brand-asset-info h3 { margin: 0; font-size: .95rem; }.brand-download { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.brand-footer { padding: 2rem 0; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-muted); }
.brand-status { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 10; padding: .75rem 1rem; border-radius: 10px; background: var(--text-color); color: var(--bg-surface); max-width: calc(100% - 2rem); text-align: center; }
.brand-status:empty { display: none; }
@media (max-width: 1000px) { .brand-layout { grid-template-columns: 190px minmax(0, 1fr); }.brand-index { padding: 2rem 1rem; }.brand-three { grid-template-columns: 1fr; }.brand-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 760px) { .brand-header { flex-wrap: wrap; }.brand-header-context { display: none; }.brand-header-actions { gap: .4rem; }.brand-button { padding-inline: .75rem; }.brand-layout { display: block; }.brand-index { position: static; display: flex; flex-wrap: wrap; gap: .15rem .6rem; padding: 1rem; border-bottom: 1px solid var(--border-color); }.brand-index .brand-eyebrow, .brand-index .brand-back { display: none; }.brand-index > a { font-size: .8rem; gap: .35rem; padding: .25rem; }.brand-main { border-left: 0; padding-inline: 1.25rem; }.brand-hero { padding-top: 2.5rem; }.brand-hero h1 { font-size: clamp(3.3rem, 13vw, 5rem); }.brand-hero-signature, .brand-logo-stage { padding: 1.5rem 1rem; min-height: 170px; }.brand-signature-art { max-width: 260px; }.brand-two, .brand-assets { grid-template-columns: minmax(0, 1fr); }.brand-section { padding-block: 2.25rem; }.brand-application { align-items: start; padding: 1.25rem; gap: 1rem; }.brand-application .brand-mark { font-size: 1.6rem; }.brand-table-wrap :is(th, td) { padding: .6rem .35rem; font-size: .8rem; } }
@media (max-width: 370px) { .brand-hero-signature, .brand-logo-stage { padding-inline: .5rem; } .brand-header-actions { width: 100%; }.brand-header-actions > * { flex: 1; }.brand-header-actions .brand-button { padding-inline: .5rem; gap: .4rem; white-space: nowrap; }.brand-palette { grid-template-columns: 1fr; } }
@media print { :root[data-theme] .brand-art-light { display: block; }:root[data-theme] .brand-art-dark { display: none; } body[data-page-kind="brand-manual"] { background: #fff; color: var(--brand-palette-navy); --bg-surface: #fff; --bg-surface-2: #f8fafc; --text-color: var(--brand-palette-navy); --text-muted: #425468; --border-color: #dbe2ea; --brand-text: var(--brand-palette-brand-text-light); --accent-color: var(--brand-palette-link-light); print-color-adjust: exact; -webkit-print-color-adjust: exact; }.brand-header-actions,.brand-index,.brand-download-actions,.brand-status,.brand-skip,.brand-copy span { display: none; }.brand-layout { display: block; }.brand-main { padding: 0; border: 0; }.brand-header { padding: 0 0 1rem; }.brand-hero { padding-top: 1rem; }.brand-hero h1 { font-size: 4rem; }.brand-section { padding-block: 1.5rem; }.brand-card,.brand-theme-example,.brand-asset,.brand-swatch,.brand-section-heading { break-inside: avoid; }.brand-section-heading { break-after: avoid; }.brand-button,.brand-copy { border: 0; }.brand-asset-preview { height: 120px; } }