/* ==========================================================================
   个人小屋 · 暖木风格样式
   所有颜色都走变量，html[data-theme="dark"] 只覆盖变量即可换肤
   ========================================================================== */

:root {
    color-scheme: light;

    /* 基础色 */
    --cream: #f9f1e3;
    --cream-2: #f2e5d1;
    --card: #fffdf8;
    --ink: #3b2d24;
    --ink-2: #6d5847;
    --muted: #a08a76;
    --wood: #8a5a3b;
    --wood-d: #6b4227;
    --accent: #c1713f;
    --line: #e8d9c2;
    --line-soft: #f0e4d1;
    --green: #7f9a72;

    /* 页面背景 */
    --bg-glow-a: rgba(255, 214, 160, .55);
    --bg-glow-b: rgba(214, 226, 200, .45);
    --hero-glow: rgba(255, 224, 184, .7);
    --bg-from: #fbf4e8;
    --bg-mid: #f8efe0;
    --bg-to: #f5ebdb;
    --grain-opacity: .5;

    /* 组件 */
    --topbar-bg: rgba(250, 243, 231, .82);
    --nav-hover: rgba(255, 255, 255, .75);
    --nav-on: #fff;
    --brand-a: #a8703f;
    --brand-b: #7c4b2c;
    --brand-ink: #fdf6ea;
    --roof-a: #96613d;
    --roof-b: #875434;
    --roof-line: rgba(0, 0, 0, .08);
    --avatar-ring: #fff;
    --avatar-a: #efe0c8;
    --avatar-b: #e2cfae;
    --chip-bg: #fdf7ec;
    --chip-hover-line: #d9c3a3;
    --card-hover-line: #ddc9a9;
    --cover-a: #f4e7d2;
    --cover-b: #e9d7ba;
    --cover-empty: #f4ead9;
    --placeholder-ink: rgba(138, 90, 59, .38);
    --tag-bg: #f8eeda;
    --empty-bg: rgba(255, 253, 248, .6);
    --msg-avatar-a: #b8834f;
    --msg-avatar-b: #8a5a3b;
    --reply-bg: #fbf3e4;
    --input-bg: #fffdf9;
    --input-focus: #d3a97f;
    --focus-ring: rgba(193, 113, 63, .14);
    --btn-a: #9a6039;
    --btn-b: #75452a;
    --btn-ink: #fff8ee;
    --btn-shadow: rgba(107, 66, 39, .9);
    --ghost-hover: #fffdf8;
    --ok-bg: #f2f6ec;
    --ok-line: #d6e2c9;
    --ok-ink: #4d6642;
    --err-bg: #fdf0ea;
    --err-line: #f0cfbe;
    --err-ink: #9d4a26;
    --md-ink: #443329;
    --md-strong: #2f231b;
    --quote-bg: #f9f0e0;
    --quote-line: #d9b58f;
    --code-bg: #f8edda;
    --code-line: #efe0c7;
    --code-ink: #9a4f27;
    --pre-bg: #2f2620;
    --pre-ink: #f2e7d6;
    --pager-bg: #fffdf8;
    --footer-bg: rgba(255, 253, 248, .5);
    --toc-bg: #fdf7ec;
    --mark-bg: rgba(193, 113, 63, .18);

    /* 相册 */
    --mosaic-bg: #efe2cc;
    --mosaic-veil: rgba(48, 30, 18, .72);
    --mosaic-cap-ink: #fff6e8;

    /* 地图（手绘水彩风） */
    --map-sea-a: #cddee3;
    --map-sea-b: #b7ccd5;
    --map-sea-line: #93aeb9;
    --map-land-a: #f8f0d9;
    --map-land-b: #f0e3c3;
    --map-land-c: #e5d3aa;
    --map-grass: #d2db9f;
    --map-grass-2: #c2cf91;
    --map-rock-a: #d3bd91;
    --map-rock-b: #b69d70;
    --map-rock-c: #ded1b0;
    --map-rock-line: #89724d;
    --map-rock-shade: #7a6440;
    --map-contour: #bba87e;
    --map-snow: #fdfaf0;
    --map-tree: #8fa86f;
    --map-tree-line: #6a8250;
    --map-water: #9cc0ca;
    --map-water-a: #b7d3d9;
    --map-water-b: #8fb4c1;
    --map-water-line: #6d98a4;
    --map-shore: #e9e2c6;
    --map-road: #b1835a;
    --map-shadow: #8a7a52;
    --map-inner: #b09a6c;
    --map-coast: #7e8a6a;
    --map-shallow: #e6eee0;
    --map-grid: rgba(150, 138, 110, .13);
    --map-vig: #7a6a44;
    --map-ink: #5b5238;
    --map-cartouche: #fcf7e7;
    --map-cartouche-line: #bda882;
    --route: #b06a42;
    --pin-a: #ac6a41;
    --pin-b: #79421f;
    --pin-ink: #fff8ee;
    --pin-ring: #fffdf8;
    --pin-hole: #fffdf8;
    --pin-label-bg: rgba(255, 253, 248, .9);
    --pin-label-line: rgba(120, 96, 68, .18);

    /* 弹层 */
    --veil: rgba(38, 26, 16, .55);
    --sheet: #fffdf8;
    --sheet-line: #e8d9c2;
    --kicker: #b07e50;

    /* 阴影 / 圆角 */
    --shadow: 0 2px 4px rgba(107, 66, 39, .04), 0 12px 28px -12px rgba(107, 66, 39, .16);
    --shadow-lift: 0 4px 8px rgba(107, 66, 39, .06), 0 18px 36px -14px rgba(107, 66, 39, .24);
    --shadow-soft: 0 6px 14px -8px rgba(107, 66, 39, .45);
    --radius: 18px;

    /* 字体 */
    --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, "SimSun", serif;
    --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

/* ------------------------------------------------------------- 夜色主题 */

html[data-theme="dark"] {
    color-scheme: dark;

    --cream: #191411;
    --cream-2: #211a15;
    --card: #241d18;
    --ink: #ece1d2;
    --ink-2: #bfa992;
    --muted: #8b7864;
    --wood: #c1956c;
    --wood-d: #dfb78d;
    --accent: #dd8750;
    --line: #4a3a2c;
    --line-soft: #332920;
    --green: #94ae87;

    --bg-glow-a: rgba(196, 118, 56, .22);
    --bg-glow-b: rgba(74, 96, 68, .22);
    --hero-glow: rgba(210, 132, 66, .1);
    --bg-from: #181310;
    --bg-mid: #14100e;
    --bg-to: #100d0b;
    --grain-opacity: .32;

    --topbar-bg: rgba(24, 19, 16, .84);
    --nav-hover: rgba(255, 255, 255, .07);
    --nav-on: #2e251e;
    --brand-a: #8a5b34;
    --brand-b: #5f3b23;
    --brand-ink: #f6ecdd;
    --roof-a: #5c3f29;
    --roof-b: #422c1c;
    --roof-line: rgba(0, 0, 0, .35);
    --avatar-ring: #33291f;
    --avatar-a: #3a2c21;
    --avatar-b: #2b2018;
    --chip-bg: #2b221b;
    --chip-hover-line: #564334;
    --card-hover-line: #564334;
    --cover-a: #35291f;
    --cover-b: #291f18;
    --cover-empty: #2a211a;
    --placeholder-ink: rgba(223, 183, 141, .3);
    --tag-bg: #33281f;
    --empty-bg: rgba(36, 29, 24, .6);
    --msg-avatar-a: #7d5334;
    --msg-avatar-b: #4d3121;
    --reply-bg: #2c2219;
    --input-bg: #1e1813;
    --input-focus: #7a5738;
    --focus-ring: rgba(221, 135, 80, .18);
    --btn-a: #8a5730;
    --btn-b: #633d22;
    --btn-ink: #fdf3e6;
    --btn-shadow: rgba(0, 0, 0, .7);
    --ghost-hover: #2b221b;
    --ok-bg: #1d2a1b;
    --ok-line: #324631;
    --ok-ink: #a9c79d;
    --err-bg: #2e1c16;
    --err-line: #4b2d21;
    --err-ink: #e5a184;
    --md-ink: #d9cbb9;
    --md-strong: #f4e9da;
    --quote-bg: #2a2119;
    --quote-line: #6b4a30;
    --code-bg: #342a21;
    --code-line: #47392c;
    --code-ink: #e9a87b;
    --pre-bg: #120e0b;
    --pre-ink: #e3d5c3;
    --pager-bg: #2a211a;
    --footer-bg: rgba(20, 16, 14, .5);
    --toc-bg: #2a211a;
    --mark-bg: rgba(221, 135, 80, .22);

    --mosaic-bg: #2b221a;
    --mosaic-veil: rgba(12, 8, 6, .78);
    --mosaic-cap-ink: #f6ecdd;

    --map-sea-a: #1b2630;
    --map-sea-b: #131c24;
    --map-sea-line: #37485a;
    --map-land-a: #3b3829;
    --map-land-b: #333023;
    --map-land-c: #2a271d;
    --map-grass: #4a5130;
    --map-grass-2: #3f4526;
    --map-rock-a: #5c5037;
    --map-rock-b: #443b2b;
    --map-rock-c: #4f4631;
    --map-rock-line: #75644a;
    --map-rock-shade: #17130e;
    --map-contour: #5c5036;
    --map-snow: #938e7c;
    --map-tree: #4f5c35;
    --map-tree-line: #62703f;
    --map-water: #3f5a66;
    --map-water-a: #4a6a78;
    --map-water-b: #35494f;
    --map-water-line: #628797;
    --map-shore: #2e2b21;
    --map-road: #8a6844;
    --map-shadow: #000;
    --map-inner: #000;
    --map-coast: #6e7657;
    --map-shallow: #232a1c;
    --map-grid: rgba(255, 240, 220, .055);
    --map-vig: #000;
    --map-ink: #d6ccb0;
    --map-cartouche: #2a241b;
    --map-cartouche-line: #57452f;
    --route: #cf8557;
    --pin-a: #b87347;
    --pin-b: #7d4526;
    --pin-ink: #fff6ea;
    --pin-ring: #241d18;
    --pin-hole: #241d18;
    --pin-label-bg: rgba(38, 30, 24, .88);
    --pin-label-line: rgba(255, 240, 220, .12);

    --veil: rgba(6, 4, 3, .72);
    --sheet: #241d18;
    --sheet-line: #4a3a2c;
    --kicker: #c08a58;

    --shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px -12px rgba(0, 0, 0, .55);
    --shadow-lift: 0 4px 8px rgba(0, 0, 0, .34), 0 18px 36px -14px rgba(0, 0, 0, .7);
    --shadow-soft: 0 6px 14px -8px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--sans);
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink);
    background: var(--bg-mid);
    background-image:
        radial-gradient(1200px 600px at 78% -8%, var(--bg-glow-a), transparent 62%),
        radial-gradient(900px 500px at 6% 4%, var(--bg-glow-b), transparent 60%),
        linear-gradient(180deg, var(--bg-from) 0%, var(--bg-mid) 42%, var(--bg-to) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s ease, color .3s ease;
}

