/* ============================================================
   灵兰白茶 · 宋式美学样式
   色彩：月白 / 天青 / 缥色 / 墨色 / 赭石点缀
   气质：简、素、远——少装饰，多留白
   ============================================================ */
:root {
  --paper: #f4f3ee;        /* 月白 */
  --paper-deep: #ecebe4;   /* 深月白 */
  --celadon-bg: #e9efec;   /* 缥色（浅青） */
  --ink: #2c2c2a;          /* 墨色 */
  --ink-soft: #6b6963;     /* 淡墨 */
  --ink-faint: #9c9a92;    /* 极淡墨 */
  --celadon: #7c9a92;      /* 天青（主强调色） */
  --celadon-deep: #5f8178; /* 深天青 */
  --ochre: #8a4529;        /* 赭石（极少量点缀） */
  --seal: #a33a2e;         /* 朱砂（印章专用） */
  --jian: #26221e;         /* 建盏色（页脚） */
  --line: #d5d3ca;         /* 界栏细线 */
  --serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --brush: "Ma Shan Zheng", "Noto Serif SC", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  line-height: 2.1;                 /* 疏朗行距 */
  letter-spacing: 0.06em;
  font-weight: 400;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* ---------------- 导航 ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(244, 243, 238, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  height: 62px;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  height: 38px; width: auto; display: block;
  mix-blend-mode: multiply;
}
.logo-mark--footer {
  height: 32px;
  filter: invert(1);
  mix-blend-mode: screen;
}
.logo-sub { font-size: 10.5px; letter-spacing: 0.32em; color: var(--ink-faint); }
.nav-links { display: flex; gap: 32px; font-size: 14.5px; font-weight: 400; }
.nav-links a { position: relative; padding: 6px 2px; color: var(--ink-soft); transition: color .3s; }
.nav-links a::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px;
  background: var(--celadon-deep); transition: all .3s; transform: translateX(-50%);
}
.nav-links a:hover, .nav-links a.active { color: var(--celadon-deep); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink); }

