/* Companion reading pages; the immersive homepage is unchanged. */
.guide-layout { background: #050607; }
.guide-layout .masthead { position: static; margin: 34px 5vw 24px; direction: ltr; }
.guide-layout .wordmark { width: min(340px, 60vw); flex-basis: min(340px, 60vw); }
.guide-home { font-size: 13px; color: #d7c28b; }
.guide-languages { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 5vw; padding-bottom: 24px; border-bottom: 1px solid #b49a4d35; font-size: 12px; }
.guide-languages a { padding-block: 8px; color: #999; }
.guide-languages [aria-current="page"] { color: #e8cb80; }
.guide-reading { max-width: 830px; margin: 70px auto 100px; padding-inline: 28px; }
.guide-reading h1 { font-size: clamp(30px, 4vw, 52px); line-height: 1.2; letter-spacing: -.025em; text-transform: none; overflow-wrap: break-word; }
.guide-reading .guide-intro { color: #d2d1cb; font-size: 19px; margin: 28px 0 48px; }
.guide-reading section { margin-block: 42px; }
.guide-reading h2 { font-size: 23px; line-height: 1.4; font-weight: 400; color: #e6dfcc; }
.guide-reading p { color: #b1b3b3; line-height: 1.9; }
.guide-related { margin-top: 50px; border-top: 1px solid #b49a4d35; padding-top: 22px; }
.guide-related a { display: block; color: #dfc88d; margin-block: 16px; line-height: 1.6; }
.guide-sources { margin-top: 40px; font-size: 12px; color: #aaa; }
.guide-layout a:hover { color: #fff; }
.guide-layout a:focus-visible { outline: 1px solid #e0c684; outline-offset: 5px; }
:root[lang="ar"] .guide-reading { line-height: 1.9; }
:root[lang="ar"] .guide-reading h1 { line-height: 1.5; }
@media (max-width: 500px) { .guide-layout .masthead { margin-top: 25px; } .guide-reading { margin-top: 40px; padding-inline: 23px; } .guide-reading .guide-intro { font-size: 17px; } .guide-reading h2 { font-size: 21px; } }