:root{color-scheme:light;--paper:#f7f4ee;--ink:#211c19;--muted:#665d56;--red:#7d241b;--line:#d9d1c8;font:16px/1.5 "Inter","PingFang SC","Microsoft YaHei",sans-serif;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,.stage:focus-visible{outline:2px solid #bc674f;outline-offset:4px}
.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}
.top{height:76px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:11px;align-items:center;font-size:.8rem;font-weight:700;letter-spacing:.12em}
.brand>span:first-child{background:var(--red);width:8px;height:8px;transform:rotate(45deg)}
.brand-divider{color:#a78e80}
.top-link,footer a{font-size:.875rem}
.top-link span{margin-left:10px;color:var(--red)}
.intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:5%;padding:48px 0 60px;align-items:center}
.eyebrow{font-size:.73rem;letter-spacing:.2em;color:var(--red);font-weight:700;margin:0 0 21px}
h1,h2{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;margin:0}
h1{font-size:clamp(2.75rem,5.5vw,5.8rem);line-height:1.12;letter-spacing:-.045em}
.intro-description{color:var(--muted);margin:22px 0 28px;max-width:25em}
.primary{display:inline-flex;align-items:center;gap:28px;background:var(--red);color:white;padding:11px 17px;font-size:.9rem}
.primary:hover{background:#601912}
.image-button{position:relative;border:0;padding:0;background:#e6e0d7;display:block;overflow:hidden;text-align:left;width:100%}
.image-button img{display:block;width:100%;height:auto;transition:transform .35s ease}
.image-button:hover img{transform:scale(1.025)}
.works{padding-top:30px;border-top:1px solid var(--line);scroll-margin-top:16px}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:15px}
h2{font-size:clamp(1.9rem,3vw,2.9rem)}
#count{font-size:.85rem;color:var(--muted);margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:23px 0 25px}
.filters button{border:1px solid var(--line);background:transparent;padding:7px 13px;font-size:.85rem}
.filters button:hover{border-color:var(--red)}
.filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 16px}
.card{margin:0;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 290px}
.card figcaption{display:flex;justify-content:space-between;gap:8px;color:var(--muted);padding-top:8px;font-size:.8rem}
.card figcaption span:last-child{font-variant-numeric:tabular-nums}
.card img{aspect-ratio:4/3;object-fit:contain}
footer{margin-top:60px;padding:21px 0 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;font-size:.8rem;color:var(--muted)}
body:has(dialog[open]){overflow:hidden}
dialog{position:fixed;inset:0;margin:auto;padding:0;border:0;width:min(1420px,96vw);height:94dvh;max-width:none;max-height:none;background:#181513;color:#faf5ef}
dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
dialog::backdrop{background:#0c0908db}
.viewer-bar,.viewer-controls{padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.viewer-bar strong{font-size:.9rem}
#position,#status{color:#d0c2b8;font-size:.78rem}
#position{margin-left:12px}
.viewer-actions{display:flex;gap:8px}
dialog button{border:1px solid #63574f;background:none;padding:6px 10px;font-size:.85rem}
dialog button:hover:not(:disabled){background:#45332c}
dialog button:disabled{opacity:.35;cursor:default}
.stage{overflow:auto;background:#0d0b0a}
.stage img{display:block;width:100%;height:100%;object-fit:contain}
.stage.zoomed img{width:2560px;height:auto;max-width:none;margin:auto}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.intro{gap:24px}}
@media(max-width:640px){.wrap{width:calc(100% - 32px)}.top{height:62px}.intro{grid-template-columns:1fr;padding:37px 0 30px}.eyebrow{margin-bottom:13px}.intro-description{margin:14px 0 20px}.grid{gap:17px 9px}.card figcaption{font-size:.7rem}.card{contain-intrinsic-size:auto 145px}.filters{margin:15px 0 18px}.filters button{padding:6px 9px}.viewer-controls button span{display:none}dialog{width:100vw;height:100dvh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
[hidden]{display:none!important}
.stage.zoomed img{width:var(--image-width,2560px)}
.contact dt{font-size:.8rem;color:var(--muted)}
.contact dd{margin:3px 0 0}
.contact a{text-decoration:underline;text-underline-offset:3px}
footer{margin-top:35px}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.footer-links button{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px}
#admin{width:min(920px,96vw);height:min(86dvh,820px);color:var(--ink);background:var(--paper)}
#admin[open]{grid-template-rows:auto minmax(0,1fr)}
.admin-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--line)}
.admin-heading h2{font-size:1.8rem}
.admin-content{overflow:auto;padding:0 24px 24px}
.admin-content section{padding:15px 0;border-bottom:1px solid var(--line)}
.admin-content h3{margin:0 0 9px}
.admin-content form{display:flex;flex-wrap:wrap;align-items:end;gap:10px}
.admin-content label{display:inline-grid;gap:4px;font-size:.85rem;max-width:100%}
.admin-content input,.admin-content select{font:inherit;padding:6px;border:1px solid var(--line);min-width:0;max-width:100%;background:white;color:var(--ink)}
#admin button{border-color:var(--line)}
#admin button:hover:not(:disabled){background:#e9dfd5}
#admin-status{color:var(--red);position:sticky;top:0;margin:0;background:var(--paper);padding:6px 0;z-index:1}
#admin-status:empty,#site-status:empty{display:none}
#work-list{max-height:220px;overflow:auto;list-style:none;margin:8px 0 0;padding:0}
#work-list li{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border-top:1px solid var(--line)}
.stats-table{overflow:auto}
.stats-table table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:.87rem}
.stats-table th,.stats-table td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--line)}
@media(max-width:640px){#admin{width:100vw;height:100dvh}.admin-heading,.admin-content{padding-inline:16px}}

.image-button,.stage{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.image-button img,.stage img{
  pointer-events:none;
  -webkit-user-drag:none;
}

#work-list li{gap:10px}
.work-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
@media(max-width:640px){#work-list li{align-items:flex-start;flex-direction:column}}

.studio-panel{width:100%;max-width:520px;min-width:0;justify-self:end;border:1px solid var(--line);padding:14px;background:#fcfaf6}
.location-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.location-heading h2{font-size:clamp(1.45rem,2.7vw,1.85rem);line-height:1.12}
.location-heading h2 span{display:block;margin-bottom:5px;font:600 .72rem/1.3 system-ui,sans-serif;color:var(--muted)}
.contact h2{font-size:1.18rem}
.map-link{color:var(--red);font-size:.85rem;text-decoration:underline;text-underline-offset:3px}
.studio-map{display:block;width:100%;height:200px;border:0;background:#eae5dc}
.studio-address{font-style:normal;margin:8px 0 0;font-size:.875rem}
.contact{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.contact dl{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0 0;font-size:.85rem;overflow-wrap:anywhere}
.contact dl div:first-child{flex-basis:100%}

@media(max-width:640px){.studio-panel{justify-self:center}}