/* 香水调香 · 首页样式
   设计基准：1440 × 2160（视觉稿 1024×1536 按 2:3 归一）
   分区高度按 03-ui/ui-spec.md 的预算落位 */

@import url("tokens.css");


*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: 0.02em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

.wrap { width: min(var(--wrap), 100% - 64px); margin-inline: auto; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--dark);
  color: var(--on-dark);
  border-radius: 4px;
  font-size: 13px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-sm { padding: 8px 18px; font-size: 13px; }
.btn-solid { background: var(--accent); color: #fdf6ec; }
.btn-solid:hover, .btn-solid:focus-visible { background: #74402a; }
.btn-ghost { border-color: rgba(243, 231, 214, 0.42); color: var(--on-dark); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--on-dark); background: rgba(243, 231, 214, 0.08); }
.btn-line { border-color: rgba(138, 79, 49, 0.45); color: var(--accent); }
.btn-line:hover, .btn-line:focus-visible { background: rgba(138, 79, 49, 0.08); border-color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------- 页头 M0 */
.site-header { background: var(--cream); position: relative; z-index: 20; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 64px;
  padding-left: 18px;
}
.header-rule { width: 1px; height: 22px; background: rgba(58, 42, 30, 0.22); }
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 19px;
  height: 19px;
  flex: none;
  border-radius: 50% 50% 50% 2px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  transform: rotate(-45deg);
}
.brand-name { font-family: var(--serif); font-size: 27px; letter-spacing: 0.05em; }

.site-nav { display: flex; align-items: center; gap: 28px; margin-left: 84px; }
.site-nav a {
  padding: 6px 0;
  font-size: 13.5px;
  color: #5d4838;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] {
  color: var(--accent);
  border-color: currentColor;
}
.header-cta {
  margin-left: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--accent-line);
  font-size: 13px;
  color: #4a3526;
}
.header-cta:hover, .header-cta:focus-visible { background: none; border-color: var(--accent); color: var(--accent); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 36px;
  padding: 8px 9px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle-bar { display: block; height: 1.5px; background: var(--accent); border-radius: 2px; }

/* --------------------------------------------------------------- 首屏 M1 */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--on-dark);
  background: linear-gradient(102deg, #2b1a10 0%, #4a2f1c 52%, #7d5735 100%);
}
.hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 72%;
  background: url("../images/hero-wide.jpg") right center / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--mask-shade) 26%, var(--mask-solid) 46%);
  mask-image: linear-gradient(to right, transparent 0%, var(--mask-shade) 26%, var(--mask-solid) 46%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 407px;
  padding: 36px 0 20px;
}
.hero-copy { max-width: 470px; margin-left: 18px; }
.hero h1 { font-size: 58px; line-height: 1.12; letter-spacing: 0.1em; }
.hero-text {
  margin-top: 19px;
  font-size: 16px;
  line-height: 2;
  color: rgba(243, 231, 214, 0.8);
}
.hero-lead { color: #f0dcbe; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
.hero-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.hero-stats .stat { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(243, 231, 214, 0.7); }
.hero-stats .stat + .stat { padding-left: 14px; border-left: 1px solid rgba(243, 231, 214, 0.22); }
.hero-stats dt, .hero-stats dd { display: flex; align-items: baseline; gap: 4px; }
.hero-stats dd a { border-bottom: 1px solid rgba(243, 231, 214, 0.35); }
.hero-stats dd a:hover, .hero-stats dd a:focus-visible { color: var(--ink-invert); border-color: var(--ink-invert); }
.hero-stats strong { font-family: var(--serif); font-size: 16px; color: #f1dfc4; font-weight: 600; }
.stat-icon { width: 16px; height: 16px; flex: none; color: var(--accent-soft); }

/* ------------------------------------------------------------- 通用区块 */
.section-head.center { max-width: 780px; margin: 0 auto 20px; text-align: center; }
.section-head h2 { font-size: 34px; line-height: 1.25; }
.section-head.center h2::before,
.section-head.center h2::after {
  content: "";
  display: inline-block;
  width: 46px;
  height: 1px;
  margin: 0 18px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--accent-line));
}
.section-head.center h2::after { background: linear-gradient(90deg, var(--accent-line), transparent); }
.section-sub { margin-top: 9px; font-size: 13px; line-height: 1.75; color: var(--ink-2); }

