/* =========================================================
   克罗心全图鉴 — 编辑排版风（参考 taradash.me 的滚动叙事结构）
   ========================================================= */

/* ---------- 设计变量 ---------- */
:root {
  --bg: #f4f3ef;            /* 米白纸感底色 */
  --bg-dark: #121212;       /* 章节深色底 */
  --ink: #161616;           /* 近黑正文 */
  --ink-soft: #6b6b66;      /* 次级灰 */
  --ink-inverse: #f4f3ef;
  --line: rgba(22, 22, 22, .14);
  --line-inverse: rgba(244, 243, 239, .16);
  --accent: #8c7a4a;        /* 克罗心金 */
  --font-serif: "Noto Serif SC", "Songti SC", serif;
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-latin: "Cinzel", serif;
  --measure: 34em;          /* 窄栏正文最佳行宽 */
  --pad-x: clamp(20px, 6vw, 96px);
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 300;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--bg); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- 导航 ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--pad-x);
  mix-blend-mode: difference;   /* 深浅章节自动反色，编辑感强 */
  color: #fff;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-latin);
  font-size: 14px;
  letter-spacing: .28em;
}

.cross-icon { width: 16px; height: 16px; flex: none; }
.cross-icon--lg { width: 40px; height: 40px; }

.nav__links { display: flex; gap: clamp(16px, 3vw, 40px); }

.nav__links a {
  font-size: 13px;
  letter-spacing: .18em;
  opacity: .75;
  transition: opacity .25s ease;
}
.nav__links a:hover { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--pad-x) 80px;
  position: relative;
}

.hero__overline {
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: .4em;
  color: var(--accent);
  margin-bottom: 32px;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(34px, 6.4vw, 92px);
  line-height: 1.22;
  letter-spacing: .02em;
  max-width: 14em;
}

.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__sub {
  margin-top: 40px;
  max-width: var(--measure);
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-soft);
}

.hero__scroll {
  position: absolute;
  bottom: 36px;
  left: var(--pad-x);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--ink-soft);
}

.hero__scroll span {
  width: 48px;
  height: 1px;
  background: var(--ink-soft);
  display: inline-block;
  animation: pulse-line 2.2s ease-in-out infinite;
}

@keyframes pulse-line {
  0%, 100% { transform: scaleX(.4); transform-origin: left; opacity: .4; }
  50%      { transform: scaleX(1);  transform-origin: left; opacity: 1; }
}

/* ---------- 系列名墙 ---------- */
.wall {
  padding: 140px var(--pad-x);
  border-top: 1px solid var(--line);
}

.wall__label {
  font-size: 12px;
  letter-spacing: .4em;
  color: var(--ink-soft);
  margin-bottom: 36px;
}

.wall__list {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(22px, 3.6vw, 52px);
  line-height: 1.7;
  letter-spacing: .04em;
}

.wall__list span {
  color: var(--accent);
  font-weight: 400;
  margin: 0 .35em;
  font-size: .6em;
  vertical-align: .12em;
}

/* ---------- 导语（窄栏双栏） ---------- */
.intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 6vw, 96px);
  padding: 0 var(--pad-x) 160px;
}

.intro__col p {
  max-width: var(--measure);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 2.1;
  margin-bottom: 1.4em;
}

.intro__col strong { font-weight: 500; }

/* ---------- 通用章节 ---------- */
.section {
  padding: 140px var(--pad-x);
  border-top: 1px solid var(--line);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--ink-inverse);
  border-top: none;
}

.section__head {
  margin-bottom: clamp(48px, 7vw, 96px);
}

.section__obj {
  font-family: var(--font-latin);
  font-size: clamp(40px, 7vw, 110px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  margin-bottom: 16px;
}

.section__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 60px);
  margin-bottom: 20px;
}

.section__note {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: clamp(14px, 1.3vw, 17px);
}

.section--dark .section__note { color: rgba(244, 243, 239, .55); }

/* ---------- 等级图例 ---------- */
.tier-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: clamp(56px, 8vw, 120px);
}

.tier {
  background: var(--bg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .3s ease;
}
.tier:hover { background: #edece6; }

.tier__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
}

.tier__price {
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--accent);
}

.tier__desc {
  font-size: 12px;
  color: var(--ink-soft);
}

