/* 凯菲·法瑟特 V2 灵感网站 — 浅色画廊底 + 高饱和点缀
   结构与布局规则沿用 REUSABLE_FRAMEWORK_V1（山本参考实现），仅换令牌与织物适配类。

   ┌ 令牌取色依据（色彩溯源，均为盘上 manifest 登记图证实测值）─────────────┐
   │ --accent #cc2a7d（玫红）
   │   ← 图证：02_FASSETT_EVIDENCE/Q5_joy/OF_patc_PD80496-copy-2.jpg
   │     （kaffefassett.com 官方拼布图库 · FreeSpirit 设计 PD80496）
   │     该图 18.3% 像素落在玫红色带，实测织物玫红 RGB(175,102,121)～(175,102,121) 系，
   │     站点强调色沿此色相向饱和方向提纯。manifest 登记 why_important 同源。
   │ --bg #faf7ef（奶油画廊底）
   │   ← 图证：02_FASSETT_EVIDENCE/Q1_colour/OF_knit_KF-SS26-Sorrel-web.jpg
   │     （kaffefassett.com 官方针织图库 · SS26 Sorrel）
   │     官方图库作品摄影底色实测边缘均色 RGB(240,237,231)；站点底色沿此明度带，
   │     织物平铺图（.flat contain）在浅底上不裁切呈现。
   └──────────────────────────────────────────────────────────┘

   风格令牌（按框架第 7 节换设计师只改这里；禁止继承山本黑色）：
   底 = 奶油画廊白；主字 = 深墨；强调色 = 高饱和玫红（全站唯一强调色，只用于当前项）；
   图像不做灰度滤镜（色彩即主体，织物艺术家的站点第一原则）。 */

