/* latin */
@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');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Averia Serif Libre';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/averia-serif-libre-700-italic.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 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');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@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');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/noto-jp.woff2") format('woff2');
}

:root {

    /* === Sizes === */
    /*  I set some common sizes this way since it allows me use my intuition for px
        while getting the accessibility benefit of basing some sizing and spacing
        off the root font size.
    */
    --2: 0.125rem;
    --4: 0.25rem;
    --6: 0.375rem;
    --8: 0.5rem;
    --10: 0.625rem;
    --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: 'Noto Sans JP', '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 === */
    --image-preset-thumbnail: 10rem;    /* 160px @ 16px */
    --image-preset-small: 12rem;        /* 192px @ 16px */
    --image-preset-medium: 20rem;       /* 320px @ 16px */
    --image-preset-large: 25rem;        /* 400px @ 16px */
    --image-preset-full: 100%;

}

*, :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,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')
}

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);
}

body > footer svg {
    color: #cac7c1;
    transition: color 100ms ease-in-out
}

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

strong, b {
    font-weight: 600;
}

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

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

hr {
    border: 0;
    outline: 0;
    border-top: 1px solid #e8e3d8;
    margin-block: var(--32);
}

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;  /* 17px */
    color: #201f1f;
}

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

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

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

figure {
    padding: 0
}

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

figure img {
    margin: 0
}

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

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

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

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

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

.list a span {
    white-space: pre-wrap;
}

nav a {
    color: inherit;
}

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: '—';
}

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

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

li p {
    margin-block: 0 var(--16);
}

li p:last-of-type {
    margin-bottom: 0;
}

li blockquote {
    margin-block: 0 var(--24);
}

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

.mark-wrapper,
.highlight-wrapper {
    background-color: #fff3cd;
}

.mark-wrapper mark,
.highlight {
    background: transparent;
    position: relative;
}

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

blockquote.bordered {
    border-left: 2px solid #e1dcd3;
}

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)
}

pre:has(code) {
    background: #f4f1e9;
    overflow-x: auto;
    margin: var(--24) 0;
    font-size: var(--font-size-xxs);
    padding: var(--12);
    border-radius: 6px;
}

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

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

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

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

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

.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.right-align {
    text-align: right;
}

.multiply {
    mix-blend-mode: multiply
}

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

a[rel=reading] {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='12' height='12'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23febc50'/%3E%3C/svg%3E");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.75em;
    padding-right: 1em;
}

.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 > :not(h2, h3, hr):first-child {
    margin-top: 0
}

.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)
}

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

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

.list-grid * > p + p, .list-grid > p + p {
    margin-top: var(--8);
}

.list-grid--reversed {
    grid-template-columns: 1fr min-content;
}

.list-grid--dense {
    row-gap: var(--6);
}

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

.list-grid--spaced a {
    width: 100%;
}

.list-grid--spaced a:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--16);
}

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

.list-grid a {
    justify-self: start;
}

.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 .meta {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.dialogue-list {
    row-gap: var(--10);
}

.dialogue-list .meta {
    text-align: right;
    color: var(--font-color-secondary);
    font-style: italic;
}

.dialogue-list .content {

}

.list {
    padding: 0;
    list-style: none;
    margin: 0
}

.list li {
    margin: 0 0 var(--6);
    padding-left: var(--32);
    position: relative
}

.list li:before {
    content: "»";
    display: block;
    position: absolute;
    left: 0;
    top: 0
}

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

.music-set h2 {
}

.music-set figure {
    margin: 0;
}

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

.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;
}

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

.songs {
    display: grid;
    grid-template-columns: 1fr min-content;
    gap: var(--6) var(--16);
}

.song-artist {
    color: var(--font-color-secondary);
    font-size: var(--font-size-xs);
    margin-top: 1px;
}

.board-container {
    margin: var(--32) 0 var(--48);
}

.board-container--with-move {
    margin-bottom: var(--24);
}

.board-wrapper {
    position: relative;
    max-width: 300px;
    margin: 0 var(--16) 0;
}

.board {
    position: relative;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border-radius: 2px;
    overflow: hidden;
}

.board-bg {
    overflow: hidden;
    display: block;
    max-width: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
}

.board > *:not(.board-bg) {
    position: relative;
    max-width: 100%;
    opacity: 0.8;
    width: 96%;
    margin: 0 auto;
    height: auto;
}

.board-active-move {
    color: var(--font-color-secondary);
    font-size: var(--font-size-s);
    margin-top: var(--40);
    display: flex;
    gap: var(--8);
    align-items: center;
    line-height: 1;
}

