/* 字体：先查找已安装字体，再从 Cloudinary 加载 WOFF2 或 WOFF。
    font-family 中保留 Arial、Microsoft YaHei、sans-serif 作为备用字体。
   Regular 对应 400，Bold 对应 700；保留原有字号、行高与布局。 */
@font-face {
  font-family: "ABC Helveesti";
  src: local("ABCHelveesti-Regular-Trial"),
        url("https://res.cloudinary.com/jkfafyiv/raw/upload/v1790154249/ABCHelveesti-Regular-Trial.woff2") format("woff2"),
        url("https://res.cloudinary.com/jkfafyiv/raw/upload/v1790154249/ABCHelveesti-Regular-Trial.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Helveesti";
  src: local("ABCHelveesti-Bold-Trial"),
        url("https://res.cloudinary.com/jkfafyiv/raw/upload/v1790154248/ABCHelveesti-Bold-Trial.woff2") format("woff2"),
        url("https://res.cloudinary.com/jkfafyiv/raw/upload/v1790154249/ABCHelveesti-Bold-Trial.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*{
box-sizing:border-box
}


/* 外部 CSS：通过 HTML 中的 link 标签连接。 */
:root{
  --ink:#302d25;
  --muted:#6c6657;
  --paper:#e7dbc3;
  --line:#b4a487;
  --accent:#755735
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body{
  margin:0;
  background:#cec2aa;
  color:var(--ink);
  font-family: "ABC Helveesti", Arial, "Microsoft YaHei", sans-serif;
  font-size:17px;
  line-height:1.7
}

a{
  color:inherit;
  text-decoration:none
}

img{
  display:block;
  max-width:100%
}

h1,h2,h3,p,figure{
  margin:0
}

h2{
  font-family: "ABC Helveesti", Arial, "Microsoft YaHei", sans-serif;
  font-size:35px;
  line-height:1.2;
  font-weight:400;
  margin-bottom:28px
}

h3{
  font-size:15px;
  line-height:1.4
}

p+p{
  margin-top:18px
}

a:focus-visible,summary:focus-visible{
  outline:3px solid #a85132;
  outline-offset:5px
}

section[id],article[id]{
  scroll-margin-top:24px
}

body>header,main,footer{
  max-width:1000px;
  margin:auto
}

main,footer{
  background:var(--paper) url("https://res.cloudinary.com/jkfafyiv/image/upload/v1790155203/texture.webp") repeat;
  background-size:620px
}

.section{
  padding:58px 64px;
  border-bottom:1px solid var(--line)
}

.eyebrow{
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px
}

.lead{
  font-family: "ABC Helveesti", Arial, "Microsoft YaHei", sans-serif;
  font-size:26px;
  line-height:1.35;
  margin-bottom:28px
}

.caption{
  text-align:center;
  font-size:15px;
  margin-top:16px
}

.split{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:60px;
  align-items:center
}

.split>div>p:not(.eyebrow):not(.lead){
  color:var(--muted);
  font-size:13px
}

.split h2{
  margin-bottom:38px
}

.hero{
  height:590px;
  position:relative;
  background:#232620 url("https://res.cloudinary.com/jkfafyiv/image/upload/v1790155137/first.webp") center/cover;
  color:#fff;
  overflow:hidden
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(15,21,20,.78),rgba(15,21,20,.05)),linear-gradient(0deg,rgba(15,21,20,.55),transparent 55%)
}

.navigation,.hero-copy,.hero-caption{
  position:relative;
  z-index:1
}

.navigation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 40px;
  border-bottom:1px solid #ffffff35
}

.brand{
  font-size:12px;
  letter-spacing:1.5px;
  font-weight:700
}

.brand span{
  display:block;
  font-size:10px;
  letter-spacing:4px;
  font-weight:400
}

.navigation>div{
  display:flex;
  gap:26px;
  font-size:12px;
}

.navigation a:hover{
  color:#d9c294
}

.hero-copy{
  padding:99px 64px 0
}

.hero .eyebrow{
  color:#d9c294
}

.hero h1{
  font-family: "ABC Helveesti", Arial, "Microsoft YaHei", sans-serif;
  font-size:55px;
  line-height:1.12;
  font-weight:400;
  letter-spacing:2px;
  margin-bottom:18px
}

.hero-copy>p:not(.eyebrow){
  font-size:13px;
  letter-spacing:.7px
}
.light-link{
  display:inline-flex;
  gap:38px;
  font-size:11px;
  border-bottom:1px solid #c7bca6;
  padding:14px 0;
  margin-top:18px
}
.hero-caption{
  position:absolute;
  bottom:24px;
  right:32px;
  font-size:12px;
  letter-spacing:1px;
}
.introduction{
  padding-top:42px;
  padding-bottom:30px
}
.video-cover{
  min-height:280px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:8px solid #efe7d5;
  outline:1px solid #b2a489;
  background:linear-gradient(#0c131c44,#0c131c66),url("https://res.cloudinary.com/jkfafyiv/image/upload/v1790155137/first.webp") center 48%/cover;
  color:white;
  font-size:11px;
  letter-spacing:3px
}
.play-mark{
  font-size:35px;
  line-height:1;
  border:1px solid #ffffffa0;
  border-radius:50%;
  padding:15px 18px
}
.artifact-feature img{
  height:300px;
  width:100%;
  object-fit:contain
}
.artifact-feature figcaption{
  text-align:center;
  font-size:8px;
  letter-spacing:2px;
  color:var(--muted);
  margin-top:16px
}
.relic-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:22px;
  margin-top:32px
}
.relic-row a{
  border-radius:50%;
  overflow:hidden;
  background:#322b23;
  aspect-ratio:1;
  border:3px solid #c4b28f;
  transition:transform .2s
}
.relic-row a:hover{
  transform:translateY(-5px)
}
.relic-row img{
  width:100%;
  height:100%;
  object-fit:contain
}
.scene{
  width:100%;
  height:290px;
  object-fit:cover;
  border-radius:3px
}
.collection-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  padding-top:35px;
  padding-bottom:35px
}
.artifact-card{
  padding:22px;
  background:#f6efdf9e;
  border:1px solid #b9ab8f;
  display:flex;
  align-items:flex-start;
  flex-direction:column
}
.artwork{
  width:100%;
  height:260px;
  background:radial-gradient(ellipse at 50% 40%,#5e5b4d,#232923 75%);
  margin-bottom:24px
}
.artwork img{
  width:100%;
  height:100%;
  object-fit:contain
}
.artifact-card .eyebrow{
  font-size:8px;
  margin-bottom:8px
}
.artifact-card>p:not(.eyebrow){
  font-size:12px;
  line-height:1.7;
  margin:15px 0;
  color:var(--muted)
}
.more{
  align-self:flex-end;
  background:#fffdf7;
  padding:3px 15px;
  border-radius:20px;
  font-size:9px;
  letter-spacing:1px;
  margin-top:auto
}
.more span{
  margin-left:18px
}
.artifact-card details{
  font-size:11px;
  margin-top:10px;
  width:100%
}
summary{
  cursor:pointer;
  color:var(--accent)
}
details p{
  margin-top:10px;
  color:var(--muted)
}
.exhibition-list{
  display:grid;
  gap:25px;
  padding-top:30px
}
.exhibition-card{
  padding:15px;
  background:#f9f2e3a3;
  border:1px solid #b9ab8f
}
  .exhibition-banner{
    height:180px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-around
  }
  .exhibition-banner span{
    font-family: "ABC Helveesti", Arial, "Microsoft YaHei", sans-serif;
    font-size:43px;
    letter-spacing:12px
  }
  .exhibition-banner p{
    font-size:7px;
    letter-spacing:2px
  }
  .exhibition-banner img{
    height:170px;
    width:130px;
    object-fit:contain
  }
  .bronze-banner{
    background:linear-gradient(100deg,#171b17,#514f40);
    color:#c2ad71
  }
  .antiquity-banner{
    background:#383c2d;
    color:#c5b474;
    border:9px double #9e9361
  }
  .antiquity-banner span{
    position:relative;
    z-index:1
  }
  .antiquity-banner small{
    margin:0 15px
  }
  .antiquity-banner img{
    position:absolute;
    right:5%;
    opacity:.35
  }
  .mirror-banner{
    background:#edeade;
    color:#343b2b
  }
  .mirror-banner span{
    position:relative;
    z-index:1;
    font-size:37px;
    letter-spacing:7px
  }
  .mirror-banner small{
    display:block;
    font-family: "ABC Helveesti", Arial, "Microsoft YaHei", sans-serif;
    font-size:8px;
    letter-spacing:3px;
    text-align:center;
    margin-top:8px
  }
  .mirror-ring{
    position:absolute;
    width:230px;
    height:230px;
    border:20px double #a8ae9355;
    border-radius:50%;
    right:-35px
  }
  .exhibition-copy{
    padding:17px 6px 5px
  }
  .exhibition-copy h3{
    font-size:15px
  }
  .exhibition-copy>p{
    font-size:12px;
    color:var(--muted);
    margin-top:10px
  }
  .exhibition-copy details{
    font-size:11px;
    margin-top:12px
  }
  .map{
    height:300px;
    width:100%;
    object-fit:contain
  }
  .text-link{
    display:inline-block;
    border-bottom:1px solid var(--accent);
    font-size:11px;
    margin-top:22px;
    padding-bottom:3px
  }
  .guideline{
    display:flex;
    gap:24px;
    padding:18px 24px;
    border:1px solid #bfb197;
    background:#faf5e784;
    border-radius:12px;
    margin-top:12px
  }
  .guideline>span{
    font-family: "ABC Helveesti", Arial, "Microsoft YaHei", sans-serif;
    font-size:24px;
    color:#9f8a64
  }
  .guideline h3{
    font-size:13px
  }
  .guideline p{
    font-size:12px;
    color:var(--muted);
    margin-top:3px
  }
  .visitor-note{
    font-size:10px;
    color:var(--muted);
    margin-top:16px
  }
  .about .scene{
    height:190px
  }
  .culture .scene{
    height:250px
  }
  footer{
    padding:30px 40px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:20px;
    align-items:center
  }
  footer>div{
    display:flex;
    gap:22px;
    font-size:9px
  }
  footer>p{
    font-size:9px;
    color:var(--muted)
  }
  .back-top{
    font-size:9px;
    letter-spacing:1px;
    text-align:right
  }


/* 平板：缩小间距，让两栏内容保持清晰。 */
@media (max-width:768px){
  .section{
    padding:40px 32px
  }
  .split{
    gap:30px
  }
  h2{
    font-size:29px
  }
  .lead{
    font-size:22px
  }
  .hero{
    height:510px
  }
  .hero-copy{
    padding:85px 32px 0
  }
  .hero h1{
    font-size:46px
  }
  .navigation{
    padding:20px 28px
  }
  .relic-row{
    gap:12px
  }
  .artifact-card{
    padding:16px
  }
  .artwork{
    height:220px
  }
  .exhibition-banner span{
    font-size:34px;
    letter-spacing:7px
  }
  .scene{
    height:260px
  }
}

/* 手机：改成单栏；文物圆形缩略图仍并排展示。 */
@media (max-width:480px){
  body{
    font-size:14px
  }
  .section{
    padding:32px 22px
  }
  .navigation{
    padding:16px 20px;
    gap:18px
  }
  .brand{
    font-size:9px
  }
  .brand span{
    font-size:8px
  }
  .navigation>div{
    gap:12px;
    font-size:9px
  }
  .hero{
    height:450px
  }
  .hero-copy{
    padding:78px 24px 0
  }
  .hero h1{
    font-size:37px
  }
  .hero-caption{
    font-size:6px;
    right:20px
  }
  .eyebrow{
    font-size:8px
  }
  h2{
    font-size:28px;
    margin-bottom:24px
  }
  .split{
    grid-template-columns:1fr;
    gap:25px
  }
  .split h2{
    margin-bottom:24px
  }
  .lead{
    font-size:24px;
    margin-bottom:20px
  }
  .video-cover{
    min-height:190px;
    border-width:5px
  }
  .artifact-feature img{
    height:240px
  }
  .relic-row{
    gap:7px;margin-top:22px
  }
  .relic-row a{
    border-width:2px
  }
  .scene{
    height:235px
  }
  .collection-grid{
    grid-template-columns:1fr;
    gap:20px
  }
  .artifact-card{
    padding:22px
  }
  .artwork{
    height:280px
  }
  .exhibition-banner{
    height:135px
  }
  .exhibition-banner span{
    font-size:26px;
    letter-spacing:4px
  }
  .exhibition-banner img{
    width:80px;
    height:125px
  }
  .exhibition-banner p{
    font-size:5px;
    letter-spacing:1px
  }
  .exhibition-copy h3{
    font-size:14px
  }
  .mirror-banner small{
    font-size:7px
  }
  .map{
    height:260px;
  }
  .guideline{
    gap: 15px;
  padding: 12px 18px;
  }
  .guideline>span{
    text-align:left
  }
  .guideline h3{
    font-size:12px
  }
}


@media (prefers-reduced-motion:
reduce){
  html{
  scroll-behavior:auto
}
.relic-row a{
  transition:none
}
}


/* JPG 照片与 SVG 图标 */
.exhibition-banner{
  height:auto;
  aspect-ratio:3.7
}
.exhibition-banner img{
  width:100%;
  height:100%;
  object-fit:cover
}
.play-icon{
  width:58px;
  height:58px
}
.video-cover{
  position:relative
}
.cover-label{
  background:#24241ee6;
  padding:4px 12px
}
.artwork img{
  object-fit:contain
}
.culture .scene{
  object-fit:contain
}
.artifact-feature img{
  mix-blend-mode:multiply
}


/* 图一：导航栏和页脚使用素色纸纹背景。 */
.navigation,footer {
  background: #eee5d4 url("https://res.cloudinary.com/jkfafyiv/image/upload/v1790155127/paper.webp") center / cover;
  color: var(--ink);
  border-color: var(--line);
}
.navigation a:hover { 
  color: #000000;
}
main { 
  background: var(--paper); 
}


/* 图三：中间横向板块使用横版云纹。 */
.section {
  background: var(--paper) url("https://res.cloudinary.com/jkfafyiv/image/upload/v1790155125/panel-landscape.webp") center / 100% 100% no-repeat;
}

/* Collection 和 Exhibition 介绍卡片使用图一的素色纸纹。 */
.artifact-card,.exhibition-card {
  background: var(--paper) url("https://res.cloudinary.com/jkfafyiv/image/upload/v1790155127/paper.webp") center / cover no-repeat;
}
.explore-form { 
  margin-top: 24px; 
}
.explore-button { 
  display: inline-block; 
}

/* 五项导航全部连接到页面内对应板块。 */
.navigation {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 0;
  border: 1px solid #302d25;
}
.navigation>a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 10px 4px;
  font-size: clamp(15px, 2.1vw, 22px);
  line-height: 1.2;
  font-weight: 400;
}
.navigation>a:hover { 
  background: #ffffff40; 
}

/* 页脚：左侧名称，右侧 SUPPORT 与 FOLLOW 两列。 */
.site-footer {
  grid-template-columns: 2.5fr 1fr 1fr;
  gap: 36px;
  min-height: 128px;
  padding: 22px 36px;
  border: 1px solid #302d25;
}
.footer-title { 
  font-size: 15px; 
  font-weight: 700; 
  line-height: 1.3; 
}
.site-footer>.footer-column { 
  display: block; 
}
.footer-column h2 {
  font-family: "ABC Helveesti", Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 400;
  margin-bottom: 9px;
}
.footer-column ul { 
  padding: 0; 
  margin: 0; 
  list-style: none;
}
.footer-column li { 
  font-size: 8px; 
  line-height: 1.25; 
}
@media (max-width:480px) {
  .site-footer { 
    grid-template-columns: 1fr 1fr; 
    gap: 22px; padding: 22px; 
  }
  .footer-title { 
    grid-column: 1 / -1; 
    font-size: 20px; 
  }
}

/* video 提供播放、暂停、音量、进度和全屏控制。 */
.museum-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #151712;
  border: 7px solid #eee5d4;
  outline: 1px solid var(--line);
}