/* 极细的纸纹，让暖色不显得平 */
.ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

a { color: var(--wood-d); text-decoration: none; transition: color .18s; }
a:hover { color: var(--accent); }

img { max-width: 100%; display: block; }

::selection { background: var(--mark-bg); }

.wrap {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 22px;
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------- 顶栏 */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--topbar-bg);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line-soft);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 68px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--ink);
    flex: 0 1 auto;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 12px;
    color: var(--brand-ink);
    background: linear-gradient(160deg, var(--brand-a), var(--brand-b));
    box-shadow: 0 6px 14px -6px var(--btn-shadow);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text strong {
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: .04em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-text small {
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: .06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.nav a {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 14px;
    color: var(--ink-2);
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.nav a:hover { background: var(--nav-hover); color: var(--wood-d); }
.nav a.on {
    background: var(--nav-on);
    color: var(--wood-d);
    box-shadow: 0 2px 8px -3px rgba(107, 66, 39, .28);
}
html[data-theme="dark"] .nav a.on { color: var(--ink); }

/* 键盘操作时的焦点圈，鼠标点击不显示 */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 主题切换按钮 */
.theme-toggle {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    padding: 0;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.theme-toggle:hover { background: var(--nav-hover); color: var(--accent); border-color: var(--chip-hover-line); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { display: block; }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun { display: block; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }

.main { padding: 34px 22px 60px; flex: 1 0 auto; }

/* ------------------------------------------------------------- 小屋主体 */

.hero {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 34px;
}

/* 顶上一点柔和的光，别让整张卡片太平 */
.hero > .hero-inner::before {
    content: "";
    position: absolute;
    left: -60px;
    top: -120px;
    width: 420px;
    height: 300px;
    background: radial-gradient(closest-side, var(--hero-glow), transparent 72%);
    pointer-events: none;
}

/* 屋檐：一排木瓦 */
.hero::before {
    content: "";
    display: block;
    height: 14px;
    background:
        repeating-linear-gradient(90deg,
            var(--roof-a) 0 13px,
            var(--roof-b) 13px 26px);
    border-bottom: 1px solid var(--roof-line);
}

.hero-inner {
    padding: 30px 32px 28px;
    display: flex;
    gap: 26px;
    align-items: flex-start;
    position: relative;
}

/* 小屋的数字：篇数 / 照片 / 足迹 */
.hero-stats {
    position: relative;
    margin: 0;
    padding: 13px 32px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 30px;
    border-top: 1px dashed var(--line);
    background: var(--empty-bg);
}
.hero-stats > div { display: flex; align-items: baseline; gap: 6px; }
.hero-stats dt {
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1;
    color: var(--wood-d);
    font-weight: 600;
}
.hero-stats dd {
    margin: 0;
    font-size: 11.5px;
    letter-spacing: .1em;
    color: var(--muted);
}

.avatar {
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--avatar-a), var(--avatar-b));
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: 34px;
    color: var(--wood);
    border: 3px solid var(--avatar-ring);
    box-shadow: 0 8px 20px -10px rgba(107, 66, 39, .55);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.hero-body { min-width: 0; flex: 1; }

.hero-hello {
    font-size: 12.5px;
    letter-spacing: .22em;
    color: var(--muted);
    text-transform: uppercase;
    margin: 0 0 6px;
}

.hero-name {
    font-family: var(--serif);
    font-size: 30px;
    line-height: 1.35;
    margin: 0 0 10px;
    letter-spacing: .02em;
    font-weight: 600;
}

.hero-bio { color: var(--ink-2); margin: 0 0 16px; max-width: 54ch; }
.hero-bio p { margin: 0 0 .6em; }
.hero-bio p:last-child { margin-bottom: 0; }

.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--chip-bg);
    border: 1px solid var(--line);
    color: var(--ink-2);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.socials a:hover {
    transform: translateY(-2px);
    border-color: var(--chip-hover-line);
    box-shadow: var(--shadow-soft);
    color: var(--wood-d);
}
.socials .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .7; }

/* ------------------------------------------------------------- 区块标题 */

.section { margin-bottom: 40px; scroll-margin-top: 90px; }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.section-kicker {
    margin: 0 0 2px;
    font-size: 10.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--kicker);
    font-weight: 600;
}

.section-title {
    font-family: var(--serif);
    font-size: 21px;
    margin: 0;
    font-weight: 600;
    letter-spacing: .03em;
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.3;
}
.section-title::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--accent);
    transform: rotate(45deg);
    box-shadow: 0 0 0 4px var(--focus-ring);
    flex: 0 0 auto;
}