/* ----------------------------------------------------- 分类索引 M2 */
.categories { padding: 26px 0 26px; }
.index-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.index-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 8px 14px;
  text-align: center;
  background: var(--cream-2);
  border: 1px solid rgba(58, 42, 30, 0.08);
  border-radius: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.index-card:hover, .index-card:focus-visible { border-color: rgba(138, 79, 49, 0.45); transform: translateY(-2px); }
.index-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.index-body { display: block; margin-top: 9px; }
.index-name { display: block; font-family: var(--serif); font-size: 16.5px; }
.index-desc { display: block; margin-top: 5px; font-size: 12px; line-height: 1.65; color: var(--ink-2); }

/* ----------------------------------------------------- 三调结构 M3 */
body { overflow-x: clip; }
.notes { position: relative; padding: 18px 0 30px; min-height: 312px; }
.notes-grid { display: block; }
.notes h2 { font-size: 30px; line-height: 1.3; }
.notes-main { max-width: 900px; }
.notes-lead { margin-top: 9px; max-width: 560px; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.notes-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 22px; }
.note-stage {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e8d8c3;
  color: #6b4a30;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.note-col p + p, .note-col .note-stage + p { margin-top: 10px; }
.note-col > p:last-child { font-size: 12px; line-height: 1.75; color: var(--ink-2); }
.note-block {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px dashed rgba(138, 79, 49, 0.3);
  font-size: 12px;
  line-height: 1.7;
  color: #6b5340;
}
.note-block svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.notes-media {
  display: none;
  position: absolute;
  top: 26px;
  right: max(0px, calc((100vw - 1440px) / 2));
  width: clamp(280px, 31.6vw, 456px);
  margin: 0;
}
.notes-media img {
  width: 100%;
  aspect-ratio: 334 / 192;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
}

/* ----------------------------------------------------- 香材图鉴 M4 */
.materials { padding: 12px 0 28px; }
.materials .section-head { margin-bottom: 16px; }
.materials .section-head h2 { font-size: 30px; }
.material-row { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 22px; align-items: center; }
.material-card { display: grid; grid-template-columns: 68px 1fr; gap: 11px; align-items: start; }
.material-card img { width: 68px; height: 68px; object-fit: cover; border-radius: 6px; }
.material-card h3 { font-size: 15px; }
.material-origin { margin-top: 3px; font-size: 11px; color: var(--accent); letter-spacing: 0.02em; }
.material-desc { margin-top: 5px; font-size: 11.5px; line-height: 1.65; color: var(--ink-2); }
.material-cta { justify-self: end; }

/* ----------------------------------------------------- 配方示例 M5 */
.recipe { position: relative; padding: 4px 0 8px; }
.recipe-photo {
  display: none;
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 12px;
  width: 134px;
  margin: 0;
  overflow: hidden;
  border-radius: 0 8px 8px 0;
}
.recipe-photo img { width: 100%; height: 100%; object-fit: cover; }
.recipe-grid {
  display: grid;
  grid-template-columns: 1fr 730px;
  gap: 10px;
  align-items: center;
  padding-left: 0;
}
.recipe-right { display: flex; flex-direction: column; }
.recipe-intro h2 { font-size: 26px; line-height: 1.3; }
.recipe-intro p { margin-top: 7px; font-size: 12px; line-height: 1.75; color: var(--ink-2); }
.recipe-panel { padding: 12px 22px 10px; background: var(--cream-3); border-radius: 10px; }
.recipe-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.recipe-col h3 { font-size: 14.5px; }
.recipe-col ul { margin-top: 8px; }
.recipe-col li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: #58432f;
}
.recipe-col li + li { margin-top: 2px; }
.recipe-col li b { font-family: var(--serif); font-weight: 600; color: var(--accent); }
.ratio {
  grid-column: 1 / -1;
  height: 3px;
  margin: 4px 0 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--w), rgba(58, 42, 30, 0.14) var(--w));
}
.ratio-30 { --w: 30%; }
.ratio-27 { --w: 27%; }
.ratio-20 { --w: 20%; }
.ratio-8 { --w: 8%; }
.ratio-6 { --w: 6%; }
.ratio-5 { --w: 5%; }
.ratio-4 { --w: 4%; }
.recipe-col > p { margin-top: 4px; font-size: 11px; line-height: 1.65; color: var(--ink-2); }
.recipe-note {
  margin-top: 6px;
  padding-left: 2px;
  font-size: 11px;
  color: #6b5340;
}

