/* 漆盘纹样系统：独立于功能样式，便于继续打磨展陈。 */
:root {
  --page-gutter: clamp(24px, 4.8vw, 96px);
  --cloud-image: url("assets/lacquer-cloud.png");
  --rim-red: #b9432a;
  --rim-jade: #728d86;
  --main-ink: #21130f;
}

body { color: var(--main-ink); background-color: #f1e5cc; }
.paper-noise { opacity: .09; }
.edge-mark {
  display: block;
  width: 12px;
  border-inline: 0;
  background: linear-gradient(to right, #742a1e 0 2px, #28100c 2px 5px, #768c82 5px 6px, transparent 6px);
  opacity: .85;
  z-index: 15;
}
.edge-mark::after { display: none; }
.edge-mark-left { left: 0; }
.edge-mark-right { right: 0; transform: scaleX(-1); }

/* 全幅的展厅骨架。阅读内容由边距控制，分割线贯穿视口。 */
.museum-bar {
  max-width: none;
  width: 100%;
  height: 92px;
  margin: 0;
  padding: 19px var(--page-gutter);
  color: #f2dfba;
  background: #1b0b08;
  border-bottom: 2px solid var(--rim-red);
  box-shadow: inset 0 -5px #1b0b08, inset 0 -6px var(--rim-jade);
}
.brand-seal { color: #e26038; border-color: #c54a2f; box-shadow: inset 0 0 0 2px #1b0b08, inset 0 0 0 3px #c54a2f; }
.brand small, .museum-note { color: #d9c4a5; }
.brand small { font-size: 11px; }
.museum-note { font-size: 13px; }
.museum-note em { color: #c9d6c6; }
.museum-note i { background: var(--rim-jade); }
.museum-note i::before { background: var(--rim-red); }
#views { max-width: none; width: 100%; padding: 0 0 110px; }
.view { width: 100%; }
.view.active { animation: none; }

/* 首页只保留两处沿边连续的云纹，其余留白交给器物。 */
.hero-home {
  min-height: min(800px, calc(100svh - 92px));
  width: 100%;
  margin: 0;
  padding: 82px calc(var(--page-gutter) + 16px) 87px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0,1.04fr) minmax(350px,.96fr);
  gap: clamp(38px,7vw,135px);
  color: #f5e8ce;
  background:
    radial-gradient(circle at 73% 47%, rgba(144,55,31,.23), transparent 33%),
    radial-gradient(circle at 15% 85%, rgba(103,128,119,.13), transparent 31%),
    #1b0c09;
}
.hero-home::before, .hero-home::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.hero-home::before { inset: 18px 24px; border: 1px solid rgba(198,76,43,.76); }
.hero-home::after { inset: 27px 33px; border: 1px solid rgba(111,139,130,.35); }
.hero-cloud { position: absolute; z-index: 0; display: block; background-position: center; background-size: contain; background-repeat: no-repeat; pointer-events: none; }
.cloud-sweep-top { width: 420px; height: 140px; top: -33px; left: 15px; background-image: url("assets/lacquer-cloud-long.png"); opacity: .18; }
.cloud-sweep-bottom { width: 440px; height: 148px; right: 9px; bottom: -42px; background-image: url("assets/lacquer-cloud-long.png"); opacity: .17; transform: scaleX(-1); }
.header-link { min-height: 42px; padding: 7px 3px 7px 17px; color: #e9cfad; border: 0; border-left: 1px solid #a84b31; background: transparent; font-family: var(--serif); font-size: 16px; letter-spacing: .11em; }
.header-link span { color: #db704c; font-family: sans-serif; font-size: 20px; margin-left: 9px; }
.header-link:hover { color: #fff1d7; }
.hero-copy { padding-left: clamp(18px,3vw,48px); }
.hero-brush-rule { width: 170px; height: 11px; display: block; border-top: 2px solid #d56945; border-bottom: 1px solid #7f9a8a; transform: rotate(-2deg); }
.hero-copy h1 { margin-top: 28px; }
.hero-copy h1 span { color: #f6e9ca; font-size: clamp(62px,6.8vw,98px); }
.hero-copy h1 em { margin: 8px 0 0 .45em; color: #db683e; font-size: clamp(49px,5.5vw,78px); }
.hero-lead { width: min(540px,100%); margin-top: 32px; color: #ddcdb7; font-size: clamp(16px,1.15vw,18px); line-height: 1.9; }
.hero-actions { margin-top: 36px; }
.brush-button { min-width: 220px; min-height: 68px; box-shadow: 8px 9px 0 #6d8b80; }
.brush-button:hover { box-shadow: 4px 5px 0 #6d8b80; }
.brush-button span { font-size: 22px; }
.brush-button i { font-size: 12px; opacity: .82; }
.text-button { color: #f0d4b7; border-bottom-color: #849d91; font-size: 14px; }
.text-button span { color: #e07950; }
.hero-notes { margin-top: 50px; }
.hero-notes span { color: #d3dccb; font-size: 15px; letter-spacing: .06em; border-top: 1px solid #9c4d36; padding-top: 11px; }
.hero-object { min-height: 500px; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hero-art-stage { width: 100%; height: min(470px,36vw); min-height: 345px; flex-shrink: 0; display: grid; place-items: center; position: relative; background: radial-gradient(ellipse at 50% 52%,rgba(126,62,37,.26),transparent 67%); }
.hero-art-stage::after { content: ""; position: absolute; bottom: 7px; left: 13%; right: 13%; height: 1px; background: linear-gradient(90deg,transparent,#a54830 17%,#849f8e 50%,#a54830 83%,transparent); opacity: .75; }
.hero-art-stage img { width: min(100%,570px); height: min(470px,36vw); object-fit: contain; filter: drop-shadow(0 9px 19px rgba(0,0,0,.18)); }
.hero-art-stage img[src*="hero-canvas-plate"] { scale: 1.18; }
.hero-art-stage img.arrive { animation: hero-sketch-in .6s ease-out both; }
@keyframes hero-sketch-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.hero-art-caption { width: min(100%,530px); min-height: 62px; display: grid; place-items: center; color: #efe0c1; text-align: center; }
.hero-art-caption strong { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: .13em; }

.lacquer-ribbon {
  width: 100%;
  height: 105px;
  margin: 0;
  border-top: 2px solid #b9432a;
  border-bottom: 2px solid #728d86;
  background-size: auto 105px;
  box-shadow: 0 14px 32px rgba(45,19,12,.16);
}

.home-ledger {
  width: 100%;
  margin: 0;
  padding: 0 var(--page-gutter);
  grid-template-columns: minmax(250px,29%) 1fr;
  border-top: 0;
  border-bottom: 2px solid #401a12;
  background: #eadbc0;
}
.ledger-title { padding: 31px 28px 31px 0; border-right-color: rgba(58,27,20,.35); }
.ledger-title span { font-size: 23px; }
.ledger-title small { font-size: 11px; }
.stat { padding: 25px 12px; }
.stat + .stat { border-left-color: rgba(58,27,20,.28); }
.stat b { font-size: clamp(34px,3.4vw,49px); }
.stat span { margin-top: 10px; color: #553d30; font-size: 13px; }

/* 三段内容的色调由纸到青灰再到漆黑，纹样在段落之间重复变奏。 */
.block { margin: 0; padding: 74px var(--page-gutter) 0; position: relative; }
.block-head { margin-bottom: 26px; min-height: 58px; position: relative; border-bottom: 0; }
.block-head::after {
  content: ""; position: absolute; bottom: 0; left: calc(-1 * var(--page-gutter));
  width: 100vw; height: 2px;
  background: linear-gradient(to right, #9b3a29 0 18%, #799388 18% 24%, #9b3a29 24% 100%);
  opacity: .7;
}
.block-head > div > span { width: 38px; height: 38px; font-size: 19px; transform: translateY(7px) rotate(-3deg); }
.block-head h2 { font-size: clamp(23px,2.1vw,32px); }
.block-head small { font-size: 12px; }
.section-link { font-size: 14px; }
.daily-block { padding-bottom: 84px; overflow: hidden; }
.daily-block::before {
  content: ""; position: absolute; right: -1%; top: -18px; width: clamp(230px,26vw,390px); height: clamp(230px,26vw,390px);
  background: url("assets/lacquer-cloud-fork.png") center / contain no-repeat; opacity: .11; transform: rotate(13deg); pointer-events: none;
}
.daily-block::after { content: ""; position: absolute; left: -110px; bottom: -62px; width: 510px; height: 188px; background: url("assets/lacquer-cloud-long.png") center / contain no-repeat; opacity: .12; pointer-events: none; }
.daily { position: relative; grid-template-columns: minmax(250px,38%) 1fr 100px; border: 1px solid #7b3627; }
.daily::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(116,146,133,.34); pointer-events: none; }
.daily .d-image { height: 320px; }
.daily .d-tag { color: #e8885a; font-size: 12px; }
.daily .d-name { font-size: clamp(28px,3vw,40px); }
.daily .d-dy { color: #adbcaf; font-size: 14px; }
.daily .d-ex { color: #e7d9c1; font-size: 16px; line-height: 1.75; }
.daily .d-more { color: #e8885a; font-size: 14px; }
.daily .d-seal { color: #e56f47; }
.history-block { padding-bottom: 75px; overflow: hidden; background: #dce1d2; border-top: 2px solid #779187; border-bottom: 2px solid #923d2d; }
.history-block::before { content: ""; position: absolute; top: -23px; right: -1%; width: 270px; height: 270px; background: var(--cloud-image) center / contain no-repeat; opacity: .1; transform: rotate(10deg); }
.history-block::after { content: ""; position: absolute; left: -95px; bottom: -54px; width: 590px; height: 204px; background: url("assets/lacquer-cloud-long.png") center / contain no-repeat; opacity: .12; transform: scaleX(-1); pointer-events: none; }
.empty-inline { color: #4a4033; font-size: 15px; }
.recent-item { min-width: 245px; height: 72px; font-size: 15px; border-left: 3px solid var(--rim-red); }
.recent-item .th { width: 55px; height: 55px; }
.recent-item .cf { font-size: 13px; }
.collection-block { padding-bottom: 84px; overflow: hidden; color: #f3e6cd; background: #21100c; border-bottom: 2px solid #a53e29; }
.collection-block::before { content: ""; position: absolute; right: -74px; bottom: -55px; width: 690px; height: 300px; background: url("assets/lacquer-cloud-long.png") center / contain no-repeat; opacity: .14; transform: rotate(-8deg); pointer-events: none; }
.collection-block .block-head h2 { color: #f3e6cd; }
.collection-block .section-link { color: #c8d5c4; }
.collection-block .mini { border-bottom-color: #b75136; color: #f3e6cd; }
.collection-block .mini .nm { font-size: 19px; }
.collection-block .mini .dy { color: #b1c0b0; font-size: 13px; }
.mini { flex-basis: clamp(205px,18vw,300px); min-height: 320px; }
.mini.locked .mini-image { filter: saturate(.79); opacity: 1; }
.mini .mini-image { height: 225px; }
.mini .glyph { top: 200px; }
.site-colophon {
  width: 100%; min-height: 160px; margin: 0; padding: 50px var(--page-gutter);
  color: #e2d1b4; background: #1b0b08;
  border-top: 1px solid #729087; border-bottom: 3px solid #a64129;
  font-size: 13px;
}
.site-colophon i { width: 7px; height: 7px; }

/* 内页的页眉与图鉴边角继续使用云纹，不另起一套装饰。 */
.page-head {
  min-height: 340px; margin: 0; padding: 76px var(--page-gutter) 48px;
  position: relative; isolation: isolate; overflow: hidden;
  color: #f1e5cb; background: #30120d;
  border-bottom: 3px solid #a6472d;
}
.page-head::before, .page-head::after { content: ""; position: absolute; z-index: -1; width: 350px; height: 350px; background: var(--cloud-image) center / contain no-repeat; opacity: .2; pointer-events: none; }
.page-head::before { top: -82px; left: -86px; background-image: url("assets/lacquer-cloud-fork.png"); transform: rotate(-19deg); }
.page-head::after { right: -110px; bottom: -125px; width: 530px; background-image: url("assets/lacquer-cloud-long.png"); transform: rotate(4deg); }
.page-head .eyebrow { color: #e27950; font-size: 12px; }
.page-head .eyebrow b { color: #b8c7b5; }
.page-title-row h1 { font-size: clamp(50px,5.6vw,77px); }
.page-title-row p { color: #e0d0b6; font-size: 16px; line-height: 1.8; }
.progress-track { height: 5px; background: rgba(239,226,196,.24); }
.progress-fill { background: #d5633d; }
.progress-num { color: #e89a70; font-size: 14px; }
.chips { margin: 30px var(--page-gutter) 0; }
.chip { padding: 10px 18px; color: #3b2b21; border-color: #8b7560; font-size: 14px; }
.chip.on { color: #f7eacc; }
.relic-grid { margin: 34px var(--page-gutter) 86px; gap: 34px 23px; }
#relicGrid > .relic-card:nth-child(1) { grid-column: span 7; }
#relicGrid > .relic-card:nth-child(2) { grid-column: span 5; }
#relicGrid > .relic-card:nth-child(3),
#relicGrid > .relic-card:nth-child(4),
#relicGrid > .relic-card:nth-child(5) { grid-column: span 4; }
#relicGrid > .relic-card:nth-child(6) { grid-column: span 5; }
#relicGrid > .relic-card:nth-child(7) { grid-column: span 7; }
#relicGrid > .relic-card:nth-child(8) {
  grid-column: 1 / -1;
  min-height: 460px;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  grid-template-rows: 1fr auto;
  color: #f4e5c9;
  border: 1px solid #97402c;
  background: #1b0b08;
}
#relicGrid > .relic-card:nth-child(8) .rc-image-wrap { grid-column: 1; grid-row: 1 / 3; height: 100%; border: 0; border-right: 1px solid #ad4b32; }
#relicGrid > .relic-card:nth-child(8) .rc-info { grid-column: 2; grid-row: 1; align-self: end; padding: 80px 40px 20px; }
#relicGrid > .relic-card:nth-child(8) .rc-name { font-size: clamp(29px,3vw,45px); }
#relicGrid > .relic-card:nth-child(8) .rc-en { color: #c7bb9e; }
#relicGrid > .relic-card:nth-child(8) .rc-meta { grid-column: 2; grid-row: 2; margin: 0 40px 40px; color: #d1c5a8; border-top-color: #836052; }
#relicGrid[data-filtered="true"] { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
#relicGrid[data-filtered="true"] > .relic-card { grid-column: auto; display: flex; min-height: 430px; color: var(--main-ink); background: transparent; border: 0; border-bottom: 2px solid #8c3c2c; }
#relicGrid[data-filtered="true"] > .relic-card .rc-image-wrap { height: 280px; border: 1px solid #aa7b67; }
#relicGrid[data-filtered="true"] > .relic-card .rc-info { padding: 18px 0 14px; }
#relicGrid[data-filtered="true"] > .relic-card .rc-meta { margin: auto 0 0; color: var(--ink-soft); border-top-color: var(--hairline); }
.relic-card { border-bottom: 2px solid #8c3c2c; }
.relic-card::before { content: ""; position: absolute; z-index: 2; bottom: -8px; right: -9px; width: 108px; height: 108px; background: url("assets/lacquer-cloud-fork.png") center / contain no-repeat; opacity: .13; transform: rotate(7deg); pointer-events: none; }
.relic-card .rc-image-wrap { border: 1px solid #aa7b67; }
.relic-card .rc-art-label { display: none; }
.relic-card.illustrated .rc-image-wrap, .mini.illustrated .mini-image, .daily.illustrated .d-image, .hero.illustrated { background: radial-gradient(circle at 50% 42%,#4b342b 0,#21120e 72%); }
.relic-card.illustrated .rc-image { object-fit: contain; padding: 18px 16px 8px; filter: none; }
.relic-card.illustrated .rc-image[src*="relic-realistic-plate"] { padding: 4px; }
.relic-card.illustrated:hover .rc-image { filter: none; }
.relic-card.illustrated .rc-art-label { position: absolute; right: 12px; bottom: 12px; display: block; padding: 5px 8px; color: #f2ddbd; background: rgba(35,16,12,.8); border: 1px solid rgba(221,142,103,.5); font-size: 12px; letter-spacing: .08em; }
.relic-card .rc-line-mini { width: 88px; height: 83px; position: absolute; z-index: 1; top: 48px; right: 13px; display: grid; place-items: center; background: rgba(27,10,8,.91); border: 1px solid #a7553b; box-shadow: 4px 5px 0 rgba(23,9,7,.38); transform: rotate(3deg); pointer-events: none; }
.relic-card .rc-line-mini::after { content: "线稿"; position: absolute; right: 4px; bottom: 3px; color: #e8c9a9; font-family: var(--serif); font-size: 10px; letter-spacing: .08em; }
.relic-card .rc-line-mini img { width: 92%; height: 83%; object-fit: contain; }
#relicGrid > .relic-card:nth-child(8) .rc-line-mini { width: 118px; height: 112px; }
.mini.illustrated .mini-image, .daily.illustrated .d-image { object-fit: contain; padding: 13px; filter: none; opacity: 1; }
.mini.illustrated .mini-image[src*="relic-realistic-plate"], .daily.illustrated .d-image[src*="relic-realistic-plate"] { padding: 4px; }
.mini.illustrated:hover .mini-image { filter: none; }
.hero.illustrated img { padding: 10px 16px 24px; }
.hero.line-art { background: radial-gradient(circle at 50% 44%,#47332a 0,#1b0b08 78%); }
.art-switch { position: absolute; z-index: 4; top: 10px; right: 10px; max-width: calc(100% - 20px); display: flex; gap: 2px; padding: 3px; background: rgba(26,10,8,.9); border: 1px solid rgba(222,150,113,.55); }
.art-switch button { min-height: 32px; padding: 6px 9px; color: #d7c0a4; border: 0; background: transparent; font-family: var(--serif); font-size: 12px; white-space: nowrap; }
.art-switch button[aria-pressed="true"] { color: #fff0d1; background: #9e402b; }
.art-switch button:hover { color: #fff6e7; }
.relic-motif[hidden] { display: none; }
.relic-motif { position: relative; z-index: 1; min-height: 185px; margin-top: 25px; display: grid; grid-template-columns: minmax(165px,.75fr) minmax(0,1fr); color: #eedec1; background: #24110d; border: 1px solid #a04b32; }
.relic-motif-image { min-height: 185px; padding: 15px; display: grid; place-items: center; overflow: hidden; border-right: 1px solid #a04b32; background: radial-gradient(circle,#453028,#21100c 76%); }
.relic-motif-image img { width: 100%; max-height: 175px; object-fit: contain; }
.relic-motif-copy { padding: 19px 21px; display: flex; flex-direction: column; align-items: flex-start; }
.relic-motif-copy small { color: #d98261; font-size: 11px; letter-spacing: .1em; }
.relic-motif-copy strong { margin-top: 7px; font-family: var(--serif); font-size: 23px; font-weight: 400; letter-spacing: .07em; }
.relic-motif-copy p { margin-top: 8px; color: #d9c7ae; font-size: 13px; line-height: 1.7; }
.relic-motif-copy button { margin-top: auto; padding: 10px 0 0; color: #efa47f; border: 0; border-bottom: 1px solid #a34e36; background: transparent; font-size: 13px; }
.relic-card.locked .rc-image { filter: saturate(.83) contrast(1.06); opacity: 1; }
.relic-card.locked.illustrated .rc-image { filter: none; }
.relic-card .rc-name { font-size: 23px; }
.relic-card .rc-index, .relic-card .rc-en, .relic-card .rc-meta { font-size: 12px; }
.relic-card .rc-state { font-size: 12px; }
.relic-card .rc-3d { font-size: 12px; }

/* 识别台与个人札记把纹样降为局部标记，避免干扰任务。 */
.scan-layout { margin: 48px var(--page-gutter) 0; gap: 30px; }
.viewfinder { min-height: 440px; border: 1px solid #9c4b34; box-shadow: inset 0 0 0 7px #1b0b08, inset 0 0 0 8px #718c81; }
.viewfinder strong { font-size: 25px; }
.viewfinder small { color: #d8c6ae; font-size: 14px; }
.viewfinder.has-file { min-height: 78px; }
.api-state { color: #4a392e; font-size: 13px; }
.scan-guide { border: 1px solid #8e2d1b; box-shadow: inset 0 0 0 7px #b83b1f, inset 0 0 0 8px #e9b898; }
.scan-guide::before { content: ""; position: absolute; top: -30px; right: -40px; width: 190px; height: 190px; background: var(--cloud-image) center / contain no-repeat; opacity: .28; transform: scaleX(-1); }
.scan-guide::before { top: -14px; right: -120px; width: 420px; height: 225px; background-image: url("assets/coffin-cloud.png"); opacity: .21; transform: rotate(-12deg); }
.scan-guide li strong { font-size: 17px; }
.scan-guide li small, .scan-guide p { font-size: 13px; }
.sample span { font-size: 15px; }
.profile { margin: 48px var(--page-gutter) 0; padding: 34px 42px; border: 2px solid #a4432e; box-shadow: inset 0 0 0 9px #1b0b08, inset 0 0 0 10px #6b887e; }
.profile { position: relative; overflow: hidden; }
.profile::before { content: ""; position: absolute; top: -13px; right: -30px; width: min(540px,62%); height: 120px; background: url("assets/lacquer-cloud-long.png") right top / contain no-repeat; opacity: .2; pointer-events: none; }
.p-name { font-size: 26px; }
.p-tag { font-size: 13px; }
.profile-scan { font-size: 14px; }
.journal-section, .settings-panel { margin-inline: 0; }
.mine-columns { margin: 0 var(--page-gutter); }
.seal-cell .s-tick { font-size: 12px; }
.h-nm { font-size: 16px; }
.h-tm, .h-cf, .fav-chip, .setting-row small, .link-btn { font-size: 13px; }

/* ---------- 格物账号（登录 / 注册表单） ---------- */
.account-form { max-width: 520px; }
.account-fields { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 12px; }
.account-fields input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--ink); background: rgba(255, 253, 246, .92);
  border: 1px solid var(--hairline); border-radius: 8px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.account-fields input:focus {
  border-color: var(--cinnabar);
  box-shadow: 0 0 0 3px rgba(184, 59, 31, .13);
}
.account-fields input::placeholder { color: var(--ink-soft); opacity: .62; }
.account-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.account-actions .cta-big { flex: 1 1 auto; min-width: 180px; padding: 12px 20px; font-size: 15px; }
/* 登录做成主按钮，注册是次要操作 */
.account-actions .link-btn {
  padding: 11px 22px; border: 1px solid var(--lacquer-red); border-radius: 8px;
  background: var(--lacquer-red); color: #f4e7cb; font-size: 14px;
  letter-spacing: .16em; cursor: pointer; transition: background .2s, border-color .2s;
}
.account-actions .link-btn:hover { background: var(--cinnabar); border-color: var(--cinnabar); }
.account-actions .account-register {
  background: transparent; color: var(--cinnabar);
  border: 1px solid var(--cinnabar); border-radius: 8px;
}
.account-actions .account-register:hover { background: rgba(184, 59, 31, .08); }
/* 取消：无边框文字，避免与「登录」混淆 */
.account-actions #acCancel {
  border: 0; background: none; color: var(--ink-soft);
  padding: 11px 10px; letter-spacing: .1em;
}
.account-actions #acCancel:hover { color: var(--cinnabar); background: none; }
.account-msg { margin-top: 10px; font-size: 13px; line-height: 1.6; min-height: 20px; color: var(--ink-soft); }
.account-msg.ok { color: #3f6b45; }
.account-msg.err { color: #a3301c; }
#accountRow small { line-height: 1.5; }
.project-note { margin: 76px var(--page-gutter) 0; border: 2px solid #97321f; box-shadow: inset 0 0 0 8px #b83b1f, inset 0 0 0 9px #e2a282; }
.project-note p { font-size: 15px; }
.project-note { position: relative; overflow: hidden; padding-bottom: 61px; }
.project-note::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 29px; background: url("assets/lacquer-zigzag.png") center / auto 34px repeat-x; opacity: .82; pointer-events: none; }
.history-block::before { background-image: url("assets/coffin-cloud.png"); width: 465px; height: 225px; top: 8px; opacity: .11; }
.codex-head::after { background-image: url("assets/bronze-thunder.png"); width: 450px; height: 330px; right: -22px; bottom: -58px; opacity: .24; transform: rotate(0); }
.viewer-stage::after { background-image: url("assets/bronze-thunder.png"); width: 345px; height: 232px; opacity: .17; }

/* 弹窗像一页带漆绘边角的藏品档案。 */
.paper { border: 2px solid #a3452c; box-shadow: 0 35px 100px rgba(0,0,0,.45), inset 0 0 0 7px #f7edd7, inset 0 0 0 8px #779187; }
.paper::after { content: ""; position: absolute; top: -16px; right: -18px; width: 195px; height: 195px; background: url("assets/lacquer-cloud-fork.png") center / contain no-repeat; opacity: .17; transform: rotate(24deg); pointer-events: none; }
.vcol small, .cell .k, .src, .conf, .facts li, .view3d-btn, .icon-btn, .close { font-size: 13px; }
.cell .v, .intro { font-size: 16px; }
.facts li { font-size: 15px; }
.viewer-shell { width: min(1320px,96vw); border: 2px solid #a3422e; box-shadow: inset 0 0 0 8px #1b0b08, inset 0 0 0 9px #6f8c82; }
.viewer-stage::after { content: ""; position: absolute; z-index: 1; left: 14px; top: 12px; width: 345px; height: 232px; background: url("assets/bronze-thunder.png") center / contain no-repeat; opacity: .17; pointer-events: none; }

.tabbar { width: min(690px,calc(100vw - 32px)); height: 78px; grid-template-columns: repeat(5,minmax(0,1fr)); border-color: #a5422c; box-shadow: 0 14px 44px rgba(21,9,6,.38), inset 0 0 0 4px #1b0b08, inset 0 0 0 5px #687f77; }
.tabbar button { font-size: 12px; }
.tabbar svg { width: 23px; height: 23px; }
.tabbar .scan-nav-disc { width: 65px; height: 65px; margin-top: -34px; border-width: 4px; }
.tabbar .scan-nav-disc svg { width: 31px; height: 31px; }
.tabbar .scan-nav > span:last-child { margin-top: -1px; font-size: 13px; color: #f3d4b9; }

/* 纹样手帖：原绘资产与器物档案相连，供主动探索。 */
.pattern-head { padding-bottom: 72px; }
.pattern-head::before { background-image: url("assets/coffin-cloud.png"); width: 500px; height: 318px; top: -62px; left: -130px; opacity: .16; transform: rotate(-10deg); }
.pattern-head::after { background-image: url("assets/bronze-thunder.png"); width: 500px; height: 365px; right: -72px; bottom: -98px; opacity: .24; transform: none; }
.pattern-head-band { position: absolute; left: 0; right: 0; bottom: 0; height: 37px; background: url("assets/lacquer-zigzag.png") center / auto 42px repeat-x; opacity: .85; }
.pattern-intro { margin: 0; padding: 42px var(--page-gutter); display: grid; grid-template-columns: minmax(220px,.46fr) minmax(0,1fr); gap: clamp(30px,5vw,100px); align-items: center; background: #e6dbc1; border-bottom: 1px solid #a5715a; }
.pattern-intro span { color: #963b27; font-family: var(--serif); font-size: clamp(23px,2.2vw,32px); letter-spacing: .12em; }
.pattern-intro p { max-width: 900px; color: #4b3b32; font-size: 16px; line-height: 1.9; }
.pattern-atlas { margin: 0; padding: clamp(46px,5vw,80px) var(--page-gutter) 80px; background: #f3e8d0; }
.pattern-display { min-height: 500px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(310px,.65fr); border: 1px solid #8b4b38; box-shadow: 14px 14px 0 #d2c1a7; }
.pattern-art { min-height: 500px; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 55% 50%,#51251a 0,#240e0a 70%); border-right: 2px solid #aa5636; }
.pattern-art::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(237,167,115,.4); pointer-events: none; }
.pattern-art[data-tone="ochre"] { background: radial-gradient(circle at 50% 50%,#423c32,#1c1713 75%); }
.pattern-art[data-tone="bronze"] { background: radial-gradient(circle at 50% 50%,#39483e,#171b17 75%); }
.pattern-art[data-tone="textile"] { background: radial-gradient(circle at 50% 50%,#685544,#24170f 76%); }
.pattern-art img { width: 88%; height: 78%; object-fit: contain; filter: drop-shadow(0 15px 25px rgba(0,0,0,.25)); transition: opacity .2s, transform .4s; }
.pattern-art[data-tone="lacquer"] img { max-height: 75%; }
.pattern-art-index { position: absolute; z-index: 1; top: 34px; left: 34px; color: #ebc7a6; font-family: var(--number); font-size: 13px; letter-spacing: .17em; }
.pattern-story { min-width: 0; padding: clamp(37px,4vw,62px) clamp(30px,3.5vw,56px); display: flex; flex-direction: column; align-items: flex-start; background: #e9dec3; }
.pattern-kicker { color: #a3462b; font-family: var(--number); font-size: 12px; letter-spacing: .17em; }
.pattern-story h2 { margin-top: 29px; color: #29180f; font-family: var(--serif); font-weight: 400; font-size: clamp(36px,3.2vw,52px); letter-spacing: .09em; }
.pattern-story p { margin-top: 25px; color: #4e3b30; font-size: 17px; line-height: 1.95; }
.pattern-source { width: 100%; margin-top: auto; padding: 29px 0 22px; display: grid; gap: 6px; border-top: 1px solid #9d705c; }
.pattern-source small { color: #9b432d; font-size: 12px; letter-spacing: .17em; }
.pattern-source strong { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.pattern-relic { min-height: 48px; padding: 10px 19px; display: inline-flex; align-items: center; gap: 22px; color: #f4e8ce; background: #a33c28; border: 1px solid #862b1c; font-size: 14px; letter-spacing: .1em; }
.pattern-relic:hover { background: #7e2a1e; }
.pattern-relic span { font-size: 19px; }
.pattern-picker { margin-top: 54px; display: grid; gap: 48px; }
.pattern-group { min-width: 0; }
.pattern-group-head { min-height: 56px; margin-bottom: 15px; display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid #9e6c52; }
.pattern-group-head h3 { margin: 0; color: #873923; font-family: var(--serif); font-size: clamp(25px,2.4vw,34px); font-weight: 400; letter-spacing: .1em; }
.pattern-group-head span { color: #675047; font-size: 14px; }
.pattern-group-head b { margin-left: auto; color: #9e6c52; font-family: var(--number); font-size: 16px; font-weight: 400; }
.pattern-group-items { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.pattern-group-items[data-count="5"], .pattern-group-items[data-count="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
.pattern-group-items[data-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pattern-group-items[data-count="1"] { grid-template-columns: minmax(0,1fr); }
.pattern-choice { min-width: 0; padding: 0; display: flex; flex-direction: column; text-align: left; border: 1px solid #a8876e; background: #eaddc3; transition: transform .2s, box-shadow .2s, border-color .2s; }
.pattern-choice:hover, .pattern-choice.selected { border-color: #a43b27; box-shadow: 5px 6px 0 #c78265; transform: translateY(-3px); }
.pattern-thumb { width: 100%; min-width: 0; height: clamp(175px,16vw,225px); position: relative; display: block; overflow: hidden; background: radial-gradient(circle at 55% 50%, #51251a 0%, #240e0a 70%); border-bottom: 1px solid #a8876e; }
.pattern-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: clamp(10px,1.3vw,18px); box-sizing: border-box; object-fit: contain; object-position: center; }
.pattern-choice-text { min-height: 82px; padding: 13px 16px; display: grid; gap: 5px; }
.pattern-choice-text small { color: #865744; font-size: 12px; letter-spacing: .02em; }
.pattern-choice-text strong { color: #31221a; font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: .06em; }
.pattern-footnote { min-height: 116px; padding: 32px var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #e7d8bd; background: #21100c; border-top: 3px solid #a34830; font-size: 13px; letter-spacing: .08em; }
.pattern-footnote i { flex: 1; height: 1px; background: #73877b; }

/* 留住有信息的说明，把只为填空的微型英文和编号撤下。 */
.block-head small, .page-head .eyebrow, .daily .d-tag, .relic-card .rc-index, .relic-card .rc-en,
.pattern-kicker, .pattern-art-index, .pattern-choice-text small, .p-info small, .project-note small,
.viewer-kicker { display: none; }
.page-head { min-height: 285px; padding-top: 64px; }
.page-title-row { margin-top: 0; }
.site-colophon { min-height: 37px; padding: 0; background: #1b0b08 url("assets/lacquer-zigzag.png") center / auto 32px repeat-x; }
.site-colophon span, .site-colophon i { display: none; }
.pattern-footnote { min-height: 75px; justify-content: center; font-size: 14px; }
.pattern-story h2 { margin-top: 3px; }
.pattern-choice-text { align-items: center; }
.pattern-choice-text small { display: block; }
.pattern-source small { font-size: 14px; }
.viewer-axis { font-size: 13px; }

@media (max-width: 900px) {
  #relicGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #relicGrid > .relic-card:nth-child(n) { grid-column: auto; }
  #relicGrid > .relic-card:nth-child(8) { display: flex; min-height: 440px; color: var(--main-ink); border: 0; border-bottom: 2px solid #8c3c2c; background: transparent; }
  #relicGrid > .relic-card:nth-child(8) .rc-image-wrap { height: 280px; border: 1px solid #aa7b67; }
  #relicGrid > .relic-card:nth-child(8) .rc-info { padding: 18px 0 14px; }
  #relicGrid > .relic-card:nth-child(8) .rc-name { font-size: 23px; }
  #relicGrid > .relic-card:nth-child(8) .rc-en { color: var(--ink-soft); }
  #relicGrid > .relic-card:nth-child(8) .rc-meta { margin: auto 0 0; color: var(--ink-soft); border-top-color: var(--hairline); }
  .hero-home { min-height: auto; grid-template-columns: minmax(0,1fr) minmax(300px,.85fr); gap: 15px; }
  .hero-copy h1 span { font-size: clamp(58px,7vw,70px); }
  .hero-copy h1 em { font-size: clamp(45px,6vw,61px); }
  .hero-object { min-height: 420px; }
  .hero-art-stage { height: 340px; min-height: 0; }
  .hero-art-stage img { height: 340px; }
  .hero-art-caption strong { font-size: 23px; }
  .pattern-display { grid-template-columns: minmax(0,1fr) minmax(280px,.85fr); }
  .pattern-story { padding: 34px; }
  .pattern-art { min-height: 440px; }
  .pattern-choice-text strong { font-size: 17px; }
  .daily .d-ex { font-size: 14px; }
}

@media (max-width: 700px) {
  :root { --page-gutter: 18px; }
  .edge-mark { width: 5px; opacity: .55; }
  .museum-bar { height: 74px; padding-inline: 20px; }
  #views { padding: 0 0 92px; }
  .hero-home { min-height: auto; padding: 39px 30px 38px; grid-template-columns: 1fr; gap: 8px; }
  .hero-home::before { inset: 11px 10px; }
  .hero-home::after { inset: 18px 17px; }
  .cloud-sweep-top { width: 230px; height: 77px; top: -16px; left: 3px; opacity: .16; }
  .cloud-sweep-bottom { display: none; }
  .hero-copy { padding: 0; }
  .hero-brush-rule { width: 120px; height: 8px; }
  .hero-copy h1 { margin-top: 24px; }
  .hero-copy h1 span { font-size: clamp(52px,16vw,70px); }
  .hero-copy h1 em { margin-left: .34em; font-size: clamp(42px,12vw,56px); }
  .hero-lead { max-width: 340px; margin-top: 18px; font-size: 15px; line-height: 1.75; }
  .hero-actions { margin-top: 23px; flex-wrap: wrap; gap: 16px; }
  .brush-button { min-width: 178px; width: auto; min-height: 60px; }
  .brush-button span { font-size: 19px; }
  .brush-button i { display: none; }
  .text-button { font-size: 12px; }
  .hero-notes { margin-top: 22px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .hero-notes span { color: #c0cebf; font-size: 14px; text-align: center; white-space: normal; }
  .hero-object { min-height: 0; margin-top: 6px; }
  .hero-art-stage { height: 285px; min-height: 0; }
  .hero-art-stage img { height: 285px; }
  .hero-art-stage::after { bottom: 0; }
  .hero-art-caption { min-height: 56px; }
  .hero-art-caption strong { font-size: 20px; }
  .lacquer-ribbon { height: 78px; background-size: auto 78px; }
  .home-ledger { grid-template-columns: 1fr; padding: 0 18px; }
  .ledger-title { padding: 21px 0 16px; }
  .ledger-title span { font-size: 19px; }
  .ledger-title small { font-size: 10px; }
  .stat { padding: 18px 3px; }
  .stat b { font-size: 30px; }
  .stat span { font-size: 11px; }
  .block { padding: 54px 18px 0; }
  .block-head { min-height: 47px; margin-bottom: 20px; }
  .block-head h2 { font-size: 22px; }
  .block-head small { font-size: 10px; }
  .block-head > div > span { width: 32px; height: 32px; font-size: 16px; }
  .daily-block { padding-bottom: 57px; }
  .daily { grid-template-columns: 1fr 65px; }
  .daily .d-image { height: 226px; }
  .daily .d-body { padding: 24px 19px; }
  .daily .d-name { font-size: 28px; }
  .daily .d-dy, .daily .d-ex, .daily .d-more { font-size: 13px; }
  .history-block { padding-bottom: 56px; }
  .collection-block { padding-bottom: 56px; }
  .mini { flex-basis: 205px; min-height: 300px; }
  .mini .mini-image { height: 210px; }
  .mini .glyph { top: 186px; }
  .site-colophon { min-height: 31px; margin: 0; padding: 0; background-size: auto 29px; }
  .page-head { min-height: 225px; padding: 48px 22px 34px; }
  .page-head::before { width: 215px; height: 215px; }
  .page-head::after { width: 260px; height: 175px; }
  .page-title-row h1 { font-size: clamp(48px,13vw,62px); }
  .page-title-row p { font-size: 15px; }
  .chips { margin: 26px 18px 0; }
  .chip { padding: 9px 12px; font-size: 13px; }
  .relic-grid { margin: 28px 18px 60px; gap: 22px 13px; }
  #relicGrid[data-filtered="true"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #relicGrid[data-filtered="true"] > .relic-card:only-child { grid-column: 1 / -1; }
  #relicGrid[data-filtered="true"] > .relic-card .rc-image-wrap { height: 210px; }
  #relicGrid > .relic-card:nth-child(8) { grid-column: 1 / -1; min-height: 440px; }
  #relicGrid > .relic-card:nth-child(8) .rc-image-wrap { height: 315px; }
  #relicGrid > .relic-card:nth-child(8) .rc-name { font-size: 17px; }
  .relic-card .rc-name { font-size: 17px; }
  .relic-card .rc-line-mini, #relicGrid > .relic-card:nth-child(8) .rc-line-mini { width: 65px; height: 62px; top: 43px; right: 8px; }
  .relic-card .rc-line-mini::after { font-size: 9px; }
  .relic-card .rc-index, .relic-card .rc-meta, .relic-card .rc-state, .relic-card .rc-3d { font-size: 12px; }
  .scan-layout { margin: 30px 18px 0; gap: 18px; }
  .viewfinder { min-height: 345px; }
  .viewfinder strong { font-size: 21px; }
  .viewfinder small { font-size: 12px; }
  .scan-guide li strong { font-size: 16px; }
  .scan-guide li small, .scan-guide p { font-size: 12px; }
  .profile { margin: 29px 18px 0; padding: 20px; }
  .journal-section, .settings-panel { margin: 0; }
  .mine-columns { margin: 0 18px; }
  .project-note { margin: 60px 18px 0; }
  .paper { padding: 25px 20px; }
  .paper::after { width: 124px; height: 124px; opacity: .16; }
  .cell .v, .intro { font-size: 14px; }
  .facts li { font-size: 14px; }
  .viewer-shell { width: 100vw; border: 0; }
  .viewer-stage::after { width: 155px; height: 130px; opacity: .15; }
  .tabbar { width: calc(100vw - 24px); height: 76px; padding-inline: 5px; }
  .tabbar button { font-size: 12px; gap: 4px; }
  .tabbar svg { width: 21px; height: 21px; }
  .tabbar .scan-nav-disc { width: 60px; height: 60px; margin-top: -32px; }
  .tabbar .scan-nav-disc svg { width: 28px; height: 28px; }
  .tabbar .scan-nav > span:last-child { font-size: 12px; }
  .pattern-head { padding-bottom: 70px; }
  .pattern-head-band { height: 30px; background-size: auto 35px; }
  .pattern-intro { padding: 28px 18px; grid-template-columns: 1fr; gap: 10px; }
  .pattern-intro span { font-size: 23px; }
  .pattern-intro p { font-size: 15px; }
  .pattern-atlas { padding: 35px 18px 62px; }
  .pattern-display { grid-template-columns: 1fr; box-shadow: 8px 8px 0 #d2c1a7; }
  .pattern-art { min-height: 285px; border-right: 0; border-bottom: 2px solid #aa5636; }
  .pattern-art::before { inset: 11px; }
  .pattern-art-index { top: 20px; left: 21px; font-size: 11px; }
  .pattern-art img { width: 87%; height: 73%; }
  .pattern-story { min-height: 325px; padding: 25px 24px 28px; }
  .pattern-story h2 { margin-top: 3px; font-size: 34px; }
  .pattern-story p { margin-top: 13px; font-size: 15px; line-height: 1.8; }
  .pattern-source { padding: 18px 0 16px; }
  .pattern-source strong { font-size: 19px; }
  .pattern-picker { margin-top: 34px; gap: 33px; }
  .pattern-group-head { min-height: 48px; gap: 8px; flex-wrap: wrap; }
  .pattern-group-head h3 { font-size: 23px; }
  .pattern-group-head span { font-size: 13px; }
  .pattern-group-head b { font-size: 13px; }
  .pattern-group-items, .pattern-group-items[data-count="2"], .pattern-group-items[data-count="3"], .pattern-group-items[data-count="5"] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .pattern-group-items[data-count="1"] { grid-template-columns: 1fr; }
  .pattern-thumb { height: clamp(154px,34vw,184px); }
  .pattern-thumb img { padding: 12px; }
  .pattern-choice-text { min-height: 73px; padding: 10px 11px; }
  .pattern-choice-text strong { font-size: 17px; }
  .pattern-choice-text small { font-size: 12px; }
  .pattern-footnote { min-height: 75px; padding: 23px 18px; flex-wrap: wrap; gap: 9px; font-size: 14px; }
  .pattern-footnote i { min-width: 25px; }
  .relic-motif { grid-template-columns: 1fr; }
  .relic-motif-image { min-height: 145px; border-right: 0; border-bottom: 1px solid #a04b32; }
  .relic-motif-image img { max-height: 130px; }
  .relic-motif-copy { padding: 17px 19px 19px; }
  .relic-motif-copy button { margin-top: 12px; }
  .art-switch { top: 7px; right: 7px; }
  .art-switch button { min-height: 30px; padding: 5px 7px; font-size: 11px; }
}

@media (max-width: 390px) {
  .hero-home { padding-inline: 27px; }
  .hero-copy h1 span { font-size: 52px; }
  .hero-copy h1 em { font-size: 42px; }
  .hero-actions { gap: 13px; }
  .brush-button { min-width: 160px; }
  .text-button { font-size: 11px; }
  .relic-grid { grid-template-columns: 1fr 1fr; }
  .relic-card .rc-image-wrap, .relic-card:nth-child(5n+1) .rc-image-wrap, .relic-card:nth-child(5n+5) .rc-image-wrap { height: 190px; }
  .relic-card, .relic-card:nth-child(5n+1), .relic-card:nth-child(5n+5) { min-height: 340px; }
  .relic-card .rc-3d, .relic-card:nth-child(5n+1) .rc-3d, .relic-card:nth-child(5n+5) .rc-3d { top: 156px; }
}

/* 原图上的定位框与纹样近看层。 */
.hero-boxes { position: absolute; inset: 0; width: 100%; height: 100%; display: none; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
.hero-boxes rect { fill: rgba(225,78,39,.1); stroke: #f06238; stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.hero-boxes path { fill: none; stroke: #fff0d5; stroke-width: 3.5px; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.hero .cap { z-index: 2; max-width: 100%; font-size: 11px; line-height: 1.5; }
.pattern-display-open { width: 100%; height: 100%; padding: 0; position: relative; display: grid; place-items: center; color: #f5e6cc; border: 0; background: transparent; cursor: zoom-in; }
.pattern-display-open img { display: block; }
.pattern-display-open > span { position: absolute; right: 29px; bottom: 25px; padding: 8px 11px; background: rgba(34,12,8,.84); border: 1px solid rgba(211,116,76,.75); font-size: 13px; letter-spacing: .08em; }
.pattern-display-open:focus-visible, .relic-motif-image:focus-visible { outline: 3px solid #d9764e; outline-offset: -5px; }
.relic-motif-image { width: 100%; border: 0; border-right: 1px solid #a04b32; cursor: zoom-in; }
body.lightbox-open { overflow: hidden; }
.pattern-lightbox { position: fixed; z-index: 130; inset: 0; padding: 18px; display: none; align-items: center; justify-content: center; background: rgba(16,6,4,.92); backdrop-filter: blur(9px); }
.pattern-lightbox.show { display: flex; }
.pattern-lightbox-card { width: min(1020px,100%); height: min(820px,calc(100dvh - 36px)); min-height: 0; display: flex; flex-direction: column; overflow: hidden; color: #f0dfc2; background: #24100c; border: 2px solid #ae4f32; box-shadow: inset 0 0 0 7px #24100c, inset 0 0 0 8px rgba(127,154,136,.55), 0 30px 100px rgba(0,0,0,.5); }
.pattern-lightbox-head { min-height: 82px; padding: 15px 22px 13px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-bottom: 1px solid #8b4937; }
.pattern-lightbox-head small { color: #c78768; font-family: var(--number); font-size: 12px; letter-spacing: .17em; }
.pattern-lightbox-head h2 { margin: 3px 0 0; font-family: var(--serif); font-size: clamp(25px,3vw,36px); font-weight: 400; letter-spacing: .08em; }
.pattern-lightbox-close { width: 40px; height: 40px; flex: 0 0 auto; color: #f3e2c4; border: 1px solid #bb6b4d; background: transparent; font-size: 26px; line-height: 1; }
.pattern-lightbox-close:hover { background: #923c29; }
.pattern-lightbox-stage { min-height: 0; flex: 1; position: relative; overflow: hidden; overscroll-behavior: contain; touch-action: none; cursor: grab; background: radial-gradient(circle at 50% 48%,#493027,#1b0b08 76%); }
.pattern-lightbox-stage.dragging { cursor: grabbing; }
.pattern-lightbox-stage img { width: 100%; height: 100%; display: block; object-fit: contain; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.pattern-lightbox-reset { position: absolute; z-index: 2; top: 13px; right: 13px; padding: 9px 13px; color: #f7e9cb; border: 1px solid #c47855; background: rgba(33,12,8,.9); font-size: 13px; }
.pattern-lightbox-reset:hover { background: #8e3b2a; }
.pattern-lightbox-gesture { position: absolute; left: 15px; bottom: 14px; padding: 6px 9px; color: #e7d5ba; background: rgba(32,12,8,.78); font-size: 12px; pointer-events: none; }
.pattern-lightbox-foot { min-height: 102px; padding: 15px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #8b4937; }
.pattern-lightbox-foot span { color: #e59d79; font-size: 13px; }
.pattern-lightbox-foot p { max-width: 690px; margin: 5px 0 0; color: #d9c8ad; font-size: 13px; line-height: 1.65; }
.pattern-lightbox-foot nav { display: flex; gap: 7px; flex: 0 0 auto; }
.pattern-lightbox-foot nav button { width: 42px; height: 42px; color: #f1dbc0; border: 1px solid #9d5d47; background: #3a1c15; font-size: 22px; }
.pattern-lightbox-foot nav button:hover { background: #973e2c; }
@media (max-width: 700px) {
  .hero .cap { font-size: 10px; }
  .pattern-display-open > span { right: 17px; bottom: 16px; font-size: 12px; }
  .relic-motif-image { border-right: 0; border-bottom: 1px solid #a04b32; }
  .pattern-lightbox { padding: 8px; }
  .pattern-lightbox-card { width: 100%; height: calc(100dvh - 16px); }
  .pattern-lightbox-head { min-height: 71px; padding: 12px 15px; }
  .pattern-lightbox-head h2 { font-size: 25px; }
  .pattern-lightbox-foot { min-height: 129px; padding: 12px 15px 15px; align-items: flex-start; }
  .pattern-lightbox-foot p { max-height: 64px; overflow: auto; font-size: 12px; }
  .pattern-lightbox-foot p { scrollbar-width: none; }
  .pattern-lightbox-foot p::-webkit-scrollbar { display: none; }
  .pattern-lightbox-gesture { left: 9px; bottom: 9px; font-size: 11px; }
  .pattern-lightbox-foot nav button { width: 36px; height: 36px; }
}