/* button + popover 实现原生点击详情，无需脚本。 */
button { 
  font: inherit; 
  cursor: pointer; 
}
button:focus-visible,.museum-video:focus-visible {
  outline: 3px solid #a85132;
  outline-offset: 4px;
}
.more,.close-button {
  border: 1px solid #aa9877;
  color: #4d3d29;
  background: #fffaf0;
  min-height: 44px;
  padding: 9px 20px;
  font-size: 12px;
  letter-spacing: 1.2px;
  border-radius: 24px;
}
.more:hover,.close-button:hover { 
  background: #745837; 
  color: #fffaf0; 
}
.more:active,.close-button:active { 
  transform: translateY(1px); 
}
.exhibition-more { 
  display: block; 
  margin: 18px 0 0 auto; 
}
.object-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  margin: auto;
  padding: 26px;
  border: 1px solid #a89672;
  border-radius: 8px;
  color: var(--ink);
  background: #e7dbc3 url("https://res.cloudinary.com/jkfafyiv/image/upload/v1790155129/panel-portrait.webp") center / cover;
  box-shadow: 0 20px 80px #0005;
}
.object-dialog::backdrop { 
  background: #171a16b3; 
}
.close-button { 
  display: block; 
  margin: 0 0 18px auto; 
}
.object-dialog img { 
  width: 100%; 
  height: 300px; 
  object-fit: contain; 
  margin-bottom: 24px; 
}
.object-dialog h2 { 
  font-size: 26px; 
  margin-bottom: 18px; 
}
.object-dialog>p:not(.eyebrow) { 
  font-size: 14px; 
}
/* 展览详情沿用 .object-dialog 的背景，与 VIEW 一致。 */

