/* PREVIEW ONLY — "same day": one quiet collapsed line under the poem; two layers when opened. */
.same-day{ position:relative; width:fit-content; max-width:min(26rem, 100%); margin:3.5rem auto 0; padding-top:2rem }
.same-day::before{ content:""; position:absolute; top:0; left:50%; width:1.25rem; height:var(--hair); background:var(--color-border); transform:translateX(-50%) }
.sd-toggle{ display:flex; align-items:center; gap:.5rem; margin:0 auto; padding:.5rem .75rem; border:0; border-radius:999px; background:none;
  color:var(--color-faint); font:inherit; font-size:.8125rem; line-height:1.25rem; letter-spacing:.12em; cursor:pointer;
  transition:color var(--t-quick) var(--ease) }
.sd-toggle .en{ letter-spacing:.04em }
.sd-toggle:focus-visible{ outline:var(--hair) solid var(--color-secondary); outline-offset:2px }
@media (hover:hover) and (pointer:fine){ .sd-toggle:hover{ color:var(--color-secondary) } }
.sd-chev{ width:.75rem; height:.75rem; flex:0 0 auto; transition:transform var(--t-base, .32s) var(--ease) }
.sd-toggle[aria-expanded="true"] .sd-chev{ transform:rotate(180deg) }
.sd-panel{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .42s var(--ease), opacity .42s var(--ease) }
.sd-panel.open{ grid-template-rows:1fr; opacity:1 }
.sd-inner{ overflow:hidden; min-height:0 }
.sd-rows{ display:flex; flex-direction:column; gap:1.75rem; padding-top:1.5rem }
.sd-row{ display:flex; align-items:center; gap:1rem }
.sd-fig{ flex:0 0 4.5rem; width:4.5rem; display:flex; flex-direction:column; align-items:center; margin:0 }
.sd-img{ display:block; width:4.5rem; height:4.5rem; -webkit-user-drag:none; user-select:none }
.sd-coda{ margin:.5rem auto 0; width:100%; max-width:20rem; display:flex; flex-direction:column; align-items:center }
.sd-coda .sd-zoom{ width:100% }
.sd-zoom{ display:block; padding:0; border:0; background:none; cursor:zoom-in; border-radius:2px }
.sd-zoom:focus-visible{ outline:var(--hair) solid var(--color-secondary); outline-offset:3px }
.sd-paint{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:2px; box-shadow:0 0 0 var(--hair) var(--color-border) }
.sd-kw{ margin:0 0 .75rem; color:var(--color-faint); font-size:.6875rem; line-height:1rem; letter-spacing:.04em; text-align:center; white-space:nowrap }
.sd-line{ flex:0 1 auto; min-width:0; margin:0; color:var(--color-secondary); font-size:.8125rem; line-height:1.375rem; text-align:left; line-break:strict; text-wrap:pretty }
.sd-line a{ display:block; color:inherit; transition:color var(--t-quick) var(--ease) }
.sd-lead{ display:block; margin-bottom:.125rem; color:var(--color-faint); font-size:.75rem; line-height:1.25rem; letter-spacing:.16em }
.sd-line:lang(en) .sd-lead{ text-transform:uppercase; letter-spacing:.14em; font-size:.6875rem }
@media (hover:hover) and (pointer:fine){ .sd-line a:hover{ color:var(--color-text) } }
.sd-dark{ display:none }
:root[data-theme=dark] .sd-img, :root[data-theme=dark] .sd-paint{ filter:brightness(.9) saturate(.92) }
:root[data-theme=dark] .sd-light{ display:none } :root[data-theme=dark] .sd-dark{ display:block }
@media (prefers-color-scheme: dark){ :root:not([data-theme=light]) .sd-img, :root:not([data-theme=light]) .sd-paint{ filter:brightness(.9) saturate(.92) }
  :root:not([data-theme=light]) .sd-light{ display:none } :root:not([data-theme=light]) .sd-dark{ display:block } }
