*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-deep:#0a0a0f;--bg-card:#141419;--gold:#c9a227;--gold-light:#e8d5b7;--gold-dim:#8a7420;--nailong-yellow:gold;--green:#7ec850;--white-warm:#f5f0e8;--red-dark:#8b2500;--font-serif:"Noto Serif SC", "Playfair Display", "Georgia", serif;--font-sans:"Noto Sans SC", "Helvetica Neue", sans-serif;--font-display:"Playfair Display", "Georgia", serif}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--gold-dim) var(--bg-deep)}body{font-family:var(--font-sans);background:var(--bg-deep);color:var(--gold-light);-webkit-font-smoothing:antialiased;overflow-x:hidden}img{max-width:100%;height:auto;display:block}#hero{justify-content:center;align-items:center;height:100vh;min-height:600px;display:flex;position:relative;overflow:hidden}.hero-bg{filter:blur(2px)brightness(.35);background:url(/paintings/18-%E6%B2%B3%E4%B8%8A%E7%9A%84%E5%A5%B6%E9%BE%99/18-river.webp) 50%/cover no-repeat;position:absolute;inset:0;transform:scale(1.05)}.hero-overlay{z-index:1;background:radial-gradient(#0a0a0f4d 0%,#0a0a0fb3 100%);position:absolute;inset:0}.hero-content{z-index:2;text-align:center;opacity:0;animation:2s ease-out .3s forwards heroFadeIn;position:relative;transform:translateY(20px)}@keyframes heroFadeIn{to{opacity:1;transform:translateY(0)}}.hero-content h1{font-family:var(--font-serif);color:var(--gold);letter-spacing:.4em;text-shadow:0 0 60px #c9a22733,0 2px 8px #000c;margin-bottom:.4em;font-size:clamp(2.5rem,8vw,6rem);font-weight:900}.hero-subtitle{font-family:var(--font-display);letter-spacing:.6em;color:var(--gold-dim);text-transform:uppercase;opacity:0;font-size:clamp(.7rem,1.8vw,1rem);font-weight:400;animation:.8s ease-out 1.5s forwards fadeIn}@keyframes fadeIn{to{opacity:.6}}.scroll-hint{z-index:2;opacity:0;animation:.6s ease-out 3s forwards fadeIn;position:absolute;bottom:50px;left:50%;transform:translate(-50%)}.scroll-hint span{color:var(--gold-dim);opacity:.4;font-size:1.2rem;animation:2.5s ease-in-out infinite float;display:block}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(8px)}}.gallery-intro{justify-content:center;align-items:center;gap:20px;padding:60px 40px;display:flex}.gallery-intro p{font-family:var(--font-serif);color:var(--gold-dim);letter-spacing:.15em;white-space:nowrap;text-align:center;font-size:clamp(.75rem,1.5vw,.95rem)}.intro-line{background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);flex:1;max-width:120px;height:1px}.painting-section{justify-content:center;align-items:center;min-height:100vh;padding:60px clamp(20px,5vw,80px);display:flex;position:relative}.painting-inner{opacity:0;align-items:center;gap:clamp(30px,5vw,80px);width:100%;max-width:1400px;transition:opacity .8s,transform .8s;display:flex;transform:translateY(50px)}.painting-inner.visible{opacity:1;transform:translateY(0)}.painting-frame-wrap{perspective:1000px;flex:0 0 58%}.painting-frame{cursor:pointer;transform-style:preserve-3d;will-change:transform;background:linear-gradient(135deg,#d4a843,#a07828,#d4a843,#8a6420);padding:clamp(8px,1.5vw,18px);transition:transform .3s,box-shadow .3s;position:relative;box-shadow:0 4px 20px #0009,inset 0 1px #ffd7004d,inset 0 -1px #0000004d}.painting-frame:before{content:"";pointer-events:none;z-index:1;border:1px solid #ffd70026;position:absolute;inset:3px}.painting-frame:hover{box-shadow:0 8px 40px #000c,0 0 30px #c9a22726,inset 0 1px #ffd7004d}.painting-frame img{background:var(--bg-card);width:100%;display:block}.painting-plaque{opacity:0;flex:1;transition:opacity .6s .3s,transform .6s .3s;transform:translate(30px)}.painting-inner.visible .painting-plaque{opacity:1;transform:translate(0)}.plaque-card{background:linear-gradient(135deg,#1a1a22,#16161e);border:1px solid #c9a22726;border-radius:2px;padding:clamp(24px,3vw,40px);position:relative}.plaque-card:before{content:"";background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);height:1px;position:absolute;top:12px;left:12px;right:12px}.plaque-number{font-family:var(--font-display);color:var(--gold-dim);letter-spacing:.3em;margin-bottom:1em;font-size:.75rem}.plaque-name{font-family:var(--font-serif);color:var(--gold);margin-bottom:.5em;font-size:clamp(1.3rem,2.5vw,2rem);font-weight:700;line-height:1.3}.plaque-meta{color:var(--gold-dim);margin-bottom:1.2em;font-size:.85rem;line-height:1.6}.plaque-divider{background:var(--gold-dim);width:40px;height:1px;margin-bottom:1.2em}.plaque-desc{color:var(--gold-light);opacity:.85;-webkit-line-clamp:6;-webkit-box-orient:vertical;font-size:clamp(.85rem,1.2vw,.95rem);line-height:1.8;display:-webkit-box;overflow:hidden}.plaque-more{color:var(--gold);cursor:pointer;border-bottom:1px solid #0000;margin-top:1em;font-size:.85rem;transition:border-color .3s;display:inline-block}.plaque-more:hover{border-bottom-color:var(--gold)}.modal{z-index:1000;opacity:0;visibility:hidden;justify-content:center;align-items:center;transition:opacity .4s,visibility .4s;display:flex;position:fixed;inset:0}.modal.open{opacity:1;visibility:visible}.modal-backdrop{-webkit-backdrop-filter:blur(10px);background:#000000d9;position:absolute;inset:0}.modal-content{z-index:1;background:linear-gradient(135deg,#141419,#0e0e14);border:1px solid #c9a22733;border-radius:4px;width:min(95vw,1200px);max-height:90vh;transition:transform .4s;position:relative;overflow-y:auto;transform:translateY(30px)}.modal.open .modal-content{transform:translateY(0)}.modal-close{float:right;z-index:10;color:var(--gold);cursor:pointer;background:0 0;border:1px solid #c9a2274d;border-radius:50%;width:40px;height:40px;margin:16px;font-size:1rem;transition:background .3s,border-color .3s;position:sticky;top:16px}.modal-close:hover{border-color:var(--gold);background:#c9a2271a}.modal-body{gap:clamp(24px,4vw,48px);padding:0 clamp(20px,3vw,40px) clamp(20px,3vw,40px);display:flex}.modal-image{flex:0 0 55%}.modal-frame{background:linear-gradient(135deg,#d4a843,#a07828,#d4a843,#8a6420);padding:clamp(6px,1vw,14px);box-shadow:0 4px 30px #00000080}.modal-frame img{width:100%;display:block}.modal-info{flex:1;padding-top:20px}.modal-label h2{font-family:var(--font-serif);color:var(--gold);margin-bottom:.4em;font-size:clamp(1.4rem,2.5vw,2.2rem)}.modal-meta{color:var(--gold-dim);margin-bottom:.8em;font-size:.9rem}.meta-sep{margin:0 .4em}.modal-tags{flex-wrap:wrap;gap:8px;margin-bottom:1.2em;display:flex}.tag{color:var(--gold-dim);letter-spacing:.05em;border:1px solid #c9a22733;border-radius:2px;padding:3px 10px;font-size:.75rem}.modal-divider{background:linear-gradient(90deg, var(--gold-dim), transparent);width:100%;height:1px;margin-bottom:1.2em}.modal-description{color:var(--gold-light);opacity:.9;font-size:clamp(.9rem,1.1vw,1rem);line-height:1.9}.modal-nav{border-top:1px solid #c9a2271a;justify-content:space-between;align-items:center;padding:16px clamp(20px,3vw,40px);display:flex}.modal-prev,.modal-next{color:var(--gold);cursor:pointer;font-size:.85rem;font-family:var(--font-sans);background:0 0;border:1px solid #c9a22733;padding:8px 20px;transition:background .3s,border-color .3s}.modal-prev:hover,.modal-next:hover{border-color:var(--gold);background:#c9a2271a}.modal-counter{font-family:var(--font-display);color:var(--gold-dim);font-size:.85rem}#footer{background:linear-gradient(180deg, var(--bg-deep), #06060a);border-top:1px solid #c9a2271a;padding:80px clamp(20px,5vw,80px) 30px}.footer-content{grid-template-columns:1fr 1fr;gap:60px;max-width:1000px;margin:0 auto 60px;display:grid}.footer-col h3{font-family:var(--font-serif);color:var(--gold);letter-spacing:.1em;margin-bottom:1em;font-size:1rem}.footer-col p{color:var(--gold-dim);font-size:.85rem;line-height:1.8}.footer-bottom{text-align:center;border-top:1px solid #c9a22714;padding-top:30px}.footer-bottom p{color:#c9a2274d;margin-bottom:.5em;font-size:.8rem}.footer-contact{font-size:.75rem!important}.footer-contact a{color:var(--gold-dim);text-decoration:none;transition:color .3s}.footer-contact a:hover{color:var(--gold)}@media (width<=900px){.painting-inner{flex-direction:column;gap:24px}.painting-frame-wrap{flex:none;width:100%;max-width:500px}.painting-plaque{transform:translateY(20px)}.painting-inner.visible .painting-plaque{transform:translateY(0)}.modal-body{flex-direction:column}.modal-image{flex:none}.footer-content{grid-template-columns:1fr;gap:30px}.gallery-intro p{white-space:normal;font-size:.8rem}}@media (width<=600px){.hero-content h1{letter-spacing:.15em}.painting-section{min-height:auto;padding:40px 16px}}