/* ==========================================================================
   时间轴档案风 · 版式（预览版，只作用于 .preview/timeline）
   --------------------------------------------------------------------------
   结构：刊头 → 索引行（纯文字，不是药丸） → 竖轴时间线（年 / 月 / 条目）
   条目三种形态：文字条目、图片条目（图注体）、引文条目
   ========================================================================== */

/* ---------- 全局：去掉极光背景，换成纸 / 墨 ---------- */
.aurora,
.grain {
  display: none !important;
}

/* 5.2 纸纹与冷调底：body 上直接铺噪点 + 极淡渐变（用 background-blend-mode 混合，省一层 element） */
body {
  background-color: var(--bg);
  background-image: url("/assets/img/noise.png"), linear-gradient(180deg, #f8f7f4 0%, #f2f0ec 58%, #f4f2ee 100%);
  background-size: 96px 96px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-attachment: scroll, scroll;
  background-blend-mode: overlay, normal;
  font-family: var(--font-sans);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] body {
  background-image: url("/assets/img/noise.png"), linear-gradient(180deg, #131922 0%, #0f1216 52%, #12171d 100%);
  background-blend-mode: overlay, normal;
}

/* 5.7 选中文字、滚动条、下划线：细节三件套 */
::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--text);
}

html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 26%, transparent) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 22%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text) 38%, transparent);
  background-clip: content-box;
}

.entry__text a,
.arc-post__body a,
.arc-author__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* 5.3 线条体系：2px 主分隔 / 1px 次级 / 1px 虚线，全站统一用 --rule-* */
:root {
  --rule: color-mix(in srgb, var(--text) 14%, transparent);
  --rule-soft: color-mix(in srgb, var(--text) 8%, transparent);
  --edge: color-mix(in srgb, var(--text) 10%, transparent);
}

.entry + .entry {
  border-top: 1px solid var(--rule-soft);
}

.entry__figure img,
.entry__cell,
.arc-author,
.arc-masthead__cover,
.card,
.panel {
  border-color: var(--edge);
}

.entry__figure img,
.entry__cell {
  border: 1px solid var(--edge);
}

.arc-author {
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

/* 5.5 共享元素过渡（点图片 → 飞入大图位） */
::view-transition-old(vt-photo),
::view-transition-new(vt-photo) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(vt-photo),
  ::view-transition-new(vt-photo),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ---------- 顶栏：细线 + 文字导航 ---------- */
.site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  height: var(--header-h);
  gap: var(--space-5);
}

.brand {
  gap: 10px;
}

.brand__mark {
  width: 26px;
  height: 26px;
  border-radius: 2px;
  background: var(--accent) !important;
  color: var(--text-invert);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  box-shadow: none !important;
}

.brand__text {
  gap: 1px;
}

.brand__title {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.brand__sub {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.nav-links {
  gap: 22px;
}

.nav-link {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--text-2);
  padding: 4px 0;
  border-radius: 0;
  border-bottom: 1px solid transparent;
}

.nav-link:hover {
  color: var(--text);
  background: none;
}

.nav-link.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
  background: none;
}

.header-actions .btn {
  border-radius: 2px;
  background: transparent !important;
  border: 1px solid var(--border-strong);
  color: var(--text) !important;
  letter-spacing: 0.06em;
}

.header-actions .btn:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
}

/* ---------- 页脚：版本记录（colophon） ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-8);
  padding: var(--space-6) 0 var(--space-7);
  font-size: 0.82rem;
  color: var(--text-3);
}

.site-footer .nav-link {
  font-size: 0.8rem;
}

/* ==========================================================================
   刊头（封面带）+ 作者条
   ========================================================================== */

.arc {
  padding-top: var(--space-6);
}

/* 正文两侧留白（窄屏也不贴边） */
.container.arc {
  padding-left: clamp(16px, 4vw, 28px);
  padding-right: clamp(16px, 4vw, 28px);
}

.arc-head {
  margin-bottom: var(--space-5);
}

