/* 开口笔记：安静的阅读站。配色沿用 App 品牌（靛蓝 + 三个模块色）；只用系统字体。
   设计上只做三件事：声波、每篇一个模块色、靛蓝的收尾。其余都是纸和字。 */
:root {
  --paper: #FAF8F3;
  --card: #FFFFFF;
  --ink: #1D1D22;
  --ink-2: #3A3A44;
  --ink-3: #5A5A65;
  --rule: #D9D4C7;
  --accent: #284BA4;
  --accent-wash: #EDF0F9;
  --mark: #CFD9F3;
  /* 模块色：靛蓝 / 朗诵青碧 / 复述紫 / 日记梅红 */
  --t1: #284BA4;
  --t2: #327382;
  --t3: #7955A0;
  --t4: #704258;
  --close-bg: #284BA4;
  --close-ink: #FAF8F3;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --serif: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  --measure: 38rem;
  --wide: 54rem;
  --gutter: clamp(1.25rem, 5vw, 2rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B1B1F;
    --card: #26262C;
    --ink: #F6F5F0;
    --ink-2: #DAD9E0;
    --ink-3: #B4B4BF;
    --rule: #4B4B55;
    --accent: #93B2F7;
    --accent-wash: #232838;
    --mark: #33447A;
    --t1: #648EED;
    --t2: #81DAEF;
    --t3: #9F84BF;
    --t4: #C793AB;
    --close-bg: #232C4F;
    --close-ink: #F6F5F0;
  }
}

/* 宽屏：整体等比放大，正文栏随字号一起变宽，保持每行约 38 字 */
@media (min-width: 1440px) { html { font-size: 112.5%; } }
@media (min-width: 1920px) { html { font-size: 131%; } }
@media (min-width: 2560px) { html { font-size: 168%; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.9 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--paper); }
a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
img { display: block; }
h1, h2, h3 { text-wrap: balance; }

.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--paper); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* 阅读进度：浏览器支持滚动驱动动画时才出现 */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress {
    display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 20;
    background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
    animation: grow linear both; animation-timeline: scroll(root);
  }
  @keyframes grow { to { transform: scaleX(1); } }
}

/* 顶栏 */
.top { border-bottom: 1px solid var(--rule); }
.top-in {
  max-width: 64rem; margin: 0 auto; padding: .9rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; line-height: 1; }
.brand img { border-radius: 7px; }
.brand b { font-weight: 700; font-size: 1.0625rem; }
.brand span { color: var(--ink-3); font-size: .9375rem; padding-left: .6rem; border-left: 1px solid var(--rule); }
.top nav { display: flex; align-items: center; gap: 1.25rem; font-size: .9375rem; }
.top nav a { color: var(--ink-2); text-decoration: none; }
.top nav a:hover { color: var(--accent); }
.top nav .cta { color: var(--paper); background: var(--accent); font-weight: 600; padding: .3rem .9rem; border-radius: 999px; }
.top nav .cta:hover { color: var(--paper); opacity: .88; }

/* 首页首屏：大标题 + 一段说话的声波 */
.hero { padding: clamp(3rem, 9vw, 6.5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem); }
.hero-in {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem);
}
.hero h1 { font: 700 clamp(2.2rem, 6.4vw, 3.9rem)/1.25 var(--serif); margin: 0 0 1.4rem; letter-spacing: .01em; }
.hero mark { white-space: nowrap; color: inherit; background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 92%, transparent 92%); padding: 0 .08em; }
.hero p { margin: 0; color: var(--ink-2); max-width: 26rem; text-wrap: pretty; }
.wave { width: 100%; height: auto; }
.wave rect { transform-box: fill-box; transform-origin: center; animation: rise .9s var(--ease) backwards; animation-delay: calc(var(--i) * 28ms); }
.wave .t1 { fill: var(--t1); } .wave .t2 { fill: var(--t2); } .wave .t3 { fill: var(--t3); } .wave .t4 { fill: var(--t4); }
@keyframes rise { from { transform: scaleY(.08); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wave rect { animation: none; } }
@media (max-width: 44rem) {
  .hero-in { grid-template-columns: 1fr; }
  .wave { max-width: 22rem; }
}

/* 文章列表：左日期、右标题，每篇一个模块色 */
.list { list-style: none; max-width: var(--wide); margin: 0 auto clamp(3.5rem, 9vw, 6rem); padding: 0 var(--gutter); }
.list li { border-top: 1px solid var(--rule); position: relative; }
.list li:last-child { border-bottom: 1px solid var(--rule); }
.list li::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 2.5rem; background: var(--tone);
  transition: width .5s var(--ease);
}
.list li:hover::before { width: 100%; }
.list a { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0 1.5rem; padding: 1.9rem 0 1.8rem; color: inherit; text-decoration: none; }
.list time { font-size: .875rem; line-height: 1.7; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: .45rem; }
.list h2 { font: 700 1.5rem/1.45 var(--serif); margin: 0 0 .4rem; }
.list p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.75; }
.list .go { align-self: center; font-size: 1.5rem; color: var(--tone); transform: translateX(-.5rem); opacity: 0; transition: transform .4s var(--ease), opacity .3s; }
.list a:hover .go, .list a:focus-visible .go { transform: none; opacity: 1; }
.list a:hover h2 { text-decoration: underline; text-decoration-color: var(--tone); text-decoration-thickness: 2px; text-underline-offset: .2em; }
@media (max-width: 44rem) {
  .list a { grid-template-columns: minmax(0, 1fr); padding-block: 1.6rem; }
  .list time { padding: 0 0 .3rem; }
  .list time br { display: none; }
  .list .go { display: none; }
}

