/* 一、基础样式。改颜色、字体、页面宽度，从这里开始。 */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f3e9db; color: #30271e; font-family: "Songti SC", "SimSun", serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: #9c4d30; }
a:focus-visible { outline: 2px solid #9c4d30; outline-offset: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
p { font-size: 16px; line-height: 1.8; }
h2 { font-size: 28px; }
h3 { font-size: 23px; }
small { font-weight: normal; }
.wrap { width: 91%; max-width: 1320px; margin: auto; }
.section { padding: 38px 0; scroll-margin-top: 20px; }
.section-heading { display: flex; align-items: center; gap: 26px; margin-bottom: 28px; }
.section-heading > a { margin-left: auto; font-size: 14px; }
h2 small { display: inline-block; color: #9d8269; font: 11px Georgia, serif; margin-left: 12px; }
.hand-note { color: #a27c5a; font-family: "STKaiti", "KaiTi", serif; }
.button { display: inline-block; border: 1px solid #81715e; padding: 8px 23px; font-size: 14px; margin-top: 18px; }
.rounded { border-radius: 28px; }
.arrow { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; background: #654932; color: #fff7e7; font: 17px Arial, sans-serif; margin-top: 16px; }

/* 二、导航与首屏。首屏图片在这里替换，文字在 index.html 修改。 */
.hero { position: relative; background: url("https://res.cloudinary.com/uapi7a3j/image/upload/hero.png") center top / 100% 100% no-repeat; max-width: 1450px; margin: auto; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 86px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: bold; white-space: nowrap; }
.brand small { display: block; font: 9px Arial, sans-serif; margin-top: 3px; }
.seal { display: inline-block; border: 3px double #69543e; padding: 3px 5px; border-radius: 8px; font-family: "STKaiti", serif; }
nav { display: flex; gap: 30px; align-items: center; font-size: 14px; }
.language { white-space: nowrap; font-size: 14px; }
.hero-content { min-height: 540px; display: flex; padding-top: 50px; padding-bottom: 40px; }
.hero-copy .rounded { position: absolute; left: 12.8%; top: 83.5%; width: 19.5%; height: 9.5%; margin: 0; padding: 0; border: 1px solid #81715e; border-radius: 40px; background: #f3e9db; font-size: 17px; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.vertical-note { writing-mode: vertical-rl; margin-top: 22px; letter-spacing: 5px; }
.hero-copy { margin-left: 65px; }
h1 { font-family: "STKaiti", "KaiTi", serif; font-size: 53px; line-height: 1.22; }
h1 span { font-size: 80px; }
.hero-copy > p { margin-top: 30px; }
.hero-aside { margin-left: auto; width: 110px; padding-top: 8px; }
.hero-aside > p:first-child { font: 24px/1.45 "STKaiti", "KaiTi", serif; }
.hero-aside small { display: block; font: 10px/1.6 Georgia, serif; color: #9b826b; margin-top: 25px; }
.hero-aside .side-caption { font-size: 13px; margin-top: 125px; }

/* 三、六张探索卡片。gap 是左右、上下间距，可直接修改。 */
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
.explore-card { position: relative; min-height: 206px; overflow: hidden; border-radius: 8px; }
.explore-card > img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.card-copy { position: relative; padding: 34px 28px; }
.card-copy p { font-size: 15px; margin-top: 12px; }
/* 图片自带圆形箭头：链接仍保留，只去掉重复绘制的圆圈和箭头。 */
.explore-card .arrow, .route-card .arrow { background: transparent; color: transparent; }
.explore-card .arrow::after, .route-card .arrow::after { content: ""; position: absolute; inset: 0; }
.explore-card:focus-within, .route-card:focus-within { outline: 2px solid #9c4d30; outline-offset: 3px; }

/* 四、故事地图：只有地点标签需要绝对定位，其余内容正常排列。 */
.map-section { display: grid; grid-template-columns: 23% 57% 20%; align-items: center; }
.section-intro h2 { margin-bottom: 20px; }
.section-intro h2 small { font-size: 10px; margin-left: 6px; }
.map-picture { position: relative; }
.map-picture > img { width: 100%; }
.map-label { position: absolute; writing-mode: vertical-rl; padding: 4px; background: #f3e9d9; font-size: 14px; }
.yuelu { left: 27%; top: 15%; }.taiping { left: 65%; top: 20%; }
.orange { left: 31%; top: 55%; }.river { left: 51%; top: 46%; }
.tianxin { left: 69%; top: 58%; }.temple { left: 88%; top: 34%; }
.map-note { padding-left: 25px; font-family: "STKaiti", "KaiTi", serif; }

/* 五、四张故事卡片，图片与下面的文字是两个独立部分。 */
.story-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.story-card { background: #e9dbc9; border-radius: 7px; overflow: hidden; }
.story-card > img { width: 100%; aspect-ratio: 1 / 1.07; object-fit: cover; }
.story-card > div { padding: 24px; }
.story-card h3 { font-size: 22px; }
.story-card p { font-size: 15px; margin-top: 10px; }

/* 六、下半页：左边标题介绍，右边图片内容。 */
.horizontal-section { display: flex; align-items: center; gap: 28px; }
.horizontal-section .section-intro { flex: 0 0 23%; }
.city-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.city-grid img { width: 100%; height: 170px; object-fit: cover; border-radius: 5px; }
.city-grid figcaption { text-align: center; padding-top: 12px; }
.city-grid h3 { font-size: 18px; letter-spacing: 3px; }
.city-grid p { font-size: 13px; color: #796750; }
.timeline { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.timeline figure { position: relative; text-align: center; }
/* 只连接图片左右边缘已有的棕色线头，五段曲线跨过列间距；没有底线或新增节点。 */
.timeline figure::after { content: ""; position: absolute; left: calc(100% - 1px); bottom: 0; width: 16px; height: 105px; pointer-events: none; background: center / 100% 100% no-repeat; }
.timeline figure:nth-child(1)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 60.6 C35 62 65 70 100 70.4' fill='none' stroke='%23ad7954' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.timeline figure:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 61.3 C35 61 65 76 100 76.8' fill='none' stroke='%23ad7954' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.timeline figure:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 69.7 C35 70 65 77 100 77.5' fill='none' stroke='%23ad7954' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.timeline figure:nth-child(4)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 70.4 C35 69 65 62 100 60.6' fill='none' stroke='%23ad7954' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.timeline figure:nth-child(5)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 52.1 C35 52 65 63 100 63.4' fill='none' stroke='%23ad7954' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.timeline figure:last-child::after { display: none; }
.timeline figcaption { font-size: 16px; }
.timeline small { display: block; font-size: 12px; margin: 6px 0 12px; color: #796750; }
.timeline img { width: 100%; height: 105px; object-fit: fill; }
.route-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.route-card { position: relative; min-height: 175px; border-radius: 6px; overflow: hidden; }
.route-card > img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.route-card > div { position: relative; padding: 24px 17px; }
.route-card h3 { font-size: 18px; }
.route-card p { font-size: 13px; margin-top: 9px; }
.route-card .arrow { margin-top: 10px; }
.goods-list { flex: 1; display: flex; align-items: end; gap: 6px; min-width: 0; }
.goods-list img { min-width: 0; height: 130px; width: 14%; object-fit: contain; }
.goods-note { font-size: 15px; flex: 0 0 140px; }
.goods-note small { display: block; margin-top: 14px; color: #9b826b; font: 10px/1.6 Georgia, serif; }
.footer { border-top: 1px solid #d5c6b2; padding: 32px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.footer p { font-size: 12px; }
.footer .brand { font-size: 22px; }
.footer nav { margin-left: auto; gap: 18px; font-size: 12px; }
.footer > small { width: 100%; text-align: right; color: #897661; }

/* 图片对照页，只供查看每个独立素材。 */
.asset-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; padding: 30px 0; }
.asset-gallery figure { padding: 16px; background: #e9dbc9; }
.asset-gallery img { width: 100%; height: 200px; object-fit: contain; }
.asset-gallery figcaption { text-align: center; margin-top: 14px; font: 14px monospace; }
/* 七、小屏适配。无需 JavaScript，也没有框架或安装步骤。 */
@media (max-width: 1000px) {
  .header { flex-wrap: wrap; padding: 20px 0; }
  .header nav { order: 3; width: 100%; justify-content: space-between; gap: 10px; }
  .hero-content { min-height: 460px; padding-top: 25px; }
  .hero-copy { margin-left: 35px; } h1 { font-size: 37px; } h1 span { font-size: 60px; }
  .hero-aside { display: none; }
  h2 { font-size: 23px; } h3 { font-size: 20px; }
  .explore-grid { gap: 24px 18px; }.card-copy { padding: 24px 18px; }
  .story-grid { gap: 18px; }.story-card > div { padding: 17px; }.story-card h3 { font-size: 18px; }
  .horizontal-section { align-items: start; flex-direction: column; }
  .horizontal-section .section-intro, .city-grid, .timeline, .route-grid, .goods-list { width: 100%; }
  .goods-list img { height: 150px; }.map-note { font-size: 14px; }
}
@media (max-width: 600px) {
  .wrap { width: 90%; }.section { padding: 28px 0; }
  .brand { font-size: 23px; }.header nav { flex-wrap: wrap; justify-content: start; gap: 16px; }
  .hero { background-size: 100% 100%; background-position: center top; }
  .hero-copy .rounded { font-size: 11px; }
  .hero-copy { margin-left: 15px; background: #f3e9dbd9; padding: 18px; border-radius: 8px; }
  .hero-copy > p { font-size: 14px; } h1 { font-size: 28px; } h1 span { font-size: 48px; }
  .vertical-note { display: none; }.section-heading { flex-wrap: wrap; gap: 10px; }.hand-note { display: none; }
  .explore-grid, .story-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .explore-card { min-height: 190px; }.card-copy { padding: 22px 12px; }.card-copy p { font-size: 12px; }.card-copy h3 { font-size: 18px; }
  .map-section { grid-template-columns: 1fr; gap: 24px; }.map-note { padding: 0; }.map-label { font-size: 12px; }
  .story-card > div { padding: 15px; }.story-card h3 { font-size: 17px; }.story-card p { font-size: 13px; }
  .city-grid { gap: 8px; }.city-grid img { height: 105px; }.city-grid h3 { font-size: 15px; }
  .timeline { grid-template-columns: repeat(6, 1fr); gap: 8px; }.route-grid { grid-template-columns: 1fr; }
  .timeline figure::after { width: 10px; height: 65px; }
  .timeline figcaption { font-size: 12px; }.timeline small { font-size: 10px; }
  .timeline img { height: 65px; }
  .goods-list { flex-wrap: wrap; justify-content: center; }.goods-list img { width: 22%; height: 110px; }
  .footer nav { margin-left: 0; flex-wrap: wrap; }.footer > small { text-align: left; }
}