/* Storyline album: original cold-glass web material and mobile photo journal. */
:root {
  --album-canvas: #eef0f5;
  --album-surface: rgba(249, 250, 253, .76);
  --album-surface-strong: rgba(249, 250, 253, .92);
  --album-ink: #20232c;
  --album-muted: #686e7c;
  --album-line: rgba(55, 61, 76, .12);
  --album-accent: #df506e;
  --album-accent-strong: #c93f5c;
  --album-radius: 30px;
  --album-pill: 999px;
  --album-shadow: 0 28px 80px rgba(70, 76, 96, .14);
  --album-ease: cubic-bezier(.16, 1, .3, 1);
}

body.album-story-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(223, 80, 110, .08), transparent 26rem),
    linear-gradient(180deg, #f6f7fa, var(--album-canvas));
  color: var(--album-ink);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
}
.album-story-page *, .album-story-page *::before, .album-story-page *::after { box-sizing: border-box; }
.album-story-page a, .album-story-page button { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.album-story-page img { display: block; max-width: 100%; }

.album-story-nav {
  align-items: center;
  background: rgba(246, 247, 250, .8);
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: var(--album-pill);
  box-shadow: 0 14px 40px rgba(52, 58, 74, .09), inset 0 1px 0 rgba(255, 255, 255, .84);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  height: 70px;
  left: 50%;
  max-width: 1280px;
  padding: 0 18px 0 24px;
  position: fixed;
  top: 16px;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  z-index: 40;
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
}
.album-story-brand { align-items: center; display: flex; font-size: 15px; font-weight: 800; gap: 9px; white-space: nowrap; }
.album-story-brand b { color: var(--album-accent); }
.album-story-nav > nav { display: flex; gap: 2px; }
.album-story-nav > nav a { align-items: center; border-radius: var(--album-pill); color: #5f6572; display: flex; font-size: 13px; font-weight: 700; gap: 6px; height: 40px; justify-content: center; padding: 0 13px; transition: background .25s ease, color .25s ease, transform .25s var(--album-ease); white-space: nowrap; }
.album-story-nav > nav a:hover { background: rgba(255, 255, 255, .78); color: var(--album-ink); transform: translateY(-1px); }
.album-story-nav > nav a.is-active { background: var(--album-accent); color: #fdfdff; box-shadow: 0 9px 22px rgba(223, 80, 110, .25); }
.album-story-couple { display: flex; justify-self: end; }
.album-story-couple img { border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; height: 34px; object-fit: cover; width: 34px; }
.album-story-couple img + img { margin-left: -9px; }

.album-story-cover { height: 100dvh; min-height: 680px; overflow: hidden; position: relative; }
.album-story-cover > img { height: 100%; object-fit: cover; width: 100%; }
.album-story-cover-shade { background: linear-gradient(90deg, rgba(18, 21, 29, .72), rgba(18, 21, 29, .24) 64%, rgba(18, 21, 29, .12)), linear-gradient(180deg, rgba(18, 21, 29, .16), rgba(18, 21, 29, .42)); inset: 0; position: absolute; }
.album-story-cover-copy { bottom: clamp(56px, 10vh, 110px); color: #f8f9fc; left: max(44px, calc((100vw - 1220px) / 2)); max-width: 660px; position: absolute; right: 44px; }
.album-story-cover-copy h1 { font-size: clamp(46px, 6.2vw, 88px); font-weight: 900; letter-spacing: -.065em; line-height: 1.02; margin: 0; text-shadow: 0 9px 32px rgba(12, 15, 22, .25); text-wrap: balance; }
.album-story-cover-copy > p { color: rgba(255, 255, 255, .76); font-size: 16px; line-height: 1.75; margin: 22px 0 0; max-width: 38em; }
.album-story-cover-copy dl { display: flex; gap: 30px; margin: 32px 0 0; }
.album-story-cover-copy dl div { border-left: 1px solid rgba(255, 255, 255, .35); padding-left: 13px; }
.album-story-cover-copy dt { color: rgba(255, 255, 255, .56); font-size: 11px; }
.album-story-cover-copy dd { font-size: 15px; font-weight: 750; margin: 5px 0 0; }
.album-story-primary, .album-story-back { align-items: center; border-radius: var(--album-pill); display: inline-flex; font-size: 13px; font-weight: 800; gap: 8px; min-height: 48px; padding: 0 19px; white-space: nowrap; }
.album-story-primary { background: var(--album-accent); color: #fdfdff !important; margin-top: 32px; }
.album-story-back { background: rgba(18, 21, 29, .28); border: 1px solid rgba(255, 255, 255, .32); color: #fdfdff !important; margin-bottom: 22px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

.album-story-index, .album-story-media { margin: 0 auto; max-width: 1240px; padding: 130px 42px 170px; }
.album-story-index > header, .album-story-media > header { max-width: 720px; }
.album-story-index > header h2, .album-story-media > header h2 { font-size: clamp(36px, 5vw, 68px); letter-spacing: -.055em; line-height: 1.08; margin: 0; }
.album-story-index > header p, .album-story-media > header p { color: var(--album-muted); font-size: 16px; line-height: 1.75; margin: 18px 0 0; }
.album-story-chapters { display: grid; gap: 110px; margin-top: 72px; }
.album-story-chapter { align-items: center; display: grid; gap: clamp(44px, 7vw, 100px); grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr); }
.album-story-chapter:nth-child(even) { grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); }
.album-story-chapter:nth-child(even) .album-story-chapter-media { grid-column: 2; }
.album-story-chapter:nth-child(even) .album-story-chapter-copy { grid-column: 1; grid-row: 1; }
.album-story-chapter-media { background: #dfe2e8; border-radius: calc(var(--album-radius) + 10px); box-shadow: var(--album-shadow); display: grid; gap: 3px; height: min(72vh, 720px); min-height: 540px; overflow: hidden; }
.album-story-mosaic img { height: 100%; min-height: 0; object-fit: cover; transition: transform .8s var(--album-ease), filter .35s ease; width: 100%; }
.album-story-chapter-media:hover img { filter: saturate(1.04); transform: scale(1.025); }
.album-story-mosaic.is-count-1 { grid-template-columns: 1fr; }
.album-story-mosaic.is-count-2 { grid-template-columns: 1.2fr .8fr; }
.album-story-mosaic.is-count-3, .album-story-mosaic.is-count-4 { grid-template-columns: 1.2fr .8fr; grid-template-rows: 1fr 1fr; }
.album-story-mosaic.is-count-3 img:first-child, .album-story-mosaic.is-count-4 img:first-child { grid-row: 1 / 3; }
.album-story-mosaic.is-count-4 img:nth-child(4) { display: none; }
.album-story-placeholder { align-items: center; color: var(--album-muted); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.album-story-placeholder i { color: var(--album-accent); font-size: 42px; }
.album-story-chapter-copy { max-width: 410px; }
.album-story-author { align-items: center; display: flex; gap: 12px; }
.album-story-author img { border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; height: 44px; object-fit: cover; width: 44px; }
.album-story-author span { display: flex; flex-direction: column; gap: 3px; }
.album-story-author strong { font-size: 13px; }
.album-story-author small { color: var(--album-muted); font-size: 11px; }
.album-story-chapter-copy h3 { font-size: clamp(34px, 4vw, 58px); letter-spacing: -.055em; line-height: 1.08; margin: 28px 0 0; }
.album-story-chapter-copy > p { color: var(--album-muted); line-height: 1.8; margin: 18px 0 0; }
.album-story-chapter-copy dl { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 30px 0; }
.album-story-chapter-copy dl div { border-top: 1px solid var(--album-line); padding-top: 12px; }
.album-story-chapter-copy dt { color: var(--album-muted); font-size: 11px; }
.album-story-chapter-copy dd { font-size: 14px; font-weight: 750; margin: 5px 0 0; }
.album-story-chapter-copy > a { align-items: center; color: var(--album-accent-strong); display: inline-flex; font-size: 14px; font-weight: 800; gap: 8px; }

.album-story-media { max-width: 1320px; }
.album-story-media-grid { display: grid; gap: 58px 22px; grid-template-columns: repeat(12, 1fr); margin-top: 72px; }
.album-story-frame { grid-column: span 6; margin: 0; min-width: 0; }
.album-story-frame.is-feature { grid-column: 1 / -1; }
.album-story-frame:nth-child(5n) { grid-column: 3 / 11; }
.album-story-frame button, .album-story-frame video { background: #181b22; border: 0; border-radius: var(--album-radius); box-shadow: var(--album-shadow); display: block; height: min(68vh, 720px); overflow: hidden; padding: 0; width: 100%; }
.album-story-frame:not(.is-feature) button, .album-story-frame:not(.is-feature) video { height: min(58vw, 620px); }
.album-story-frame button { cursor: zoom-in; }
.album-story-frame img, .album-story-frame video { height: 100%; object-fit: cover; width: 100%; }
.album-story-frame button img { transition: transform .8s var(--album-ease), filter .3s ease; }
.album-story-frame button:hover img { filter: saturate(1.04); transform: scale(1.025); }
.album-story-frame figcaption { align-items: baseline; display: flex; gap: 20px; justify-content: space-between; padding: 16px 5px 0; }
.album-story-frame figcaption strong { font-size: 14px; }
.album-story-frame figcaption time { color: var(--album-muted); font-size: 12px; white-space: nowrap; }
.album-story-empty { align-items: center; background: var(--album-surface); border: 1px solid rgba(255, 255, 255, .72); border-radius: var(--album-radius); display: flex; flex-direction: column; margin-top: 58px; padding: 70px 24px; text-align: center; }
.album-story-empty > i { color: var(--album-accent); font-size: 44px; }
.album-story-empty h2 { font-size: 26px; margin: 18px 0 8px; }
.album-story-empty p { color: var(--album-muted); line-height: 1.7; margin: 0; max-width: 34em; }

.album-story-lightbox { background: #0d0f14; border: 0; color: #f6f7fa; height: 100dvh; margin: 0; max-height: none; max-width: none; padding: 0; width: 100vw; }
.album-story-lightbox::backdrop { background: rgba(6, 8, 12, .94); }
.album-story-lightbox[open] { align-items: center; display: grid; grid-template-columns: 74px 1fr 74px; grid-template-rows: 68px 1fr; }
.album-story-lightbox-bar { align-items: center; display: flex; grid-column: 1 / -1; justify-content: space-between; padding: 12px 18px; }
.album-story-lightbox-bar span { color: rgba(255, 255, 255, .62); font-size: 13px; }
.album-story-lightbox-bar button, .album-story-lightbox-arrow { align-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; color: #f6f7fa; cursor: pointer; display: flex; height: 44px; justify-content: center; padding: 0; width: 44px; }
.album-story-lightbox-arrow { justify-self: center; }
.album-story-lightbox-stage { align-items: center; align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; min-height: 0; overflow: hidden; padding: 0 12px 18px; touch-action: pan-y; }
.album-story-lightbox-stage img { height: 100%; max-height: calc(100dvh - 118px); object-fit: contain; width: 100%; }
.album-story-lightbox-stage p { color: rgba(255, 255, 255, .7); font-size: 13px; margin: 12px 0 0; min-height: 20px; text-align: center; }
.album-story-lightbox.is-switching .album-story-lightbox-stage img { opacity: .35; transform: scale(.985); }
.album-story-lightbox-stage img { transition: opacity .2s ease, transform .3s var(--album-ease); }

@media (max-width: 1080px) {
  .album-story-nav { grid-template-columns: auto 1fr auto; }
  .album-story-nav > nav a { padding: 0 9px; }
  .album-story-nav > nav a span { display: none; }
}

@media (max-width: 760px) {
  .album-story-page { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .album-story-nav { display: none; }
  .album-story-cover { height: 100dvh; min-height: 680px; }
  .album-story-cover-shade { background: linear-gradient(180deg, rgba(18, 21, 29, .2), rgba(18, 21, 29, .18) 36%, rgba(18, 21, 29, .78)); }
  .album-story-cover-copy { bottom: 112px; left: 22px; right: 22px; }
  .album-story-cover-copy h1 { font-size: clamp(42px, 13vw, 58px); line-height: 1.04; }
  .album-story-cover-copy > p { font-size: 14px; line-height: 1.65; margin-top: 15px; }
  .album-story-cover-copy dl { gap: 18px; margin-top: 22px; }
  .album-story-cover-copy dl div { padding-left: 10px; }
  .album-story-primary { margin-top: 23px; min-height: 44px; }
  .album-story-back { margin-bottom: 16px; min-height: 42px; }
  .album-story-index, .album-story-media { padding: 92px 16px 120px; }
  .album-story-index > header, .album-story-media > header { padding: 0 6px; }
  .album-story-index > header h2, .album-story-media > header h2 { font-size: clamp(36px, 11vw, 48px); }
  .album-story-chapters { gap: 76px; margin-top: 46px; }
  .album-story-chapter, .album-story-chapter:nth-child(even) { display: flex; flex-direction: column; gap: 28px; }
  .album-story-chapter:nth-child(even) .album-story-chapter-media, .album-story-chapter:nth-child(even) .album-story-chapter-copy { grid-column: auto; grid-row: auto; }
  .album-story-chapter-media { border-radius: var(--album-radius); height: min(70dvh, 620px); min-height: 500px; width: 100%; }
  .album-story-mosaic.is-count-2, .album-story-mosaic.is-count-3, .album-story-mosaic.is-count-4 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .album-story-mosaic.is-count-2 img:not(:first-child), .album-story-mosaic.is-count-3 img:not(:first-child), .album-story-mosaic.is-count-4 img:not(:first-child) { display: none; }
  .album-story-mosaic.is-count-3 img:first-child, .album-story-mosaic.is-count-4 img:first-child { grid-row: auto; }
  .album-story-chapter-copy { max-width: none; padding: 0 7px; width: 100%; }
  .album-story-chapter-copy h3 { font-size: 38px; margin-top: 22px; }
  .album-story-chapter-copy > p { font-size: 14px; }
  .album-story-media-grid { display: grid; gap: 48px; grid-template-columns: 1fr; margin-top: 48px; }
  .album-story-frame, .album-story-frame.is-feature, .album-story-frame:nth-child(5n) { grid-column: 1; }
  .album-story-frame button, .album-story-frame video, .album-story-frame:not(.is-feature) button, .album-story-frame:not(.is-feature) video { border-radius: var(--album-radius); height: min(74dvh, 640px); }
  .album-story-frame figcaption { align-items: flex-start; flex-direction: column; gap: 5px; }
  .album-story-lightbox[open] { grid-template-columns: 1fr; grid-template-rows: 64px 1fr 64px; }
  .album-story-lightbox-stage { grid-column: 1; grid-row: 2; padding: 0 8px 10px; }
  .album-story-lightbox-arrow { bottom: calc(12px + env(safe-area-inset-bottom)); grid-row: 3; position: absolute; }
  .album-story-lightbox-arrow.is-prev { left: 18px; }
  .album-story-lightbox-arrow.is-next { right: 18px; }
  .album-story-page .lg-mobile-dock { align-items: center; background: color-mix(in srgb, var(--album-surface-strong) 84%, transparent); border: 1px solid rgba(255, 255, 255, .7); border-radius: 26px; bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: var(--album-shadow), inset 0 1px 0 rgba(255, 255, 255, .72); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); left: 12px; padding: 6px; position: fixed; right: 12px; z-index: 2147480800; -webkit-backdrop-filter: blur(25px) saturate(1.6); backdrop-filter: blur(25px) saturate(1.6); }
  .album-story-page .lg-mobile-dock :where(a, button) { align-items: center; appearance: none; background: transparent; border: 0; border-radius: 19px; color: var(--album-muted); display: flex; flex-direction: column; font: 650 10px/1 system-ui, sans-serif; gap: 5px; height: 52px; justify-content: center; margin: 0; min-width: 0; padding: 0; }
  .album-story-page .lg-mobile-dock :where(a, button) i { font-size: 19px; font-style: normal; }
  .album-story-page .lg-mobile-dock :where(a, button).is-active { background: var(--album-ink); box-shadow: 0 10px 24px rgba(32, 35, 44, .22); color: var(--album-canvas); transform: translateY(-5px); }
}

@media (prefers-color-scheme: dark) {
  :root {
    --album-canvas: #171920;
    --album-surface: rgba(35, 38, 48, .76);
    --album-surface-strong: rgba(35, 38, 48, .92);
    --album-ink: #f0f2f7;
    --album-muted: #a6abb7;
    --album-line: rgba(255, 255, 255, .1);
    --album-shadow: 0 28px 80px rgba(4, 6, 11, .3);
  }
  body.album-story-page { background: radial-gradient(circle at 12% 12%, rgba(223, 80, 110, .08), transparent 26rem), linear-gradient(180deg, #1d2028, var(--album-canvas)); }
  .album-story-nav { background: rgba(31, 34, 43, .82); border-color: rgba(255, 255, 255, .12); box-shadow: 0 14px 40px rgba(4, 6, 11, .24), inset 0 1px 0 rgba(255, 255, 255, .08); }
  .album-story-nav > nav a { color: #b3b8c4; }
  .album-story-nav > nav a:hover { background: rgba(255, 255, 255, .07); color: var(--album-ink); }
  .album-story-empty { border-color: rgba(255, 255, 255, .1); }
}

@media (prefers-reduced-motion: reduce) {
  .album-story-page *, .album-story-page *::before, .album-story-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .album-story-nav, .album-story-back, .album-story-page .lg-mobile-dock { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .album-story-nav, .album-story-page .lg-mobile-dock { background: var(--album-surface-strong); }
}