/* Shared visual system, based on the approved dark-blue reference. */
.reference-design {
 --color-primary: #09478e;
 --color-primary-hover: #073265;
 --color-primary-soft: #edf6ff;
 --color-text: #253b55;
 --color-text-strong: #092956;
 --color-muted: #526b89;
 --color-border: #deebf6;
 --color-border-strong: #bfd4e8;
 --color-bg: #f5f9fe;
 --radius-card: 14px;
 --article-width: 100%;
 background: var(--color-bg);
}
.reference-design .site-header { background: #052653; border-bottom: 0; }
.reference-design .header-inner { max-width: 1320px; }
.reference-design .site-brand { gap: 12px; flex: 0 1 auto; }
.reference-design .site-brand-name { min-width: 0; }
.reference-design .site-brand-mark { width: 66px; flex-basis: 66px; }
.reference-design .site-brand-name .site-brand-title { display: block; font: 600 1.45rem/1.25 Georgia, serif; letter-spacing: 0; }
.reference-design .brand-domain { color: #64ddf1; }
.reference-design .site-brand-name .site-brand-subtitle { font-size: .82rem; font-style: normal; color: #bed3e9; margin-top: 5px; letter-spacing: .02em; }
.reference-design .site-nav { border-color: #ffffff1a; gap: 4px; }
.reference-design .site-nav a { font-size: .85rem; padding: 7px; }
.reference-design .mobile-menu summary { border: 1px solid #ffffff40; border-radius: 8px; padding: 7px 12px; }
.reference-design .mobile-menu nav { z-index: 20; box-shadow: 0 15px 40px #001c3d30; border: 1px solid #d9e7f5; border-radius: 12px; }
.reference-design main { max-width: 1320px; padding: 0 32px 64px; }
.reference-design .page-banner { position: relative; isolation: isolate; overflow: hidden; padding: 32px 48px 64px; background: radial-gradient(ellipse at 95% 60%, #13548a 0, #073164 40%, #052653 75%); border-radius: 0 0 16px 16px; }
.reference-design .page-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/images/brand/home-neural-lines.svg') right center / cover no-repeat; opacity: .32; }
.reference-design .page-banner h1 { color: #fff; font: 400 clamp(2.25rem, 4vw, 3.5rem)/1.16 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; margin: 0; max-width: 28ch; overflow-wrap: break-word; }
.reference-design .page-banner .breadcrumbs { margin: 0 0 26px; font-size: .8rem; }
.reference-design .page-banner .breadcrumbs :is(a, span, li), .reference-design .page-banner .breadcrumbs li::after { color: #c4ddf3; }
.reference-design .page-banner .breadcrumbs a:hover { color: white; }
.reference-design .page-banner .updated { color: #c1d7ec; margin: 18px 0 0; font-size: .82rem; }
.reference-design .page-surface:not(.page-surface--home) { position: relative; margin: -28px 20px 0; padding: 40px; background: #fff; border: 1px solid #e1ecf6; border-radius: 16px; box-shadow: 0 10px 30px #123d6904; }
.reference-design .page-content { max-width: none; margin: 0 auto; }
.reference-design h2 { font: 400 1.9rem/1.3 Georgia, 'Times New Roman', serif; letter-spacing: -.015em; }
.reference-design h3 { font-size: 1.2rem; line-height: 1.4; }
.reference-design :is(h2, h3, h4) { color: #092956; }
.reference-design p, .reference-design li { overflow-wrap: break-word; }
.reference-design a { text-underline-offset: 3px; }
.reference-design a:focus-visible, .reference-design summary:focus-visible { outline: 3px solid #009db7; outline-offset: 4px; border-radius: 4px; }
.reference-design .page-content :is(.card, .section-link, .topic-guide) { border: 1px solid #deebf6; border-radius: 12px; background: linear-gradient(130deg, #edf6ff, #f8fbff); padding: 22px; text-decoration: none; }
.reference-design .page-content :is(.card, .section-link, .topic-guide):hover { background: #e8f4ff; border-color: #8dbbdf; }
.reference-design .page-content .section-links { border: 0; padding: 0; }
.reference-design .page-content .section-links-grid { gap: 14px; }
.reference-design .page-content .section-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 90px; }
.reference-design .page-content .section-link-label { font-size: 1rem; font-weight: 600; }
.reference-design .section-link-arrow { display: inline; color: #0665b6; }
.reference-design :is(.audience-actions, .topic-back, .pub-jump-nav) { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 0 0 24px; border-bottom: 1px solid #e1ecf6; margin-bottom: 28px; font-size: .92rem; }
.reference-design .audience-actions .primary-link { padding: 10px 18px; }
.reference-design :is(.materials, .audience-page) > .section { margin-top: 40px; }
.reference-design :is(.materials, .audience-page) .section h2 { font: 400 1.9rem/1.3 Georgia, serif; }
.reference-design .material-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.reference-design .material-list > li { border: 0; background: #f0f7fe; border-radius: 12px; min-width: 0; }
.reference-design .page-content .material-row { padding: 22px; height: 100%; gap: 12px; grid-template-columns: minmax(0, 1fr) 18px; }
.reference-design .material-row .material-level { grid-column: 1; grid-row: 2; font-size: .75rem; }
.reference-design .material-row .material-arrow { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.reference-design .material-title { font-size: 1.05rem; color: #0b3566; }
.reference-design .material-description { font-size: .9rem; }
.reference-design .page-banner--about { min-height: 285px; display: flex; align-items: center; }
.reference-design .page-banner--about .page-banner-copy { max-width: 67%; }
.reference-design .page-banner-portrait { position: absolute; bottom: 0; right: 48px; height: 265px; width: 250px; object-fit: cover; object-position: top; }
.reference-design .profile-intro { grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; }
.reference-design .profile-photo { border-radius: 12px; }
.reference-design .profile-section, .reference-design .science-section { border-color: #deebf6; }
.reference-design .science-page { max-width: none; }
.reference-design .science-photos { overflow: hidden; border-radius: 12px; }
.reference-design .science-photos img { border-radius: 12px; }
.reference-design .pub-group { border: 1px solid #deebf6; border-radius: 12px; background: #f6faff; overflow: hidden; margin-bottom: 16px; }
.reference-design .pub-group > summary { padding: 18px 24px; background: #edf6ff; color: #092956; }
.reference-design .pub-group .pub-list { background: #fff; padding: 0 24px 20px; border: 0; }
.reference-design .pub-title { color: #092956; }
.reference-design .badge { border: 0; background: #e8f3ff; color: #245a8d; border-radius: 5px; }
.reference-design .location-panel { border: 1px solid #deebf6; border-radius: 14px; background: #f6faff; padding: 28px; }
.reference-design .location-panel h2 { font-size: 1.6rem; }
.reference-design .map-container { overflow: hidden; border-radius: 10px; }
.reference-design .related { margin-top: 40px; padding-top: 28px; border-color: #deebf6; }
.reference-design .related h2 { font-size: 1.6rem; }
/* Articles have a light title area and a calm, narrower reading column. */
.reference-design.reading-page .page-banner { background: #fff; border: 1px solid #e1ecf6; border-bottom: 0; border-radius: 0; padding-bottom: 32px; }
.reference-design.reading-page .page-banner::before { display: none; }
.reference-design.reading-page .page-banner h1 { color: #092956; max-width: 30ch; font-size: clamp(2rem, 3.5vw, 3.1rem); }
.reference-design.reading-page .page-banner .breadcrumbs :is(a, span, li) { color: #4d6d91; }
.reference-design.reading-page .page-banner .updated { color: #526b89; }
.reference-design.reading-page .page-surface { margin: 0; padding: 8px 48px 48px; border-top: 0; border-radius: 0 0 16px 16px; }
.reference-design .topic-reading { grid-template-columns: minmax(0, 780px) minmax(0, 230px); gap: 36px; }
.reference-design .topic-copy { max-width: 780px; }
.reference-design :is(.topic-copy, .article-body) { font-size: 1.0625rem; line-height: 1.8; }
.reference-design :is(.topic-copy, .article-body) h2 { font-family: var(--font-sans); font-size: 1.45rem; line-height: 1.4; font-weight: 650; margin-top: 2.5rem; }
.reference-design :is(.topic-copy, .article-body) h3 { font-size: 1.17rem; }
.reference-design .topic-toc { padding: 18px; border: 1px solid #e0ecf8; border-radius: 12px; background: #f0f7ff; }
.reference-design .topic-toc a { font-size: .86rem; }
.reference-design .topic-audiences { border-color: #deebf6; border-radius: 12px; }
.reference-design .topic-audiences a { background: #f0f7ff; }
.reference-design .topic-audiences a:first-child { background: #e7f2ff; }
.reference-design .topic-guide-grid { gap: 16px; }
.reference-design .topic-guide strong { font-size: 1.05rem; }
.reference-design .topic-syndromes { gap: 14px; }
.reference-design .topic-syndromes li { border: 1px solid #e1ecf6; background: #f4f9ff; border-radius: 12px; }
.reference-design .topic-syndromes a { padding: 20px; }
.reference-design .topic-syndromes span { font-size: .9rem; }
.reference-design .topic-professional { border-top-color: #1c6ba9; }
.reference-design :is(.topic-copy, .article-body) figure { background: #f6faff; border: 1px solid #e2edf8; border-radius: 12px; padding: 12px; margin-inline: 0; }
.reference-design :is(.topic-copy, .article-body) figure img { border-radius: 6px; }
.reference-design :is(.topic-copy, .article-body) figcaption { color: #526b89; font-size: .88rem; line-height: 1.6; }
.reference-design .mobile-accordion { border: 1px solid #deebf6; border-radius: 10px; overflow: hidden; }
.reference-design .mobile-accordion > summary { background: #edf6ff; color: #092956; }
.reference-design .reading-progress { background: #27bfd7; }
.reference-design .site-footer { background: #052653; color: #c1d4e9; border: 0; }
.reference-design .site-footer :is(p, a, .footer-bottom) { color: #c1d4e9; }
.reference-design .site-footer .footer-name { color: #fff; }
.reference-design .footer-inner { max-width: 1320px; }
.reference-design .footer-bottom { max-width: 1256px; border-color: #ffffff20; }
@media(min-width: 1200px) {
 .reference-design .article-layout--reading .article-reading { grid-template-columns: minmax(0, 780px) minmax(0, 230px); gap: 36px; }
 .reference-design .page-content .article-layout--reading .table-of-contents { padding: 18px; background: #f0f7ff; border: 1px solid #deebf6; border-radius: 12px; }
 .reference-design .article-layout--reading .toc-list a { font-size: .86rem; }
}
@media(max-width: 1000px) {
 .reference-design main { padding-inline: 20px; }
 .reference-design .page-banner { padding: 28px 32px 56px; }
 .reference-design .page-surface:not(.page-surface--home) { margin-inline: 10px; padding: 28px; }
 .reference-design.reading-page .page-surface { margin: 0; padding: 8px 32px 32px; }
 .reference-design .topic-reading { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 .reference-design .topic-copy { max-width: none; }
 .reference-design .topic-mobile-toc { background: #edf6ff; border: 1px solid #deebf6; border-radius: 10px; padding: 14px 18px; }
 .reference-design .profile-intro { grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; }
}
@media(max-width: 600px) {
 .reference-design { font-size: 16px; }
 .reference-design main { padding: 0 12px 40px; }
 .reference-design .header-inner { padding-inline: 20px; }
 .reference-design .site-brand-mark { width: 46px; flex-basis: 46px; }
 .reference-design .site-brand-name .site-brand-title { font-size: 1.08rem; }
 .reference-design .site-brand-name .site-brand-subtitle { font-size: .72rem; }
 .reference-design .site-brand-name .brand-domain { display: inline; }
 .reference-design .site-brand { gap: 8px; }
 .reference-design .mobile-menu { flex-shrink: 0; }
 .reference-design .page-banner { padding: 24px 22px 48px; border-radius: 0 0 12px 12px; }
 .reference-design .page-banner h1 { font-size: 2.15rem; line-height: 1.18; }
 .reference-design .page-banner .breadcrumbs { margin-bottom: 20px; font-size: .75rem; }
 .reference-design .page-surface:not(.page-surface--home) { margin: -20px 4px 0; padding: 24px 18px; border-radius: 12px; }
 .reference-design.reading-page .page-banner { padding: 24px 22px; }
 .reference-design.reading-page .page-banner h1 { font-size: 2rem; }
 .reference-design.reading-page .page-surface { margin: 0; padding: 0 22px 28px; border-radius: 0 0 12px 12px; }
 .reference-design h2, .reference-design :is(.materials, .audience-page) .section h2 { font-size: 1.65rem; }
 .reference-design .material-list { grid-template-columns: 1fr; }
 .reference-design .page-content .material-row { padding: 18px; }
 .reference-design .material-title { font-size: 1rem; }
 .reference-design .page-banner--about { min-height: 240px; }
 .reference-design .page-banner--about .page-banner-copy { max-width: 60%; }
 .reference-design .page-banner-portrait { width: 130px; height: 185px; right: 0; }
 .reference-design .profile-intro { grid-template-columns: 1fr; }
 .reference-design .profile-photo { width: 180px; max-width: 100%; }
 .reference-design .topic-guide-grid, .reference-design .topic-syndromes { grid-template-columns: 1fr; }
 .reference-design .topic-syndromes a { padding: 18px; }
 .reference-design .location-panel { padding: 20px; }
 .reference-design .location-panel h2 { font-size: 1.4rem; }
 .reference-design .pub-group > summary { padding: 16px; }
 .reference-design .pub-group .pub-list { padding-inline: 16px; }
 .reference-design .footer-inner { padding-inline: 24px; }
}
@media(prefers-reduced-motion: reduce) {
 .reference-design *, .reference-design *::before, .reference-design *::after { scroll-behavior: auto; transition: none !important; }
}