.section-more { font-size: 13px; color: var(--muted); white-space: nowrap; }
.section-more:hover { color: var(--accent); }

/* ------------------------------------------------------------- 收藏 / 作品 */

.works {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.work {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s, border-color .25s;
    color: inherit;
}
.work:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--card-hover-line); }

.work-cover {
    aspect-ratio: 16 / 10;
    background: linear-gradient(140deg, var(--cover-a), var(--cover-b));
    position: relative;
    overflow: hidden;
}
.work-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.work:hover .work-cover img { transform: scale(1.04); }
.work-cover .ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: 26px;
    color: var(--placeholder-ink);
}

.work-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.work-title { font-size: 15.5px; font-weight: 600; margin: 0; color: var(--ink); }
.work-desc { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.65; flex: 1; }
.work-tag {
    align-self: flex-start;
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--wood);
    background: var(--tag-bg);
    border-radius: 999px;
    padding: 2px 10px;
    margin-top: 4px;
}

/* ------------------------------------------------------------- 精选图片 / 相册 */

.mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mosaic-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    border: 1px solid var(--line);
    border-radius: 15px;
    overflow: hidden;
    background: var(--mosaic-bg);
    cursor: zoom-in;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s, border-color .3s;
}
/* 第一张通栏，像相册的封面；只有一张/两张时不这么做，免得空一格 */
.mosaic-item:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.mosaic--few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaic--few .mosaic-item:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
.mosaic--one { grid-template-columns: minmax(0, 1fr); }
.mosaic--one .mosaic-item:first-child { grid-column: auto; aspect-ratio: 16 / 9; }
.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}
.mosaic-item:hover, .mosaic-item:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    border-color: var(--card-hover-line);
}
.mosaic-item:hover img { transform: scale(1.05); }

.mosaic-item::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    background: linear-gradient(to top, var(--mosaic-veil), transparent);
    opacity: .5;
    transition: opacity .3s;
    pointer-events: none;
}
.mosaic-item:hover::after { opacity: 1; }

.mosaic-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 9px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mosaic-cap-ink);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
.mosaic-item:hover .mosaic-cap,
.mosaic-item:focus-visible .mosaic-cap { opacity: 1; transform: none; }

/* 触屏没有 hover，说明文字直接显示 */
@media (hover: none) {
    .mosaic-cap { opacity: 1; transform: none; }
    .mosaic-item::after { opacity: .8; }
}

/* ------------------------------------------------------------- 去过的地方（手绘地图） */

.map-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.map-stage {
    position: relative;
    aspect-ratio: 1000 / 640;
    background: var(--map-sea-b);
    overflow: hidden;
    isolation: isolate;
}
/* 四周压一层柔和的暗角，地图看起来才像一张纸 */
.map-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 60px -14px rgba(60, 44, 24, .28);
    border-radius: 0;
}

.map-art,
.map-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.map-route { pointer-events: none; }

/* 地图角落的操作提示 */
.map-tip {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--map-ink);
    background: var(--pin-label-bg);
    border: 1px solid var(--pin-label-line);
    box-shadow: 0 6px 16px -10px rgba(60, 40, 20, .6);
    pointer-events: none;
    transition: opacity .3s, transform .3s;
}
.map-tip svg { width: 13px; height: 13px; opacity: .7; }
.map-stage.has-active .map-tip { opacity: 0; transform: translate(-50%, 8px); }

.pin {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.pin-dot {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--pin-a), var(--pin-b));
    color: var(--pin-ink);
    font-family: var(--serif);
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 0 0 3px var(--pin-ring), 0 10px 16px -8px rgba(50, 26, 10, .85);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s;
}
.pin-num { transform: rotate(45deg); display: block; }
.pin-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    opacity: 0;
    pointer-events: none;
}
.pin:hover .pin-dot,
.pin:focus-visible .pin-dot {
    transform: rotate(-45deg) translate(2px, -2px) scale(1.06);
    box-shadow: 0 0 0 3px var(--pin-ring), 0 14px 22px -8px rgba(50, 26, 10, .9);
}
.pin.active .pin-dot { background: linear-gradient(150deg, var(--accent), var(--pin-b)); }
.pin.active .pin-dot::after { animation: pinPulse 1.9s ease-out infinite; }

@keyframes pinPulse {
    0% { transform: scale(1); opacity: .75; }
    100% { transform: scale(2); opacity: 0; }
}

.pin-label {
    max-width: 150px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--map-ink);
    background: var(--pin-label-bg);
    border: 1px solid var(--pin-label-line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 3px 8px -5px rgba(60, 40, 20, .7);
    transition: transform .22s, color .22s, border-color .22s;
}
.pin:hover .pin-label,
.pin.active .pin-label { transform: translateY(-1px); color: var(--wood-d); border-color: var(--accent); }

