:root{
  --paper:#efece6;
  --paper-2:#e7e3db;
  --ink:#1d2126;
  --ink-soft:#5a5f66;
  --line:#cfc9be;
  --accent:#2f4a5a;
  --card:#f6f4ef;
  --shadow:0 1px 2px rgba(20,24,28,.08), 0 12px 30px -18px rgba(20,24,28,.35);
  --serif:"Noto Serif TC","Songti TC","Songti SC","Source Han Serif TC","PingFang TC","Microsoft JhengHei",serif;
  --mono:ui-monospace,"SFMono-Regular","Menlo","Consolas",monospace;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color-scheme: light;
}
html[data-theme="dark"]{
  --paper:#12161b;
  --paper-2:#171c22;
  --ink:#e9e6df;
  --ink-soft:#a2a8ad;
  --line:#2b323a;
  --accent:#8fb1c4;
  --card:#1a2026;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 36px -18px rgba(0,0,0,.8);
  color-scheme: dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease,color .35s ease;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:6px;z-index:100;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* Masthead */
.masthead{padding:clamp(2.2rem,6vw,5.5rem) clamp(1.2rem,5vw,4rem) 0}
.masthead-inner{max-width:1180px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 1.2rem}
.title{font-family:var(--serif);font-weight:600;font-size:clamp(2.9rem,9vw,6.4rem);line-height:1;letter-spacing:.04em;margin:0}
.title-en{font-family:var(--mono);font-size:clamp(.78rem,1.4vw,.95rem);letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);margin:.9rem 0 0}
.lede{font-family:var(--serif);font-size:clamp(1rem,1.7vw,1.22rem);max-width:34em;margin:2rem 0 0;color:var(--ink)}
.lede-en{font-size:.82rem;max-width:44em;color:var(--ink-soft);margin:.6rem 0 0;font-style:italic}
.masthead-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:2.2rem 0 0}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.15rem;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;font-size:.86rem;letter-spacing:.04em;cursor:pointer;transition:transform .15s ease,background-color .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.theme-icon{font-size:1rem;line-height:1}
.masthead-rule{max-width:1180px;margin:clamp(2rem,5vw,3.4rem) auto 0;height:1px;background:linear-gradient(90deg,var(--ink) 0 60px,var(--line) 60px 100%)}

/* Filters */
.filters{max-width:1180px;margin:0 auto;padding:1.6rem clamp(1.2rem,5vw,0rem) 0;display:flex;flex-direction:column;gap:.85rem}
.filter-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.filter-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);min-width:3.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{font-family:var(--mono);font-size:.8rem;letter-spacing:.03em;padding:.32rem .8rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background-color .18s,border-color .18s,color .18s}
.chip:hover{border-color:var(--ink-soft)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter-meta{display:flex;align-items:center;gap:1rem;padding-top:.2rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
#result-count{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--ink-soft)}
.reset{background:none;border:0;text-decoration:underline;font-size:.8rem;color:var(--accent);cursor:pointer;padding:.2rem}

/* Gallery */
.collection{max-width:1180px;margin:0 auto;padding:2rem clamp(1.2rem,5vw,0rem) 4rem}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.7rem,1.6vw,1.2rem)}
.card{grid-column:span 4;background:transparent;border:0;padding:0;margin:0;cursor:pointer;text-align:left;display:flex;flex-direction:column;transition:transform .2s ease}
.card:hover .frame{box-shadow:var(--shadow)}
.card:focus-visible .frame{outline:2px solid var(--accent);outline-offset:4px}
.card.wide{grid-column:span 6}
.card.tall{grid-column:span 4}
.frame{position:relative;background:var(--card);overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:box-shadow .25s ease;aspect-ratio:1/1}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .6s}
.frame img[data-error="true"]{opacity:1;color:var(--ink-soft);padding:1rem;object-fit:contain}
.frame img[data-loaded="false"]{opacity:0}
.card:hover .frame img{transform:scale(1.02)}
.card-meta{display:flex;align-items:baseline;gap:.6rem;margin-top:.55rem;padding:0 .1rem}
.card-year{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink-soft)}
.card-title{font-family:var(--serif);font-size:1rem;line-height:1.35;color:var(--ink)}
.card-place{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);margin-left:auto;white-space:nowrap}
.empty{font-family:var(--serif);text-align:center;color:var(--ink-soft);padding:4rem 1rem;font-size:1.05rem}

