:root { color-scheme:dark; --bg:#111412; --surface:#1a1f1c; --text:#ecf1ed; --muted:#a0ada4; --line:#354038; --accent:#9cd0ae; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 "Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; } a { color:inherit; }
.topbar { height:66px; border-bottom:1px solid var(--line); padding:0 clamp(18px,4vw,60px); display:flex; align-items:center; justify-content:space-between; }
.brand { font:600 22px Georgia,"Microsoft YaHei",serif; text-decoration:none; white-space:nowrap; }
.brand span { font:400 12px "Segoe UI",sans-serif; color:var(--muted); }
.topbar nav { display:flex; gap:24px; }
.topbar nav a { color:var(--muted); text-decoration:none; }
.topbar nav a[aria-current="page"] { color:var(--accent); }
main { max-width:1520px; margin:0 auto; padding:30px clamp(18px,4vw,60px) 55px; }
.heading { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; }
h1 { font:500 30px/1.2 Georgia,"Microsoft YaHei",serif; margin:0; }
.heading p { color:var(--muted); margin:7px 0 0; font-size:13px; }
#summary { color:var(--muted); font-size:13px; white-space:nowrap; }
.search-row { display:flex; gap:9px; margin:28px 0 10px; }
.search-field { display:flex; align-items:center; gap:10px; height:48px; flex:1; min-width:0; border:1px solid #627567; border-radius:5px; padding:0 14px; background:var(--surface); }
.search-field:focus-within { border-color:var(--accent); outline:2px solid #9cd0ae33; }
.search-field span { font-size:27px; line-height:1; color:var(--muted); }
.search-field input { flex:1; min-width:0; background:transparent; color:var(--text); border:0; outline:0; font-size:16px; }
.search-row select { border:1px solid var(--line); border-radius:5px; width:92px; background:var(--surface); color:var(--text); padding:0 10px; }
.submit { min-width:94px; border:0; border-radius:5px; background:var(--accent); color:#102017; font-weight:700; }
.submit:disabled, #more:disabled { opacity:.5; cursor:wait; }
.topics { display:flex; flex-wrap:wrap; gap:10px; }
.topics button { border:0; background:transparent; color:var(--muted); padding:5px 8px; }
.topics button:hover { color:var(--accent); }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 0 17px; border-bottom:1px solid var(--line); }
.views { display:flex; gap:24px; }
.views button { border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); padding:0 2px 12px; }
.views button[aria-pressed="true"] { color:var(--accent); border-bottom-color:var(--accent); }
#status { padding-bottom:12px; color:var(--muted); font-size:13px; text-align:right; }
.photos { columns:4 245px; column-gap:14px; }
.photo { break-inside:avoid; margin:0 0 22px; }
.photo-button { width:100%; border:0; border-radius:5px; padding:0; position:relative; overflow:hidden; display:block; background:#2e3731; text-align:left; }
.photo-button img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .22s ease; }
.photo-button:hover img { transform:scale(1.03); }
.photo-button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.badge { position:absolute; top:8px; left:8px; padding:3px 7px; border-radius:3px; color:#e9f3eb; background:#102019d9; font-size:11px; }
.photo figcaption { display:flex; flex-direction:column; gap:1px; padding:8px 2px 0; }
.photo-title { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.photo-credit { color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empty { padding:66px 0; color:var(--muted); text-align:center; column-span:all; }
.skeleton { break-inside:avoid; border-radius:5px; background:#2b332c; margin-bottom:16px; animation:fade 1.2s ease-in-out infinite alternate; }
@keyframes fade { from { opacity:.55 } to { opacity:1 } }
.load-row { display:flex; justify-content:center; padding:10px 0 30px; }
#more { border:1px solid #5a6d60; border-radius:5px; padding:9px 26px; background:transparent; color:var(--accent); }
.provenance { color:var(--muted); font-size:12px; border-top:1px solid var(--line); padding-top:18px; margin-top:25px; }
.viewer { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; border:0; padding:0; margin:0; background:#0b0d0c; color:var(--text); }
.viewer::backdrop { background:#0b0d0c; }
.viewer-top { position:absolute; top:0; right:0; left:0; z-index:3; height:56px; background:#0b0d0cdb; padding:0 15px; display:flex; align-items:center; justify-content:space-between; }
#position { font-size:13px; color:var(--muted); }
.viewer-tools { display:flex; gap:5px; }
.viewer-tools button, .arrow { border:0; border-radius:4px; background:#ffffff22; color:#fff; width:36px; height:36px; font-size:19px; line-height:1; }
.viewer-tools button:hover,.arrow:hover { background:#ffffff40; }
.viewer-stage { position:absolute; inset:56px 0 85px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#viewer-image { object-fit:contain; max-width:calc(100% - 105px); max-height:100%; cursor:grab; touch-action:none; user-select:none; }
#viewer-image:active { cursor:grabbing; }
.arrow { position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:38px; height:48px; font-size:30px; }
#prev { left:10px; } #next { right:10px; }
.viewer-caption { position:absolute; bottom:0; right:0; left:0; min-height:85px; background:#151c18; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px clamp(18px,3vw,42px); }
.viewer-caption > div:first-child { display:flex; flex-direction:column; min-width:0; }
#photo-title,#photo-credit { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
#photo-credit { color:var(--muted); font-size:12px; }
.viewer-links { display:flex; gap:14px; font-size:13px; white-space:nowrap; }
.viewer-links a { color:var(--accent); }
@media(max-width:680px) {
  .topbar { height:56px; } .brand { font-size:19px; } .brand span { display:none; }
  main { padding-top:20px; } h1 { font-size:24px; }
  .search-row { flex-wrap:wrap; } .search-field { flex-basis:100%; }
  .search-row select,.submit { flex:1; height:42px; }
  .photos { columns:2 140px; column-gap:10px; }
  .photo { margin-bottom:16px; } .photo-title { font-size:12px; }
  .views { gap:13px; font-size:13px; }
  #status { font-size:12px; }
  .viewer-stage { inset:52px 0 125px; }
  #viewer-image { max-width:calc(100% - 62px); }
  .viewer-top { height:52px; padding:0 8px; }
  .viewer-tools { gap:3px; } .viewer-tools button { width:31px; height:34px; font-size:17px; }
  .arrow { width:30px; height:42px; } #prev { left:0; } #next { right:0; }
  .viewer-caption { min-height:125px; padding:10px 15px; align-items:flex-start; flex-direction:column; gap:5px; }
  .viewer-links { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* Portrait-led editorial layout: quiet UI, large photographs and visible provenance. */
:root { color-scheme:light; --bg:#f7f8f7; --surface:#fff; --text:#202522; --muted:#67736e; --line:#d9dedb; --accent:#aa4c55; }
.topbar { background:#fff; height:70px; }
.brand { font-family:"Songti SC","SimSun",Georgia,serif; font-size:23px; }
.topbar nav a[aria-current="page"] { font-weight:600; }
main { padding-top:26px; }
h1 { font:600 30px/1.25 "Songti SC","SimSun",Georgia,serif; }
.heading p { font-size:14px; }
.search-field { background:#fff; border-color:#bcc7c0; border-radius:4px; }
.search-field:focus-within { outline-color:#aa4c5529; }
.search-field input { color:var(--text); }
.search-row select { background:#fff; color:var(--text); border-color:#cbd5ce; }
.submit { background:var(--accent); color:#fff; border-radius:4px; }
.topics button[data-active="true"] { color:var(--accent); font-weight:600; }
.toolbar { margin-top:29px; }
.photos { columns:3 320px; column-gap:18px; }
.photo { margin-bottom:26px; }
.photo-button { border-radius:4px; background:#e8ebe9; }
.photo-button:focus-visible { outline-color:var(--accent); }
.badge { color:#fff; background:#63363dd9; }
.photo-title { font-size:14px; }
.photo-credit { font-size:12px; }
.empty a { display:inline-block; color:var(--accent); margin-top:14px; }
.skeleton { background:#e0e5e1; }
#more { background:#fff; color:var(--accent); border-color:#d7b4b7; }
.viewer { color:#eff2ef; }
.viewer-top { color:#eff2ef; }
#position { color:#c7d0c9; }
.viewer-caption { color:#eff2ef; }
#photo-credit { color:#b8c3bb; }
.viewer-links a { color:#ecc1ba; }
@media(max-width:680px) {
  .topbar { height:56px; }
  main { padding-top:19px; }
  h1 { font-size:24px; }
  .photos { columns:2 140px; column-gap:10px; }
  .photo { margin-bottom:17px; }
  .photo-title { font-size:12px; }
}