/* 图钉上的照片数 */
.pin-count {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    transform: rotate(45deg);
    background: var(--card);
    color: var(--wood-d);
    font-family: var(--sans);
    font-size: 10px;
    line-height: 1;
    border: 1px solid var(--line);
}

.map-foot {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    padding: 13px 18px 15px;
    background: var(--card);
    border-top: 1px solid var(--line-soft);
}
.map-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.map-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.map-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px 3px 4px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--chip-bg);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.map-chip .n {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tag-bg);
    color: var(--wood);
    font-family: var(--serif);
    font-size: 10.5px;
    line-height: 1;
}
.map-chip:hover, .map-chip.active {
    border-color: var(--chip-hover-line);
    color: var(--wood-d);
    background: var(--ghost-hover);
}

/* 地点详情弹层 */
.place-modal {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
}
.place-modal.on { opacity: 1; visibility: visible; }

.place-backdrop {
    position: absolute;
    inset: 0;
    background: var(--veil);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.place-sheet {
    position: relative;
    width: min(760px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--sheet);
    border: 1px solid var(--sheet-line);
    border-radius: 20px;
    box-shadow: 0 32px 72px -30px rgba(0, 0, 0, .6);
    transform: translateY(14px) scale(.99);
    transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.place-modal.on .place-sheet { transform: none; }

.place-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 4;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.place-close:hover { background: var(--ghost-hover); color: var(--accent); }

.place-body {
    padding: 26px 26px 22px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.place-no {
    margin: 0 0 4px;
    font-size: 10.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--kicker);
}
.place-title {
    font-family: var(--serif);
    font-size: 23px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: .02em;
}
.place-meta { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.place-note {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--ink-2);
    white-space: pre-wrap;
}

.place-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow-y: auto;
    max-height: 44vh;
    padding-right: 2px;
}
.place-photos.one { grid-template-columns: minmax(0, 1fr); }
.place-photos.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.place-photo {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 11px;
    overflow: hidden;
    background: var(--mosaic-bg);
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
}
.place-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.place-photo:hover img { transform: scale(1.06); }
.place-photo .pc-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 5px 8px;
    font-size: 11.5px;
    color: #fff;
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.place-empty { margin: 0; font-size: 13.5px; color: var(--muted); }

/* 相册页的地点筛选 */
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.filter-chips a {
    font-size: 13px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--chip-bg);
    color: var(--ink-2);
    transition: border-color .2s, color .2s, background .2s;
}
.filter-chips a:hover { border-color: var(--chip-hover-line); color: var(--wood-d); }
.filter-chips a.on { background: var(--wood); border-color: var(--wood); color: var(--btn-ink); }
.filter-chips a.on:hover { color: var(--btn-ink); }

/* ------------------------------------------------------------- 日记 */

.diary { display: flex; flex-direction: column; gap: 12px; }

.diary-item {
    display: flex;
    gap: 18px;
    padding: 18px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    color: inherit;
}
.diary-item:hover { transform: translateX(3px); box-shadow: var(--shadow-lift); border-color: var(--card-hover-line); }

.diary-date {
    flex: 0 0 62px;
    text-align: center;
    border-right: 1px dashed var(--line);
    padding-right: 14px;
}
.diary-date .d { font-family: var(--serif); font-size: 24px; line-height: 1.1; color: var(--wood-d); display: block; }
.diary-date .m { font-size: 11.5px; color: var(--muted); letter-spacing: .1em; display: block; margin-top: 3px; }

.diary-body { min-width: 0; flex: 1; }
.diary-title { font-size: 16.5px; font-weight: 600; margin: 0 0 3px; color: var(--ink); }
.diary-excerpt { font-size: 14px; color: var(--ink-2); margin: 0; }
.diary-meta { display: flex; gap: 12px; margin-top: 7px; font-size: 12px; color: var(--muted); }
.diary-mood { color: var(--accent); }

.empty {
    padding: 34px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    background: var(--empty-bg);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

/* ------------------------------------------------------------- 留言板 */

.guestbook { display: grid; grid-template-columns: 1fr; gap: 18px; }

.msg-list { display: flex; flex-direction: column; gap: 12px; }

.msg {
    display: flex;
    gap: 12px;
    padding: 15px 17px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.msg-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: 15px;
    color: #fff;
    background: linear-gradient(150deg, var(--msg-avatar-a), var(--msg-avatar-b));
}
.msg-main { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; flex-wrap: wrap; }
.msg-name { font-weight: 600; font-size: 14px; color: var(--wood-d); }
.msg-time { font-size: 11.5px; color: var(--muted); }
.msg-text { font-size: 14.5px; color: var(--ink-2); margin: 0; white-space: pre-wrap; word-break: break-word; }
.msg-reply {
    margin-top: 10px;
    padding: 10px 13px;
    background: var(--reply-bg);
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    font-size: 13.5px;
    color: var(--wood-d);
}
.msg-reply b { font-weight: 600; }

/* 表单 */
.form-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}
.form-card h3 { font-family: var(--serif); font-size: 16px; margin: 0 0 14px; font-weight: 600; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; letter-spacing: .04em; }

input[type="text"], input[type="url"], input[type="password"], input[type="email"],
input[type="datetime-local"], input[type="date"], input[type="search"], textarea, select {
    width: 100%;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ink);
    background: var(--input-bg);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 10px 13px;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.7; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 11px;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--btn-ink);
    background: linear-gradient(160deg, var(--btn-a), var(--btn-b));
    box-shadow: 0 8px 18px -10px var(--btn-shadow);
    transition: transform .18s, box-shadow .18s, filter .18s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 22px -10px var(--btn-shadow); color: var(--btn-ink); }
.btn:active { transform: translateY(0); }
.btn-ghost {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--line);
    box-shadow: none;
}
.btn-ghost:hover { background: var(--ghost-hover); border-color: var(--chip-hover-line); color: var(--wood-d); }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 9px; }

