/* ============================================================
   LIN PEIRU — 林培儒 | 线上展览
   设计系统：纸灰为底、墨黑为骨、朱砂为印、苔绿为息
   交互母题：网页即暗房 —— 影像自黑暗中显影
   ============================================================ */

:root {
  --ink: #14140e;
  --ink-2: #1d1d15;
  --ink-3: #2a2a20;
  --paper: #e7e2d4;
  --paper-2: #d9d3c2;
  --paper-3: #b5ad93;
  --rust: #904a2c;
  --rust-2: #b05a34;
  --moss: #514f32;
  --moss-2: #69704f;
  --sky: #bfcbd8;
  --hair: rgba(20, 20, 14, .22);
  --hair-l: rgba(231, 226, 212, .22);
  --serif: Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Songti SC", "STSong", "SimSun", Georgia, serif;
  --mono: Consolas, "Courier New", monospace;
  --gap: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: var(--paper); }
body {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--rust); color: var(--paper); }

/* ---------- 胶片颗粒层 ---------- */
#grain {
  position: fixed; inset: -100px; z-index: 9990;
  pointer-events: none; opacity: .055; mix-blend-mode: multiply;
}
body.dark-grain #grain { mix-blend-mode: screen; opacity: .07; }

/* ---------- 自定义光标 ---------- */
#cursor {
  position: fixed; top: 0; left: 0; z-index: 9995; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 1px solid var(--rust); border-radius: 50%;
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
              background-color .3s, border-color .3s, opacity .3s;
  mix-blend-mode: difference; opacity: 0;
}
#cursor::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  background: var(--rust); border-radius: 50%;
}
#cursor.on { opacity: 1; }
#cursor.hot { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(144, 74, 44, .12); }
@media (pointer: coarse) { #cursor { display: none; } }

/* ---------- 顶部导航 ---------- */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gap);
  mix-blend-mode: difference; color: #e7e2d4;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
#nav .brand { display: flex; align-items: baseline; gap: 12px; }
#nav .brand b { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .35em; }
#nav .links { display: flex; gap: clamp(12px, 2.4vw, 34px); }
#nav .links a { position: relative; padding: 4px 0; opacity: .78; transition: opacity .3s; }
#nav .links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor; transition: right .45s var(--ease);
}
#nav .links a:hover, #nav .links a.act { opacity: 1; }
#nav .links a:hover::after, #nav .links a.act::after { right: 0; }
@media (max-width: 760px) { #nav .links a:nth-child(4), #nav .links a:nth-child(5) { display: none; } }

/* ---------- 版记计数器 ---------- */
#counter {
  position: fixed; right: var(--gap); bottom: 20px; z-index: 900;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  mix-blend-mode: difference; color: #e7e2d4; opacity: .8;
  pointer-events: none;
}

/* ---------- 通用排版 ---------- */
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--rust);
}
.vtext { writing-mode: vertical-rl; text-orientation: mixed; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; }
.essay { max-width: 62ch; font-size: 15.5px; line-height: 2.05; text-align: justify; }
.essay + .essay { margin-top: 1.4em; }
.essay em { font-style: normal; color: var(--rust); }
.rule { height: 1px; background: var(--hair); border: 0; }

