/* ============================================================
   珍友圈 · 文化内核 + 内容体系 + 兴趣分圈（lifestyle 层）
   pearl-lifestyle.css —— 叠加层，不动 pearl.css
   暖调铁律：品牌/交互元素只用香槟金→玫瑰金→腮红→复古金
   ============================================================ */

/* ---------- 三层价值 · 文化内核（philosophy） ---------- */
.philosophy {
  position: relative;
  margin: 4px 0 2px;
  padding: 30px 22px 28px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(232,207,168,.22), transparent 50%),
    radial-gradient(120% 100% at 100% 100%, rgba(232,207,168,.16), transparent 55%),
    linear-gradient(160deg, #fffdf9 0%, #fbf4ea 55%, #f8eee0 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.philosophy::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  opacity: .5;
}
.ph-head { text-align: center; position: relative; }
.ph-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .68rem; letter-spacing: .24em; color: var(--rose-gold-deep);
  text-transform: uppercase; margin-bottom: 12px;
}
.ph-kicker::before, .ph-kicker::after {
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose-gold));
}
.ph-kicker::after { background: linear-gradient(90deg, var(--rose-gold), transparent); }
.ph-head h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: 1.5rem; line-height: 1.35; letter-spacing: .02em; color: var(--ink);
  margin-bottom: 10px;
}
.ph-head p {
  font-size: .82rem; line-height: 1.8; color: #5a4a45;
  max-width: 460px; margin: 0 auto 24px; text-wrap: balance;
}
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.ph-card {
  background: rgba(255,253,249,.8);
  border: 1px solid rgba(201,160,119,.16);
  border-radius: var(--radius);
  padding: 20px 14px 18px;
  text-align: center;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
}
.ph-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(201,160,119,.4); }
.ph-ico {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 12px;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #fdf6ec 34%, #f3e3d1 72%, #e9d3b6 100%);
  box-shadow: inset 0 -3px 6px rgba(180,130,80,.18), 0 4px 12px -4px rgba(180,130,80,.35);
  color: var(--rose-gold-deep);
  position: relative;
}
.ph-ico::after {
  content: ''; position: absolute; top: 12%; left: 22%;
  width: 18%; height: 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.ph-card h4 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.ph-card p { font-size: .8rem; color: var(--rose-gold-deep); margin-top: 4px; font-weight: 600; }
.ph-card small {
  display: block; font-size: .72rem; color: #54433d;
  margin-top: 9px; letter-spacing: .04em; line-height: 1.6;
}

/* ---------- 四大内容栏目（content-grid） ---------- */
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.content-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 16px; border-radius: var(--radius);
  background: linear-gradient(165deg, #fffdf9, #fbf5ec);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm, 0 4px 14px -8px rgba(150,110,70,.16));
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
}
.content-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(201,160,119,.45); }
.content-card::after {
  content: ''; position: absolute; right: -26px; top: -26px;
  width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,207,168,.28), transparent 70%);
}
.ct-ico {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #fff, #f7ecdb 60%, #ecd8bd);
  color: var(--rose-gold-deep); box-shadow: inset 0 -2px 5px rgba(180,130,80,.16);
}
.content-card h4 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.content-card p { font-size: .74rem; color: #5a4a45; line-height: 1.6; }
.ct-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ct-tags span {
  font-size: .62rem; color: var(--rose-gold-deep);
  padding: 3px 9px; border-radius: 999px;
  background: rgba(201,160,119,.12); border: 1px solid rgba(201,160,119,.22);
}

/* ---------- 兴趣分圈（interest-grid） ---------- */
.interest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.interest-card {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 14px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm, 0 4px 14px -8px rgba(150,110,70,.16));
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.interest-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(201,160,119,.45); }
.interest-card.int-main {
  background: linear-gradient(160deg, #fdf7ee, #f6ead7);
  border-color: rgba(201,160,119,.5);
  box-shadow: 0 8px 24px -10px rgba(180,120,60,.28);
}
.interest-card.int-main::before {
  content: '主理'; position: absolute; top: 10px; right: 10px;
  font-size: .58rem; letter-spacing: .08em; color: #fff;
  padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(120deg, #d8ab74, #c08a4e);
}
.int-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #fff, #f7ecdb 58%, #ead5b8);
  color: var(--rose-gold-deep); box-shadow: inset 0 -2px 5px rgba(180,130,80,.16);
}
.int-txt { min-width: 0; }
.int-txt h4 { font-family: var(--serif); font-size: .98rem; font-weight: 700; color: var(--ink); }
.int-txt p { font-size: .7rem; color: #5a4a45; line-height: 1.55; margin-top: 3px; }

/* ---------- 内容中心页（#/content） ---------- */
.content-hero {
  position: relative; text-align: center; padding: 26px 20px 24px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, rgba(232,207,168,.26), transparent 55%),
    linear-gradient(160deg, #fffdf9, #f8efe0);
  border: 1px solid var(--line); box-shadow: var(--shadow-soft);
  margin-bottom: 4px;
}
.content-hero .ch-kicker {
  font-size: .66rem; letter-spacing: .26em; color: var(--rose-gold-deep);
  text-transform: uppercase; margin-bottom: 10px;
}
.content-hero h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.content-hero p { font-size: .8rem; color: var(--ink-2); line-height: 1.7; max-width: 430px; margin: 0 auto; }
.content-col { margin-top: 18px; }
.content-col + .content-col { margin-top: 22px; }
.col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0 2px; }
.col-head .col-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #fff, #f7ecdb 60%, #ecd8bd);
  color: var(--rose-gold-deep);
}
.col-head h4 { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.col-head small { font-family: var(--sans); font-size: .62rem; color: var(--ink-2); letter-spacing: .14em; text-transform: uppercase; display: block; }
.article-card {
  padding: 16px 16px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm, 0 4px 14px -8px rgba(150,110,70,.16));
  margin-bottom: 10px;
  transition: transform .3s, box-shadow .3s;
}
.article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.article-card .a-tag {
  display: inline-block; font-size: .58rem; letter-spacing: .06em;
  color: var(--rose-gold-deep); padding: 2px 8px; border-radius: 999px;
  background: rgba(201,160,119,.12); margin-bottom: 8px;
}
.article-card h5 { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.article-card p { font-size: .74rem; color: var(--ink-2); line-height: 1.7; margin-top: 6px; }

/* 成长会员卡（复用 level-card，微调可读性 + 品牌色） */
.level-card.gt .l-desc { color: #5a4a45; font-size: .66rem; }
.level-card.gt .level-badge { color: var(--rose-gold-deep); }

/* 窄屏下 philosophy 三卡 → 竖排保持大气 */
@media (max-width: 380px) {
  .ph-grid { grid-template-columns: 1fr; }
}