@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root{--ink:#ece7dc;--muted:#a6afc0;--bg:#0d1629;--surface:#131f36;--raised:#1c2942;--gold:#d9bb84;--line:rgba(217,187,132,.24);--field:rgba(255,255,255,.055);--shadow:0 20px 65px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans SC',system-ui,-apple-system,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%}::selection{background:#d9bb84;color:#111928}.noise{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.17' filter='url(%23n)'/%3E%3C/svg%3E")}
.site-header{position:absolute;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:25px clamp(22px,5vw,86px);z-index:20;border-bottom:1px solid rgba(255,255,255,.16);backdrop-filter:blur(7px)}.brand{display:flex;align-items:center;gap:15px}.brand-stamp{display:block;border:1px solid rgba(225,199,141,.8);font-family:'Noto Serif SC',serif;color:var(--gold);line-height:1.16;text-align:center;padding:8px 12px;font-size:19px;letter-spacing:2px}.brand-type{display:flex;flex-direction:column;gap:1px}.brand-type b{font:600 18px/1.5 'Noto Serif SC',serif;letter-spacing:.12em}.brand-type small{font:500 8px/1.5 system-ui,sans-serif;letter-spacing:.22em;color:#e3d4bb}.top-nav{display:flex;align-items:center;gap:28px;font-size:12px;letter-spacing:.05em}.top-nav>a{transition:color .2s}.top-nav>a:hover{color:var(--gold)}.header-action{display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;width:36px;height:36px;background:rgba(255,255,255,.12);color:#fff;font-size:17px}
.hero{min-height:690px;height:min(900px,100svh);position:relative;isolation:isolate;overflow:hidden;background:#1d2940}.hero-art{position:absolute;inset:0;background:url('/assets/art/01.webp') center 36%/cover no-repeat;transform:scale(1.02);animation:hero-zoom 13s ease-out both;z-index:-3}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,16,31,.94) 0%,rgba(9,16,31,.82) 30%,rgba(9,16,31,.16) 74%,rgba(9,16,31,.14)),linear-gradient(0deg,#0d1629 0%,transparent 35%,rgba(10,18,30,.32) 100%);z-index:-2}.hero-grain{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 66% 24%,rgba(255,222,176,.08),transparent 40%)}.hero-content{position:relative;padding:clamp(160px,21vh,240px) max(25px,calc((100vw - 1330px)/2)) 130px;max-width:100%;display:flex;flex-direction:column;align-items:flex-start}.eyebrow{font:600 10px/1.6 system-ui,sans-serif;letter-spacing:.27em;color:#d9c6a2;display:flex;align-items:center;gap:13px;margin-bottom:36px}.sparkle{font-size:19px;color:#e6c694}.eyebrow-line{display:inline-block;width:39px;height:1px;background:#d9c6a2;opacity:.7}.hero-chinese{font:400 17px/1.8 'Noto Serif SC',serif;letter-spacing:.48em;color:#e4cba8}.hero h1{font-family:'Noto Serif SC',serif;font-weight:700;line-height:1.35;font-size:clamp(57px,7vw,112px);letter-spacing:.12em;margin:18px 0 18px;text-shadow:0 8px 45px rgba(0,0,0,.23)}.hero h1 span{display:block;font-weight:500;color:#ead0a0;font-size:.67em;letter-spacing:.21em;margin-top:7px}.hero-sub{font-family:'Noto Serif SC',serif;color:#e7e5e3;font-size:clamp(14px,1.2vw,17px);letter-spacing:.09em;line-height:2.25;max-width:610px}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:31px}.btn-primary,.btn-secondary{min-height:51px;display:flex;align-items:center;justify-content:center;gap:42px;padding:0 24px;font-size:13px;letter-spacing:.11em;transition:transform .2s,background .2s}.btn-primary{background:var(--gold);color:#152139;font-weight:700}.btn-secondary{background:rgba(0,0,0,.15);border:1px solid rgba(235,215,181,.68);color:#f8f2e9}.btn-primary:hover,.btn-secondary:hover{transform:translateY(-3px)}.hero-meta{display:flex;align-items:center;gap:18px;margin-top:52px;color:#d6d8dc;font-size:12px;letter-spacing:.1em}.hero-meta b{font-family:Georgia,serif;font-size:18px;color:#e9d09c}.hero-meta i{width:3px;height:3px;background:#c5b496;border-radius:50%}.hero-scroll{position:absolute;bottom:38px;left:5%;display:flex;align-items:center;gap:25px;font:500 10px/1.3 system-ui,sans-serif;letter-spacing:.17em;color:#b7bfca}.hero-scroll span{font-size:21px}.hero-side-label{position:absolute;right:3%;bottom:35px;color:#d3d3d3;writing-mode:vertical-rl;font-family:'Noto Serif SC',serif;letter-spacing:.2em;font-size:12px}
.section-pad{padding-left:max(25px,calc((100vw - 1330px)/2));padding-right:max(25px,calc((100vw - 1330px)/2))}.introduction{display:grid;grid-template-columns:220px minmax(0,760px) auto;gap:55px;align-items:start;padding-top:132px;padding-bottom:134px;position:relative;border-bottom:1px solid var(--line)}.intro-marker{color:var(--gold);font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.14em;display:flex;gap:14px;align-items:center;padding-top:23px}.thin-line{width:30px;height:1px;background:var(--gold)}.intro-body h2{font:600 clamp(30px,3.6vw,46px)/1.6 'Noto Serif SC',serif;letter-spacing:.035em;margin:0 0 28px}.intro-body h2 em,.gallery-heading h2 em,.outro blockquote em{font-style:normal;color:var(--gold)}.intro-body p{font-size:14px;line-height:2.5;color:var(--muted);letter-spacing:.03em}.intro-deco{display:flex;align-self:center;color:rgba(217,187,132,.08);font:800 82px/1 'Noto Serif SC',serif;writing-mode:vertical-rl}
.gallery-wrap{padding-top:112px;padding-bottom:100px}.gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:36px}.section-overline{color:var(--gold);font:600 10px/1.6 system-ui,sans-serif;letter-spacing:.23em}.gallery-heading h2{font:600 clamp(33px,3.2vw,49px)/1.5 'Noto Serif SC',serif;margin:13px 0 0;letter-spacing:.06em}.gallery-count{display:flex;align-items:center;gap:13px;color:#b5bccc}.gallery-count b{font:400 59px/1 Georgia,serif;color:var(--gold)}.gallery-count span{font:600 11px/1.6 system-ui,sans-serif;letter-spacing:.1em}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:41px;border-block:1px solid var(--line);padding-block:19px}.chips{display:flex;gap:5px;flex-wrap:wrap}.chip{background:none;border:1px solid transparent;color:var(--muted);padding:7px 13px;font-size:12px;border-radius:2px;white-space:nowrap}.chip:hover{color:var(--ink)}.chip.active{color:var(--gold);border-color:var(--line);background:rgba(217,187,132,.09)}.toolbar-right{display:flex;gap:10px;align-items:center}.searchbox{display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(217,187,132,.35);height:35px}.searchbox svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.8}.searchbox input{color:var(--ink);background:none;outline:none;border:0;width:174px;font-size:12px}.searchbox input::placeholder{color:var(--muted)}.tool-icon{font-size:23px;border:0;background:none;color:var(--muted);width:35px;height:35px}.tool-icon.active{color:var(--gold)}.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:25px;row-gap:51px;min-height:240px}.art-card{min-width:0;animation:appear .5s ease both;animation-delay:var(--delay)}.card-media-wrap{position:relative;overflow:hidden;background:var(--raised)}.card-media{border:0;padding:0;width:100%;display:block;text-align:left;position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(135deg,#23344b,#455d64 45%,#ba9f75);color:var(--ink)}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.75,.2,1);display:block}.art-card:hover .card-media img{transform:scale(1.065)}.card-media.image-missing:after{content:'待同步画作';position:absolute;inset:0;display:grid;place-items:center;font-family:'Noto Serif SC',serif;font-size:15px;letter-spacing:.2em;color:#e9d2aa}.card-overlay{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,rgba(0,0,0,.38));opacity:.8}.card-number{position:absolute;top:15px;left:17px;color:#fff;font:500 13px/1 Georgia,serif;text-shadow:0 1px 5px #000}.card-open{position:absolute;right:17px;bottom:12px;color:#fff;font-size:29px;line-height:1}.favorite{position:absolute;top:10px;right:10px;background:rgba(10,18,32,.4);backdrop-filter:blur(7px);width:35px;height:35px;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;font-size:20px;transition:transform .2s}.favorite:hover{transform:scale(1.1)}.favorite.selected{color:#ffb7c6}.card-meta{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-top:18px}.card-title{font:600 21px/1.5 'Noto Serif SC',serif;margin:0;letter-spacing:.1em}.card-category{color:var(--gold);font-size:10px;white-space:nowrap}.card-desc{color:var(--muted);font-size:12px;line-height:2.1;margin:8px 0 0}.empty{text-align:center;padding:70px 15px}.empty[hidden]{display:none}.empty>div{font-size:40px;color:var(--gold)}.empty button{background:var(--gold);border:0;padding:9px 20px;color:#152139;margin-top:12px}.page-endnote{display:flex;justify-content:center;align-items:center;gap:30px;margin-top:105px;font-size:11px;letter-spacing:.23em;color:var(--gold)}.page-endnote i{height:1px;width:80px;background:var(--gold)}
.outro{background:#19253a;padding-top:115px;padding-bottom:119px;text-align:center}.outro-line{font-size:11px;letter-spacing:.26em;color:var(--gold)}.outro blockquote{font:500 clamp(28px,3.6vw,52px)/1.8 'Noto Serif SC',serif;letter-spacing:.1em;margin:45px auto 40px}.outro-stamp{margin:auto;border:1px solid var(--gold);color:var(--gold);padding:9px 16px;width:max-content;font:600 15px/1.3 'Noto Serif SC',serif;letter-spacing:.16em}
footer{display:grid;grid-template-columns:1fr 2fr auto;gap:30px;align-items:center;padding:48px max(25px,calc((100vw - 1330px)/2));border-top:1px solid var(--line)}.footer-brand{font:600 20px/1.4 'Noto Serif SC',serif;letter-spacing:.1em}.footer-brand span{color:var(--gold)}.footer-text{color:var(--muted);font-size:11px;line-height:2}.back-top{font-size:12px;color:var(--gold);white-space:nowrap}
.lightbox{padding:0;border:1px solid rgba(217,187,132,.3);background:#131e30;color:#f4efe7;width:min(94vw,1240px);max-width:none;max-height:92dvh;box-shadow:0 30px 100px rgba(0,0,0,.65)}.lightbox::backdrop{background:rgba(2,7,16,.92);backdrop-filter:blur(10px)}.lightbox-shell{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);height:min(87dvh,800px)}.lightbox-art{position:relative;background:#091021;display:grid;place-items:center;min-height:0;overflow:hidden}.lightbox-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.lightbox-top{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:linear-gradient(rgba(0,0,0,.5),transparent);font:12px Georgia,serif;letter-spacing:.15em}.lightbox-close{width:37px;height:37px;border:1px solid rgba(255,255,255,.5);border-radius:50%;color:#fff;background:rgba(0,0,0,.25)}.picture-arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;line-height:1;border:1px solid rgba(255,255,255,.25);color:#fff;background:rgba(7,13,28,.35);border-radius:50%;width:45px;height:45px;display:grid;place-items:center}.picture-arrow.prev{left:15px}.picture-arrow.next{right:15px}.picture-arrow:hover{background:rgba(7,13,28,.85)}.lightbox-info{padding:clamp(20px,3vw,48px);overflow:auto;align-self:center}.detail-overline{font-size:10px;letter-spacing:.23em;color:var(--gold);display:flex;justify-content:space-between}.lightbox-info h2{font:600 clamp(30px,3vw,46px)/1.4 'Noto Serif SC',serif;margin:30px 0 11px}.detail-tag{font-size:11px;color:var(--gold)}.detail-poem{font:400 16px/2.1 'Noto Serif SC',serif;margin:37px 0;color:#ece3d3}.detail-rule{height:1px;background:rgba(217,187,132,.23);margin:30px 0}.detail-label{font-size:10px;color:var(--gold);letter-spacing:.15em}.detail-summary{font-size:13px;color:#bdc4ce;line-height:2.2}.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}.detail-actions a{border:1px solid rgba(217,187,132,.45);padding:11px 14px;font-size:12px;color:#e9d5b1}.detail-actions a:first-child{background:var(--gold);color:#182238}.detail-footnote{font-size:11px;color:#8d98ad;margin-top:24px}
.light-mode{--ink:#222c3f;--muted:#667487;--bg:#f8f5ef;--surface:#f3eee6;--raised:#ebe6dd;--line:rgba(91,72,46,.19);--field:rgba(12,35,70,.045)}.light-mode .introduction,.light-mode .gallery-wrap{background:var(--bg)}.light-mode .outro{background:#eae2d6}.light-mode .hero{color:#fff}.light-mode .site-header{color:#fff}.light-mode .hero .hero-meta,.light-mode .hero .hero-sub{color:#fff}.light-mode .intro-deco{color:rgba(127,93,43,.10)}
@keyframes hero-zoom{from{transform:scale(1.09)}to{transform:scale(1.02)}}@keyframes appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.introduction{grid-template-columns:170px minmax(0,1fr);gap:30px}.intro-deco{display:none}.toolbar{align-items:flex-start;flex-direction:column}.toolbar-right{align-self:flex-end}.hero-content{padding-inline:6vw}.site-header{padding-inline:6vw}}
@media(max-width:750px){.site-header{padding:17px 20px}.brand-type b{font-size:14px}.brand-type small{font-size:7px}.brand-stamp{font-size:15px;padding:7px 9px}.top-nav{gap:9px}.top-nav a{display:none}.hero{height:780px;min-height:660px;max-height:96svh}.hero-art{background-position:60% center}.hero-shade{background:linear-gradient(0deg,#0d1629 0%,rgba(9,16,31,.78) 15%,rgba(9,16,31,.55) 61%,rgba(9,16,31,.25) 100%)}.hero-content{padding:clamp(190px,30svh,280px) 24px 120px}.eyebrow{font-size:8px;letter-spacing:.14em;margin-bottom:16px}.hero h1{font-size:clamp(46px,9.5vw,76px)}.hero-chinese{font-size:12px}.hero-sub{font-size:13px}.hero-meta{font-size:10px;gap:10px;margin-top:35px}.hero-side-label,.hero-scroll{display:none}.introduction{display:block;padding-block:83px}.intro-marker{margin-bottom:30px;padding:0}.intro-body h2{font-size:30px}.intro-body p{font-size:13px}.gallery-wrap{padding-block:78px}.gallery-heading h2{font-size:32px}.gallery-count b{font-size:42px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:31px 14px}.card-title{font-size:17px}.card-category{font-size:9px}.card-desc{font-size:11px}.toolbar-right{width:100%;justify-content:space-between}.searchbox{flex:1}.searchbox input{width:100%}.lightbox{width:100vw;max-height:100dvh;height:100dvh;border:0}.lightbox-shell{display:flex;flex-direction:column;height:100dvh}.lightbox-art{height:min(66dvh,650px);min-height:0;flex-shrink:0}.lightbox-info{align-self:auto;flex:1;overflow:auto;padding:21px 25px 40px}.lightbox-info h2{font-size:27px;margin:14px 0 6px}.detail-poem{margin:16px 0;font-size:13px}.detail-rule{margin:16px 0}.detail-actions{margin-top:12px}.picture-arrow{width:37px;height:37px;font-size:32px}.outro{padding-block:77px}.outro blockquote{font-size:26px}footer{display:block;padding-block:30px}.footer-text{margin-block:16px}.back-top{display:inline-block}}
@media(max-width:400px){.gallery-grid{gap:25px 10px}.card-title{font-size:15px}.card-category{font-size:8px}.hero-actions{gap:8px}.btn-primary,.btn-secondary{font-size:11px;padding:0 15px}.eyebrow-line{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}