/* 逐字显现 */
.split .ch { display: inline-block; opacity: 0; transform: translateY(.55em); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.split.in .ch { opacity: 1; transform: none; }

/* 显影（暗房母题） */
.dev { filter: saturate(.18) contrast(.94) brightness(.92); transition: filter 1.6s var(--ease); }
.dev.developed { filter: saturate(1) contrast(1) brightness(1); }
figure.plate { position: relative; }
figure.plate figcaption {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--ink); opacity: .62; margin-top: 10px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
figure.plate figcaption .no { color: var(--rust); }

/* ---------- 头图：PL.129《海芋》 ---------- */
#gate {
  position: relative; height: 100svh; background: var(--ink); color: var(--paper);
  overflow: hidden;
}
#gate .hero { position: absolute; inset: 0; animation: herofade 1.6s var(--ease) both; }
@keyframes herofade { from { opacity: 0; } to { opacity: 1; } }
#gate .hero img { width: 100%; height: 100%; object-fit: cover; animation: herobreathe 26s ease-in-out infinite alternate; }
@keyframes herobreathe { from { transform: scale(1); } to { transform: scale(1.07); } }
#gate .veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,6,.66) 0%, rgba(10,10,6,.22) 30%, rgba(10,10,6,0) 52%, rgba(10,10,6,.14) 100%);
}
#gate::after { content: ""; position: absolute; inset: clamp(10px, 2vw, 26px); border: 1px solid rgba(231,226,212,.2); pointer-events: none; }
#gate .herocap { position: absolute; left: var(--gap); bottom: 36px; display: grid; gap: 8px; z-index: 2; animation: capin 1.4s var(--ease) .5s both; }
@keyframes capin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#gate .herocap .k { font-family: var(--sans); font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .3em; }
#gate .herocap .t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .42em; opacity: .85; }
#gate .herocap .m { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; opacity: .58; margin-top: 4px; }
#gate .cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .4em; opacity: .6;
  display: grid; justify-items: center; gap: 10px;
}
#gate .cue .line { width: 1px; height: 48px; background: linear-gradient(var(--paper), transparent); animation: drip 2.6s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
#gate .stamp {
  position: absolute; right: var(--gap); top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-family: var(--mono); font-size: 10px;
  letter-spacing: .34em; opacity: .55;
}
@media (max-width: 760px) { #gate .cue { display: none; } }

/* ---------- 版墙：全部图版全览 ---------- */
#wall { background: var(--ink); color: var(--paper); padding: clamp(60px, 9vh, 120px) 0 clamp(40px, 6vh, 80px); }
#wall .head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--gap) 34px; gap: 24px; flex-wrap: wrap; }
#wall .head h2 { font-size: clamp(26px, 4vw, 52px); letter-spacing: .12em; }
#wall .head p { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; opacity: .6; max-width: 46ch; line-height: 2; }
#wallgrid {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px;
  padding: 0 var(--gap);
}
#wallgrid button {
  position: relative; aspect-ratio: 1; overflow: hidden; padding: 0;
  background: var(--ink-2);
}
#wallgrid button img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.35) brightness(.72);
  transition: filter .8s var(--ease), transform 1.1s var(--ease);
  transform: scale(1.02);
}
#wallgrid button:hover img, #wallgrid button:focus-visible img { filter: none; transform: scale(1.14); }
#wallgrid button .tag {
  position: absolute; inset: auto 4px 3px auto; font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .1em; color: var(--paper); opacity: 0; transition: opacity .4s;
}
#wallgrid button:hover .tag { opacity: .9; }
@media (max-width: 1100px) { #wallgrid { grid-template-columns: repeat(16, 1fr); } }
@media (max-width: 700px)  { #wallgrid { grid-template-columns: repeat(8, 1fr); } }

/* ---------- 系列章节通用 ---------- */
.series { position: relative; padding: clamp(70px, 12vh, 150px) 0 0; }
.series .shead { padding: 0 var(--gap); display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 4vw, 60px); align-items: start; }
.series .sno {
  writing-mode: vertical-rl; font-family: var(--mono); font-size: 11px;
  letter-spacing: .4em; color: var(--rust); padding-top: 6px;
}
.series h2 { font-size: clamp(34px, 6.4vw, 92px); letter-spacing: .06em; }
.series .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .6; margin-top: 14px; }
.series .sbody { margin-top: clamp(28px, 5vh, 64px); }
.series .essaywrap { padding: 0 var(--gap); display: grid; grid-template-columns: minmax(0, 62ch) auto; gap: clamp(20px, 5vw, 80px); align-items: start; }
.series .pull {
  writing-mode: vertical-rl; font-family: var(--serif); font-size: clamp(15px, 1.6vw, 21px);
  letter-spacing: .3em; line-height: 2.4; color: var(--moss); max-height: 46vh;
  border-left: 1px solid var(--hair); padding-left: 22px;
}
@media (max-width: 900px) { .series .essaywrap { grid-template-columns: 1fr; } .series .pull { writing-mode: horizontal-tb; border-left: 0; border-top: 1px solid var(--hair); padding: 18px 0 0; max-height: none; } }
.series.dark { background: var(--ink); color: var(--paper); }
.series.dark .essay em { color: var(--rust-2); }
.series.dark .pull { color: var(--sky); border-color: var(--hair-l); }
.series.dark figure.plate figcaption { color: var(--paper); }

