/* Material 3 Expressive layer: warm tonal surfaces, clear hierarchy and soft geometry. */
:root {
  color-scheme: light;
  --bg: #fff0f5;
  --paper: #fffafd;
  --ink: #321d2a;
  --muted: #795d6d;
  --line: #ead3df;
  --primary: #b52f6e;
  --primary-dark: #88214f;
  --accent: #e65d91;
  --lavender: #efdafa;
  --lemon: #ffd8e8;
  --sans: 'Manrope', 'Noto Sans SC', 'PingFang SC', Arial, sans-serif;
  --mono: 'Manrope', 'Noto Sans SC', 'PingFang SC', Arial, sans-serif;
  --shadow: 0 18px 50px #7d31521a;
}

html { scroll-padding-top: 108px; }
body {
  background:
    radial-gradient(ellipse at 7% 3%, #ffe0ed 0, transparent 27rem),
    linear-gradient(180deg, #fff5f8 0, var(--bg) 44rem, #fff8fb 100%);
  font-size: 16px;
}
em, i, cite, dfn, address, var { font-style: normal; }
button, input, textarea, select { font-family: var(--sans); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #e65d91aa; outline-offset: 3px; }

.site-shell { max-width: 1480px; }
.topbar {
  position: sticky; top: 0; z-index: 10; height: 82px;
  margin: 0 -2.8%; padding: 0 2.8%;
  background: #fffafdE8; backdrop-filter: blur(18px);
  border: 0; border-bottom: 1px solid #ead3dfb0;
}
.brand { gap: 12px; font-size: 15px; letter-spacing: -.025em; }
.brand-mark {
  position: relative; flex: 0 0 auto; width: 42px; height: 42px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 16px 16px 16px 6px; background: var(--primary);
  color: white; transform: none; box-shadow: 0 4px 12px #b52f6e2b;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-fallback { display: none; color: white; font-size: 23px; font-weight: 800; line-height: 1; }
.brand-mark.is-fallback .brand-fallback { display: grid; place-items: center; }
.brand-mark.is-fallback img { display: none; }
.desktop-nav { gap: 8px; font-size: 13px; }
.desktop-nav a { height: 42px; padding: 0 18px; border-radius: 999px; transition: .2s ease; }
.desktop-nav a.active, .desktop-nav a:hover { color: var(--primary); background: #f8e1ec; }
.desktop-nav a.active:after { display: none; }
.top-actions { gap: 10px; }
.icon-button { width: 42px; height: 42px; border-radius: 50%; transition: background .18s, transform .18s; }
.icon-button:hover { background: #f8e1ec; transform: scale(1.04); }
.write-link { padding: 12px 17px; border-radius: 999px; color: var(--primary); background: #f8e1ec; font-size: 12px; }

.hero { padding: 68px 0 72px; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); }
.eyebrow { font-size: 11px; letter-spacing: .07em; font-weight: 700; }
.hero-copy { padding: 10px 0 0; }
.hero h1 { max-width: 660px; font-size: clamp(62px, 7.2vw, 104px); line-height: 1.04; letter-spacing: -.075em; margin: 30px 0 24px; }
.headline-accent { font-weight: 650; letter-spacing: -.075em; color: var(--primary); }
.hero-lede { max-width: 470px; font-size: 17px; line-height: 1.9; color: #735464; }
.hero-ctas { gap: 18px; margin-top: 32px; }
.button-primary { min-height: 52px; padding: 0 23px; gap: 32px; border-radius: 18px 18px 18px 6px; font-size: 14px; box-shadow: 0 8px 18px #b52f6e2b; }
.button-primary:hover { transform: translateY(-2px); }
.text-link { font-size: 14px; }
.hero-meta { margin-top: 42px; font-size: 11px; }
.hero-art {
  height: clamp(350px, 39vw, 500px); overflow: hidden;
  border-radius: 48% 48% 42px 42px;
  background: linear-gradient(145deg, #fce0ec 0%, #f7dcf2 48%, #ffebdc 100%);
  box-shadow: 0 20px 50px #8738581c;
}
.hero-art:before { background: linear-gradient(155deg, #f8d4e5 0%, #f7dcf2 50%, #ffebdc 100%); }
.art-sun { width: 146px; height: 146px; top: 70px; right: 23%; background: #ffc2da; box-shadow: 0 0 0 20px #f492bd30, 0 0 0 44px #f492bd18; }
.art-orbit { border-color: #a2497680; border-width: 1.5px; }
.mountain-back { fill: #d27da3; }
.mountain-front { fill: #a83c70; }
.mountain-highlight { fill: #edabc7; }
.river { stroke: #ffc2da; stroke-width: 8; }
.art-label { font-size: 10px; font-weight: 700; color: #613b52; }
.art-label-bottom { color: #fff8fc; }
.art-sticker { width: 90px; height: 90px; right: 28px; bottom: 26px; background: #f181a9; font-size: 12px; box-shadow: 0 8px 22px #7d315240; }

.topic-strip {
  min-height: 92px; gap: 14px; padding: 15px 24px;
  border: 1px solid #efd8e4; border-radius: 24px;
  background: #fffafdcc; box-shadow: 0 8px 26px #8738580a;
}
.strip-label { margin-right: 7px; font-size: 12px; font-weight: 700; }
.topic-strip a { padding: 11px 17px; border-radius: 999px; background: #f8e2ec; color: #6f3452; font-size: 14px; }
.topic-strip a:nth-of-type(2n) { background: #f0e2f5; }
.topic-strip a:hover { color: #fff; background: var(--primary); }
.topic-strip a span { margin-left: 4px; color: var(--accent); }
.strip-note { font-size: 11px; }

.writing-section { padding: 94px 0 88px; }
.section-heading h2, .now-title h2 { font-size: clamp(36px, 4vw, 50px); letter-spacing: -.055em; }
.section-eyebrow { margin-bottom: 12px; color: var(--primary); }
.filter-row { gap: 10px; margin: 25px 0 28px; }
.filter-chip { padding: 11px 17px; border-radius: 999px; font-size: 12px; background: #fffafd; }
.filter-chip.selected, .filter-chip:hover { background: var(--primary); border-color: var(--primary); }
.inline-search { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fffafd; }
.inline-search input { width: 150px; font-size: 12px; }
.post-grid { gap: 22px; }
.post-card { border: 1px solid #ecd4e0; border-radius: 24px; box-shadow: 0 4px 16px #8738580a; }
.post-card:hover { transform: translateY(-5px) rotate(-.3deg); box-shadow: var(--shadow); }
.post-cover { height: 210px; }
.post-cover:before, .post-cover:after { filter: saturate(1.1); }
.cover-word { font-size: 11px; font-weight: 800; }
.post-body { padding: 20px 21px 21px; }
.post-meta, .post-category { font-size: 10px; }
.post-body h3 { font-size: 19px; }
.post-body p { font-size: 13px; line-height: 1.8; }
.post-bottom { border-color: #f0dbe4; }
.tag { font-size: 10px; padding: 6px 9px; }
.empty-state {
  padding: 56px 24px; border: 1px dashed #dfb5c9; border-radius: 28px;
  background: #fff9fc; color: var(--muted);
}
.empty-state>span { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: #f8e1ec; color: var(--primary); font-size: 28px; }
.empty-state p { font-size: 15px; }
.empty-state button { margin-top: 8px; font-size: 13px; }
.archive-row { padding: 24px 2px; font-size: 12px; }

.about-section {
  padding: 42px; grid-template-columns: 126px 1fr 245px; gap: 35px;
  border: 1px solid #ecd4e0; border-radius: 34px; background: #fffafd;
  box-shadow: 0 12px 34px #8738580c;
}
.about-mark {
  position: relative; width: 104px; height: 104px; display: grid; place-items: center;
  overflow: hidden; border-radius: 35px 35px 35px 12px; background: var(--primary);
  box-shadow: 0 8px 20px #b52f6e2b; transform: none;
}
.about-mark img { width: 100%; height: 100%; object-fit: cover; }
.about-fallback { display: none; color: #fff; font-size: 54px; font-weight: 800; line-height: 1; }
.about-mark.is-fallback .about-fallback { display: grid; place-items: center; }
.about-mark.is-fallback img { display: none; }
.about-copy h2 { font-size: 30px; letter-spacing: -.05em; }
.about-copy h2 span { font-weight: 650; }
.about-copy p { max-width: 590px; font-size: 14px; line-height: 1.9; }
.side-note { min-height: 188px; padding: 23px; border-radius: 23px 23px 23px 7px; background: linear-gradient(145deg, #fae1ec, #f2e5f7); }
.side-note p { font-size: 19px; line-height: 1.55; }
.currently-reading { margin-top: 22px; }
.reading-line { font-size: 11px; }
.now-section { padding: 84px 0; gap: 72px; }
.now-title h2 { margin-top: 8px; }
.now-content p { max-width: 600px; font-size: 15px; line-height: 1.9; }
.now-update { font-size: 11px; }
.newsletter {
  margin: 26px 0 70px; min-height: 180px; padding: 35px 40px;
  border: 1px solid #edc7d8; border-radius: 32px 32px 32px 8px;
  background: linear-gradient(120deg, #f9dce8 0%, #f5e4f7 100%);
}
.newsletter-icon { width: 50px; height: 50px; border-radius: 18px 18px 18px 6px; color: #fff; }
.newsletter h2 { font-size: 25px; }
.newsletter p { font-size: 13px; }
.subscribe-form .rss-button { min-height: 46px; padding: 14px 20px; border-radius: 16px 16px 16px 6px; font-size: 13px; }
.subscribe-form small { font-size: 10px; }
.footer { min-height: 96px; }
.footer-copy, .copyright { font-size: 10px; }
.footer-links { font-size: 12px; }

.search-dialog, .article-dialog { border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 24px 80px #4c233929; }
.search-dialog::backdrop, .article-dialog::backdrop { background: #321d2a66; backdrop-filter: blur(5px); }
.dialog-close { width: 42px; height: 42px; border-radius: 50%; background: #f8e1ec; color: var(--primary); }
.article-dialog { border-radius: 30px 30px 30px 8px; }
.article-dialog h1 { font-size: clamp(30px, 5vw, 48px); }

body.dark {
  --bg: #261a23; --paper: #352430; --ink: #fff1f7; --muted: #c8aab9;
  --line: #614052; --primary: #f69ac0; --primary-dark: #ffc3dc; --accent: #ffabc9;
  background: radial-gradient(ellipse at 6% 0%, #573048 0, transparent 28rem), #261a23;
}
.dark .topbar { background: #2d202ae8; border-color: #614052; }
.dark .desktop-nav a.active, .dark .desktop-nav a:hover,
.dark .write-link, .dark .icon-button:hover { background: #563348; }
.dark .topic-strip, .dark .about-section, .dark .empty-state { background: #352430; border-color: #614052; }
.dark .topic-strip a { background: #503146; color: #ffe2ef; }
.dark .topic-strip a:nth-of-type(2n), .dark .side-note, .dark .newsletter { background: #493047; }
.dark .inline-search, .dark .filter-chip { background: #352430; }
.dark .filter-chip.selected, .dark .filter-chip:hover { background: var(--primary); }
.dark .hero-lede { color: #d0b5c3; }
.dark .hero-art { filter: saturate(.82) brightness(.82); }

@media (max-width: 900px) {
  .hero { gap: 34px; }
  .hero h1 { font-size: clamp(56px, 8vw, 76px); }
  .hero-art { height: 350px; }
  .about-section { grid-template-columns: 100px 1fr; padding: 32px; }
  .about-side { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
}
@media (max-width: 640px) {
  .topbar { margin: 0 -21px; padding: 0 21px; height: 72px; }
  .brand { font-size: 14px; }
  .brand-mark { width: 38px; height: 38px; }
  .desktop-nav { top: 71px; border-radius: 0 0 22px 22px; background: #fffafdF7; }
  .dark .desktop-nav { background: #2d202af7; }
  .hero { padding: 48px 0 50px; gap: 32px; }
  .hero h1 { font-size: clamp(54px, 14vw, 72px); line-height: 1.08; margin: 24px 0 18px; }
  .hero-lede { font-size: 15px; }
  .hero-meta { margin-top: 28px; }
  .hero-art { height: 300px; border-radius: 44% 44% 30px 30px; }
  .art-sun { width: 104px; height: 104px; top: 54px; }
  .art-orbit { top: 72px; }
  .topic-strip { margin: 0 -2px; min-height: 78px; padding: 12px 14px; gap: 8px; border-radius: 20px; }
  .topic-strip a { padding: 10px 13px; font-size: 12px; }
  .writing-section { padding: 70px 0 58px; }
  .section-heading h2 { font-size: 34px; }
  .filter-trigger { border-radius: 999px; padding: 11px 15px; background: #fffafd; border-color: var(--line); }
  .filter-row.show { padding: 12px; border-radius: 20px; background: #fffafd; }
  .post-cover { height: 190px; }
  .post-body h3 { font-size: 19px; }
  .about-section { padding: 24px; grid-template-columns: 62px 1fr; gap: 16px; border-radius: 28px; }
  .about-mark { width: 60px; height: 60px; border-radius: 21px 21px 21px 7px; }
  .about-fallback { font-size: 34px; }
  .about-copy h2 { font-size: 22px; }
  .about-copy p { font-size: 13px; }
  .about-side { grid-template-columns: 1fr; gap: 15px; }
  .side-note { min-height: 0; padding: 18px; }
  .side-note p { font-size: 16px; }
  .currently-reading { margin: 0 4px; }
  .now-section { padding: 58px 0; gap: 16px; }
  .now-title h2 { font-size: 34px; }
  .now-content p { font-size: 14px; }
  .newsletter { margin: 38px 0 46px; padding: 22px 19px; border-radius: 26px 26px 26px 8px; }
  .newsletter h2 { font-size: 21px; }
  .footer { padding: 18px 0; }
  .footer-copy { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* Rounded-rectangle component system with circular profile marks. */
.topbar {
  position: sticky; top: 12px; z-index: 20; height: 74px;
  width: calc(100% + 32px); margin: 12px -16px 0; padding: 0 24px;
  border: 1px solid #ead3df; border-radius: 24px;
  background: #fffafdF2; box-shadow: 0 10px 30px #7d315214;
}
.dark .topbar { background: #2d202af2; border-color: #614052; }
.brand-mark, .about-mark { border-radius: 50%; }
.hero-art { border-radius: 32px; }
.mountain-art { display: none; }
.art-sun { border-radius: 16px; box-shadow: none; }
.art-orbit { width: 40%; height: 80px; border-radius: 20px; transform: none; }
.art-sticker { border-radius: 16px; }
.about-section { border-radius: 28px; }
.side-note, .newsletter { border-radius: 24px; }
.newsletter-icon { border-radius: 14px; }
.desktop-nav a, .write-link, .button-primary, .topic-strip a, .filter-chip,
.inline-search, .filter-trigger, .tag, .empty-state button, .rss-button,
.search-dialog, .article-dialog, .dialog-close, .icon-button, .menu-toggle {
  border-radius: 14px;
}
.write-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1; white-space: nowrap; }
.write-link span { display: inline-block; line-height: 1; margin: 0; }
.filter-chip span { border-radius: 6px; }
.post-card, .topic-strip, .empty-state { border-radius: 22px; }
button, input, textarea, select { border-radius: 12px; }
@media (max-width: 640px) {
  .topbar { width: calc(100% + 24px); margin: 10px -12px 0; padding: 0 16px; top: 8px; }
  .hero-art { border-radius: 24px; }
}

/* Keep the hero artwork geometric, legible, and consistent with the new shape system. */
.art-orbit {
  top: 29%; left: 14%; width: 68%; height: 34%;
  display: grid; align-content: center; gap: 10px;
  padding: 22px; border: 1px solid #a2497655; border-radius: 22px;
  background: #fff9fccc; box-shadow: 0 12px 28px #87385812;
}
.art-orbit::before { content: "好奇心，慢慢变成作品"; color: #613b52; font: 700 clamp(14px, 1.7vw, 23px) var(--sans); letter-spacing: -.04em; }
.art-orbit::after { content: "MAKE  ·  LEARN  ·  SHARE"; color: #94647b; font: 700 9px var(--mono); letter-spacing: .12em; }
.art-label-bottom { color: #684257; font-weight: 700; }
.art-sun { top: 13%; right: 13%; width: 56px; height: 56px; border-radius: 14px; }

/* Consistent expressive geometry and responsive layouts. */
button{border-radius:14px}
.topbar{position:sticky;top:12px;width:calc(100% + 24px);max-width:calc(1480px + 24px);height:72px;margin:12px auto;padding:0 20px;border:1px solid var(--line);border-radius:24px;background:#fffafdF2;box-shadow:0 8px 25px #87385810}
.brand-mark,.about-mark{border-radius:50%}
.button-primary,.write-link,.filter-trigger,.filter-chip,.topic-strip a,.rss-button,.icon-button,.dialog-close,.newsletter-icon,.art-sticker{border-radius:14px}
.hero-art,.post-card,.about-section,.side-note,.newsletter,.search-dialog,.article-dialog,.topic-strip,.empty-state{border-radius:26px}
.post-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.cover-word{z-index:2}
.article-cover{display:block;width:100%;max-height:360px;object-fit:cover;border-radius:20px;margin:0 0 28px}
.language-picker select{height:40px;max-width:120px;padding:0 11px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font:600 11px var(--sans)}
.top-actions{min-width:0}
@media(max-width:900px){.site-shell{width:min(100% - 36px,760px)}.hero{grid-template-columns:minmax(0,1fr);padding:48px 0 52px;gap:26px}.hero-copy{max-width:700px}.hero-art{width:100%;height:clamp(270px,52vw,410px)}.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-section{grid-template-columns:90px minmax(0,1fr);gap:24px}.about-mark{width:80px;height:80px}.about-side{grid-column:1/-1;grid-template-columns:1fr 1fr}}
@media(max-width:640px){.site-shell{width:calc(100% - 28px)}html{scroll-padding-top:88px}.topbar{top:8px;width:calc(100% + 6px);height:62px;margin:8px -3px 0;padding:0 12px;border-radius:18px;gap:7px}.brand{gap:8px;font-size:12px;white-space:nowrap}.brand-mark{width:34px;height:34px}.desktop-nav{top:68px;left:0;right:0;padding:8px 10px;border:1px solid var(--line);border-radius:18px;background:#fffafdF7;box-shadow:var(--shadow)}.desktop-nav a{height:42px;padding:0 12px;border-radius:12px}.top-actions{gap:5px}.icon-button{width:38px;height:38px;border-radius:12px}.language-picker select{width:79px;padding:0 5px;font-size:10px}.write-link{padding:10px 9px;font-size:10px;white-space:nowrap}.hero{padding:37px 0 38px;gap:22px}.hero h1{font-size:clamp(44px,12.4vw,66px);letter-spacing:-.07em;line-height:1.08;margin:18px 0 15px}.hero-lede{font-size:14px;line-height:1.8}.hero-ctas{gap:10px;flex-wrap:wrap;margin-top:22px}.button-primary{min-height:46px;padding:0 15px;gap:16px;font-size:12px}.hero-meta{flex-wrap:wrap;gap:8px;margin-top:23px;font-size:10px}.hero-art{height:clamp(235px,72vw,330px);border-radius:22px}.art-sun{width:84px;height:84px;top:45px}.art-orbit{top:60px}.art-label{font-size:8px}.art-sticker{width:72px;height:72px;right:15px;bottom:15px}.topic-strip{margin:0;min-height:auto;flex-wrap:nowrap;overflow-x:auto;padding:11px 12px;gap:7px;border-radius:18px}.strip-label,.strip-note{display:none}.topic-strip a{flex:0 0 auto;padding:9px 12px;font-size:11px}.writing-section{padding:56px 0 50px}.section-heading{align-items:flex-end;gap:8px}.section-heading h2,.now-title h2{font-size:30px}.filter-trigger{padding:10px 12px;font-size:11px;white-space:nowrap}.filter-row{gap:7px;overflow-x:auto;padding-bottom:4px}.filter-chip{padding:9px 12px;white-space:nowrap}.inline-search{min-width:130px}.inline-search input{width:75px}.post-grid{grid-template-columns:minmax(0,1fr);gap:13px}.post-card:hover{transform:translateY(-2px)}.post-cover{height:clamp(175px,55vw,245px)}.post-body{padding:16px}.post-body h3{font-size:18px}.about-section{padding:18px;grid-template-columns:56px minmax(0,1fr);gap:13px;border-radius:20px}.about-mark{width:52px;height:52px}.about-fallback{font-size:28px}.about-copy h2{font-size:20px}.about-copy p{font-size:12px}.about-side{grid-template-columns:minmax(0,1fr);gap:12px}.side-note{min-height:0;padding:16px}.side-note p{font-size:15px}.now-section{padding:46px 0;gap:12px}.now-title h2{margin:5px 0}.now-content p{font-size:13px}.newsletter{margin:24px 0 36px;padding:19px 16px;border-radius:20px;gap:13px;grid-template-columns:42px minmax(0,1fr)}.newsletter-icon{width:42px;height:42px;border-radius:14px}.newsletter h2{font-size:18px}.newsletter p{font-size:12px;line-height:1.65}.subscribe-form{grid-column:1/-1;align-items:flex-start}.rss-button{border-radius:14px;padding:12px 15px}.footer{gap:10px;flex-wrap:wrap}.footer-brand{flex:1 1 100%}.footer-brand .brand-mark{width:30px;height:30px}.footer-links{flex:1 1 100%;justify-content:space-between}.copyright{margin-left:auto}.search-dialog,.article-dialog{width:calc(100% - 24px);max-width:560px;padding:25px;border-radius:20px}.article-dialog h1{font-size:clamp(25px,8vw,40px)}}
@media(max-width:380px){.brand>span:last-child{max-width:102px;overflow:hidden;text-overflow:ellipsis}.top-actions{gap:3px}.theme-toggle{display:none}.write-link{font-size:9px;padding:9px 7px}.language-picker select{width:70px}.hero h1{font-size:44px}}