/* 提示条 */
.flash {
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 18px;
    border: 1px solid;
    animation: fadeUp .4s both;
}
.flash-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.flash-err { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- 内页 / 文章 */

.page-head { margin-bottom: 26px; }
.page-head h1 {
    font-family: var(--serif);
    font-size: 28px;
    margin: 0 0 6px;
    font-weight: 600;
    letter-spacing: .02em;
}
.page-head p { color: var(--muted); margin: 0; font-size: 13.5px; }

.article {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 34px 38px 40px;
}
.article h1 {
    font-family: var(--serif);
    font-size: 27px;
    line-height: 1.45;
    margin: 0 0 10px;
    font-weight: 600;
}
.article-meta {
    font-size: 12.5px;
    color: var(--muted);
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px dashed var(--line);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.article-meta .sep { opacity: .45; }
.article-cover { border-radius: 14px; overflow: hidden; margin-bottom: 22px; background: var(--cover-empty); }
.article-cover img { width: 100%; height: auto; display: block; }

.back-link { display: inline-block; font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }
.back-link:hover { color: var(--accent); }

/* 本文目录 */
.toc {
    margin: 0 0 26px;
    padding: 14px 18px;
    background: var(--toc-bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 13.5px;
}
.toc summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-2);
    font-size: 13px;
    letter-spacing: .06em;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 7px;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .2s;
    opacity: .6;
}
.toc[open] summary::before { transform: rotate(90deg); }
.toc-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px dashed var(--line);
    padding-top: 10px;
}
.toc-list a {
    display: block;
    color: var(--ink-2);
    padding: 3px 0 3px 10px;
    border-left: 2px solid transparent;
    line-height: 1.55;
    transition: color .15s, border-color .15s;
}
.toc-list a:hover { color: var(--accent); }
.toc-list a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.toc-list .lv3 { padding-left: 24px; font-size: 13px; opacity: .88; }

/* Markdown 正文 */
.md { font-size: 16px; line-height: 1.9; color: var(--md-ink); word-break: break-word; }
.md > *:first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.45;
    margin: 1.6em 0 .6em;
    letter-spacing: .02em;
    color: var(--ink);
    scroll-margin-top: 84px;
}
.md h1 { font-size: 24px; }
.md h2 {
    font-size: 21px;
    padding-left: 12px;
    border-left: 3px solid var(--accent);
    line-height: 1.3;
}
.md h3 { font-size: 18px; }
.md h4 { font-size: 16px; }
.md p { margin: 0 0 1.05em; }
.md a { border-bottom: 1px solid var(--focus-ring); }
.md a:hover { border-bottom-color: var(--accent); }
.md strong { color: var(--md-strong); }
.md ul, .md ol { padding-left: 1.4em; margin: 0 0 1.05em; }
.md li { margin-bottom: .35em; }
.md li::marker { color: var(--muted); }
.md blockquote {
    margin: 1.2em 0;
    padding: 12px 18px;
    background: var(--quote-bg);
    border-left: 4px solid var(--quote-line);
    border-radius: 0 12px 12px 0;
    color: var(--ink-2);
    font-size: 15px;
}
.md blockquote p:last-child { margin-bottom: 0; }
.md hr { border: 0; border-top: 1px dashed var(--line); margin: 2em 0; }
.md code {
    font-family: var(--mono);
    font-size: .88em;
    background: var(--code-bg);
    border: 1px solid var(--code-line);
    border-radius: 6px;
    padding: 1px 6px;
    color: var(--code-ink);
}
.md .md-code {
    background: var(--pre-bg);
    color: var(--pre-ink);
    padding: 16px 18px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 1.3em 0;
    font-size: 13.5px;
    line-height: 1.75;
}
.md .md-code code { background: none; border: 0; padding: 0; color: inherit; font-size: 1em; }
.md img { border-radius: 12px; margin: 1.2em 0; cursor: zoom-in; }

/* 图片灯箱 */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 64px 54px;
    background: rgba(16, 11, 8, .96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.lightbox.on { opacity: 1; visibility: visible; }

.lb-stage {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 150px);
    border-radius: 10px;
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .85);
    cursor: zoom-out;
    transform: scale(.98);
    transition: transform .24s ease;
}
.lightbox.on img { transform: scale(1); }

.lb-cap {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 246, 232, .82);
    text-align: center;
    max-width: 60ch;
}
.lb-count {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    font-size: 11.5px;
    letter-spacing: .14em;
    color: rgba(255, 246, 232, .5);
}
.lb-btn {
    position: absolute;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.lb-btn:hover { background: rgba(255, 255, 255, .2); }
.lb-btn:active { transform: scale(.94); }
.lb-btn[hidden] { display: none; }
.lb-close { top: 16px; right: 18px; font-size: 24px; }
.lb-prev { left: 14px; top: 50%; margin-top: -21px; }
.lb-next { right: 14px; top: 50%; margin-top: -21px; }

/* 分页 */
.pager { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.pager a, .pager span {
    min-width: 38px;
    text-align: center;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    border: 1px solid var(--line);
    background: var(--pager-bg);
    color: var(--ink-2);
}
.pager a:hover { border-color: var(--chip-hover-line); color: var(--wood-d); }
.pager span { background: var(--wood); border-color: var(--wood); color: var(--btn-ink); }
.pager .pager-info { border: 0; background: none; color: var(--muted); }

/* 上一篇 / 下一篇 */
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 26px;
}
.post-nav a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    font-size: 14px;
    color: var(--ink);
    min-width: 0;
    transition: border-color .2s, transform .2s;
}
.post-nav a:hover { border-color: var(--chip-hover-line); transform: translateY(-2px); color: var(--ink); }
.post-nav .dir { font-size: 11.5px; color: var(--muted); letter-spacing: .06em; }
.post-nav .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-nav .next { text-align: right; align-items: flex-end; }
.post-nav .slot { display: block; }
@media (max-width: 560px) {
    .post-nav { grid-template-columns: 1fr; }
    .post-nav .next { text-align: left; align-items: flex-start; }
}

/* ------------------------------------------------------------- 页脚 */

.footer {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    padding: 26px 0 34px;
    border-top: 1px solid var(--line-soft);
    background: var(--footer-bg);
}
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--muted);
}
.footer-note { margin: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.footer-house { color: var(--accent); font-size: 15px; }
.footer-links { margin: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); border-bottom: 1px dashed var(--line); }
.footer-links a:hover { color: var(--accent); }

/* ------------------------------------------------------------- 入场动画 */

/* 只有 JS 可用时才做入场动画，避免脚本失效导致内容不可见 */
.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1);
}
.js .reveal.in { opacity: 1; transform: none; }

/* 图钉依次落下来 */
.js .pin {
    animation: pinIn .5s cubic-bezier(.2, .8, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 80ms + 180ms);
}
@keyframes pinIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .js .pin { animation: none; }
    * { scroll-behavior: auto !important; }
    .to-top, .lightbox img, .place-sheet, .place-modal, .mosaic-item, .mosaic-item img { transition: none; }
    .pin-dot::after { animation: none !important; }
}

/* ------------------------------------------------------------- 响应式 */

