.jcard {
    margin: 8px 0;
    background: linear-gradient(150deg, rgba(228,230,234,0.42), rgba(198,202,208,0.32) 48%, rgba(232,234,238,0.4));
    backdrop-filter: blur(40px) saturate(1.15) brightness(1.04);
    -webkit-backdrop-filter: blur(40px) saturate(1.15) brightness(1.04);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 26px;
    padding: 18px 14px 14px;
    box-shadow: 0 20px 50px -22px rgba(40,45,55,0.35), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(120,128,140,0.25);
    max-width: none !important;
    width: 100%;
  }
  .jcard-head { text-align: center; margin-bottom: 12px; }
  .jcard-kicker {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 3px;
    color: var(--gold, #B8860B); font-weight: 700;
  }
  .jcard-title {
    font-family: var(--serif); font-style: italic; font-weight: 600;
    font-size: 20px; margin-top: 4px; color: var(--text);
  }
  .jcard-sub {
    font-family: var(--mono); font-size: 10px; color: var(--text-faint);
    letter-spacing: 1.5px; margin-top: 5px;
  }
  .jcard-stage {
    /* 284 = 放大后那张的高度(276) + 一点余量。原来 238 卡得死死的，手指底下那张
       放大到 232 就顶格了，等于白放大；给够高度它才真能长起来。左右照旧溢出卡片
       （最右那条被卡片边缘切掉半张就是这个效果，Chai 要的就是这个劲儿）。 */
    height: 284px; display: flex; align-items: center; justify-content: center;
    overflow: visible;
  }
  .jcard-loading {
    font-size: 12px; color: var(--text-faint); letter-spacing: 1px;
  }
  .mc-row {
    display: flex; align-items: center; justify-content: center;
    position: relative; touch-action: pan-y; gap: 8px;
  }
  .mc-bar {
    flex: none; padding: 0; border: none; cursor: pointer;
    border-radius: 11px; overflow: hidden; position: relative;
    background-size: cover; background-position: center;
    box-shadow: 0 7px 16px -10px rgba(30,20,5,0.28), inset 0 0 0 1px rgba(255,255,255,0.06);
    will-change: width, height;
    transition: none;
  }
  .mc-bar::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(20,14,5,0.55));
    opacity: 0.85; pointer-events: none;
  }
  .mc-bar-label {
    position: absolute; left: 0; right: 0; bottom: 9px; z-index: 2;
    text-align: center; color: #fff;
    font-family: var(--serif); font-style: italic; font-weight: 600;
    font-size: 13px; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    pointer-events: none;
  }
  .jcard-hint {
    text-align: center; margin-top: 8px;
    font-family: var(--serif); font-style: italic;
    font-size: 12px; color: var(--text-muted);
  }
  /* 旅行卡片旁边他说的话：不进气泡，浅色小字居中浮在卡片上方 */
  .jcard-caption {
    text-align: center; margin: 0 auto 2px; max-width: 88%;
    font-family: var(--serif); font-style: italic;
    font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
  }
  @media (prefers-color-scheme: dark) {
    .jcard {
      background: linear-gradient(150deg, rgba(58,56,54,0.6), rgba(48,46,44,0.5) 48%, rgba(58,56,54,0.55));
      border-color: rgba(255,255,255,0.12);
      box-shadow: 0 20px 50px -22px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.3);
    }
  }

  /* ── Journey 故事浮层（点照片全屏打开：大图 + 打字机旁白 + 音乐） ── */
  .jstory-overlay {
    position: fixed; inset: 0; z-index: 120;
    background: #14100b;
    animation: jstoryFade 0.3s ease;
  }
  @keyframes jstoryFade { from { opacity: 0; } }
  .jstory {
    position: relative; width: 100%; height: 100%;
    background: #14100b; overflow: hidden;
    display: flex; flex-direction: column;
    user-select: none; touch-action: pan-y;
  }
  .jstory-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 14px 10px;
    display: flex; align-items: center;
    background: linear-gradient(rgba(0,0,0,0.5), transparent);
  }
  .jstory-close {
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: transparent; color: #fff; cursor: pointer;
    font-size: 26px; line-height: 1; display: grid; place-items: center;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
  }
  .jstory-photo {
    position: relative; flex: 1; overflow: hidden;
    background-size: cover; background-position: center;
  }
  .jstory-photo-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform-origin: 58% 42%;
    animation: jstoryKen 20s ease-in-out infinite alternate;
  }
  @keyframes jstoryKen { 0% { transform: scale(1.04); } 100% { transform: scale(1.16); } }
  @media (prefers-reduced-motion: reduce) { .jstory-photo-bg { animation: none; } }
  .jstory-centerscrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(120% 80% at 50% 45%, rgba(8,5,3,0.28), rgba(8,5,3,0.62) 78%),
      linear-gradient(rgba(8,5,3,0.5), transparent 30%, transparent 62%, rgba(8,5,3,0.75));
  }
  .jstory-cap {
    position: absolute; top: calc(70px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    pointer-events: none; text-align: center;
  }
  .jstory-cap-en {
    font-family: var(--mono); font-size: 10px; letter-spacing: 3px;
    text-transform: uppercase; color: rgba(255,255,255,0.72);
  }
  .jstory-cap-place {
    border: none; background: transparent; padding: 0; cursor: pointer;
    pointer-events: auto;
    font-family: var(--serif); font-style: italic; font-weight: 700;
    font-size: 22px; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.6);
  }
  .jstory-cap-place .cap-replay-hint { font-size: 14px; font-style: normal; color: var(--gold, #c89968); opacity: 0.85; margin-left: 8px; }
  .jstory-cap-date {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px;
    color: rgba(255,255,255,0.6);
  }
  .jstory-narr {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 34px; pointer-events: none;
  }
  .jstory-narr-line {
    margin: 0; max-width: 100%;
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 23px; line-height: 2; letter-spacing: 0.3px;
    color: #fff; text-align: center;
    text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .jstory-narr-line.out { opacity: 0; transform: translateY(-8px); }
  .jstory-narr-cursor {
    display: inline-block; margin-left: 2px; font-style: normal;
    color: var(--gold, #c89968); animation: jstoryBlink 1s steps(1) infinite;
  }
  @keyframes jstoryBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
  .jstory-settled {
    position: absolute; left: 0; right: 0; bottom: 152px; z-index: 3;
    padding: 0 24px; pointer-events: auto;
    animation: jstoryFade 0.6s ease;
  }
  .jstory-settled-note {
    margin: 0; max-width: 68%; text-align: left;
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 12.5px; line-height: 1.7; letter-spacing: 0.2px;
    color: rgba(255,255,255,0.9);
    /* 贴字的紧阴影。原来是 0 2px 14px——14px 模糊配 21px 行距，行与行的阴影会互相叠加，
       糊成一整块灰雾，看着像给文字加了个灰色背景框。长文最明显，但收起态那 4 行同样看得出来
       （Chai 2026-07-28 两次都抓到），所以基础样式就用紧的，展开态不再单独覆盖。 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.45);
    overflow: hidden;
    /* 默认 4 行；展开后无限制 */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  }
  .jstory-settled-note.expanded {
    display: block; -webkit-line-clamp: unset;
    /* 长文不铺满整屏——照片是主角，字压上去一整版就什么都看不见了。
       给个高度上限，超出的部分在里面滚（截断处会露出小半行，本身就是"还有"的提示）。 */
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
    overscroll-behavior: contain;        /* 滚到底不带动外面的浮层 */
    scrollbar-width: none;
  }
  .jstory-settled-note.expanded::-webkit-scrollbar { display: none; }
  .jstory-settled-more {
    display: inline-block; margin-top: 6px;
    font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: 1px;
    color: rgba(255,255,255,0.55);
    background: none; border: none; padding: 0; cursor: pointer;
    text-shadow: none; pointer-events: auto;
  }
  .jstory-foot {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 0 22px calc(30px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(transparent, rgba(8,5,3,0.6));
  }
  .jstory-player {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 16px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .jstory-player-play {
    flex: none; width: 40px; height: 40px; border: none; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; color: #fff;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4);
  }
  .jstory-player-body { flex: 1; min-width: 0; }
  .jstory-player-meta { display: flex; align-items: baseline; gap: 8px; }
  .jstory-player-title {
    font-family: var(--serif); font-weight: 600; font-size: 14px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .jstory-player-artist {
    font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.75); white-space: nowrap;
  }
  .jstory-eq { display:inline-flex; gap:2px; align-items:flex-end; height:11px; margin-left:auto; }
  .jstory-eq i { width:2.5px; background:var(--gold,#c89968); border-radius:1px; animation:jstoryEq 0.9s ease-in-out infinite; }
  .jstory-eq i:nth-child(1) { height:5px; animation-delay:-0.2s; }
  .jstory-eq i:nth-child(2) { height:10px; animation-delay:-0.5s; }
  .jstory-eq i:nth-child(3) { height:7px; }
  @keyframes jstoryEq { 0%,100% { transform:scaleY(0.4); } 50% { transform:scaleY(1); } }
  .jstory-player-track {
    height: 3px; border-radius: 2px; margin: 8px 0 5px;
    background: rgba(255,255,255,0.10); overflow: hidden; cursor: pointer;
  }
  .jstory-player-fill { height: 100%; width: 100%; border-radius: 2px; transform-origin: left; transform: scaleX(0); transition: transform 0.25s linear; will-change: transform; }
  .jstory-player-times {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.8);
  }
  .jstory-dots {
    position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 12;
    display: flex; gap: 7px; justify-content: center;
  }
  .jstory-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.2s;
  }
  .jstory-dots span.on { width: 20px; border-radius: 3px; background: var(--gold, #c89968); }


.journey-real{--text:#2a2723;--text-muted:#6b6357;--text-faint:#817667;--gold:#ad8156;--mono:Menlo,monospace;--serif:"Songti SC",Georgia,serif;--sans:"PingFang SC",sans-serif}.jstory-overlay{--serif:"Songti SC",Georgia,serif;--mono:Menlo,monospace;--sans:"PingFang SC",sans-serif;--gold:#c89968}.jstory-overlay[hidden]{display:none}.jstory{max-width:920px;margin:auto}.jstory-player-play:focus-visible{outline:2px solid white}.jstory-cap-date{font-family:var(--sans);letter-spacing:0}.mc-bar:focus-visible{outline:2px solid #823448;outline-offset:4px}.jstory-player-meta{flex-wrap:wrap}.jstory-player-artist{white-space:normal}
/* Desktop preserves the original portrait story composition. */
@media (min-width: 640px) {
  .jstory-overlay { display:grid; place-items:center; padding:24px; box-sizing:border-box; background:rgba(25,21,18,.72); }
  .jstory { width:min(390px, calc((100dvh - 48px) * .4875)); height:min(800px, calc(100dvh - 48px)); max-width:100%; margin:0; border-radius:28px; box-shadow:0 24px 80px rgba(0,0,0,.45); }
}