/* Article magazine layout. Scoped to avoid changing the shared header or blog feed. */
body:has(.reader-page){background:radial-gradient(ellipse at 5% 15%,#06355288,transparent 48%),radial-gradient(ellipse at 100% 60%,#00365c66,transparent 45%),#030f1c!important}
body .reader-page{width:min(1240px,calc(100% - 48px));margin:24px auto 60px;color:#c5d5e3;font-family:inherit}
.reader-page *{box-sizing:border-box}.reader-breadcrumb{display:flex;gap:12px;align-items:center;font-size:12px;margin:0 0 18px;color:#89abc5}.reader-breadcrumb>a{color:#bedcf0;text-decoration:none}.reader-breadcrumb>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.reader-main,.reader-sidebar{min-width:0}.reader-sidebar{display:grid;gap:18px;position:sticky;top:24px}
.reader-hero,.reader-content,.reader-panel,.reader-contact{background:linear-gradient(135deg,#0b2134ee,#041423f5);border:1px solid #154766;border-radius:18px;box-shadow:0 14px 35px #0003}
.reader-hero{padding:10px;overflow:hidden}.reader-cover{display:block;position:relative;border:1px solid #1473a5;border-radius:13px;overflow:hidden;background:#071525;text-decoration:none}.reader-cover img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}.reader-cover>span{position:absolute;bottom:10px;right:10px;padding:6px 10px;border:1px solid #427495;border-radius:20px;background:#041626dc;color:#fff;font-size:11px;opacity:0;transition:opacity .2s}.reader-cover:hover>span,.reader-cover:focus-visible>span{opacity:1}
.reader-heading{padding:18px 12px 6px}.reader-category{display:inline-block;padding:5px 12px;border-radius:20px;background:#ffc447;color:#142032;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
body .reader-heading h1{font-size:clamp(25px,2.5vw,36px);line-height:1.12;letter-spacing:-.025em;color:#fff;margin:14px 0 12px;overflow-wrap:anywhere}.reader-heading>p{color:#b8cbdc;font-size:15px;line-height:1.65;margin:0 0 16px}.reader-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:11px;color:#99bdd8}.reader-meta>span:before{content:'•';color:#009bff;margin-right:7px}.reader-actions{display:flex;gap:8px;margin-left:auto}.reader-actions button,.reader-more,.reader-help>a{background:#05213a;color:#37b7ff;border:1px solid #008ee0;border-radius:10px;padding:9px 13px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none}.reader-actions button:first-child{border-color:#f27b26;color:#ff9947;background:#231a18}.reader-actions b{margin-left:4px}
.reader-content{padding:26px;margin-top:20px;font-size:16px;line-height:1.8;overflow-wrap:anywhere;color:#c5d5e3}.reader-content p,.reader-content li{color:#c5d5e3;line-height:1.8}.reader-content h2,.reader-content h3,.reader-content h4{color:#f5f9ff;line-height:1.3;letter-spacing:-.015em}.reader-content h2{font-size:24px;border-left:3px solid #ffb62c;padding-left:14px;margin:30px 0 14px}.reader-content h3{font-size:20px;margin:24px 0 12px}.reader-content>:first-child{margin-top:0}.reader-content a{color:#37b7ff}.reader-content img,.reader-content video{max-width:100%;height:auto;border-radius:12px}.reader-content table{display:block;max-width:100%;overflow:auto}.reader-content blockquote{margin:20px 0;padding:14px 20px;background:#028bd512;border:1px solid #126399;border-left:3px solid #00a8ff;border-radius:12px}.reader-anchor{display:block;scroll-margin-top:110px}
.reader-panel{padding:18px 14px}.reader-panel h2{font-size:17px;color:white;margin:0 0 15px;line-height:1.3;border-left:4px solid #008cff;padding-left:10px}.reader-index ol{list-style:none;padding:0;margin:0;max-height:340px;overflow:auto;scrollbar-width:thin}.reader-index li{margin:3px 0}.reader-index a{display:flex;gap:11px;align-items:center;color:#bcd0e4;text-decoration:none;font-size:12px;line-height:1.4;padding:5px;border:1px solid transparent;border-radius:9px}.reader-index a>span{display:grid;place-items:center;flex-shrink:0;width:26px;height:26px;border:1px solid #325e7d;border-radius:50%;font-size:11px;color:#e1effa}.reader-index a:hover,.reader-index a[aria-current]{background:#007aff20;border-color:#008cff;color:white}.reader-index a[aria-current]>span{background:#008cff;border-color:#008cff}.reader-subsection a{padding-left:15px;font-size:11px}
.reader-related-item{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;text-decoration:none;padding:8px 0;color:white}.reader-related-item img{width:80px;height:72px;object-fit:contain;border-radius:9px;background:#10283a}.reader-related-item span{font-size:9px;text-transform:uppercase;color:#ffcf61}.reader-related-item h3{font-size:12px;line-height:1.35;margin:4px 0;color:#edf6ff}.reader-related-item small{font-size:10px;color:#82aac8}.reader-more{display:block;text-align:center;margin-top:12px;border-radius:30px;font-size:11px}.reader-help{position:relative;overflow:hidden;background:radial-gradient(circle at right bottom,#006ac766,transparent 70%),#061c30}.reader-help p{font-size:13px;line-height:1.6}.reader-help>a{display:inline-block;background:#007bff;color:white}.reader-help-icon{float:right;font-size:40px;color:#2bb8ff;text-shadow:0 0 20px #009bff}.reader-contact{padding:24px;display:flex;align-items:center;gap:20px;margin:20px 0}.reader-contact h2{font-size:23px;color:#fff;margin:8px 0}.reader-contact span{font-size:11px;text-transform:uppercase;color:#ffbe49;letter-spacing:.08em}.reader-contact p{font-size:13px;margin:0}.reader-contact>a{margin-left:auto;white-space:nowrap;color:#071525;background:#ffb62c;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:800;font-size:13px}.reader-back{display:inline-block;color:#9dc8e5;margin-top:10px;font-size:13px;text-decoration:none}.reader-page :is(a,button):focus-visible{outline:2px solid #ffbd44;outline-offset:3px}
@media(max-width:1000px){.reader-layout{grid-template-columns:minmax(0,1fr) 260px;gap:16px}.reader-actions{margin-left:0}.reader-related-item{grid-template-columns:64px minmax(0,1fr)}.reader-related-item img{width:64px;height:64px}}
@media(max-width:760px){body .reader-page{width:calc(100% - 24px);margin-top:16px}.reader-layout{display:flex;flex-direction:column;gap:20px}.reader-main,.reader-sidebar{width:100%}.reader-sidebar{position:static}.reader-heading{padding:16px 8px 8px}.reader-heading>p{font-size:14px}.reader-content{padding:20px;font-size:15px}.reader-content h2{font-size:21px}.reader-meta{gap:10px}.reader-actions{width:100%;margin-top:4px}.reader-content h3{font-size:18px}.reader-contact{display:block;padding:20px}.reader-contact>a{display:inline-block;margin-top:16px}.reader-breadcrumb{font-size:10px;gap:8px}.reader-cover>span{opacity:1;font-size:10px}.reader-related-item{grid-template-columns:90px minmax(0,1fr)}.reader-related-item img{width:90px;height:75px}.reader-related-item h3{font-size:14px}}
@media(prefers-reduced-motion:no-preference){html:has(.reader-page){scroll-behavior:smooth}}
@media(max-width:760px){.reader-main,.reader-sidebar{display:contents}.reader-hero{order:1;width:100%}.reader-index{order:2;width:100%}.reader-content{order:3;width:100%;margin-top:0}.reader-contact{order:4;width:100%;margin:0}.reader-back{order:5}.reader-related{order:6;width:100%}.reader-help{order:7;width:100%}.reader-index ol{max-height:210px}}
/* Keep the article index scrollable without a visible system scrollbar. */
.reader-index ol{scrollbar-width:none;-ms-overflow-style:none}
.reader-index ol::-webkit-scrollbar{display:none;width:0;height:0}
/* Larger previews and a readable title beneath each recommendation on every screen. */
 .reader-related{padding:18px 14px 14px}
 .reader-related-item{display:block;padding:0;margin:0 0 14px;overflow:hidden;border:1px solid #24475e;border-radius:12px;background:#0d2436}
 .reader-related-item img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:0;background:#071525;border-bottom:1px solid #24475e}
 .reader-related-item>div{padding:12px 13px}
 .reader-related-item span{display:block;font-size:9px;font-weight:800;letter-spacing:.07em;color:#ffcf61}
 .reader-related-item h3{margin:6px 0 9px;font-size:14px;line-height:1.4;font-weight:750;overflow-wrap:anywhere}
 .reader-related-item small{display:block;font-size:11px;line-height:1.4;color:#a3bfd3}
 .reader-related-item:hover,.reader-related-item:focus-visible{border-color:#25aaff;background:#123047}
 .reader-related-item:hover h3{color:#72d0ff}
 .reader-related .reader-more{margin-top:4px;padding:11px 14px;border-radius:10px;font-size:12px;background:#08304d;color:#83d5ff}
 .reader-related .reader-more:hover{background:#104362;color:#fff}
/* Warm brand accents, with subtle borders and brighter active states. */
 .reader-hero,.reader-content,.reader-panel,.reader-contact,.reader-cover,.reader-related-item,.reader-related-item img{border-color:#ff8a243d}
 .reader-cover>span{border-color:#ff8a2466}
 .reader-panel h2{border-left-color:#ff8a24}
 .reader-index a>span{border-color:#ff8a2459}
 .reader-index a:hover,.reader-index a[aria-current]{background:#ff8a2417;border-color:#ff8a24;color:#fff}
 .reader-index a[aria-current]>span{background:#ff8a24;border-color:#ff8a24;color:#071525}
 .reader-meta>span:before{color:#ff8a24}
 .reader-actions button,.reader-related .reader-more{border-color:#ff8a2473;background:#ff8a2410;color:#ffb575}
 .reader-actions button:hover,.reader-related .reader-more:hover{border-color:#ff8a24;background:#ff8a24;color:#071525}
 .reader-related-item:hover,.reader-related-item:focus-visible{border-color:#ff8a24;background:#ff8a240d}
 .reader-related-item:hover h3{color:#ffb575}
 .reader-content blockquote{border-color:#ff8a243d;border-left-color:#ff8a24;background:#ff8a240a}
 .reader-help>a{border-color:#ff8a24;background:#ff8a24;color:#071525}
 .reader-help-icon{color:#ffae66;text-shadow:0 0 20px #ff8a2433}
/* Restore the compact, title-first article presentation on phones. */
@media(max-width:760px){
 .reader-hero{display:flex;flex-direction:column;padding:0;border-radius:18px}
 .reader-heading{order:0;padding:16px 16px 13px}
 body .reader-heading h1{font-size:clamp(21px,6.2vw,27px);line-height:1.08;margin:10px 0 8px}
 .reader-heading>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:13px;line-height:1.4;margin:7px 0 10px}
 .reader-meta{gap:6px;font-size:10px}
 .reader-actions{width:auto;margin:0;gap:6px;flex-wrap:wrap}
 .reader-actions button{min-height:29px;padding:5px 8px;font-size:10px}
 .reader-cover{order:1;border:0;border-top:1px solid #ff8a243d;border-radius:0;display:flex;align-items:center;justify-content:center;background:#071525}
 .reader-cover img{width:100%;height:auto;max-height:248px;object-fit:contain}
 .reader-cover>span{padding:5px 8px;font-size:10px}
 .reader-content{order:2}
 .reader-contact{order:3}
 .reader-back{order:4}
 .reader-index{order:5}
 .reader-related{order:6}
 .reader-help{order:7}
}
/* A quieter index with comfortable tap targets and a clear reading position. */
.reader-index{padding:20px 14px 14px;background:linear-gradient(150deg,#0d2537,#061522);border-color:#ff8a2433}
.reader-index h2{margin:0 4px 16px;padding-left:11px;font-size:18px;line-height:1.3}
.reader-index ol{display:grid;gap:6px;max-height:440px;padding:2px}
.reader-index li{margin:0;min-width:0}
.reader-index a{position:relative;min-height:48px;gap:11px;padding:10px 9px;border-radius:11px;font-size:13px;line-height:1.5;color:#c5d5e3;overflow-wrap:anywhere}
.reader-index a>span{width:28px;height:28px;border-color:#ffffff1f;background:#ffffff05;color:#9fb5c7;font-size:11px;font-weight:700}
.reader-index a:hover{background:#ffffff06;border-color:#ff8a244d;color:#fff}
.reader-index a[aria-current]{background:linear-gradient(100deg,#ff8a241c,#ff8a2407);border-color:#ff8a2459;box-shadow:inset 3px 0 #ff8a24;color:#fff;font-weight:650}
.reader-index a[aria-current]>span{background:#ff8a24;border-color:#ff8a24;color:#142032}
.reader-index .reader-subsection a{padding-left:20px;font-size:12px}
@media(max-width:760px){
 .reader-index{padding:20px 12px 14px}
 .reader-index ol{max-height:none;overflow:visible}
 .reader-index a{font-size:14px;padding:11px 10px;min-height:50px}
 .reader-index .reader-subsection a{font-size:13px}
}