/* About & footer */
.about{max-width:1180px;margin:0 auto;padding:0 clamp(1.2rem,5vw,0rem) 4rem;border-top:1px solid var(--line);padding-top:2.2rem}
.about-title{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin:0 0 1rem}
.about p{max-width:52em;font-size:.92rem;color:var(--ink)}
.credit{font-size:.82rem!important;color:var(--ink-soft)!important}
.site-footer{border-top:1px solid var(--line);padding:2rem clamp(1.2rem,5vw,4rem) 3rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;max-width:1280px;margin:0 auto}
.site-footer p{margin:0}
.tiny{font-size:.72rem}
.filters,.collection,.about{max-width:1308px;padding-inline:clamp(1.2rem,5vw,4rem)}

/* Viewer */
.viewer{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.viewer[hidden]{display:none}
.viewer-backdrop{position:absolute;inset:0;background:rgba(8,10,13,.9);backdrop-filter:blur(6px) saturate(.8)}
html[data-theme="light"] .viewer-backdrop{background:rgba(24,26,29,.92)}
.viewer-shell{position:relative;z-index:2;width:min(1200px,94vw);height:92vh;display:flex;flex-direction:column;color:#efece6;font-family:var(--sans)}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:.7rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:#b9bdbd}
.viewer-tools{display:flex;gap:.5rem}
.tool{background:transparent;border:1px solid rgba(239,236,230,.28);color:#efece6;text-decoration:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;padding:.4rem .8rem;border-radius:999px;cursor:pointer;transition:border-color .2s,background-color .2s}
.tool:hover{border-color:#efece6;background:rgba(239,236,230,.08)}
.viewer-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.viewer-figure{margin:0;display:flex;flex-direction:column;align-items:center;max-height:100%;height:100%;justify-content:center;width:100%}
#viewer-img{max-width:100%;max-height:calc(100% - 6.5rem);width:auto;height:auto;object-fit:contain;box-shadow:0 30px 80px -30px rgba(0,0,0,.85);background:#0a0c0f}
.viewer-caption{width:100%;max-width:56em;padding-top:.9rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:baseline}
.viewer-error{color:#efece6;text-align:center;font-size:.9rem}
.v-year{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;color:#9ba2a5;grid-row:span 2;align-self:center;border-right:1px solid rgba(255,255,255,.2);padding-right:.9rem}
.v-title{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.45rem);margin:0;font-weight:600;color:#f2efe8}
.v-place{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:#9ba2a5;margin:0}
.nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(18,22,27,.6);border:1px solid rgba(239,236,230,.28);color:#efece6;width:48px;height:48px;border-radius:50%;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:background-color .2s,border-color .2s}
.nav:hover{background:rgba(239,236,230,.16);border-color:#efece6}
.nav.prev{left:-4px}
.nav.next{right:-4px}

/* Responsive */
@media (max-width:900px){
  .card,.card.wide,.card.tall{grid-column:span 6}
}
@media (max-width:560px){
  .gallery{gap:.7rem}
  .card,.card.wide,.card.tall{grid-column:span 12}
  .filters{padding-top:1.2rem}
  .filter-row{flex-direction:column;align-items:flex-start;gap:.45rem}
  .filter-label{min-width:0}
  .viewer-shell{width:100vw;height:100%;padding:.5rem}
  .viewer-bar{padding:.4rem .3rem .5rem;font-size:.68rem}
  .viewer-stage{flex-direction:column}
  #viewer-img{max-height:calc(100% - 8rem)}
  .viewer-caption{grid-template-columns:1fr;gap:.15rem;padding:.6rem .3rem 0}
  .v-year{grid-row:auto;border-right:0;padding-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:.3rem;justify-self:start}
  .nav{width:40px;height:40px;font-size:1.3rem}
  .nav.prev{left:2px}
  .nav.next{right:2px}
  .site-footer{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .card:hover .frame img{transform:none}
}
body.viewer-open{overflow:hidden}