:root {
    color-scheme: light;
    --paper: #f2eee7;
    --paper-deep: #e8e1d6;
    --ink: #292722;
    --muted: #777168;
    --faint: #a49b90;
    --line: rgba(53, 46, 38, .14);
    --line-strong: rgba(53, 46, 38, .28);
    --accent: #9a5b3a;
    --accent-soft: rgba(154, 91, 58, .12);
    --content: 1080px;
    --reading: 720px;
    --sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --serif: "Iowan Old Style", "Noto Serif SC", "Songti SC", "STSong", serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --paper: #1d1c19;
    --paper-deep: #27241f;
    --ink: #e9e3d8;
    --muted: #aaa196;
    --faint: #766e65;
    --line: rgba(239, 229, 214, .13);
    --line-strong: rgba(239, 229, 214, .28);
    --accent: #d19a76;
    --accent-soft: rgba(209, 154, 118, .14);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--ink);
    background-color: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
    font: 15px/1.7 var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { color: var(--paper); background: var(--accent); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, input, textarea { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.shell { width: min(calc(100% - 48px), var(--content)); margin: 0 auto; }

.site-header { position: relative; z-index: 2; background: color-mix(in srgb, var(--paper) 90%, transparent); }
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 34px; }
.site-mark { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: 17px; font-weight: 650; letter-spacing: .01em; }
.site-nav { display: flex; align-items: center; gap: 22px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { position: relative; padding: 4px 0; color: var(--muted); font-size: 13px; white-space: nowrap; }
.site-nav a.is-active { color: var(--accent); }
.header-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.search-form { display: flex; align-items: center; }
.search-form input { width: 80px; padding: 5px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; transition: width .2s ease; }
.search-form input:focus { width: 130px; }
.search-form input::placeholder { color: var(--faint); }
.theme-toggle { display: inline-grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle span { grid-area: 1 / 1; line-height: 1; font-size: 16px; }
.icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: none; }
html[data-theme="dark"] .icon-moon { display: inline; }
.paper-rule { display: none; }

.page-shell { flex: 1; padding-top: 78px; padding-bottom: 112px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 96px; }
.archive-label { margin: 0 0 24px; color: var(--accent); font-size: 11px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.post-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 30px 0 34px; overflow-wrap: anywhere; }
.post-card:first-of-type { padding-top: 0; }
.post-card-title { max-width: 700px; margin: 0 0 8px; font: 500 clamp(23px, 3vw, 31px)/1.25 var(--serif); letter-spacing: -.01em; }
.post-card-title a:hover { color: var(--accent); }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 15px; color: var(--muted); font-size: 12px; }
.entry-meta a { color: inherit; }
.entry-meta a:hover { color: var(--accent); }
.post-excerpt { max-width: 680px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.read-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--accent); font-size: 12px; font-weight: 650; }
.read-link span, .submit-button span, .side-links span { display: inline-block; transition: transform .2s ease; }
.read-link:hover span, .submit-button:hover span, .side-links a:hover span { transform: translate(2px, -2px); }
.empty-state { padding: 48px 0; color: var(--muted); }
.page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-top: 26px; color: var(--muted); font-size: 12px; }
.page-links .current { color: var(--accent); }
.page-links a:hover { color: var(--accent); }
.side-column { padding-top: 53px; }
.side-note { padding: 19px 0 22px; }
.side-note p { margin: 0; color: var(--muted); font: 16px/1.65 var(--serif); }
.side-links { display: flex; gap: 14px; margin-top: 22px; color: var(--accent); font-size: 12px; }
.side-links a { display: inline-flex; gap: 5px; align-items: center; }

