/* ==========================================================================
   matthewpreiser.com

   One stylesheet for every page. No build step, no dependencies.
   Deployed by Cloudflare Pages from public/ on push to main.

   ASSET MANIFEST
     /fonts/averia-serif-libre-300.woff2         Averia Serif Libre, SIL OFL 1.1
     /fonts/averia-serif-libre-700.woff2         Averia Serif Libre, SIL OFL 1.1
     /fonts/averia-serif-libre-300-italic.woff2  Averia Serif Libre, SIL OFL 1.1
   Averia Serif Libre by Dan Sayers. OFL permits redistribution and web
   embedding. No credit line is owed on the page itself.

     /images/dog.png    Derived entirely from a photo Matthew took. Subject
                        mask, adaptive local contrast, line screen. No pixel
                        is invented and no part of it is AI generated.
                        Rebuild byte for byte with notes/engrave.py.

     /favicon.svg       A crimson disc in the link colour. A dog silhouette
                        traced from the photo was tried and was an unreadable
                        blob at 16px; a drawn dog head read clearly but was
                        rejected on taste. The disc is the deliberate choice.

   The paper grain below is a generated 64x64 PNG inlined as a data URI.
   Regenerate with notes/generate-grain.py. Not copied from any other site.

   Design language follows aksui.com, which Matthew supplied as the reference.
   All content and all assets here are this site's own.
   ========================================================================== */

/* latin */
@font-face {
    font-family: 'Averia Serif Libre';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/averia-serif-libre-300.woff2") format('woff2');
}

@font-face {
    font-family: 'Averia Serif Libre';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/averia-serif-libre-700.woff2") format('woff2');
}

@font-face {
    font-family: 'Averia Serif Libre';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/averia-serif-libre-300-italic.woff2") format('woff2');
}

:root {

    /* === Sizes === */
    --4: 0.25rem;
    --6: 0.375rem;
    --10: 0.625rem;
    --8: 0.5rem;
    --12: 0.75rem;
    --16: 1rem;
    --18: 1.125rem;
    --24: 1.5rem;
    --32: 2rem;
    --40: 2.5rem;
    --48: 3rem;

    /* === Site-wide widths and padding === */
    --site-width: 600px;
    --site-gutter-padding: 18px;

    /* === Fonts === */
    --font-stack-serif: 'Averia Serif Libre', Georgia, serif;

    /* === Font sizes === */
    --font-size-xxs: 0.9rem;
    --font-size-xs: 1rem;
    --font-size-s: 1.01875rem;
    --font-size-m: 1.08125rem;

    /* === Font colours === */
    --font-color-default: #33312e;
    --font-color-secondary: #646057;
    --font-color-link: #a11;
    --font-color-link-hover: #f00;

    /* === Other colours === */
    --background-color-page: #fcf9f4;
    --border-color: #ece7de;

    /* === Image preset sizes === */
    /* Thumbnail is larger on a phone, where it is the only thing on screen,
       and steps back down on desktop where it sits in a wider column. */
    --image-preset-thumbnail: 11rem;    /* 176px @ 16px, phone */
    --image-preset-small: 12rem;        /* 192px @ 16px */
    --image-preset-medium: 20rem;       /* 320px @ 16px */

}

*, :after, :before {
    box-sizing: border-box
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--font-stack-serif);
    font-size: var(--font-size-s);
    line-height: 1.356;
    letter-spacing: -0.042em;
    font-weight: 300;
    color: var(--font-color-default);
    background-color: var(--background-color-page);
    padding-top: var(--48);
    display: flex;
    flex-direction: column;
}

