body { background: #f1f1f1; color: #000; }
body { position: relative; padding: 0; }
body::before, body::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--frame-width);
    z-index: 110;
    background: #e4d638 url('/assets/images/shared/background-texture.webp') repeat;
    pointer-events: none;
}
body::before { left: 0; }
body::after { right: 0; }
.site-header { position: relative; z-index: 1; }
@media (min-width: 901px) {
    body {
        padding-top: 20px;
    }
    .site-header { margin-bottom: 20px; }
}
.writing-page { position: relative; width: min(820px, calc(100% - 2 * var(--frame-width))); box-sizing: border-box; min-height: calc(100dvh - 52px - env(safe-area-inset-top, 0px)); margin: 0 auto; padding: 48px 28px calc(100px + env(safe-area-inset-bottom, 0px)); }
.writing-page h1 { font-size: clamp(3rem, 8vw, 5rem); font-weight: 400; line-height: 1.1; margin: 0 0 32px; }
.writing-page h2 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; line-height: 1.2; margin: 12px 0; }
.writing-page p, .writing-page time, .writing-page button, .writing-back { font-family: "PP Right Serif Mono", monospace; font-size: 16px; line-height: 1.5; }
.writing-entry { border-top: 1px solid currentColor; padding: 24px 0 32px; }
.writing-entry a, .writing-back { text-decoration: underline; text-underline-offset: 5px; }
.writing-page time { display: block; }
.writing-body { max-width: 680px; }
.writing-body p { margin: 16px 0; overflow-wrap: anywhere; }
.writing-body h2 { margin-top: 32px; }
.writing-back { display: inline-block; margin-bottom: 24px; }
.writing-page button { color: inherit; background: transparent; border: 1px solid currentColor; padding: 10px 20px; cursor: pointer; }
.writing-page button[hidden] { display: none; }
.writing-page :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@media (max-width: 900px) {
    .writing-page { width: calc(100% - 2 * var(--frame-width)); padding: 36px 20px calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-color-scheme: dark) {
    body { background: #121212; color: #fff; }
    body::before, body::after { background: #001644 url('/assets/images/shared/background-texture-dark.webp') repeat; }
}