/* 上海声之镜像科技有限公司 · 官网样式
   字体：Noto Serif SC / Noto Sans SC（SIL OFL 1.1），只保留页面用到的字，放在自己服务器上。
   改了任何页面的文字，跑一次 tools/build-fonts.py，不然新字会退回系统字体。 */
@font-face { font-family: "LM Serif"; src: url(/fonts/lm-serif.woff2) format("woff2"); font-weight: 200 600; font-display: swap; }
@font-face { font-family: "LM Sans";  src: url(/fonts/lm-sans.woff2)  format("woff2"); font-weight: 200 500; font-display: swap; }

:root {
  --bg: #ffffff;
  --ink: #0b0b0b;
  --ink-2: #4a4a4a;
  --ink-3: #9b9b9b;
  --rule: #ececec;
  --serif: "LM Serif", "Songti SC", "STSong", "Noto Serif SC", serif;
  --sans: "LM Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 16px/2 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main { flex: 1; }
a { color: inherit; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); width: 100%; }

/* 换页时整页淡入淡出，顶栏不动（支持的浏览器才有，不支持的照常跳转） */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease); }
.bar { view-transition-name: bar; }

/* ── 顶栏 ─────────────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.bar.solid {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--rule);
}
.bar .wrap { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mark { display: inline-flex; align-items: center; gap: 12px; font: 400 17px/1 var(--serif); letter-spacing: .12em; text-decoration: none; white-space: nowrap; }
.mark svg { display: block; width: 24px; height: 24px; flex: none; overflow: visible; }
.mark span { position: relative; top: -1.5px; }   /* 字的视觉中心比字框低一点，跟标志对齐 */
.mark svg path { fill: currentColor; transform-box: view-box; transform-origin: 50% 50%; transition: transform 1s var(--ease); }
/* 悬停时里面三个框顺着原来的方向再拧一点 */
.mark:hover .r1 { transform: rotate(4deg); }
.mark:hover .r2 { transform: rotate(9deg); }
.mark:hover .r3 { transform: rotate(15deg); }
nav { display: flex; gap: clamp(16px, 3vw, 40px); }
nav a { position: relative; font-size: 13px; color: var(--ink-2); text-decoration: none; letter-spacing: .06em; white-space: nowrap; }
nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }
nav a:hover::after, nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* ── 入场：从模糊里浮出来。纯 CSS，脚本不跑也照样看得见。 ── */
.in { opacity: 0; animation: rise 1.6s var(--ease) forwards; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}
/* 滚到才浮现。只有脚本在跑（html.js）时才先藏起来。 */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .reveal.seen { opacity: 1; transform: none; }

/* ── 首页 ─────────────────────────────── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.hero .wrap { padding-top: clamp(140px, 24vh, 260px); position: relative; z-index: 1; }
.eyebrow { margin: 0 0 clamp(18px, 3vh, 28px); font-size: 13px; letter-spacing: .14em; color: var(--ink-3); }
.hero h1 {
  margin: 0 0 0 -.04em; font: 200 clamp(46px, 8vw, 120px)/1.05 var(--serif); letter-spacing: .05em;
}
.hero h1 span { display: inline-block; }
.lede { margin: clamp(22px, 4vh, 36px) 0 0; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); letter-spacing: .08em; }
.hero .wave { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; }
.cue { position: absolute; left: max(var(--pad), calc((100% - 1200px) / 2 + var(--pad))); bottom: 36px; z-index: 1; width: 1px; height: 56px; background: var(--rule); overflow: hidden; }
.cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ink); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }

.wave { display: block; width: 100%; }

/* 首页下面的三个入口 */
.index { border-top: 1px solid var(--rule); }
.entry {
  display: grid; grid-template-columns: 72px minmax(0, 4fr) minmax(0, 7fr) 32px; align-items: baseline; gap: 24px;
  padding: clamp(34px, 6vh, 56px) 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; position: relative;
}
.entry::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease);
}
.entry:hover::before { transform: scaleX(1); }
.entry .idx { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.entry .name { font: 300 clamp(26px, 3vw, 40px)/1.2 var(--serif); letter-spacing: .06em; transition: transform .6s var(--ease); }
.entry .desc { font-size: 15px; color: var(--ink-2); letter-spacing: .04em; }
.entry .arrow { justify-self: end; font-size: 18px; color: var(--ink-3); transition: transform .6s var(--ease), color .6s var(--ease); }
.entry:hover .name { transform: translateX(8px); }
.entry:hover .arrow { transform: translateX(6px); color: var(--ink); }

/* ── 内页 ─────────────────────────────── */
.page-head .wrap { padding-top: clamp(150px, 22vh, 230px); }
.kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-size: 12px; color: var(--ink-3); letter-spacing: .28em; }
.kicker .dash { width: 28px; height: 1px; background: var(--ink-3); opacity: .5; }
.page-head h1 { margin: 0 0 0 -.03em; font: 200 clamp(38px, 6vw, 84px)/1.15 var(--serif); letter-spacing: .05em; }
.page-head .wave { height: clamp(120px, 20vh, 200px); margin-top: clamp(16px, 4vh, 40px); }