.arc-masthead {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 2px solid var(--text);
}

/* ---- 有封面时：照片 + 墨色渐变，文字强制浅色（两张主题下都成立）---- */
.arc-masthead--cover {
  padding: var(--space-6);
  border-radius: 2px;
  border-bottom: 0;
  margin-bottom: 0;
  /* 给封面留出"照片"的高度，否则只看到一条黑边 */
  min-height: clamp(230px, 24vw, 330px);
  display: flex;
  flex-direction: column;
}

.arc-masthead--cover .arc-masthead__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: var(--space-5);
}

.arc-masthead__cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 42%;
  filter: saturate(0.72) contrast(1.02);
  transform: scale(1.02);
}

.arc-masthead--cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(178deg, rgba(12, 14, 18, 0.55) 0%, rgba(12, 14, 18, 0.72) 58%, rgba(12, 14, 18, 0.88) 100%);
}

.arc-masthead__inner {
  position: relative;
  z-index: 1;
}

.arc-masthead--cover .arc-title,
.arc-masthead--cover .arc-issue,
.arc-masthead--cover .arc-stats dd {
  color: #f6f7f9;
}

.arc-masthead--cover .arc-sub {
  color: rgba(246, 247, 249, 0.78);
}

.arc-masthead--cover .arc-rule {
  background: rgba(246, 247, 249, 0.5);
}

.arc-masthead--cover .arc-stats dt {
  color: rgba(246, 247, 249, 0.6);
}

/* ---- 上半：社标 + 大标题 + 期号 ---- */
.arc-masthead__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.arc-seal {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
}

.arc-title {
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 5.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.03em;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.arc-issue {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-3);
  white-space: nowrap;
}

.arc-issue__dot {
  margin: 0 6px;
  color: var(--accent);
}

.arc-rule {
  height: 2px;
  background: var(--text);
  margin: 12px 0 12px;
  opacity: 0.92;
}

.arc-masthead__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.arc-sub {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text-2);
  letter-spacing: 0.04em;
}

.arc-stats {
  display: flex;
  gap: 22px;
  margin: 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.arc-stats dt {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--text-3);
  margin-bottom: 2px;
}

.arc-stats dd {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---- 作者条 ---- */
.arc-author {
  border-bottom: 1px solid var(--border);
}

.arc-author__bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.arc-author__avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--font-serif);
  font-size: 1rem;
}

.arc-author__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arc-author__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.arc-author__name {
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: 0.02em;
}

.arc-author__sub {
  font-size: 0.76rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arc-author__chip {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 2px;
  padding: 3px 7px;
  white-space: nowrap;
}

.arc-author__caret {
  flex: none;
  color: var(--text-3);
  transition: transform 200ms var(--ease);
}

.arc-author.is-open .arc-author__caret {
  transform: rotate(180deg);
}

.arc-author__panel {
  display: none;
  padding: 2px 2px var(--space-5);
  max-width: 62ch;
}

.arc-author.is-open .arc-author__panel {
  display: block;
}

.arc-author__bio {
  margin: 0 0 14px;
  font-size: 0.94rem;
  line-height: 1.9;
  color: var(--text-2);
}

.arc-author__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}

.arc-author__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}

.arc-author__link,
.arc-author__more {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}

.arc-author__link:hover,
.arc-author__more:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ==========================================================================
   索引行（取代药丸筛选条）
   ========================================================================== */

.arc-index {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.arc-index__group {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.arc-index__label {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--font-mono);
}

.arc-index__opt {
  background: none;
  border: none;
  padding: 2px 0;
  color: var(--text-2);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.arc-index__opt:hover {
  color: var(--text);
}

.arc-index__opt.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.arc-index__opt .arc-index__count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-3);
  margin-left: 3px;
}

.arc-index__search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  border-bottom: 1px solid var(--border);
}

.arc-index__search input {
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  padding: 4px 0;
  width: 100%;
  outline: none;
}