/* ----------------------------------------------------- 入门路径 M6 */
.path { padding: 12px 0 12px; }
.path .section-head { margin-bottom: 14px; }
.path .section-head h2 { font-size: 28px; }
.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.path-step {
  padding-top: 8px;
  border-top: 1px dashed rgba(138, 79, 49, 0.32);
}
.path-num { display: block; font-family: var(--serif); font-size: 24px; line-height: 1; color: rgba(138, 79, 49, 0.42); }
.path-step h3 { margin-top: 5px; font-size: 15px; }
.path-step p { margin-top: 3px; font-size: 11.5px; line-height: 1.65; color: var(--ink-2); }

/* ----------------------------------------------------- 经典香水 M7 */
.collection { padding: 29px 0 32px; }
.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 24px; align-items: center; }
.collection .section-head { margin-bottom: 20px; }
.collection-item { display: grid; grid-template-columns: 96px 1fr; gap: 13px; align-items: center; }
.collection-item img { width: 104px; height: 132px; object-fit: cover; object-position: center; border-radius: 6px; }
.collection-item h3 { font-size: 19px; }
.collection-tag { margin-top: 4px; font-size: 11px; color: var(--accent); letter-spacing: 0.04em; }
.collection-desc { margin-top: 6px; font-size: 11.5px; line-height: 1.7; color: var(--ink-2); }
.collection-cta { justify-self: end; }

/* ----------------------------------------------------------- 页脚 M8 */
.site-footer { background: var(--dark); color: #e8dccb; }
.footer-inner { display: flex; align-items: center; gap: 28px; min-height: 104px; padding: 14px 0; }
.footer-brand { max-width: 330px; }
.footer-logo { font-family: var(--serif); font-size: 19px; letter-spacing: 0.08em; }
.footer-tagline { margin-top: 5px; font-size: 10.5px; line-height: 1.6; color: rgba(232, 220, 203, 0.6); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; font-size: 12px; }
.footer-nav a { color: rgba(232, 220, 203, 0.78); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--ink-invert); text-decoration: underline; text-underline-offset: 4px; }
.footer-copy { font-size: 10.5px; color: rgba(232, 220, 203, 0.48); white-space: nowrap; }