:root {
  --bg: #faf7ef;
  --bg-soft: #f1ecdf;
  --ink: #22201c;
  --gray: #6f6a5e;
  --gray-dim: #9a948a;
  --line: #e2dccd;
  --accent: #cc2a7d;
  --serif: Georgia, "Times New Roman", "Songti SC", "STSong", SimSun, serif;
  --sans: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #fff; }

/* ---------- 通用 ---------- */

.eyebrow { font-size: .86rem; letter-spacing: .35em; color: var(--gray); line-height: 2.2; }

.section { padding: 16vh 8vw; max-width: 1180px; margin: 0 auto; }

.section-title { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 400; line-height: 1.5; margin-bottom: 1.2rem; }

.kicker { display: block; font-family: var(--sans); font-size: .8rem; letter-spacing: .4em; color: var(--gray); margin-bottom: 1.4rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

footer { border-top: 1px solid var(--line); padding: 3.2rem 8vw 4rem; color: var(--gray-dim); font-size: .78rem; letter-spacing: .12em; line-height: 2.2; }

/* ---------- 首页（纯图面板枢纽 · 门卡=基准版式：小图悬浮+衬线大字+留白） ---------- */

.home-head { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem 3.5vw; border-bottom: 1px solid var(--line); background: var(--bg); }
.home-head .brand { font-family: var(--serif); font-size: 1.1rem; letter-spacing: .18em; color: var(--ink); }

.doors { padding: 10vh 8vw 12vh; max-width: 1180px; margin: 0 auto; }
.doors-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }

.door { background: var(--bg); padding: 2rem 1.6rem 2.4rem; display: flex; flex-direction: column; gap: 1rem; min-height: 300px; min-width: 0; }
.door .door-thumb { width: 88px; height: 118px; object-fit: cover; } /* 成衣/人物：框内 cover；色彩不做灰度（法赛特令牌） */
.door.flat .door-thumb { object-fit: contain; background: #fff; border: 1px solid var(--line); box-sizing: content-box; width: 86px; height: 116px; padding: 1px; } /* 织物平铺：contain 保持原比例 */
.door .door-word { font-family: var(--serif); font-size: 1.9rem; letter-spacing: .2em; }
.door .door-q { font-size: .9rem; color: var(--gray); line-height: 1.8; flex: 1; }
.door .door-q .q-orig { display: block; color: var(--ink); font-size: .84rem; }
.door .door-q .q-trans { display: block; margin-top: .4rem; color: var(--gray); font-size: .76rem; }
.door .door-src { display: block; font-size: .68rem; color: var(--gray-dim); letter-spacing: .04em; line-height: 1.8; }
.door .door-state { font-size: .72rem; letter-spacing: .3em; color: var(--gray-dim); }
.door:hover { background: var(--bg-soft); transition: background .3s; }
.door:hover .door-word { box-shadow: inset 0 -0.16em 0 var(--accent); width: fit-content; }
.door:hover .door-q { color: var(--ink); }
.door:hover .door-state { color: var(--accent); }

footer { border-top: 1px solid var(--line); padding: 3.2rem 8vw 4rem; color: var(--gray-dim); font-size: .78rem; letter-spacing: .12em; line-height: 2.2; }

@media (max-width: 880px) { .doors-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .doors-grid { grid-template-columns: 1fr; } body { font-size: 16px; } }

/* ---------- 档案层 ---------- */

.arch-link { position: fixed; top: 1.5rem; right: 3.5vw; z-index: 35; font-size: .78rem; letter-spacing: .3em; color: var(--gray); padding-bottom: .25rem; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.arch-link:hover { color: var(--ink); border-color: var(--gray-dim); }
.home-head .arch-link { position: static; }

img[data-asset] { cursor: pointer; transition: outline-color .25s; outline: 1px solid transparent; outline-offset: 3px; }
img[data-asset]:hover { outline-color: var(--gray-dim); }
.arch-hint { font-size: .82rem; color: var(--gray-dim); letter-spacing: .12em; margin: -0.6rem 0 2.4rem; }

.panel-backdrop { position: fixed; inset: 0; background: rgba(34,32,28,.55); z-index: 75; opacity: 0; pointer-events: none; transition: opacity .4s; }
.panel-backdrop.open { opacity: 1; pointer-events: auto; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 94vw); background: var(--bg); border-left: 1px solid var(--line); z-index: 80; transform: translateX(103%); transition: transform .5s cubic-bezier(.22,1,.36,1); overflow-y: auto; padding: 2.6rem 2.2rem 4rem; }
.panel.open { transform: none; }
.panel .p-close { position: sticky; top: 0; float: right; background: none; border: 1px solid var(--gray-dim); color: var(--gray); width: 40px; height: 40px; font-size: 1rem; cursor: pointer; margin-bottom: 1rem; }
.panel .p-close:hover { color: var(--ink); }
.panel .p-kicker { font-size: .7rem; letter-spacing: .35em; color: var(--gray); margin-bottom: .6rem; }
.panel .p-name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.5; margin-bottom: 1.4rem; padding-right: 2.5rem; }
.panel .p-img { width: 100%; margin-bottom: 1.6rem; background: var(--bg-soft); }
.panel dl.p-rows { margin: 0 0 1.2rem; }
.panel .p-row { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.panel .p-row dt { color: var(--gray); letter-spacing: .1em; }
.panel .p-row dd { color: var(--ink); }
.panel .p-sec { font-size: .72rem; letter-spacing: .35em; color: var(--gray); margin: 1.8rem 0 .9rem; }
.panel .p-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.panel .p-chip { font-size: .78rem; letter-spacing: .15em; border: 1px solid var(--gray-dim); padding: .3rem .85rem; color: var(--ink); cursor: pointer; }
.panel .p-chip:hover { border-color: var(--ink); }
.panel .p-chip.off { color: var(--gray-dim); cursor: default; }
.panel .p-actions { display: flex; gap: .7rem; margin-top: 2.2rem; flex-wrap: wrap; }
.panel .p-btn { flex: 1; min-width: 150px; padding: .95rem .6rem; text-align: center; border: 1px solid var(--gray-dim); font-size: .84rem; letter-spacing: .18em; color: var(--ink); cursor: pointer; background: none; font-family: var(--sans); }
.panel .p-btn:hover { border-color: var(--ink); }
.panel .p-btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.panel .p-src { margin-top: 1.8rem; font-size: .74rem; color: var(--gray-dim); line-height: 1.9; }

.arch-head { padding: 11vh 8vw 4vh; max-width: 1180px; margin: 0 auto; }
.arch-head .back { font-size: .8rem; letter-spacing: .25em; color: var(--gray); }
.arch-head .back:hover { color: var(--ink); }
.arch-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 1.2rem 0 .6rem; }
.arch-sub { color: var(--gray); font-size: .95rem; max-width: 36em; line-height: 2; }
.arch-tabs { display: flex; gap: 1.8rem; flex-wrap: wrap; padding: 1.6rem 8vw; max-width: 1180px; margin: 2.5vh auto 0; position: sticky; top: 0; background: rgba(250,247,239,.97); z-index: 20; border-bottom: 1px solid var(--line); }
.arch-tab { font-size: .84rem; letter-spacing: .22em; color: var(--gray); padding: .4rem 0; cursor: pointer; }
.arch-tab.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.arch-sec { padding: 7vh 8vw 3vh; max-width: 1180px; margin: 0 auto; }
.arch-sec h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: .08em; margin-bottom: .4rem; }
.arch-sec .sec-sub { font-size: .82rem; color: var(--gray-dim); margin-bottom: 2.4rem; letter-spacing: .08em; }

