/* ============================================================
   青柠小站 · 安静的纸页
   暖纸白 / 墨色 / 橄榄绿 / 少量琥珀；本地托管标题字体
   ============================================================ */
:root {
  --page: #faf8f2;
  --surface: #ffffff;
  --surface-muted: #f0eee5;
  --ink: #302e29;
  --muted: #67655d;
  --accent: #4e6243;
  --accent-deep: #35482e;
  --amber: #a37d3d;
  --lime: #e0e8d5;
  --lime-soft: #eef3e7;
  --border: #deddd2;
  --border-strong: #888270;
  --serif: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", STSong, SimSun, Georgia, serif;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--lime); color: var(--ink); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1360px, calc(100% - 64px)); margin: 0 auto; }
body > main { flex: 1 0 auto; }

/* ---------- 品牌与导航 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 248, 242, 0.98);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s;
}
.site-header.is-scrolled { box-shadow: 0 3px 14px rgba(48, 46, 41, 0.05); }
.header-inner { min-height: 84px; display: flex; align-items: center; gap: 28px; padding: 10px 0; }
.brand-block { min-width: 0; }
.brand { display: flex; align-items: center; gap: 9px; width: fit-content; }
.brand-mark { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand strong { font: 600 22px/1.3 var(--serif); letter-spacing: 0.1em; }
.brand-quote { margin: 0; color: var(--muted); }
.brand-quote p { margin: 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.brand-quote--header { margin-top: 3px; }
.brand-quote--header p { white-space: nowrap; }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.desktop-nav a { padding: 9px 0; font-size: 14px; color: var(--muted); transition: color 0.15s; }
.desktop-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 7px; }
.header-actions { display: flex; gap: 6px; }
.icon-button {
  min-width: 40px;
  height: 40px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  border-radius: 3px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  font-size: 16px;
  transition: color 0.15s, background 0.15s;
}
.icon-button:hover { background: var(--surface-muted); color: var(--accent-deep); }
.menu-button, .mobile-nav { display: none; }

/* ---------- 首页开篇：短介绍与装饰图，文章在前 ---------- */
.hero-band { padding: 24px 0 0; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: center;
  gap: 32px;
  max-width: none;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.hero-copy { min-width: 0; padding: 0; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font: 500 10px/1.5 ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.14em; }
.hero-copy h1 { margin: 0 0 8px; font: 600 clamp(26px, 2.8vw, 32px)/1.45 var(--serif); letter-spacing: 0.06em; }
.hero-description { max-width: 480px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.hero-art { position: relative; margin: 0; min-width: 0; background: var(--surface-muted); border-radius: 3px; overflow: hidden; }
.hero-art::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(82, 96, 71, 0.1); pointer-events: none; }
.hero-art img { display: block; width: 100%; height: 128px; object-fit: cover; object-position: 68% 53%; }
.primary-action, .secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 44px;
  border: 1px solid var(--accent);
  padding: 10px 19px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.primary-action { background: var(--accent); color: var(--surface); }
.primary-action:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.secondary-action { background: transparent; color: var(--accent); }
.secondary-action:hover { background: var(--lime-soft); }

/* ---------- 文章列表 ---------- */
.content-band { padding: 24px 0 56px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; max-width: none; }
.content-main { min-width: 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.section-heading .eyebrow { margin-bottom: 6px; }
.section-heading h2, .page-heading h1 { margin: 0; font: 600 25px/1.5 var(--serif); letter-spacing: 0.025em; }
.section-heading > a { flex-shrink: 0; padding: 8px 0 3px 12px; font-size: 12px; color: var(--accent); }
.section-heading > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-list { display: grid; gap: 12px; margin-top: 16px; }
.post-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 20px; padding: 24px 20px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); align-items: start; }
.post-row.has-cover { grid-template-columns: 48px minmax(0, 1fr) 230px 32px; }
.post-summary { min-width: 0; overflow-wrap: anywhere; }
.post-cover { overflow: hidden; background: var(--surface-muted); border-radius: 2px; align-self: center; }
.post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.post-date { text-align: left; padding-top: 3px; font-variant-numeric: tabular-nums; }
.post-date span, .post-date small { display: block; color: var(--muted); font: 400 10px/1.5 ui-monospace, Consolas, monospace; }
.post-date strong { display: block; margin: 5px 0; font: 400 28px/1 Georgia, serif; color: var(--ink); }
.post-taxonomy { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.post-taxonomy:empty { display: none; }
.post-taxonomy a { font-size: 11px; letter-spacing: 0.03em; color: var(--accent); }
.post-taxonomy a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-summary h2 { margin: 7px 0 10px; font: 600 21px/1.65 var(--serif); }
.post-summary h2 a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-summary p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px 13px; }
.post-tags a { font-size: 11px; color: var(--muted); padding: 2px 0; }
.post-tags a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.row-link { width: 32px; height: 36px; display: grid; place-items: center; font-size: 17px; color: var(--accent); }
.row-link:hover { background: var(--lime-soft); }

/* ---------- 首页侧栏：本地时钟、日期、真实分类 ---------- */
.side-rail { min-width: 0; }
.side-rail section { padding: 18px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); }
.side-rail .eyebrow { margin-bottom: 6px; }
.side-rail h3 { margin: 0 0 14px; font: 600 19px/1.5 var(--serif); }
.calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.calendar-heading h3 { margin: 0; }
.calendar-clock { color: var(--accent); font: 500 16px/1.5 ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.calendar-date { display: block; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.calendar-month { margin: 18px 0 10px; color: var(--ink); font-size: 13px; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px 0; text-align: center; }
.calendar-weekdays { padding-bottom: 7px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 10px; }
.calendar-grid { margin: 7px 0 0; padding: 0; list-style: none; font-size: 12px; font-variant-numeric: tabular-nums; }
.calendar-grid li { min-width: 0; min-height: 28px; }
.calendar-grid time { display: grid; place-items: center; width: 28px; height: 28px; margin: auto; }
.calendar-grid time[aria-current="date"] { background: var(--accent); color: var(--surface); border-radius: 3px; font-weight: 600; }
.aside-categories .category-list { margin: 0 0 12px; padding: 0; list-style: none; }
.aside-categories .category-list-item { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; margin: 10px 0; color: var(--muted); font-size: 13px; }
.aside-categories .category-list-link { overflow-wrap: anywhere; }
.aside-categories .category-list-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.aside-categories .category-list-count { flex: 0 0 auto; font: 11px/1.5 ui-monospace, Consolas, monospace; }
.aside-more { font-size: 12px; color: var(--accent); }
.aside-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 正文与页面 ---------- */
.page-main { flex: 1 0 auto; padding: 36px 0 56px; }
.narrow-shell { max-width: 1180px; }
.page-heading { padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.page-heading > p:not(.eyebrow) { color: var(--muted); font-size: 15px; max-width: 640px; }
.article-shell { max-width: none; }
.article-main { min-width: 0; }
.article-header { padding: 8px 0 24px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.article-header h1 { margin: 0 0 18px; font: 600 clamp(26px, 3.2vw, 34px)/1.5 var(--serif); letter-spacing: 0.015em; overflow-wrap: anywhere; }
.article-description { color: var(--muted); margin: 0 0 18px; font-size: 15px; line-height: 1.9; }
.article-cover { margin: 0 0 34px; overflow: hidden; background: var(--surface-muted); }
.article-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; }
.article-content { min-width: 0; font-size: 16px; line-height: 1.95; overflow-wrap: anywhere; }
.article-content h2, .article-content h3 { scroll-margin-top: 112px; }
.article-content img { height: auto; }
.article-content p { margin: 0 0 20px; }
.article-content h2 { margin: 40px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); font: 600 24px/1.6 var(--serif); }
.article-content h3 { margin: 28px 0 12px; font: 600 20px/1.6 var(--serif); }
.article-content p, .article-content li { color: var(--ink); }
.article-content a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.article-content a:hover { text-decoration-color: var(--accent); }
.article-content code { background: var(--surface-muted); border: 1px solid var(--border); padding: 1px 5px; border-radius: 2px; font-family: ui-monospace, Consolas, "SF Mono", monospace; font-size: 0.88em; color: var(--accent-deep); }
.article-content pre { background: var(--surface-muted); border: 1px solid var(--border); padding: 16px 18px; overflow: auto; border-radius: 2px; line-height: 1.65; }
.article-content pre code { background: transparent; border: 0; padding: 0; color: var(--ink); }
.article-content blockquote { margin: 24px 0; padding: 8px 20px; border-left: 2px solid var(--amber); background: var(--surface); color: var(--ink); }
.article-content blockquote p:last-child { margin-bottom: 0; }
.article-content ul, .article-content ol { padding-left: 24px; margin: 0 0 22px; }
.article-content li { margin: 7px 0; }
.article-content li::marker { color: var(--accent); }
.article-content table { display: table; table-layout: fixed; border-collapse: separate; border-spacing: 0; width: 100%; max-width: 100%; min-width: 0; font-size: 14px; margin: 24px 0; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); }
.article-content th, .article-content td { border: 0; border-bottom: 1px solid var(--border); padding: 11px 14px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
.article-content tr:last-child td { border-bottom: 0; }
.article-content th { background: var(--lime-soft); font-weight: 600; color: var(--ink); }
.article-content tbody tr:nth-child(even) td { background: #fbfcf8; }
.article-content tbody tr:hover td { background: var(--lime-soft); }
.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; margin: 24px 0; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); }
.article-content .table-scroll > table { margin: 0; border: 0; border-radius: 0; }
.table-scroll:focus-visible { outline-offset: 2px; }
.article-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 14px; color: var(--accent); }
.article-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 分类、归档与订阅 ---------- */
.taxonomy-grid ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.taxonomy-grid li { min-width: 0; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); padding: 16px 18px; transition: color 0.15s; overflow-wrap: anywhere; }
.taxonomy-grid li:hover { color: var(--accent); }
.taxonomy-grid li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.taxonomy-grid .category-list-count, .taxonomy-grid .tag-list-count { float: right; margin-left: 10px; color: var(--muted); font-size: 13px; }
.timeline-year { font: 600 24px/1.5 var(--serif); color: var(--ink); margin: 32px 0 10px; }
.timeline-year:first-child { margin-top: 0; }
.timeline-item { display: flex; gap: 22px; padding: 15px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.timeline-item time { font: 400 12px/1.5 ui-monospace, Consolas, monospace; color: var(--muted); flex: 0 0 56px; }
.timeline-item a { min-width: 0; overflow-wrap: anywhere; font-size: 15px; color: var(--ink); }
.timeline-item a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.subscribe-box { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface); border: 1px solid var(--border); padding: 24px; margin-bottom: 32px; border-radius: 3px; }
.subscribe-box span { display: block; color: var(--accent); font: 500 11px/1.5 ui-monospace, Consolas, monospace; }
.subscribe-box code { display: block; margin-top: 8px; overflow-wrap: anywhere; color: var(--ink); }
.subscribe-box .primary-action { flex: 0 0 auto; }

