/* 小样 B —— 日光经幡（Sunlight through prayer flags） */

.hero-b{
  height:100vh;min-height:760px;padding-top:72px;
  display:grid;grid-template-columns:42fr 58fr;
}

/* 左：奶油底、三色旗柱、悬挂的产品照 */
.hero-left{
  position:relative;display:grid;grid-template-rows:1fr auto;
  padding:36px 48px 52px;background:var(--cream);overflow:hidden;
}
.flags{
  position:absolute;top:0;right:0;bottom:0;width:126px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:start;
  pointer-events:none;
}
.flags i{display:block;width:100%;transform-origin:top center}
.flags::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--line-strong);
}
.flags i{background-image:linear-gradient(180deg,rgba(255,255,255,.20),rgba(9,16,12,.06))}
.f1{height:88%;background-color:#e9dcc0;box-shadow:inset 0 -40px 60px -50px rgba(9,16,12,.6)}
.f2{height:79%;background-color:var(--brass);box-shadow:inset 0 -60px 80px -60px rgba(9,16,12,.45)}
.f3{height:94%;background-color:#8fa894;box-shadow:inset 0 -50px 70px -55px rgba(9,16,12,.5)}

/* 悬挂的产品卡：一根细线 + 一张照片 */
.hang{position:relative;justify-self:end;align-self:start;width:246px;margin-right:44px}
.hang .wire{width:1px;height:60px;margin:0 auto;background:var(--line-strong)}
.hang .card{
  background:var(--bone);padding:10px 10px 0;border:1px solid var(--line);
  box-shadow:0 30px 70px -40px rgba(9,16,12,.5);
  transform-origin:top center;
}
.hang .card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hang .card figcaption{
  padding:9px 2px 11px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55);
  display:flex;justify-content:space-between;gap:6px;
}

.hero-left .copy{position:relative;z-index:2;max-width:100%}
.hero-left h1{margin:0 0 18px;font-size:clamp(34px,3.35vw,52px);line-height:1.12}
.hero-left .lede{margin:0 0 26px;font-size:16px;line-height:1.85;color:var(--ink-70);max-width:440px}

/* 右：整幅 AI 氛围图，图内零文字 */
.hero-right{position:relative;overflow:hidden;background:var(--cream-2)}
.hero-right .shot{position:absolute;inset:0 0 30px 0;overflow:hidden}
.hero-right img{
  width:100%;height:100%;object-fit:cover;object-position:center 52%;
  filter:brightness(1.18) saturate(.93) contrast(1.02);
  transform:scale(1.02);
}
.hero-right .veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,246,238,.12) 0%,rgba(250,246,238,.02) 50%,rgba(247,243,234,.26) 100%);
}
.hero-right .ai-tag{
  position:absolute;left:24px;right:24px;bottom:0;height:30px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);
}
.hero-right .ai-tag em{font-style:normal;letter-spacing:.16em}

/* ---------- 商品段：六张色卡 ---------- */
.product-b{
  display:grid;grid-template-columns:54fr 46fr;
  border-top:1px solid var(--line);
}
.swatches{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1px;background:var(--line);
  border-right:1px solid var(--line);
}
.swatch-card{
  position:relative;padding:16px;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--c);overflow:hidden;min-height:220px;
  transition:transform .5s var(--ease);
}
.swatch-card::after{
  content:'';position:absolute;inset:0;background:rgba(250,246,238,.0);transition:background .4s var(--ease);
}
.swatch-card:hover::after{background:rgba(250,246,238,.12)}
.swatch-card .num{font-size:10px;letter-spacing:.14em;font-variant-numeric:tabular-nums;opacity:.62}
.swatch-card .nm{display:block;font-size:15px;line-height:1.4}
.swatch-card .en{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.56;margin-top:4px}
.swatch-card[data-tone="dark"]{color:#f7f3ea}
.swatch-card[data-tone="light"]{color:var(--ink)}

.product-b .panel{padding:80px 64px;display:flex;flex-direction:column;justify-content:center}

@media (max-width:1180px){
  .product-b .panel{padding:64px 40px}
  .hang{width:214px;margin-right:54px}
}
@media (max-width:900px){
  .hero-b{height:auto;min-height:0;padding-top:64px;grid-template-columns:1fr}
  .hero-right{order:-1;height:56vh;min-height:340px}
  .hero-left{padding:28px 20px 48px;min-height:470px}
  .hang{width:172px;margin-right:46px;margin-top:4px}
  .hang .wire{height:40px}
  .flags{width:88px}
  .hero-left .copy{padding-right:84px}
  .hero-right .ai-tag{left:20px;right:20px;justify-content:flex-start;font-size:9px;letter-spacing:.2em}
  .hero-right .ai-tag em{display:none}
  .product-b{grid-template-columns:1fr}
  .swatches{border-right:0;border-bottom:1px solid var(--line)}
  .product-b .panel{padding:48px 20px 64px}
  .swatch-card{padding:12px}
  .swatch-card .nm{font-size:13px}
  .swatch-card .en{display:none}
}