.single-entry { max-width: var(--reading); margin: 0 auto; }
.single-title { margin: 0 0 10px; font: 500 clamp(32px, 5vw, 52px)/1.2 var(--serif); letter-spacing: -.025em; }
.single-entry > .entry-meta { margin-bottom: 54px; }
.entry-content { color: var(--ink); font: 17px/1.95 var(--serif); overflow-wrap: anywhere; word-break: break-word; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin: 2.3em 0 .7em; font-weight: 600; line-height: 1.35; }
.entry-content h2 { font-size: 28px; }
.entry-content h3 { font-size: 23px; }
.entry-content h4 { font-size: 19px; }
.entry-content p { margin: 1.25em 0; }
.entry-content a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.entry-content a:hover { text-decoration-color: var(--accent); }
.entry-content ul, .entry-content ol { padding-left: 1.5em; }
.entry-content li { margin: .35em 0; }
.entry-content blockquote { margin: 2em 0; padding: 12px 18px; color: var(--muted); background: var(--accent-soft); font-style: italic; }
.entry-content pre { overflow-x: auto; margin: 2em 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: var(--paper-deep); font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
.entry-content code { padding: .13em .3em; border-radius: 2px; background: var(--paper-deep); font: .84em ui-monospace, SFMono-Regular, Consolas, monospace; }
.entry-content pre code { padding: 0; background: transparent; }
.entry-content img { display: block; max-width: 100%; height: auto; margin: 2em auto; }
.entry-content figure { margin: 2em 0; }
.entry-content figcaption { margin-top: -1.2em; color: var(--muted); font: 12px/1.5 var(--sans); text-align: center; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.entry-content th, .entry-content td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.entry-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; font: 12px var(--sans); }
.entry-tags a { padding: 4px 9px; color: var(--muted); background: var(--accent-soft); }
.entry-tags a:hover { color: var(--accent); }
.post-neighbors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: var(--reading); margin: 78px auto 0; padding-top: 20px; }
.neighbor { min-width: 0; }
.neighbor.next { text-align: right; }
.neighbor-label { display: block; margin-bottom: 6px; color: var(--faint); font-size: 11px; }
.neighbor strong { display: block; overflow: hidden; color: var(--muted); font: 16px/1.4 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.neighbor a:hover strong { color: var(--accent); }

.comments-section { max-width: var(--reading); margin: 92px auto 0; padding-top: 23px; }
.comments-title, .respond-title { margin: 0 0 24px; font: 500 20px/1.3 var(--serif); }
.comment-list { margin-bottom: 36px; overflow-wrap: anywhere; word-break: break-word; }
.comment-list ol, .comment-list ul { margin: 0; padding: 0; list-style: none; }
.comment-list .comment { padding: 21px 0; }
.comment-list .comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.comment-list .avatar { width: 30px; height: 30px; border-radius: 50%; }
.comment-list .comment-meta { color: var(--faint); font-size: 11px; }
.comment-list .comment-content { padding-left: 40px; color: var(--muted); font: 15px/1.75 var(--serif); }
.comment-list .comment-reply { padding-left: 40px; color: var(--accent); font-size: 12px; }
.comment-pages { margin-top: 18px; color: var(--muted); font-size: 12px; }
.respond { margin-top: 56px; }
.cancel-comment-reply { min-height: 18px; margin-bottom: 14px; color: var(--accent); font-size: 12px; }
.comment-form label { display: block; }
.comment-form label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.comment-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 17px; }
.comment-form input, .comment-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 0; outline: 0; color: var(--ink); background: color-mix(in srgb, var(--paper-deep) 42%, transparent); }
.comment-form input { height: 40px; padding: 0 10px; }
.comment-form textarea { display: block; min-height: 140px; padding: 10px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.submit-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 0; color: var(--paper); background: var(--accent); cursor: pointer; font-size: 12px; }
.submit-button:hover { color: var(--paper); filter: brightness(1.08); }
.login-note, .comments-closed { color: var(--muted); font-size: 13px; }
.login-note a { color: var(--accent); }

.not-found { max-width: var(--reading); margin: 0 auto; padding: 90px 0; }
.not-found h1 { margin: 0 0 10px; font: 500 38px/1.3 var(--serif); }
.not-found p { margin: 0; color: var(--muted); }
.not-found .read-link { margin-top: 28px; }
.site-footer { color: var(--faint); font-size: 11px; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 28px; }
.footer-inner p { margin: 0; }
.footer-inner a:hover { color: var(--accent); }

@media (max-width: 760px) {
    .shell { width: min(calc(100% - 32px), var(--content)); }
    .header-inner { min-height: 64px; flex-wrap: wrap; gap: 11px 22px; padding: 10px 0; }
    .site-nav { order: 3; width: 100%; gap: 18px; padding-bottom: 2px; }
    .header-tools { gap: 10px; }
    .search-form input { width: 70px; }
    .search-form input:focus { width: 100px; }
    .page-shell { padding-top: 50px; padding-bottom: 76px; }
    .home-grid { display: block; }
    .side-column { display: none; }
    .post-card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0 28px; }
    .post-card-title { font-size: 24px; }
    .post-excerpt { font-size: 13px; line-height: 1.75; }
    .single-title { font-size: 35px; }
    .single-entry > .entry-meta { margin-bottom: 38px; }
    .entry-content { font-size: 16px; line-height: 1.9; }
    .entry-content h2 { font-size: 25px; }
    .entry-content h3 { font-size: 21px; }
    .post-neighbors { margin-top: 58px; }
    .comments-section { margin-top: 70px; }
    .comment-fields { grid-template-columns: 1fr; gap: 12px; }
    .footer-inner { display: block; }
    .footer-inner p + p { margin-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}