:root{color-scheme:light;--navy:#173f73;--ink:#1c3349;--muted:#526477;--line:#d7e3e8;--green:#e9f5f1;--blue:#145c82;font-family:Arial,Tahoma,sans-serif;font-size:16px;line-height:1.65;color:var(--ink);background:#fff}
*{box-sizing:border-box}body{margin:0}a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:4px}a:focus-visible{outline:3px solid #ab6112;outline-offset:5px}a:hover{color:var(--navy)}.resource-shell{max-width:1160px;margin:auto;padding:32px clamp(18px,4vw,48px)}.intro{padding:22px 0 30px;border-bottom:3px solid var(--navy)}.brand{font-weight:800;font-size:1.15rem;letter-spacing:2px;color:var(--navy);margin:0 0 24px}.brand span{display:block;font-size:.75rem;letter-spacing:1.25px;font-weight:600}h1{font-size:1.75rem;line-height:1.2;color:var(--navy);margin:0 0 16px;overflow-wrap:anywhere}.subtitle{font-size:1.2rem;font-weight:600;margin:0 0 10px;color:var(--navy)}.description{color:var(--muted);max-width:750px;margin:0;font-size:1rem}.group{padding-top:30px}.group-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}.group-header h2{font-size:1.35rem;color:var(--navy);margin:0}.group-header p{font-size:.875rem;color:var(--muted);margin:0}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.resource{border:1px solid var(--line);border-radius:6px;padding:24px;display:flex;flex-direction:column;min-width:0;background:#fff}.resource-kind{font-size:.875rem;font-weight:700;color:var(--blue);margin:0 0 14px}.resource h3{font-size:1.2rem;line-height:1.5;margin:0 0 14px;color:var(--navy)}.resource h3 a{color:inherit;text-decoration:none}.resource h3 a:hover{text-decoration:underline}.summary{font-size:1rem;margin:0 0 16px}.resource-note{font-size:.875rem;padding:12px 14px;background:var(--green);border-inline-start:3px solid #32756b;margin:0 0 18px}.citation{font-size:.875rem;color:var(--muted);overflow-wrap:anywhere;margin:0 0 18px}.metadata{border-top:1px solid var(--line);padding-top:15px;margin-top:auto;display:flex;flex-direction:column;gap:5px;font-size:.875rem;color:var(--muted)}.source{font-weight:700}.read-link{display:inline-block;align-self:flex-start;font-size:1rem;font-weight:700;margin-top:16px}footer{border-top:1px solid var(--line);margin-top:32px;padding-top:18px;font-size:.875rem;color:var(--muted)}footer p{margin:0}#loading{padding:24px 0}html[lang=ar]{font-family:Tahoma,Arial,sans-serif;line-height:1.9}html[lang=ar] h1{font-size:1.75rem;line-height:1.55}html[lang=ar] .resource h3{line-height:1.8}@media(max-width:640px){.resource-shell{padding:18px}.resource-grid{grid-template-columns:1fr;gap:16px}.group-header{display:block}.group-header p{margin-top:4px}.resource{padding:20px}.intro{padding-top:10px}.brand{margin-bottom:18px}}

#resources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start;padding-top:32px}
.expertise{border:1px solid #6655b8;border-top:4px solid #514095;border-radius:6px;background:#6655b8;min-width:0;overflow:hidden}
.expertise-toggle{list-style:none;cursor:pointer;padding:22px;min-height:340px;display:flex;flex-direction:column;gap:16px}
.expertise-toggle::-webkit-details-marker{display:none}.expertise-toggle:focus-visible{outline:3px solid #ab6112;outline-offset:-4px}
.expertise h2{font-size:1.2rem;line-height:1.5;margin:0;color:var(--navy)}.area-description{margin:0;font-size:1rem;color:var(--ink)}
.expand-label{margin-top:auto;font-weight:700;font-size:.9rem;color:var(--navy)}.expand-label:after{content:' +';font-size:1.25rem}.expertise[open] .expand-label:after{content:' −'}
.reference-list{margin:0;padding:0 22px 10px;list-style:none;background:white}.reference-entry{padding:20px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.reference-entry:last-child{border-bottom:0}.reference-entry>a{display:block;font-weight:700;line-height:1.6;padding:4px 0}.reference-meta,.reference-note{font-size:.85rem;color:var(--muted);margin:8px 0 0}
@media(max-width:1000px){#resources{grid-template-columns:repeat(2,minmax(0,1fr))}.expertise-toggle{min-height:280px}}
@media(max-width:600px){#resources{grid-template-columns:1fr;gap:16px}.expertise-toggle{min-height:0;padding:22px}.expand-label{margin-top:4px}}

/* Match the custom font families configured on the Respona website. */
@font-face{font-family:ResponaLight;src:url('assets/fonts/SaudiaSans-Light.woff2') format('woff2');font-display:swap}
@font-face{font-family:ResponaBlack;src:url('assets/fonts/SaudiaSans-Black.woff') format('woff');font-display:swap}
@font-face{font-family:ResponaHeading;src:url('assets/fonts/SaudiaSans-SemiBoldItalic.woff2') format('woff2');font-display:swap}
:root,html[lang=ar]{font-family:ResponaLight,Tahoma,Arial,sans-serif}
h1{font-family:ResponaBlack,Tahoma,Arial,sans-serif;font-weight:400}
.subtitle,.expertise h2,.expand-label,.reference-entry>a{font-family:ResponaHeading,Tahoma,Arial,sans-serif;font-weight:400}
.expertise h2,.expertise .area-description,.expertise .expand-label{color:#fff}
.expertise-toggle:focus-visible{outline-color:#fff}
.reference-list{background:#6655b8;color:#fff}
.reference-entry{border-color:#a99bdc}
.reference-entry>a,.reference-entry>a:hover,.reference-meta,.reference-note{color:#fff}
.reference-entry>a:focus-visible{outline-color:#fff}

/* The whole section follows the host; the four panels use a related contrasting surface. */
:root{--section-bg:#6655b8;--section-text:#fff;--card-bg:#57499e;--card-text:#fff;background:var(--section-bg);color:var(--section-text)}
body{background:var(--section-bg)}
.intro{border-color:var(--section-text)}
h1,.subtitle,.description,#loading{color:var(--section-text)}
.expertise{background:var(--card-bg);border:1px solid var(--card-text);border-top-width:3px}
.expertise h2,.expertise .area-description,.expertise .expand-label,.reference-meta,.reference-note{color:var(--card-text)}
.reference-list{background:var(--card-bg);color:var(--card-text)}
.reference-entry{border-color:var(--card-text)}
.reference-entry>a,.reference-entry>a:hover{color:var(--card-text)}
.expertise-toggle:focus-visible,.reference-entry>a:focus-visible{outline-color:var(--card-text)}
.expertise-image{display:block;width:calc(100% + 44px);max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover;margin:-22px -22px 4px;border-bottom:1px solid rgba(255,255,255,.3)}
.expertise-toggle{min-height:510px}
@media(max-width:1000px){.expertise-toggle{min-height:470px}}
@media(max-width:600px){.expertise-toggle{min-height:0}}

/* Reference detail stays inside its subject card and inherits its existing theme. */
.reference-detail{margin-top:14px;color:var(--card-text)}
.reference-detail-toggle{cursor:pointer;padding:8px 0;font-family:ResponaHeading,Tahoma,Arial,sans-serif;font-size:.95rem}
.reference-detail-toggle:focus-visible{outline:2px solid var(--card-text);outline-offset:3px}
.reference-summary{font-size:1rem;margin:10px 0;line-height:1.75}
.reference-detail .reference-note{margin:10px 0;padding-inline-start:10px;border-inline-start:2px solid var(--card-text);font-size:.9rem}
.citation-label{font-family:ResponaHeading,Tahoma,Arial,sans-serif;font-size:.9rem;margin:16px 0 4px}
.reference-citation{font-size:.9rem;line-height:1.65;overflow-wrap:anywhere;unicode-bidi:plaintext;margin:0 0 8px;color:var(--card-text)}

/* Shared bilingual heading scale: sections 32/30px; subheadings 28px. */
h1,html[lang=ar] h1{font-size:32px}
.expertise h2,.group-header h2,.resource h3{font-size:28px;overflow-wrap:break-word}
@media(max-width:767px){h1,html[lang=ar] h1{font-size:30px}}