/* ============================================================
   复合版式层（P0）
   只放「版式语法」：12 列网格 / band / 章节头 / 刊头 / 目录条 / 错版墙。
   颜色与字体仍以 styles.css 的 token 为准，本文件不重新定义主色。
   ============================================================ */

:root {
  --accent-ink: #9d4630;   /* 正文级砖红：纸底对比 5.66:1（--accent 只给 ≥21px 与大色块） */
  --fs-lead: 18px;         /* 副标、导语加强 */
  --fs-quote: 24px;        /* 统计数字、年份（宋体） */
  --fs-h1: clamp(40px, 5.2vw, 64px);
  --fs-h2: 30px;           /* 子页/章节大标题 */
  --gutter: 20px;
}

html { overflow-x: clip; }

/* 纸纹层压到内容之上、灯箱之下（原来 9999 会在大图上蒙一层颗粒） */
body::after { z-index: 1; }
.lightbox { z-index: 1000; }

/* 跳到主内容：只在键盘聚焦时出现 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--card); border: 1px solid var(--line);
  padding: 10px 16px; font-size: var(--fs-base);
}
.skip:focus { left: 8px; top: 8px; }

/* 导航：视觉不变，可点区域抬到 44px 以上 */
.nav__links { gap: 12px; align-items: center; }
.nav__links a { display: inline-block; padding: 11px 4px; }

/* ---------- 12 列网格 ---------- */
.sheet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.c-4, .c-5, .c-6, .c-7, .c-8, .c-12 { min-width: 0; }
.c-4 { grid-column: span 4; }
.c-5 { grid-column: span 5; }
.c-6 { grid-column: span 6; }
.c-7 { grid-column: span 7; }
.c-8 { grid-column: span 8; }
.c-12 { grid-column: 1 / -1; }

/* ---------- 段落（band） ---------- */
.band { padding: var(--space-16) 0; }
.band--tight { padding: var(--space-10) 0; }
.band--soft { background: var(--bg-soft); }
/* 满版：底色与地图铺到视口边缘，正文仍留在 1180 容器内 */
.band--bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.band__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* 同底色相邻段落之间用细线分开；换了底色就不再画线，避免双信号打架 */
.band + .band:not(.band--soft) { border-top: 1px solid var(--line); }
.band--soft + .band { border-top: 0; }

/* ---------- 章节头（替代四处复制的 .section__title） ---------- */
.head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end;
  gap: var(--space-2) var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line); margin-bottom: var(--space-8);
}
.head__no {
  font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--accent);
  margin: 0; line-height: 1; letter-spacing: .04em;
}
.head__title { font-size: var(--fs-h2); margin: 0; line-height: 1.2; }
.head__sub { grid-column: 2; margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.head__more {
  grid-column: 3; grid-row: 1 / span 2; align-self: end;
  font-size: var(--fs-sm); color: var(--muted); text-align: right; white-space: nowrap;
}
.head__more a { color: var(--accent); }

/* ---------- 眉标 ---------- */
.kicker { margin: 0 0 var(--space-4); font-size: var(--fs-xs); letter-spacing: .18em; color: var(--muted); }

/* ---------- 刊头：文字 1–6 列，相纸 8–12 列 ---------- */
.masthead {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter);
  align-content: center; min-height: clamp(560px, 74svh, 720px);
  padding: var(--space-12) 0 var(--space-10);
}
.masthead__lede { grid-column: 1 / span 6; }
.masthead__plates { grid-column: 8 / span 5; position: relative; padding-bottom: 56px; min-height: 380px; }
.masthead__name { font-size: var(--fs-h1); line-height: 1.14; letter-spacing: .02em; margin: 0 0 var(--space-4); }
.masthead__rule { width: 44px; height: 2px; background: var(--accent); margin: 0 0 var(--space-4); }
.masthead__tag { font-size: var(--fs-lead); letter-spacing: .12em; color: var(--accent-ink); margin: 0 0 var(--space-5); }
.masthead__desc { max-width: 34ch; color: var(--ink-2); font-size: var(--fs-md); margin: 0 0 var(--space-6); }
.masthead__stats { margin: 0 0 var(--space-6); font-size: var(--fs-sm); color: var(--muted); }
.masthead__stats b {
  font-family: var(--font-serif); font-size: var(--fs-quote); color: var(--text);
  font-weight: 600; margin-right: 2px;
}
.masthead__stats .stat-dot { margin: 0 10px; color: var(--rule-strong); }
.masthead__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.masthead__meta {
  grid-column: 1 / -1; margin: var(--space-8) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--line); font-size: var(--fs-xs);
  color: var(--muted); letter-spacing: .04em;
}