/* ---------- 页脚 ---------- */
.site-footer { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 14px 0 16px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 12px; color: var(--muted); max-width: 1000px; }
.footer-brand { min-width: 0; }
.footer-brand-name { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 4px; }
.footer-brand-name img { display: block; }
.footer-brand-name strong { color: var(--ink); font: 600 15px/1.4 var(--serif); letter-spacing: 0.05em; }
.footer-note { margin: 0; text-align: right; flex-shrink: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 14px; }
.footer-note span { display: block; font-size: 11px; }
.footer-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 搜索弹窗 ---------- */
.search-dialog { position: fixed; inset: 0; z-index: 50; background: rgba(48, 46, 41, 0.48); padding: 7vh 20px; overflow-y: auto; }
.search-panel { max-width: 720px; margin: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; box-shadow: 0 16px 48px rgba(48, 46, 41, 0.15); padding: 24px; }
.search-head { display: flex; justify-content: space-between; align-items: center; }
.search-head h2 { margin: 0; font: 600 22px/1.5 var(--serif); }
.search-input { width: 100%; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 2px; padding: 12px 14px; margin: 18px 0 8px; color: var(--ink); }
.search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-input::placeholder { color: var(--muted); }
.search-meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.search-retry { margin-bottom: 12px; }
.search-results { max-height: 52vh; overflow: auto; }
.search-result { display: block; padding: 14px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.search-result span { font: 400 11px/1.5 ui-monospace, Consolas, monospace; color: var(--accent); }
.search-result strong { display: block; font-size: 16px; font-weight: 600; }
.search-result p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.search-result:focus-visible { outline-offset: -2px; }
.dialog-open { overflow: hidden; }

/* ---------- 代码块：保留行号、语言与复制 hooks ---------- */
.article-content figure.highlight { position: relative; margin: 26px 0; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; max-width: 100%; }
.article-content figure.highlight table { margin: 0; border: 0; border-collapse: collapse; min-width: 0; width: 100%; max-width: 100%; display: table; table-layout: fixed; }
.article-content figure.highlight tbody, .article-content figure.highlight tr { width: 100%; }
.article-content figure.highlight td { border: 0; padding: 0; width: 100%; max-width: 100%; overflow: hidden; background: transparent; }
.article-content figure.highlight pre { margin: 0; background: transparent; color: var(--ink); border: 0; border-radius: 0; padding: 36px 16px 16px; overflow-x: auto; max-width: 100%; line-height: 1.65; font-size: 13px; white-space: pre; }
.article-content > pre { margin: 26px 0; padding: 16px; max-width: 100%; line-height: 1.65; font-size: 13px; }
.article-content .highlight .line { display: block; }
.article-content figure.highlight code { background: transparent; padding: 0; color: inherit; }
.highlight .comment, .highlight .quote { color: var(--muted); font-style: italic; }
.highlight .keyword, .highlight .selector-tag, .highlight .doctag, .highlight .meta-keyword { color: var(--accent); font-weight: 600; }
.highlight .string, .highlight .regexp, .highlight .addition { color: #41623c; }
.highlight .number, .highlight .literal, .highlight .built_in, .highlight .type { color: #875018; }
.highlight .title, .highlight .section, .highlight .name, .highlight .selector-id, .highlight .selector-class { color: var(--ink); font-weight: 600; }
.highlight .attr, .highlight .attribute, .highlight .variable, .highlight .template-variable, .highlight .property { color: #3c6173; }
.highlight .symbol, .highlight .bullet, .highlight .link { color: #6e5075; }
.highlight .deletion { color: #a43b30; }
.highlight .emphasis { font-style: italic; }
.highlight .strong { font-weight: 700; }
.highlight .meta, .highlight .meta-string { color: var(--muted); }
.highlight .params { color: var(--ink); }
.code-lang { position: absolute; top: 0; left: 0; padding: 8px 12px; font: 500 10px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); background: var(--surface-muted); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); pointer-events: none; z-index: 1; }
.code-copy { position: absolute; top: 7px; right: 8px; z-index: 3; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); border-radius: 2px; padding: 3px 9px; font-size: 12px; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; }
.article-content figure.highlight:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover, .code-copy.is-done { background: var(--accent); border-color: var(--accent); color: var(--surface); opacity: 1; }
@media (hover: none) { .code-copy { opacity: 1; } }

/* ---------- 阅读目录：原生按钮与真实父子层级 ---------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.article-toc { min-width: 0; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); padding: 10px 14px 14px; margin-bottom: 24px; }
.toc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; border: 0; background: transparent; padding: 5px 0; margin: 0 0 8px; text-align: left; font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 0.05em; }
.toc-toggle::after { content: '−'; font-size: 16px; color: var(--muted); }
.toc-toggle[aria-expanded="false"]::after { content: '+'; }
.toc-toggle[aria-expanded="false"] { margin-bottom: 0; }
.article-toc ol { margin: 0; padding: 0; list-style: none; }
.article-toc.is-collapsed > ol { display: none; }
.article-toc li { margin: 4px 0; font-size: 12px; color: var(--muted); }
.article-toc li > a { display: block; padding: 5px 8px; line-height: 1.65; overflow-wrap: anywhere; border-radius: 2px; }
.article-toc li > ol { margin: 4px 0 10px 8px; padding-left: 10px; border-left: 1px solid var(--border); }
.article-toc li.toc-l3 { font-size: 11px; }
.article-toc a:hover:not(.is-active) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-toc a.is-active { color: var(--accent-deep); background: var(--lime-soft); box-shadow: inset 2px 0 0 var(--accent); font-weight: 600; }
.article-toc a:focus-visible { outline-offset: 0; }
@media (min-width: 900px) {
  .article-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
  .article-toc { order: 1; position: sticky; top: 108px; margin-bottom: 0; max-height: calc(100vh - 140px); overflow: auto; }
  .article-main { order: 2; max-width: none; }
  .article-main > .article-header { margin-top: 0; }
}

/* ---------- 阅读辅助与克制动效 ---------- */
.read-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60; background: var(--accent); transition: width 0.1s linear; }
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 55; width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: 2px; background: var(--surface); color: var(--accent); font-size: 16px; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s, background 0.15s, color 0.15s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); border-color: var(--accent); color: var(--surface); }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; transition-delay: var(--reveal-delay, 0ms); }
  .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 404 页 ---------- */