/* transition 放在默认状态，移入和移出都会平滑过渡。
   ease 用于按钮，linear 用于亮度，cubic-bezier 用于图片缩放。 */
.more,.close-button {
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, transform 200ms ease,
              box-shadow 200ms ease;
}
.navigation>a,.text-link,.footer-title {
  transition: color 200ms ease, background-color 200ms ease,
              border-color 200ms ease;
}
.artwork { 
  overflow: hidden; 
}
.artwork img,.exhibition-banner img,.relic-row img,
.artifact-feature img,.scene,.map,.object-dialog img {
  transition: transform 500ms cubic-bezier(0.42, 0, 0.58, 1),
              filter 500ms linear;
}
.relic-row a {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* 鼠标设备悬停：按钮变色并轻微上移；图片放大或上移。 */
@media (hover: hover) and (pointer: fine) {
  .more:hover,.close-button:hover {
    background-color: #745837;
    color: #fffaf0;
    border-color: #745837;
    transform: translateY(-3px);
    box-shadow: 0 5px 12px #302d2529;
  }
  .artwork:hover img,.exhibition-banner:hover img {
    transform: scale(1.04);
    filter: brightness(1.06);
  }
  .relic-row a:hover {
    transform: translateY(-5px);
    box-shadow: 0 7px 14px #302d2533;
  }
  .relic-row a:hover img { 
    transform: scale(1.05); 
  }
  .artifact-feature img:hover,.scene:hover,.map:hover,
  .object-dialog img:hover {
    transform: translateY(-5px);
    filter: brightness(1.06);
  }
  .navigation>a:hover {
    color: #745837;
    background-color: #fffaf080;
  }
  .text-link:hover,.footer-title:hover { 
    color: #745837; 
  }
}

/* 键盘操作也有清晰反馈，保留原生弹窗按钮功能。 */
.more:focus-visible,.close-button:focus-visible {
  background-color: #745837;
  color: #fffaf0;
}
.more:active,.close-button:active {
  transform: translateY(1px);
  box-shadow: none;
}
.relic-row a:focus-visible { 
  outline-offset: 6px; 
}

/* 减少动态效果时，关闭移动和过渡，保留颜色反馈。 */
@media (prefers-reduced-motion: reduce) {
  html { 
    scroll-behavior: auto; 
  }
  .more,.close-button,.navigation>a,.text-link,.footer-title,
  .artwork img,.exhibition-banner img,.relic-row img,.relic-row a,
  .artifact-feature img,.scene,.map,.object-dialog img {
    transition: none;
    transform: none;
  }
  .more:hover,.close-button:hover,.more:active,.close-button:active,
  .artwork:hover img,.exhibition-banner:hover img,.relic-row a:hover,
  .relic-row a:hover img,.artifact-feature img:hover,.scene:hover,
  .map:hover,.object-dialog img:hover { 
    transform: none; 
  }
}


@media (max-width:480px) {
  /* 手机单栏后，纵向内容区也换成图二。 */
  .section.split,.collection-grid,.exhibition-list,.visitor {
    background-image: url("https://res.cloudinary.com/jkfafyiv/image/upload/v1790155129/panel-portrait.webp");
  }
  .museum-video { 
    border-width: 4px; 
  }
  .object-dialog { 
    padding: 20px; 
  }
  .object-dialog img { 
    height: 230px; 
  }
}

/* 全部 img 的默认过渡；原有专用图片规则继续生效。 */
img {
  transition: transform 500ms cubic-bezier(0.42, 0, 0.58, 1), filter 500ms linear;
}
/* CSS 背景图片和视频封面也提供反馈，不移动文字或播放器。 */
.hero::before { 
  transition: opacity 500ms ease; 
}
.navigation,.section,.artifact-card,.exhibition-card,.site-footer,.object-dialog,
.video-cover,.museum-video {
  transition: background-position 600ms ease, box-shadow 300ms ease;
}


@media (hover: hover) and (pointer: fine) {
  img:hover { 
    transform: translateY(-4px); 
    filter: brightness(1.06); 
  }
  .hero:hover::before { 
    opacity: .8; 
  }
  .navigation:hover,.section:hover,.artifact-card:hover,.exhibition-card:hover,
  .site-footer:hover,.object-dialog:hover,.video-cover:hover {
    background-position: 52% 48%;
    box-shadow: inset 0 0 24px #75573518;
  }
  .museum-video:hover { 
    box-shadow: 0 5px 16px #302d2533; 
  }
}


@media (prefers-reduced-motion: reduce) {
  img,.hero::before,.navigation,.section,.artifact-card,.exhibition-card,
  .site-footer,.object-dialog,.video-cover,.museum-video { 
    transition: none; 
  }
  img:hover { 
    transform: none; 
  }
}
/* 首页标题：鼠标悬停时提亮、轻微上移，不改变排版尺寸。 */
.hero h1 {
  transition: color 300ms ease, text-shadow 300ms ease, transform 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero h1:hover {
    color: #edd4a4;
    text-shadow: 0 4px 18px #d6b26b55;
    transform: translateY(-3px);
  }
}

/* 原生 details / summary：点击或按 Enter、空格展开和收起。 */
.guideline-details {
  display: block;
  padding: 0;
  overflow: hidden;
  transition: background-color 250ms ease, border-color 250ms ease;
}
.guideline-details>summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 24px;
  list-style: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 250ms ease, color 250ms ease;
}
.guideline-details>summary::-webkit-details-marker { 
  display: none; 
}
.guideline-number { 
  font-size: 24px; 
  color: #9f8a64; 
}
.guideline-title { 
  font-size: 13px; 
  font-weight: 700; 
}
.guideline-toggle {
  position: relative;
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
}
.guideline-toggle::before,.guideline-toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.guideline-toggle::before { 
  width: 12px; 
  height: 2px; 
  left: 2px; 
  top: 7px; 
}
.guideline-toggle::after {
  width: 2px; 
  height: 12px; 
  left: 7px; 
  top: 2px;
  transition: transform 250ms ease;
}
.guideline-details[open] .guideline-toggle::after { 
  transform: rotate(90deg); 
}
.guideline-details[open] { 
  border-color: #9f8a64; 
}
.guideline-content { 
  padding: 0 24px 20px; 
}
.guideline-content p { 
  margin: 0; 
  font-size: 12px; 
  line-height: 1.7; 
  color: var(--muted); 
}
.guideline-details>summary:focus-visible { 
  outline-offset: -4px; 
  background: #fffaf080; 
}

