*{box-sizing:border-box;margin:0;padding:0}
:root{
  --wall:#16241f; --wall2:#1f332c; --brass:#d9a441; --brass-d:#8a5a12;
  --paper:#f3eee4; --sheet:#f7f2e7; --ink:#1b1d1a; --soft:#5b5a52; --line:#d6ccb6;
  --night:#0d1311; --cream:#efe6d2; --mist:#b9c4bd;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--wall);color:var(--cream);font-family:"Noto Sans TC",sans-serif;font-size:17px;line-height:1.8}
img{display:block;max-width:100%}
.art{display:block;width:100%;height:auto}
.num{font-family:"Bodoni Moda","Noto Serif TC",serif}
.tag{display:inline-block;background:#f7f2e7;color:var(--ink);font:600 11px/1 "Sometype Mono","Noto Sans TC",monospace;letter-spacing:.12em;padding:4px 7px 3px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* 首屏 */
.hall{position:relative;min-height:880px;overflow:hidden;background:var(--wall);color:#fff}
.hall.inner{min-height:660px}
.hall>img,.hall>.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hall .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,14,12,.55) 0%,rgba(9,14,12,.05) 34%,rgba(9,14,12,.1) 60%,rgba(9,14,12,.82) 100%)}
.top{position:relative;z-index:3;display:flex;align-items:center;gap:26px;padding:20px 40px 0}
.top .l,.top .r{display:flex;align-items:center;gap:22px}
.top .r{margin-left:auto}
.top a{color:#fff;text-decoration:none;font-size:14px;letter-spacing:.04em}
.top .l a.on{border-bottom:1px solid #fff}
.top a.buy{background:var(--brass);color:var(--ink);font-weight:500;padding:9px 16px}
.mark{position:relative;z-index:2;display:block;padding:6px 40px 0;color:#fff;text-decoration:none;font-family:"Noto Serif TC",serif;font-weight:900;font-size:min(16.4vw,236px);line-height:1;letter-spacing:.02em;white-space:nowrap}
.hall.inner .mark{font-size:min(10vw,140px)}
.cap{position:absolute;z-index:2;left:40px;right:40px;bottom:40px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.cap .say{max-width:660px}
.cap h1{font-size:26px;font-weight:700;line-height:1.35;margin:10px 0 6px;letter-spacing:.04em}
.cap .lede{font-size:15px;line-height:1.7;color:#e9e6dd}
.cap .credit{display:flex;gap:28px;font-size:11px;letter-spacing:.1em;color:#dcd6c8;text-align:left;white-space:nowrap}
.cap .credit b{display:block;font:600 22px/1.2 "Bodoni Moda",serif;color:#fff;letter-spacing:0}

/* 全幅與對半面板 */
.panel{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;background:var(--wall2)}
.panel.full{height:860px}
.panel.short{height:620px}
.panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,14,12,0) 50%,rgba(9,14,12,.78) 100%)}
.panel .who{position:absolute;left:40px;right:40px;bottom:38px}
.panel h3{font-size:20px;font-weight:700;letter-spacing:.05em;margin:10px 0 2px;color:#fff}
.panel p{font-size:14px;color:#ece7dc}
.halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.halves .panel{height:880px}
.panel.art-p{background:#e9e1cf}
.panel.art-p .art{position:absolute;inset:0;height:100%}
.panel.art-p .shade{display:none}
.panel.art-p .who{left:0;right:auto;bottom:0;background:var(--night);padding:18px 40px 22px 40px;max-width:640px}

/* 年表黑帶 */
.band{background:var(--night);color:var(--cream);padding:90px 40px 80px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:50px}
.band .lab{font:600 12px "Sometype Mono","Noto Sans TC",monospace;letter-spacing:.16em;color:var(--brass)}
.band h2{font-size:34px;line-height:1.35;margin-top:14px;color:#fff;font-family:"Noto Serif TC",serif;font-weight:700}
.band p{color:var(--cream);margin-bottom:14px;max-width:760px}
.band p a{color:var(--brass)}
.band .art{margin:26px 0 6px}
.band a.go{display:inline-block;margin-top:10px;background:var(--brass);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;padding:11px 18px}

.years{list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-top:1px solid #3c4a44;margin:30px 0 26px}
.years li{border-left:1px solid #3c4a44;padding:12px 10px 4px}
.years li:first-child{border-left:0;padding-left:0}
.years b{display:block;font:600 22px/1.2 "Bodoni Moda",serif;color:var(--brass)}
.years span{font-size:13px;color:var(--cream)}

/* 內頁閱讀區 */
.read{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;padding:80px 40px 90px}
.meta{position:sticky;top:20px;align-self:start}
.meta .lab{font:600 12px "Sometype Mono","Noto Sans TC",monospace;letter-spacing:.16em;color:var(--brass-d);display:block;margin-bottom:14px}
.meta dl{border-top:1px solid var(--ink)}
.meta dt{font-size:12px;letter-spacing:.1em;color:var(--soft);padding-top:12px}
.meta dd{font-size:17px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.meta a.buy{display:inline-block;margin-top:22px;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;padding:10px 16px}
.text{max-width:740px}
.text h2{font-family:"Noto Serif TC",serif;font-size:30px;line-height:1.35;margin:46px 0 14px;color:var(--ink)}
.text h2:first-child{margin-top:0}
.text p{margin-bottom:16px;color:var(--ink)}
.text a{color:var(--brass-d)}
.text .fig{margin:28px 0 8px;border:1px solid var(--line)}
.text .cap2{font:12px "Sometype Mono","Noto Sans TC",monospace;color:var(--soft);margin-bottom:24px;letter-spacing:.04em}
.text blockquote{font-family:"Noto Serif TC",serif;font-size:22px;line-height:1.6;border-left:3px solid var(--brass-d);padding:2px 0 2px 20px;margin:26px 0;color:var(--ink)}
.wrap{overflow-x:auto;margin:20px 0 22px}
table{width:100%;border-collapse:collapse;font-size:15px;color:var(--ink)}
th{font:600 12px "Sometype Mono","Noto Sans TC",monospace;letter-spacing:.1em;text-align:left;border-bottom:2px solid var(--ink);padding:8px 10px}
td{border-bottom:1px solid var(--line);padding:10px;vertical-align:top}

/* 頁尾 */
footer{background:#000;color:#e8e3d8;padding:70px 40px 34px}
.foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 260px;gap:40px;align-items:start}
.foot .lab{font:600 12px "Sometype Mono","Noto Sans TC",monospace;letter-spacing:.16em;color:#fff;display:block;margin-bottom:14px}
.foot .big{font-size:20px;line-height:1.6;color:#e8e3d8}
.foot .col a{display:block;color:#e8e3d8;text-decoration:none;font-size:15px;padding:4px 0}
.foot .btns a{display:block;background:#3a3a37;color:#fff;text-decoration:none;text-align:center;font-size:14px;padding:12px 10px;margin-bottom:12px}
.fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid #2c2c2a;margin-top:56px;padding-top:20px;font-size:13px;color:#b8b2a6}
.fbar a{color:#b8b2a6}

@media (max-width:1080px){
  .top .l{display:none}
  .band,.read{grid-template-columns:minmax(0,1fr);gap:28px}
  .meta{position:static}
  .halves .panel{height:620px}
  .panel.full{height:640px}
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot .btns{grid-column:1/-1;display:flex;gap:12px}
  .foot .btns a{flex:1}
}
@media (max-width:760px){
  .top{padding:14px 18px 0;gap:14px}
  .top .r{gap:14px}
  .top .r a:not(.buy){display:none}
  .mark{padding:14px 18px 0;font-size:16vw}
  .hall.inner .mark{font-size:12vw}
  .hall{min-height:700px}
  .hall.inner{min-height:600px}
  .cap{left:18px;right:18px;bottom:26px;flex-direction:column;align-items:flex-start}
  .cap h1{font-size:23px}
  .cap .credit{gap:18px}
  .halves{grid-template-columns:minmax(0,1fr)}
  .years{grid-template-columns:repeat(2,minmax(0,1fr))}
  .years li,.years li:first-child{border-left:0;border-bottom:1px solid #3c4a44;padding:10px 0 8px}
  .panel.art-p{height:auto}
  .panel.art-p .art{position:relative;height:auto}
  .panel.art-p .shade{display:none}
  .panel.art-p .who{position:static;background:var(--night);padding:18px 18px 22px}
  .hall:not(.inner) .shade{background:linear-gradient(180deg,rgba(9,14,12,.55) 0%,rgba(9,14,12,.05) 24%,rgba(9,14,12,.3) 44%,rgba(9,14,12,.9) 60%,rgba(9,14,12,.95) 100%)}

  .halves .panel,.panel.full{height:520px}
  .panel.short{height:440px}
  .panel .who{left:18px;right:18px;bottom:24px}
  .band{padding:60px 18px 56px}
  .band h2{font-size:27px}
  .read{padding:50px 18px 60px}
  .text h2{font-size:24px}
  footer{padding:54px 18px 28px}
  .foot{grid-template-columns:minmax(0,1fr)}
}