.error-page { padding: 12px 0; }
.error-page h1 { margin: 0 0 16px; font: 600 clamp(26px, 3.2vw, 34px)/1.5 var(--serif); }
.error-page > p { color: var(--muted); font-size: 15px; margin: 0 0 24px; max-width: 620px; }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 44px; }
.error-list { border-top: 1px solid var(--border); padding-top: 22px; }
.error-list .timeline-item:last-child { border-bottom: 0; }

/* ---------- 小屏：内容优先，短句与日历始终可见 ---------- */
@media (max-width: 1050px) {
  .content-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .side-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
  .side-rail section { margin-bottom: 0; }
}
@media (max-width: 899px) {
  .desktop-nav { display: none; }
  .menu-button { display: grid; }
  .brand-block { margin-right: auto; }
  .mobile-nav { display: none; padding: 0 32px 16px; border-top: 1px solid var(--border); }
  .mobile-nav.is-open { display: grid; }
  .mobile-nav a { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(180px, 28vw); gap: 24px; }
  .hero-art img { height: 110px; }
  .article-layout { display: block; }
}
@media (max-width: 700px) {
  .shell { width: calc(100% - 40px); }
  .hero-band { padding-top: 18px; }
  .hero-grid { gap: 20px; padding-bottom: 20px; }
  .hero-copy h1 { font-size: 28px; }
  .hero-description { font-size: 14px; }
  .content-band { padding: 22px 0 40px; }
  .page-main { padding: 26px 0 40px; }
  .post-row, .post-row.has-cover { grid-template-columns: 44px minmax(0, 1fr) 28px; gap: 16px; padding: 22px 16px; }
  .post-row.has-cover .post-cover { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .post-row.has-cover .row-link { grid-column: 3; grid-row: 1; }
  .section-heading h2 { font-size: 23px; }
  .post-summary h2 { font-size: 20px; }
  .footer-inner { gap: 24px; flex-wrap: wrap; }
  .footer-note { text-align: left; }
  .taxonomy-grid ul { grid-template-columns: 1fr; }
  .subscribe-box { display: block; padding: 20px; }
  .subscribe-box .primary-action { margin-top: 16px; }
}
@media (max-width: 620px) {
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; min-height: 84px; padding: 6px 0; }
  .brand-block { display: contents; }
  .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .brand-mark { width: 30px; height: 30px; }
  .brand strong { font-size: 20px; }
  .brand-quote--header { grid-column: 1 / -1; grid-row: 2; margin: 0; justify-self: start; }
  .brand-quote--header p { white-space: normal; font-size: 11px; }
  .header-actions { grid-column: 2; grid-row: 1; gap: 2px; }
  .mobile-nav { padding-left: 20px; padding-right: 20px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 120px; gap: 16px; }
  .hero-copy h1 { font-size: 26px; }
  .hero-art img { height: 90px; object-position: 65% 57%; }
  .post-row, .post-row.has-cover { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 20px 14px; }
  .post-date strong { font-size: 25px; }
  .row-link { display: none; }
  .post-summary h2 { font-size: 19px; }
  .post-summary p { font-size: 13px; }
  .side-rail { grid-template-columns: minmax(0, 1fr); }
  .calendar-grid time { width: 28px; max-width: 100%; }
  .article-header h1 { font-size: 26px; }
  .article-content { font-size: 15px; line-height: 1.95; }
  .article-content h2 { font-size: 22px; }
  .article-content h3 { font-size: 19px; }
  .article-content th, .article-content td { padding: 9px 10px; font-size: 13px; }
  .article-content figure.highlight td { padding: 0; }
  .article-content figure.highlight pre { font-size: 12px; }
  .footer-inner { display: block; }
  .footer-note { margin-top: 24px; }
  .search-dialog { padding: 12px; }
  .search-panel { padding: 16px; }
  .to-top { right: 16px; bottom: 16px; }
}