.col-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.col-card { background: #fff; border: 1px solid var(--line); padding: 1.4rem 1.4rem 1.6rem; cursor: pointer; transition: box-shadow .25s; display: block; }
.col-card:hover { box-shadow: 0 10px 30px rgba(34,32,28,.1); }
.col-card .col-coverwrap { overflow: hidden; margin-bottom: 1rem; background: var(--bg-soft); }
.col-card .col-cover { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.col-card.flat .col-cover { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; } /* 织物平铺：contain 完整呈现，不裁切 */
.col-card .c-en { font-size: .72rem; letter-spacing: .18em; color: var(--gray); }
.col-card .c-zh { font-family: var(--serif); font-size: 1.18rem; margin: .5rem 0 .9rem; line-height: 1.6; }
.col-card .c-meta { font-size: .78rem; color: var(--gray-dim); line-height: 1.9; }
.col-card .c-note { font-size: .8rem; color: var(--gray); margin-top: .7rem; line-height: 1.8; }

.chip-row { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .8rem; }
.chip { font-size: .72rem; letter-spacing: .12em; border: 1px solid var(--line); padding: .22rem .7rem; color: var(--gray); }
.chip.on { color: var(--ink); border-color: var(--gray-dim); }

.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px; }
.thumb { background: #fff; border: 1px solid var(--line); cursor: pointer; }
.thumb img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.thumb.flat img { aspect-ratio: auto; height: auto; }
.thumb:hover { border-color: var(--gray-dim); }
.thumb .t-meta { padding: .6rem .7rem .75rem; font-size: .72rem; color: var(--gray); line-height: 1.75; }
.thumb .t-meta b { display: block; color: var(--ink); font-weight: 400; font-size: .8rem; }

.simple-list { border-top: 1px solid var(--line); }
.simple-list .row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) auto; gap: 1.2rem; padding: 1.05rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; align-items: baseline; }
.simple-list .row .r2 { color: var(--gray); font-size: .84rem; }
.simple-list .row .r3 { color: var(--gray-dim); font-size: .78rem; letter-spacing: .1em; text-align: right; }
.simple-list .row a { color: var(--ink); border-bottom: 1px solid var(--gray-dim); }

.ref-list { font-size: .9rem; line-height: 2.3; color: var(--ink); }
.ref-list code { color: var(--gray); font-size: .82rem; }

.colp-head { padding: 10vh 8vw 3vh; max-width: 1180px; margin: 0 auto; }
.colp-head .c-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.7rem); margin: .8rem 0 .4rem; }
.colp-head .c-en { font-size: .85rem; letter-spacing: .16em; color: var(--gray); margin-bottom: 1.6rem; }
.colp-meta { display: flex; gap: 2.6rem; flex-wrap: wrap; margin: 1.6rem 0 0; font-size: .88rem; }
.colp-meta div span { display: block; font-size: .7rem; letter-spacing: .3em; color: var(--gray-dim); margin-bottom: .3rem; }
.colp-note { margin-top: 1.6rem; color: var(--gray); max-width: 40em; font-size: .95rem; line-height: 2; }