.sd-lightbox{ max-width:min(92vw, 36rem); max-height:92vh; padding:0; border:0; background:transparent; overflow:visible }
.sd-lightbox::backdrop{ background:rgba(20,19,17,.72) }
.sd-lightbox img{ display:block; width:100%; height:auto; max-height:80vh; object-fit:contain; border-radius:2px }
.sd-lightbox form{ margin:0 } .sd-lightbox button{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-out }
.sd-lightbox .sd-kw{ margin:0 0 .75rem; color:rgba(255,255,255,.78); font-size:.8125rem }
@media (width<=40rem){ .same-day{ margin-top:3rem } .sd-rows{ gap:1.5rem } .sd-row{ gap:.875rem } .sd-coda{ max-width:none } }
@media (prefers-reduced-motion: reduce){ .sd-panel, .sd-chev{ transition:none } }

/* ── best reading: tuned from what sd-head.js learned (data-sd-*) and from media queries ──
   Typical phones and laptops keep the live sizes exactly; only the edges move. */
html{ text-size-adjust:100% }
.poem-lines.en, .caption:lang(en){ max-inline-size:34em; margin-inline:auto }
/* very small phones (≤359px): never smaller type, only a little less side padding and letter-spacing */
:root[data-sd-vw=xs] .poem-lines{ letter-spacing:.03em }
:root[data-sd-vw=xs] .page{ padding-inline:1.125rem }
/* big screens: everything a size up, the column a bit wider, the model larger */
@media (width>=100rem){
  .page{ max-width:38rem }
  .hero-box{ width:min(26rem, 100%, 78vw) }
  .poem-lines{ font-size:1.3125rem; line-height:2.75rem }
  .poem-lines.en{ font-size:1.25rem; line-height:2.25rem }
  .caption{ font-size:1.125rem; line-height:2.125rem }
}
/* low-density screens (1x): thin CJK serif strokes break up — use a slightly heavier weight and wider tracking */
:root[data-sd-dpr="1"] .poem-lines.zh{ font-weight:500; letter-spacing:.08em }
:root[data-sd-dpr="1"] .caption.zh{ letter-spacing:.02em }
/* phones held sideways: shrink the model so the title and the first verse lines share the screen */
:root[data-sd-land="1"] .page{ padding-top:4.5rem }
/* more contrast when asked for */
@media (prefers-contrast: more){ :root{ --color-secondary:#5f5a54; --color-faint:#7d7871 } .poem-lines{ font-weight:500 } }
/* no WebGL: the still picture stays, with no "grab" cursor */
.hero-model[data-sd-off]{ display:none }

/* the one quiet line for a struggling browser */
.sd-hint{ display:flex; justify-content:center; align-items:center; gap:.375rem; margin:1.25rem auto 0; color:var(--color-faint);
  font-size:.75rem; line-height:1.25rem; letter-spacing:.12em }
.sd-hint button{ color:inherit; font-size:.875rem; line-height:1; padding:.375rem .5rem; margin:-.375rem 0; opacity:.8 }

/* turning the model by hand */
.hero-model{ touch-action:pan-y }
.hero-model model-viewer{ touch-action:pan-y; user-select:none; -webkit-user-select:none }

/* the edge of the record: first / last day */
.sd-edge{ position:fixed; z-index:30; top:50%; transform:translateY(-50%); margin:0; padding:.25rem .5rem; color:var(--color-faint);
  font-size:.75rem; letter-spacing:.14em; writing-mode:vertical-rl; opacity:0; pointer-events:none; transition:opacity .5s var(--ease) }
.sd-edge[data-side=right]{ right:calc(.5rem + env(safe-area-inset-right, 0px)) }
.sd-edge[data-side=left]{ left:calc(.5rem + env(safe-area-inset-left, 0px)) }
.sd-edge.show{ opacity:1 }
:lang(en) .sd-edge, html[data-lang=en] .sd-edge{ writing-mode:horizontal-tb; top:auto; bottom:5rem; transform:none }

/* 我也在 */
.also{ margin:2.75rem auto 0; max-width:26rem; text-align:center; color:var(--color-faint); font-size:.8125rem; line-height:1.5rem; letter-spacing:.08em }
.also[hidden], .also [hidden]{ display:none }
.also-mine{ color:var(--color-text); font-family:var(--font-serif); letter-spacing:.16em; margin-bottom:.375rem }
.also-count{ color:var(--color-secondary); letter-spacing:.12em }
.also-cities{ margin-top:.125rem; font-size:.75rem; letter-spacing:.1em }
.also-count:not([hidden]) ~ .also-ask{ margin-top:.875rem }
.also-ask{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.25rem .75rem }
.also-send{ padding:.25rem .75rem; border-radius:999px; color:var(--color-secondary); font-size:.8125rem; letter-spacing:.12em;
  box-shadow:inset 0 0 0 var(--hair) var(--color-border); transition:color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease) }
.also-send:active{ transform:scale(.96) }
.also-send:disabled{ opacity:.5 }
@media (hover:hover) and (pointer:fine){ .also-send:hover{ color:var(--color-text) } }
@media (pointer:coarse){ .also-send{ min-height:2.75rem; padding-inline:1rem } }
.also-note{ margin-top:.5rem; font-size:.75rem }

/* 订阅 by the footer line */
.sd-dot{ margin:0 .5em; color:var(--color-border) }
.sd-sub{ color:var(--color-faint); font-size:inherit; letter-spacing:inherit; text-transform:inherit; padding:.125rem .125rem; border-bottom:var(--hair) solid transparent;
  transition:color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease) }
