/* Applies to readable pages and the homepage before React mounts. */
.readable-portfolio { max-width: 58rem; margin: 4rem auto; padding: 0 1.5rem; color: #f7eaf9; font: 1rem/1.7 Inter, system-ui, sans-serif; }
.readable-portfolio h1, .readable-portfolio h2, .readable-portfolio h3 { font-family: 'Space Grotesk', system-ui, sans-serif; line-height: 1.2; }
.readable-portfolio h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.readable-portfolio h2 { margin-top: 2.5rem; font-size: 1.75rem; }
.readable-portfolio h3 { margin-top: 1.75rem; font-size: 1.25rem; }
.readable-portfolio p, .readable-portfolio li { color: #cfc2d2; }
.readable-portfolio a { color: #00e3fd; text-decoration: underline; text-underline-offset: .2em; }
.readable-portfolio ul { padding-left: 1.5rem; }
.readable-portfolio li { margin: .5rem 0; }
body:has(> .readable-portfolio) { margin: 0; background: #120c16; }
body:has(> .readable-portfolio) > nav, body:has(> .readable-portfolio) > footer { max-width: 58rem; margin: 2rem auto; padding: 0 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; font: .875rem/1.7 system-ui, sans-serif; color: #cfc2d2; }
body:has(> .readable-portfolio) > nav a, body:has(> .readable-portfolio) > footer a { color: #ac89ff; }
.readable-portfolio a:focus-visible, body:has(> .readable-portfolio) > nav a:focus-visible, body:has(> .readable-portfolio) > footer a:focus-visible { outline: 2px solid #00e3fd; outline-offset: 4px; }