/* ---------------- 首屏 ---------------- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url("../images/hero-tea-mountain.png") center / cover no-repeat;
  filter: saturate(0.82);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244,243,238,.72) 0%, rgba(244,243,238,.34) 45%, rgba(244,243,238,.88) 100%);
}
.hero-content { position: relative; text-align: center; padding: 96px 24px 64px; z-index: 1; }
.hero-title {
  font-size: clamp(50px, 8.5vw, 88px);
  font-weight: 500;                      /* 收细，瘦金之意 */
  letter-spacing: 0.3em;
  text-indent: 0.3em;                    /* 平衡末字距 */
  color: var(--ink);
}
.hero-en { font-size: 11px; letter-spacing: 0.6em; text-indent: 0.6em; color: var(--ink-faint); margin-top: 10px; }
.hero-divider {
  width: 1px; height: 56px; background: var(--celadon-deep);   /* 竖线代横条，更清瘦 */
  margin: 30px auto 26px;
}
.hero-slogan { font-size: clamp(15px, 2.2vw, 18px); color: var(--ink-soft); letter-spacing: 0.12em; }
.hero-btns { margin-top: 42px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 11px 40px;
  font-family: var(--serif); font-size: 14px; letter-spacing: 0.3em; text-indent: 0.3em;
  border-radius: 2px; transition: all .35s; cursor: pointer;
}
.btn-solid { background: var(--celadon-deep); color: #f4f3ee; }
.btn-solid:hover { background: var(--ink); }
.btn-ghost { border: 1px solid var(--celadon-deep); color: var(--celadon-deep); background: transparent; }
.btn-ghost:hover { background: var(--celadon-deep); color: #f4f3ee; }

/* ---------------- 通用 Section ---------------- */
.section { padding: 120px 0; }                  /* 板块间距拉大，一屏一事 */
.section-alt { background: var(--celadon-bg); } /* 缥色衬底 */
.section-head { margin-bottom: 64px; display: flex; align-items: flex-start; gap: 26px; }
.section-eyebrow {
  writing-mode: vertical-rl;                    /* 竖排英文装饰 */
  font-size: 10px; letter-spacing: 0.4em; color: var(--ink-faint);
  padding-top: 6px;
}
.section-title {
  writing-mode: vertical-rl;                    /* 竖排栏目名——宋版书页 */
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 500; letter-spacing: 0.35em;
  line-height: 1.2;
  border-left: 1px solid var(--line);           /* 界栏细线 */
  padding-left: 20px;
  min-height: 200px;
}
.section-rule { width: 26px; height: 1px; background: var(--ochre); margin: 10px 0; }
.section-lead { color: var(--ink-soft); font-size: 14.5px; letter-spacing: 0.1em; max-width: 520px; padding-top: 14px; }

/* ---------------- 品牌故事 ---------------- */
.story-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: center; }
.story-img-wrap { position: relative; padding: 18px; background: var(--paper); border: 1px solid var(--line); }
.story-img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.story-seal {
  position: absolute; right: -14px; top: -14px;
  background: var(--seal); color: #f4f3ee; font-family: var(--brush);
  padding: 10px 11px; font-size: 16px; letter-spacing: 3px;
  writing-mode: vertical-rl; border-radius: 2px;
}
.story-text h3 {
  font-size: 19px; font-weight: 500; letter-spacing: 0.22em;
  color: var(--celadon-deep); margin: 30px 0 8px;
}
.story-text h3:first-child { margin-top: 0; }
.story-text p { color: var(--ink-soft); font-size: 15px; }
.story-note { margin-top: 26px; font-size: 12.5px; color: var(--ochre); border-left: 2px solid var(--ochre); padding-left: 12px; letter-spacing: 0.05em; }

/* ---------------- 白茶系列 ---------------- */
.tea-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.tea-card { background: var(--paper); border: 1px solid var(--line); transition: border-color .35s; }
.tea-card:hover { border-color: var(--celadon-deep); }
.tea-card img { aspect-ratio: 1/1; object-fit: cover; width: 100%; filter: saturate(0.9); }
.tea-card-body { padding: 26px 26px 30px; }
.tea-card h3 { font-size: 22px; font-weight: 500; letter-spacing: 0.3em; }
.tea-card .tea-sub { font-size: 12.5px; color: var(--celadon-deep); letter-spacing: 0.1em; margin: 8px 0 14px; }
.tea-card p { font-size: 14px; color: var(--ink-soft); }
.tea-card .tea-sub::after { content: ""; display: block; width: 22px; height: 1px; background: var(--line); margin-top: 14px; }

/* ---------------- 灵兰征文 ---------------- */
.essay-list { display: flex; flex-direction: column; }
.essay-item {
  background: transparent;
  border: none; border-bottom: 1px solid var(--line);    /* 细线分隔代卡片 */
  padding: 34px 6px 30px; cursor: pointer;
  transition: background .3s;
}
.essay-item:first-child { border-top: 1px solid var(--line); }
.essay-item:hover { background: rgba(124,154,146,.07); }
.essay-item .essay-meta { font-size: 12px; color: var(--celadon-deep); letter-spacing: 0.18em; margin-bottom: 10px; }
.essay-item h3 { font-size: 20px; font-weight: 500; letter-spacing: 0.12em; margin-bottom: 8px; transition: color .3s; }
.essay-item:hover h3 { color: var(--celadon-deep); }
.essay-item p { color: var(--ink-soft); font-size: 14.5px; }
.essay-item .essay-more { float: right; font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.2em; margin-top: 6px; }
.essay-item:hover .essay-more { color: var(--ochre); }
.essay-callout {
  margin-top: 44px; background: transparent;
  border: 1px solid var(--celadon-deep); padding: 26px 32px;
  color: var(--ink-soft); font-size: 14px;
}
.essay-callout strong { color: var(--celadon-deep); font-weight: 500; }

/* ---------------- 灵兰茶器 ---------------- */
.ware-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ware-card {
  background: var(--paper); border: 1px solid var(--line); cursor: pointer;
  transition: border-color .35s;
  display: flex; flex-direction: column;
}
.ware-card:hover { border-color: var(--celadon-deep); }
.ware-card img { aspect-ratio: 1/1; object-fit: cover; width: 100%; filter: saturate(0.9); }
.ware-card-body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.ware-card h3 { font-size: 18px; font-weight: 500; letter-spacing: 0.14em; }
.ware-card .ware-caption { font-size: 13px; color: var(--ink-soft); }
.ware-card .ware-view { font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.22em; margin-top: auto; transition: color .3s; }
.ware-card:hover .ware-view { color: var(--ochre); }

/* ---------------- 联系我们 ---------------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.contact-card {
  background: transparent; text-align: center; padding: 42px 26px;
  border: 1px solid var(--line);
}
.contact-card h4 { font-size: 16px; font-weight: 500; letter-spacing: 0.3em; color: var(--celadon-deep); margin-bottom: 14px; }
.contact-card p { font-size: 13.5px; color: var(--ink-soft); }

/* ---------------- 页脚 ---------------- */
.footer { background: var(--jian); color: rgba(244,243,238,.68); padding: 58px 0 44px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 400; letter-spacing: 0.26em; color: #f4f3ee; }
.footer-copy { font-size: 12.5px; line-height: 2; letter-spacing: 0.04em; }
.footer-top { font-size: 12.5px; color: rgba(244,243,238,.5); letter-spacing: 0.2em; }
.footer-top:hover { color: #f4f3ee; }

/* ---------------- 弹窗 ---------------- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal.open { display: block; }
.modal-mask { position: absolute; inset: 0; background: rgba(38,34,30,.55); backdrop-filter: blur(3px); }
.modal-body {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(740px, calc(100vw - 40px)); max-height: 86vh; overflow-y: auto;
  background: var(--paper); border-radius: 2px; padding: 52px 56px 48px;
}
.modal-body--ware { width: min(880px, calc(100vw - 40px)); padding: 40px; }
.modal-close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none; font-size: 28px; color: var(--ink-faint);
  cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--ochre); }

/* 征文正文 */
.essay-article .essay-meta { color: var(--celadon-deep); font-size: 12.5px; letter-spacing: 0.18em; margin-bottom: 16px; }
.essay-article h3 { font-size: 24px; font-weight: 500; letter-spacing: 0.14em; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.essay-article p { color: var(--ink-soft); margin-bottom: 20px; text-align: justify; }

/* 茶器详情 */
.ware-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.ware-detail img { width: 100%; border: 1px solid var(--line); padding: 12px; background: var(--paper); }
.ware-detail h3 { font-size: 22px; font-weight: 500; letter-spacing: 0.14em; margin-bottom: 16px; }
.ware-detail .ware-caption { color: var(--celadon-deep); font-size: 14px; margin-bottom: 18px; }
.ware-detail .ware-desc { color: var(--ink-soft); font-size: 14px; text-align: justify; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 44px; }
  .tea-grid, .ware-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .section-head { gap: 18px; }
  .section-title { min-height: 150px; }
}
@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 62px; left: 0; right: 0;
    flex-direction: column; background: var(--paper);
    border-bottom: 1px solid var(--line); padding: 12px 28px 22px; gap: 16px;
  }
  .nav-links.open { display: flex; }
  .tea-grid, .ware-grid { grid-template-columns: 1fr; }
  .section { padding: 84px 0; }
  .section-head { flex-direction: row; align-items: flex-start; }
  .section-title { font-size: 22px; min-height: 120px; }
  .modal-body { padding: 40px 26px; }
  .modal-body--ware { padding: 28px 20px; }
  .ware-detail { grid-template-columns: 1fr; }
  .essay-item { padding: 28px 4px 26px; }
}