/* 每日一诗 / Daily —— 中文页「宣纸与墨」，英文页「老派年历」，共用一套骨架 */

.zh { --paper: #f3eee3; --ink: #2a2724; --ink-2: #6f685f; --accent: #b5382b; --rule: #d9d1c3; --grain: .06; }
.en { --paper: #f7f4ee; --ink: #1f1d1b; --ink-2: #6b665f; --accent: #7a2e2a; --rule: #ddd6ca; --grain: .04; }
@media (prefers-color-scheme: dark) {
  .zh { --paper: #1b1a18; --ink: #e8e1d4; --ink-2: #a39a8d; --accent: #c95a4b; --rule: #3a3733; --grain: .035; }
  .en { --paper: #18181a; --ink: #ebe6dc; --ink-2: #a29d94; --accent: #d88a7e; --rule: #38363a; --grain: .03; }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; min-height: 100svh; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
/* 纸纹：一段极小的 SVG 噪点，叠在内容下面 */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body { position: relative; z-index: 0; }
.zh { font-family: "Poem SC", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif; }
.en { font-family: "Cormorant", "EB Garamond", Georgia, "Times New Roman", serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- 顶栏与页脚（两页共用） ---------- */
.bar, .foot, .daynav, .hint, .tags, .src, .more, figcaption, .otd h2 {
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  font-size: 13px; line-height: 1.4; color: var(--ink-2);
}
.bar .brand { color: var(--ink); letter-spacing: .1em; }
.bar .date { flex: 1; text-align: center; white-space: nowrap; }
.bar .date .long { display: none; }
.bar .lang a { padding: 6px 2px; }
.bar .lang a[aria-current] { color: var(--ink); }
@media (max-width: 359px) {  /* iPhone SE 一代这类小屏：顶栏放了检索入口后挤不下，字号和间距收一点 */
  .bar { gap: .6rem; font-size: 12px; }
  .bar .lang .seek-link { margin-right: .7em; }
}
@media (min-width: 720px) {
  .bar .date .long { display: inline; }
  .bar .date .short { display: none; }
}

/* ---------- 中文：首屏 ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; }
.stage {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 3rem;
  padding: 24px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
  container-type: inline-size;
}
.foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
  font-size: 13px; color: var(--ink-2);
}
.foot a { padding: 12px 0; justify-self: start; }
.foot a[rel=next] { justify-self: end; }
.seal {
  font-family: "Poem SC", serif; font-size: 14px; letter-spacing: .15em; padding: .3em .2em .3em .45em;
  background: var(--accent); color: var(--paper); border-radius: 2px;
}
.hint {
  text-align: center; font-size: 12px; color: var(--ink-2); letter-spacing: .2em;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.hint span { display: block; letter-spacing: 0; }

/* 诗：横排，默认一联（以。！？；结尾）一行。手机上一律横排，短诗改成一句一行（n-c），字更大；
   竖排只在宽屏用（见下），因为小屏上竖排的字号到了下限，列宽会超出屏幕、截掉结尾 */
.poem {
  font-size: max(16px, min(2.1rem, calc(92cqw / (var(--hlen) * 1.06)), calc((100svh - 210px) / ((var(--hlines) + 2.6) * 2))));
  line-height: 2; letter-spacing: .06em; text-align: center;
}
.poem .head { margin-bottom: 1em; }
.poem h1 { font-size: max(15px, .72em); font-weight: 600; letter-spacing: .3em; margin: 0; line-height: 1.8; }
.poem .by { display: block; font-size: max(12px, .5em); color: var(--ink-2); letter-spacing: .2em; }
.poem .cl.end::after { content: "\A"; white-space: pre; }
.poem .stanza + .stanza { margin-top: 1em; }
@media (max-width: 899px), (max-height: 599px) {
  .n-c .poem { font-size: max(16px, min(2.1rem, calc(92cqw / (var(--clen) * 1.06)), calc((100svh - 210px) / ((var(--clines) + 2.6) * 2)))); }
  .n-c .poem .cl::after { content: "\A"; white-space: pre; }
}

/* 宽屏竖排：一句一列（w-v）。构建时已保证在竖排生效的最小屏幕 900×600 上字号不小于 20px，不会超出屏幕 */
@media (min-width: 900px) and (min-height: 600px) {
  .w-v .poem {
    writing-mode: vertical-rl; text-align: start; line-height: 1.9; letter-spacing: .12em;
    font-size: max(16px, min(2.6rem, calc(92cqw / ((var(--nc) + 1.6) * 1.9)), calc((100svh - 210px) / (var(--mc) * 1.12))));
  }
  .w-v .poem .cl { display: block; }
  .w-v .poem .cl.end::after { content: none; }
  .w-v .poem .head { margin: 0 0 0 1.1em; }
  .w-v .poem :is(h1, .by) { display: inline; font-size: .62em; font-weight: 400; color: var(--ink-2); letter-spacing: .2em; }
  .w-v .poem .by::before { content: "　"; }
  .w-v .poem .stanza + .stanza { margin: 0 1em 0 0; }
}

/* 金句：长诗只取一联作主视觉；宽屏右侧竖排上下文 */
.mingju { text-align: center; }
.mingju .mj {
  margin: 0; font-weight: 600; letter-spacing: .08em; line-height: 1.8;
  font-size: max(20px, min(2.8rem, calc(88cqw / (var(--mjlen) * 1.12))));
}
.mingju .mj span { display: block; }
.mingju .src { margin: 1.4em 0 0; font-size: 15px; color: var(--ink-2); letter-spacing: .12em; }
.context { display: none; }
@media (min-width: 900px) and (min-height: 600px) {
  .m-mingju .mingju { text-align: left; }
  .m-mingju .mingju .mj { font-size: min(3rem, calc(58cqw / (var(--mjlen) * 1.12))); }
  .context {
    display: block; writing-mode: vertical-rl; font-size: 14px; line-height: 2.1; letter-spacing: .06em;
    color: var(--ink-2); padding-right: 1.2em; border-right: 1px solid var(--rule); max-block-size: 70svh;
  }
  .context span { display: block; }
  .context .hl { color: var(--ink); font-weight: 600; }
}

/* 入场：逐句淡入，像墨迹晕开 */
@media (prefers-reduced-motion: no-preference) {
  .poem .cl, .mingju .mj span, .poem .head {
    animation: ink 1.1s cubic-bezier(.2, .6, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
  .hint span { animation: nudge 2.4s ease-in-out 1.5s infinite; }
  @keyframes ink { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
  @keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
}

/* ---------- 中文：下方小字（全文、译文、注释） ---------- */
.detail {
  max-width: 38rem; margin: 0 auto;
  padding: 2.5rem max(22px, env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  font-size: 14px; line-height: 1.95; color: var(--ink-2);
}
.detail h2 {
  display: flex; align-items: center; gap: .6em; margin: 2.4rem 0 .8rem;
  font-size: 13px; font-weight: 600; letter-spacing: .3em; color: var(--ink);
}
.detail h2:first-child { margin-top: 0; }
.detail h2::before { content: ""; width: .5em; height: .5em; background: var(--accent); }
.detail > p { margin: 0 0 .7em; text-indent: 2em; }
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { margin-bottom: .45em; }
.notes b { color: var(--ink); font-weight: 600; }
.fulltext { text-align: center; color: var(--ink); font-size: 16px; line-height: 2.1; letter-spacing: .04em; }
.fulltext p { margin: 0 0 1em; }
.fulltext .head { font-weight: 600; letter-spacing: .2em; }
.fulltext .head span { display: block; font-weight: 400; font-size: 13px; color: var(--ink-2); }
.fulltext .hl { background: linear-gradient(transparent 60%, color-mix(in srgb, var(--accent) 24%, transparent) 0); }
.tags { margin-top: 2.6rem; font-size: 12px; color: var(--ink-2); letter-spacing: .05em; }

/* ---------- 英文 ---------- */
.almanac {
  max-width: 76rem; margin: 0 auto; display: grid; gap: 3.5rem;
  padding: 1.5rem max(22px, env(safe-area-inset-right)) 2rem max(22px, env(safe-area-inset-left));
}
.quote { min-height: 62svh; display: flex; flex-direction: column; justify-content: center; }
.quote blockquote { margin: 0; font-size: var(--qfs); line-height: 1.2; font-weight: 500; }
.quote blockquote::before { content: "“"; display: block; height: .42em; color: var(--accent); font-size: 2.6em; line-height: .9; margin-left: -.06em; }
.quote blockquote p { margin: 0 0 .3em; text-wrap: balance; hanging-punctuation: first; }
.q-s { --qfs: clamp(2.1rem, 1.3rem + 3.6vw, 3.8rem); }
.q-m { --qfs: clamp(1.7rem, 1.15rem + 2.4vw, 2.9rem); }
.q-l { --qfs: clamp(1.4rem, 1.05rem + 1.5vw, 2.2rem); }
.quote .by { margin: 1.1rem 0 0; font-size: 1.3rem; font-style: italic; color: var(--ink-2); }
.quote .meaning { margin: .5rem 0 0; font-size: 1.15rem; color: var(--ink-2); }
.quote .src, .more { font-size: 13px; color: var(--accent); }
.quote .src { margin-top: 1.2rem; align-self: flex-start; }

.otd { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.otd h2 { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.otd .year { font-size: clamp(3.4rem, 2.4rem + 4vw, 5.2rem); line-height: 1.05; color: var(--accent); font-variant-numeric: oldstyle-nums; }
.otd .event { margin: .3rem 0 1.2rem; font-size: 1.45rem; line-height: 1.35; font-weight: 500; text-wrap: pretty; }
.otd figure { margin: 0 0 1.2rem; }
.otd img { display: block; max-width: 100%; max-height: 26rem; width: auto; height: auto; border-radius: 3px; }
.otd figcaption { margin-top: .4rem; font-size: 12px; color: var(--ink-2); }
.otd .extract { margin: 0 0 1rem; font-size: 1.2rem; line-height: 1.55; text-wrap: pretty; }
.daynav {
  max-width: 76rem; margin: 0 auto; display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2);
  padding: 0 max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}
.daynav a { padding: 12px 0; }
@media (min-width: 960px) {
  .almanac { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 5rem; align-items: start; padding-top: 2.5rem; }
  .quote { position: sticky; top: 2rem; min-height: calc(100svh - 8rem); }
  .otd { border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 0 3rem; }
}

/* ---------- 诗词检索（/search/，需要登录） ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bar .lang .seek-link { margin-right: 1em; }
.seek {
  max-width: 40rem; margin: 0 auto;
  padding: 2.4rem max(22px, env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}
.seek-box { display: flex; align-items: center; gap: .8rem; border-bottom: 1px solid var(--ink-2); }
.seek-box:focus-within { border-bottom-color: var(--accent); }
.seek-box input {
  flex: 1; min-width: 0; padding: .55em 0; border: 0; border-radius: 0; outline: none;
  background: transparent; color: var(--ink); font: inherit; font-size: 20px; -webkit-appearance: none; appearance: none;
}
.seek-box input::placeholder { color: var(--ink-2); }
.seek-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.seek-box button {
  padding: .5em .45em .5em .7em; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--accent); color: var(--paper); font: inherit; font-size: 15px; letter-spacing: .2em;
}
.modes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; border: 0; }
.modes input { position: absolute; width: 1px; height: 1px; margin: 0; clip-path: inset(50%); }
.modes span {
  display: inline-block; padding: .45em 1em; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
  font: 13px/1.2 system-ui, -apple-system, "PingFang SC", sans-serif; color: var(--ink-2);
}
.modes input:checked + span { border-color: var(--ink); color: var(--ink); }
.modes input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seek-status { min-height: 1.4em; margin: 1.8rem 0 .2rem; font: 13px/1.4 system-ui, -apple-system, "PingFang SC", sans-serif; color: var(--ink-2); }
.seek-status[data-kind=error], .seek-status[data-kind=warn] { color: var(--accent); }
.hits { list-style: none; margin: 0; padding: 0; }
.hit { padding: 1.4rem 0; border-top: 1px solid var(--rule); }
.hit-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: .12em; }
.hit-by { margin: .25rem 0 .8rem; font-size: 13px; color: var(--ink-2); letter-spacing: .12em; }
.hit-line { margin: 0; padding-left: .9em; border-left: 2px solid var(--accent); font-size: 18px; line-height: 1.85; letter-spacing: .05em; }
.hit-more { margin-top: .7rem; }
.hit-more summary {
  width: fit-content; padding: 8px 0; cursor: pointer; list-style: none;
  font: 13px system-ui, -apple-system, "PingFang SC", sans-serif; color: var(--ink-2);
}
.hit-more summary::-webkit-details-marker { display: none; }
.hit-more summary::after { content: " ↓"; }
.hit-more[open] summary::after { content: " ↑"; }
.hit-text { font-size: 15px; line-height: 1.95; color: var(--ink-2); }
.hit-text p { margin: 0; }
.hit-text mark { padding: 0 .1em; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
.examples { margin-top: 2.4rem; font-size: 15px; }
.examples[hidden] { display: none; }
.examples p { margin: 0 0 .7rem; font: 13px system-ui, -apple-system, "PingFang SC", sans-serif; color: var(--ink-2); }
.examples a { display: inline-block; margin: 0 .5rem .6rem 0; padding: .4em .95em; border: 1px solid var(--rule); border-radius: 999px; }