/* --- 展陈方式 A：横向长卷（滚动驱动） --- */
.hwrap { position: relative; }
.hpin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.htrack { display: flex; align-items: center; gap: clamp(24px, 5vw, 90px); padding: 0 var(--gap); will-change: transform; }
.htrack figure.plate { flex: 0 0 auto; }
.htrack figure.plate img { height: min(66svh, 640px); width: auto; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.htrack figure.plate.portrait img { height: min(74svh, 720px); }
.hhint { position: absolute; right: var(--gap); bottom: 26px; font-family: var(--mono); font-size: 10px; letter-spacing: .34em; opacity: .5; }

/* --- 展陈方式 B：沉浸单幅 --- */
.immersive figure.plate { position: relative; height: 100svh; overflow: hidden; }
.immersive figure.plate img {
  width: 100%; height: 100%; object-fit: cover;
  animation: breathe 22s ease-in-out infinite alternate;
}
@keyframes breathe { from { transform: scale(1.0); } to { transform: scale(1.09); } }
.immersive figure.plate figcaption {
  position: absolute; left: var(--gap); bottom: 26px; right: var(--gap);
  color: var(--paper); opacity: .92; margin: 0;
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.immersive figure.plate figcaption .ttl { font-family: var(--serif); font-size: clamp(17px, 2vw, 24px); letter-spacing: .14em; }

/* --- 展陈方式 C：散落可拖拽 --- */
.scatter { position: relative; margin: 0 var(--gap); height: clamp(760px, 150vh, 1500px); overflow: hidden; }
.scatter .print {
  position: absolute; background: var(--paper); padding: 10px 10px 42px;
  box-shadow: 0 18px 50px rgba(20,20,14,.25); cursor: grab; user-select: none; touch-action: none;
  transition: box-shadow .4s;
}
.scatter .print:active { cursor: grabbing; }
.scatter .print.drag { box-shadow: 0 34px 90px rgba(20,20,14,.4); z-index: 60 !important; }
.scatter .print img { width: 100%; height: auto; pointer-events: none; }
.scatter .print .cap {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--ink); opacity: .66;
  display: flex; justify-content: space-between; gap: 8px;
}
.scatter .note {
  position: absolute; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  color: var(--rust); opacity: .85; pointer-events: none;
}

/* --- 展陈方式 D：对齐网格 --- */
.gridmode { padding: 0 var(--gap); display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2.4vw, 34px); }
.gridmode figure.plate { grid-column: span 4; }
.gridmode figure.plate.w6 { grid-column: span 6; }
.gridmode figure.plate.w8 { grid-column: span 8; }
.gridmode figure.plate.w12 { grid-column: span 12; }
.gridmode figure.plate img { width: 100%; height: auto; }
@media (max-width: 900px) {
  .gridmode { grid-template-columns: repeat(6, 1fr); }
  .gridmode figure.plate, .gridmode figure.plate.w6, .gridmode figure.plate.w8 { grid-column: span 6; }
  .gridmode figure.plate.w12 { grid-column: span 6; }
}