@media (hover: hover) and (pointer: fine) {
  .guideline-details>summary:hover { 
    background: #fffaf080; 
    color: #745837; 
  }
}

@media (max-width:480px) {
  .guideline-details { 
    padding: 0; 
  }
  .guideline-details>summary { 
    gap: 15px; 
    padding: 12px 18px; 
  }
  .guideline-title { 
    font-size: 12px; 
  }
  .guideline-content { 
    padding: 0 18px 16px; 
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero h1,.guideline-details,.guideline-details>summary,
  .guideline-toggle::after { 
    transition: none; 
  }
  .hero h1:hover { 
    transform: none; 
  }
}

/* 固定导航：滚动到页面任意位置仍可见，宽度与页面一致。 */
.navigation {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 100%);
  height: 52px;
  z-index: 1000;
  box-shadow: 0 3px 12px #302d2520;
}
/* 保留导航原本占据的位置，首页内容不会被遮挡。 */
.hero { 
  padding-top: 52px; 
}
/* 点击导航后的标题停在导航栏下方。 */
html { 
  scroll-padding-top: 76px; 
}
/* 六个板块标题：悬停变色并上移 5px，移出后平滑恢复，不改变布局。 */
#profile h2,#relic-title,#collection h2,#exhibition h2,#explore h2,#about h2 {
  transition: color 300ms ease, transform 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #profile h2:hover,#relic-title:hover,#collection h2:hover,
  #exhibition h2:hover,#explore h2:hover,#about h2:hover {
    color: #98632e;
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #profile h2,#relic-title,#collection h2,#exhibition h2,#explore h2,#about h2 {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #profile h2:hover,#relic-title:hover,#collection h2:hover,
  #exhibition h2:hover,#explore h2:hover,#about h2:hover { 
    transform: none; 
  }
}

