*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#171717;color:#f4f3f1}
body{
  font-family:"Helvetica Neue","PingFang TC","Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.site-shell{
  width:min(1440px, calc(100% - 56px));
  margin:0 auto;
  padding:34px 0 24px;
}
.site-header{
  min-height:118px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:1px dotted #d2b64a;
  padding:0 10px 18px;
  margin-bottom:28px;
}
.brand-area{display:flex;align-items:center;gap:28px}
.world-logo{
  width:150px;height:auto;opacity:.18;filter:grayscale(1);
  margin-top:5px;
}
.brand-copy h1{
  margin:0;
  font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;
  font-size:46px;line-height:1.05;letter-spacing:.08em;font-weight:700;
}
.brand-copy h1 span{color:#d5b64a}
.subtitle{
  margin-top:9px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;letter-spacing:.03em;color:#f0eee9
}
.subtitle b{color:#d5b64a;font-weight:500}
.motto{
  text-align:right;
  font-family:"Brush Script MT","Segoe Script",cursive;
  color:#aaa69a;
  font-size:18px;
  line-height:1.22;
  padding-top:2px;
  white-space:nowrap;
}
.nav-words{
  margin-top:18px;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:8px;
  letter-spacing:.42em;
  color:#8d887b;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:26px 18px;
  align-items:start;
}
.book-card{
  background:#f7f6f2;
  color:#181818;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 7px 18px rgba(0,0,0,.25);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.book-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,.38);
}
.book-meta{
  height:67px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:8px 8px 7px;
  border-bottom:1px solid #dedbd4;
  text-align:center;
}
.book-title{
  font-size:14px;
  line-height:1.25;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}
.book-date{
  margin-top:7px;
  font-size:10px;
  line-height:1;
  color:#444;
  letter-spacing:.02em;
}
.cover-wrap{
  margin:13px 13px 14px;
  aspect-ratio:1536 / 663;
  background:#e9e8e4;
  overflow:hidden;
  border:1px solid #ddd9d1;
}
.cover-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.site-footer{
  margin-top:36px;
  padding:20px 10px 0;
  border-top:1px dotted #d2b64a;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.footer-name{font-family:Georgia,"Times New Roman",serif;font-size:18px}
.footer-sub{
  margin-top:5px;
  font-size:9px;
  letter-spacing:.42em;
  color:#9d998e;
}
.footer-tagline{
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:17px;
  color:#8f8a7d;
  display:flex;align-items:center;gap:18px;
}
.footer-tagline span{display:inline-block;width:28px;height:2px;background:#d2b64a}

@media (max-width:1200px){
  .site-shell{width:min(1120px,calc(100% - 40px))}
  .brand-copy h1{font-size:39px}
  .subtitle{font-size:20px}
  .world-logo{width:125px}
  .gallery{gap:22px 14px}
  .book-meta{height:62px}
  .book-title{font-size:12px}
}
@media (max-width:900px){
  .site-header{flex-direction:column;gap:18px}
  .motto{text-align:left;align-self:flex-end}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .site-shell{width:calc(100% - 24px);padding-top:22px}
  .brand-area{gap:12px}
  .world-logo{width:82px}
  .brand-copy h1{font-size:28px;letter-spacing:.04em}
  .subtitle{font-size:15px}
  .motto{font-size:15px}
  .nav-words{font-size:7px;letter-spacing:.25em}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .book-meta{height:58px;padding:7px 4px}
  .book-title{font-size:10px}
  .book-date{font-size:8px;margin-top:5px}
  .cover-wrap{margin:8px 8px 9px}
  .site-footer{margin-top:26px;padding-left:2px;padding-right:2px}
  .footer-tagline{display:none}
}

.footer-name{color:inherit;text-decoration:none;cursor:pointer}
.footer-name:hover{text-decoration:none;opacity:.8}