.board-active-move-square {
    border: 2px solid var(--border-color);
    border-radius: 2px;
    width: 1.15em;
    height: 1.15em;
}

.board-active-move-square--black {
    background: #c8c3b7;
    border-color: #e6e2da;
}

.board-ranks,
.board-files {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    align-items: center;
}

.board-ranks span,
.board-files span {
    font-size: 12px;
}

.board-ranks {
    top: 0;
    grid-template-rows: repeat(8, 1fr);
    grid-auto-flow: column;
    margin-left: -16px;
}

.board-files {
    grid-template-columns: repeat(8, 1fr);
    margin-bottom: -24px;
    align-items: end;
    justify-content: end;
    text-align: center;
}

.media-block {

}

.media-block-meta {
    color: var(--font-color-secondary);
    font-size: var(--font-size-s);
    margin-top: calc(-1 * var(--24));
}

.media-block-image figure {
    margin-block: var(--18);
}

.media-block-image img {
    width: var(--image-preset-large);
    height: auto;
    margin: 0 0 var(--16);
    max-width: 100%;
}

.feed-item {
    padding-block: var(--24);
    border-top: 1px dotted #e1dcd3;
}

.feed-item:last-child {
    border-bottom: 1px dotted #e1dcd3;
}

.feed-item-footer {
    display: flex;
    margin-top: var(--16);
    justify-content: space-between;
}

.feed-item .content > :last-child {
    margin-bottom: 0;
}

.feed-item .content figure {
    margin-bottom: var(--24);
}

.feed-item-footer, .feed-item-permalink {
    font-size: var(--font-size-xxs);
    color: #756f65;
    text-decoration: none;
}

.small-title {
    font-size: var(--font-size-m);
    margin-bottom: var(--16);
}


.rating-table {
    display: grid;
    grid-template-columns: minmax(2.375rem, 1fr) min-content min-content;
    gap: var(--6) var(--12);
    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;
}

.sort-tooltip-container {
    position: relative;
}

.sort-tooltip {
    position: absolute;
    display: flex;
    gap: var(--8);
    font-size: var(--font-size-xxs);
    font-weight: 600;
    align-items: start;

    flex-direction: row-reverse;
    transform: rotate(-4deg);
    scale: 0.75;
    right: 0.2rem;
    top: -2.25rem;
}

.sort-tooltip-text {
    position: relative;
    top: 0.2rem;
}

.truncate-wrapper {
    position: relative;
}

.truncate-notice {
    --input-block-padding: var(--8);
    position: absolute;
    height: 22rem;
    max-height: 100%;
    background: #FCF9F4;
    background: radial-gradient(at center bottom, #FCF9F4 32%, #FFFFFF00),
                linear-gradient(0deg, #FCF9F4 45%, #FFFFFF00);
    bottom: -2px;
    width: 100%;
    padding: var(--24);
    text-align: center;
    display: flex;
}

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

.truncate-password {
    background: #fffefd;
    font: inherit;
    border: 1px solid #d2cec7;
    padding: var(--input-block-padding) var(--8);
    border-radius: 4px;
    width: 100%;
}

.truncate-button {
    font: inherit;
    font-size: var(--font-size-xs);
    border: 1px solid #d2cec7;
    padding: var(--input-block-padding) 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;
}

.truncate-password-cluster {
    max-width: 17.5rem;  /* 280px */
    margin-inline: auto;
}

.truncate-password--fail {
    border-color: #e1a8a8;
    background: #fdf3f2;
}

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

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

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

    h1, h2, h3, h4, h5, h6 {
        margin-block: var(--40) var(--24);
        font-size: 1.25rem;  /* 19px */
    }

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

    h1 {
        margin-top: 0
    }

    blockquote {
        padding-left: var(--24);
    }

    li {
        position: relative;
        padding-left: 3.375rem;
    }

    .main {
        margin-top: 6rem
    }

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

    .list-grid * > p + p, .list-grid > p + p {
        margin-top: var(--10);
    }

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

    .list-grid--dense {
        row-gap: var(--6);
    }

    .list-grid time {
        margin-top: 0
    }

    .list-grid time, blockquote footer {
        font-size: var(--font-size-s)
    }

    .list-grid .meta {
        line-height: inherit;
    }

    .dialogue-list {
        row-gap: var(--10);
    }

    .rating-table {
        column-gap: var(--16);
    }

    .sort-tooltip {
        scale: 0.8;
        top: -2.5rem;
    }

    .truncate-notice {
        --input-block-padding: var(--6);
    }
}