@media (max-width: 720px) {
    body { font-size: 15px; }
    .main { padding: 24px 16px 48px; }
    .wrap { padding: 0 16px; }
    .topbar-inner { height: 60px; gap: 8px; }
    .brand-text small { display: none; }
    .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
    .brand-text strong { font-size: 15.5px; }
    .nav {
        gap: 1px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        min-width: 0;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav a { padding: 6px 9px; font-size: 13px; }
    .article-meta { gap: 8px; }
    .hero-inner { flex-direction: column; gap: 18px; padding: 24px 20px 22px; }
    .hero-stats { padding: 11px 20px 13px; gap: 6px 24px; }
    .hero-stats dt { font-size: 17px; }
    .avatar { width: 76px; height: 76px; border-radius: 22px; font-size: 28px; }
    .hero-name { font-size: 24px; }
    .works { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
    .work-desc { display: none; }
    .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .mosaic-item:first-child { aspect-ratio: 16 / 9; }
    .mosaic--one { grid-template-columns: minmax(0, 1fr); }
    .map-foot { flex-direction: column; align-items: flex-start; padding: 11px 14px 13px; }
    .pin-dot { width: 28px; height: 28px; font-size: 12.5px; }
    .pin-label { font-size: 11px; max-width: 96px; padding: 0 7px; }
    .place-modal { padding: 0; align-items: flex-end; }
    .place-sheet { width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0; transform: translateY(26px); }
    .place-body { padding: 22px 18px 20px; }
    .place-title { font-size: 20px; }
    .place-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 40vh; }
    .lightbox { padding: 14px 10px 46px; }
    .lb-btn { width: 36px; height: 36px; font-size: 19px; }
    .lb-prev { left: 6px; margin-top: -18px; }
    .lb-next { right: 6px; margin-top: -18px; }
    .diary-item { padding: 15px 16px; gap: 12px; }
    .diary-date { flex-basis: 48px; padding-right: 10px; }
    .diary-date .d { font-size: 20px; }
    .article { padding: 24px 20px 28px; border-radius: 18px; }
    .article h1 { font-size: 22px; }
    .md { font-size: 15.5px; }
    .footer-inner { justify-content: center; text-align: center; }
    .to-top { right: 14px; bottom: 16px; width: 38px; height: 38px; }
}

@media (max-width: 480px) {
    /* 手机上把空间全留给导航，站点名首页已经很显眼了 */
    .brand-text { display: none; }
    /* 品牌图标本身就是回首页的，导航里的「小屋」可以让位 */
    .nav a[data-nav="home"] { display: none; }
}

@media (max-width: 360px) {
    .works { grid-template-columns: minmax(0, 1fr); }
    .nav a { padding: 6px 7px; font-size: 12.5px; }
    .pin-label { display: none; }
}

/* ==========================================================================
   动态背景（五种场景，可切换）
   ========================================================================== */

:root {
    --sc-base: #f8efe0;
    --sc-sky:
        radial-gradient(1100px 640px at 80% -12%, #ffe7c6 0%, transparent 62%),
        radial-gradient(880px 520px at 6% 4%, #e9f1db 0%, transparent 58%),
        linear-gradient(180deg, #fdf7ec 0%, #f8efe0 46%, #f2e7d5 100%);
    --sc-aur-1: rgba(255, 190, 132, .5);
    --sc-aur-2: rgba(172, 206, 178, .48);
    --sc-aur-3: rgba(255, 216, 156, .42);
    --sc-aur-4: rgba(206, 214, 240, .34);
    --sc-sun: rgba(255, 212, 146, .8);
    --sc-hill-1: #e7d9bf;
    --sc-hill-2: #dbc9a8;
    --sc-hill-3: #cdb992;
    --sc-mist: rgba(255, 253, 246, .55);
    --sc-veil: linear-gradient(180deg, rgba(253, 246, 234, .12) 0%, rgba(253, 246, 234, .42) 46%, rgba(250, 241, 226, .72) 100%);
    --sc-star: rgba(255, 255, 255, .95);
    --dock-bg: rgba(255, 253, 248, .82);
}

html[data-theme="dark"] {
    --sc-base: #100d0b;
    --sc-sky:
        radial-gradient(1000px 580px at 78% -10%, #3b2a1b 0%, transparent 60%),
        radial-gradient(820px 480px at 8% 4%, #1e2b24 0%, transparent 56%),
        linear-gradient(180deg, #1a1512 0%, #141110 52%, #0e0b09 100%);
    --sc-aur-1: rgba(212, 124, 58, .3);
    --sc-aur-2: rgba(92, 138, 108, .22);
    --sc-aur-3: rgba(222, 148, 88, .2);
    --sc-aur-4: rgba(92, 106, 160, .18);
    --sc-sun: rgba(255, 186, 116, .3);
    --sc-hill-1: #1c1713;
    --sc-hill-2: #171310;
    --sc-hill-3: #110e0c;
    --sc-mist: rgba(140, 160, 148, .09);
    --sc-veil: linear-gradient(180deg, rgba(16, 13, 11, .3) 0%, rgba(16, 13, 11, .5) 46%, rgba(14, 11, 9, .78) 100%);
    --sc-star: rgba(255, 244, 224, .85);
    --dock-bg: rgba(32, 26, 21, .82);
}

.scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--sc-base);
    contain: strict;
}
.scene > * { position: absolute; inset: 0; }

.scene-sky {
    background: var(--sc-sky);
    background-size: 100% 100%;
}

/* 自定义背景图（后台上传） */
.scene-photo {
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .8s ease;
}
html[data-bg="photo"] .scene-photo { opacity: .85; animation: kenburns 44s ease-in-out infinite alternate; }

/* 极光光带 */
.scene-aurora { opacity: 0; transition: opacity .6s ease; }
.scene-aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(64px);
    will-change: transform;
}
.scene-aurora i:nth-child(1) {
    width: 62vw; height: 40vh; left: -8vw; top: -8vh;
    background: radial-gradient(closest-side, var(--sc-aur-1), transparent 78%);
    animation: drift-a 24s ease-in-out infinite alternate;
}
.scene-aurora i:nth-child(2) {
    width: 56vw; height: 34vh; right: -6vw; top: 4vh;
    background: radial-gradient(closest-side, var(--sc-aur-2), transparent 76%);
    animation: drift-b 31s ease-in-out infinite alternate;
}
.scene-aurora i:nth-child(3) {
    width: 70vw; height: 30vh; left: 12vw; top: 22vh;
    background: radial-gradient(closest-side, var(--sc-aur-3), transparent 80%);
    animation: drift-c 27s ease-in-out infinite alternate;
    opacity: .8;
}
.scene-aurora i:nth-child(4) {
    width: 44vw; height: 26vh; right: 14vw; top: 38vh;
    background: radial-gradient(closest-side, var(--sc-aur-4), transparent 78%);
    animation: drift-a 37s ease-in-out infinite alternate-reverse;
    opacity: .7;
}

/* 星空 */
.scene-stars { opacity: 0; transition: opacity .8s ease; }
.scene-stars::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: transparent;
    animation: twinkle 5.5s ease-in-out infinite alternate;
}

/* 远处的太阳 / 月亮 */
.scene-sun {
    background: radial-gradient(280px 280px at 84% 8%, var(--sc-sun), transparent 70%);
    opacity: .9;
    animation: sunGlow 12s ease-in-out infinite alternate;
}

/* 三层山影 */
.scene-hills i {
    position: absolute;
    left: -3%;
    right: -3%;
    bottom: 0;
    display: block;
    transform: translateZ(0);
}
.scene-hills .h1 {
    height: 46%;
    background: var(--sc-hill-1);
    opacity: .5;
    filter: blur(1px);
    clip-path: polygon(0 68%, 7% 58%, 15% 64%, 24% 44%, 33% 56%, 42% 36%, 52% 54%, 62% 42%, 71% 58%, 81% 46%, 90% 60%, 100% 50%, 100% 100%, 0 100%);
}
.scene-hills .h2 {
    height: 34%;
    background: var(--sc-hill-2);
    opacity: .6;
    clip-path: polygon(0 72%, 9% 60%, 18% 70%, 27% 50%, 37% 66%, 47% 46%, 57% 64%, 67% 52%, 77% 68%, 87% 54%, 96% 66%, 100% 60%, 100% 100%, 0 100%);
}
.scene-hills .h3 {
    height: 22%;
    background: var(--sc-hill-3);
    opacity: .72;
    clip-path: polygon(0 76%, 12% 64%, 22% 74%, 34% 58%, 46% 72%, 58% 60%, 70% 74%, 82% 62%, 92% 72%, 100% 66%, 100% 100%, 0 100%);
}

/* 流动的雾 */
.scene-mist { overflow: hidden; }
.scene-mist i {
    position: absolute;
    left: -30%;
    width: 160%;
    height: 22vh;
    display: block;
    background: linear-gradient(90deg, transparent, var(--sc-mist), transparent);
    filter: blur(26px);
}
.scene-mist i:first-child { top: 42%; animation: mist-a 38s linear infinite; }
.scene-mist i:last-child { top: 68%; animation: mist-b 52s linear infinite; opacity: .7; }

/* 压一层极淡的蒙版，保证文字读得清 */
.scene-veil { background: var(--sc-veil); }

/* ---- 场景：晨光（默认） ---- */
html[data-bg="aurora"] .scene-aurora { opacity: .95; }

/* ---- 场景：夜色 ---- */
html[data-bg="night"] { --sc-base: #101827; }
html[data-bg="night"] .scene-stars { opacity: 1; }
html[data-bg="night"] .scene-aurora { opacity: .55; }
html[data-bg="night"] .scene-photo { opacity: 0; }
html[data-theme="light"][data-bg="night"] { --sc-base: #1d2536; }
html[data-theme="light"][data-bg="night"] .scene-veil {
    background: linear-gradient(180deg, rgba(24, 30, 46, .1) 0%, rgba(24, 30, 46, .34) 46%, rgba(24, 30, 46, .62) 100%);
}
html[data-theme="light"][data-bg="night"] .scene-hills .h1,
html[data-theme="light"][data-bg="night"] .scene-hills .h2,
html[data-theme="light"][data-bg="night"] .scene-hills .h3 { background: #0d1220; }

/* ---- 场景：海边 ---- */
html[data-bg="sea"] .scene-mist { opacity: 1; }
html[data-bg="sea"] .scene-hills .h1 { opacity: .34; }
html[data-bg="sea"] .scene-hills .h2 { opacity: .3; }
html[data-bg="sea"] .scene-hills .h3 { opacity: .22; }
html[data-theme="light"][data-bg="sea"] {
    --sc-aur-1: rgba(120, 196, 214, .5);
    --sc-aur-2: rgba(90, 172, 196, .42);
    --sc-aur-3: rgba(214, 236, 232, .5);
    --sc-aur-4: rgba(255, 226, 170, .35);
}
html[data-theme="light"][data-bg="sea"] .scene-aurora { opacity: .85; }

/* ---- 场景：林间 ---- */
html[data-bg="forest"] { --sc-base: #eef2e4; }
html[data-bg="forest"] .scene-hills .h1 { opacity: .5; }
html[data-bg="forest"] .scene-hills .h2 { opacity: .58; }
html[data-bg="forest"] .scene-hills .h3 { opacity: .7; }
html[data-theme="light"][data-bg="forest"] {
    --sc-hill-1: #cfdcb4;
    --sc-hill-2: #b9cb9b;
    --sc-hill-3: #a2b884;
    --sc-aur-1: rgba(190, 214, 160, .45);
    --sc-aur-2: rgba(150, 190, 150, .4);
    --sc-aur-3: rgba(235, 226, 180, .38);
}
html[data-theme="dark"][data-bg="forest"] {
    --sc-hill-1: #1a2218;
    --sc-hill-2: #141b13;
    --sc-hill-3: #0e130e;
}

/* ---- 场景：照片 ---- */
html[data-bg="photo"] .scene-photo { opacity: .9; filter: blur(2.5px) saturate(.92); }
html[data-bg="photo"] .scene-aurora { opacity: .3; }
html[data-bg="photo"] .scene-hills { opacity: .22; }
html[data-bg="photo"] .scene-veil {
    background: linear-gradient(180deg, rgba(250, 243, 231, .42) 0%, rgba(250, 243, 231, .56) 45%, rgba(247, 237, 222, .8) 100%);
}
html[data-theme="dark"][data-bg="photo"] .scene-veil {
    background: linear-gradient(180deg, rgba(14, 11, 9, .55) 0%, rgba(14, 11, 9, .72) 45%, rgba(12, 9, 8, .9) 100%);
}

@keyframes drift-a {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(6vw, 3vh, 0) scale(1.12); }
}
@keyframes drift-b {
    0% { transform: translate3d(0, 0, 0) scale(1.05); }
    100% { transform: translate3d(-7vw, 5vh, 0) scale(.95); }
}
@keyframes drift-c {
    0% { transform: translate3d(0, 0, 0) scale(.98); }
    100% { transform: translate3d(-4vw, -4vh, 0) scale(1.14); }
}
@keyframes twinkle {
    0% { opacity: .45; }
    50% { opacity: 1; }
    100% { opacity: .6; }
}
@keyframes sunGlow {
    0% { opacity: .75; }
    100% { opacity: 1; }
}
@keyframes mist-a {
    0% { transform: translateX(-14%); }
    100% { transform: translateX(14%); }
}
@keyframes mist-b {
    0% { transform: translateX(12%); }
    100% { transform: translateX(-12%); }
}
@keyframes kenburns {
    0% { transform: scale(1.04) translate3d(0, 0, 0); }
    100% { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

/* ==========================================================================
   右上角工具条 / 音乐
   ========================================================================== */

.dock {
    position: fixed;
    right: 18px;
    bottom: 20px;
    z-index: 46;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.dock-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--dock-bg);
    color: var(--ink-2);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    cursor: pointer;
    transition: color .2s, border-color .2s, transform .2s, background .2s;
}
.dock-btn:hover { color: var(--accent); border-color: var(--chip-hover-line); transform: translateY(-1px); }
.dock-btn:active { transform: scale(.95); }

.dock-tip {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--dock-bg);
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 11.5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
    box-shadow: var(--shadow);
}
.dock-btn:hover .dock-tip, .dock-btn:focus-visible .dock-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

#toTop { opacity: 0; visibility: hidden; transform: translateY(8px); }
#toTop.on { opacity: 1; visibility: visible; transform: none; }

/* 音乐按钮 */
.dock-music .eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.dock-music .eq i {
    display: block;
    width: 2.5px;
    border-radius: 2px;
    background: currentColor;
    animation: eq 1s ease-in-out infinite;
}
.dock-music .eq i:nth-child(1) { height: 6px; animation-delay: -.2s; }
.dock-music .eq i:nth-child(2) { height: 12px; animation-delay: -.5s; }
.dock-music .eq i:nth-child(3) { height: 8px; animation-delay: -.8s; }
.dock-music .eq i:nth-child(4) { height: 4px; animation-delay: -.35s; }
.dock-music.on { color: var(--accent); border-color: var(--accent); }
.dock-music.on .eq { display: flex; }
.dock-music.on .m-ico { display: none; }
@keyframes eq {
    0%, 100% { transform: scaleY(.5); }
    50% { transform: scaleY(1.35); }
}

.music-volume {
    position: absolute;
    right: 50px;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--dock-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
}
.music-volume[hidden] { display: none; }
.music-volume input[type="range"] {
    width: 82px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* 阅读进度 */
.read-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    height: 2.5px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--wood));
    box-shadow: 0 0 8px rgba(193, 113, 63, .5);
    transition: width .1s linear, opacity .3s;
    opacity: 0;
}
.read-bar.on { opacity: 1; }

/* 首页那行「现在是几点」 */
.hero-now {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    padding: 3px 12px 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--chip-bg);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .02em;
}
.dot-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(127, 154, 114, .6);
    animation: live 2.4s ease-out infinite;
}
@keyframes live {
    0% { box-shadow: 0 0 0 0 rgba(127, 154, 114, .55); }
    70% { box-shadow: 0 0 0 6px rgba(127, 154, 114, 0); }
    100% { box-shadow: 0 0 0 0 rgba(127, 154, 114, 0); }
}

/* ==========================================================================
   地点详情弹层（新版）
   ========================================================================== */

.place-sheet { max-height: 88vh; overflow: hidden; }

.place-head {
    padding: 24px 26px 12px;
    padding-right: 66px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--sheet);
}
.place-head .place-no { margin: 0 0 5px; }
.place-head .place-title { margin: 0 0 5px; }
.place-head .place-meta { margin: 0; }

.place-body {
    padding: 16px 26px 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.place-body .place-note { margin: 0 0 14px; }

.place-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}
.place-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px 14px;
    border-top: 1px solid var(--line-soft);
    background: var(--sheet);
}
.place-nav {
    padding: 6px 12px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--chip-bg);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.place-nav:hover { border-color: var(--accent); color: var(--accent); }