@media (max-width: 880px) { .col-grid { grid-template-columns: 1fr 1fr; } .thumb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (max-width: 560px) { .col-grid { grid-template-columns: 1fr; } .thumb-grid { grid-template-columns: 1fr 1fr; } }

#lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(250,247,239,.97); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 4vh 4vw; overflow: auto; }
#lightbox.open { display: flex; }
#lightbox .lb-close { position: fixed; top: 2.4vh; right: 2.4vw; background: var(--bg); border: 1px solid var(--gray-dim); color: var(--gray); width: 46px; height: 46px; font-size: 1.2rem; cursor: pointer; }
#lightbox .lb-close:hover { color: var(--ink); border-color: var(--ink); }
#lightbox .lb-img { max-width: min(1000px, 92vw); max-height: 76vh; object-fit: contain; }
#lightbox .lb-bar { display: flex; gap: 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; width: min(1000px, 92vw); margin-top: 1.6rem; color: var(--gray); font-size: .85rem; line-height: 1.9; }
#lightbox .lb-bar b { display: block; color: var(--ink); font-weight: 400; font-size: .95rem; margin-bottom: .2rem; }
#lightbox .lb-dl, .lb-src { border: 1px solid var(--gray-dim); color: var(--ink); padding: .75rem 1.4rem; letter-spacing: .2em; font-size: .84rem; white-space: nowrap; text-decoration: none; }
#lightbox .lb-dl:hover, .lb-src:hover { border-color: var(--ink); }
.lb-actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.dl-link { color: var(--ink); border-bottom: 1px solid var(--gray-dim); letter-spacing: .1em; font-size: .82rem; white-space: nowrap; }
.dl-link:hover { border-color: var(--ink); }
button.dl-link { background: none; border: none; border-bottom: 1px solid var(--gray-dim); cursor: pointer; font-family: var(--sans); padding: 0; }
button.dl-link:hover { border-color: var(--ink); }
.lb-frame { position: relative; width: min(1000px, 92vw); aspect-ratio: 16 / 9; background: #111; }
.lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* 原文优先引文（双语层级：无标注字） */
.cite { display: block; margin-top: .9rem; color: var(--gray); font-size: .8rem; letter-spacing: .08em; line-height: 1.8; font-family: var(--sans); }
.q-trans { display: block; margin-top: .85em; color: var(--gray); font-size: .88em; line-height: 2; letter-spacing: .03em; font-family: var(--sans); font-weight: 400; }
.q-orig { display: block; }

/* 设计师面板 */
.des-portrait { width: min(260px, 60%); margin: 0 0 2rem 0; border: 1px solid var(--line); }
.des-portrait-cap { color: var(--gray-dim); font-size: .78rem; margin: -1.2rem 0 2.4rem; }
.h-sm { font-family: var(--sans); font-size: .85rem; letter-spacing: .35em; color: var(--gray); font-weight: 400; margin: 3rem 0 1.2rem; border-bottom: 1px solid var(--line); padding-bottom: .8rem; }
.bio-list .row { grid-template-columns: 88px minmax(0,1fr) auto; }
.bio-list .yr { color: var(--accent); font-family: var(--serif); }
.bio-list .row .r2 { font-size: .78rem; }
.bio-src { color: var(--gray-dim); }
.bio-src a { color: var(--gray); border-bottom: 1px solid var(--line); }

.ow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ow { background: #fff; border: 1px solid var(--line); padding: 1.8rem 1.7rem 2rem; }
.ow-orig { font-family: var(--serif); font-size: 1.02rem; line-height: 2; margin-bottom: .8rem; }
.ow-zh { color: var(--gray); font-size: .88rem; line-height: 2; margin-bottom: .8rem; font-family: var(--sans); }
.ow-cite { color: var(--gray-dim); font-size: .76rem; letter-spacing: .06em; }
.ow-jump { margin-top: .7rem; }
@media (max-width: 880px) { .ow-grid { grid-template-columns: 1fr; } }

.src-link { color: var(--ink); border-bottom: 1px solid var(--gray-dim); font-size: .82rem; }
.src-link:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- 体验路径页（结构沿用参考实现；令牌为浅色画廊） ---------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .cine-line, .cine { animation: none !important; } }

.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 3.5vw; background: linear-gradient(var(--bg) 30%, rgba(250,247,239,0)); }
.topbar a.back { font-size: .85rem; letter-spacing: .25em; color: var(--gray); transition: color .3s; }
.topbar a.back:hover { color: var(--ink); }

/* 开屏仪式：米白底 + 墨字 + 玫红点睛（原话为主文字，译文附后） */
.cine { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; animation: cineOut .9s ease 9.4s forwards; }
.cine.gone { display: none; }
.cine-line { position: absolute; max-width: 30em; padding: 0 8vw; text-align: center; font-family: var(--serif); font-size: clamp(1.25rem, 3.2vw, 2.1rem); line-height: 1.95; opacity: 0; animation: cineLine 3s ease calc(var(--i) * 3.1s) both; }
.cine-line .q-trans { font-size: .62em; margin-top: 1em; color: var(--gray); }
.cine-line .cite { font-size: .78rem; color: var(--gray-dim); }
.cine-skip { position: absolute; bottom: 4.5vh; font-size: .74rem; letter-spacing: .3em; color: var(--gray-dim); animation: cineSoft 2.7s ease .6s both; }
@keyframes cineLine { 0% { opacity: 0; transform: translateY(12px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cineSoft { from { opacity: 0; } to { opacity: 1; } }
@keyframes cineOut { to { opacity: 0; visibility: hidden; } }

/* L1 全屏证据 */
.l1 { height: 100vh; position: relative; display: flex; align-items: flex-end; background: var(--bg-soft); }
.l1 img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: .94; }
.l1 .l1-text { position: relative; z-index: 2; padding: 0 8vw 11vh; max-width: 940px; }
.l1 .l1-text::before { content: ""; position: absolute; inset: -14vh -8vw -11vh; z-index: -1; background: linear-gradient(to top, rgba(20,16,10,.72), transparent 70%); }
.l1 .l1-tag { font-size: .78rem; letter-spacing: .35em; color: #fff; margin-bottom: 1.1rem; text-shadow: 0 1px 8px rgba(20,16,10,.85); }
.l1 .l1-sentence { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1.95; color: #fff; }
.l1 .l1-sentence .q-trans { font-size: .68em; color: #e8e2d4; margin-top: .8rem; }
.l1 .l1-sentence .cite { color: #cfc9bb; font-size: .8rem; }
.l1 .scroll-cue { position: absolute; right: 8vw; bottom: 11vh; z-index: 2; font-size: .78rem; letter-spacing: .3em; color: #fff; writing-mode: vertical-rl; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* 问题与答案 */
.answer-words { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 3.4rem; }
.aw { background: #fff; padding: 2rem 1.6rem; }
.aw .aw-word { font-family: var(--serif); font-size: 2rem; letter-spacing: .18em; margin-bottom: .9rem; }
.aw .aw-gloss { font-size: .86rem; color: var(--gray); line-height: 1.95; }
.aw .aw-gloss .q-trans { display: block; margin-top: .55rem; color: var(--ink); }
.aw .aw-gloss .cite { margin-top: .6rem; }
.lede { font-size: 1.02rem; color: var(--ink); max-width: 36em; }

/* 证据 */
.evidence-item { display: grid; grid-template-columns: minmax(260px, 460px) 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: 7vh 0; border-bottom: 1px solid var(--line); }
.evidence-item:last-child { border-bottom: none; }
.evidence-item.flip { grid-template-columns: 1fr minmax(260px, 460px); }
.evidence-item.flip figure { order: 2; }
.evidence-item figure img { width: 100%; }
.evidence-item .ev-tag { font-size: .76rem; letter-spacing: .28em; color: var(--gray); margin-bottom: 1rem; }
.evidence-item h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; letter-spacing: .1em; margin-bottom: 1.1rem; }
.evidence-item p { color: var(--ink); max-width: 28em; }
.evidence-item p .q-trans { display: block; color: var(--gray); margin-top: .5rem; }
.evidence-item p .cite { margin-top: .6rem; }

/* 引文幕 */
.quote { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.quote blockquote { max-width: 1180px; margin: 0 auto; padding: 14vh 8vw; }
.quote .q-text { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.85; margin-bottom: 2.2rem; }
.quote .q-text .q-trans { font-size: .58em; margin-top: 1.3rem; color: var(--gray); }
.quote .q-attr { font-size: .85rem; letter-spacing: .2em; color: var(--gray); }

/* 对比（并排陈列，不解读） */
.cmp-intro { color: var(--gray); max-width: 32em; margin-bottom: 4rem; }
.cmp-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.cmp { background: #fff; border: 1px solid var(--line); padding: 1.6rem 1.4rem 1.8rem; }
.cmp img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; margin-bottom: 1.4rem; }
.cmp .cmp-name { font-size: .8rem; letter-spacing: .3em; color: var(--gray); margin-bottom: .5rem; }
.cmp .cmp-note { font-size: .84rem; color: var(--ink); line-height: 1.9; }
.cmp.fassett { background: var(--bg-soft); }
.cmp.fassett .cmp-name { color: var(--accent); }
.cmp-close { margin-top: 3.4rem; font-size: 1rem; max-width: 38em; color: var(--ink); line-height: 2; }

/* 收束 */
.takeaway { text-align: left; border-top: 1px solid var(--line); }
.takeaway .tk-line1 { font-family: var(--serif); font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.8; margin-bottom: 2rem; }
.takeaway .tk-line1 .q-trans { display: block; font-size: .6em; color: var(--gray); margin-top: 1.4rem; }
.takeaway .tk-line2 { color: var(--gray); max-width: 34em; margin-bottom: 4rem; font-size: .95rem; letter-spacing: .06em; }
.next-door { display: inline-flex; flex-direction: column; gap: .6rem; padding: 1.6rem 2rem; border: 1px solid var(--line); color: var(--gray); font-size: .95rem; background: #fff; }
.next-door .nd-q { color: var(--ink); }
.toc { display: inline-block; margin-top: 3rem; font-size: .85rem; letter-spacing: .25em; color: var(--gray); border-bottom: 1px solid var(--gray-dim); padding-bottom: .3rem; }
.toc:hover { color: var(--ink); border-color: var(--ink); }

/* 深读覆盖层 */
.deep-toggle { position: fixed; right: 3.5vw; bottom: 4.5vh; z-index: 40; background: var(--bg); border: 1px solid var(--gray-dim); color: var(--gray); font-size: .82rem; letter-spacing: .35em; padding: .7rem 1.4rem; cursor: pointer; transition: color .3s, border-color .3s; }
.deep-toggle:hover { color: var(--ink); border-color: var(--ink); }
.deep { position: fixed; inset: 0; z-index: 70; background: var(--bg); overflow-y: auto; transform: translateY(100%); transition: transform .55s cubic-bezier(.22,1,.36,1); visibility: hidden; }
.deep.open { transform: translateY(0); visibility: visible; }
.deep-inner { max-width: 860px; margin: 0 auto; padding: 9vh 8vw 14vh; }
.deep-close { position: fixed; top: 2.4vh; right: 3.5vw; background: none; border: 1px solid var(--gray-dim); color: var(--gray); width: 44px; height: 44px; font-size: 1.1rem; cursor: pointer; }
.deep-close:hover { color: var(--ink); }
.deep h2 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; letter-spacing: .14em; margin-bottom: .6rem; }
.deep .deep-sub { color: var(--gray); font-size: .85rem; margin-bottom: 4rem; }
.deep h3 { font-size: .85rem; letter-spacing: .4em; color: var(--gray); font-weight: 400; margin: 3.4rem 0 1.6rem; border-bottom: 1px solid var(--line); padding-bottom: .8rem; }
.deep .q-block { margin-bottom: 2.2rem; }
.deep .q-block .q-orig { font-family: var(--serif); font-size: 1.08rem; line-height: 2.1; margin-bottom: .7rem; }
.deep .q-block .q-zh { color: var(--gray); font-size: .95rem; margin-bottom: .6rem; }
.deep .q-block .q-src { color: var(--gray-dim); font-size: .78rem; letter-spacing: .08em; }
.deep .tl { list-style: none; }
.deep .tl li { display: grid; grid-template-columns: 110px 1fr; gap: 1.6rem; padding: .85rem 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.deep .tl .yr { font-family: var(--serif); color: var(--accent); }
.deep .src-list { list-style: none; font-size: .9rem; color: var(--ink); }
.deep .src-list li { padding: .5rem 0; }
.deep .deep-note { margin-top: 4rem; color: var(--gray-dim); font-size: .8rem; line-height: 2; }

@media (max-width: 880px) { .answer-words { grid-template-columns: 1fr 1fr; } .evidence-item, .evidence-item.flip { grid-template-columns: 1fr; } .evidence-item.flip figure { order: 0; } .cmp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .answer-words, .cmp-grid { grid-template-columns: 1fr; } }