.sd-sub[aria-expanded=true]{ color:var(--color-secondary); border-bottom-color:var(--color-border) }
@media (hover:hover) and (pointer:fine){ .sd-sub:hover{ color:var(--color-secondary) } }
@media (pointer:coarse){ .sd-sub{ padding:.75rem .25rem; margin:-.75rem 0 } }
.sd-feed{ max-width:22rem; margin:-.25rem auto 1.5rem; color:var(--color-secondary); font-size:.8125rem; line-height:1.5rem; letter-spacing:.04em; text-align:center }
.sd-feed[hidden]{ display:none }
.sd-feed-say{ text-wrap:balance; line-break:strict }
.sd-feed-row{ margin-top:.375rem; display:flex; justify-content:center; align-items:baseline; gap:.75rem }
.sd-feed-url{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.75rem; color:var(--color-faint); letter-spacing:0; user-select:all; -webkit-user-select:all }
.sd-feed-copy{ padding:.25rem .625rem; border-radius:999px; color:var(--color-secondary); font-size:.75rem; letter-spacing:.12em; box-shadow:inset 0 0 0 var(--hair) var(--color-border) }
@media (hover:hover) and (pointer:fine){ .sd-feed-copy:hover{ color:var(--color-text) } }
@media (pointer:coarse){ .sd-feed-copy{ min-height:2.75rem; padding-inline:.875rem } }
.sd-feed-ok{ color:var(--color-faint); font-size:.75rem }

