:root{--c-primary:#b08d57;}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Noto Serif SC', 'STSong', serif; background: #f4f1e8; color: #2f3e2e; line-height: 1.9; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.bamboo-stripes { background: repeating-linear-gradient(90deg, #4a5e28 0 3px, #6b8240 3px 5px, #556b2f 5px 26px); }
.bamboo-col { position: absolute; top: 0; bottom: 0; width: 96px; background: repeating-linear-gradient(90deg, #4a5e28 0 3px, #6b8240 3px 5px, #556b2f 5px 26px); opacity: 0.9; }
.bamboo-col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: #3d4f21; opacity: 0.5; }
.bamboo-col::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: #3d4f21; opacity: 0.5; }

.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #2f3e2e; border-bottom: 3px solid #556b2f; }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; color: #f4f1e8; font-size: 21px; letter-spacing: 4px; font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif; }
.brand .bamboo-ico { width: 10px; height: 36px; background: linear-gradient(90deg, #7a9348, #a9bd7a, #556b2f); border: 1px solid #3d4f21; position: relative; }
.brand .bamboo-ico::before, .brand .bamboo-ico::after { content: ""; position: absolute; left: -6px; top: 10px; width: 22px; height: 2px; background: #a9bd7a; transform: rotate(-14deg); }
.brand .bamboo-ico::after { top: 24px; transform: rotate(14deg); }
.brand small { display: block; font-size: 10px; letter-spacing: 5px; color: #a9bd7a; font-family: 'Noto Serif SC', serif; }
.nav-links { list-style: none; display: flex; gap: 34px; }
.nav-links a { color: #e8e4d6; font-size: 14px; letter-spacing: 4px; padding-bottom: 6px; border-bottom: 1px solid transparent; }
.nav-links a:hover, .nav-links a.active { color: #b08d57; border-bottom-color: #b08d57; }
.menu-toggle { display: none; background: none; border: 1px solid #b08d57; color: #b08d57; font-size: 13px; letter-spacing: 3px; padding: 8px 12px; cursor: pointer; font-family: inherit; }

.hero { position: relative; padding: 150px 0 100px; background: #f4f1e8; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 59px, rgba(85, 107, 47, 0.06) 59px 60px), repeating-linear-gradient(90deg, transparent 0 119px, rgba(85, 107, 47, 0.06) 119px 120px); }
.bamboo-col.left { left: 0; }
.bamboo-col.right { right: 0; }
.hero-content { position: relative; text-align: center; padding-top: 30px; }
.lantern { display: inline-block; width: 54px; height: 74px; background: radial-gradient(circle at 50% 50%, #c9a468, #8a6a3c); border-radius: 50% / 62% 62% 38% 38%; border: 2px solid #b08d57; position: relative; vertical-align: middle; }
.lantern::before, .lantern::after { content: ""; position: absolute; left: -8px; right: -8px; height: 4px; background: #b08d57; }
.lantern::before { top: 16px; }
.lantern::after { bottom: 16px; }
.lantern .rib { position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: rgba(47, 62, 46, 0.35); }
.lantern-l { margin-right: 40px; }
.lantern-r { margin-left: 40px; }
.scroll { display: inline-block; background: #fffdf5; border: 1px solid #d8d2c0; box-shadow: 0 14px 34px rgba(47, 62, 46, 0.12); padding: 44px 56px; position: relative; vertical-align: middle; }
.scroll::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 8px; background: linear-gradient(180deg, #b08d57, transparent); opacity: 0.6; }
.scroll::after { content: ""; position: absolute; bottom: 0; left: 12px; right: 12px; height: 8px; background: linear-gradient(0deg, #b08d57, transparent); opacity: 0.6; }
.scroll h1 { font-size: 40px; letter-spacing: 14px; font-weight: 400; color: #2f3e2e; font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif; }
.seal { display: inline-block; margin-top: 18px; width: 52px; height: 52px; background: #b08d57; color: #fffdf5; font-size: 26px; line-height: 52px; border-radius: 8px; font-family: 'ZCOOL XiaoWei', serif; }
.hero-slogan { margin: 30px 0 26px; letter-spacing: 8px; color: #556b2f; font-size: 15px; }
.stone-circle { width: 74px; height: 74px; margin: 0 auto 34px; border-radius: 50%; border: 2px solid #b08d57; box-shadow: 0 0 0 8px rgba(176, 141, 87, 0.18), 0 0 0 9px #b08d57; position: relative; }
.stone-circle::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(circle, #b08d57 0 5px, transparent 6px); }
.btn-zen { display: inline-block; border: 1px solid #556b2f; color: #556b2f; padding: 15px 54px; letter-spacing: 8px; font-size: 15px; transition: all .3s; }
.btn-zen:hover { background: #556b2f; color: #f4f1e8; }
.btn-ink { display: inline-block; background: #2f3e2e; color: #f4f1e8; padding: 15px 54px; letter-spacing: 8px; font-size: 15px; transition: all .3s; }
.btn-ink:hover { background: #b08d57; }
.btn-gap { margin-left: 14px; }

.section { padding: 96px 0; }
.section.ink { background: #2f3e2e; color: #e8e4d6; }
.section.zen { background: #efeadd; }
.section-title { text-align: center; margin-bottom: 54px; }
.section-title .en { letter-spacing: 8px; font-size: 12px; color: #b08d57; }
.section-title h2 { font-size: 34px; letter-spacing: 12px; font-weight: 400; margin-top: 8px; font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif; }
.section-title .zen-line { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; color: #b08d57; }
.section-title .zen-line::before, .section-title .zen-line::after { content: ""; width: 60px; height: 1px; background: #b08d57; }
.section.ink .section-title h2 { color: #f4f1e8; }

.paper { background: #fffdf5; border: 1px solid #d8d2c0; box-shadow: 0 12px 30px rgba(47, 62, 46, 0.1); position: relative; }
.paper::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(176, 141, 87, 0.5); pointer-events: none; }
.paper > * { position: relative; }

.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-split .paper img { width: 100%; height: 430px; object-fit: cover; }
.about-split .paper { padding: 14px; }
.about-text h3 { font-size: 28px; letter-spacing: 6px; font-weight: 400; margin-bottom: 20px; font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif; }
.about-text p { color: #57604f; margin-bottom: 16px; }
.about-text .quote { border-left: 2px solid #b08d57; padding-left: 18px; color: #b08d57; letter-spacing: 3px; margin-top: 26px; font-size: 14px; }

.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.room-card.paper { padding: 14px; }
.room-card img { width: 100%; height: 260px; object-fit: cover; }
.room-card .room-inner { padding: 26px 20px 30px; text-align: center; }
.room-card h3 { font-size: 20px; letter-spacing: 6px; font-weight: 400; font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif; }
.room-card .room-en { font-size: 11px; letter-spacing: 4px; color: #b08d57; margin: 6px 0 14px; }
.room-card .price { color: #556b2f; font-size: 20px; letter-spacing: 2px; }
.room-card .price small { font-size: 12px; color: #8b9383; }
.room-card p { font-size: 13px; color: #57604f; margin-top: 12px; }

.facility-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.facility-card { text-align: center; }
.facility-card .lantern { width: 46px; height: 62px; margin: 0 auto 20px; }
.facility-card .lantern::before, .facility-card .lantern::after { left: -6px; right: -6px; }
.facility-card .stone { width: 54px; height: 54px; border-radius: 50%; border: 2px solid #b08d57; margin: 0 auto 20px; box-shadow: 0 0 0 6px rgba(176, 141, 87, 0.18); }
.facility-card h4 { letter-spacing: 6px; font-size: 17px; font-weight: 400; }
.facility-card p { font-size: 12px; color: #57604f; margin-top: 10px; }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gal-item { position: relative; overflow: hidden; }
.gal-item::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255, 253, 245, 0.6); z-index: 2; pointer-events: none; }
.gal-item img { width: 100%; height: 260px; object-fit: cover; transition: transform .5s; }
.gal-item:hover img { transform: scale(1.08); }
.gal-cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(47, 62, 46, 0.82); color: #f4f1e8; text-align: center; padding: 12px; font-size: 13px; letter-spacing: 4px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.blog-card.paper { padding: 14px; }
.blog-card img { width: 100%; height: 220px; object-fit: cover; }
.blog-body { padding: 20px 18px 24px; }
.blog-date { font-size: 12px; color: #b08d57; letter-spacing: 3px; }
.blog-card h4 { font-size: 18px; letter-spacing: 2px; font-weight: 400; margin: 8px 0 10px; }
.blog-card p { font-size: 13px; color: #57604f; margin-bottom: 12px; }
.blog-more { color: #556b2f; font-size: 13px; letter-spacing: 3px; border-bottom: 1px solid #b08d57; padding-bottom: 3px; }
.blog-more:hover { color: #b08d57; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; text-align: center; }
.team-item img { width: 170px; height: 170px; border-radius: 50%; margin: 0 auto 20px; border: 2px solid #b08d57; box-shadow: 0 0 0 8px rgba(176, 141, 87, 0.15); object-fit: cover; }
.team-item h4 { letter-spacing: 6px; font-size: 18px; font-weight: 400; }
.team-item .post { color: #b08d57; letter-spacing: 4px; font-size: 13px; margin: 6px 0 10px; }
.team-item p { font-size: 13px; color: #9db0a0; max-width: 260px; margin: 0 auto; }

.cta { position: relative; padding: 96px 0; text-align: center; overflow: hidden; }
.cta .bamboo-stripes { position: absolute; inset: 0; opacity: 0.12; }
.cta .container { position: relative; }
.cta h2 { font-size: 32px; letter-spacing: 12px; font-weight: 400; margin-bottom: 14px; font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif; }
.cta p { color: #57604f; letter-spacing: 4px; margin-bottom: 34px; }

.footer { background: #2f3e2e; color: #9db0a0; padding: 54px 0 30px; text-align: center; }
.footer .brand { justify-content: center; margin-bottom: 10px; }
.footer .foot-nav { display: flex; justify-content: center; gap: 30px; list-style: none; margin: 18px 0 22px; flex-wrap: wrap; }
.footer .foot-nav a { color: #9db0a0; font-size: 13px; letter-spacing: 4px; }
.footer .foot-nav a:hover { color: #b08d57; }
.footer p { font-size: 12px; letter-spacing: 2px; color: #74866f; }

.banner { position: relative; padding: 150px 0 90px; text-align: center; background: #f4f1e8; overflow: hidden; }
.banner::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 59px, rgba(85, 107, 47, 0.05) 59px 60px); }
.bamboo-col.left { left: 0; }
.bamboo-col.right { right: 0; }
.banner h1 { position: relative; font-size: 38px; letter-spacing: 14px; font-weight: 400; font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif; }
.banner .en { position: relative; color: #b08d57; letter-spacing: 8px; font-size: 12px; margin-top: 14px; }
.banner .zen-line { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; color: #b08d57; }
.banner .zen-line::before, .banner .zen-line::after { content: ""; width: 60px; height: 1px; background: #b08d57; }

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; text-align: center; }
.value-card.paper { padding: 44px 26px; }
.value-card .stone { width: 58px; height: 58px; border-radius: 50%; border: 2px solid #b08d57; margin: 0 auto 20px; box-shadow: 0 0 0 7px rgba(176, 141, 87, 0.16); }
.value-card h4 { letter-spacing: 6px; font-size: 18px; font-weight: 400; margin-bottom: 10px; }
.value-card p { font-size: 13px; color: #57604f; }

.port-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px; }
.port-item.paper { padding: 14px; }
.port-item img { width: 100%; height: 400px; object-fit: cover; }
.port-cap { text-align: center; padding: 18px; }
.port-cap h3 { font-size: 22px; letter-spacing: 6px; font-weight: 400; }
.port-cap p { font-size: 13px; color: #b08d57; letter-spacing: 3px; margin-top: 6px; }

.blog-list { max-width: 900px; margin: 0 auto; }
.blog-post.paper { display: grid; grid-template-columns: 300px 1fr; gap: 26px; padding: 16px; margin-bottom: 36px; }
.blog-post img { width: 100%; height: 220px; object-fit: cover; }
.blog-post h3 { font-size: 22px; letter-spacing: 3px; font-weight: 400; margin: 10px 0 12px; }
.blog-post p { font-size: 14px; color: #57604f; margin-bottom: 14px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contact-info h3 { font-size: 26px; letter-spacing: 6px; font-weight: 400; margin-bottom: 28px; font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif; }
.info-line { display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start; }
.info-ico { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #b08d57; display: flex; align-items: center; justify-content: center; color: #b08d57; flex: none; font-size: 17px; }
.info-line h4 { font-size: 15px; letter-spacing: 3px; }
.info-line p { font-size: 13px; color: #57604f; }
.contact-form.paper { padding: 18px; }
.contact-form-inner { padding: 26px 20px; }
.contact-form h3 { font-size: 22px; letter-spacing: 6px; font-weight: 400; margin-bottom: 26px; text-align: center; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-size: 13px; letter-spacing: 3px; margin-bottom: 8px; }
.form-row input, .form-row textarea { width: 100%; border: 1px solid #d8d2c0; background: #fbf8ee; padding: 13px; font-family: inherit; color: #2f3e2e; }
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: #b08d57; }
.form-row textarea { height: 130px; resize: vertical; }
.btn-submit { width: 100%; background: #2f3e2e; color: #f4f1e8; border: none; padding: 15px; font-family: inherit; font-size: 15px; letter-spacing: 8px; cursor: pointer; transition: all .3s; }
.btn-submit:hover { background: #b08d57; }
.map-box { margin-top: 60px; height: 340px; border: 1px solid #d8d2c0; background: #efeadd; position: relative; display: flex; align-items: center; justify-content: center; }
.map-box::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(85, 107, 47, 0.08) 39px 40px); }
.map-pin { width: 42px; height: 42px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #556b2f; border: 2px solid #b08d57; position: relative; }
.map-pin::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #b08d57; position: absolute; left: 14px; top: 14px; }
.map-text { position: absolute; bottom: 22px; font-size: 13px; letter-spacing: 4px; color: #57604f; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .topbar.open .nav-wrap { height: auto; flex-wrap: wrap; padding: 14px 0; }
  .topbar.open .nav-links { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .hero { padding: 130px 0 80px; }
  .scroll h1 { font-size: 28px; letter-spacing: 8px; }
  .scroll { padding: 30px 34px; }
  .lantern-l { margin-right: 16px; }
  .lantern-r { margin-left: 16px; }
  .bamboo-col { width: 44px; }
  .about-split, .contact-grid, .blog-post.paper { grid-template-columns: 1fr; }
  .room-grid, .blog-grid, .team-grid, .value-grid { grid-template-columns: 1fr; }
  .facility-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .port-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .about-split .paper img { height: 300px; }
}


/* ===== CMS helpers ===== */
.form-alert{padding:12px 16px;border-radius:8px;margin:0 0 16px;font-size:.92rem;line-height:1.6}
.form-alert-ok{background:rgba(46,160,67,.08);border:1px solid rgba(46,160,67,.35);color:#2ea043}
.form-alert-err{background:rgba(220,53,69,.08);border:1px solid rgba(220,53,69,.35);color:#dc3545}
.form-alert ul{margin:0;padding-left:18px}
.cms-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:44px 0 0}
.cms-pager a,.cms-pager span{min-width:38px;padding:8px 13px;border:1px solid rgba(128,128,128,.35);border-radius:6px;text-align:center;text-decoration:none;color:inherit}
.cms-pager .active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.detail-page{max-width:1100px;margin:0 auto;padding:72px 24px}
.detail-media{width:100%;max-height:520px;object-fit:cover;border-radius:14px;margin-bottom:26px;display:block}
.detail-title{font-size:clamp(26px,3vw,38px);line-height:1.3;margin-bottom:12px}
.detail-meta{color:#777;font-size:.95rem;margin-bottom:20px}
.detail-body{line-height:1.9;color:#444}
.detail-body p{margin-bottom:1em}
.detail-body img{max-width:100%;height:auto;border-radius:10px}
.detail-back{display:inline-block;margin-top:28px;padding:11px 26px;border:1px solid rgba(128,128,128,.4);border-radius:999px;text-decoration:none;color:inherit}
/* ===== 深色 banner 标题白字（避免 h1 与背景同色不可读） ===== */
.banner--ink h1,.banner--purple h1,.banner--coral h1{color:#fff}
/* ===== 阅读全文按钮（硬边 neo-brutalist 风格） ===== */
.news-item .more{display:inline-block;margin-top:14px;padding:10px 20px;background:var(--c-ink);color:#fff;border:var(--border-2);box-shadow:var(--shadow-sm);font-family:var(--font-en);font-weight:800;font-size:.85rem;letter-spacing:.02em;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.news-item .more:hover{background:var(--c-coral);transform:translate(-2px,-2px);box-shadow:var(--shadow)}
/* ===== 留言板一行一个 input（01 翰墨轩） ===== */
.form-grid{grid-template-columns:1fr}