body, body > header {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAADoElEQVR42p1ZbY4rMQgbyZJ/cJi9//Heq6Y7TYINdFWt+rGZhBAwxrl+rveL///wfr8/re+vVyyf8yu2GXj8zmP0832fHvs/hRG/ZsCYAWsqnxHbs34yyF2uU0U5dn/us+yx0csucw9BsQje7s0+231A7fx7TOfwel/rZ79k+aQ7qWqxfSST0Wy2ss6Feu+w01CM7Xx3Z0jsoXxOwLTAJy1fJ64OLBr/lYZdR9ajfBxLYCL5A0ccuJSEwgEUrs/QBLszPJvAIJyZg3CaAzp3TiD7fKfxLfedxWK5QgCI5SH9lhEkfAx0SBCpMqCBYjULvAFhnIzyYYyPCwZNoIIwWvx6GcbSA0xL34fDI0pYe+BArGLX8U5AXS38xhYP0D54pamROMCvV+qM4sYaYjWABQRrl67EA9Lh45Q++VA8UzJhG/5SbCbVEMvZ1rEdtr5zmAcJtjTCIRWj6dSXBGqIHIn1CFhUMgwY4jn+i2i4Sg6Q35nQHpLxYsCLsJfjOTU7l4RNU09zHmOz+9G4Du2J6yPCUSG5UjIKKD7POio8K00ta8rVMiCH8/XvLIzjfgQYcWCVD3uq0nQHrtbyJKVV+NDYD5uM+kmxwmVZfQdEKLoDygOkiwGmDJ6gHssRbFs+/BoAWWj4cxVh5Sfn03xw1pypKSnPl7JsU3QG+IZnT6qaZsUwkZB5MIyugLMv4MGHYmm8UDShFXXHtx6YtNinbMO2oYU3PZ9obkziyHM2vRJHZWnJAi6W39+m4gsGY2I7PGQgirEiMiGaGElZS4y4LKdpznr5KvNomOUTJ+RAooEUJiZtG3uJJlq8U17RXVGI0dxoHHZCovEcsr10tARJKYMoSBIHIrlJizU0ZLvX1mh+ZRXP0agjGLW1WnGOvRyzkGtRMKKwukI0yRparM6tOE187KmJxiPXFoKyFsBoAbkIR9tw1Jrb8f8a3zhYBEdJRjP6GKUsRWsKBS9E0VfAq1DdfQgTla5di9QlIIUeZo0J5D1IfFUZoy/KXWXvIHb3D7YqwYmW6CQVFEHVE3cKBZWLJz/HFB/1ylUsHDcjXgvq7xBCccIZITGcthF4abJqKW4rGfN3hGhges6aom7Pw9wNsWjJ0WYQrbmhr+2qNqVXDPRSutWLfGe0ny9s0wYBNjhw8BZwo9bKPMbpPOfGmGilif7GhZ++wJ8StslDaP98qiMKbESnEUXT86BRgadgJS7HPY/BQHLIfbKi8KWh/wBW3PBqD4nzTQAAAABJRU5ErkJggg==')
}

body > header {
    padding: var(--12) 0;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--background-color-page);
    z-index: 1
}

body > footer, body > footer nav {
    display: flex;
    align-items: center
}

body > footer {
    padding-block: 7rem var(--18);
    font-size: var(--font-size-xs);
    justify-content: space-between;
    flex-shrink: 0
}

body > footer nav {
    justify-content: end;
    gap: var(--18);
    line-height: 1;
}

body > footer, body > footer a {
    color: var(--font-color-secondary);
}

a {
    color: var(--font-color-link)
}

a:hover, body > footer a:hover {
    color: var(--font-color-link-hover)
}

body > footer a, nav a {
    text-decoration: none
}

nav a {
    color: inherit;
}

p {
    margin-bottom: var(--24);
    word-break: break-word
}

em {
    font-style: italic;
}

.site-width {
    max-width: calc(var(--site-width) + (var(--site-gutter-padding)*2));
    padding-inline: var(--site-gutter-padding);
    margin-inline: auto;
    width: 100%
}

.main {
    margin-top: 4rem;
    flex: 1 0 auto;
    padding-right: var(--24)
}

.content > :first-child {
    margin-top: 0
}

.site-footer-mark {
    font-size: var(--font-size-xxs);
    font-weight: 400;
}

