/* ==========================================================================
   arbiter-doc.css —— 王座厅往下的「裁决署档案」（类名前缀 ad-）
   一章一件事、一个能动手的东西。金属物件都是生成图（透明底），这里只管摆放、光和动。
   ========================================================================== */
.ad-ch { position: relative; max-width: 1240px; margin: clamp(90px, 13vh, 150px) auto 0; padding: 0 clamp(20px, 4vw, 56px); }
.ad-ch::before { content: ''; position: absolute; left: 50%; top: 4%; width: 120%; height: 80%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 45%, rgba(176, 136, 70, .09), transparent 70%); } /* 一点暖金的底光，像物件放在展柜里 */
.ad-h { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: baseline; max-width: 980px; margin: 0 auto; padding-bottom: 16px; border-bottom: 1px solid rgba(232, 208, 155, .22); }
.ad-h em { grid-row: span 2; font-style: italic; font-family: var(--display-latin); font-size: clamp(54px, 6vw, 84px); line-height: .8; color: #e8d09b; text-shadow: 0 0 30px rgba(232, 190, 110, .35); }
.ad-h h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: .4em; color: #f4ecdc; }
.ad-h p { margin: 6px 0 0; font-family: var(--serif); font-size: 15px; letter-spacing: .12em; color: rgba(222, 226, 230, .62); }

/* ── Ⅰ 国徽：聚光圈 ── */
.ad-crest { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(30px, 5vh, 60px); }
.ad-crest-fig { position: relative; width: 100%; max-width: 620px; aspect-ratio: 994 / 1007; justify-self: end; }
.ad-crest-img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); }
.ad-crest-dim { position: absolute; inset: 0; width: 100%; height: 100%; filter: brightness(.28) saturate(.6); opacity: 0; transition: opacity .5s; pointer-events: none; } /* 同一张图的暗版：只压国徽本身，不压背景 */
.ad-crest-fig.is-on .ad-crest-dim { opacity: 1; }
.ad-lens { position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 50%; opacity: 0; pointer-events: none; transition: transform .55s cubic-bezier(.3, .7, .2, 1), opacity .4s;
  -webkit-mask: radial-gradient(closest-side, #000 70%, transparent); mask: radial-gradient(closest-side, #000 70%, transparent); }
.ad-lens img { position: absolute; left: 0; top: 0; max-width: none; transition: transform .55s cubic-bezier(.3, .7, .2, 1); filter: brightness(1.35) saturate(1.1) drop-shadow(0 0 18px rgba(255, 210, 130, .35)); }
.ad-crest-fig.is-on .ad-lens { opacity: 1; }
.ad-spot { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ad-spot:focus-visible { outline: 1px solid rgba(232, 208, 155, .6); }
.ad-parts { list-style: none; margin: 0; padding: 0; counter-reset: ad; }
.ad-parts li + li { border-top: 1px solid rgba(232, 208, 155, .14); }
.ad-parts button { display: grid; grid-template-columns: 1fr; width: 100%; padding: 18px 0 18px 26px; border: 0; background: none; text-align: left; cursor: pointer; position: relative; color: inherit; font-family: var(--serif); opacity: .5; transition: opacity .35s; }
.ad-parts button::before { content: ''; position: absolute; left: 0; top: 26px; width: 10px; height: 10px; transform: rotate(45deg) scale(.6); border: 1px solid #e8d09b; transition: transform .35s, background .35s; }
.ad-parts button.is-on, .ad-parts button:hover, .ad-parts button:focus-visible { opacity: 1; outline: none; }
.ad-parts button.is-on::before { transform: rotate(45deg) scale(1); background: #e8d09b; }
.ad-parts span { font-size: 12px; letter-spacing: .3em; color: #e8d09b; }
.ad-parts b { margin-top: 6px; font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); letter-spacing: .16em; color: #f4ecdc; }
.ad-parts i { margin-top: 6px; font-style: normal; font-size: 14.5px; line-height: 1.85; color: rgba(222, 226, 230, .72); }

/* ── Ⅰ 秤：梁绕支点转，盘挂在钩上。整杆秤连同说明压在一屏里（按住往下压时也看得到字） ── */
.ad-scale-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100svh - 72px); margin-top: clamp(40px, 6vh, 80px); padding: 24px 0; box-sizing: border-box; text-align: center; }
.ad-turn { margin: 0; font-family: var(--serif); font-size: 15px; letter-spacing: .4em; color: rgba(232, 208, 155, .8); }
.ad-hint { margin: 8px 0 0; font-family: var(--serif); font-size: 12px; letter-spacing: .3em; color: rgba(222, 226, 230, .45); }
.ad-scale { position: relative; width: min(100%, 980px, calc((100svh - 72px - 250px) * 1.53)); aspect-ratio: 980 / 640; margin: 10px auto 0; touch-action: none; user-select: none; -webkit-user-select: none; }
/* 说明：一个标签 + 一句话。均衡（灰金）/ 失衡（红）/ 裁决（亮金）/ 支点的锁 */
.ad-say { --k: #b9a77e; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 5.4em; max-width: 36em; margin: 22px auto 0; font-family: var(--serif); }
.ad-say b { padding: 3px 14px; font-weight: 500; font-size: 13px; letter-spacing: .5em; text-indent: .5em; color: #0b0805; background: var(--k); transform: skewX(-10deg); }
.ad-say span { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.8; color: #ece4d2; }
.ad-say.is-tilt { --k: #c8573f; }
.ad-say.is-tilt span { color: #f3d6cc; }
.ad-say.is-judge { --k: #f0d08a; }
.ad-say.is-lock { --k: #8fa6b8; }
.ad-say.is-in > * { animation: ad-say .45s ease both; }
.ad-say.is-in span { animation-delay: .06s; }
@keyframes ad-say { from { opacity: 0; transform: translateY(6px) skewX(var(--sk, 0deg)); } }
.ad-say b { --sk: -10deg; }
.ad-scale img { -webkit-user-drag: none; }
.ad-pivot { position: absolute; left: 50%; top: 13%; height: 86%; transform: translateX(-50%); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .7)); }
.ad-pivot-hit { position: absolute; z-index: 4; left: 50%; top: 12%; width: 15%; height: 22%; transform: translateX(-50%); border: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 220, 150, .55), transparent); opacity: 0; cursor: pointer; transition: opacity .4s; }
.ad-pivot-hit:hover, .ad-pivot-hit:focus-visible { opacity: .5; outline: none; }
.ad-scale.is-hold .ad-pivot-hit, .ad-scale.is-lock .ad-pivot-hit { opacity: 1; } /* 是支点把梁扶正的：它亮一下 */
.ad-beam { position: absolute; left: 50%; top: 20%; width: 92%; will-change: transform; z-index: 2; }
.ad-beam img { display: block; width: 100%; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .65)); }
.ad-pan { position: absolute; left: 0; top: 0; width: 24%; transform-origin: 50% 0; will-change: transform; cursor: grab; z-index: 3; }
.ad-pan.is-r { width: 28%; }
.ad-scale.is-drag .ad-pan { cursor: grabbing; }
.ad-pan img { display: block; width: 100%; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .7)); transition: filter .3s; }
.ad-pan:hover img { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .7)) brightness(1.12); }
.ad-pan b { position: absolute; left: 0; right: 0; bottom: -2.2em; font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .5em; text-indent: .5em; color: #f2dfae; }

@media (max-width: 860px) {
  .ad-crest { grid-template-columns: 1fr; }
  .ad-crest-fig { justify-self: center; }
  .ad-pan b { letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) { .ad-lens, .ad-lens img, .ad-say.is-in { transition: none; animation: none; } }

/* ── 档案馆底景：贴在视口后面（sticky），内容从它上面滚过去 ── */
.cl-about { position: relative; }
.cl-about > :not(.ad-bg-wrap) { position: relative; z-index: 1; }
/* 外层绝对定位铺满整段，里面那层 sticky 贴在视口后面——这样底景不会越过本段压到页脚 */
.ad-bg-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ad-bg { position: sticky; top: 72px; height: calc(100svh - 72px); overflow: hidden; }
.ad-bg-in { position: absolute; inset: -6% 0; will-change: transform; }
.ad-bg-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.ad-bg-in img.is-on { opacity: .72; }
.ad-bg-in img[data-k="hall"].is-on { opacity: .5; }
.ad-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5, 6, 8, .35), rgba(5, 6, 8, .82)), linear-gradient(180deg, #050608, transparent 14%, transparent 86%, #050608); }
.ad-bg > .cl-fx { z-index: 1; }

/* ── 章节标题浮上来、民间的目光 ── */
.ad-rise { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s cubic-bezier(.2, .7, .2, 1); }
.ad-rise.is-in { opacity: 1; transform: none; }
.ad-voice { position: relative; z-index: 1; max-width: 760px; margin: clamp(110px, 16vh, 180px) auto 0; padding: 0 24px; text-align: center; }
.ad-voice blockquote { margin: 0; font-family: var(--serif); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.9; letter-spacing: .06em; color: #e9e1cc; }
.ad-voice blockquote::before, .ad-voice blockquote::after { color: rgba(232, 208, 155, .7); }
.ad-voice blockquote::before { content: '「'; }
.ad-voice blockquote::after { content: '」'; }
.ad-voice figcaption { margin-top: 14px; font-family: var(--serif); font-size: 12px; letter-spacing: .5em; text-indent: .5em; color: rgba(232, 208, 155, .6); }
.ad-voice figcaption::before { content: '—— '; }
.ad-h.is-small em { font-size: 44px; }
.ad-more { max-width: 980px; margin: 30px auto 0; text-align: right; font-family: var(--serif); }
.ad-more a { font-size: 14px; letter-spacing: .3em; color: #e8d09b; text-decoration: none; border-bottom: 1px solid rgba(232, 208, 155, .35); padding-bottom: 4px; }
.ad-more a:hover { color: #fff4d8; border-color: #e8d09b; }

/* ── Ⅱ 一百一十年：中间一根金线随滚动往下走，节点左右交错，火漆盖下去 ── */
.ad-years { position: relative; list-style: none; max-width: 980px; margin: clamp(40px, 6vh, 70px) auto 0; padding: 0; }
.ad-spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(232, 208, 155, .14); }
.ad-spine i { position: absolute; inset: 0; background: linear-gradient(180deg, #8a6a32, #f0d08a); transform-origin: 50% 0; transform: scaleY(0); }
.ad-years li { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; min-height: 116px; }
.ad-yt { grid-column: 1; grid-row: 1; justify-self: end; padding-right: 26px; font-family: var(--serif); font-size: 14px; letter-spacing: .3em; color: rgba(232, 208, 155, .8); }
.ad-yseal { grid-column: 2; grid-row: 1; justify-self: center; width: 64px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .7)); opacity: 0; transform: scale(1.9) rotate(-14deg); transition: transform .32s cubic-bezier(.5, 0, .9, .5), opacity .12s; }
.ad-yx { grid-column: 3; grid-row: 1; padding-left: 26px; opacity: 0; transform: translateX(16px); transition: opacity .6s .15s, transform .6s .15s; }
.ad-years li.is-r .ad-yt { grid-column: 3; justify-self: start; padding: 0 0 0 26px; }
.ad-years li.is-r .ad-yx { grid-column: 1; padding: 0 26px 0 0; text-align: right; transform: translateX(-16px); }
.ad-yx b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 1.5vw, 21px); letter-spacing: .14em; color: #f4ecdc; }
.ad-yx p { margin: 6px 0 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.85; color: rgba(222, 226, 230, .72); }
.ad-years li.is-in .ad-yseal { opacity: 1; transform: scale(1) rotate(-8deg); }
.ad-years li.is-in .ad-yx { opacity: 1; transform: none; }
.ad-years li:first-child .ad-yseal { width: 54px; }
.ad-years li:last-child .ad-yt { color: #f0d08a; }

/* ── Ⅲ 十张王座：十枚火漆依次盖下，Ⅸ Ⅹ 是空白的蜡 ── */
.ad-ten { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(6px, 1.2vw, 18px); max-width: 1100px; margin: clamp(40px, 6vh, 70px) auto 0; }
.ad-wax { position: relative; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transform: scale(1.8) rotate(-12deg); transition: transform .3s calc(var(--i) * .11s) cubic-bezier(.5, 0, .9, .5), opacity .1s calc(var(--i) * .11s); }
.ad-ten.is-in .ad-wax { opacity: 1; transform: none; }
.ad-wax img { display: block; width: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); transition: transform .3s, filter .3s; }
.ad-wax em { display: block; margin-top: 10px; font-family: var(--display-latin); font-style: normal; font-size: clamp(16px, 1.6vw, 22px); color: #e8d09b; text-align: center; }
.ad-wax.is-blank img { opacity: .55; }
.ad-wax.is-blank em { color: rgba(222, 226, 230, .35); }
.ad-wax:hover img, .ad-wax:focus-visible img { transform: translateY(-6px); filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .7)) brightness(1.15); }
.ad-wax:focus-visible { outline: none; }
.ad-ten-cap { min-height: 1.8em; margin: 18px 0 0; text-align: center; font-family: var(--serif); font-size: 17px; letter-spacing: .2em; color: #f4ecdc; }
.ad-ten-cap b { font-family: var(--display-latin); font-weight: 400; font-size: 22px; color: #e8d09b; margin-right: 12px; }
.ad-ten-cap span { margin-left: 14px; font-size: 13px; color: rgba(222, 226, 230, .6); }
.ad-rules { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; max-width: 980px; margin: clamp(30px, 5vh, 50px) auto 0; padding: 0; }
.ad-rules li { display: grid; grid-template-columns: 3.4em 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid rgba(232, 208, 155, .16); font-family: var(--serif); }
.ad-rules b { font-weight: 500; font-size: 15px; letter-spacing: .3em; color: #e8d09b; }
.ad-rules span { font-size: 15.5px; line-height: 1.85; color: #e6decb; }

/* ── Ⅳ 公文箱 ── */
.ad-box { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 70px); max-width: 1160px; margin: clamp(24px, 4vh, 44px) auto 0; }
.ad-col-k { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(232, 208, 155, .22); font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: #e8d09b; }
.ad-duty ol { list-style: none; margin: 0; padding: 0; }
.ad-duty li { padding: 14px 0; border-bottom: 1px solid rgba(232, 208, 155, .1); font-family: var(--serif); }
.ad-duty li b { display: block; font-weight: 500; font-size: 18px; letter-spacing: .14em; color: #f4ecdc; }
.ad-duty li span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.8; color: rgba(222, 226, 230, .7); }
.ad-month { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; margin-top: 26px; }
.ad-month i { aspect-ratio: 1; border: 1px solid rgba(232, 208, 155, .22); }
.ad-month i.is-on { background: linear-gradient(180deg, #e8c27a, #9a7434); border-color: #e8c27a; }
.ad-month-cap { margin: 10px 0 0; font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: rgba(222, 226, 230, .6); }
.ad-desk { position: relative; margin-top: -10px; aspect-ratio: 1.75; cursor: pointer; } /* 点箱子或纸堆 = 抽一份 */
.ad-ironbox { position: absolute; left: 2%; bottom: 0; width: 40%; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .75)); }
.ad-form { container-type: inline-size; position: absolute; left: 9%; bottom: 14%; width: 23%; aspect-ratio: 540 / 760; transform: translate(calc(var(--i) * 4px), calc(var(--i) * -3px)) rotate(calc(-8deg + var(--i) * 2deg)); transition: transform .65s cubic-bezier(.2, .8, .2, 1), opacity .4s; z-index: 1; }
.ad-form-bg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); }
.ad-form-tx { position: absolute; left: 11%; right: 10%; top: 13%; font-family: var(--serif); color: #2a1f15; font-size: 4.7cqw; opacity: 0; transition: opacity .3s .3s; }
.ad-form-tx span { display: block; letter-spacing: .3em; color: #7a3a26; }
.ad-form-tx b { display: block; margin-top: .4em; font-weight: 700; font-size: 1.6em; letter-spacing: .1em; }
.ad-form-tx p { margin: .8em 0 0; line-height: 1.7; font-size: 1.15em; }
.ad-form-tx .ad-note { margin-right: 0; margin-top: 1em; padding-top: .6em; border-top: 1px dashed rgba(80, 55, 30, .45); color: #5a3a20; opacity: 0; transition: opacity .4s .35s; }
.ad-stamp { position: absolute; right: 6%; bottom: 4%; width: 30%; opacity: 0; transform: scale(1.8) rotate(-24deg); transition: transform .22s cubic-bezier(.5, 0, .9, .5), opacity .08s; mix-blend-mode: multiply; }
.ad-stamp img { display: block; width: 100%; }
.ad-stamp b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 8cqw; white-space: nowrap; letter-spacing: .1em; text-indent: .1em; color: #b23a2a; }
.ad-form.is-up { z-index: 6; transform: translate(178%, 8%) rotate(2deg) scale(1.55); }
.ad-desk:hover .ad-form:not(.is-up):not(.is-done):last-of-type { transform: translate(16px, -14px) rotate(-1deg); }
.ad-form.is-up .ad-form-tx { opacity: 1; }
.ad-form.is-stamped .ad-stamp { opacity: .92; transform: scale(1) rotate(-12deg); }
.ad-form.is-stamped .ad-note { opacity: 1; }
.ad-form.is-done { z-index: 0; opacity: 0; transform: translate(140%, 20%) rotate(14deg) scale(1.1); }
.ad-draw { position: relative; margin-top: 8px; padding: 10px 26px; font-family: var(--serif); font-size: 14px; letter-spacing: .4em; text-indent: .4em; color: #1d140a; background: #e8d09b; border: 0; cursor: pointer; transform: skewX(-8deg); }
.ad-draw:hover { background: #fff1c8; }
.ad-asks-cap { margin: 12px 0 0; min-height: 6em; font-family: var(--serif); }
.ad-asks-cap p { margin: 0; font-size: 15px; line-height: 1.85; color: rgba(222, 226, 230, .7); }
.ad-asks-cap .ad-cap-k { color: #e8d09b; letter-spacing: .06em; }
.ad-asks-cap .ad-cap-in { margin-top: 10px; padding-left: 14px; border-left: 2px solid rgba(232, 208, 155, .4); font-size: 16px; color: #ece4d2; animation: ad-say .5s .1s ease both; }
.ad-asks-cap i, .ad-form-tx .ad-note i { display: block; font-style: normal; font-size: 11px; letter-spacing: .4em; color: rgba(232, 208, 155, .6); margin-bottom: 4px; }
.ad-form-tx .ad-note i { color: #8a6d4c; }

/* ── Ⅴ 敕绝令：上轴固定；盖板往下滑开露出羊皮纸，下轴跟着滑到底 ── */
.ad-ch-wide { max-width: 1320px; }
.ad-writ-stage { position: relative; min-height: calc(100svh - 72px); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 70px); align-items: center; margin: clamp(40px, 6vh, 70px) auto 0; padding: clamp(30px, 5vh, 60px) clamp(20px, 4vw, 60px); }
.ad-writ { container-type: inline-size; position: relative; width: min(100%, 460px, calc((100svh - 72px - 70px) / 1.72)); justify-self: center; }
.ad-roll { position: relative; z-index: 3; display: block; width: 150%; max-width: none; margin-left: -25%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .7)); } /* 杆身约占图宽三分之二：放到 150% 宽，杆身正好横跨纸面，两颗端头露在纸外 */
.ad-sheet { position: relative; margin: -4.5% 0; aspect-ratio: 1 / 1.24; overflow: hidden; }
.ad-parch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.ad-sheet-in { position: absolute; inset: 0; transform: translateY(-100%); transition: transform 1.3s cubic-bezier(.45, 0, .2, 1); } /* 纸从上轴里往下放出来 */
.ad-roll.is-bot { transform: translateY(calc(-1 * var(--sheet, 0px))); transition: transform 1.3s cubic-bezier(.45, 0, .2, 1); }
.ad-writ.is-open .ad-sheet-in { transform: none; }
.ad-writ.is-open .ad-roll.is-bot { transform: none; }
.ad-sheet-tx { position: absolute; inset: 8% 10% 7%; font-family: var(--serif); color: #2a1a10; text-align: center; }
.ad-sheet-tx h4 { margin: 0; font-weight: 700; font-size: 6.6cqw; letter-spacing: .6em; text-indent: .6em; color: #3a140c; }
.ad-sheet-tx ol { list-style: none; margin: 5% 0 0; padding: 0; text-align: left; }
.ad-sheet-tx li { display: grid; grid-template-columns: 2.2em 1fr; column-gap: 8px; padding: .42em 0; border-bottom: 1px solid rgba(80, 50, 25, .25); opacity: 0; transform: translateY(6px); transition: opacity .5s calc(1.1s + var(--i) * .35s), transform .5s calc(1.1s + var(--i) * .35s); }
.ad-sheet-tx li em { grid-row: span 2; font-style: normal; font-size: 4.3cqw; color: #8a2a18; }
.ad-sheet-tx li b { font-size: 3.9cqw; letter-spacing: .2em; }
.ad-sheet-tx li span { font-size: 2.75cqw; line-height: 1.6; color: #4a3020; }
.ad-keys { display: flex; justify-content: center; gap: 16%; margin-top: 4%; }
.ad-keys figure { margin: 0; width: 18%; opacity: 0; transform: scale(1.9) rotate(-16deg); transition: transform .26s calc(2.7s + var(--i) * .35s) cubic-bezier(.5, 0, .9, .5), opacity .08s calc(2.7s + var(--i) * .35s); }
.ad-keys img { display: block; width: 100%; filter: drop-shadow(0 4px 5px rgba(40, 15, 5, .55)); }
.ad-keys figcaption { margin-top: 6px; font-size: 2.4cqw; letter-spacing: .3em; color: #5a3020; }
.ad-writ.is-open .ad-sheet-tx li { opacity: 1; transform: none; }
.ad-writ.is-open .ad-keys figure { opacity: 1; transform: scale(1) rotate(-8deg); }
.ad-writ:not(.is-open) .ad-sheet-tx li, .ad-writ:not(.is-open) .ad-keys figure { transition-delay: 0s; transition-duration: .2s; }
.ad-writ-side { position: relative; }
.ad-unroll { padding: 10px 26px; font-family: var(--serif); font-size: 14px; letter-spacing: .4em; text-indent: .4em; color: #f2e8d2; background: rgba(8, 10, 13, .7); border: 1px solid rgba(232, 208, 155, .45); cursor: pointer; transform: skewX(-8deg); }
.ad-unroll:hover { background: #e8d09b; color: #1d140a; }
.ad-keys-tx { margin: 30px 0 0; }
.ad-keys-tx div { padding: 18px 0; border-top: 1px solid rgba(232, 208, 155, .18); }
.ad-keys-tx dt { font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: #e8d09b; }
.ad-keys-tx dd { margin: 8px 0 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.9; color: #e6decb; }

/* ── Ⅵ 授衣：背后是刻着帽徽的黑石墙；黑铁见习徽 → 纯金徽 ── */
.ad-robe { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(30px, 5vw, 80px); align-items: start; margin: clamp(40px, 6vh, 70px) auto 0; padding: clamp(40px, 7vh, 80px) clamp(20px, 4vw, 60px); min-height: 520px; }
.ad-badges { position: relative; grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 1; width: min(100%, 420px); justify-self: center; align-self: center; }
.ad-badge { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .75)); transition: opacity .7s, transform .9s cubic-bezier(.2, .8, .2, 1); }
.ad-badge.is-gold { opacity: 0; transform: scale(.7) rotate(-6deg); }
.ad-flare { position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 226, 160, .55), transparent); opacity: 0; transform: scale(.4); transition: opacity .5s, transform 1.1s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.ad-robe[data-step="1"] .ad-badge.is-iron { transform: rotate(-4deg) scale(1.02); }
.ad-robe[data-step="2"] .ad-badge.is-iron { transform: rotate(4deg) scale(1.04); }
.ad-robe[data-step="3"] .ad-badge.is-iron { opacity: 0; transform: scale(1.2); }
.ad-robe[data-step="3"] .ad-badge.is-gold { opacity: 1; transform: none; }
.ad-robe[data-step="3"] .ad-flare { opacity: 1; transform: scale(1); }
.ad-gates { position: relative; grid-column: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ad-gates button { width: 100%; padding: 12px 6px; border: 0; border-top: 2px solid rgba(232, 208, 155, .2); background: none; cursor: pointer; text-align: left; font-family: var(--serif); color: rgba(222, 226, 230, .5); transition: color .3s, border-color .3s; }
.ad-gates em { display: block; font-style: normal; font-size: 13px; letter-spacing: .2em; color: rgba(232, 208, 155, .55); }
.ad-gates b { display: block; margin-top: 6px; font-weight: 500; font-size: 14.5px; letter-spacing: .1em; }
.ad-gates button.is-past { border-color: rgba(232, 208, 155, .55); color: rgba(236, 230, 214, .75); }
.ad-gates button.is-on { border-color: #f0d08a; color: #f4ecdc; }
.ad-gates button.is-on em { color: #f0d08a; }
.ad-gate-tx { position: relative; grid-column: 2; margin: 26px 0 0; min-height: 6.2em; font-family: var(--serif); font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.95; color: #ece4d2; }
.ad-gate-tx.is-in { animation: ad-say .5s ease both; }
.ad-gate-next { position: relative; grid-column: 2; justify-self: start; align-self: start; margin-top: 10px; padding: 10px 26px; font-family: var(--serif); font-size: 14px; letter-spacing: .4em; text-indent: .4em; color: #1d140a; background: #e8d09b; border: 0; cursor: pointer; transform: skewX(-8deg); }
.ad-gate-next:hover { background: #fff1c8; }

/* ── 附录 ── */
.ad-events { list-style: none; max-width: 980px; margin: 24px auto 0; padding: 0; }
.ad-events li { display: grid; grid-template-columns: 90px 220px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(232, 208, 155, .1); font-family: var(--serif); align-items: baseline; }
.ad-events span { font-size: 13px; letter-spacing: .14em; color: rgba(232, 208, 155, .75); }
.ad-events b { font-weight: 400; font-size: 16px; color: #f4ecdc; }
.ad-events em { font-style: normal; font-size: 14px; color: rgba(222, 226, 230, .65); }
.ad-next { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 980px; margin: 60px auto 0; }
.ad-next > * { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid rgba(232, 208, 155, .3); background: rgba(5, 6, 8, .5); text-decoration: none; font-family: var(--serif); transition: border-color .3s, background .3s; }
.ad-next b { font-weight: 500; font-size: 18px; letter-spacing: .3em; color: #f2dfae; }
.ad-next > * span { font-size: 13px; letter-spacing: .14em; color: rgba(222, 226, 230, .6); }
.ad-next a:hover { border-color: #e8d09b; background: rgba(232, 208, 155, .06); }
.ad-next .is-soon { border-style: dashed; opacity: .6; }

@media (max-width: 860px) {
  .ad-years li { grid-template-columns: 70px 1fr; }
  .ad-years li .ad-yt, .ad-years li.is-r .ad-yt { grid-column: 2; grid-row: 1; justify-self: start; padding: 0; }
  .ad-yseal { grid-column: 1; grid-row: 1 / span 2; }
  .ad-years li .ad-yx, .ad-years li.is-r .ad-yx { grid-column: 2; grid-row: 2; padding: 0; text-align: left; }
  .ad-spine { left: 35px; }
  .ad-ten { grid-template-columns: repeat(5, 1fr); }
  .ad-rules, .ad-box, .ad-writ-stage, .ad-robe, .ad-next { grid-template-columns: 1fr; }
  .ad-badges, .ad-gates, .ad-gate-tx, .ad-gate-next { grid-column: 1; grid-row: auto; }
  .ad-events li { grid-template-columns: 70px 1fr; } .ad-events em { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .ad-rise, .ad-yseal, .ad-yx, .ad-wax, .ad-form, .ad-stamp, .ad-sheet-in, .ad-roll, .ad-sheet-tx li, .ad-keys figure, .ad-badge, .ad-flare { transition: none !important; } }

/* Ⅱ：每个时代的第一条上方标出时代名；结尾接上现在 */
.ad-years li.is-era { margin-top: 26px; }
.ad-years li.is-era::before { content: attr(data-g); position: absolute; left: 50%; top: -22px; transform: translateX(-50%); padding: 2px 12px; font-family: var(--serif); font-size: 12px; letter-spacing: .5em; text-indent: .5em; color: #0b0805; background: #c9a868; z-index: 1; }
.ad-years li:first-child.is-era { margin-top: 30px; }
.ad-years li[data-g="浩劫"] .ad-yseal { filter: drop-shadow(0 0 10px rgba(150, 90, 220, .55)) drop-shadow(0 6px 8px rgba(0, 0, 0, .7)); }
.ad-now { max-width: 640px; margin: 50px auto 0; padding: 28px 30px; text-align: center; border-top: 1px solid rgba(232, 208, 155, .35); border-bottom: 1px solid rgba(232, 208, 155, .35); background: rgba(5, 6, 8, .55); font-family: var(--serif); }
.ad-now-k { margin: 0; font-size: 19px; letter-spacing: .2em; color: #f2dfae; }
.ad-now-p { margin: 12px 0 0; font-size: 15px; line-height: 1.9; color: rgba(222, 226, 230, .75); }
.ad-now-links { display: flex; justify-content: center; gap: 14px; margin: 20px 0 0; }
.ad-now-links a { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 20px; border: 1px solid rgba(232, 208, 155, .4); color: #f2e8d2; text-decoration: none; font-size: 14px; letter-spacing: .3em; }
.ad-now-links a:hover { border-color: #e8d09b; background: rgba(232, 208, 155, .08); }
.ad-now-links small { font-size: 11px; letter-spacing: .1em; color: #d9826a; }