/* 展览横幅按原比例展示，悬停缩放在图片框内完成。 */
.exhibition-detail-image {
  margin: 0 0 24px;
  overflow: hidden;
  border-radius: 4px;
}
.object-dialog .exhibition-detail-image img {
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  transition: transform 500ms cubic-bezier(0.42, 0, 0.58, 1), filter 400ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .object-dialog .exhibition-detail-image:hover img {
    transform: scale(1.04);
    filter: brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .object-dialog .exhibition-detail-image img { 
    transition: none; 
  }
  .object-dialog .exhibition-detail-image:hover img { 
    transform: none; 
  }
}

/* VIEW 和 READ MORE 共用大尺寸、内部滚动的详情面板。 */
.object-dialog {
  width: min(920px, calc(100% - 48px));
  height: 88vh;
  height: 88dvh;
  max-height: 88vh;
  max-height: 88dvh;
  padding: 28px 42px 42px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #9f8a64 #eee5d4;
}
.object-dialog .close-button {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 2px 10px #302d2520;
}
.object-dialog>img { 
  height: 400px; 
}
.object-dialog .exhibition-detail-image img { 
  height: auto; 
}
.object-dialog h2 { 
  font-size: 32px; 
  line-height: 1.25; 
}
.object-dialog>p:not(.eyebrow),.detail-reading p {
  font-size: 16px;
  line-height: 1.85;
}
.detail-reading { 
  max-width: 70ch; 
}
.detail-reading h3 { 
  font-size: 21px; 
  line-height: 1.4; 
  margin: 30px 0 12px; 
}
.detail-reading p { 
  color: var(--muted); 
  margin: 0; 
}
.detail-reading .detail-note {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

@media (max-width:600px) {
  .object-dialog {
    width: calc(100% - 20px);
    height: 92vh;
    height: 92dvh;
    max-height: 92vh;
    max-height: 92dvh;
    padding: 16px 20px 28px;
  }
  .object-dialog>img { 
    height: 280px; 
  }
  .object-dialog h2 { 
    font-size: 25px; 
  }
  .detail-reading h3 { 
    font-size: 19px; 
  }
  .object-dialog>p:not(.eyebrow),.detail-reading p { 
    font-size: 15px; 
  }
}
/* ===== Responsive layout: desktop / tablet / phone ===== */
:root { --page-width: 1120px; --nav-height: 64px; --page-gutter: clamp(20px, 5vw, 64px); }
html { scroll-padding-top: calc(var(--nav-height) + 16px); }
body>header,main,footer { width: 100%; max-width: var(--page-width); }
.navigation {
  width: min(var(--page-width), 100%);
  height: var(--nav-height);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.navigation>a { min-width: 0; min-height: 44px; font-size: clamp(14px, 1.7vw, 20px); padding: 10px 6px; }
.hero {
  padding-top: var(--nav-height);
  height: auto;
  min-height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-copy { padding: 72px var(--page-gutter) 60px; }
.hero h1 { font-size: clamp(34px, 5.8vw, 64px); letter-spacing: .025em; overflow-wrap: normal; }
.hero-caption { position: relative; right: auto; bottom: auto; padding: 0 var(--page-gutter) 24px; margin-top: auto; font-size: 10px; }
.hero-copy>p:not(.eyebrow) { font-size: 15px; }
.section { padding: clamp(36px, 5vw, 64px) var(--page-gutter); background-size: cover; }
.split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); }
.split>*,.collection-grid>*,.site-footer>* { min-width: 0; }
h2 { font-size: clamp(27px, 3.2vw, 36px); overflow-wrap: anywhere; }
.split h2 { margin-bottom: 24px; }
.lead { font-size: clamp(22px, 2.6vw, 28px); }
.split>div>p:not(.eyebrow):not(.lead),.artifact-card>p:not(.eyebrow),.exhibition-copy>p {
  font-size: 15px; line-height: 1.75;
}
.artifact-card h3,.exhibition-copy h3 { font-size: 19px; line-height: 1.4; }
.collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.artifact-card { padding: clamp(18px, 2.6vw, 28px); }
.artwork { height: auto; aspect-ratio: 1 / 1; }
.artifact-card .more { margin-top: auto; }
.scene,.about .scene,.culture .scene { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.narrow-scene { aspect-ratio: 3 / 4; max-height: 390px; object-position: center; }
.culture .scene { object-fit: contain; }
.artifact-feature img { height: clamp(240px, 30vw, 360px); }
.map { height: auto; max-height: 360px; object-fit: contain; }
.exhibition-banner { height: auto; aspect-ratio: auto; }
.exhibition-banner img { width: 100%; height: auto; object-fit: contain; }
.relic-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 2vw, 22px); }
.relic-row a { min-width: 0; }
.eyebrow { font-size: 10px; }
.artifact-feature figcaption { font-size: 10px; letter-spacing: 1px; }
.guideline-title { font-size: 16px; }
.guideline-content p { font-size: 15px; }
.visitor-note { font-size: 12px; }
.site-footer { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); padding: 32px var(--page-gutter); gap: 28px; }
.footer-title { font-size: 19px; }
.footer-column h2 { font-size: 15px; }
.footer-column li { font-size: 13px; line-height: 1.7; }
.object-dialog { width: min(920px, calc(100% - 40px)); padding: 24px clamp(20px, 4vw, 42px) 36px; }
.object-dialog>img { height: clamp(220px, 40vh, 400px); }
.object-dialog h2 { font-size: clamp(24px, 3vw, 32px); overflow-wrap: anywhere; }
.object-dialog .exhibition-detail-image img { height: auto; }
.detail-reading { max-width: 70ch; }

