@charset 'UTF-8';
:root{
 --c-pp-pink:#E782B1;
 --c-pp-blue:#74CBD4;
 --c-pp-purple:#696893;
 --c-pp-yellow:#EFFF3E;
}
@font-face{font-family:'Hand Me Down S BRK';font-style:normal;font-weight:normal;src:local('Hand Me Down S BRK'),url('/t/handmeds.woff') format('woff');}
html,body{margin:0;padding:0;height:100%;color:#000;font-family:Arial,Helvetica,sans-serif;background:var(--c-pp-purple)}
body{overflow-x:hidden}
a,a:visited{color:inherit}
a:hover,a:active{color:var(--c-pp-yellow);text-decoration:underline}
.article a:hover,.article a:active{color:var(--c-pp-purple);text-decoration:underline}
a.active{pointer-events:none}
.hide,hr{display:none}
*>p:last-child{margin-bottom:0}
sup{font-size:0.5em}
.fadeout{animation:fadeout 0.2s linear 0s 1 normal forwards}
.fadein{animation:fadeout 0.2s linear 0s 1 reverse forwards}
.loading{width:3rem;height:3rem;border:0.5rem dotted #7902AA;border-radius:100%;animation:spin 2s linear 0s infinite}
#outer{z-index:1;min-height:100%;width:100%;position:absolute}
#inner{display:grid;grid-template-columns:16rem auto;grid-template-rows:auto auto 1fr;grid-template-areas:'g b' 'g m' 'p m';grid-column-gap:2rem;padding:0 6rem 5rem 0}
#inner>header{grid-area:g}
#logohead,#logo,#logobg{width:13rem;height:13rem}
#logohead,#logo{display:block !important}
#logo{padding:1rem 2rem 0 2.75rem}
#logobg{display:none}
nav ul,h1{list-style:none;margin:0;padding:0;font-family:'Hand Me Down S BRK',Arial,Helvetica,sans-serif;font-weight:bold;letter-spacing:0.05em;text-shadow:-0.15rem -0.15rem 0 #000A, 0.15rem -0.15rem 0 #000A, -0.15rem 0.15rem 0 #000A, 0.15rem 0.15rem 0 #000A}
h1{padding:1.5rem 0 2rem 2rem;font-size:3rem;color:#FFF;text-transform:lowercase}
h1 span:after{content:'.'}
nav ul{font-size:2rem}
h2{font-size:1.25rem}
h3{font-size:1.1rem}
h2,h3{color:var(--c-pp-purple)}
h2 em,h3 em{font-style:oblique}
h2 a,h2 a:visited,h3 a,h3 a:visited{text-decoration:none}
h2 a:hover,h2 a:active,h3 a:hover,h3 a:active{color:var(--c-pp-yellow);text-decoration:none}
nav.main ul li{padding-left:4rem;line-height:1.5em}
nav a,nav a:visited{text-decoration:none;color:var(--c-pp-blue)}
nav a.active,h1 a,h1 a:visited{text-decoration:none;color:#FFF}
nav a.active,h1 a:hover,nav a:hover,h1 a:active,nav a:active{text-decoration:none;color:var(--c-pp-yellow)}
nav a:hover{transition:color 0.1s ease-in-out}
nav.main li{display:block;width:100%}
nav.links{grid-area:b;text-align:right;margin:0}
nav.links ul,.article .links{list-style:none;padding:0;display:flex;flex-flow:row wrap}
nav.links ul,.list .article .links{justify-content:flex-end}
nav.links li{display:inline-block;margin:1.5rem 1rem}
nav.links svg{height:1em;fill:#FFFE}
nav.links a:hover svg{transform:scale(1.2);transition:transform 0.15s ease-in-out}
#main{grid-area:m;display:flex;flex-flow:row wrap;align-items:center;align-content:center;justify-content:center;margin-top:1rem}
.article{background:#FFFA;margin:1.25rem;padding:1.5rem 2rem;border-radius:2.25rem;min-width:18rem;max-width:75%}
.article.youtubefeed{background:#FEDA}
.article.youtubefeed:has(iframe.ytvid[data-yts="1"]){background:#FEDD}
.article figure{margin:0}
.article footer,.article .meta{text-align:right;font-style:italic;font-size:0.8rem;opacity:0.7}
.article picture{filter:contrast(1.2);display:grid;margin:0.5rem 0}
.article picture img{max-width:34rem;max-height:34rem;margin:0 auto}
.article picture *{width:100%;border-radius:1em}
.article picture>*{grid-area:1 / 1}
.article picture div{display:none}
div.ytvid{display:block !important;width:100%;height:100%;cursor:pointer}
div.ytvid:hover{background:#FED3 url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGZpbGw9IiNGRUQiIGQ9Ik0yNTYsMEMxMTQuNTExLDAsMCwxMTQuNDk3LDAsMjU2YzAsMTQxLjQ5LDExNC40OTUsMjU2LDI1NiwyNTZjMTQxLjQ5LDAsMjU2LTExNC40OTcsMjU2LTI1NkM1MTIsMTE0LjUxLDM5Ny41MDMsMCwyNTYsMCB6IE0zNDguMjM4LDI4NC40MThsLTEyMC4yOTQsNjkuNTA3Yy0xMC4xNDgsNS44NjQtMjIuNjYxLDUuODc0LTMyLjgyNiwwLjAwOWMtMTAuMTU4LTUuODYyLTE2LjQxNS0xNi42OTktMTYuNDE1LTI4LjQyNlYxODYuNDkzIGMwLTExLjcyOCw2LjI1OC0yMi41NjQsMTYuNDE1LTI4LjQyNmM1LjA3Ni0yLjkzLDEwLjc0MS00LjM5NSwxNi40MDYtNC4zOTVjNS42NywwLDExLjM0MSwxLjQ2OCwxNi40Miw0LjQwMmwxMjAuMjk1LDY5LjUwNyBjMTAuMTQ5LDUuODY0LDE2LjQsMTYuNjk2LDE2LjQsMjguNDE4QzM2NC42MzksMjY3LjcyMiwzNTguMzg3LDI3OC41NTMsMzQ4LjIzOCwyODQuNDE4eiIvPjwvc3ZnPg==") 50% 50%/33% 33% no-repeat}
.article footer>*,.article .meta>*,.excerpt>*{margin:0.5rem}
.article .meta{margin:0.5em;list-style:none;padding:0}
.article .meta li{margin:0.1em;display:inline}
.article .meta li:not(:first-child)::before{content:' • '}
.article .links{justify-content:center}
.article .links svg{height:1.2rem;opacity:0.7}
.article .links a:hover svg{fill:#000;opacity:1}
.article .links li{display:inline-block;margin-left:0.5rem}
.continue {text-align:right;font-style:italic;font-size:0.9rem;opacity:0.9}
.continue span::after{content:'…'}
.error .article{background:#FAAA}
.list .article{max-width:32rem}
.list .article.youtubefeed{max-width:28rem}
#sidePlayer{grid-area:p}
#footer{position:absolute;left:0;bottom:0;height:2em;color:#996;text-align:center;width:100%;font-weight:lighter;letter-spacing:0.1em;font-size:0.7em;background:linear-gradient(to bottom,#0009,#08001099);box-shadow:0 -0.7em 1em #08001099}
#footer a{color:#996;text-decoration:none}
#footer a:active,#footer a:hover{color:#AA6;text-decoration:underline}
#footer>div{position:absolute;bottom:0;width:100%}
#footer ul{list-style:none;display:inline-flex;margin:0.5em}
h1 a,#footer li{white-space:nowrap}
#footer li:not(:first-child):before{content:' ♯ ';padding-left:0.33em;color:#747;font-size:1.1em}
ol.footnote-cite-true>li:before{content:' ✔️ '}
ol.footnote-cite-false>li:before{content:' ❌ '}
ol.footnote-cite-mixed>li:before{content:' ❓ '}
ol.footnote-cite-unknown>li:before{content:' ❔ '}
ol.footnote-note>li:before{content:' 📝 '}

@media(max-width:1280px){
.list .article{max-width:28rem}
}

@media(max-width:1024px){
#inner{grid-template-areas:'g m' 'p m' 'b m';padding:0 1rem 5rem 0}
nav.links ul{padding:1.8rem}
nav.links li{margin:0.5rem}
.list .article{max-width:23rem}
}

@media(max-width:768px){
html{font-size:0.6rem}
#inner{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;grid-template-areas:'g' 'b' 'p' 'm';padding:0 0 3rem 0}
#inner>header{text-align:right;padding-right:2rem}
#logohead{float:left;margin-right:3rem}
h1{font-size:5rem;padding-top:0}
nav.main ul li{display:inline;font-size:2.5rem}
nav.links{font-size:1.6rem}
#main{font-size:1.55rem}
.list .article{max-width:18rem}
}

@media(max-width:480px){
html{font-size:0.5rem}
.list .article{max-width:12rem}
}