/* 相纸：白边只有这一种规格（7px / 1px line / 2px radius） */
.plate {
  background: #fffefb; border: 1px solid var(--line); border-radius: 2px;
  padding: 7px 7px 0; box-shadow: 0 1px 2px rgba(43, 38, 32, .07); margin: 0;
  transition: transform .25s ease;
}
.plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate--main { width: 76%; aspect-ratio: 4 / 5; margin-left: 24%; transform: rotate(1.2deg); }
.plate--sub { width: 46%; aspect-ratio: 3 / 4; position: absolute; left: 0; bottom: 0; transform: rotate(-2.4deg); }
.plate--stamp { width: 30%; aspect-ratio: 1 / 1; position: absolute; right: 4%; bottom: 12%; transform: rotate(2.8deg); }
.plate--main:hover { transform: rotate(0deg) scale(1.01); }
.coord {
  position: absolute; left: 12px; bottom: 10px; font-size: var(--fs-xs);
  background: rgba(247, 243, 234, .88); border: 1px solid var(--line); border-radius: 2px;
  padding: 1px 6px; color: var(--ink-2); letter-spacing: .04em;
}

/* 没有照片时：刊头变单列，但不塌 */
.masthead--bare { grid-template-columns: 1fr; }
.masthead--bare .masthead__lede { grid-column: 1 / -1; max-width: 620px; }
.masthead--bare .masthead__plates { display: none; }
.masthead--bare .masthead__name { font-size: clamp(40px, 7vw, 72px); }

/* ---------- 目录条 ---------- */
.toc {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100vw; margin-inline: calc(50% - 50vw);
  background: var(--bg-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.toc__cell {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
  align-items: center; gap: 2px var(--space-3);
  min-height: 104px; padding: var(--space-5) var(--space-6);
  border-left: 1px solid var(--line); color: var(--text);
}
.toc__cell:first-child { border-left: 0; }
.toc__cell:hover { background: rgba(255, 255, 255, .45); text-decoration: none; }
.toc__no { grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--accent); align-self: center; }
.toc__name { grid-column: 2; grid-row: 1; font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; }
.toc__desc { grid-column: 2; grid-row: 2; font-size: var(--fs-xs); color: var(--muted); }
.toc__arrow { grid-column: 3; grid-row: 1 / span 2; color: var(--accent); }

/* ---------- 最近旅程：7 / 5 跨列 ---------- */
.feature {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8);
  align-items: start; margin-bottom: var(--space-12);
}
.feature__cover { margin: 0; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--bg-soft); }
.feature__cover img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature__body { padding-top: var(--space-2); }
.feature__title { font-size: var(--fs-2xl); margin: 0 0 var(--space-2); line-height: 1.3; }
.feature__meta { margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--muted); }
.feature__summary { margin: 0 0 var(--space-4); color: var(--ink-2); font-size: var(--fs-md); }
.feature__mini { display: flex; gap: var(--space-2); }
.feature__mini img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; }

