\u827a\u672f\u535a\u7269\u9986 \u00b7 Lumin Art<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Noto+Serif+SC:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n:root {\n --gold: #b8963e;\n --gold-light: #d4af6a;\n --gold-pale: rgba(184,150,62,0.1);\n --ink: #0e0c09;\n --ink2: #161410;\n --ink3: #1c1916;\n --parchment: #f0e8d6;\n --stone: #9e9282;\n --serif: 'Playfair Display','Noto Serif SC',serif;\n --body: 'Cormorant Garamond','Noto Serif SC',serif;\n}\nhtml { scroll-behavior: smooth; }\nbody { background: var(--ink); color: var(--parchment); font-family: var(--body); font-size: 18px; line-height: 1.75; overflow-x: hidden; }\n\n\/* \u2500\u2500 TOP NAV \u2500\u2500 *\/\n.top-nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 500;\n height: 56px; display: flex; align-items: center; justify-content: space-between;\n padding: 0 52px;\n background: rgba(14,12,9,0.96); backdrop-filter: blur(20px);\n border-bottom: 1px solid rgba(184,150,62,0.14);\n}\n.nav-logo { font-family: var(--serif); font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-style: italic; }\n.nav-links { display: flex; gap: 28px; list-style: none; }\n.nav-links a { font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(158,146,130,.55); text-decoration: none; cursor: pointer; transition: color .2s; }\n.nav-links a:hover, .nav-links a.active { color: var(--gold); }\n\n\/* \u2500\u2500 HERO BANNER \u2500\u2500 *\/\n.hero-banner {\n position: relative; height: 44vh; min-height: 320px;\n display: flex; flex-direction: column; justify-content: flex-end;\n padding: 0 52px 52px; overflow: hidden;\n margin-top: 56px;\n}\n.hero-bg {\n position: absolute; inset: 0;\n background: linear-gradient(to bottom, rgba(14,12,9,.2) 0%, rgba(14,12,9,.7) 55%, rgba(14,12,9,1) 100%),\n linear-gradient(135deg, #1e1508 0%, #2e2010 30%, #1a1008 70%, #0e0c09 100%);\n}\n.hero-grid {\n position: absolute; inset: 0; opacity: .04;\n background-image: repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(184,150,62,.8) 60px),\n repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(184,150,62,.4) 60px);\n}\n.hero-eyebrow {\n position: relative; font-size: .6rem; letter-spacing: .32em; text-transform: uppercase;\n color: var(--gold); margin-bottom: 14px; display: flex; align-items: center; gap: 14px;\n}\n.hero-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--gold); opacity: .55; }\n.hero-title {\n position: relative; font-family: var(--serif);\n font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 400; line-height: 1.05;\n margin-bottom: 12px;\n}\n.hero-title em { font-style: italic; color: var(--gold-light); }\n.hero-subtitle {\n position: relative; font-size: .88rem; color: rgba(200,191,173,.4);\n letter-spacing: .14em; font-style: italic;\n}\n.hero-count {\n position: absolute; bottom: 52px; right: 52px;\n text-align: right;\n}\n.hero-count-num { font-family: var(--serif); font-size: 3rem; color: rgba(184,150,62,.18); line-height: 1; }\n.hero-count-label { font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(158,146,130,.3); }\n\n\/* \u2500\u2500 CONTROLS BAR \u2500\u2500 *\/\n.controls {\n position: sticky; top: 56px; z-index: 300;\n background: rgba(14,12,9,.97); backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(184,150,62,.1);\n padding: 0 52px;\n}\n.filter-row { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; }\n.filter-row::-webkit-scrollbar { display: none; }\n.filter-btn {\n padding: 16px 18px; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;\n color: rgba(158,146,130,.45); cursor: pointer; border: none; border-bottom: 2px solid transparent;\n background: none; font-family: var(--body); white-space: nowrap;\n transition: color .2s, border-color .2s;\n}\n.filter-btn:hover { color: rgba(240,232,214,.7); }\n.filter-btn.active { color: var(--gold); border-bottom-color: var(--gold); }\n\n\/* \u2500\u2500 RESULTS + SORT BAR \u2500\u2500 *\/\n.results-bar {\n padding: 20px 52px 0;\n display: flex; align-items: center; justify-content: space-between;\n}\n.results-text { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(158,146,130,.35); }\n.results-num { color: var(--gold); font-family: var(--serif); font-size: .85rem; }\n.sort-wrap { display: flex; align-items: center; gap: 10px; }\n.sort-label { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(158,146,130,.4); white-space: nowrap; }\n.sort-btn {\n padding: 5px 12px; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;\n color: rgba(158,146,130,.5); cursor: pointer; border: 1px solid transparent;\n background: none; font-family: var(--body); transition: all .2s;\n}\n.sort-btn:hover { color: rgba(240,232,214,.7); border-color: rgba(184,150,62,.18); }\n.sort-btn.active { color: var(--gold); border-color: rgba(184,150,62,.35); background: rgba(184,150,62,.06); }\n\n\/* \u2500\u2500 GRID \u2500\u2500 *\/\n.museum-grid {\n padding: 24px 52px 80px;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n}\n.museum-card {\n background: var(--ink2);\n border: 1px solid rgba(184,150,62,.1);\n overflow: hidden; cursor: pointer;\n transition: border-color .28s, transform .28s;\n display: flex; flex-direction: column;\n text-decoration: none; color: inherit;\n}\n.museum-card:hover { border-color: rgba(184,150,62,.38); transform: translateY(-3px); }\n.museum-card:hover .card-img { transform: scale(1.04); }\n.card-img-wrap {\n width: 100%;\n height: 0;\n padding-top: 66.67%;\n overflow: hidden;\n position: relative;\n background: var(--ink3);\n display: block;\n}\n.card-img {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n width: 100%; height: 100%;\n object-fit: cover;\n object-position: center center;\n display: block;\n transition: transform .5s cubic-bezier(.25,.46,.45,.94);\n filter: brightness(.88) saturate(.92);\n}\n.card-img:hover { filter: brightness(.95) saturate(1); }\n.card-img-placeholder {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n width: 100%; height: 100%;\n display: flex; align-items: center; justify-content: center;\n}\n\/* subtle overlay at bottom of image *\/\n.card-img-wrap::after {\n content: ''; position: absolute; inset: 0;\n background: linear-gradient(to top, rgba(14,12,9,.55) 0%, transparent 55%);\n pointer-events: none;\n}\n.card-year-overlay {\n position: absolute; bottom: 10px; left: 12px;\n font-size: .56rem; letter-spacing: .2em; text-transform: uppercase;\n color: rgba(212,175,106,.75); z-index: 1;\n font-family: var(--body);\n}\n.card-body {\n padding: 14px 16px 18px;\n flex: 1; display: flex; flex-direction: column; gap: 4px;\n}\n.card-country {\n font-size: .56rem; letter-spacing: .22em; text-transform: uppercase;\n color: rgba(184,150,62,.55); margin-bottom: 3px;\n display: flex; align-items: center; gap: 7px;\n}\n.card-country::before { content: ''; width: 16px; height: 1px; background: rgba(184,150,62,.3); flex-shrink: 0; }\n.card-name {\n font-family: var(--serif); font-size: 1rem; font-weight: 400;\n line-height: 1.3; color: var(--parchment);\n}\n.card-city {\n font-size: .72rem; color: rgba(158,146,130,.5); margin-top: 2px;\n}\n.card-arrow {\n margin-top: auto; padding-top: 12px;\n font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;\n color: rgba(184,150,62,.35); display: flex; align-items: center; gap: 8px;\n transition: color .2s, gap .2s;\n}\n.museum-card:hover .card-arrow { color: var(--gold); gap: 12px; }\n.card-arrow::after { content: '\u2192'; }\n\n\/* \u2500\u2500 NO RESULTS \u2500\u2500 *\/\n.no-results {\n grid-column: 1\/-1; text-align: center; padding: 60px 0;\n color: rgba(158,146,130,.35); font-style: italic; font-size: 1.1rem;\n}\n\n\/* \u2500\u2500 FOOTER \u2500\u2500 *\/\nfooter {\n border-top: 1px solid rgba(184,150,62,.1);\n padding: 28px 52px;\n display: flex; justify-content: space-between; align-items: center;\n font-size: .64rem; letter-spacing: .1em; color: rgba(158,146,130,.26);\n}\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media (max-width: 1200px) {\n .museum-grid { grid-template-columns: repeat(3, 1fr); }\n}\n@media (max-width: 1024px) {\n .top-nav, .hero-banner, .controls, .results-bar, .museum-grid, footer { padding-left: 32px; padding-right: 32px; }\n .museum-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }\n}\n@media (max-width: 768px) {\n .top-nav { padding: 0 18px; }\n .nav-links { display: none; }\n .hero-banner { padding: 0 18px 36px; }\n .hero-title { font-size: clamp(1.8rem, 8vw, 2.8rem); }\n .controls { padding: 0 18px; }\n .results-bar, .museum-grid, footer { padding-left: 18px; padding-right: 18px; }\n .museum-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }\n .hero-count { display: none; }\n .sort-label { display: none; }\n .sort-btn { padding: 4px 8px; font-size: .55rem; }\n}\n@media (max-width: 480px) {\n .museum-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n<\/head>\n<body>\n\n\n<nav class=\"top-nav\">\n <div class=\"nav-logo\">Lumin Art<\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#\">\u7fa4\u661f\u95ea\u8000\u65f6<\/a><\/li>\n <li><a href=\"#\" class=\"active\">\u827a\u672f\u535a\u7269\u9986<\/a><\/li>\n <li><a href=\"#\">\u8d85\u6e05\u539f\u753b<\/a><\/li>\n <li><a href=\"#\">\u827a\u672f\u8fd0\u52a8<\/a><\/li>\n <li><a href=\"#\">\u6d6e\u5149\u4e4b\u4e66<\/a><\/li>\n <li><a href=\"#\">\u753b\u4f5c\u7cbe\u9009<\/a><\/li>\n <\/ul>\n<\/nav>\n\n\n<div class=\"hero-banner\">\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-grid\"><\/div>\n <div class=\"hero-eyebrow\">\u5168\u7403\u827a\u672f\u6bbf\u5802 \u00b7 \u7cbe\u9009\u6536\u5f55<\/div>\n <h1 class=\"hero-title\">\u827a\u672f<em>\u535a\u7269\u9986<\/em><\/h1>\n <div class=\"hero-subtitle\">Following the light of museums to bridge the past and the future.<\/div>\n <div class=\"hero-count\">\n <div class=\"hero-count-num\" id=\"heroTotal\">\u2014<\/div>\n <div class=\"hero-count-label\">\u5ea7\u827a\u672f\u9986<\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"controls\">\n <div class=\"filter-row\" id=\"filterRow\">\n <button class=\"filter-btn active\" data-country=\"all\">\u5168\u90e8<\/button>\n <\/div>\n<\/div>\n\n\n<div class=\"results-bar\">\n <div class=\"results-text\">\u5171 <span class=\"results-num\" id=\"resultsCount\">\u2014<\/span> \u5ea7\u827a\u672f\u9986<\/div>\n <div class=\"sort-wrap\">\n <span class=\"sort-label\">\u6392\u5e8f<\/span>\n <button class=\"sort-btn active\" data-sort=\"order\">\u6536\u5f55\u987a\u5e8f<\/button>\n <button class=\"sort-btn\" data-sort=\"year\">\u5efa\u9986\u5e74\u4efd<\/button>\n <\/div>\n<\/div>\n\n\n<div class=\"museum-grid\" id=\"museumGrid\"><\/div>\n\n\n<footer>\n <div class=\"nav-logo\">Lumin Art<\/div>\n <div>\u827a\u672f\u535a\u7269\u9986\u5bfc\u89c8 \u00b7 \u6301\u7eed\u66f4\u65b0\u6536\u5f55\u4e2d<\/div>\n<\/footer>\n\n<script>\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ MUSEUM DATA\n\/\/ \u5728\u6b64\u6dfb\u52a0\u6216\u4fee\u6539\u535a\u7269\u9986\u6570\u636e\n\/\/ \u5b57\u6bb5\uff1aname(\u4e2d\u6587\u540d), en(\u82f1\u6587\u540d), country(\u56fd\u5bb6), city(\u57ce\u5e02),\n\/\/ year(\u5efa\u9986\u5e74\u4efd), img(\u5c01\u9762\u56feURL), url(\u8be6\u60c5\u9875\u94fe\u63a5), order(\u6536\u5f55\u5e8f\u53f7)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nconst MUSEUMS = [\n {\n order: 1,\n name: '\u8377\u5170\u56fd\u5bb6\u535a\u7269\u9986',\n en: 'Rijksmuseum',\n country: '\u8377\u5170',\n city: '\u963f\u59c6\u65af\u7279\u4e39',\n year: 1800,\n img: '',\n url: '#'\n },\n {\n order: 2,\n name: '\u5217\u5965\u6ce2\u591a\u535a\u7269\u9986',\n en: 'Leopold Museum',\n country: '\u5965\u5730\u5229',\n city: '\u7ef4\u4e5f\u7eb3',\n year: 2001,\n img: '',\n url: '#'\n },\n {\n order: 29,\n name: '\u5362\u6d6e\u5bab\u535a\u7269\u9986',\n en: 'Mus\u00e9e du Louvre',\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 1793,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260520194953322-scaled.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=13417'\n },\n {\n order: 4,\n name: '\u73b0\u4ee3\u827a\u672f\u535a\u7269\u9986',\n en: 'MoMA',\n country: '\u7f8e\u56fd',\n city: '\u7ebd\u7ea6',\n year: 1929,\n img: '',\n url: '#'\n },\n {\n order: 31,\n name: '\u5965\u8d5b\u535a\u7269\u9986',\n en: \"Mus\u00e9e d'Orsay\",\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 1986,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260526061850470.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=13919'\n },\n {\n order: 6,\n name: '\u68b5\u9ad8\u535a\u7269\u9986',\n en: 'Van Gogh Museum',\n country: '\u8377\u5170',\n city: '\u963f\u59c6\u65af\u7279\u4e39',\n year: 1973,\n img: '',\n url: '#'\n },\n {\n order: 7,\n name: '\u4e4c\u83f2\u9f50\u7f8e\u672f\u9986',\n en: 'Galleria degli Uffizi',\n country: '\u610f\u5927\u5229',\n city: '\u4f5b\u7f57\u4f26\u8428',\n year: 1581,\n img: '',\n url: '#'\n },\n {\n order: 8,\n name: '\u829d\u52a0\u54e5\u827a\u672f\u5b66\u9662\u535a\u7269\u9986',\n en: 'The Art Institute of Chicago',\n country: '\u7f8e\u56fd',\n city: '\u829d\u52a0\u54e5',\n year: 1879,\n img: '',\n url: '#'\n },\n {\n order: 9,\n name: '\u534e\u76db\u987f\u56fd\u5bb6\u7f8e\u672f\u9986',\n en: 'National Gallery of Art, Washington DC',\n country: '\u7f8e\u56fd',\n city: '\u534e\u76db\u987f',\n year: 1937,\n img: '',\n url: '#'\n },\n {\n order: 10,\n name: '\u6bdb\u91cc\u8328\u4e4b\u5bb6\u535a\u7269\u9986',\n en: 'Mauritshuis',\n country: '\u8377\u5170',\n city: '\u6d77\u7259',\n year: 1822,\n img: '',\n url: '#'\n },\n {\n order: 11,\n name: '\u5927\u90fd\u4f1a\u827a\u672f\u535a\u7269\u9986',\n en: 'The Metropolitan Museum of Art',\n country: '\u7f8e\u56fd',\n city: '\u7ebd\u7ea6',\n year: 1870,\n img: '',\n url: '#'\n },\n {\n order: 12,\n name: '\u7f8e\u666f\u5bab\u7f8e\u672f\u9986',\n en: 'Belvedere',\n country: '\u5965\u5730\u5229',\n city: '\u7ef4\u4e5f\u7eb3',\n year: 1903,\n img: '',\n url: '#'\n },\n {\n order: 13,\n name: '\u827e\u5c14\u7c73\u5854\u4ec0\u535a\u7269\u9986',\n en: 'The State Hermitage Museum',\n country: '\u4fc4\u7f57\u65af',\n city: '\u5723\u5f7c\u5f97\u5821',\n year: 1764,\n img: '',\n url: '#'\n },\n {\n order: 14,\n name: '\u5fb7\u7d2f\u65af\u987f\u8001\u5927\u5e08\u7ed8\u753b\u9648\u5217\u9986',\n en: 'Gem\u00e4ldegalerie Alte Meister',\n country: '\u5fb7\u56fd',\n city: '\u5fb7\u7d2f\u65af\u987f',\n year: 1855,\n img: '',\n url: '#'\n },\n {\n order: 15,\n name: '\u67cf\u6797\u56fd\u5bb6\u535a\u7269\u9986\u00b7\u65e7\u56fd\u5bb6\u7f8e\u672f\u9986',\n en: 'Alte Nationalgalerie',\n country: '\u5fb7\u56fd',\n city: '\u67cf\u6797',\n year: 1876,\n img: '',\n url: '#'\n },\n {\n order: 16,\n name: '\u5f17\u91cc\u8fbe\u00b7\u5361\u6d1b\u535a\u7269\u9986',\n en: 'Museum Frida Kahlo',\n country: '\u58a8\u897f\u54e5',\n city: '\u58a8\u897f\u54e5\u57ce',\n year: 1958,\n img: '',\n url: '#'\n },\n {\n order: 17,\n name: '\u7279\u5217\u5b63\u4e9a\u79d1\u592b\u56fd\u5bb6\u753b\u5eca',\n en: 'The State Tretyakov Gallery',\n country: '\u4fc4\u7f57\u65af',\n city: '\u83ab\u65af\u79d1',\n year: 1856,\n img: '',\n url: '#'\n },\n {\n order: 18,\n name: '\u4f26\u6566\u56fd\u5bb6\u7f8e\u672f\u9986',\n en: 'The National Gallery, London',\n country: '\u82f1\u56fd',\n city: '\u4f26\u6566',\n year: 1824,\n img: '',\n url: '#'\n },\n {\n order: 19,\n name: '\u827a\u672f\u53f2\u535a\u7269\u9986',\n en: 'Kunsthistorisches Museum',\n country: '\u5965\u5730\u5229',\n city: '\u7ef4\u4e5f\u7eb3',\n year: 1891,\n img: '',\n url: '#'\n },\n {\n order: 20,\n name: '\u8499\u514b\u7f8e\u672f\u9986',\n en: 'The Munch Museum',\n country: '\u632a\u5a01',\n city: '\u5965\u65af\u9646',\n year: 1963,\n img: '',\n url: '#'\n },\n {\n order: 21,\n name: '\u6cf0\u7279\u4e0d\u5217\u98a0',\n en: 'Tate Britain',\n country: '\u82f1\u56fd',\n city: '\u4f26\u6566',\n year: 1897,\n img: '',\n url: '#'\n },\n {\n order: 22,\n name: '\u5361\u6ce2\u8fea\u8499\u7279\u535a\u7269\u9986\u4e0e\u7687\u5bb6\u6797\u56ed',\n en: 'Museo e Real Bosco di Capodimonte',\n country: '\u610f\u5927\u5229',\n city: '\u90a3\u4e0d\u52d2\u65af',\n year: 1735,\n img: '',\n url: '#'\n },\n {\n order: 23,\n name: '\u5361\u4f69\u8428\u7f57\u5bab\u56fd\u9645\u73b0\u4ee3\u827a\u672f\u9986',\n en: \"Ca' Pesaro - Galleria Internazionale d'Arte Moderna\",\n country: '\u610f\u5927\u5229',\n city: '\u5a01\u5c3c\u65af',\n year: 1910,\n img: '',\n url: '#'\n },\n {\n order: 24,\n name: '\u5df4\u9ece\u5927\u7687\u5bab',\n en: 'Rmn-Grand Palais',\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 2011,\n img: '',\n url: '#'\n },\n {\n order: 25,\n name: '\u7ebd\u7ea6\u65b0\u7f8e\u672f\u9986',\n en: 'New Museum',\n country: '\u7f8e\u56fd',\n city: '\u7ebd\u7ea6',\n year: 2001,\n img: '',\n url: '#'\n },\n {\n order: 26,\n name: '\u4f0a\u838e\u8d1d\u62c9\u00b7\u65af\u56fe\u5c14\u7279\u00b7\u52a0\u5fb7\u7eb3\u535a\u7269\u9986',\n en: 'Isabella Stewart Gardner Museum',\n country: '\u7f8e\u56fd',\n city: '\u6ce2\u58eb\u987f',\n year: 1903,\n img: '',\n url: '#'\n },\n {\n order: 27,\n name: '\u963f\u5c14\u8d1d\u8482\u5a1c\u535a\u7269\u9986',\n en: 'Albertina Museum',\n country: '\u5965\u5730\u5229',\n city: '\u7ef4\u4e5f\u7eb3',\n year: 1776,\n img: '',\n url: '#'\n },\n {\n order: 28,\n name: '\u65bd\u6cf0\u5fb7\u5c14\u7f8e\u672f\u9986',\n en: 'St\u00e4del Museum',\n country: '\u5fb7\u56fd',\n city: '\u6cd5\u5170\u514b\u798f',\n year: 1815,\n img: '',\n url: '#'\n },\n {\n order: 29,\n name: '\u67cf\u6797\u56fd\u5bb6\u535a\u7269\u9986\u00b7\u94dc\u7248\u753b\u9648\u5217\u9986',\n en: 'Kupferstichkabinett',\n country: '\u5fb7\u56fd',\n city: '\u67cf\u6797',\n year: 1855,\n img: '',\n url: '#'\n },\n {\n order: 30,\n name: '\u6a58\u56ed\u7f8e\u672f\u9986',\n en: \"Mus\u00e9e de l'Orangerie\",\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 1927,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260525214224323.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=13726'\n },\n {\n order: 32,\n name: '\u585e\u52aa\u5947\u535a\u7269\u9986',\n en: 'Mus\u00e9e Cernuschi',\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 1898,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260528104740164.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=14071'\n },\n {\n order: 33,\n name: '\u5b54\u4ee3\u535a\u7269\u9986',\n en: 'Mus\u00e9e Cond\u00e9',\n country: '\u6cd5\u56fd',\n city: '\u5c1a\u8482\u4f0a',\n year: 1898,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260530112043150.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=14235'\n },\n {\n order: 34,\n name: '\u5409\u7f8e\u535a\u7269\u9986',\n en: 'Mus\u00e9e Guimet',\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 1889,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/06\/20260603102336964.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=15532'\n },\n {\n order: 35,\n name: '\u67ab\u4e39\u767d\u9732\u5bab',\n en: 'Ch\u00e2teau de Fontainebleau',\n country: '\u6cd5\u56fd',\n city: '\u67ab\u4e39\u767d\u9732',\n year: 1137,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260520191608986.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=15940'\n },\n];\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ SVG PLACEHOLDER (when no image)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction makePlaceholderSVG(name) {\n \/\/ Extract initials for the placeholder\n const initial = name.charAt(0);\n const shapes = [\n \/\/ Classic museum pediment\n `<svg viewBox=\"0 0 240 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:100%;height:100%\">\n <rect width=\"240\" height=\"160\" fill=\"#14110a\"\/>\n <rect x=\"20\" y=\"80\" width=\"200\" height=\"70\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.6\" opacity=\"0.18\"\/>\n <polygon points=\"120,30 20,80 220,80\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.8\" opacity=\"0.24\"\/>\n <line x1=\"40\" y1=\"80\" x2=\"40\" y2=\"150\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <line x1=\"80\" y1=\"80\" x2=\"80\" y2=\"150\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <line x1=\"120\" y1=\"80\" x2=\"120\" y2=\"150\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <line x1=\"160\" y1=\"80\" x2=\"160\" y2=\"150\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <line x1=\"200\" y1=\"80\" x2=\"200\" y2=\"150\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <rect x=\"96\" y=\"108\" width=\"48\" height=\"42\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.2\"\/>\n <text x=\"120\" y=\"62\" text-anchor=\"middle\" fill=\"#b8963e\" opacity=\"0.18\" font-size=\"14\" letter-spacing=\"2\" font-family=\"serif\">${initial}<\/text>\n <\/svg>`,\n \/\/ Modern museum box\n `<svg viewBox=\"0 0 240 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:100%;height:100%\">\n <rect width=\"240\" height=\"160\" fill=\"#14110a\"\/>\n <rect x=\"30\" y=\"30\" width=\"180\" height=\"110\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.6\" opacity=\"0.18\"\/>\n <rect x=\"50\" y=\"50\" width=\"50\" height=\"70\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.14\"\/>\n <rect x=\"140\" y=\"50\" width=\"50\" height=\"70\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.14\"\/>\n <rect x=\"105\" y=\"90\" width=\"30\" height=\"50\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.16\"\/>\n <line x1=\"30\" y1=\"140\" x2=\"210\" y2=\"140\" stroke=\"#b8963e\" stroke-width=\"0.4\" opacity=\"0.2\"\/>\n <text x=\"120\" y=\"78\" text-anchor=\"middle\" fill=\"#b8963e\" opacity=\"0.16\" font-size=\"14\" letter-spacing=\"2\" font-family=\"serif\">${initial}<\/text>\n <\/svg>`,\n ];\n return shapes[name.length % shapes.length];\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ BUILD FILTERS\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction buildFilters() {\n const countries = ['\u5168\u90e8', ...new Set(MUSEUMS.map(m => m.country).sort())];\n const row = document.getElementById('filterRow');\n row.innerHTML = '';\n countries.forEach(c => {\n const btn = document.createElement('button');\n btn.className = 'filter-btn' + (c === '\u5168\u90e8' ? ' active' : '');\n btn.dataset.country = c === '\u5168\u90e8' ? 'all' : c;\n btn.textContent = c;\n btn.addEventListener('click', () => {\n document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n renderGrid();\n });\n row.appendChild(btn);\n });\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ RENDER GRID\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction renderGrid() {\n const activeCountry = document.querySelector('.filter-btn.active')?.dataset.country || 'all';\n const activeSort = document.querySelector('.sort-btn.active')?.dataset.sort || 'order';\n\n let filtered = activeCountry === 'all'\n ? [...MUSEUMS]\n : MUSEUMS.filter(m => m.country === activeCountry);\n\n if (activeSort === 'year') {\n filtered.sort((a, b) => a.year - b.year);\n } else {\n \/\/ \u6536\u5f55\u987a\u5e8f\uff1aorder \u8d8a\u5927\u8d8a\u65b0\uff0c\u6392\u6700\u524d\n filtered.sort((a, b) => b.order - a.order);\n }\n\n const grid = document.getElementById('museumGrid');\n grid.innerHTML = '';\n\n document.getElementById('resultsCount').textContent = filtered.length;\n document.getElementById('heroTotal').textContent = MUSEUMS.length;\n\n if (filtered.length === 0) {\n grid.innerHTML = '<div class=\"no-results\">\u6682\u65e0\u6536\u5f55\u7684\u827a\u672f\u9986<\/div>';\n return;\n }\n\n filtered.forEach((m, i) => {\n const card = document.createElement('a');\n card.className = 'museum-card';\n card.href = m.url || '#';\n card.style.animationDelay = (i * 30) + 'ms';\n\n const imgContent = m.img\n ? `<img decoding=\"async\" src=\"${m.img}\" alt=\"${m.name}\" loading=\"lazy\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:brightness(.88) saturate(.92)\">`\n : `<div class=\"card-img-placeholder\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center\">${makePlaceholderSVG(m.name)}<\/div>`;\n\n card.innerHTML = `\n <div class=\"card-img-wrap\" style=\"position:relative;width:100%;height:0;padding-top:66.67%;overflow:hidden;background:#1c1916;display:block\">\n ${imgContent}\n <div class=\"card-year-overlay\">Est. ${m.year}<\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"card-country\">${m.country}<\/div>\n <div class=\"card-name\">${m.name}<\/div>\n <div class=\"card-city\">${m.city} \u00b7 ${m.year}\u5e74<\/div>\n <div class=\"card-arrow\">\u63a2\u7d22\u827a\u672f\u9986<\/div>\n <\/div>`;\n\n grid.appendChild(card);\n });\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ SORT BUTTONS\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\ndocument.querySelectorAll('.sort-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n renderGrid();\n });\n});\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ INIT\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nbuildFilters();\nrenderGrid();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u827a\u672f\u535a\u7269\u9986 \u00b7 Lumin Art Lumin Art \u7fa4\u661f\u95ea\u8000\u65f6 \u827a\u672f\u535a\u7269\u9986 \u8d85\u6e05\u539f\u753b \u827a\u672f\u8fd0\u52a8 \u6d6e\u5149\u4e4b\u4e66 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-13619","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/pages\/13619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.luminart.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13619"}],"version-history":[{"count":50,"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/pages\/13619\/revisions"}],"predecessor-version":[{"id":15951,"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/pages\/13619\/revisions\/15951"}],"wp:attachment":[{"href":"https:\/\/www.luminart.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\n\u827a\u672f\u535a\u7269\u9986 \u00b7 Lumin Art<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Noto+Serif+SC:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n:root {\n --gold: #b8963e;\n --gold-light: #d4af6a;\n --gold-pale: rgba(184,150,62,0.1);\n --ink: #0e0c09;\n --ink2: #161410;\n --ink3: #1c1916;\n --parchment: #f0e8d6;\n --stone: #9e9282;\n --serif: 'Playfair Display','Noto Serif SC',serif;\n --body: 'Cormorant Garamond','Noto Serif SC',serif;\n}\nhtml { scroll-behavior: smooth; }\nbody { background: var(--ink); color: var(--parchment); font-family: var(--body); font-size: 18px; line-height: 1.75; overflow-x: hidden; }\n\n\/* \u2500\u2500 TOP NAV \u2500\u2500 *\/\n.top-nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 500;\n height: 56px; display: flex; align-items: center; justify-content: space-between;\n padding: 0 52px;\n background: rgba(14,12,9,0.96); backdrop-filter: blur(20px);\n border-bottom: 1px solid rgba(184,150,62,0.14);\n}\n.nav-logo { font-family: var(--serif); font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-style: italic; }\n.nav-links { display: flex; gap: 28px; list-style: none; }\n.nav-links a { font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(158,146,130,.55); text-decoration: none; cursor: pointer; transition: color .2s; }\n.nav-links a:hover, .nav-links a.active { color: var(--gold); }\n\n\/* \u2500\u2500 HERO BANNER \u2500\u2500 *\/\n.hero-banner {\n position: relative; height: 44vh; min-height: 320px;\n display: flex; flex-direction: column; justify-content: flex-end;\n padding: 0 52px 52px; overflow: hidden;\n margin-top: 56px;\n}\n.hero-bg {\n position: absolute; inset: 0;\n background: linear-gradient(to bottom, rgba(14,12,9,.2) 0%, rgba(14,12,9,.7) 55%, rgba(14,12,9,1) 100%),\n linear-gradient(135deg, #1e1508 0%, #2e2010 30%, #1a1008 70%, #0e0c09 100%);\n}\n.hero-grid {\n position: absolute; inset: 0; opacity: .04;\n background-image: repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(184,150,62,.8) 60px),\n repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(184,150,62,.4) 60px);\n}\n.hero-eyebrow {\n position: relative; font-size: .6rem; letter-spacing: .32em; text-transform: uppercase;\n color: var(--gold); margin-bottom: 14px; display: flex; align-items: center; gap: 14px;\n}\n.hero-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--gold); opacity: .55; }\n.hero-title {\n position: relative; font-family: var(--serif);\n font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 400; line-height: 1.05;\n margin-bottom: 12px;\n}\n.hero-title em { font-style: italic; color: var(--gold-light); }\n.hero-subtitle {\n position: relative; font-size: .88rem; color: rgba(200,191,173,.4);\n letter-spacing: .14em; font-style: italic;\n}\n.hero-count {\n position: absolute; bottom: 52px; right: 52px;\n text-align: right;\n}\n.hero-count-num { font-family: var(--serif); font-size: 3rem; color: rgba(184,150,62,.18); line-height: 1; }\n.hero-count-label { font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(158,146,130,.3); }\n\n\/* \u2500\u2500 CONTROLS BAR \u2500\u2500 *\/\n.controls {\n position: sticky; top: 56px; z-index: 300;\n background: rgba(14,12,9,.97); backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(184,150,62,.1);\n padding: 0 52px;\n}\n.filter-row { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; }\n.filter-row::-webkit-scrollbar { display: none; }\n.filter-btn {\n padding: 16px 18px; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;\n color: rgba(158,146,130,.45); cursor: pointer; border: none; border-bottom: 2px solid transparent;\n background: none; font-family: var(--body); white-space: nowrap;\n transition: color .2s, border-color .2s;\n}\n.filter-btn:hover { color: rgba(240,232,214,.7); }\n.filter-btn.active { color: var(--gold); border-bottom-color: var(--gold); }\n\n\/* \u2500\u2500 RESULTS + SORT BAR \u2500\u2500 *\/\n.results-bar {\n padding: 20px 52px 0;\n display: flex; align-items: center; justify-content: space-between;\n}\n.results-text { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(158,146,130,.35); }\n.results-num { color: var(--gold); font-family: var(--serif); font-size: .85rem; }\n.sort-wrap { display: flex; align-items: center; gap: 10px; }\n.sort-label { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(158,146,130,.4); white-space: nowrap; }\n.sort-btn {\n padding: 5px 12px; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;\n color: rgba(158,146,130,.5); cursor: pointer; border: 1px solid transparent;\n background: none; font-family: var(--body); transition: all .2s;\n}\n.sort-btn:hover { color: rgba(240,232,214,.7); border-color: rgba(184,150,62,.18); }\n.sort-btn.active { color: var(--gold); border-color: rgba(184,150,62,.35); background: rgba(184,150,62,.06); }\n\n\/* \u2500\u2500 GRID \u2500\u2500 *\/\n.museum-grid {\n padding: 24px 52px 80px;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n}\n.museum-card {\n background: var(--ink2);\n border: 1px solid rgba(184,150,62,.1);\n overflow: hidden; cursor: pointer;\n transition: border-color .28s, transform .28s;\n display: flex; flex-direction: column;\n text-decoration: none; color: inherit;\n}\n.museum-card:hover { border-color: rgba(184,150,62,.38); transform: translateY(-3px); }\n.museum-card:hover .card-img { transform: scale(1.04); }\n.card-img-wrap {\n width: 100%;\n height: 0;\n padding-top: 66.67%;\n overflow: hidden;\n position: relative;\n background: var(--ink3);\n display: block;\n}\n.card-img {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n width: 100%; height: 100%;\n object-fit: cover;\n object-position: center center;\n display: block;\n transition: transform .5s cubic-bezier(.25,.46,.45,.94);\n filter: brightness(.88) saturate(.92);\n}\n.card-img:hover { filter: brightness(.95) saturate(1); }\n.card-img-placeholder {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n width: 100%; height: 100%;\n display: flex; align-items: center; justify-content: center;\n}\n\/* subtle overlay at bottom of image *\/\n.card-img-wrap::after {\n content: ''; position: absolute; inset: 0;\n background: linear-gradient(to top, rgba(14,12,9,.55) 0%, transparent 55%);\n pointer-events: none;\n}\n.card-year-overlay {\n position: absolute; bottom: 10px; left: 12px;\n font-size: .56rem; letter-spacing: .2em; text-transform: uppercase;\n color: rgba(212,175,106,.75); z-index: 1;\n font-family: var(--body);\n}\n.card-body {\n padding: 14px 16px 18px;\n flex: 1; display: flex; flex-direction: column; gap: 4px;\n}\n.card-country {\n font-size: .56rem; letter-spacing: .22em; text-transform: uppercase;\n color: rgba(184,150,62,.55); margin-bottom: 3px;\n display: flex; align-items: center; gap: 7px;\n}\n.card-country::before { content: ''; width: 16px; height: 1px; background: rgba(184,150,62,.3); flex-shrink: 0; }\n.card-name {\n font-family: var(--serif); font-size: 1rem; font-weight: 400;\n line-height: 1.3; color: var(--parchment);\n}\n.card-city {\n font-size: .72rem; color: rgba(158,146,130,.5); margin-top: 2px;\n}\n.card-arrow {\n margin-top: auto; padding-top: 12px;\n font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;\n color: rgba(184,150,62,.35); display: flex; align-items: center; gap: 8px;\n transition: color .2s, gap .2s;\n}\n.museum-card:hover .card-arrow { color: var(--gold); gap: 12px; }\n.card-arrow::after { content: '\u2192'; }\n\n\/* \u2500\u2500 NO RESULTS \u2500\u2500 *\/\n.no-results {\n grid-column: 1\/-1; text-align: center; padding: 60px 0;\n color: rgba(158,146,130,.35); font-style: italic; font-size: 1.1rem;\n}\n\n\/* \u2500\u2500 FOOTER \u2500\u2500 *\/\nfooter {\n border-top: 1px solid rgba(184,150,62,.1);\n padding: 28px 52px;\n display: flex; justify-content: space-between; align-items: center;\n font-size: .64rem; letter-spacing: .1em; color: rgba(158,146,130,.26);\n}\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media (max-width: 1200px) {\n .museum-grid { grid-template-columns: repeat(3, 1fr); }\n}\n@media (max-width: 1024px) {\n .top-nav, .hero-banner, .controls, .results-bar, .museum-grid, footer { padding-left: 32px; padding-right: 32px; }\n .museum-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }\n}\n@media (max-width: 768px) {\n .top-nav { padding: 0 18px; }\n .nav-links { display: none; }\n .hero-banner { padding: 0 18px 36px; }\n .hero-title { font-size: clamp(1.8rem, 8vw, 2.8rem); }\n .controls { padding: 0 18px; }\n .results-bar, .museum-grid, footer { padding-left: 18px; padding-right: 18px; }\n .museum-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }\n .hero-count { display: none; }\n .sort-label { display: none; }\n .sort-btn { padding: 4px 8px; font-size: .55rem; }\n}\n@media (max-width: 480px) {\n .museum-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n<\/head>\n<body>\n\n\n<nav class=\"top-nav\">\n <div class=\"nav-logo\">Lumin Art<\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#\">\u7fa4\u661f\u95ea\u8000\u65f6<\/a><\/li>\n <li><a href=\"#\" class=\"active\">\u827a\u672f\u535a\u7269\u9986<\/a><\/li>\n <li><a href=\"#\">\u8d85\u6e05\u539f\u753b<\/a><\/li>\n <li><a href=\"#\">\u827a\u672f\u8fd0\u52a8<\/a><\/li>\n <li><a href=\"#\">\u6d6e\u5149\u4e4b\u4e66<\/a><\/li>\n <li><a href=\"#\">\u753b\u4f5c\u7cbe\u9009<\/a><\/li>\n <\/ul>\n<\/nav>\n\n\n<div class=\"hero-banner\">\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-grid\"><\/div>\n <div class=\"hero-eyebrow\">\u5168\u7403\u827a\u672f\u6bbf\u5802 \u00b7 \u7cbe\u9009\u6536\u5f55<\/div>\n <h1 class=\"hero-title\">\u827a\u672f<em>\u535a\u7269\u9986<\/em><\/h1>\n <div class=\"hero-subtitle\">Following the light of museums to bridge the past and the future.<\/div>\n <div class=\"hero-count\">\n <div class=\"hero-count-num\" id=\"heroTotal\">\u2014<\/div>\n <div class=\"hero-count-label\">\u5ea7\u827a\u672f\u9986<\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"controls\">\n <div class=\"filter-row\" id=\"filterRow\">\n <button class=\"filter-btn active\" data-country=\"all\">\u5168\u90e8<\/button>\n <\/div>\n<\/div>\n\n\n<div class=\"results-bar\">\n <div class=\"results-text\">\u5171 <span class=\"results-num\" id=\"resultsCount\">\u2014<\/span> \u5ea7\u827a\u672f\u9986<\/div>\n <div class=\"sort-wrap\">\n <span class=\"sort-label\">\u6392\u5e8f<\/span>\n <button class=\"sort-btn active\" data-sort=\"order\">\u6536\u5f55\u987a\u5e8f<\/button>\n <button class=\"sort-btn\" data-sort=\"year\">\u5efa\u9986\u5e74\u4efd<\/button>\n <\/div>\n<\/div>\n\n\n<div class=\"museum-grid\" id=\"museumGrid\"><\/div>\n\n\n<footer>\n <div class=\"nav-logo\">Lumin Art<\/div>\n <div>\u827a\u672f\u535a\u7269\u9986\u5bfc\u89c8 \u00b7 \u6301\u7eed\u66f4\u65b0\u6536\u5f55\u4e2d<\/div>\n<\/footer>\n\n<script>\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ MUSEUM DATA\n\/\/ \u5728\u6b64\u6dfb\u52a0\u6216\u4fee\u6539\u535a\u7269\u9986\u6570\u636e\n\/\/ \u5b57\u6bb5\uff1aname(\u4e2d\u6587\u540d), en(\u82f1\u6587\u540d), country(\u56fd\u5bb6), city(\u57ce\u5e02),\n\/\/ year(\u5efa\u9986\u5e74\u4efd), img(\u5c01\u9762\u56feURL), url(\u8be6\u60c5\u9875\u94fe\u63a5), order(\u6536\u5f55\u5e8f\u53f7)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nconst MUSEUMS = [\n {\n order: 1,\n name: '\u8377\u5170\u56fd\u5bb6\u535a\u7269\u9986',\n en: 'Rijksmuseum',\n country: '\u8377\u5170',\n city: '\u963f\u59c6\u65af\u7279\u4e39',\n year: 1800,\n img: '',\n url: '#'\n },\n {\n order: 2,\n name: '\u5217\u5965\u6ce2\u591a\u535a\u7269\u9986',\n en: 'Leopold Museum',\n country: '\u5965\u5730\u5229',\n city: '\u7ef4\u4e5f\u7eb3',\n year: 2001,\n img: '',\n url: '#'\n },\n {\n order: 29,\n name: '\u5362\u6d6e\u5bab\u535a\u7269\u9986',\n en: 'Mus\u00e9e du Louvre',\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 1793,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260520194953322-scaled.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=13417'\n },\n {\n order: 4,\n name: '\u73b0\u4ee3\u827a\u672f\u535a\u7269\u9986',\n en: 'MoMA',\n country: '\u7f8e\u56fd',\n city: '\u7ebd\u7ea6',\n year: 1929,\n img: '',\n url: '#'\n },\n {\n order: 31,\n name: '\u5965\u8d5b\u535a\u7269\u9986',\n en: \"Mus\u00e9e d'Orsay\",\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 1986,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260526061850470.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=13919'\n },\n {\n order: 6,\n name: '\u68b5\u9ad8\u535a\u7269\u9986',\n en: 'Van Gogh Museum',\n country: '\u8377\u5170',\n city: '\u963f\u59c6\u65af\u7279\u4e39',\n year: 1973,\n img: '',\n url: '#'\n },\n {\n order: 7,\n name: '\u4e4c\u83f2\u9f50\u7f8e\u672f\u9986',\n en: 'Galleria degli Uffizi',\n country: '\u610f\u5927\u5229',\n city: '\u4f5b\u7f57\u4f26\u8428',\n year: 1581,\n img: '',\n url: '#'\n },\n {\n order: 8,\n name: '\u829d\u52a0\u54e5\u827a\u672f\u5b66\u9662\u535a\u7269\u9986',\n en: 'The Art Institute of Chicago',\n country: '\u7f8e\u56fd',\n city: '\u829d\u52a0\u54e5',\n year: 1879,\n img: '',\n url: '#'\n },\n {\n order: 9,\n name: '\u534e\u76db\u987f\u56fd\u5bb6\u7f8e\u672f\u9986',\n en: 'National Gallery of Art, Washington DC',\n country: '\u7f8e\u56fd',\n city: '\u534e\u76db\u987f',\n year: 1937,\n img: '',\n url: '#'\n },\n {\n order: 10,\n name: '\u6bdb\u91cc\u8328\u4e4b\u5bb6\u535a\u7269\u9986',\n en: 'Mauritshuis',\n country: '\u8377\u5170',\n city: '\u6d77\u7259',\n year: 1822,\n img: '',\n url: '#'\n },\n {\n order: 11,\n name: '\u5927\u90fd\u4f1a\u827a\u672f\u535a\u7269\u9986',\n en: 'The Metropolitan Museum of Art',\n country: '\u7f8e\u56fd',\n city: '\u7ebd\u7ea6',\n year: 1870,\n img: '',\n url: '#'\n },\n {\n order: 12,\n name: '\u7f8e\u666f\u5bab\u7f8e\u672f\u9986',\n en: 'Belvedere',\n country: '\u5965\u5730\u5229',\n city: '\u7ef4\u4e5f\u7eb3',\n year: 1903,\n img: '',\n url: '#'\n },\n {\n order: 13,\n name: '\u827e\u5c14\u7c73\u5854\u4ec0\u535a\u7269\u9986',\n en: 'The State Hermitage Museum',\n country: '\u4fc4\u7f57\u65af',\n city: '\u5723\u5f7c\u5f97\u5821',\n year: 1764,\n img: '',\n url: '#'\n },\n {\n order: 14,\n name: '\u5fb7\u7d2f\u65af\u987f\u8001\u5927\u5e08\u7ed8\u753b\u9648\u5217\u9986',\n en: 'Gem\u00e4ldegalerie Alte Meister',\n country: '\u5fb7\u56fd',\n city: '\u5fb7\u7d2f\u65af\u987f',\n year: 1855,\n img: '',\n url: '#'\n },\n {\n order: 15,\n name: '\u67cf\u6797\u56fd\u5bb6\u535a\u7269\u9986\u00b7\u65e7\u56fd\u5bb6\u7f8e\u672f\u9986',\n en: 'Alte Nationalgalerie',\n country: '\u5fb7\u56fd',\n city: '\u67cf\u6797',\n year: 1876,\n img: '',\n url: '#'\n },\n {\n order: 16,\n name: '\u5f17\u91cc\u8fbe\u00b7\u5361\u6d1b\u535a\u7269\u9986',\n en: 'Museum Frida Kahlo',\n country: '\u58a8\u897f\u54e5',\n city: '\u58a8\u897f\u54e5\u57ce',\n year: 1958,\n img: '',\n url: '#'\n },\n {\n order: 17,\n name: '\u7279\u5217\u5b63\u4e9a\u79d1\u592b\u56fd\u5bb6\u753b\u5eca',\n en: 'The State Tretyakov Gallery',\n country: '\u4fc4\u7f57\u65af',\n city: '\u83ab\u65af\u79d1',\n year: 1856,\n img: '',\n url: '#'\n },\n {\n order: 18,\n name: '\u4f26\u6566\u56fd\u5bb6\u7f8e\u672f\u9986',\n en: 'The National Gallery, London',\n country: '\u82f1\u56fd',\n city: '\u4f26\u6566',\n year: 1824,\n img: '',\n url: '#'\n },\n {\n order: 19,\n name: '\u827a\u672f\u53f2\u535a\u7269\u9986',\n en: 'Kunsthistorisches Museum',\n country: '\u5965\u5730\u5229',\n city: '\u7ef4\u4e5f\u7eb3',\n year: 1891,\n img: '',\n url: '#'\n },\n {\n order: 20,\n name: '\u8499\u514b\u7f8e\u672f\u9986',\n en: 'The Munch Museum',\n country: '\u632a\u5a01',\n city: '\u5965\u65af\u9646',\n year: 1963,\n img: '',\n url: '#'\n },\n {\n order: 21,\n name: '\u6cf0\u7279\u4e0d\u5217\u98a0',\n en: 'Tate Britain',\n country: '\u82f1\u56fd',\n city: '\u4f26\u6566',\n year: 1897,\n img: '',\n url: '#'\n },\n {\n order: 22,\n name: '\u5361\u6ce2\u8fea\u8499\u7279\u535a\u7269\u9986\u4e0e\u7687\u5bb6\u6797\u56ed',\n en: 'Museo e Real Bosco di Capodimonte',\n country: '\u610f\u5927\u5229',\n city: '\u90a3\u4e0d\u52d2\u65af',\n year: 1735,\n img: '',\n url: '#'\n },\n {\n order: 23,\n name: '\u5361\u4f69\u8428\u7f57\u5bab\u56fd\u9645\u73b0\u4ee3\u827a\u672f\u9986',\n en: \"Ca' Pesaro - Galleria Internazionale d'Arte Moderna\",\n country: '\u610f\u5927\u5229',\n city: '\u5a01\u5c3c\u65af',\n year: 1910,\n img: '',\n url: '#'\n },\n {\n order: 24,\n name: '\u5df4\u9ece\u5927\u7687\u5bab',\n en: 'Rmn-Grand Palais',\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 2011,\n img: '',\n url: '#'\n },\n {\n order: 25,\n name: '\u7ebd\u7ea6\u65b0\u7f8e\u672f\u9986',\n en: 'New Museum',\n country: '\u7f8e\u56fd',\n city: '\u7ebd\u7ea6',\n year: 2001,\n img: '',\n url: '#'\n },\n {\n order: 26,\n name: '\u4f0a\u838e\u8d1d\u62c9\u00b7\u65af\u56fe\u5c14\u7279\u00b7\u52a0\u5fb7\u7eb3\u535a\u7269\u9986',\n en: 'Isabella Stewart Gardner Museum',\n country: '\u7f8e\u56fd',\n city: '\u6ce2\u58eb\u987f',\n year: 1903,\n img: '',\n url: '#'\n },\n {\n order: 27,\n name: '\u963f\u5c14\u8d1d\u8482\u5a1c\u535a\u7269\u9986',\n en: 'Albertina Museum',\n country: '\u5965\u5730\u5229',\n city: '\u7ef4\u4e5f\u7eb3',\n year: 1776,\n img: '',\n url: '#'\n },\n {\n order: 28,\n name: '\u65bd\u6cf0\u5fb7\u5c14\u7f8e\u672f\u9986',\n en: 'St\u00e4del Museum',\n country: '\u5fb7\u56fd',\n city: '\u6cd5\u5170\u514b\u798f',\n year: 1815,\n img: '',\n url: '#'\n },\n {\n order: 29,\n name: '\u67cf\u6797\u56fd\u5bb6\u535a\u7269\u9986\u00b7\u94dc\u7248\u753b\u9648\u5217\u9986',\n en: 'Kupferstichkabinett',\n country: '\u5fb7\u56fd',\n city: '\u67cf\u6797',\n year: 1855,\n img: '',\n url: '#'\n },\n {\n order: 30,\n name: '\u6a58\u56ed\u7f8e\u672f\u9986',\n en: \"Mus\u00e9e de l'Orangerie\",\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 1927,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260525214224323.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=13726'\n },\n {\n order: 32,\n name: '\u585e\u52aa\u5947\u535a\u7269\u9986',\n en: 'Mus\u00e9e Cernuschi',\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 1898,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260528104740164.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=14071'\n },\n {\n order: 33,\n name: '\u5b54\u4ee3\u535a\u7269\u9986',\n en: 'Mus\u00e9e Cond\u00e9',\n country: '\u6cd5\u56fd',\n city: '\u5c1a\u8482\u4f0a',\n year: 1898,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260530112043150.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=14235'\n },\n {\n order: 34,\n name: '\u5409\u7f8e\u535a\u7269\u9986',\n en: 'Mus\u00e9e Guimet',\n country: '\u6cd5\u56fd',\n city: '\u5df4\u9ece',\n year: 1889,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/06\/20260603102336964.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=15532'\n },\n {\n order: 35,\n name: '\u67ab\u4e39\u767d\u9732\u5bab',\n en: 'Ch\u00e2teau de Fontainebleau',\n country: '\u6cd5\u56fd',\n city: '\u67ab\u4e39\u767d\u9732',\n year: 1137,\n img: 'https:\/\/luminart-wp.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2026\/05\/20260520191608986.jpg',\n url: 'https:\/\/www.luminart.cc\/?page_id=15940'\n },\n];\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ SVG PLACEHOLDER (when no image)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction makePlaceholderSVG(name) {\n \/\/ Extract initials for the placeholder\n const initial = name.charAt(0);\n const shapes = [\n \/\/ Classic museum pediment\n `<svg viewBox=\"0 0 240 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:100%;height:100%\">\n <rect width=\"240\" height=\"160\" fill=\"#14110a\"\/>\n <rect x=\"20\" y=\"80\" width=\"200\" height=\"70\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.6\" opacity=\"0.18\"\/>\n <polygon points=\"120,30 20,80 220,80\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.8\" opacity=\"0.24\"\/>\n <line x1=\"40\" y1=\"80\" x2=\"40\" y2=\"150\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <line x1=\"80\" y1=\"80\" x2=\"80\" y2=\"150\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <line x1=\"120\" y1=\"80\" x2=\"120\" y2=\"150\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <line x1=\"160\" y1=\"80\" x2=\"160\" y2=\"150\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <line x1=\"200\" y1=\"80\" x2=\"200\" y2=\"150\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <rect x=\"96\" y=\"108\" width=\"48\" height=\"42\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.2\"\/>\n <text x=\"120\" y=\"62\" text-anchor=\"middle\" fill=\"#b8963e\" opacity=\"0.18\" font-size=\"14\" letter-spacing=\"2\" font-family=\"serif\">${initial}<\/text>\n <\/svg>`,\n \/\/ Modern museum box\n `<svg viewBox=\"0 0 240 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:100%;height:100%\">\n <rect width=\"240\" height=\"160\" fill=\"#14110a\"\/>\n <rect x=\"30\" y=\"30\" width=\"180\" height=\"110\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.6\" opacity=\"0.18\"\/>\n <rect x=\"50\" y=\"50\" width=\"50\" height=\"70\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.14\"\/>\n <rect x=\"140\" y=\"50\" width=\"50\" height=\"70\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.14\"\/>\n <rect x=\"105\" y=\"90\" width=\"30\" height=\"50\" fill=\"none\" stroke=\"#b8963e\" stroke-width=\"0.5\" opacity=\"0.16\"\/>\n <line x1=\"30\" y1=\"140\" x2=\"210\" y2=\"140\" stroke=\"#b8963e\" stroke-width=\"0.4\" opacity=\"0.2\"\/>\n <text x=\"120\" y=\"78\" text-anchor=\"middle\" fill=\"#b8963e\" opacity=\"0.16\" font-size=\"14\" letter-spacing=\"2\" font-family=\"serif\">${initial}<\/text>\n <\/svg>`,\n ];\n return shapes[name.length % shapes.length];\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ BUILD FILTERS\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction buildFilters() {\n const countries = ['\u5168\u90e8', ...new Set(MUSEUMS.map(m => m.country).sort())];\n const row = document.getElementById('filterRow');\n row.innerHTML = '';\n countries.forEach(c => {\n const btn = document.createElement('button');\n btn.className = 'filter-btn' + (c === '\u5168\u90e8' ? ' active' : '');\n btn.dataset.country = c === '\u5168\u90e8' ? 'all' : c;\n btn.textContent = c;\n btn.addEventListener('click', () => {\n document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n renderGrid();\n });\n row.appendChild(btn);\n });\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ RENDER GRID\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction renderGrid() {\n const activeCountry = document.querySelector('.filter-btn.active')?.dataset.country || 'all';\n const activeSort = document.querySelector('.sort-btn.active')?.dataset.sort || 'order';\n\n let filtered = activeCountry === 'all'\n ? [...MUSEUMS]\n : MUSEUMS.filter(m => m.country === activeCountry);\n\n if (activeSort === 'year') {\n filtered.sort((a, b) => a.year - b.year);\n } else {\n \/\/ \u6536\u5f55\u987a\u5e8f\uff1aorder \u8d8a\u5927\u8d8a\u65b0\uff0c\u6392\u6700\u524d\n filtered.sort((a, b) => b.order - a.order);\n }\n\n const grid = document.getElementById('museumGrid');\n grid.innerHTML = '';\n\n document.getElementById('resultsCount').textContent = filtered.length;\n document.getElementById('heroTotal').textContent = MUSEUMS.length;\n\n if (filtered.length === 0) {\n grid.innerHTML = '<div class=\"no-results\">\u6682\u65e0\u6536\u5f55\u7684\u827a\u672f\u9986<\/div>';\n return;\n }\n\n filtered.forEach((m, i) => {\n const card = document.createElement('a');\n card.className = 'museum-card';\n card.href = m.url || '#';\n card.style.animationDelay = (i * 30) + 'ms';\n\n const imgContent = m.img\n ? `<img decoding=\"async\" src=\"${m.img}\" alt=\"${m.name}\" loading=\"lazy\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:brightness(.88) saturate(.92)\">`\n : `<div class=\"card-img-placeholder\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center\">${makePlaceholderSVG(m.name)}<\/div>`;\n\n card.innerHTML = `\n <div class=\"card-img-wrap\" style=\"position:relative;width:100%;height:0;padding-top:66.67%;overflow:hidden;background:#1c1916;display:block\">\n ${imgContent}\n <div class=\"card-year-overlay\">Est. ${m.year}<\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"card-country\">${m.country}<\/div>\n <div class=\"card-name\">${m.name}<\/div>\n <div class=\"card-city\">${m.city} \u00b7 ${m.year}\u5e74<\/div>\n <div class=\"card-arrow\">\u63a2\u7d22\u827a\u672f\u9986<\/div>\n <\/div>`;\n\n grid.appendChild(card);\n });\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ SORT BUTTONS\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\ndocument.querySelectorAll('.sort-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n renderGrid();\n });\n});\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ INIT\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nbuildFilters();\nrenderGrid();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u827a\u672f\u535a\u7269\u9986 \u00b7 Lumin Art Lumin Art \u7fa4\u661f\u95ea\u8000\u65f6 \u827a\u672f\u535a\u7269\u9986 \u8d85\u6e05\u539f\u753b \u827a\u672f\u8fd0\u52a8 \u6d6e\u5149\u4e4b\u4e66 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-13619","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/pages\/13619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.luminart.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13619"}],"version-history":[{"count":50,"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/pages\/13619\/revisions"}],"predecessor-version":[{"id":15951,"href":"https:\/\/www.luminart.cc\/index.php?rest_route=\/wp\/v2\/pages\/13619\/revisions\/15951"}],"wp:attachment":[{"href":"https:\/\/www.luminart.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}