@font-face {
    font-family: Aptos;
    src: url('fonts/AptosMono.ttf');
}
@font-face {
    font-family: Palatino;
    src: url('fonts/PalatinoMedium.ttf');
}
:root {
    --very-dark-grey: #333;
    --dark-grey: #666;
    --medium-grey: #888;
    --pale-grey: #aaa;

    --financial-times: rgb(153, 15, 61);
    --cherwell: #b4182a;
    --the-guardian: rgb(5, 41, 98);
    --prospect: rgb(215, 74, 49);
    --the-nerve: #FF00FFFF;
}
html {
    font-size: 20px;
    font-family: Aptos;
}
.page-width {
    max-width: min(600px, 80vw);
    margin: 0 auto;
}
.page-width > * {
    max-width: 100%;
}
h1, h2, h3 {
    font-weight: normal;
}
h1 {
    margin: 2rem 0 0;
    color: var(--very-dark-grey);
}
h2 {
    margin: 0 0 2rem;
    color: var(--dark-grey);
    font-size: 1.75rem;
}
h3 {
    margin: 1rem 0 0;
    font-size: 1.25rem;
    color: var(--very-dark-grey);
}
.publication-list {
    margin: 0;
    list-style-type: none;
    padding-left: 1rem;
    font-size: 1rem;
}
a.publication-link {
    cursor: pointer;
}
span.publication-link {
    cursor: default;
    text-decoration: none;
}
.publication-link {
    color: var(--medium-grey);
    
}
li::marker {
    font-size: 1rem;
}
li:has(.financial-times)::marker {
    color: var(--financial-times);
}
li:has(.cherwell)::marker {
    color: var(--cherwell);
}
li:has(.the-guardian)::marker {
    color: var(--the-guardian);
}
li:has(.prospect)::marker {
    color: var(--prospect);
}
li:has(.the-nerve)::marker {
    color: var(--the-nerve);
}
a:hover, .toggle:hover {
    opacity: 0.5;
}
.pale {
    color: var(--pale-grey);
}
.article-count {
    font-size: 0.85rem;
}
.down-arrow {
    margin-left: 0.2rem;
}
.article-date {
    margin-right: 0.5rem;
    font-size: 0.65rem;
    margin-top: 0.1rem;
}
ul > li {
    
}
.article-list > li {
    font-size: 0.85rem;
    display: flex;
}

.article-list {
    padding-left: 1rem;
    margin: 0;
    list-style-type: none;
}
.article-title {
    color: var(--dark-grey);
    text-decoration: none;
}

.toggle {
    cursor: pointer;
}
:has(> .toggle) > .togglable:not(.toggle):not(.visible) {
    display: none;
}
:has(> .visible) > .publication-link {
    color: var(--very-dark-grey);
}
footer {
    text-align: center;
    color: var(--pale-grey);
    margin-top: 5rem !important;
}
footer > a {
    font-size: 0.85rem;
    color: var(--dark-grey);
    text-decoration: none;
}
.website-credit {
    font-size: 0.5rem;
    opacity: 0.5;
}
.website-credit > a {
    color: unset;
    text-decoration: none;
}

@media screen and (max-width: 1000px){
    .publication-list, .article-list, .article-title {
	padding-left: 0;
    }
    .article-list > li {
	flex-wrap: wrap;
    }
    .article-date {
	flex-basis: 100%;
    }
}