/* ---------- 林间晨光：独立背景与可调纸玻璃面板 ----------
   只改变面板背景的 alpha；文字、图片与按钮不继承透明度。
   不支持 backdrop-filter / 要求降低透明度时，明确回退为实色纸面。 */
:root {
  --page: #e3e3cc;
  --surface: #fffcf6;
  --surface-muted: #eeeadd;
  --ink: #25291e;
  --muted: #303626;
  --accent: #293a21;
  --accent-deep: #263b1d;
  --border: rgba(62, 71, 47, 0.21);
  --border-strong: #797d68;
  --panel-alpha: 0.82;
  --panel-background: rgba(255, 252, 246, var(--panel-alpha));
  --header-background: rgba(255, 252, 246, 0.94);
  /* Fixed warm veil: panel transparency never alters the photograph. */
  --backdrop-veil: rgba(255, 250, 240, 0.24);
  --panel-border: rgba(255, 255, 248, 0.8);
  --panel-shadow: 0 14px 36px rgba(36, 47, 22, 0.13), 0 2px 8px rgba(36, 47, 22, 0.05);
  --panel-radius: 14px;
}
body { position: relative; isolation: isolate; }
/* A separate paint layer, never a hero/content image; a missing image leaves warm gradients. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #d8ddc2;
  background-image:
    linear-gradient(var(--backdrop-veil), var(--backdrop-veil)),
    url('/images/backgrounds/qingning-landscape.jpg'),
    linear-gradient(130deg, #efdcb1 0%, #adb98b 55%, #75866b 100%);
  background-position: center, center 46%, center;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-header {
  background: var(--header-background);
  border-bottom-color: var(--panel-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(36, 47, 22, 0.1); }
.header-inner { gap: 20px; }
.desktop-nav { gap: 24px; }
.header-actions { align-items: center; flex-shrink: 0; }
.icon-button { border-radius: 8px; }

/* One glass plane per content group: nested rows remain transparent. */
.hero-grid,
.content-main,
.side-rail section,
.article-main,
.article-toc,
.page-main > .narrow-shell,
.page-main > article.article-shell {
  background: var(--panel-background);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
/* The reading plane is the one surface allowed extra depth: fur glass over the photograph. */
.article-main,
.article-toc,
.page-main > .narrow-shell,
.page-main > article.article-shell {
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}
.hero-band { padding-top: 28px; }
.hero-grid { display: block; padding: 22px 28px; }
.hero-description { max-width: 760px; color: var(--muted); }
.hero-copy h1 { margin-bottom: 6px; }
.content-band { padding-top: 24px; }
.content-grid { gap: 24px; align-items: start; }
.content-main { padding: 26px; }
.post-list { gap: 0; margin-top: 2px; }
.post-row,
.content-main .post-row,
.narrow-shell .post-row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 25px 0;
}
.post-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.post-row.has-cover { grid-template-columns: 40px minmax(0, 1fr) 168px 24px; gap: 16px; }
.post-row { grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 16px; }
.post-cover { border-radius: 8px; }
.side-rail section { padding: 20px; }
.article-main { padding: clamp(20px, 3vw, 34px); }
.article-layout { gap: 24px; }
.article-toc { padding: 12px 16px 16px; }
.page-main > .narrow-shell,
.page-main > article.article-shell { padding: clamp(20px, 3vw, 34px); }
.article-cover { border-radius: 8px; }
.taxonomy-grid li,
.subscribe-box {
  background: transparent;
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: none;
}
.article-content blockquote { background: rgba(237, 231, 209, 0.65); border-radius: 0 6px 6px 0; }
.page-heading { margin-bottom: 16px; }
.site-footer {
  background: var(--header-background);
  border-top-color: var(--panel-border);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
.footer-note { flex-shrink: 1; overflow-wrap: anywhere; }
/* Search is deliberately opaque, independent of the appearance slider. */
.search-panel { background: #fffcf6; border-radius: 12px; }
.search-input { background: #fffcf6; }

/* ---------- 页脚唱片机 ----------
   音乐只由用户点击开始；播放器位于页脚，PJAX 换页不替换它，所以切页不断。 */
.music-player { position: relative; min-width: 0; flex: 0 0 auto; }
.vinyl-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12px;
}
.vinyl-mini {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 3px, transparent 3px),
    repeating-radial-gradient(circle at 50% 50%, #2b2b28 0 1px, #3a3a36 1px 2px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.music-player[data-music-state="playing"] .vinyl-mini { animation: vinyl-spin 3.6s linear infinite; }
.music-body {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 300px;
  max-width: calc(100vw - 28px);
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 16px;
  background: #fffcf6;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  text-align: left;
  z-index: 45;
}
.vinyl-stage { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.vinyl-disc {
  position: relative;
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #26261f 0 1px, #33332b 1px 2px, #2b2b24 2px 3px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(30, 36, 20, 0.22);
}
.vinyl-disc.is-spinning { animation: vinyl-spin 4s linear infinite; }
.vinyl-groove { position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.07); }
.vinyl-label {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--amber) 0 2px, var(--accent) 2px 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.music-play {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fffcf6;
  font-size: 14px;
  display: grid;
  place-items: center;
}
.music-play:hover { background: var(--accent-deep); }
.music-title { margin: 0 0 3px; font: 600 14px/1.5 var(--serif); color: var(--ink); }
.music-credit, .music-status { margin: 0 0 10px; overflow-wrap: anywhere; font-size: 11px; color: var(--muted); }
.music-status { margin-top: 8px; margin-bottom: 0; }
.music-progress {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-muted);
  cursor: pointer;
  touch-action: none;
}
.music-progress:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.music-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--accent); }
.music-times { display: flex; justify-content: space-between; margin: 5px 0 10px; font: 11px/1.4 ui-monospace, Consolas, monospace; color: var(--muted); font-variant-numeric: tabular-nums; }
.music-list { margin: 0; padding: 0; list-style: none; max-height: 168px; overflow-y: auto; border-top: 1px solid var(--border); }
.music-item { border-bottom: 1px solid var(--border); }
.music-item-play {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 7px 4px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 12px;
  color: var(--ink);
}
.music-item-play:hover { background: var(--lime-soft); }
.music-item.is-current .music-item-title { color: var(--accent-deep); font-weight: 600; }
.music-item-index { flex: 0 0 16px; color: var(--muted); font: 10px/1 ui-monospace, Consolas, monospace; }
.music-item-title { min-width: 0; overflow-wrap: anywhere; }
.article-links { margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted); line-height: 2; }
.article-links a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .vinyl-disc.is-spinning, .music-player[data-music-state="playing"] .vinyl-mini { animation: none; }
}
@media (max-width: 620px) {
  .music-body { position: fixed; right: 12px; left: 12px; bottom: 12px; width: auto; max-width: none; }
  .music-player { margin-top: 14px; }
}
.article-media { max-width: 100%; min-width: 0; margin: 28px 0; }
.article-media-link { display: block; max-width: 100%; border-radius: 8px; overflow: hidden; background: var(--surface-muted); }
.article-media img { display: block; max-width: 100%; width: auto; height: auto; margin: auto; }
.article-media figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; }
.media-play { margin-top: 12px; min-height: 44px; }

