/* Variables *****************************************************************/:root {    --color-blackish: #232323;    --color-red: #e6352b;    --color-white: #fff;    --color-whiteish: #efefef;    --color-gray: #808080;    --color-gray-dark: #1f1b1a;    --font-xs: 0.8rem;    --font-s: 1.0rem;    --font-m: 1.1rem;    --font-l: 2.2rem;    --font-xl: 3.2rem;    --default-line-height: 1.7rem;    --text-width: 60%;    --page-width: 900px;    --aside-width: 260px;    --background-color: var(#F4F1E);    --code-background-color: #f8f8f8;    --image-background-color: var(--background-color);    --text-color: var(--color-blackish);    --dim-text-color: var(--color-gray);    --icon-color: var(--color-gray);    --album-radius: 0.5rem;    --album-text: #2f3557;    --album-border: #272b47;    --album-bg: transparent;    --album-turntable-bg: #f4f1ef;    --space-s: 0.5rem;    --space-m: 1rem;    --space-l: 2rem;    --space-xl: 4rem;}@media (prefers-color-scheme: dark) {    :root {        --background-color: var(--color-gray-dark);        --code-background-color: #2b2726;        --image-background-color: var(--color-white);        --text-color: #b8b8b8;        --dim-text-color: var(--color-gray);        --icon-color: var(--color-gray);        --album-text: #b8b8b8;        --album-border: #1a1715;        --album-bg: #1a1715;        --album-turntable-bg: #2b2726;    }}html {    font-family: 'Georgia', serif;}body {    color: var(--text-color);    background-color: var(--background-color);    padding: var(--space-m);    margin: 0;    display: flex;    flex-direction: column;    text-rendering: optimizeLegibility;    -webkit-font-smoothing: antialiased;    font-optical-sizing: auto;    font-style: normal;    line-height: 1.2rem;    font-size: var(--font-m);    font-weight: 200;}/** PAGE ********************************************************************/.page {    width: 100%;    margin: 0 auto;    display: flex;    flex-direction: column;}/** PAGE HEADER *************************************************************/header {    display: flex;    flex-direction: column;    justify-content: space-between;    align-items: center;}header nav {    display: flex;}header .logo {    margin-top: var(--space-m);    margin-bottom: var(--space-s);}header .logo a,header .logo a:active,header .logo a:hover,header .logo a:visited {    text-decoration: none;    font-weight: 200;    font-size: var(--font-l);}header {    line-height: 2.2rem;}header nav a:first-of-type:before,header nav a:last-of-type:after {    content: "/";    color: var(--color-red);    margin: 0 var(--space-m);    display: inline-block;    transform: scale(1.2);    transform-origin: center;}header nav a:not(:last-of-type):after {    content: "·";    color: var(--color-red);    margin: 0 var(--space-m);    display: inline-block;    transform: scale(1.2);    transform-origin: center;}header nav a.no-feedback:hover,header nav a.no-feedback:focus {    text-decoration:underline;    text-decoration-color: var(--color-red);    outline: none;}/** PAGE FOOTER *************************************************************/footer {    margin-bottom: var(--space-xl);}footer p {    font-size: var(--font-s);    line-height: var(--default-line-height);    margin-bottom: var(--space-l);}ul.social {    padding: 0;}ul.social li {    list-style-type: none;    float: left;}ul.social li + li {    padding-left: 1rem;}/** TYPOGRAPHY **************************************************************/p {    line-height: var(--default-line-height);}p.preamble {    line-height: var(--default-line-height);    font-style: oblique;}h1 {    font-weight: 400;    font-size: 2.2rem;    line-height: 2.2rem;    margin-top: 4rem;    margin-bottom: 2rem;}h2 {    font-weight: 400;    font-size: 1.5rem;    line-height: 1.5rem;    margin-top: 3rem;    margin-bottom: 2rem;}h3 {    font-weight: 600;    font-size: 1.6rem;    line-height: 1.6rem;    margin-top: 3rem;    margin-bottom: 2rem;}a,a:active,a:hover,a:visited {    color: var(--text-color);    text-decoration: underline;    font-weight: 400;    word-break: break-word;    text-decoration-color: var(--color-red);}a:hover {    text-decoration: none;}a:focus {    outline-width: 1px;    outline-style: solid;    outline-color: var(--color-red);    background-color: var(--color-red);    color: var(--color-white);    stroke: var(--color-white);}a.no-feedback,a.no-feedback:active,a.no-feedback:hover,a.no-feedback:visited {    text-decoration: none;}.highlighted {    color: var(--color-red);    font-style: italic;}.disclaimer {    font-size: var(--font-s);    font-style: oblique;    line-height: var(--default-line-height);    margin: var(--space-l) 0 var(--space-l) 0;    padding-left: var(--space-m);    position: relative;    left: -1.2rem;    border-left: 4px solid var(--color-red);    -webkit-margin-start: 0;}strong {    font-weight: 600;}time {    display: block;    margin: var(--space-m) 0 var(--space-l) 0;    font-size: var(--font-s);}/** ARTICLE *****************************************************************/article blockquote {    font-style: oblique;    margin: var(--space-l) 0 var(--space-l) 0;    padding-left: var(--space-m);    border-left: 4px solid var(--color-red);    -webkit-margin-start: 0;}article ul,article ol {    line-height: var(--default-line-height);    padding-left: var(--space-m);}article ul li {    list-style-type: none;}article ul li + li,article ol li + li {    margin-top: var(--space-s);}article ul li:before {    content: "-";    color: var(--color-red);    font-weight: 600;    margin-right: 8px;}.note {    display: none;}article span.sidenote {    display: none;}/** TABLE *******************************************************************/table {    border-collapse: collapse;    margin: var(--space-l) 0;    width: 100%;    font-size: var(--font-s);}thead tr {    text-align: left;    border-bottom: 2px solid var(--text-color);}th,td {    padding: var(--space-m) var(--space-s);}tbody tr {    border-bottom: 1px solid var(--text-color);}tbody tr:nth-of-type(even) {    background-color: var(--color-whiteish);}tbody tr:last-of-type {    border-bottom: 2px solid var(--text-color);}/** CODE ********************************************************************/pre:focus {    outline-width: 1px;    outline-style: solid;    outline-color: var(--color-red);}pre {    display: block;    line-height: 1rem;    background-color: var(--code-background-color);    margin: 0 -1rem;    padding: var(--space-m);    word-break: break-word;    white-space: preserve;}code {    background: none;    font-size: var(--space-m);}img {    max-width: 100%;    margin: var(--space-m) auto;    background-color: var(--image-background-color);}div.fullwidth pre {    width: 100%}/** MISC ********************************************************************/.is-red-period {    color: var(--color-red);}/** ICON ********************************************************************/.is-icon {    width: 16px;    height: 16px;    stroke: var(--icon-color);}a:focus .is-icon {    stroke: var(--color-white);}/** LIST ********************************************************************/.list {    display: flex;    flex-direction: column;    margin: var(--space-xl) 0;    gap: var(--space-l);}.list-item {    display: flex;    flex-direction: column;    align-items: baseline;    gap: var(--space-s);}.list-item a {    flex-grow: 1;}.list-item hr {    display: none;}.list-item time {    color: var(--dim-text-color);    margin: 0;    font-size: var(--font-xs);}/** ALBUM ****************************************************************/.album-list {    display: flex;    flex-direction: column;    gap: var(--space-l);    margin-top: var(--space-s);}.album {    display: flex;    flex-direction: column;    background-color: var(--album-turntable-bg);    border: none;    border-radius: var(--album-radius);}.album .details {    display: flex;    flex-direction: column-reverse;    gap: var(--space-s);    align-items: center;}.album .author {    display: flex;    flex-direction: column;    flex-grow: 1;    gap:var(--space-m);    justify-content: center;    align-items: center;}.album .details .artist {    font-size: var(--font-s);    font-style: italic;}.album .details .title {    font-size: var(--font-m);    line-height: var(--default-line-height);}.album .spotify {    font-size: var(--font-s);    align-self: end;    padding: var(--space-m);}.album .cover {    padding: 0;}.album .cover img {    aspect-ratio: 1/1;    max-width: 128px;    border: 2px solid var(--album-border);    border-radius: var(--album-radius);}.album .mini-review {    padding: var(--space-m);    text-align: center;    font-size: var(--font-m);    line-height: var(--default-line-height);}.album.turntable {    background-color: var(--album-turntable-bg);    color: var(--album-text);    border: none;}.album.turntable .cover img {    max-width: 64px;}.album-list.short {    gap: var(--space-s);    flex-direction: column;}.album-list.short .album {    flex-grow: 1;    flex-direction: row;    padding: var(--space-s);}.album-list.short .album .details {    flex-direction: row;    flex-grow: 1;    display: flex;}.album-list.short .album .details .artist {    font-size: var(--font-s);    font-style: italic;}.album-list.short .album .details .title {    font-size: var(--font-m);    line-height: var(--default-line-height);}.album-list.short .album .details .cover {    display: flex;}@media (min-width: 1024px) {    body {        padding: 0;    }    .page {        max-width: 900px;        margin: 0 auto;    }    header {        flex-direction: row;    }    header .logo {        margin-top: var(--space-xl);        margin-bottom: var(--space-xl);    }    .list {        gap: var(--space-m);    }    .list-item {        flex-direction: row;        gap: var(--space-m);    }    .list-item a {        flex-grow: 0;    }    .list-item hr {        display: block;        flex-grow: 1;        border: 1px dashed var(--text-color);        opacity: 0.25;    }    .list-item time {        display: inline-block;        font-size: var(--font-s);    }    .album-list {        gap: var(--space-xl);        margin-top: var(--space-xl);    }    .album-list.short {        flex-direction: row;    }    .album-list.short .album {        padding: var(--space-m);    }    .album-list.short .album .details {        flex-direction: column;    }    .album .details {        flex-direction: row;        gap: var(--space-m);    }    .album .details .artist {        font-size: var(--font-m);    }    .album .details .title {        font-size: var(--font-l);        line-height: var(--font-l);    }    .album .cover {        padding: var(--space-m);    }    .album .cover img,    .album.turntable .cover img {        max-width: 192px;    }}@media (min-width: 1550px) {    .page {        max-width: 900px;        margin: 0 auto;    }    article .note {        display: inline-block;        font-size: var(--font-xs);        position: relative;        top: -0.5rem;    }    article span.sidenote {        position: absolute;        width: var(--aside-width);        margin: -3rem 0 0 calc(var(--page-width) + 60px);        padding-bottom: 4rem;        line-height: var(--default-line-height);        font-size: var(--font-xs);        display: block;    }}