/* 接触印相式（市声） */
.gridmode.dense { gap: 12px; }
.gridmode.dense figure.plate { grid-column: span 3; }
.gridmode.dense figure.plate figcaption { font-size: 9.5px; gap: 8px; margin-top: 7px; }
@media (max-width: 900px) { .gridmode.dense figure.plate { grid-column: span 3; } }

/* 严格等距（秩序） */
.gridmode.strict { gap: clamp(34px, 7vw, 130px); padding-bottom: clamp(40px, 8vh, 100px); }
.gridmode.strict figure.plate img { box-shadow: none; outline: 1px solid var(--hair-l); outline-offset: 10px; }

/* 无缝苔藓墙（沉默） */
.gridmode.mosaic { padding: 0; gap: 2px; grid-template-columns: repeat(6, 1fr); margin-top: clamp(30px, 6vh, 70px); }
.gridmode.mosaic figure.plate { grid-column: span 2; margin: 0; }
.gridmode.mosaic figure.plate img { width: 100%; height: 36vh; object-fit: cover; border-radius: 0; }
.gridmode.mosaic figure.plate figcaption { display: none; }
.gridmode.mosaic figure.plate img { cursor: pointer; }
@media (max-width: 900px) {
  .gridmode.mosaic { grid-template-columns: repeat(4, 1fr); }
  .gridmode.mosaic figure.plate { grid-column: span 2; }
  .gridmode.mosaic figure.plate img { height: 26vh; }
}

/* --- 展陈方式 E：序列翻页器 --- */
.seq { padding: 0 var(--gap); }
.seq .stage { position: relative; aspect-ratio: 3/2; background: var(--ink); overflow: hidden; }
.seq .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .18s linear; }
.seq .stage img.cur { opacity: 1; }
.seq .bar { display: flex; align-items: center; gap: 16px; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; }
.seq .bar input[type=range] { flex: 1; accent-color: var(--rust); }
.seq .bar button { border: 1px solid var(--hair); padding: 6px 14px; letter-spacing: .2em; transition: background .3s, color .3s; }
.seq .bar button:hover { background: var(--ink); color: var(--paper); }
.seq .frames { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; padding-bottom: 6px; }
.seq .frames button { flex: 0 0 auto; width: 74px; aspect-ratio: 3/2; overflow: hidden; opacity: .45; transition: opacity .3s, outline-color .3s; outline: 1px solid transparent; }
.seq .frames button.cur { opacity: 1; outline-color: var(--rust); }
.seq .frames img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 关于 ---------- */
#about { padding: clamp(80px, 14vh, 170px) 0; background: var(--paper-2); }
#about .wrap { padding: 0 var(--gap); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(24px, 6vw, 90px); align-items: start; }
#about .portrait { width: clamp(180px, 22vw, 300px); }
#about .portrait img { filter: saturate(.2) contrast(1.04); }
#about .portrait figcaption { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; opacity: .6; margin-top: 10px; }
#about h2 { font-size: clamp(30px, 4.6vw, 64px); letter-spacing: .08em; margin-bottom: 26px; }
#about .statement { writing-mode: vertical-rl; font-family: var(--serif); font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .34em; line-height: 2.6; color: var(--moss); height: clamp(300px, 52vh, 520px); }
#about .bio { margin-top: 34px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; line-height: 2.3; opacity: .8; }
#about .bio b { color: var(--rust); font-weight: 400; }
@media (max-width: 980px) { #about .wrap { grid-template-columns: 1fr; } #about .statement { writing-mode: horizontal-tb; height: auto; letter-spacing: .2em; } }

/* ---------- 项目 / 动态影像 ---------- */
#projects { background: var(--ink); color: var(--paper); padding: clamp(80px, 14vh, 170px) 0; }
#projects .wrap { padding: 0 var(--gap); }
#projects h2 { font-size: clamp(30px, 4.6vw, 64px); letter-spacing: .1em; }
#projects .lede { font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em; opacity: .6; margin: 16px 0 56px; max-width: 60ch; line-height: 2.2; }
.proj { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 70px); padding: 46px 0; border-top: 1px solid var(--hair-l); align-items: center; }
.proj .visual { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--ink-2); }
.proj .visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj .visual .scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(231,226,212,.05) 0 1px, transparent 1px 3px);
}
.proj h3 { font-size: clamp(22px, 2.6vw, 36px); letter-spacing: .1em; }
.proj .meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; color: var(--rust-2); margin: 12px 0 18px; }
.proj p { font-size: 14.5px; line-height: 2.1; opacity: .82; max-width: 52ch; }
.proj .status { display: inline-block; margin-top: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .3em; border: 1px solid var(--hair-l); padding: 6px 14px; opacity: .8; }
@media (max-width: 900px) { .proj { grid-template-columns: 1fr; } }

