/* Reading-focused journal layout, scoped away from the shop. */
.vp-journal-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(32px,5vw,70px);max-width:1240px;width:calc(100% - 48px);margin:20px auto 64px;align-items:start}
.vp-journal-layout .vp-article-shell{width:100%;min-width:0;margin:0}
.vp-journal-layout .vp-article-header{padding:12px 0 24px;text-align:left;margin:0;max-width:none;border-bottom:1px solid #eae7ee}
.vp-journal-layout .vp-article-header h1{font-size:clamp(29px,3.2vw,44px);text-wrap:initial;margin:14px 0 18px;line-height:1.18;letter-spacing:-.035em}
.vp-journal-layout .vp-article-lead{margin:0 0 20px;font-size:17px;max-width:720px}
.vp-journal-layout .vp-blog-meta{justify-content:flex-start!important}
.vp-journal-layout .vp-article-image{max-width:none;max-height:320px;margin:24px 0 8px;border:0;background:#faf9ff}
.vp-journal-layout .vp-article-image img{max-height:320px;mix-blend-mode:multiply}
.vp-journal-layout .vp-article-content{padding:24px 0;max-width:none;counter-reset:guide-section}
.vp-journal-layout .vp-article-content h2{display:flex;align-items:baseline;gap:12px;border-top:1px solid #ece8f1;padding-top:28px;margin-top:36px}
.vp-journal-layout .vp-article-content h2::before{counter-increment:guide-section;content:counter(guide-section,decimal-leading-zero);font-size:15px;font-weight:600;color:#847594;flex:none}
.vp-journal-sidebar{position:sticky;top:140px;max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:thin}
.vp-journal-sidebar__inner{padding:18px 0}
.vp-journal-sidebar__inner summary{display:none}
.vp-journal-back{display:block;color:#514365;font-size:13px;margin-bottom:28px;text-decoration:none}
.vp-journal-sidebar .vp-article-toc{padding:0;background:transparent;border:0;border-radius:0;margin-bottom:30px}
.vp-journal-sidebar .vp-article-toc ol{display:block;padding-left:18px;margin-top:18px}
.vp-journal-sidebar .vp-article-toc li{margin-bottom:14px;font-size:14px}
.vp-journal-sidebar a{color:#67616e;line-height:1.5;text-decoration:none}
.vp-journal-sidebar a:hover,.vp-journal-sidebar a:focus-visible{color:#4b38ee;text-decoration:underline;text-underline-offset:4px}
.vp-journal-related{border-top:1px solid #e7e2ee;padding-top:24px}
.vp-journal-related strong{display:block;font-size:16px;margin-bottom:16px}
.vp-journal-related a{display:flex;gap:10px;justify-content:space-between;font-size:14px;margin-bottom:16px}
@media(min-width:992px){.vp-journal-sidebar__inner:not([open])>*:not(summary){display:block}}
@media(max-width:991px){.vp-journal-layout{display:flex;flex-direction:column;gap:22px;width:calc(100% - 32px);margin-top:0}.vp-journal-sidebar{position:static;width:100%;max-height:none}.vp-journal-sidebar__inner{padding:16px 18px;background:#faf9ff;border:1px solid #e8e2f1;border-radius:10px}.vp-journal-sidebar__inner summary{display:list-item;cursor:pointer;font-weight:600;color:#3c314b}.vp-journal-sidebar__inner[open] summary{margin-bottom:20px}.vp-journal-layout .vp-article-header{padding-top:0}.vp-journal-layout .vp-article-image{max-height:260px}.vp-journal-layout .vp-article-image img{max-height:260px}.vp-journal-layout .vp-article-content h2{font-size:24px}.vp-journal-related{display:none}}
.vp-article-shell{max-width:1000px;margin-inline:auto}
.vp-article-header{max-width:850px;margin-inline:auto}
.vp-article-header h1{font-size:clamp(28px,4vw,48px);line-height:1.15;text-wrap:balance}
.vp-article-lead{max-width:720px;margin:20px auto;color:#62606a;font-size:18px;line-height:1.65}
.vp-article-image{background:#fff;max-width:760px;margin:28px auto;border:1px solid #efedf5;border-radius:16px;overflow:hidden}
.vp-article-image img{width:100%;height:auto;max-height:400px;object-fit:contain}
.vp-article-content{max-width:780px;margin-inline:auto;font-size:17px;line-height:1.8;color:#37343d}
.vp-article-content h2{scroll-margin-top:120px;margin:40px 0 16px;font-size:clamp(23px,2.6vw,30px);line-height:1.25}
.vp-article-content h3{margin:26px 0 12px;font-size:21px;line-height:1.35}
.vp-article-content a{color:#4935d1;text-decoration:underline;text-underline-offset:3px}
.vp-article-content p,.vp-article-content li{overflow-wrap:anywhere}
.vp-article-content li{margin-bottom:12px}
.vp-article-content figure{margin:28px 0;padding:16px;background:#faf9ff;border:1px solid #efebf8;border-radius:14px}
.vp-article-content figure img{width:100%;height:auto;max-height:460px;object-fit:contain}
.vp-article-content figcaption{margin-top:12px;color:#66616e;font-size:14px;line-height:1.55}
.vp-article-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:24px 0;font-size:15px;line-height:1.55}
.vp-article-content th,.vp-article-content td{padding:15px;text-align:left;vertical-align:top;border:1px solid #e7e2ef;min-width:130px}
.vp-article-content th{background:#f5f2ff;color:#292333;font-weight:700}
.vp-article-content tr:nth-child(even) td{background:#fcfbfe}
.vp-article-toc{padding:24px;background:#faf9ff;border:1px solid #e9e4f3;border-radius:14px;margin:0 0 32px}
.vp-article-toc strong{font-size:18px;color:#292333}
.vp-article-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;margin:14px 0 0;padding-left:22px}
.vp-article-toc li{margin:0;font-size:15px;line-height:1.6}
.vp-content-page .vp-blog-card__image{background:#fff}
.vp-content-page .vp-blog-card__image img{object-fit:contain;background:#fff}
.vp-content-page .vp-blog-card{border:1px solid #eae6f0;box-shadow:0 4px 18px rgba(30,20,60,.035)}
.vp-content-page .vp-blog-card__body h2{line-height:1.35}
.vp-article-content a:focus-visible{outline:2px solid #4b38ee;outline-offset:4px}
@media(max-width:639px){.vp-article-content figure:has(img[src$=".svg"])::before{content:'Swipe to view the full diagram →';display:block;position:sticky;left:0;width:fit-content;font-size:13px;color:#4935d1;margin:4px 0 12px}}
@media(max-width:639px){.vp-article-content{font-size:16px;padding-inline:0}.vp-article-lead{font-size:16px}.vp-article-toc{padding:18px}.vp-article-toc ol{grid-template-columns:1fr}.vp-article-content figure{padding:8px}.vp-article-content th,.vp-article-content td{padding:10px}.vp-article-image{margin:20px 0}.vp-article-content figure img[src$=".svg"]{min-width:580px}.vp-article-content figure:has(img[src$=".svg"]){overflow-x:auto}}
