/*
Theme Name: Luma
Theme URI: https://typecho.org
Description: 24 套随机配色、三栏布局、零框架依赖的轻量 Typecho 主题。
Version: 1.0.0
Author: Codex
*/

:root {
    --bg: #f7f5f0;
    --surface: #fffdf9;
    --surface-2: #f1ece3;
    --text: #25221f;
    --muted: #746d65;
    --line: #dfd8ce;
    --accent: #d97745;
    --accent-2: #f0b07c;
    --accent-soft: #f7dfcd;
    --shadow: 0 18px 60px rgba(61, 45, 31, .08);
    --radius: 22px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --serif: ui-serif, "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 18 日间主题 */
[data-palette="apricot"] { --bg:#f8f2e9;--surface:#fffaf3;--surface-2:#efe3d3;--text:#30241d;--muted:#806d61;--line:#e4d3c2;--accent:#d16f42;--accent-2:#f0b27e;--accent-soft:#f7ddca }
[data-palette="seaside"] { --bg:#eef6f5;--surface:#f9ffff;--surface-2:#dcecea;--text:#193437;--muted:#617b7c;--line:#cbdedd;--accent:#168b92;--accent-2:#70c6c4;--accent-soft:#d3efec }
[data-palette="wisteria"] { --bg:#f5f1f8;--surface:#fdfaff;--surface-2:#e9e0ee;--text:#30273a;--muted:#746980;--line:#dcd1e3;--accent:#825ca3;--accent-2:#baa0d0;--accent-soft:#eadcf1 }
[data-palette="matcha"] { --bg:#f2f5ec;--surface:#fbfdf7;--surface-2:#e4ead9;--text:#293126;--muted:#6d7766;--line:#d5deca;--accent:#6a874d;--accent-2:#a8c484;--accent-soft:#e2ecd3 }
[data-palette="rose"] { --bg:#faf1f2;--surface:#fffafb;--surface-2:#f0dfe2;--text:#38272b;--muted:#826a70;--line:#e4cfd4;--accent:#b95f76;--accent-2:#df9cab;--accent-soft:#f4dce2 }
[data-palette="sky"] { --bg:#f0f6fb;--surface:#fbfdff;--surface-2:#e0ebf4;--text:#213241;--muted:#667888;--line:#d0dfea;--accent:#397fae;--accent-2:#85b9d7;--accent-soft:#d9edf8 }
[data-palette="amber"] { --bg:#f8f4e8;--surface:#fffdf7;--surface-2:#eee5ce;--text:#352c1e;--muted:#7f735f;--line:#e1d5b9;--accent:#a97822;--accent-2:#dbb767;--accent-soft:#f5e7bd }
[data-palette="mint"] { --bg:#eff7f2;--surface:#fbfffc;--surface-2:#dcece2;--text:#20352a;--muted:#62796b;--line:#cce0d3;--accent:#398a61;--accent-2:#82c5a1;--accent-soft:#d5efdf }
[data-palette="coral"] { --bg:#faf2ef;--surface:#fffaf8;--surface-2:#f1e0da;--text:#3b2925;--muted:#836e68;--line:#e5d1ca;--accent:#cc6656;--accent-2:#e99b8c;--accent-soft:#f7ddd6 }
[data-palette="iris"] { --bg:#f3f2fa;--surface:#fcfbff;--surface-2:#e4e2f1;--text:#292943;--muted:#6c6c85;--line:#d5d3e7;--accent:#6669b1;--accent-2:#a1a4d8;--accent-soft:#e0e1f5 }
[data-palette="lagoon"] { --bg:#edf6f7;--surface:#f9ffff;--surface-2:#d8eaec;--text:#17353c;--muted:#5f7980;--line:#c7dde1;--accent:#17839b;--accent-2:#6dbbca;--accent-soft:#d1eef2 }
[data-palette="peach"] { --bg:#fff3ec;--surface:#fffaf7;--surface-2:#f4dfd2;--text:#3a2922;--muted:#836e65;--line:#e8d1c4;--accent:#dd7656;--accent-2:#f0aa8d;--accent-soft:#fbe0d3 }
[data-palette="sage"] { --bg:#f1f3ee;--surface:#fbfcf9;--surface-2:#e1e5dc;--text:#29302a;--muted:#6e786f;--line:#d3d9cf;--accent:#647e69;--accent-2:#9eb4a1;--accent-soft:#dfe8df }
[data-palette="lilac"] { --bg:#f7f2f8;--surface:#fffaff;--surface-2:#ebe0ec;--text:#342838;--muted:#78697c;--line:#ded0e0;--accent:#9762a0;--accent-2:#c69cca;--accent-soft:#efdcf0 }
[data-palette="lemon"] { --bg:#faf8e9;--surface:#fffef7;--surface-2:#eeead0;--text:#343120;--muted:#7a765f;--line:#e1dcbf;--accent:#9c8b25;--accent-2:#d2c55f;--accent-soft:#f3edbd }
[data-palette="clay"] { --bg:#f5f0eb;--surface:#fcfaf7;--surface-2:#e8ded5;--text:#352b25;--muted:#7c6c63;--line:#d9ccc2;--accent:#a45f43;--accent-2:#ce9275;--accent-soft:#edd8cb }
[data-palette="glacier"] { --bg:#edf5f8;--surface:#f9fdff;--surface-2:#dae8ed;--text:#1f333c;--muted:#637985;--line:#c9dce3;--accent:#397f99;--accent-2:#82b6c7;--accent-soft:#d6ebf1 }
[data-palette="sunset"] { --bg:#fbf0e9;--surface:#fff9f5;--surface-2:#f1ddd3;--text:#3b2828;--muted:#84696b;--line:#e6cec8;--accent:#c45d68;--accent-2:#e89a79;--accent-soft:#f8d9ce }

/* 6 夜间主题 */
[data-palette="starlight"] { --bg:#111521;--surface:#181d2b;--surface-2:#22283a;--text:#edf0fa;--muted:#a2a9bd;--line:#30384e;--accent:#8e9cff;--accent-2:#c0c8ff;--accent-soft:#292f53;--shadow:0 24px 70px rgba(0,0,0,.28) }
[data-palette="aurora"] { --bg:#0e1c1d;--surface:#142627;--surface-2:#1d3434;--text:#eef8f4;--muted:#9eb8b0;--line:#2b4543;--accent:#55c49c;--accent-2:#8cdbbd;--accent-soft:#1d443b;--shadow:0 24px 70px rgba(0,0,0,.3) }
[data-palette="ember"] { --bg:#1c1513;--surface:#271c19;--surface-2:#372722;--text:#fff1e9;--muted:#bea69c;--line:#4a332c;--accent:#f1825e;--accent-2:#f5b08f;--accent-soft:#4c2c25;--shadow:0 24px 70px rgba(0,0,0,.3) }
[data-palette="deepsea"] { --bg:#091a25;--surface:#102532;--surface-2:#193544;--text:#edf7fb;--muted:#95b1bd;--line:#284655;--accent:#44a9c7;--accent-2:#82cde0;--accent-soft:#174254;--shadow:0 24px 70px rgba(0,0,0,.3) }
[data-palette="plum"] { --bg:#1a121d;--surface:#251a29;--surface-2:#35253a;--text:#faeefb;--muted:#b7a0ba;--line:#49334e;--accent:#c178c9;--accent-2:#dca8e0;--accent-soft:#48294d;--shadow:0 24px 70px rgba(0,0,0,.3) }
[data-palette="forest"] { --bg:#101a16;--surface:#18241f;--surface-2:#24332c;--text:#eff7f1;--muted:#9daf9f;--line:#35463d;--accent:#7cad7c;--accent-2:#afd0a7;--accent-soft:#29442f;--shadow:0 24px 70px rgba(0,0,0,.3) }

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scrollbar-color: var(--accent) var(--bg) }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.7 var(--sans);
    transition: background-color .45s ease, color .45s ease;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -3;
    opacity: .35;
    background-image: radial-gradient(color-mix(in srgb, var(--text) 18%, transparent) .55px, transparent .55px);
    background-size: 7px 7px;
}
a { color: inherit; text-decoration: none }
button, input, textarea { color: inherit; font: inherit }
img { display: block; max-width: 100% }
::selection { background: var(--accent); color: var(--surface) }
.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 }
.skip-link { position:fixed;left:16px;top:-60px;z-index:100;background:var(--text);color:var(--surface);padding:10px 16px;border-radius:10px;transition:top .2s }
.skip-link:focus { top:16px }

.ambient {
    position: fixed;
    z-index: -2;
    width: 36vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .11;
    pointer-events: none;
    animation: ambient-drift 14s ease-in-out infinite alternate;
}
.ambient-one { background:var(--accent);left:-12vw;top:-14vw }
.ambient-two { background:var(--accent-2);right:-16vw;bottom:-20vw;animation-delay:-5s }
@keyframes ambient-drift { to { transform:translate3d(5vw,3vh,0) scale(1.12) } }

.site-grid {
    width: min(1560px, 100%);
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 284px) minmax(0, 1fr) minmax(230px, 300px);
}
.left-column, .right-column { min-width:0 }
.left-column { border-right:1px solid var(--line) }
.right-column { border-left:1px solid var(--line) }
.side-sticky { position:sticky;top:0;max-height:100vh;overflow:auto;scrollbar-width:none;padding:32px 26px }
.side-sticky::-webkit-scrollbar { display:none }
.content-column { min-width:0;padding:clamp(48px,6vw,96px) clamp(34px,6vw,96px) 80px }

.brand { display:flex;align-items:center;gap:13px;margin-bottom:32px }
.brand-mark {
    display:grid;
    width:44px;
    height:44px;
    flex:0 0 auto;
    overflow:hidden;
    border-radius:15px;
    place-items:center;
    background:var(--accent);
    color:var(--surface);
    box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 30%,transparent);
    font:700 20px/1 var(--serif);
    transform:rotate(-3deg);
    transition:transform .45s var(--ease);
}
.brand-mark:hover { transform:rotate(4deg) scale(1.05) }
.brand-mark img { width:100%;height:100%;object-fit:cover }
.brand strong { display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 17px/1.4 var(--serif) }
.brand small { display:block;color:var(--muted);font-size:9px;letter-spacing:.18em }

.search-form { display:flex;border-bottom:1px solid var(--line);margin-bottom:22px }
.search-form input { width:100%;padding:10px 2px;border:0;outline:0;background:transparent }
.search-form input::placeholder { color:var(--muted) }
.search-form button { border:0;background:transparent;cursor:pointer;color:var(--accent);font-size:18px;transition:transform .25s var(--ease) }
.search-form button:hover { transform:translate(3px,-3px) }
.primary-nav { display:flex;gap:7px;flex-wrap:wrap;margin-bottom:30px }
.primary-nav a { padding:5px 10px;border-radius:999px;color:var(--muted);font-size:13px }
.primary-nav a:hover, .primary-nav a.is-active { background:var(--accent-soft);color:var(--accent) }

.section-label { display:flex;align-items:center;gap:12px;margin:26px 0 13px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase }
.section-label i { height:1px;flex:1;background:var(--line) }
.article-index { list-style:none;padding:0;margin:0;counter-reset:posts }
.article-index li { position:relative }
.article-index a { display:grid;grid-template-columns:36px 1fr;gap:8px;padding:9px 0;align-items:start }
.article-index a::before { content:"";position:absolute;left:-26px;top:12px;width:3px;height:0;border-radius:3px;background:var(--accent);transition:height .3s var(--ease) }
.article-index a:hover::before, .article-index .is-current a::before { height:24px }
.article-index span { padding-top:2px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums }
.article-index strong { display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:13px;line-height:1.55;font-weight:550;transition:color .2s }
.article-index a:hover strong, .article-index .is-current strong { color:var(--accent) }
.category-list a { display:flex;justify-content:space-between;padding:6px 0;color:var(--muted);font-size:13px }
.category-list a:hover { color:var(--accent) }
.category-list em { font-style:normal;font-variant-numeric:tabular-nums }

.home-intro { position:relative;max-width:760px;margin:5vh 0 82px }
.eyebrow { color:var(--accent);font-size:10px;font-weight:750;letter-spacing:.2em }
.home-intro h1, .archive-header h1, .error-page h1 {
    margin:18px 0 24px;
    font:700 clamp(42px,5.4vw,78px)/1.12 var(--serif);
    letter-spacing:-.055em;
}
.home-intro .hero-japanese {
    font-family: "YuKyokasho", "Yu Kyokasho", "游教科書体", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-weight: 600;
    letter-spacing: -.045em;
}
.home-intro h1 em { color:var(--accent);font-style:normal;position:relative }
.home-intro h1 em::after { content:"";position:absolute;left:0;right:0;bottom:-7px;height:5px;background:var(--accent-2);border-radius:50%;transform:rotate(-1deg);opacity:.65 }
.home-intro > p { max-width:580px;color:var(--muted);font-size:16px }
.pinned-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:76px }
.pinned-card {
    min-height:230px;
    padding:24px;
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow);
    transition:transform .38s var(--ease),border-color .3s,background .3s;
}
.pinned-card:nth-child(2) { background:var(--accent-soft) }
.pinned-card:nth-child(3) { background:var(--surface-2) }
.pinned-card:hover { transform:translateY(-7px) rotate(-.5deg);border-color:var(--accent) }
.pinned-card > span { color:var(--accent);font-size:11px }
.pinned-card h2 { margin:28px 0 10px;font:650 21px/1.35 var(--serif) }
.pinned-card p { margin:0;color:var(--muted);font-size:13px }
.pinned-card i { margin-top:auto;padding-top:18px;font-size:12px;font-style:normal }

.stream-heading { display:flex;justify-content:space-between;align-items:end;padding-bottom:17px;border-bottom:1px solid var(--line) }
.stream-heading h2 { margin:0;font:700 28px/1.2 var(--serif) }
.stream-heading span { color:var(--muted);font-size:10px;letter-spacing:.16em }
.post-card { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,170px);gap:28px;padding:32px 0;border-bottom:1px solid var(--line) }
.post-card:not(.has-thumbnail) { grid-template-columns:1fr }
.post-card-main { min-width:0 }
.post-kicker { display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;letter-spacing:.04em }
.post-kicker span { color:var(--accent) }
.post-card h2 { margin:11px 0 12px;font:650 clamp(22px,2.4vw,30px)/1.35 var(--serif);letter-spacing:-.025em;transition:color .25s }
.post-card-main:hover h2 { color:var(--accent) }
.post-card p { max-width:680px;margin:0;color:var(--muted) }
.post-card-foot { display:flex;justify-content:space-between;margin-top:22px;color:var(--muted);font-size:11px }
.post-card-foot b { color:var(--text);font-weight:600 }
.post-card-foot i { display:inline-block;color:var(--accent);font-style:normal;transition:transform .25s }
.post-card-main:hover .post-card-foot i { transform:translate(3px,-3px) }
.post-thumbnail { align-self:center;overflow:hidden;aspect-ratio:4/3;border-radius:18px;background:var(--surface-2) }
.post-thumbnail img { width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease),filter .3s }
.post-thumbnail:hover img { transform:scale(1.055) }
.moment-card { margin:22px 0;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--accent-soft) }
.moment-card h2 { font-size:21px }

.pagination { display:flex;justify-content:center;margin-top:48px }
.page-list { display:flex;gap:8px;padding:0;list-style:none }
.page-list a, .page-list span { display:grid;min-width:36px;height:36px;padding:0 10px;place-items:center;border:1px solid var(--line);border-radius:12px }
.page-list a:hover, .page-list .current span, .page-list .current a { border-color:var(--accent);background:var(--accent);color:var(--surface) }
.empty-state { margin:40px 0;padding:44px;border:1px dashed var(--line);border-radius:var(--radius);text-align:center }
.empty-state strong { font:650 24px var(--serif) }
.empty-state p { color:var(--muted) }

.right-actions { margin-bottom:28px }
.theme-button { display:flex;width:100%;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;text-align:left;transition:transform .3s var(--ease),border-color .3s }
.theme-button:hover { transform:translateY(-2px);border-color:var(--accent) }
.theme-symbol { display:grid;width:34px;height:34px;border-radius:50%;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:19px }
.theme-button b, .theme-button small { display:block }
.theme-button b { font-size:13px }
.theme-button small { color:var(--muted);font-size:10px }
.profile-card, .info-card { padding:25px;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow) }
.profile-avatar { width:72px;height:72px;margin-bottom:21px;overflow:hidden;border-radius:24px;background:var(--accent);color:var(--surface);transform:rotate(3deg);display:grid;place-items:center;font:700 30px var(--serif) }
.profile-avatar img { width:100%;height:100%;object-fit:cover }
.profile-card h2 { margin:6px 0 8px;font:700 24px var(--serif) }
.profile-card p { color:var(--muted);font-size:13px }
.profile-links { display:flex;flex-wrap:wrap;gap:7px;margin-top:18px }
.profile-links a { padding:5px 8px;border-radius:8px;background:var(--surface-2);font-size:10px }
.profile-links a:hover { background:var(--accent-soft);color:var(--accent) }
.hot-list > a { display:grid;grid-template-columns:26px 1fr;gap:10px;padding:8px 0;align-items:start;font-size:12px }
.hot-list em { color:var(--accent);font-style:normal;font-size:10px }
.hot-list span { display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2 }
.hot-list a:hover span { color:var(--accent) }
.tag-cloud > div { display:flex;flex-wrap:wrap;gap:6px }
.tag-cloud a { padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px }
.tag-cloud a:hover { border-color:var(--accent);color:var(--accent) }
.accent-card { background:var(--accent);color:var(--surface) }
.accent-card .eyebrow { color:color-mix(in srgb,var(--surface) 75%,transparent) }
.accent-card strong { display:block;margin-top:14px;font:700 38px/1 var(--serif) }
.accent-card small { opacity:.76 }
.reading-progress { height:3px;margin-top:22px;overflow:hidden;border-radius:3px;background:color-mix(in srgb,var(--surface) 25%,transparent) }
.reading-progress i { display:block;width:100%;height:100%;background:var(--surface);transform:scaleX(0);transform-origin:left;transition:transform .1s linear }
.meta-list { margin:22px 0 }
.meta-list > div { display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px }
.meta-list span { color:var(--muted) }
.meta-list p { margin:0;text-align:right }
.toc-panel ol { max-height:36vh;overflow:auto;padding:0;list-style:none }
.toc-panel li { margin:8px 0 }
.toc-panel a { color:var(--muted);font-size:12px }
.toc-panel a:hover { color:var(--accent) }
.toc-panel .toc-sub { padding-left:12px }

.article-shell { max-width:820px;margin:2vh auto 0 }
.article-header { position:relative;margin-bottom:44px;text-align:center }
.article-header h1 { margin:20px auto 14px;font:700 clamp(38px,5.2vw,68px)/1.18 var(--serif);letter-spacing:-.05em }
.article-header > p { color:var(--muted) }
.article-header .post-kicker { justify-content:center }
.edit-link { display:inline-block;margin-top:8px;color:var(--accent);font-size:12px }
.article-cover { margin:0 0 45px;overflow:hidden;border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow) }
.article-cover img { width:100%;height:auto;aspect-ratio:1.9/1;object-fit:cover }
.article-content { font-size:16px;line-height:1.95;word-wrap:break-word }
.article-content > :first-child { margin-top:0 }
.article-content h2, .article-content h3, .article-content h4 { scroll-margin-top:30px;font-family:var(--serif);line-height:1.4;letter-spacing:-.02em }
.article-content h2 { margin:2.3em 0 .8em;font-size:29px }
.article-content h3 { margin:2em 0 .7em;font-size:23px }
.article-content p { margin:1.3em 0 }
.article-content a { color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-2);text-underline-offset:4px }
.article-content img { height:auto;margin:30px auto;border-radius:18px }
.article-content blockquote { margin:28px 0;padding:18px 22px;border-left:4px solid var(--accent);border-radius:0 14px 14px 0;background:var(--accent-soft);color:var(--muted) }
.article-content blockquote > :first-child { margin-top:0 }
.article-content blockquote > :last-child { margin-bottom:0 }
.article-content code { padding:.14em .36em;border-radius:6px;background:var(--surface-2);font:90%/1.6 ui-monospace,SFMono-Regular,Consolas,monospace }
.article-content pre { position:relative;margin:28px 0;padding:22px;overflow:auto;border:1px solid var(--line);border-radius:16px;background:#151922;color:#e7eaf0;font:13px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4 }
.article-content pre code { padding:0;background:none;color:inherit;font:inherit }
.hl-comment { color:#7f8b9d;font-style:italic }
.hl-string { color:#a8d7a0 }
.hl-number { color:#e5b87b }
.hl-keyword { color:#c9a7ff;font-weight:600 }
.copy-code { position:absolute;right:10px;top:10px;padding:4px 8px;border:1px solid #3b4251;border-radius:7px;background:#202632;color:#bfc6d2;cursor:pointer;font-size:10px }
.table-scroll { overflow-x:auto;margin:28px 0 }
.article-content table { width:100%;border-collapse:collapse;font-size:14px }
.article-content th, .article-content td { padding:10px 12px;border:1px solid var(--line);text-align:left }
.article-content th { background:var(--surface-2) }
.article-content hr { margin:42px 0;border:0;border-top:1px solid var(--line) }
.article-content ul, .article-content ol { padding-left:1.3em }
.article-moment .article-header h1 { font-size:clamp(30px,4vw,48px) }
.article-footer { margin-top:54px }
.article-tags { display:flex;flex-wrap:wrap;gap:7px }
.article-tags a { padding:6px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11px }
.post-neighbors { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px }
.post-neighbors div { display:flex;min-width:0;flex-direction:column;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface) }
.post-neighbors div:last-child { text-align:right }
.post-neighbors span { color:var(--muted);font-size:10px }
.post-neighbors a { overflow:hidden;text-overflow:ellipsis;white-space:nowrap }

.comments-shell { max-width:820px;margin:90px auto 0;padding-top:48px;border-top:1px solid var(--line) }
.comments-title h2 { margin:4px 0 24px;font:700 27px var(--serif) }
.comment-respond { padding:26px;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow) }
.comment-respond h3 { margin-top:0;font:650 18px var(--serif) }
.comment-fields { display:grid;grid-template-columns:repeat(3,1fr);gap:10px }
.comment-fields label, .comment-text { display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:10px }
.comment-respond input, .comment-respond textarea { width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:11px;outline:0;background:var(--bg);resize:vertical }
.comment-respond input:focus, .comment-respond textarea:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft) }
.comment-text { margin-top:12px }
.comment-submit { display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:12px }
.comment-submit button, .primary-button { padding:10px 17px;border:0;border-radius:11px;background:var(--accent);color:var(--surface);cursor:pointer }
.comment-submit button i { display:inline-block;font-style:normal;transition:transform .2s }
.comment-submit button:hover i { transform:translate(3px,-3px) }
.signed-in { color:var(--muted);font-size:12px }
.comment-list, .comment-children { padding:0;list-style:none }
.comment-list { margin-top:30px }
.comment { padding:22px 0;border-bottom:1px solid var(--line) }
.comment-head { display:flex;gap:11px;align-items:center }
.comment-head img { width:42px;height:42px;border-radius:13px }
.comment-head strong { font-size:13px }
.comment-head time { display:block;color:var(--muted);font-size:10px }
.comment-badge { margin-left:5px;padding:2px 5px;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-size:9px }
.comment-reply { margin-left:auto;font-size:11px }
.comment-reply a:hover { color:var(--accent) }
.comment-body { padding:8px 0 0 53px;color:var(--muted) }
.comment-body p { margin:.6em 0 }
.comment-children { margin-left:53px }

.archive-header { max-width:760px;margin:5vh 0 64px }
.archive-header h1 { font-size:clamp(38px,5vw,64px) }
.archive-header p { color:var(--muted) }
.timeline h2 { margin:40px 0 12px;color:var(--accent);font:700 34px var(--serif) }
.timeline a { display:grid;grid-template-columns:60px 1fr 20px;gap:14px;padding:13px 0;border-bottom:1px solid var(--line) }
.timeline time { color:var(--muted);font-size:11px }
.timeline a:hover span { color:var(--accent) }
.timeline i { color:var(--accent);font-style:normal;transition:transform .2s }
.timeline a:hover i { transform:translate(3px,-3px) }
.taxonomy-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px }
.taxonomy-grid a { min-height:180px;padding:22px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:transform .35s var(--ease),border-color .3s }
.taxonomy-grid a:nth-child(3n+2) { background:var(--accent-soft) }
.taxonomy-grid a:hover { transform:translateY(-6px);border-color:var(--accent) }
.taxonomy-grid span { font:650 22px var(--serif) }
.taxonomy-grid strong { margin:auto 0 0;color:var(--accent);font:700 38px var(--serif) }
.taxonomy-grid i { color:var(--muted);font-size:10px;font-style:normal }
.all-tags { display:flex;flex-wrap:wrap;gap:10px }
.all-tags a { padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface) }
.all-tags a:hover { border-color:var(--accent);color:var(--accent);transform:translateY(-2px) }
.all-tags sup { margin-left:6px;color:var(--muted) }
.error-page { min-height:66vh;display:flex;flex-direction:column;justify-content:center }
.error-page > span { color:var(--accent);font:800 clamp(70px,11vw,150px)/.8 var(--serif);opacity:.18 }
.error-page h1 { margin-top:-15px }
.error-page p { color:var(--muted) }
.error-page div { display:flex;gap:10px;margin-top:20px }
.error-page button { padding:10px 17px;border:1px solid var(--line);border-radius:11px;background:transparent;cursor:pointer }
.site-footer { width:min(1560px,100%);margin:0 auto;padding:22px clamp(28px,5vw,74px);display:flex;justify-content:center;gap:10px;color:var(--muted);font-size:10px;border-top:1px solid var(--line) }
.site-footer span + span::before { content:"·";margin-right:10px }

.mobile-bar, .panel-scrim { display:none }
.reveal { opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease) }
.reveal.is-visible { opacity:1;transform:none }
.post-card.reveal:nth-child(2) { transition-delay:.05s }
.post-card.reveal:nth-child(3) { transition-delay:.1s }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.42s }

@media (max-width: 1180px) {
    .site-grid { grid-template-columns:250px minmax(0,1fr) }
    .right-column { display:none }
    .content-column { padding-inline:clamp(34px,7vw,86px) }
}

@media (max-width: 760px) {
    .mobile-bar {
        position:sticky;
        top:0;
        z-index:50;
        height:58px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 16px;
        border-bottom:1px solid color-mix(in srgb,var(--line) 76%,transparent);
        background:color-mix(in srgb,var(--bg) 85%,transparent);
        backdrop-filter:blur(14px);
    }
    .mobile-brand { max-width:62vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 16px var(--serif) }
    .icon-button { width:38px;height:38px;border:0;border-radius:12px;background:var(--surface);cursor:pointer }
    .site-grid { display:block;min-height:calc(100vh - 58px) }
    .content-column { padding:45px 20px 65px }
    .left-column {
        position:fixed;
        inset:0 auto 0 0;
        z-index:70;
        width:min(86vw,330px);
        border:0;
        background:var(--bg);
        box-shadow:20px 0 50px rgba(0,0,0,.16);
        transform:translateX(-105%);
        transition:transform .42s var(--ease);
    }
    .left-column .side-sticky { max-height:100vh;padding:28px 24px }
    body[data-panel-open="left-panel"] .left-column { transform:none }
    .panel-scrim {
        position:fixed;
        inset:0;
        z-index:60;
        border:0;
        background:rgba(0,0,0,.38);
        opacity:0;
        pointer-events:none;
        transition:opacity .3s;
    }
    body[data-panel-open="left-panel"] .panel-scrim { display:block;opacity:1;pointer-events:auto }
    .home-intro { margin:2vh 0 58px }
    .home-intro h1 { font-size:clamp(39px,12vw,58px) }
    .pinned-grid { grid-template-columns:1fr;margin-bottom:58px }
    .pinned-card { min-height:190px }
    .post-card { grid-template-columns:1fr;gap:18px;padding:28px 0 }
    .post-thumbnail { order:-1;width:100%;aspect-ratio:16/9 }
    .moment-card { padding:20px }
    .article-header { text-align:left }
    .article-header .post-kicker { justify-content:flex-start }
    .article-header h1 { font-size:clamp(36px,10vw,52px) }
    .article-content { font-size:15px }
    .article-content h2 { font-size:25px }
    .article-cover { margin-inline:-8px;border-radius:18px }
    .post-neighbors, .comment-fields, .taxonomy-grid { grid-template-columns:1fr }
    .post-neighbors div:last-child { text-align:left }
    .comment-respond { padding:20px }
    .comment-body { padding-left:0 }
    .comment-children { margin-left:24px }
    .archive-header { margin-top:1vh }
    .site-footer { flex-direction:column;align-items:center;gap:0 }
    .site-footer span + span::before { display:none }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important }
    .reveal { opacity:1;transform:none }
}