/* 網站外框：頂列、頁尾，以及搬來的電子報、互動圖上方那條麵包屑帶。
   網站自己的頁與搬來的檔都載入這支。搬來的檔有自己的全域規則
   （p 限寬、footer 加框線、a 換色、--gold 是別的顏色），
   所以這裡的色與字型用外框自己的變數，字級、邊距、行高都寫明。 */

.topbar, .site-foot, .skin-band {
  --wall-deep: color-mix(in oklab, var(--wall) 78%, #000);
  --wall-text: #FFFFFF;
  --wall-muted: color-mix(in oklab, var(--wall) 18%, #FFF);
  --chrome-gold: #C4A15A;
  --chrome-serif: "Noto Serif TC", "Songti TC", serif;
  --chrome-sans: "Noto Sans TC", "PingFang TC", sans-serif;
  line-height: 1.85;
  text-align: left;
}

/* ── 頂列 ─────────────────────────── */
.topbar { background: var(--wall-deep); color: var(--wall-text); font-family: var(--chrome-sans); }
.topbar-inner {
  max-width: 76rem; margin: 0 auto; padding: .7rem 1.5rem;
  display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap;
}
.site-name { font-family: var(--chrome-serif); font-weight: 700; letter-spacing: .2em; text-decoration: none; font-size: 1rem; color: inherit; }
/* 站名前的騎樓拱廊圖示：跟著字色走，比字高一點，底部對齊字的基線附近（搬來的檔可能有 svg 的全域規則，寬高寫明） */
.topbar .site-mark { display: inline-block; width: 1.4em; height: 1.4em; margin: 0 .5em 0 0; vertical-align: -.32em; }
.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .95rem; }
.site-nav a { text-decoration: none; color: var(--wall-muted); padding-bottom: .15em; border-bottom: 1px solid transparent; }
.site-nav a:hover { color: var(--wall-text); }
.site-nav a[aria-current] { color: var(--wall-text); border-bottom-color: var(--chrome-gold); }
/* 「展廳」下拉選單（<details>）：在某一廳裡字面寫該廳、加燙金底線，跟其他頂列項目的「目前所在」同一套。
   搬來的互動圖有自己的 li、ul、details 全域規則，這裡字級、邊距、行高都寫明 */
.nav-halls { position: relative; margin: 0; padding: 0; font-size: .95rem; line-height: 1.85; }
.nav-halls summary {
  display: inline-flex; align-items: center; gap: .3em; list-style: none; cursor: pointer;
  color: var(--wall-muted); padding-bottom: .15em; border-bottom: 1px solid transparent;
}
.nav-halls summary::-webkit-details-marker { display: none; }
.nav-halls summary::marker { content: ""; }
.nav-halls summary:hover, .nav-halls[open] summary { color: var(--wall-text); }
.nav-halls summary.on { color: var(--wall-text); border-bottom-color: var(--chrome-gold); }
.nav-halls summary:focus-visible { outline: 2px solid var(--chrome-gold); outline-offset: 3px; border-radius: 2px; }
/* 展開符號：跟全站箭頭同一組 SVG，轉向朝下；打開時朝上 */
.nav-halls summary::after {
  content: ""; width: .8em; height: .8em; background: currentColor; transform: rotate(90deg); transition: transform .2s ease-out;
  -webkit-mask: var(--icon-arrow-right) no-repeat center / contain; mask: var(--icon-arrow-right) no-repeat center / contain;
}
.nav-halls[open] summary::after { transform: rotate(-90deg); }
.nav-halls ul {
  position: absolute; top: calc(100% + .45rem); left: -.9rem; z-index: 1000; min-width: 10.5rem;
  margin: 0; padding: .4rem 0; list-style: none; background: var(--wall-deep);
  border: 1px solid color-mix(in oklab, var(--chrome-gold) 70%, transparent); box-shadow: 0 10px 28px rgb(0 0 0 / .35);
}
.nav-halls li { margin: 0; padding: 0; list-style: none; font-size: .95rem; line-height: 1.6; }
.nav-halls li a { display: flex; align-items: center; gap: .65em; padding: .4rem .9rem; color: var(--wall-muted); border: 0; }
.nav-halls li a::before { content: ""; flex: none; width: .75em; height: .75em; background: var(--chip); box-shadow: 0 0 0 1px rgb(255 255 255 / .35); }
/* 所在的那一廳（展品頁、互動圖頁也算）加粗、變白 */
.nav-halls li a:hover, .nav-halls li a.here { color: var(--wall-text); background: rgb(255 255 255 / .07); }
.nav-halls li a.here { font-weight: 700; }
.nav-halls-all { margin-top: .3rem; border-top: 1px solid rgb(255 255 255 / .14); padding-top: .3rem; }
.nav-halls .nav-halls-all a::before { display: none; }

/* ── 麵包屑帶（只有搬來的檔用）：牆色，跟網站內頁的標題帶同色 ── */
.skin-band { background: var(--wall); color: var(--wall-muted); font-family: var(--chrome-sans); font-size: .9rem; letter-spacing: .06em; }
.skin-band-inner { max-width: 76rem; margin: 0 auto; padding: .55rem 1.5rem; }
.skin-band a { color: var(--wall-text); text-decoration: underline; text-decoration-color: var(--chrome-gold); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.skin-band a:hover { text-decoration-thickness: 2px; }
.skin-band .sep { margin: 0 .35em; opacity: .7; }

/* ── 頁尾 ─────────────────────────── */
.site-foot { background: var(--wall-deep); color: var(--wall-muted); font-family: var(--chrome-sans); font-size: .85rem; margin: 0; padding: 0; border: 0; }
.foot-inner { max-width: 76rem; margin: 0 auto; padding: 1.6rem 1.5rem; }
.foot-inner p { margin: 0; max-width: none; text-align: left; font-size: inherit; color: inherit; }

/* ── 牆色底、內頁標題帶、展品說明卡 ──────────
   網站內頁用，人物關係圖頁也用（標題帶取代上面的麵包屑帶，說明卡放在故事分頁右欄），所以放這支。
   搬來的圖有自己的 --gold、--paper、--sans 與 * { margin: 0 }，這裡用到的變數在容器上就地定義，邊距都寫明。 */
.hall-band, .label-card {
  --gold: #C4A15A;
  --gold-line: color-mix(in oklab, var(--gold) 70%, transparent);
  --paper: #FFFFFF;
  --slate: #4A4A4A;
  --serif: "Noto Serif TC", "Songti TC", serif;
  --sans: "Noto Sans TC", "PingFang TC", sans-serif;
  --measure: 38em;
  text-align: left;
}
.hall-band { line-height: 1.85; }
/* 牆的左右留白放在外層（.hall／.hall-band／.lobby 的 1.5rem），所以裡面的容器寬度上限是 76rem 扣掉兩側留白的 73rem，才會跟頂列、頁尾的內容切齊 */
.wall {
  --wall-text: #FFFFFF;
  /* 在這裡重算，大廳等局部換了 --wall 時底部漸層才會跟著換 */
  --wall-deep: color-mix(in oklab, var(--wall) 78%, #000);
  --wall-muted: color-mix(in oklab, var(--wall) 18%, #FFF);
  background:
    radial-gradient(120% 60% at 30% 0%, rgb(255 236 226 / .10), transparent 60%),
    linear-gradient(180deg, var(--wall) 0%, var(--wall) 55%, var(--wall-deep) 100%);
  color: var(--wall-text);
}
.hall-band { padding: 2.4rem 1.5rem 2rem; }
.band-inner { max-width: 73rem; margin: 0 auto; }
.crumbs { margin: 0 0 .8rem; font-family: var(--sans); font-size: .88rem; color: var(--wall-muted); }
.crumbs a { color: var(--wall-text); }
.crumbs span { margin: 0 .4em; }
.page-title { margin: 0; font-weight: 900; font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.15; letter-spacing: .04em; text-wrap: balance; }
/* 內容頁標題：莫大毛筆（字由 build 依標題嵌入）。數值與後備字體同庫裡互動圖的 h1；字庫沒收的字退回行楷、楷體 */
.brush { font-family: "TitleBrush", "Xingkai TC", "Kaiti TC", "Noto Serif TC", serif; font-weight: 400; font-synthesis: none; letter-spacing: .04em; }
.page-title.brush { font-size: clamp(2.7rem, 8vw, 5.2rem); line-height: 1.25; }
/* 展品卡片的標題也用毛筆（展品名一律毛筆）；毛筆字看起來比同字級的宋體小，字級放大約 18% */
.ex-title.brush { font-size: clamp(1.75rem, 2.6vw, 2.35rem); font-weight: 400; }
.exhibit--事件 .ex-title.brush { font-size: clamp(2.2rem, 3.8vw, 3.4rem); }
.page-sub { margin: .5rem 0 0; font-family: var(--sans); font-size: 1rem; color: var(--wall-muted); }
.page-lede { margin: 1rem 0 0; max-width: var(--measure); font-size: 1.15rem; line-height: 1.75; }
.mini { position: relative; margin-top: 1.6rem; max-width: 64rem; container-type: inline-size; }
.mini-rooms { list-style: none; margin: 0; padding: 0; display: flex; height: 2.4rem; border: 1px solid var(--gold-line); }
/* 不是所在那一格的年號名：白 72%，六面牆上對比都在 4.5:1 以上（.34 時只有 2.4:1，小字讀不清） */
.mini-rooms li { flex-basis: 0; min-width: 0; border-left: 1px solid rgb(255 255 255 / .14); font-family: var(--sans); font-size: .72rem; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: visible; color: rgb(255 255 255 / .72); }
.mini-rooms li:first-child { border-left: 0; }
/* 所在那一格：白字（金字在淡白底上對比只有 2 左右，小字讀不清）。
   只落在單一年號時（.solo）再加金色底線，與下方金色標記呼應；跨多個年號時底線由下方標記負責 */
.mini-rooms .pre { background: repeating-linear-gradient(135deg, rgb(255 255 255 / .07) 0 3px, transparent 3px 9px); }
.mini-rooms .here { background: rgb(255 255 255 / .16); color: var(--wall-text); }
.mini-rooms .here.solo { box-shadow: inset 0 -3px 0 var(--gold); }
.mini-rooms .narrow span { writing-mode: vertical-rl; letter-spacing: .06em; }
/* 窄螢幕每格只剩幾像素：淡字全收起，只留所在那一間 */
@container (max-width: 40rem) { .mini-rooms li:not(.here) span { display: none; } }
.mini-mark { position: absolute; bottom: -5px; height: 3px; background: var(--gold); }

.label-card {
  align-self: start; position: sticky; top: 1.5rem;
  background: var(--paper); padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 16px 34px -20px rgb(0 0 0 / .35);
  border-top: 2px solid var(--gold); font-family: var(--sans); font-size: .9rem; line-height: 1.55;
}
.card-name { margin: 0 0 .8rem; font-family: var(--serif); font-weight: 900; font-size: 1.45rem; }
.label-card dl { margin: 0 0 1rem; display: grid; gap: .55rem; }
.label-card dl div { display: grid; grid-template-columns: 4.2em 1fr; gap: .6rem; }
.label-card dt { color: var(--slate); }
.label-card dd { margin: 0; }
.card-src { padding-top: .6rem; border-top: 1px solid var(--gold-line); }
.card-go {
  display: block; padding: .6rem 0; border-top: 1px solid #E4E4E0;
  color: var(--wall); font-weight: 700; text-decoration: none;
}
.card-go:hover { text-decoration: underline; text-decoration-color: var(--gold); }
/* 箭頭圖示：同一組筆畫（16 格、線寬 1.6、圓頭），用 mask 上色，跟著字色走；不用 ← → 字元
   （字元的粗細、長短隨字型變，跟其他線條對不齊）。展品頁、互動圖頁、年號頁都用這兩個 */
:root {
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8h-11M7 3.5 2.5 8 7 12.5'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E");
}
.card-back::before, .card-forward::after {
  content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain;
  transition: transform .2s ease-out;
}
/* 回到展品頁（互動圖頁）：箭頭在字前面，滑過時往左挪一點 */
.card-back::before { --icon: var(--icon-arrow-left); margin-right: .4em; }
.card-back:hover::before { transform: translateX(-3px); }
/* 往互動圖（展品頁）：跟回到展品頁對稱，箭頭在字後面、滑過時往右挪 */
.card-forward::after { --icon: var(--icon-arrow-right); margin-left: .4em; }
.card-forward:hover::after { transform: translateX(3px); }
/* 一句話評語（有人物關係圖的展品頁）：淡牆色底、字加粗，像書腰上的引言（不加側邊色條） */
.card-tag {
  margin: -.2rem 0 1.1rem; padding: .65rem .85rem;
  background: color-mix(in oklab, var(--wall) 8%, #FFF);
  font-family: var(--serif); font-weight: 600; font-size: 1rem; line-height: 1.7; color: #121212;
}

@media (max-width: 52rem) {
  .topbar-inner, .skin-band-inner, .foot-inner { padding-left: 1rem; padding-right: 1rem; }
  .hall-band { padding: 1.8rem 1rem 1.6rem; }
}