.place-album { font-size: 12.5px; color: var(--muted); }
.place-album:hover { color: var(--accent); }

/* ==========================================================================
   搜索 / 点赞
   ========================================================================== */

.search-form {
    display: flex;
    gap: 8px;
    margin: 0 0 22px;
}
.search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--input-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
}
.search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.search-hit { padding: 0 2px; background: var(--mark-bg); color: var(--ink); border-radius: 3px; }

.like-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px dashed var(--line);
}
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--chip-bg);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color .2s, color .2s, transform .2s, background .2s;
}
.like-btn svg { width: 15px; height: 15px; transition: transform .3s cubic-bezier(.2, .8, .3, 1); }
.like-btn:hover { border-color: var(--accent); color: var(--accent); }
.like-btn:active svg { transform: scale(1.35); }
.like-btn.liked { color: #c14a3a; border-color: #e2b1a6; background: #fdf1ec; }
html[data-theme="dark"] .like-btn.liked { color: #e0897a; border-color: #54322a; background: #2c1c17; }
.like-btn.liked svg { fill: currentColor; }
.like-btn.pop svg { animation: likePop .45s cubic-bezier(.2, .8, .3, 1); }
@keyframes likePop {
    0% { transform: scale(.7); }
    55% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.like-hint { font-size: 12.5px; color: var(--muted); margin: 0; }

@media (max-width: 720px) {
    .scene-hills .h1 { height: 32%; }
    .scene-hills .h2 { height: 24%; }
    .scene-hills .h3 { height: 16%; }
    .scene-aurora i { filter: blur(44px); }
    .dock { right: 12px; bottom: 14px; gap: 7px; }
    .dock-btn { width: 36px; height: 36px; }
    .dock-tip { display: none; }
    .music-volume { right: 46px; bottom: 30px; }
    .music-volume input[type="range"] { width: 64px; }
    .place-head { padding: 20px 18px 10px; padding-right: 56px; }
    .place-body { padding: 14px 18px 6px; }
    .place-foot { padding: 10px 14px 12px; }
    .place-album { font-size: 12px; }
    .place-nav { padding: 5px 9px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .scene-aurora i,
    .scene-mist i,
    .scene-sun,
    .scene-stars::before,
    .dot-live,
    .dock-music .eq i { animation: none !important; }
    html[data-bg="photo"] .scene-photo { animation: none; }
    .scene { contain: none; }
}

/* 相册：张数为偶数时，最后一张通栏，避免右下角空一格 */
.mosaic:not(.mosaic--few):not(.mosaic--one) > .mosaic-item:last-child:nth-child(even) {
    grid-column: span 2;
    aspect-ratio: 21 / 9;
}

/* 小屏地图：装饰说明太小、会糊在图上，干脆收起来 */
@media (max-width: 560px) {
    .map-art .map-deco { display: none; }
    .map-tip { display: none; }
}

@media (max-width: 560px) {
    /* 窄屏上地名太挤，只留编号，名字看下面的地点条 */
    .pin-label { display: none; }
    .map-stage { aspect-ratio: 4 / 3; }
    .pin-dot { width: 30px; height: 30px; font-size: 12.5px; }
    .pin-count { top: -6px; right: -8px; }
    /* 小工具条横着放，别挡住表单 */
    .dock { flex-direction: row-reverse; right: 12px; bottom: 12px; }
    .music-volume { right: 0; bottom: 46px; }
}

@media (max-width: 560px) {
    /* 小屏上照片数角标会和编号看混，藏起来 */
    .pin-count { display: none; }
}