.footer-link {
    color: var(--font-color-secondary);
}

.site-footer-nav {
    gap: var(--18);
}

figure, img {
    margin: var(--32) 0
}

figure {
    padding: 0
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain
}

figure img {
    margin: 0
}

main > :first-child:is(figure) {
    margin-bottom: var(--40);
    display: block;
}

figcaption {
    margin-top: var(--8);
    font-style: italic
}

img.size-thumbnail {
    max-width: var(--image-preset-thumbnail);
    max-height: var(--image-preset-thumbnail);
    width: auto;
}

img.size-small {
    max-width: var(--image-preset-small);
    width: 100%
}

img.size-medium {
    max-width: var(--image-preset-medium);
    width: 100%
}

.list-grid a, body > footer a, nav a {
    text-decoration: none
}

.list-grid {
    display: grid;
    grid-template-columns: minmax(2.375rem, min-content) 1fr;
    gap: var(--6) var(--12);
    line-height: 1.25;
    margin-bottom: var(--32);
}

.list-grid--spaced {
    gap: var(--12)
}

.list-grid time {
    letter-spacing: -.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.list-grid a {
    justify-self: start;
    color: var(--font-color-link);
}

.list-grid a:hover {
    color: var(--font-color-link-hover)
}

.list-grid .on-hover {
    opacity: 0;
    transition: opacity 200ms cubic-bezier(.17,.67,.83,.67), transform 200ms cubic-bezier(.17,.67,.83,.67);
    transform: translateX(10px);
}

.list-grid .on-hover:has(+ a:hover, + a:focus, + a:active) {
    opacity: 1;
    transform: translateX(0);
}

.list-grid * {
    margin-block: 0
}

/* Unfinished content. Visible on purpose so it cannot ship unnoticed.
   Delete the box, not just its text, when the content lands. */
.todo {
    border: 1px dashed #c0a878;
    background: #f7f0e2;
    border-radius: 4px;
    padding: var(--12) var(--16);
    margin-bottom: var(--24);
    color: #6b5a36;
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

.todo b {
    display: block;
    font-weight: 700;
    font-size: var(--font-size-xxs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--6);
    color: #8a6520;
}

.todo p {
    margin: 0 0 var(--6);
}

.todo p:last-child {
    margin-bottom: 0;
}

@media screen and (min-width:666px) {

    body {
        padding-top: 0;
        font-size: var(--font-size-m)
    }

    body > header {
        position: static;
        padding-top: var(--24)
    }

    :root {
        --image-preset-thumbnail: 9.5rem;  /* 152px, desktop */
    }

    .main {
        margin-top: 6rem
    }
}

/* ==========================================================================
   Headings, prose
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin-block: var(--32) var(--24);
    clear: both;
    line-height: 1.3;
    font-weight: 700;
    font-size: 1.1875rem;
    color: #201f1f;
}

h1 { font-size: 1.138rem; }
h2 { font-size: 1.067rem; }
h3 { font-size: 1rem; }

h1, main > :first-child {
    margin-top: 0
}

hr {
    border: 0;
    outline: 0;
    border-top: 1px solid #444340;
    width: var(--12)
}

ol, ul {
    margin: var(--24) 0;
    padding: 0;
    list-style: none;
}

ol { counter-reset: items }
ol li { counter-increment: items }

li:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0
}

ul li:before { content: '\2014' }

ol li::before {
    content: counter(items) ". ";
    font-variant-numeric: tabular-nums;
}

li {
    position: relative;
    padding-left: 3.125rem;
    margin-bottom: var(--6)
}

blockquote {
    padding: 0;
    margin: 0 0 var(--24) var(--16)
}

blockquote > :first-child { margin-top: 0 }
blockquote p:last-of-type { margin-bottom: var(--6) }

blockquote footer {
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    display: block;
    color: var(--font-color-secondary)
}

code {
    padding: 0 var(--4);
    background: #e8e3d7;
    border-radius: 4px;
    font-family: monospace;
    font-size: var(--font-size-s);
}

.spacer { height: calc(54px + var(--40)) }

.meta, .time {
    font-variant-numeric: tabular-nums;
    display: block;
}

.meta { margin-top: var(--6) }

.time {
    display: inline-block;
    margin-block: var(--48) var(--24);
    font-size: var(--font-size-s);
    color: var(--font-color-secondary)
}

h1:has(+.meta) { margin-bottom: var(--8) }
h1 + .meta { margin-bottom: var(--32) }

.cluster { display: flex; gap: var(--cluster-gap, var(--8)) }
.right-align { text-align: right }

/* ==========================================================================
   Link grid variants
   ========================================================================== */

.list-grid--dense { row-gap: var(--6) }
.list-grid--reversed { grid-template-columns: 1fr min-content }

.list-grid .meta {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

/* ==========================================================================
   Rating table
   ========================================================================== */

.rating-table {
    display: grid;
    grid-template-columns: minmax(2.375rem, 1fr) min-content min-content;
    gap: var(--6) var(--16);
    line-height: 1.25;
    margin-bottom: var(--32);
}

.rating-table-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rating-table-heading {
    font-weight: 600;
    margin-block: 0 var(--6);
}

.rating-table-rating {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sortable-heading {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    text-align: left;
    letter-spacing: inherit;
}

.sortable-heading:hover { color: var(--font-color-link-hover) }

.sortable-heading[aria-sort="ascending"]:after { content: " \2191" }
.sortable-heading[aria-sort="descending"]:after { content: " \2193" }

/* ==========================================================================
   Albums
   ========================================================================== */

.music-set { margin: var(--24) 0 }
.music-set figure { margin: 0 }

.music-set img {
    max-width: 48px;
    margin: 0;
}

img.size-none {
    max-width: none;
    width: auto;
}

.music-set .album { display: flex; gap: var(--16) }
.music-set .album-info { overflow: hidden }

.music-set .album-title,
.music-set .album-meta {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.music-set .album-meta,
.music-set .album-notes {
    font-size: var(--font-size-xs);
    color: var(--font-color-secondary);
}

.music-set .album-meta { margin-top: 1px }
.music-set .album-notes { margin-top: 4px }

.music-set .items {
    display: flex;
    flex-direction: column;
    gap: var(--18);
}

.music-set .album-cover-wrapper {
    width: 48px;
    height: 48px;
    background: #eeebe6;
    flex-shrink: 0;
}

.albums {
    display: flex;
    flex-direction: column;
    gap: var(--10);
}

/* ==========================================================================
   Truncated highlights, used on review pages
   ========================================================================== */

.truncate-wrapper { position: relative }

.truncate-wrapper[data-collapsed="true"] .truncate-body {
    max-height: 14rem;
    overflow: hidden;
}

.truncate-notice {
    position: absolute;
    height: 14rem;
    max-height: 100%;
    background: linear-gradient(0deg, var(--background-color-page) 45%, #FFFFFF00);
    bottom: -2px;
    width: 100%;
    padding: var(--24);
    text-align: center;
    display: flex;
}

.truncate-wrapper[data-collapsed="false"] .truncate-notice { display: none }

.truncate-notice-content {
    max-width: 25rem;
    margin-block-start: auto;
    margin-inline: auto;
    text-align: center;
    font-size: var(--font-size-s);
}

.truncate-button {
    font: inherit;
    font-size: var(--font-size-xs);
    border: 1px solid #d2cec7;
    padding: var(--6) var(--8);
    border-radius: 4px;
    cursor: pointer;
    background: #f6f3ed;
    color: #3e3425;
    letter-spacing: -0.018em;
}

.truncate-button:hover {
    background: #f0ede7;
    transition: background 0.06s ease-in-out;
}

/* ==========================================================================
   404
   ========================================================================== */

.notfound-code {
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 var(--16);
    color: var(--font-color-link);
}