/* ---------- 旅程索引：从「卡片流」改成「报纸栏目」 ---------- */
.trip-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
.card--flat { padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.card--flat__title { font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
.card--flat__meta { margin: 0 0 var(--space-2); font-size: var(--fs-xs); color: var(--muted); }
.card--flat__summary { margin: 0; font-size: var(--fs-base); color: var(--ink-2); }

/* ---------- 胶片条 ---------- */
.strip {
  display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3); margin-bottom: var(--space-8); scrollbar-width: thin;
}
.strip__item {
  flex: 0 0 220px; height: 160px; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 2px; background: var(--bg-soft);
  cursor: pointer; scroll-snap-align: start;
}
.strip__item img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 错版墙：4/4/4 · 6/3/3 · 3/6/3 · 4/4/4 ----------
   同一屏只允许一种相纸：只有 [6] 那几张保留白边，其余是裸图。 */
.wall.wall--mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); }
.wall--mosaic .wall__item {
  grid-column: span 4; margin: 0; padding: 0; background: none;
  border: 0; box-shadow: none;
}
.wall--mosaic .wall__item:nth-child(12n+4),
.wall--mosaic .wall__item:nth-child(12n+8) {
  grid-column: span 6; background: #fffefb; border: 1px solid var(--line); padding: 7px 7px 0;
}
.wall--mosaic .wall__item img { aspect-ratio: 4 / 3; }
.wall--mosaic .wall__item:nth-child(12n+4) img,
.wall--mosaic .wall__item:nth-child(12n+8) img { aspect-ratio: 16 / 10; }
.wall--mosaic figcaption { font-size: var(--fs-xs); }

/* ---------- 笔记行 ---------- */
.note-list { list-style: none; margin: 0; padding: 0; }
.note-row {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4);
  padding: var(--space-4) 0; border-top: 1px solid var(--line);
}
.note-row:first-child { border-top: 0; }
.note-row__date { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .06em; padding-top: 3px; }
.note-row__link { display: block; color: var(--text); }
.note-row__link:hover { text-decoration: none; }
.note-row__title { display: block; font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-lg); }
.note-row__link:hover .note-row__title { color: var(--accent); }
.note-row__desc { display: block; font-size: var(--fs-base); color: var(--muted); }

/* ---------- 版权页：全站唯一深色区，用来「合上书」 ---------- */
.colophon { background: var(--text); color: #f0ead9; padding: var(--space-12) 0; }
.colophon__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); }
.colophon a { color: #f0ead9; text-decoration: underline; text-underline-offset: 3px; }
.colophon__brand { font-family: var(--font-serif); font-size: var(--fs-xl); margin: 0 0 var(--space-2); }
.colophon__head { margin: 0 0 var(--space-2); font-size: var(--fs-xs); letter-spacing: .16em; color: #b9ad97; }
.colophon__line { margin: 0; font-size: var(--fs-sm); color: #d9cfba; line-height: 1.9; }

/* ---------- 响应式 ---------- */
@media (max-width: 1279px) {
  .page--wide { --maxw: 1100px; }
}
@media (max-width: 1023px) {
  .masthead { min-height: auto; padding: var(--space-10) 0 var(--space-8); }
  .masthead__lede, .masthead__plates { grid-column: 1 / -1; }
  .masthead__plates { min-height: 300px; max-width: 520px; margin-top: var(--space-8); }
  .masthead__desc { max-width: none; }
  .toc__cell { padding: var(--space-4); }
  .feature { grid-template-columns: 1fr; gap: var(--space-4); }
  .trip-index { grid-template-columns: 1fr; }
  .colophon__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .masthead__plates { display: none; }
  .masthead__name { font-size: clamp(32px, 10vw, 44px); }
  .toc { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .toc__cell { flex: 0 0 78vw; scroll-snap-align: start; border-left: 1px solid var(--line); }
  .head { grid-template-columns: auto 1fr; }
  .head__more { grid-column: 2; grid-row: auto; text-align: left; }
  .wall--mosaic .wall__item,
  .wall--mosaic .wall__item:nth-child(12n+4),
  .wall--mosaic .wall__item:nth-child(12n+8) { grid-column: span 6; }
  .note-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .colophon__grid { grid-template-columns: 1fr; }
  .strip__item { flex-basis: 160px; height: 120px; }
  .band { padding: var(--space-10) 0; }
  .band__inner { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .plate--main:hover { transform: rotate(1.2deg); }
  .reveal { opacity: 1; transform: none; transition: none; }
}