/* --------------------------------------------------------- 响应式 */
@media (max-width: 1200px) {
  .notes-media { display: none; }
  .notes-media img { border-radius: 8px; aspect-ratio: 334 / 192; }
  .notes-main { max-width: none; }
  .index-grid { grid-template-columns: repeat(4, 1fr); }
  .material-row { grid-template-columns: repeat(2, 1fr); }
  .material-cta { justify-self: start; grid-column: 1 / -1; }
  .recipe-grid { grid-template-columns: 1fr; gap: 18px; padding-left: 0; }
  .recipe-photo { display: none; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .collection-cta { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 980px) {
  .header-inner { gap: 16px; }
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 32px 16px;
    background: var(--cream-2);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(58, 42, 30, 0.12);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 11px 0; border-bottom: 1px solid rgba(58, 42, 30, 0.08); }
  .site-nav a:last-child { border-bottom: 0; }
  .header-cta { margin-left: 0; }
  .hero-inner { min-height: 0; padding: 34px 0 30px; }
  .hero-media { width: 100%; opacity: 0.42; -webkit-mask-image: none; mask-image: none; }
  .hero-copy { max-width: 560px; }
  .hero h1 { font-size: 46px; }
  .notes-grid { display: block; }
  .notes-media { order: initial; }
}

@media (max-width: 900px) {
  .recipe-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .wrap { width: min(var(--wrap), 100% - 36px); }
  .hero h1 { font-size: 38px; }
  .hero-sub { font-size: 17px; }
  .hero-text { font-size: 13px; }
  .hero-stats { gap: 18px; }
  .section-head h2, .notes h2, .materials .section-head h2 { font-size: 24px; }
  .notes-cols { grid-template-columns: 1fr; gap: 14px; }
  .index-grid { grid-template-columns: repeat(2, 1fr); }
  .material-row { grid-template-columns: 1fr; }
  .material-cta { justify-self: start; }
  .recipe-cols { grid-template-columns: repeat(2, 1fr); }
  .path-grid { grid-template-columns: 1fr; gap: 14px; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-cta { justify-self: start; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 0; }
  .footer-nav { margin-left: 0; }
  .footer-copy { white-space: normal; }
}

@media (max-width: 520px) {
  .header-cta { display: none; }
  .header-inner { padding-left: 0; gap: 12px; }
  .hero-stats { gap: 10px; }
  .hero-stats .stat { font-size: 11.5px; }
  .hero-stats .stat + .stat { padding-left: 10px; }
  .material-card { grid-template-columns: 64px 1fr; }
  .material-card img { width: 64px; height: 64px; }
  .collection-item { grid-template-columns: 84px 1fr; }
  .collection-item img { width: 84px; height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* =================================================================
   数据对接补充（site 23 香水调香）
   导航下拉 / 页脚四栏 / 首页动态区块的少量补充样式，
   只新增选择器，不改动上文的版式预算。
   ================================================================= */

/* ------------------------------------------------- 导航下拉（分类子项） */
.site-nav { flex-wrap: wrap; }
.site-nav .nav-item { position: relative; }
.site-nav .nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret {
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.6;
}
.site-nav .sub-nav {
  position: absolute;
  left: -14px;
  top: calc(100% + 6px);
  z-index: 40;
  display: none;
  min-width: 178px;
  max-height: 360px;
  overflow-y: auto;
  padding: 8px 0;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(58, 42, 30, 0.14);
}
.site-nav .sub-nav a {
  display: block;
  padding: 7px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  border-bottom: 0;
  white-space: nowrap;
}
.site-nav .sub-nav a:hover,
.site-nav .sub-nav a:focus-visible { color: var(--accent); background: rgba(138, 79, 49, 0.06); }
.site-nav .nav-item:hover > .sub-nav { display: block; }

/* ---------------------------------------------------------- 页脚四栏 */
.site-footer .footer-inner {
  align-items: flex-start;
  gap: 26px 40px;
  padding: 30px 0 20px;
  min-height: 0;
}
.site-footer .footer-brand { flex: 1 1 250px; min-width: 210px; max-width: 340px; }
.site-footer .footer-logo a { color: var(--on-dark); }
.site-footer .footer-logo a:hover { color: var(--ink-invert); }
.site-footer .footer-col { flex: 1 1 150px; min-width: 140px; }
.footer-title {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent-soft);
}
.footer-col ul { margin-top: 8px; }
.footer-col li + li { margin-top: 2px; }
.footer-col a {
  display: block;
  padding: 3px 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(232, 220, 203, 0.72);
}
.footer-col a:hover, .footer-col a:focus-visible { color: var(--ink-invert); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 12px 0 20px;
  border-top: 1px solid var(--line-invert);
  font-size: 10.5px;
  color: rgba(232, 220, 203, 0.5);
}
.footer-beian { color: rgba(232, 220, 203, 0.62); }

/* ------------------------------------------------ 首页动态区块补充 */
.note-link a,
.recipe-col-link,
.path-link,
.material-body h3 a,
.collection-item h3 a {
  color: inherit;
  border-bottom: 1px solid transparent;
}
.note-link a { color: var(--accent); border-bottom-color: var(--accent-line); }
.note-link a:hover,
.recipe-col-link:hover,
.path-link:hover,
.material-body h3 a:hover,
.collection-item h3 a:hover { color: var(--accent); }
.recipe-col ul li a { color: #58432f; }
.recipe-col ul li a:hover { color: var(--accent); }
.recipe-col li span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1200px) {
  .site-nav { gap: 16px; margin-left: 24px; }
}
@media (max-width: 980px) {
  .site-nav { gap: 0; margin-left: 0; }
  /* 移动端：展开菜单后子分类以内嵌分组形式显示 */
  .site-nav .sub-nav {
    display: block !important;
    position: static;
    min-width: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: 0 0 6px 14px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav .nav-item { border-bottom: 1px solid rgba(58, 42, 30, 0.08); }
  .site-nav .sub-nav a {
    padding: 8px 0;
    border-bottom: 0;
    font-size: 13px;
    color: #6d563f;
  }
  .nav-caret { display: none; }
}
@media (max-width: 760px) {
  .site-footer .footer-inner { gap: 16px; }
  .site-footer .footer-col { flex: 1 1 45%; min-width: 130px; }
  .footer-bottom { justify-content: flex-start; }
}

/* 中等宽度：顶栏改为可换行，避免品牌与分类导航互相挤压 */
@media (max-width: 1280px) {
  .header-inner {
    height: auto;
    min-height: 64px;
    padding: 9px 0 9px 18px;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
  }
  .brand-name { font-size: 22px; }
  .header-rule { display: none; }
  .site-nav { gap: 8px 14px; margin-left: 14px; }
  .site-nav a { padding: 3px 0; font-size: 13px; }
}