/* Atlas 设计体系 — 北欧中古画廊风
   配色取自题材本身:琥珀/干邑玻璃(强调色)、深柚木(墨色)、画廊暖纸(底色)、
   苔绿(次强调)。线条克制:暖色细线为主,刊头用杂志式双细线,重点处用琥珀色。
   器物图一律"标本装裱":白色版面 + 细边框,是全站的签名元素。 */

:root {
  --paper: #f5f2ea;        /* 画廊暖纸 */
  --plate: #ffffff;        /* 装裱版面(器物图底) */
  --wash: #ece7db;         /* 内凹工作区/轨道 */
  --ink: #26221b;          /* 深柚木近黑 */
  --ink-soft: #6c6456;
  --ink-faint: #a39a88;
  --line: #ddd5c4;         /* 暖细线 */
  --amber: #b4622b;        /* 琥珀/干邑玻璃 */
  --amber-deep: #8f4a1d;
  --moss: #5a6350;         /* 苔绿(校对/状态) */
  --serif: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Songti SC", "Noto Serif SC", serif;
  --sans: -apple-system, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
}

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

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--amber); color: var(--plate); }

/* ---------- 顶栏(三个页面共用):杂志刊头,双细线收底 ---------- */
.masthead {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 24px 40px 18px;
  border-bottom: 3px double var(--ink);
  background: var(--paper);
}
.masthead .wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}
.masthead .wordmark-copy { display: block; }
.masthead .brand-mark { flex: 0 0 32px; width: 32px; height: 32px; }
.masthead .wordmark small {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 3px;
}
.masthead nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.masthead nav a { color: var(--ink-soft); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.masthead nav a:hover { color: var(--ink); }
.masthead nav a.here { color: var(--ink); border-bottom-color: var(--amber); }
[data-admin-only][hidden] { display: none !important; }
.masthead [data-account] { display: inline-flex; gap: 14px; }
.masthead [data-account] form { display: inline; }
.masthead [data-account] button {
  color: var(--ink-soft); font-size: 12px; letter-spacing: .08em; text-transform: none;
}
.masthead [data-account] button:hover { color: var(--amber); }

/* ---------- 通用元件 ---------- */
.kicker {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--amber);
}
.hairline { border: 0; border-top: 1px solid var(--line); }

/* 装裱版面:器物图的统一容器 */
.plate {
  background: var(--plate);
  border: 1px solid var(--line);
  padding: 14px;
}

.btn {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--ink);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--amber); border-color: var(--amber); color: var(--plate); }
.btn.solid { background: var(--ink); border-color: var(--ink); color: var(--plate); }
.btn.solid:hover { background: var(--amber); border-color: var(--amber); }
.btn.ghost { border-color: var(--line); color: var(--ink-soft); }
.btn.ghost:hover { border-color: var(--amber); color: var(--amber); background: transparent; }
.btn:disabled { opacity: .35; pointer-events: none; }

.fld { display: block; margin-bottom: 14px; }
.fld > span {
  display: block;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 5px;
}
.fld input, .fld select, .fld textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--plate);
  outline: none;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--amber); }

#flash {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--amber-deep);
  color: var(--plate);
  padding: 9px 22px;
  font-size: 12px;
  letter-spacing: .12em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 99;
}
#flash.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 杂志图片保护 ----------
   目标是普通保存路径:选中、拖拽、iOS 长按弹出的存图菜单。右键与拖拽的事件层兜底在
   site.js(AtlasImageGuard)—— Firefox 不认 -webkit-user-drag,只有那一层拦得住。
   这里刻意不写 pointer-events:none:器物框点击、翻页手势、框选收藏、校对模式都要收事件,
   把图片设成"不可点"会一并废掉它们。
   挡不住的:截图、开发者工具、直接访问图片 URL。 */
img[src^="/asset/"],
img[src^="/crop/"],
.leaf,
.ph.region,
.series-region,
.series-member-region,
.fav-preview {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ---------- 收藏轻提示(阅读页与画廊共用,见 site.js AtlasFavorites.toast) ---------- */
.fav-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  z-index: 120;
  min-width: min(420px, calc(100vw - 32px));
  transform: translate(-50%, 12px);
  border: 1px solid var(--ink);
  background: var(--plate);
  box-shadow: 10px 12px 0 rgba(38, 34, 27, .14);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.fav-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fav-toast-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  border-left: 3px solid var(--amber);
}
.fav-toast-msg { font-size: 13px; }
.fav-toast-act {
  padding: 3px 10px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.fav-toast-act:hover { color: var(--amber-deep); border-color: var(--amber); }
.fav-toast-close { margin-left: auto; color: var(--ink-faint); font-size: 18px; line-height: 1; }
.fav-toast-close:hover { color: var(--amber-deep); }
.fav-toast-note {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px 16px;
}
.fav-toast-note[hidden] { display: none; }
.fav-toast-note input {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  outline: none;
}
.fav-toast-note input:focus { border-color: var(--amber); }
.fav-toast-note button {
  padding: 0 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--plate);
  font-size: 11px;
  letter-spacing: .1em;
  white-space: nowrap;
}
.fav-toast-note button:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.fav-toast-note button:disabled { opacity: .4; }

.loading, .empty {
  padding: 90px 40px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- 用户纠错单:像夹在刊物里的馆藏校正卡 ---------- */
.feedback-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
  box-shadow: 14px 16px 0 rgba(38, 34, 27, .16);
}
.feedback-dialog::backdrop { background: rgba(38, 34, 27, .54); backdrop-filter: blur(2px); }
.feedback-dialog form { position: relative; padding: 32px; border-top: 5px solid var(--amber); }
.feedback-dialog h2 { font: 500 34px/1.1 var(--serif); margin: 5px 0 8px; }
.feedback-target { color: var(--ink-soft); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.feedback-close { position: absolute; right: 17px; top: 13px; font-size: 25px; color: var(--ink-soft); }
.feedback-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.feedback-status { min-height: 1.6em; color: var(--amber-deep); font-size: 13px; }
.report-error { margin-left: auto; padding: 0 5px; color: var(--amber); font-size: 10px; letter-spacing: .1em; }

@media (max-width: 720px) {
  .masthead [data-account] { width: 100%; }
  .feedback-dialog form { padding: 25px 20px; }
  .fav-toast { bottom: 12px; min-width: calc(100vw - 24px); }
  .fav-toast-row { flex-wrap: wrap; gap: 10px; }
}