.arc-index__search input::placeholder {
  color: var(--text-3);
}

.arc-index__search svg {
  color: var(--text-3);
  flex: none;
}

/* ==========================================================================
   时间轴
   ========================================================================== */

.arc-rail {
  margin-top: var(--space-6);
}

/* 年份条 */
.arc-year {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: var(--space-6) 0 var(--space-4);
}

.arc-year:first-child {
  margin-top: 0;
}

.arc-year__num {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.arc-year__line {
  flex: 1;
  height: 1px;
  /* 让每套配色在第一屏就能被认出来 */
  background: var(--accent);
  opacity: 0.5;
}

.arc-year__count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* 月份标签 */
.arc-month {
  margin-bottom: var(--space-5);
}

.arc-month__label {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  color: var(--text-2);
  margin: 0 0 6px;
  padding-left: 96px;
}


/* ---------- 单条 ---------- */
.entry {
  display: grid;
  grid-template-columns: 66px 1px 1fr;
  column-gap: 28px;
  padding: 22px 0;
  position: relative;
}

.entry + .entry {
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.entry__gutter {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}

.entry__day {
  display: block;
  color: var(--text-2);
  font-size: 0.86rem;
}

.entry__weekday {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  margin-top: 2px;
}

.entry__mood {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  /* 档案风里心情不再用高饱和色，统一压成墨色，只留 emoji 带一点颜色 */
  color: var(--text-3) !important;
}

.entry__rail {
  position: relative;
  background: var(--border);
}

.entry__rail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
}

.entry--photo .entry__rail::after {
  background: var(--accent);
  border-color: var(--accent);
}

.entry__body {
  min-width: 0;
  max-width: 62ch;
}

/* 图片条目：让图占满可用宽度（文字条目仍保持 62ch 的阅读宽度） */
.entry--photo .entry__body {
  max-width: 100%;
}

.entry__text {
  margin: 0;
  font-size: 1.02rem;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.entry--quote .entry__text {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  line-height: 1.9;
  color: var(--text);
  padding-left: 18px;
  border-left: 2px solid var(--accent);
}

/* 图片条目：图注体 + 出血 */
.entry__figure {
  margin: 16px 0 0;
}

.entry__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 620px;
  object-fit: contain;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  cursor: zoom-in;
}

.entry__caption {
  margin-top: 9px;
  font-size: 0.8rem;
  color: var(--text-3);
  font-style: italic;
  letter-spacing: 0.02em;
}

.entry__caption::before {
  content: "图 · ";
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.entry__figure--wide {
  margin-right: calc(-1 * clamp(0px, 4vw, 48px));
}

/* 竖构图不要塞满整行，缩到一栏宽度更像相册贴图 */
.entry__figure--portrait {
  max-width: 460px;
}

/* ---------- 图版（2 张以上）：等大正方形 + 细缝 ---------- */
.entry__sheet {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  grid-template-columns: repeat(3, 1fr);
}

.entry__sheet[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.entry__sheet[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 861px) {
  .entry__sheet[data-count="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

.entry__cell {
  position: relative;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 1;
}

.entry__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}

.entry__cell:hover img {
  transform: scale(1.03);
}

.entry__cell-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(12, 14, 18, 0.28);
}

.entry__cell-time,
.entry__cell-more {
  position: absolute;
  right: 6px;
  bottom: 5px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(12, 14, 18, 0.62);
  border-radius: 2px;
  padding: 1px 5px;
}

.entry__cell-more {
  left: 6px;
  right: auto;
}

/* 图版下面的图注列表 */
.entry__plates {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.entry__plate {
  display: flex;
  gap: 10px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

.entry__plate-no {
  flex: none;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 2px;
}

/* 标签 */
.entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.entry__tag {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
  cursor: pointer;
}

.entry__tag:hover {
  color: var(--accent);
}

/* 条目页脚：文字化操作 */
.entry__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-transform: uppercase;
}

.entry__act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.entry__act:hover {
  color: var(--accent);
}

.entry__act.is-liked {
  color: var(--accent);
}

.entry__pinned {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.entry__admin {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.entry__admin .btn {
  border: 1px solid var(--border);
  border-radius: 2px;
  background: none !important;
  color: var(--text-3) !important;
  box-shadow: none !important;
}

.entry__admin .btn:hover {
  color: var(--accent) !important;
  border-color: var(--accent);
}

/* ---------- 空状态 / 加载 ---------- */
.arc-empty {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--text-3);
  font-family: var(--font-serif);
  letter-spacing: 0.06em;
}

.arc-more {
  display: flex;
  justify-content: center;
  padding: var(--space-6) 0 var(--space-7);
}

.arc-more .btn {
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: none !important;
  color: var(--text) !important;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  padding: 10px 26px;
  box-shadow: none !important;
}

.arc-more .btn:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
}

.arc-end {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--text-3);
  padding: var(--space-6) 0 var(--space-7);
}

.arc-skeleton {
  height: 1px;
  background: var(--border);
  margin: 26px 0;
  opacity: 0.6;
}

/* ---------- 进场动效（沿用 observeReveal 的 .reveal/.is-in） ----------
   注意：默认必须是「可见」的 —— 否则截图 / 滚动未及时触发时会出现大片空白。
   所以这里不用 opacity:0 的静态隐藏，而是靠动画在 .is-in 时补一段轻微上浮。 */
@keyframes arc-rise {
  from {
    opacity: 0.35;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 必须显式覆盖 base.css 里的 .reveal{opacity:0}：
   否则没触发到滚动动效的条目（比如整页截图时）会整条隐形 */
.entry.reveal,
.entry.reveal.is-in {
  opacity: 1;
  transform: none;
}

.entry.reveal.is-in {
  animation: arc-rise 560ms var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .entry.reveal.is-in {
    animation: none;
  }
}

/* ---------- 悬浮发布按钮：改成方形小按钮 ---------- */
.fab {
  border-radius: 2px !important;
  background: var(--accent) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   详情页：短文式排版
   ========================================================================== */

.arc-post {
  padding-top: var(--space-7);
  max-width: 720px;
  margin: 0 auto;
}

.arc-post__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.arc-post__sep {
  color: var(--accent);
}

.arc-post__body {
  font-size: 1.08rem;
  line-height: 1.95;
  margin-top: var(--space-5);
  white-space: pre-wrap;
  font-family: var(--font-sans);
}

.arc-post .detail__media {
  margin-top: var(--space-5);
  display: grid;
  gap: 18px;
}

.arc-post .detail__media .media-item {
  border-radius: 2px;
  overflow: hidden;
}

.arc-post .card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.arc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-5);
}

.arc-back:hover {
  color: var(--accent);
}

/* ==========================================================================
   滚动效果（时间轴专属）
   ========================================================================== */

/* 1) 阅读进度细线（顶栏下缘） */
.arc-progress {
  position: fixed;
  top: var(--header-h);
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  opacity: 0.85;
  z-index: 60;
  pointer-events: none;
}

/* 2) 吸顶刻度条：年份 + 月份刻度尺 + 阅读百分比 */
.arc-sticky {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--text-3);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

.arc-sticky.is-on {
  opacity: 1;
  transform: none;
}

.arc-sticky__year {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.arc-sticky__month {
  color: var(--text-2);
  min-width: 3.2em;
}

.arc-sticky__pct {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 3em;
  text-align: right;
}

.arc-ruler {
  position: relative;
  flex: 0 1 340px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 12px;
  padding-bottom: 3px;
}

.arc-ruler::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--rule);
}

.arc-ruler__tick {
  width: 1px;
  height: 7px;
  background: var(--rule);
  transition: background 200ms var(--ease), height 200ms var(--ease);
}

.arc-ruler__tick.is-past {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

.arc-ruler__tick.is-now {
  height: 12px;
  background: var(--accent);
}

/* 3) 轴线生长：整条竖轴按阅读进度由淡线变成强调色 */
.arc-rail {
  position: relative;
}

.arc-rail::before {
  content: "";
  position: absolute;
  left: 94px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  pointer-events: none;
  z-index: 1;
}

/* 已读的那一段：实心强调色 + 一点点辉光，让"读到哪里"看得出来 */
.arc-rail::after {
  content: "";
  position: absolute;
  left: 94px;
  top: 0;
  width: 1px;
  height: var(--read, 0%);
  background: var(--accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 55%, transparent);
  pointer-events: none;
  z-index: 2;
}

/* 4) 日期水槽吸附：右侧内容滚动，左侧日期停在视野里 */
.entry__gutter {
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 76px);
}

/* 5) 圆点：正在读的那条变大点亮，读过的变成描边 */
.entry__rail::after {
  transition: transform 260ms var(--ease), background 260ms var(--ease), border-color 260ms var(--ease);
}

.entry.is-active .entry__rail::after {
  transform: scale(1.6);
  background: var(--accent);
  border-color: var(--accent);
}

.entry.is-past .entry__rail::after {
  background: var(--bg);
  border-color: var(--accent);
}

/* 6) 年份快捷跳转 */
.arc-years {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.arc-years.is-empty {
  display: none;
}

.arc-years__item {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--text-3);
  writing-mode: vertical-rl;
}

.arc-years__item:hover {
  color: var(--text);
}

.arc-years__item.is-active {
  color: var(--accent);
}

.arc-year-block {
  scroll-margin-top: calc(var(--header-h) + 72px);
}

/* ==========================================================================
   老组件（后台表单等）在新配色下的对比度补偿
   —— 排版没改，只是把太淡的描边/占位文字调回来
   ========================================================================== */

.input,
.textarea,
.select {
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  color: var(--text);
}

.input::placeholder,
.textarea::placeholder {
  color: color-mix(in srgb, var(--text-3) 115%, transparent);
}

.composer__drop {
  border-color: color-mix(in srgb, var(--text) 26%, transparent);
  background: var(--surface);
  color: var(--text-2);
}

.composer__textarea::placeholder {
  color: var(--text-3);
}

.card,
.panel {
  border-radius: var(--radius);
}

.btn--primary {
  color: var(--text-invert);
}

/* ==========================================================================
   索引行：桌面端是"一行铺开"，手机端折进"筛选"里
   ========================================================================== */

.arc-index__bar,
.arc-index__more {
  display: contents;
}

.arc-index__toggle {
  display: none;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  font-size: 0.84rem;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.arc-index__toggle.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.arc-index__badge {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.3;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0 3px;
}

.arc-index__caret {
  display: inline-block;
  transition: transform 200ms var(--ease);
}

.arc-index.is-open .arc-index__caret {
  transform: rotate(180deg);
}

/* ==========================================================================
   灯箱：档案风（去掉模糊与大圆角，改成"看片台"）
   ========================================================================== */

.lightbox {
  /* 看片台：底色做实，避免任何页面内容透出来 */
  background: #0a0b0d;
  backdrop-filter: none;
  animation: fade-in 200ms var(--ease);
}

.lightbox__top {
  padding: 13px clamp(16px, 4vw, 28px);
  border-bottom: 1px solid rgba(246, 247, 249, 0.14);
  color: rgba(246, 247, 249, 0.72);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
}

.lightbox__top .btn {
  width: 34px;
  height: 34px;
  border-radius: 2px;
  border: 1px solid rgba(246, 247, 249, 0.22);
  background: none !important;
  color: rgba(246, 247, 249, 0.86) !important;
  box-shadow: none !important;
}

.lightbox__top .btn:hover {
  border-color: var(--accent);
  color: #fff !important;
}

.lightbox__stage img,
.lightbox__stage video {
  border-radius: 2px;
  border: 1px solid rgba(246, 247, 249, 0.16);
  box-shadow: 0 40px 90px -52px rgba(0, 0, 0, 0.92);
}

.lightbox__nav {
  width: 42px;
  height: 42px;
  border-radius: 2px;
  background: rgba(246, 247, 249, 0.07);
  border: 1px solid rgba(246, 247, 249, 0.2);
  color: rgba(246, 247, 249, 0.9);
}

.lightbox__nav:hover {
  background: rgba(246, 247, 249, 0.15);
  border-color: var(--accent);
}

.lightbox__nav--prev {
  left: 16px;
}

.lightbox__nav--next {
  right: 16px;
}

.lightbox__bottom {
  padding: 14px clamp(16px, 4vw, 28px) calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(246, 247, 249, 0.14);
  gap: 12px;
  color: rgba(246, 247, 249, 0.7);
}

.lightbox__caption {
  max-width: 46ch;
  font-size: 0.86rem;
  line-height: 1.85;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(246, 247, 249, 0.66);
}

.lightbox__thumbs {
  gap: 6px;
}

.lightbox__thumb {
  width: 46px;
  height: 46px;
  border-radius: 2px;
  border: 1px solid rgba(246, 247, 249, 0.22);
  opacity: 0.5;
}

.lightbox__thumb.is-active {
  border-color: var(--accent);
  opacity: 1;
}

/* ==========================================================================
   5.8 页脚版权页（colophon）
   ========================================================================== */

.site-footer {
  /* components.css 把页脚做成了 flex（老版"左文案 + 右链接"），
     这里恢复块级，否则 .container 被当成 flex item 收缩，版权页排不开 */
  display: block;
  border-top: 2px solid var(--text);
  margin-top: var(--space-8);
  padding: var(--space-6) 0 var(--space-6);
  background: none;
}

.site-footer .container {
  display: block;
}

.colophon {
  display: grid;
  grid-template-columns: 1.6fr 1.3fr 0.8fr auto;
  gap: var(--space-7);
  align-items: start;
}

.colophon__val,
.colophon__link {
  white-space: nowrap;
}

.colophon__name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 6px;
}

.colophon__line {
  font-size: 0.84rem;
  color: var(--text-2);
  max-width: 30ch;
}

.colophon__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

.colophon__val {
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
}

.colophon__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.colophon__link,
.colophon__btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text-2);
  font: inherit;
  font-size: 0.84rem;
  font-family: var(--font-sans);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}

.colophon__link:hover,
.colophon__btn:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.colophon__col--end {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.colophon__top {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--text-3);
  border: 1px solid var(--edge);
  border-radius: 2px;
  padding: 5px 10px;
  background: none;
  cursor: pointer;
}

.colophon__top:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.colophon__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

@media (max-width: 860px) {
  .colophon {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }

  .colophon__col--end {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .colophon__foot {
    flex-direction: column;
    gap: 6px;
  }
}

/* ==========================================================================
   窄屏
   ========================================================================== */

@media (max-width: 860px) {
  /* ---------- 刊头：封面带 + 一行统计 ---------- */
  .arc {
    padding-top: var(--space-5);
  }

  .arc-masthead {
    padding: var(--space-5) 0 var(--space-4);
  }

  .arc-masthead--cover {
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-radius: 0;
    min-height: clamp(180px, 46vw, 250px);
    /* 封面版在手机上做成"通栏"，两侧不留缝 */
    margin-left: calc(-1 * clamp(16px, 4vw, 28px));
    margin-right: calc(-1 * clamp(16px, 4vw, 28px));
  }

  .arc-masthead--cover .arc-masthead__inner {
    gap: var(--space-4);
  }

  .arc-masthead__top {
    gap: 10px;
    flex-wrap: wrap;
  }

  .arc-seal {
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
  }

  .arc-title {
    font-size: clamp(2rem, 10.5vw, 2.7rem);
  }

  .arc-issue {
    margin-left: 0;
    flex-basis: 100%;
    order: 3;
    font-size: 0.64rem;
  }

  .arc-rule {
    margin: 10px 0;
  }

  .arc-masthead__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .arc-sub {
    font-size: 0.88rem;
  }

  .arc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    text-align: left;
    font-size: 0.62rem;
  }

  .arc-stats > div {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
  }

  .arc-stats > div + div::before {
    content: "·";
    color: var(--text-3);
    margin-right: 4px;
  }

  .arc-stats dt {
    font-size: 0.56rem;
    margin: 0;
  }

  .arc-stats dd {
    font-size: 0.8rem;
  }

  /* ---------- 作者条 ---------- */
  .arc-author__bar {
    padding: 11px 2px;
    gap: 10px;
  }

  .arc-author__chip {
    font-size: 0.63rem;
    padding: 2px 6px;
  }

  .arc-author__panel {
    padding-bottom: var(--space-4);
  }

  /* ---------- 图版：手机上两列 ---------- */
  .entry__sheet,
  .entry__sheet[data-count="2"],
  .entry__sheet[data-count="4"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .entry__sheet[data-count="3"] .entry__cell:first-child {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }

  /* ---------- 索引行折叠 ---------- */
  .arc-index {
    display: block;
    padding: var(--space-4) 0 var(--space-5);
    font-size: 0.86rem;
  }

  .arc-index__bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .arc-index__bar .arc-index__label {
    display: none;
  }

  .arc-index__group--type {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
  }

  .arc-index__toggle {
    display: inline-flex;
    flex: none;
  }

  .arc-index__more {
    display: none;
    flex-direction: column;
    gap: 14px;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }

  .arc-index.is-open .arc-index__more {
    display: flex;
  }

  .arc-index__search {
    margin-left: 0;
    width: 100%;
    min-width: 0;
  }

  /* ---------- 留白与字号：把"挤"松开 ---------- */
  body {
    line-height: 1.95;
  }

  .arc-rail {
    margin-top: var(--space-7);
  }

  .arc-year {
    margin: var(--space-7) 0 var(--space-4);
  }

  .arc-year:first-child {
    margin-top: 0;
  }

  .arc-month {
    margin-bottom: var(--space-6);
  }

  .arc-month__label {
    padding-left: 0;
    margin-bottom: 10px;
  }

  .entry {
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: 30px 0;
  }

  .entry__text {
    font-size: 1.08rem;
    line-height: 1.95;
  }

  .entry__figure {
    margin-top: 18px;
  }

  .entry__caption {
    margin-top: 12px;
    font-size: 0.82rem;
  }

  .entry__tags {
    margin-top: 16px;
    gap: 14px;
  }

  .entry__foot {
    margin-top: 18px;
    gap: 20px;
  }

  .entry__rail {
    display: none;
  }

  /* 手机上没有竖轴了，把"轴线生长"那层也一起关掉 */
  .arc-rail::before,
  .arc-rail::after {
    display: none;
  }

  /* 刻度尺手机放不下：只留 年份 · 月份 · 百分比 */
  .arc-ruler {
    display: none;
  }

  .arc-sticky {
    gap: 10px;
  }

  .entry__gutter {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-align: left;
    padding: 0;
    font-size: 0.76rem;
  }

  .entry__day {
    font-size: 0.9rem;
  }

  .entry__day,
  .entry__weekday,
  .entry__mood {
    display: inline;
    margin: 0;
  }

  .entry__weekday {
    color: var(--text-3);
  }

  .entry__mood::before {
    content: "· ";
    color: var(--text-3);
  }

  .entry__figure--wide {
    margin-right: -16px;
  }

  /* ---------- 底部：避让手机底部横条 ---------- */
  .arc-more,
  .arc-end {
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  }

  .fab {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 窄屏关掉会晃眼的滚动特效，只留淡入 */
  .arc-rail::before {
    display: none;
  }

  .arc-years {
    display: none;
  }

  .entry__gutter {
    position: static;
  }

  .entry__body {
    max-width: none;
  }
}