.page-body .wrap {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px;
  padding-top: clamp(40px, 7vh, 80px); padding-bottom: clamp(80px, 14vh, 160px);
}
.aside { font-size: 13px; color: var(--ink-3); letter-spacing: .1em; line-height: 1.9; }
.aside h2 { margin: 0 0 6px; font: 300 clamp(30px, 3.6vw, 46px)/1.2 var(--serif); letter-spacing: .06em; color: var(--ink); }
.aside .latin { margin: 0; font-size: 11px; letter-spacing: .32em; }
.prose { max-width: 640px; }
.prose p { margin: 0 0 1.2em; font-size: clamp(16px, 1.3vw, 19px); color: #1c1c1c; }
.prose p:last-child { margin-bottom: 0; }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px !important; font-size: 14px !important; color: var(--ink-3) !important; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .7; animation: breathe 2.8s ease-in-out infinite; flex: none; }
@keyframes breathe { 50% { opacity: .15; transform: scale(.7); } }

dl { margin: 0; }
dl div { display: grid; grid-template-columns: 7em 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
dl div:first-child { padding-top: 0; }
dt { font-size: 13px; color: var(--ink-3); letter-spacing: .1em; padding-top: 3px; }
dd { margin: 0; font-size: clamp(16px, 1.3vw, 19px); word-break: break-all; }
dd a { text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
dd a:hover { background-size: 100% 1px; }

/* 内页底部：下一页 */
.next { border-top: 1px solid var(--rule); }
.next a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: clamp(40px, 8vh, 72px) 0; text-decoration: none; }
.next .k { font-size: 12px; color: var(--ink-3); letter-spacing: .28em; }
.next .t { font: 200 clamp(32px, 5vw, 64px)/1.1 var(--serif); letter-spacing: .05em; transition: transform .6s var(--ease); }
.next a:hover .t { transform: translateX(-10px); }
.next .t::after { content: " →"; font-family: var(--sans); font-weight: 200; }

/* ── 页脚 ─────────────────────────────── */
footer { border-top: 1px solid var(--rule); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 28px; padding-bottom: 40px; font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .bar .wrap { height: 60px; }
  .mark { font-size: 15px; gap: 10px; }
  nav { gap: 14px; }
  nav a { font-size: 12px; letter-spacing: .02em; }
  .hero .wave { height: 40%; }
  .entry { grid-template-columns: 40px 1fr 24px; gap: 4px 12px; }
  .entry .desc { grid-column: 2 / 3; grid-row: 2; font-size: 14px; }
  .entry .arrow { grid-row: 1; grid-column: 3; }
  .page-body .wrap { grid-template-columns: 1fr; gap: 28px; }
  .aside:empty { display: none; }
  dl div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .in, .cue::after, .status i { animation: none; opacity: 1; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media print { .js .reveal { opacity: 1; transform: none; } .wave, .cue { display: none; } }