/* No opacity effects on whole text/image panels, including existing reveal hooks. */
.reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
@media (min-width: 900px) {
  .article-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 1050px) {
  .content-grid { gap: 24px; }
  .side-rail section { margin-bottom: 0; }
  .post-row.has-cover { grid-template-columns: 44px minmax(0, 1fr) 190px 28px; }
}
@media (max-width: 899px) {
  /* Avoid a full-viewport fixed compositing layer / heavy blur on mobile. */
  body::before { position: absolute; background-size: auto 100vh, auto 100vh, cover; background-repeat: no-repeat; background-position: top center; }
  .hero-grid { display: block; }
  .article-main { max-width: none; }
  .content-main,
  .hero-grid,
  .side-rail section,
  .article-main,
  .article-toc,
  .page-main > .narrow-shell,
  .page-main > article.article-shell,
  .site-header,
  .site-footer { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .article-toc { margin-bottom: 20px; }
}
@media (max-width: 700px) {
  .shell { width: calc(100% - 32px); }
  .hero-band { padding-top: 18px; }
  .hero-grid { padding: 18px 20px; }
  .hero-copy h1 { font-size: 26px; }
  .content-band { padding-top: 18px; }
  .content-main { padding: 20px; }
  .post-row, .post-row.has-cover { grid-template-columns: 38px minmax(0, 1fr) 24px; gap: 12px; padding: 22px 0; }
  .post-row.has-cover .post-cover { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .page-main > .narrow-shell,
  .page-main > article.article-shell,
  .article-main { padding: 22px 20px; }
  .footer-inner { gap: 20px; }
}
@media (max-width: 899px) {
}
@media (max-width: 620px) {
  .header-inner { gap: 2px 8px; }
  .brand strong { font-size: 19px; letter-spacing: 0.04em; }
  .header-actions { gap: 0; }
  .header-actions .icon-button { min-width: 36px; padding: 0 7px; }
  .post-row, .post-row.has-cover { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .post-summary h2 { font-size: 19px; }
  .section-heading { gap: 8px; }
  .section-heading > a { padding-left: 0; }
  .section-heading h2 { font-size: 22px; }
  .music-player { margin-top: 18px; }
}
@media (max-width: 359px) {
  .shell { width: calc(100% - 24px); }
  .content-main, .hero-grid, .article-main,
  .page-main > .narrow-shell,
  .page-main > article.article-shell { padding-left: 16px; padding-right: 16px; }
  .brand { gap: 6px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand strong { font-size: 18px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --panel-background: #fffcf6; --header-background: #fffcf6; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --panel-background: #fffcf6; --header-background: #fffcf6; }
  .hero-grid, .content-main, .side-rail section, .article-main, .article-toc,
  .page-main > .narrow-shell, .page-main > article.article-shell,
  .site-header, .site-footer { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  :root { --panel-background: Canvas; --header-background: Canvas; --ink: CanvasText; --muted: CanvasText; --accent: LinkText; --accent-deep: LinkText; --border: CanvasText; --panel-border: CanvasText; }
  body::before { display: none; }
  .appearance-panel, .search-panel, .search-input { background: Canvas; color: CanvasText; }
  .hero-grid, .content-main, .side-rail section, .article-main, .article-toc,
  .page-main > .narrow-shell, .page-main > article.article-shell,
  .site-header, .site-footer { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- 阅读界面：紧凑内容、独立背景、就近工具 ---------- */
.header-inner { min-height: 72px; }
.content-band { padding: 26px 0 42px; }
.content-main { padding: 22px 26px; }
.post-row, .content-main .post-row, .narrow-shell .post-row { padding: 20px 0; }
.side-rail section { padding: 18px; }
.page-main { padding: 28px 0 46px; }
.article-shell { max-width: 1200px; }
.article-main { max-width: 910px; }
.article-content h2 { margin-top: 34px; }
.article-main, .article-toc, .page-main > .narrow-shell, .page-main > article.article-shell {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.article-back {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin: 0 0 18px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent-deep);
  background: rgba(255, 252, 246, 0.82);
  font-size: 13px;
  text-decoration: none;
}
.article-back:hover { background: var(--lime-soft); border-color: var(--accent); }
@media (min-width: 900px) {
  .article-layout { grid-template-columns: 212px minmax(0, 1fr); gap: 26px; }
}

/* The appearance control belongs in the header, not on top of the article. */
.appearance-controls { position: relative; align-self: center; }
.appearance-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--accent-deep);
  font-size: 13px;
  list-style: none;
  cursor: pointer;
}
.appearance-toggle::-webkit-details-marker { display: none; }
.appearance-toggle:hover, .appearance-controls[open] .appearance-toggle { background: var(--surface-muted); }
.appearance-toggle span { font-size: 17px; line-height: 1; }
.appearance-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 42;
  width: min(280px, calc(100vw - 24px));
  padding: 18px;
  background: #fffcf6;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
  color: var(--ink);
  line-height: 1.55;
}
.appearance-panel label { display: block; font-size: 13px; font-weight: 600; }
.appearance-control-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.appearance-panel .appearance-range {
  flex: 1;
  width: auto;
  height: 24px;
  margin: 0;
  writing-mode: horizontal-tb;
  direction: ltr;
  accent-color: var(--accent);
}
.appearance-value { min-width: 38px; text-align: right; font: 12px/1.4 ui-monospace, Consolas, monospace; }
.appearance-panel p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.appearance-reset { border: 0; padding: 7px 0; background: none; color: var(--accent-deep); font-size: 12px; }
.appearance-reset:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Footer is a small supporting line; the player is a separate persistent viewport tool. */
.site-footer { padding: 9px 0; }
.footer-inner { max-width: none; min-height: 34px; gap: 18px; padding-left: 104px; }
.footer-brand-name { margin-bottom: 0; }
.footer-brand-name img { width: 20px; height: 20px; }
.footer-brand .brand-quote--footer p { font-size: 10px; line-height: 1.2; }
.footer-note { margin: 0; gap: 4px 16px; }
body > .music-player {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
}
.music-load { background: #fffcf6; box-shadow: 0 3px 16px rgba(36, 47, 22, 0.14); }
body > .music-player .music-body {
  left: 0;
  right: auto;
  bottom: calc(100% + 10px);
  width: min(308px, calc(100vw - 32px));
  max-height: min(70vh, 425px);
}
@media (max-width: 899px) {
  .article-main { max-width: none; }
}
@media (max-width: 700px) {
  .shell { width: calc(100% - 32px); }
  .content-band { padding: 18px 0 32px; }
  .content-main { padding: 18px; }
  .page-main { padding: 22px 0 36px; }
  .post-row, .content-main .post-row, .narrow-shell .post-row { padding: 18px 0; }
  .footer-inner { display: flex; flex-wrap: wrap; gap: 2px 16px; }
  .footer-note { margin: 0; justify-content: flex-start; }
}
@media (max-width: 620px) {
  .header-inner { min-height: 78px; }
  .appearance-toggle { padding: 4px 6px; font-size: 12px; }
  /* Narrow screens: anchor the panel to the header, not the toggle.
     Anchoring to the toggle pushed the panel off the left edge (e.g. left:-48px at 320px). */
  .appearance-controls { position: static; }
  .appearance-panel { position: absolute; top: calc(100% + 8px); right: 16px; width: min(280px, calc(100vw - 32px)); }
  .footer-inner { display: flex; align-items: center; padding-left: 80px; }
  .footer-brand-name strong { font-size: 13px; }
  .footer-note { font-size: 11px; }
  .footer-note span { display: none; }
  body > .music-player { left: max(12px, env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0; }
  body > .music-player .music-body {
    position: absolute;
    left: 0;
    right: auto;
    bottom: calc(100% + 10px);
    width: min(308px, calc(100vw - 24px));
    max-height: min(65vh, 400px);
  }
}
@media (forced-colors: active) {
  .appearance-panel, .music-load, .article-back { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
}

/* Contextual photography has its own reading rhythm; technical screenshots remain unaltered. */
.article-photo { margin: 28px 0 34px; }
.article-photo .article-media-link { border-radius: 10px; background: var(--surface-muted); }
.article-photo img { width: 100%; height: auto; max-height: 340px; object-fit: cover; }
.article-photo figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; }
.article-photo figcaption a { text-decoration-color: var(--border-strong); }