/* the hand-drawn avatar, a small signature above the copyright line */
.sd-avatar{ display:block; width:4.5rem; height:4.5rem; margin:2.25rem auto -1rem; border-radius:50%; overflow:hidden; background:#fdf7e9 }
.sd-avatar img{ display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none }
:root[data-theme=dark] .sd-avatar{ box-shadow:0 0 0 3px #e9e1cf; filter:brightness(.94) }
@media (prefers-color-scheme: dark){ :root:not([data-theme=light]) .sd-avatar{ box-shadow:0 0 0 3px #e9e1cf; filter:brightness(.94) } }
@media (width<=40rem){ .sd-avatar{ width:4rem; height:4rem } }

/* ── phones (≤ 40rem, e.g. Xiaomi / Redmi at 360–393 CSS px): comfortable reading without pinch-zoom ──
   rem-based, so the phone's own font-size setting still scales everything; nothing below 13px */
@media (width<=40rem){
  .poem-lines{ font-size:1.25rem; line-height:2.625rem; letter-spacing:.05em }               /* 17 → 20 */
  .poem-lines.en{ font-size:1.1875rem; line-height:2rem; letter-spacing:0 }                  /* 17 → 19 */
  .poem-title{ font-size:1.125rem; line-height:1.75rem }                                      /* 16 → 18 */
  .caption, .caption:lang(en){ font-size:1.0625rem; line-height:2rem }                        /* 16 → 17 */
  .entry-title{ font-size:1.875rem; line-height:2.5rem }                                      /* 28 → 30 */
  .read{ font-size:1rem }                                                                     /* 15 → 16 */
  .contact{ font-size:1rem; line-height:1.625rem }                                            /* 15 → 16 */
  .day-ttl{ font-size:1.125rem }                                                              /* 17 → 18 */
  .sd-line{ font-size:.9375rem; line-height:1.625rem }                                        /* 13 → 15 */
  .sd-feed-say{ font-size:.9375rem; line-height:1.625rem }                                    /* 13 → 15 */
  .entry-meta, .site-head.slim .site-name, .strip-when, .strip-kind, .day-when, .label, .contact .k,
  .sd-toggle, .also, .also-send, .sd-feed{ font-size:.875rem }
  .also-mine{ font-size:1rem }                                /* 13 → 14 */
  .sd-kw, .sd-lead, .sd-line:lang(en) .sd-lead, .day-dir, .sd-feed-url, .sd-feed-copy, .copyright,
  .also-cities, .also-note, .sd-feed-ok, .sd-hint, .sd-edge,
  .entry-meta:lang(en), :lang(en) > .label, .label .en, .strip-kind .en, .strip-when .en{ font-size:.8125rem } /* 11–12 → 13 */
  .sd-kw{ line-height:1.25rem; white-space:normal; text-wrap:balance }
  .sd-feed-url{ overflow-wrap:anywhere }
}

/* ── two quiet tap points beside the model: ‹ the day before · the day after › ──
   the chevron sits in the margin; the invisible hit area is 44 × 72px and only grazes the edge of the model's box */
.hero{ position:relative; --hero-w:min(22.5rem, 100%, 78vw) }
@media (width<=40rem){ .hero{ --hero-w:min(22.5rem, 100% - 1.25rem) } }   /* phones: 78vw (307px) → 325px at 393, 291px at 360 */
:root[data-sd-land="1"] .hero{ --hero-w:min(22.5rem, 100%, 56vh) }
.hero-box{ width:var(--hero-w) }
.sd-tap{ position:absolute; top:50%; z-index:3; width:2.75rem; height:4.5rem; margin-top:-2.25rem; display:grid; place-items:center; border-radius:999px;
  color:var(--color-faint); opacity:.45; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:opacity var(--t-quick) var(--ease), transform var(--t-quick) var(--ease), color var(--t-quick) var(--ease) }
.sd-tap svg{ width:.5rem; height:.875rem; overflow:visible }
.sd-tap.older{ left:max(-1.5rem, calc(50% - var(--hero-w) / 2 - 2.75rem)) }
.sd-tap.newer{ right:max(-1.5rem, calc(50% - var(--hero-w) / 2 - 2.75rem)) }
@media (hover:hover) and (pointer:fine){ .sd-tap:hover{ opacity:.9; color:var(--color-secondary) } .sd-tap.older:hover{ transform:translateX(-2px) } .sd-tap.newer:hover{ transform:translateX(2px) } }
.sd-tap:active{ opacity:1; color:var(--color-secondary); transform:scale(.86) }
.sd-tap:focus-visible{ opacity:1; outline:var(--hair) solid var(--color-border); outline-offset:-.375rem }
[data-expanded=true] .sd-tap{ opacity:0; pointer-events:none; visibility:hidden }
@media (prefers-reduced-motion: reduce){ .sd-tap{ transition:opacity var(--t-quick) var(--ease) } .sd-tap:active, .sd-tap:hover{ transform:none !important } }