* {
    box-sizing: border-box;
}
html {
    font: 10pt/1.6 sans-serif;
    writing-mode: vertical-rl;
    --acc: light-dark(#30c, #99f);
    accent-color: var(--acc);
    background: var(--bg);
    color: var(--fg);
    --bg: light-dark(#fff, #333);
    --fg: light-dark(#005, #eee);
    --dim: light-dark(hsl(from var(--fg) h s l / 40%), hsl(from var(--fg) h s l / 50%));
    color-scheme: light dark;
}
a:any-link {
    text-decoration: underline;
    text-underline-offset: .15em;
    text-decoration-style: dotted;
    color: var(--acc);
    &:hover {
        text-decoration-style: double;
    }
}

:is(h1, div, .archive li) > a:any-link {
    text-decoration: none;
    &:hover {
        background: light-dark(#00000019, #fff1);
    }
}

p, li {
    text-align: justify;
    hanging-punctuation: allow-end last;
}
ol > li {
    list-style: trad-chinese-informal;
}
h1, h2, h3 {
    line-height: 1.3;
    text-wrap: balance;
}
blockquote {
    font-size: .9em;
}
small {
    font-size: .75em;
}
html {
    display: flex;
    flex-direction: column;
    min-block-size: 100%;
}
body {
    flex: 1;
    margin: 0;
    display: grid;
    grid-template-columns:
        [full-start] minmax(2em, 1fr)
        [main-start top-start] minmax(0, 16em)
        [top-end] 3em
        [bottom-start] minmax(0, 22em)
        [bottom-end main-end] minmax(2em, 1fr)
        [full-end];
    grid-template-rows:
        /*minmax(220px, */max-content 1fr min-content;
    h2 {
        text-transform: uppercase;
        letter-spacing: .25em;
        font-size: .86em;
        color: var(--dim);
    }
    & > footer {
        padding-block: 1em;
        grid-column: main;
        grid-row: 3;
        > :last-child {
            color: var(--dim);
            text-align: end;
            text-wrap: balance;
            grid-column: 1 / -1;
        }
    }
    & > aside {
        padding-block: 1em;
        grid-row: 1;
        grid-column: bottom;
        align-self: end;
    }
    & > header {
        grid-column: top;
        grid-row: 1;
        padding-block: 2em;
        display: flex;
        align-items: end;
        .title {
            margin: 0;
            font-weight: bold;
            a {
                color: inherit;
            }
            & + p {
                margin-block: .25em;
                color: var(--dim);
                font-size: .86em;
            }
        }
    }
    & > main {
        grid-column: main;
        padding-block: 1.5em;
        font-family: "Source Han Serif", serif;
        font-size: 14pt;
        & > article {
            & + & {
                margin-block-start: 1em;
            }
            header > h1 {
                font-size: 1.25em;
                margin-block: .15em 1em;
                a:any-link {
                    color: inherit;
                }
            }
            header > time {
                text-transform: uppercase;
                letter-spacing: .25em;
                font-size: 1rem;
                font-family: sans-serif;
                font-weight: bold;
                color: var(--dim);
            }
            header + p/*::first-letter*/ .init {
                float: left;
                font-size: 1.8lh;
                line-height: 1;
                margin-inline-end: .5rem;
                color: var(--acc);
            }
            > p {
                margin: 0;
            }
            > p + p {
                text-indent: 2em;
            }
            > p:last-child::after {
                content: "◼";
                color: var(--acc);
            }
            .readmore {
                font-family: sans-serif;
                font-size: .86em;
                text-align: end;
                a::before {
                    content: "→ ";
                }
            }
            > footer {
                margin-block: 1em;
                font-size: .75em;
                font-family: sans-serif;
                text-align: end;
            }
            figure {
                max-inline-size: 100%;
                > :not(figcaption) {
                    max-inline-size: 100%;
                }
                > img {
                    border: 1px solid var(--dim);
                    padding: .5ch;
                }
                figcaption {
                    font-size: .75em;
                    font-family: sans-serif;
                    opacity: .6;
                    min-width: 100%;
                }
            }
            hr {
                border: 0;
                color: inherit;
                text-align: center;
                letter-spacing: 2em;
                font-size: .5em;
                margin-block: 3em;
                &::before {
                    content: "＊＊＊";
                }
            }
            em {
                font-style: normal;
                text-emphasis: filled var(--acc);
            }
            h2 {
                margin-block-start: 2rem;
                color: inherit;
                font-family: sans-serif;
            }
        }
        > .archive {
            h2 {
                text-transform: uppercase;
                letter-spacing: .25em;
                font-size: 1rem;
                font-family: sans-serif;
                font-weight: bold;
                color: var(--dim);
                padding-block: 1em 0;
            }
            ol {
                padding: 0; 
                margin: 0;
            }
            li {
                list-style: none;
                font-size: 1.05em;
                margin-block: .5em;
                a:any-link {
                    color: inherit;
                    font-weight: bold;
                }
            }
        }
    }
}
.pixelated {
    image-rendering: pixelated;
}
.upright {
    text-combine-upright: all;
}
.seal {
    width: 32px;
    height: 48px;
    background: #000;
    outline: 2px solid var(--fg);
    border-radius: 999px
}