/* 平板：保留双栏，降低图片高度与栏间距。 */
@media (min-width:601px) and (max-width:1024px) {
  :root { --nav-height: 60px; --page-gutter: 32px; }
  .hero { min-height: 520px; }
  .hero-copy { padding-top: 64px; padding-bottom: 48px; }
  .split { gap: 28px; }
  .collection-grid { gap: 20px; }
  .artifact-card { padding: 20px; }
  .artifact-feature img { height: 270px; }
  .site-footer { gap: 20px; }
}

/* 手机：内容改为单栏；五项导航按文字长度分配宽度。 */
@media (max-width:600px) {
  :root { --nav-height: 56px; --page-gutter: 20px; }
  .navigation { grid-template-columns: .8fr 1.4fr 1.35fr 1fr .85fr; padding: 0 4px; gap: 0; }
  .navigation>a { font-size: clamp(10px, 2.7vw, 14px); padding: 10px 2px; letter-spacing: 0; white-space: nowrap; }
  .hero { min-height: 470px; }
  .hero-copy { padding: 64px var(--page-gutter) 48px; }
  .hero h1 { font-size: clamp(30px, 7.6vw, 45px); letter-spacing: .01em; }
  .hero-caption { font-size: 9px; padding-bottom: 22px; letter-spacing: .5px; }
  .split,.collection-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .section { padding: 36px var(--page-gutter); }
  .split>div>p:not(.eyebrow):not(.lead),.artifact-card>p:not(.eyebrow),.exhibition-copy>p { font-size: 15px; }
  .scene,.about .scene,.culture .scene { max-height: 340px; }
  .narrow-scene { aspect-ratio: 4 / 3; }
  .artifact-feature img { height: 280px; }
  .artwork { aspect-ratio: 1 / 1; max-height: 360px; }
  .artifact-card { padding: 22px; }
  .exhibition-card { padding: 12px; }
  .exhibition-copy { padding: 18px 6px 6px; }
  .map { max-height: 300px; }
  .museum-video { border-width: 4px; }
  .guideline-details { padding: 0; }
  .guideline-details>summary { padding: 16px; gap: 12px; }
  .guideline-content { padding: 0 16px 18px; }
  .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .footer-title { grid-column: 1 / -1; font-size: 19px; }
  .object-dialog { width: calc(100% - 16px); height: 92vh; height: 92dvh; max-height: 92vh; max-height: 92dvh; padding: 16px 18px 28px; }
  .object-dialog>img { height: 240px; }
  .object-dialog>p:not(.eyebrow),.detail-reading p { font-size: 15px; line-height: 1.75; }
}
@media (max-width:360px) {
  :root { --page-gutter: 16px; }
  .artifact-card { padding: 18px; }
  .relic-row { gap: 6px; }
}
/* 横屏手机：弹窗高度跟随可见视口，保留内部滚动。 */
@media (max-height:500px) and (orientation:landscape) {
  .object-dialog { height: 94dvh; max-height: 94dvh; }
  .object-dialog>img { height: 180px; }
}
/* 页面铺满窗口，去掉两侧底板颜色。 */
body { background: transparent; }
body>header,main,footer { width: 100%; max-width: none; }
.navigation { width: 100%; max-width: none; }
/* 大屏内容留白随窗口增长，防止正文和图片过度拉伸。 */
@media (min-width:1200px) {
  :root { --page-gutter: clamp(64px, 8vw, 180px); }
  .split>div { max-width: 65ch; }
  .artwork { max-height: 420px; }
  .scene,.about .scene,.culture .scene { max-height: 440px; }
  .museum-video { max-width: 1100px; margin-inline: auto; }
}