/* ---------- 档案索引 ---------- */
#archive { padding: clamp(80px, 14vh, 170px) 0 90px; }
#archive .wrap { padding: 0 var(--gap); }
#archive h2 { font-size: clamp(30px, 4.6vw, 64px); letter-spacing: .1em; }
#archive .tools { display: flex; gap: 10px; flex-wrap: wrap; margin: 30px 0 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; }
#archive .tools button { border: 1px solid var(--hair); padding: 7px 14px; transition: background .3s, color .3s; }
#archive .tools button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
#agrid button { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); padding: 0; }
#agrid button img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55); transition: filter .5s, transform .8s var(--ease); }
#agrid button:hover img { filter: none; transform: scale(1.06); }
#agrid button .n { position: absolute; left: 5px; top: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--paper); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
#agrid button.hide { display: none; }

/* ---------- 灯箱 ---------- */
#lb { position: fixed; inset: 0; z-index: 9500; background: rgba(12, 12, 8, .96); display: none; }
#lb.open { display: grid; grid-template-rows: 1fr auto; }
#lb .stage { position: relative; display: grid; place-items: center; overflow: hidden; }
#lb .stage img { max-width: min(92vw, 1500px); max-height: 78svh; object-fit: contain; box-shadow: 0 40px 120px rgba(0,0,0,.6); }
#lb .label {
  display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  padding: 16px var(--gap) 20px; color: var(--paper);
  border-top: 1px solid var(--hair-l); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; line-height: 2;
}
#lb .label .t { font-family: var(--serif); font-size: 19px; letter-spacing: .18em; }
#lb .label .no { color: var(--rust-2); }
#lb .label .tech { opacity: .62; text-align: right; }
#lb .x { position: absolute; top: 18px; right: var(--gap); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: .3em; opacity: .8; z-index: 5; }
#lb .navb { position: absolute; top: 50%; transform: translateY(-50%); color: var(--paper); font-family: var(--mono); font-size: 22px; padding: 20px 14px; opacity: .55; transition: opacity .3s; z-index: 5; }
#lb .navb:hover { opacity: 1; }
#lb .prev { left: 8px; } #lb .next { right: 8px; }

/* ---------- 尾 ---------- */
#colophon { background: var(--ink); color: var(--paper); padding: clamp(70px, 12vh, 140px) 0 46px; }
#colophon .wrap { padding: 0 var(--gap); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: end; }
#colophon h2 { font-size: clamp(26px, 4vw, 54px); letter-spacing: .12em; }
#colophon .mail { font-family: var(--mono); font-size: 13px; letter-spacing: .2em; color: var(--rust-2); border-bottom: 1px solid var(--rust-2); padding-bottom: 4px; }
#colophon .fine { grid-column: 1 / -1; margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--hair-l); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; opacity: .5; }
#colophon .seal {
  width: 74px; height: 74px; display: grid; place-items: center;
  background: var(--rust); color: var(--paper);
  font-family: var(--serif); font-size: 30px; letter-spacing: 0; line-height: 1;
  writing-mode: vertical-rl; transform: rotate(-2deg);
  box-shadow: 0 8px 30px rgba(144,74,44,.4);
}

/* ---------- 显现 ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .dev { filter: none; }
}