@charset "UTF-8";
:root { --ink:#20212a; --muted:#6c6d78; --paper:#fffaf7; --pink:#f45b8b; --peach:#ffd6c9; --violet:#6554a6; --line:#eee5e1; --shadow:0 18px 45px rgba(61, 36, 66, .10); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei", Arial, sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
.site-header { position:sticky; top:0; z-index:5; background:rgba(255,250,247,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.header-inner,.content-section,.page-hero,.breadcrumb,.article-page,.subscribe,.site-footer,.hero,.topic-strip,.about { width:min(1160px, calc(100% - 40px)); margin-left:auto; margin-right:auto; }
.header-inner { min-height:74px; display:flex; align-items:center; gap:26px; }
.brand { display:flex; align-items:center; gap:8px; font-size:21px; font-weight:800; letter-spacing:.5px; white-space:nowrap; }
.brand em { display:block; color:var(--pink); font-size:11px; font-style:normal; letter-spacing:2px; line-height:1; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--pink),var(--violet)); }
.nav { display:flex; flex:1; justify-content:center; gap:4px; }
.nav a,.search-chip { display:flex; align-items:center; gap:5px; padding:8px 10px; border-radius:999px; font-size:13px; color:var(--muted); white-space:nowrap; }
.nav a:hover,.search-chip:hover { background:#fff; color:var(--pink); }
.search-chip { border:1px solid var(--line); }
main { padding-top:28px; }
.hero { min-height:440px; position:relative; overflow:hidden; border-radius:28px; background:#302b50; box-shadow:var(--shadow); }
.hero-slides { height:100%; }
.hero-slide { display:none; grid-template-columns:1fr 1.06fr; min-height:440px; }
.hero-slide.is-active { display:grid; }
.hero-copy { align-self:center; padding:54px; color:#fff; background:linear-gradient(135deg,#573454,#322d55); }
.hero-copy h1 { margin:0 0 7px; font-size:15px; line-height:1.2; letter-spacing:1px; color:#ffd2df; }.hero-copy h2,.page-hero h1,.article-header h1 { margin:6px 0 15px; font-size:clamp(30px,4vw,49px); line-height:1.18; }
.hero-media { min-height:280px; }
.eyebrow { margin:0; color:var(--pink); font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.hero-copy .eyebrow { color:#ffd2df; }
.button { display:inline-flex; align-items:center; gap:9px; margin-top:14px; padding:11px 18px; color:#fff; background:var(--pink); border-radius:999px; font-weight:700; }
.slider-dots { position:absolute; left:54px; bottom:28px; display:flex; gap:8px; }
.slider-dots button { border:0; color:#fff; background:rgba(255,255,255,.2); padding:5px 9px; border-radius:12px; cursor:pointer; }
.slider-dots .is-current { background:var(--pink); }
.content-section { margin-top:76px; }
.content-section.compact { margin-top:66px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.section-heading h2,.topic-strip h2,.about h2,.subscribe h2 { margin:3px 0 0; font-size:28px; line-height:1.3; }
.text-link { color:var(--pink); font-weight:700; white-space:nowrap; }
.card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
.compact .card-grid { grid-template-columns:repeat(3,1fr); }
.video-card { min-width:0; display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 7px 18px rgba(46,30,44,.04); }
.cover { position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden; background:#f0e9e7; }
.cover img { transition:transform .35s ease; }
.video-card:hover img { transform:scale(1.04); }
.duration { position:absolute; right:9px; bottom:9px; padding:2px 7px; color:#fff; background:rgba(18,18,28,.7); border-radius:5px; font-size:12px; }
.card-body { flex:1; display:flex; flex-direction:column; padding:15px; }
.card-kicker,.meta { margin:0; color:var(--muted); font-size:12px; }
.card-body h3 { margin:6px 0 8px; font-size:17px; line-height:1.45; }
.card-body p:last-child { margin:0; color:var(--muted); font-size:13px; }
.topic-strip { display:grid; grid-template-columns:.8fr 1.2fr; gap:38px; margin-top:76px; padding:38px; color:#fff; background:linear-gradient(120deg,#514378,#e06e94); border-radius:24px; }
.topic-strip h2 { margin-top:10px; }
.topic-links { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.topic-links a { padding:12px; border-radius:12px; background:rgba(255,255,255,.12); }
.topic-links b,.topic-links span { display:block; }
.topic-links span { font-size:12px; opacity:.86; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:76px; padding:38px 0; }
.about-image { min-height:330px; overflow:hidden; border-radius:22px; }
.about-copy { align-self:center; }
.about-copy p:not(.eyebrow) { color:var(--muted); }
.page-hero { padding:56px 0 36px; text-align:center; }
.page-hero p:last-child { max-width:650px; margin:0 auto; color:var(--muted); }
.breadcrumb { display:flex; flex-wrap:wrap; gap:9px; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; }
.breadcrumb a { color:var(--violet); }
.article-page { max-width:840px; padding-top:50px; }
.article-header { text-align:center; }
.article-header .meta { margin-top:15px; }
.reading-note { display:flex; gap:17px; margin:34px 0; padding:22px; background:#fff0ed; border-radius:16px; }
.reading-note span { color:var(--pink); font-size:24px; }
.reading-note h2 { margin:0; font-size:16px; }
.reading-note p { margin:4px 0 0; color:var(--muted); font-size:14px; }
.story-body { font-size:17px; }
.story-body p { margin:26px 0; }
figure { margin:28px 0; }
figure img { aspect-ratio:16 / 9; border-radius:16px; background:#eee; }
figcaption { margin-top:8px; color:var(--muted); text-align:center; font-size:13px; }
.chapter-end { margin:52px 0 20px; padding:38px; text-align:center; background:#f1ebfb; border-radius:22px; }
.chapter-end h2 { margin:5px 0; font-size:23px; }
.chapter-end p { margin:0; color:var(--muted); }
.subscribe { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-top:82px; padding:35px 42px; color:#fff; background:#282735; border-radius:24px; }
.subscribe .eyebrow { color:#ffb4ca; }
.subscribe p:not(.eyebrow) { max-width:600px; color:#ddd9e5; }
.qr { display:grid; place-content:center; width:118px; min-width:118px; aspect-ratio:1; color:#282735; background:repeating-linear-gradient(45deg,#fff 0 6px,#f9b9cc 6px 12px); border-radius:15px; text-align:center; line-height:1.1; }
.qr span { font-size:20px; font-weight:800; }.qr b { font-size:13px; letter-spacing:2px; }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:25px 0 35px; color:var(--muted); font-size:12px; }
@media (max-width:900px) { .header-inner { padding:0 20px; overflow-x:auto; }.nav { justify-content:flex-start; }.search-chip { display:none; }.hero-slide { grid-template-columns:1fr; }.hero-copy { padding:42px 30px; }.hero-media { display:none; }.card-grid,.compact .card-grid { grid-template-columns:repeat(2,1fr); }.topic-strip,.about { grid-template-columns:1fr; }.topic-strip { padding:28px; }.about-image { min-height:250px; }.subscribe { margin-top:58px; } }
@media (max-width:560px) { .header-inner,.content-section,.page-hero,.breadcrumb,.article-page,.subscribe,.site-footer,.hero,.topic-strip,.about { width:min(100% - 24px, 1160px); }.nav a { padding:8px 7px; font-size:12px; }.nav a span { display:none; }.hero { min-height:390px; }.hero-slide.is-active { min-height:390px; }.hero-copy { padding:34px 24px; }.slider-dots { left:24px; }.content-section { margin-top:55px; }.card-grid,.compact .card-grid { grid-template-columns:1fr; }.topic-links { grid-template-columns:1fr; }.subscribe { padding:28px; }.subscribe h2 { font-size:24px; }.qr { width:82px; min-width:82px; }.site-footer { display:block; }.site-footer p { margin:5px 0; } }