element is used inside the homepage modal and as a whole page here, so this file only supplies the shell around it: it makes the panel permanently visible and top-aligned. Everything inside the panel is styled by main.css and articles.css, exactly as it is in the modal. Two rules of engagement: - must NOT carry is-preload. main.js is not loaded here, so the class would never be removed and the page would stay invisible. - DOES carry is-article-visible, so the background blurs the same way it does when a panel is open on the homepage. */ body.article-page #main{justify-content:flex-start} body.article-page #wrapper{padding:3rem 2rem} body.article-page #main article.article-detail{display:block;opacity:1;transform:none;text-align:left} body.article-page #main article.article-detail .close{cursor:pointer} /* A single line under the panel back to the index, for readers who arrive here directly from search rather than from the homepage. */ .article-page-foot{width:100%;max-width:calc(100vw - 4rem);margin-top:2rem;text-align:center;font-family:Manrope,sans-serif;font-size:.72rem;font-weight:300;letter-spacing:.02rem;color:rgba(255,255,255,.5)} .article-page-foot a{border-bottom:0;color:rgba(255,255,255,.7)} .article-page-foot a:hover{color:#fff} @media screen and (max-width:736px){ body.article-page #wrapper{padding:2rem 1rem} .article-page-foot{max-width:calc(100vw - 2rem)} }