/* 文章：顶部一条淡淡的模块色带 */
.band { background: color-mix(in srgb, var(--tone) 9%, var(--paper)); border-bottom: 1px solid color-mix(in srgb, var(--tone) 22%, var(--paper)); }
.post-head { max-width: var(--measure); margin: 0 auto; padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) clamp(2rem, 6vw, 3.25rem); }
.crumb { margin: 0 0 clamp(2rem, 6vw, 3.5rem); font-size: .9375rem; }
.crumb a { color: var(--tone); text-decoration: none; font-weight: 600; }
.crumb a:hover { text-decoration: underline; }
.post-head h1 { font: 700 clamp(1.9rem, 5.6vw, 2.9rem)/1.32 var(--serif); margin: 0 0 1.1rem; letter-spacing: .01em; }
.meta { margin: 0; color: var(--ink-2); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.post, .more { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.prose { padding-top: clamp(2rem, 5vw, 3rem); }
.prose > * { margin-block: 0 1.25em; }
.prose > p:first-child { font-size: 1.1875rem; color: var(--ink); }
.prose h2 { font: 700 1.45rem/1.45 var(--serif); margin: 2.8em 0 .8em; }
.prose h2::before { content: ""; display: block; width: 2rem; height: 3px; background: var(--tone); margin-bottom: .75rem; }
.prose h3 { font-size: 1.0625rem; font-weight: 700; margin: 2em 0 .5em; }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-block: .5em; padding-left: .2em; }
.prose ul li::marker { color: var(--tone); }
.prose ol { list-style: none; padding: 0; counter-reset: step; }
.prose ol li { counter-increment: step; position: relative; padding-left: 2.6rem; }
.prose ol li::before {
  content: counter(step); position: absolute; left: 0; top: .32em; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--tone); color: var(--paper); font: 700 .875rem/1.7rem var(--sans); text-align: center; font-variant-numeric: tabular-nums;
}
.prose a { color: var(--tone); }
.prose blockquote { margin-inline: 0; padding: .1em 0 .1em 1.1em; border-left: 1px solid var(--tone); color: var(--ink-2); }

/* 末尾的产品提示：一小块，不抢戏 */
.prose aside.product {
  margin-top: 3.4em; padding: 1.5rem 1.6rem 1.6rem; background: var(--card); border: 1px solid var(--rule);
  border-radius: 14px; font-size: .9375rem; line-height: 1.85; color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(20, 20, 40, .05), 0 8px 24px -12px rgba(20, 20, 40, .12);
}
.prose aside.product::before { content: ""; display: block; width: 40px; height: 40px; border-radius: 10px; margin-bottom: 1rem; background: url(icon.png) center / cover; }
.prose aside.product p { margin: 0 0 1.1rem; }
.btn {
  display: inline-block; font-weight: 600; font-size: .9375rem; line-height: 1; text-decoration: none;
  padding: .8rem 1.3rem; border-radius: 999px; background: var(--accent); color: var(--paper); transition: transform .3s var(--ease), opacity .2s;
}
.prose a.btn, .prose a.btn:hover { color: var(--paper); }
.btn:hover { color: var(--paper); opacity: .9; transform: translateY(-1px); }

/* 继续读 */
.more { padding-top: clamp(3.5rem, 9vw, 5.5rem); padding-bottom: clamp(3.5rem, 9vw, 5.5rem); }
.more h2 { font: 700 1rem/1.4 var(--sans); color: var(--ink-3); margin: 0 0 .75rem; }
.more ul { list-style: none; margin: 0; padding: 0; }
.more li { border-top: 1px solid var(--rule); position: relative; }
.more li::before { content: ""; position: absolute; left: 0; top: -1px; width: 2rem; height: 3px; background: var(--tone); }
.more a { display: block; padding: 1.4rem 0; color: inherit; text-decoration: none; }
.more h3 { font: 700 1.25rem/1.5 var(--serif); margin: 0 0 .2rem; }
.more a:hover h3 { text-decoration: underline; text-decoration-color: var(--tone); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.more p { margin: 0; color: var(--ink-3); font-size: .9375rem; line-height: 1.7; }

/* 收尾：整块靛蓝，一句话加一个按钮 */
.close { background: var(--close-bg); color: var(--close-ink); padding: clamp(3.5rem, 9vw, 6rem) var(--gutter); }
.close-in { max-width: var(--wide); margin: 0 auto; }
.close h2 { font: 700 clamp(2rem, 6vw, 3.4rem)/1.3 var(--serif); margin: 0 0 1.25rem; letter-spacing: .01em; }
.close .close-in p { margin: 0 0 1.75rem; max-width: 30rem; color: color-mix(in srgb, var(--close-ink) 86%, var(--close-bg)); }
.close .close-in .close-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.close .btn { background: var(--close-ink); color: var(--close-bg); }
.close .btn:hover { color: var(--close-bg); }
.close .btn.ghost { background: transparent; color: var(--close-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--close-ink) 55%, transparent); }
.close .btn.ghost:hover { color: var(--close-ink); background: color-mix(in srgb, var(--close-ink) 12%, transparent); }
.close :focus-visible { outline-color: var(--close-ink); }

.foot { color: var(--ink-3); font-size: .875rem; }
.foot-in { max-width: 64rem; margin: 0 auto; padding: 1.75rem var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }
.foot p { margin: 0; line-height: 1.8; }
.foot a { color: var(--ink-2); }

@media (max-width: 30rem) {
  .brand span { display: none; }
}
@media print {
  .top, .more, .foot, .progress, aside.product { display: none; }
  body { background: #fff; color: #000; }
}