/* 深色章节变体 */
.tier-legend--dark { background: var(--line-inverse); border-color: var(--line-inverse); }
.tier-legend--dark .tier { background: var(--bg-dark); }
.tier-legend--dark .tier:hover { background: #1d1d1d; }

/* ---------- 配饰等级表 ---------- */
.grade-table { border-top: 1px solid var(--line); }

.grade-row {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(32px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--line);
}

.grade-row__cat {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.3;
}

/* 产品占位图（后续替换为真实产品照：同名 .jpg 即可） */
.grade-row__meta { display: flex; flex-direction: column; }

.thumb {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #141414;
  margin-bottom: 18px;
  display: block;
  transition: transform .4s ease, box-shadow .4s ease;
}
.thumb:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.18); }

.section--dark .thumb { border-color: var(--line-inverse); }
.series__meta .thumb { margin-bottom: 18px; }

.grade-row__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px clamp(16px, 2.5vw, 40px);
  align-content: start;
}

.grade-row__items li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  transition: transform .3s ease;
}
.grade-row__items li:hover { transform: translateY(-3px); }

.item-name {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
}

.item-price {
  font-family: var(--font-latin);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--accent);
}

/* ---------- 服饰系列（深色章节） ---------- */
.series-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-inverse);
}

.series {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(36px, 4.5vw, 64px) 0;
  border-bottom: 1px solid var(--line-inverse);
}

.series__meta { display: flex; flex-direction: column; }

.series__index {
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--accent);
  margin-bottom: 14px;
}

.series__name {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 40px);
  margin-bottom: 10px;
}

.series__tag {
  font-size: 13px;
  color: rgba(244, 243, 239, .5);
}

.series__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px clamp(16px, 2.5vw, 40px);
  align-content: start;
}

.series__items li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-inverse);
  transition: transform .3s ease;
}
.series__items li:hover { transform: translateY(-3px); }

.series__items .item-name { color: var(--ink-inverse); }

/* ---------- 速查图鉴 ---------- */
.quickref__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.quickref__item {
  border: 1px solid var(--line);
  padding: 16px;
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease;
}

.quickref__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .1);
}

/* 两张速查长图原始宽同为 1260，但高不同（1683 / 1871），
   统一显示高度、等比缩放居中，避免一长一短 */
.quickref__item img {
  display: block;
  margin: 0 auto;
  height: 700px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .quickref__item img { height: 58vh; }
}

.quickref__item figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--ink-soft);
}

/* ---------- 页脚 ---------- */
.footer {
  padding: 140px var(--pad-x) 60px;
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--bg-dark);
  color: var(--ink-inverse);
}

.footer .cross-icon--lg { margin: 0 auto 40px; color: var(--accent); }

.footer__line {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.8;
  margin-bottom: 48px;
}

.footer__nav {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: 56px;
}

.footer__nav a {
  font-size: 13px;
  letter-spacing: .2em;
  opacity: .7;
  transition: opacity .25s ease;
}
.footer__nav a:hover { opacity: 1; }

.footer__copy {
  font-size: 12px;
  color: rgba(244, 243, 239, .4);
  margin-bottom: 24px;
}

.footer__top {
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--accent);
}

/* ---------- 滚动浮现动画 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1);
}

/* 无 JS / 动画失效兜底：内容默认可见，避免出现整页空白 */
.no-js .reveal { opacity: 1; transform: none; }

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.delay-3 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll span { animation: none; }
}

/* ---------- 响应式：移动端 ---------- */
@media (max-width: 720px) {
  .grade-row,
  .series {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .grade-row__items,
  .series__items {
    grid-template-columns: 1fr 1fr;
  }

  .wall { padding: 90px var(--pad-x); }

  .section { padding: 90px var(--pad-x); }

  .nav__links a { font-size: 12px; letter-spacing: .1em; }
}

@media (max-width: 420px) {
  .grade-row__items,
  .series__items { grid-template-columns: 1fr; }
}

/* ---------- 产品卡片缩略图 ---------- */
.item-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin-bottom: 14px;
  background: #141414;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: transform .4s ease, box-shadow .4s ease;
}

.section--dark .item-thumb { border-color: var(--line-inverse); }

.grade-row__items li:hover .item-thumb,
.series__items li:hover .item-thumb {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}

.section--dark .series__items li:hover .item-thumb {
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5);
}