/* ============================================================
   奶龙美术馆 · 参考 Google Arts & Culture
   白底画廊、大留白、克制的字级；放大用深色展厅
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#1f1f1f; --ink2:#5f6368; --ink3:#80868b;
  --line:#e8eaed; --bg:#fff; --accent:#1a73e8;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Google Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",
              Roboto,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky; top:0; z-index:10; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(14px,4vw,48px); background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.brand{font-size:15px; letter-spacing:.14em; font-weight:500}
.top nav{display:flex; gap:26px}
.top nav a{font-size:13.5px; color:var(--ink2); text-decoration:none; letter-spacing:.06em}
.top nav a:hover{color:var(--ink)}

/* ---------- 门厅 ---------- */
.hero{
  padding:clamp(48px,9vw,110px) clamp(20px,6vw,80px) clamp(30px,5vw,56px);
  max-width:1180px; margin:0 auto;
}
.hero h1{
  font-size:clamp(30px,5.4vw,58px); font-weight:400; letter-spacing:.04em; line-height:1.15;
}
.hero p{
  margin-top:20px; max-width:620px; color:var(--ink2);
  font-size:clamp(13.5px,1.5vw,16px); line-height:1.9;
}

/* ---------- 藏品墙：多列瀑布流（更像图录）---------- */
#wall{
  max-width:1400px; margin:0 auto; padding:0 clamp(14px,4vw,48px) 70px;
  column-count:4; column-gap:22px;
}
@media(max-width:1180px){ #wall{column-count:3} }
@media(max-width:780px){ #wall{column-count:2; column-gap:14px} }
@media(max-width:480px){ #wall{column-count:1} }

.card{
  break-inside:avoid; margin:0 0 22px; cursor:pointer; outline:none;
  display:block;
}
.card .thumb{background:#f6f7f8; overflow:hidden}
.card img{width:100%; height:auto; display:block; transition:transform .35s ease, filter .35s ease}
.card:hover img{transform:scale(1.03)}
.card:focus-visible .thumb{outline:2px solid var(--accent); outline-offset:3px}
.card figcaption{padding:11px 2px 0}
.card .t{display:block; font-size:13.5px; letter-spacing:.02em}
.card .m{display:block; margin-top:3px; font-size:12px; color:var(--ink3)}

/* ---------- 关于 ---------- */
.about{
  max-width:1180px; margin:0 auto; padding:10px clamp(20px,6vw,80px) 40px;
  border-top:1px solid var(--line); padding-top:38px;
}
.about h2{font-size:15px; font-weight:500; letter-spacing:.1em; color:var(--ink2)}
.about p{margin-top:12px; max-width:660px; font-size:13.5px; line-height:1.95; color:var(--ink2)}
.about strong{color:var(--ink); font-weight:500}

footer{
  padding:26px clamp(20px,6vw,80px) 60px; max-width:1180px; margin:0 auto;
  font-size:12px; color:var(--ink3); letter-spacing:.04em;
}

/* ---------- 放大：深色展厅 ---------- */
#light{
  position:fixed; inset:0; z-index:50; background:#0f0f0f;
  display:flex; align-items:center; justify-content:center; padding:56px clamp(16px,5vw,72px) 40px;
}
#light.hidden{display:none}
.viewer{max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:20px}
#bigImg{max-width:100%; max-height:calc(100vh - 190px); object-fit:contain; display:block}
#bigCap{text-align:center; color:#e8eaed; font-size:13.5px; line-height:1.9}
#bigCap b{display:block; font-size:15px; font-weight:400; letter-spacing:.06em}
#bigCap span{display:block; color:#9aa0a6; font-size:12.5px; margin-top:4px}
#bigCap a{display:inline-block; margin-top:12px; color:#8ab4f8; text-decoration:none; font-size:12.5px;
  border:1px solid rgba(138,180,248,.45); padding:5px 14px; border-radius:2px}
#bigCap a:hover{background:rgba(138,180,248,.12)}

.nav{
  position:absolute; z-index:2; border:0; cursor:pointer; color:#e8eaed;
  background:rgba(255,255,255,.08); width:52px; height:52px; border-radius:50%;
  font-size:22px; line-height:1; transition:background .15s, transform .15s;
}
.nav:hover{background:rgba(255,255,255,.2)}
#prev{left:clamp(12px,3vw,40px)} #next{right:clamp(12px,3vw,40px)}
.nav.close{top:14px; right:14px; width:44px; height:44px; font-size:17px; background:transparent}