/* Real artwork and a compact directory with filled cover frames. */
.hero { padding-top: 118px; padding-bottom: 22px; }
.hero h1 { font-size: clamp(32px, 3.6vw, 44px); }
.fragments { margin-bottom: 26px; overflow: visible; }
.postcard-track { padding-top: 30px; padding-bottom: 30px; min-height: 274px; border-radius: 18px; scrollbar-width: thin; scrollbar-color: #b8cbc5 #ffffff45; }
.postcard-track::-webkit-scrollbar { display: block; width: 7px; height: 7px; }
.postcard-track::-webkit-scrollbar-track { border-radius: 99px; background: #ffffff45; }
.postcard-track::-webkit-scrollbar-thumb { border: 1px solid #ffffff80; border-radius: 99px; background: #b8cbc5; }
.postcard-track::-webkit-scrollbar-thumb:hover { background: #88a9a0; }
.postcard-track::-webkit-scrollbar-corner { background: transparent; border-radius: 99px; }
.postcard-slot { position: relative; }
.postcard-track::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html { scrollbar-width: thin; scrollbar-color: #b9cbc8 transparent; }
html::-webkit-scrollbar { width: 9px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: #b9cbc8; background-clip: padding-box; }
html::-webkit-scrollbar-thumb:hover { background: #8ba9a3; background-clip: padding-box; }
.postcard-visual { height: 127px; background: #edf0ed; }
.postcard-visual img { object-fit: contain; }
.postcard-title { white-space: normal; font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.postcard-back-title { margin-top: 18px; font-size: 11px; line-height: 1.45; padding-bottom: 6px; }
.postcard-note { font-size: 8px; line-height: 1.65; margin-top: 8px; max-height: 92px; overflow: auto; white-space: pre-line; scrollbar-width: thin; }
.work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.asset-card { grid-column: auto; display: flex; flex-direction: column; }
.asset-card .card-top { padding: 14px 15px 12px; }
.asset-card .category { font-size: 11px; }
.asset-card .category small { font-size: 7px; margin-left: 6px; letter-spacing: .6px; }
.asset-cover { display: block; border: 0; padding: 0; width: calc(100% - 24px); margin: 0 12px; aspect-ratio: 1000 / 830; overflow: hidden; border-radius: 7px; background: #edf0ed; position: relative; text-align: left; }
.asset-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: filter .3s; }
.asset-cover:hover img { filter: brightness(1.035); }
.asset-card .card-bottom { padding: 14px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.asset-card h3 { font-size: 12px; line-height: 1.6; min-height: 38.4px; }
.asset-card .card-bottom p { font-size: 9px; line-height: 1.8; margin-top: 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.asset-card .card-link { margin-top: auto; padding-top: 12px; font-size: 9px; }
.type-cover { display: block; width: 100%; height: 100%; padding: 17px; position: relative; background: #e5eadb; color: #56654b; }
.motion-type .five { font-size: 148px; top: 18px; left: 22px; }
.type-title { position: absolute; top: 34%; left: 18px; right: 15px; font: 400 25px/1.5 var(--serif); }
.data-type { background: #e6ede7; color: #6b8978; }
.journal-type { background: #f3e9e1; color: #9c7f6b; }
.film-type { background: #344441; color: #e0e7dd; }
.film-type::after { content: ''; position: absolute; inset: 12px; border: 1px solid #a7bcb34a; border-radius: 3px; pointer-events: none; }
.uploaded-dialog { width: min(760px, calc(100% - 36px)); }
.uploaded-dialog .dialog-frame { max-height: 57svh; }
.uploaded-dialog .work-story { white-space: pre-line; }
.uploaded-dialog .lyric-excerpt { border-left: 1px solid #c7d4c9; padding-left: 18px; color: #506659; }
.uploaded-dialog .fineprint:empty { display: none; }
.uploaded-dialog .photo-wall {
  columns: 3 180px;
  column-gap: 12px;
  margin-top: 20px;
}
.uploaded-dialog .photo-wall-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  border-radius: 6px;
  break-inside: avoid;
  background: #edf0ed;
}
html[lang=en] .asset-card h3 { font-size: 11px; }
html[lang=en] .asset-card .card-bottom p { font-size: 9px; }
html[lang=en] .postcard-back-title { font-size: 10px; }
@media (max-width: 920px) and (min-width: 641px) {
 .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .type-title { font-size: 23px; }
}
@media (max-width: 640px) {
 .hero { padding-top: 104px; padding-bottom: 20px; }
 .hero h1 { font-size: 29px; }
 .postcard-track { min-height: 260px; padding-top: 26px; padding-bottom: 28px; }
 .postcard-visual { height: 117px; }
 .postcard-note { font-size: 7.5px; max-height: 85px; }
 .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 .asset-card .card-top { padding: 12px 12px 10px; }
 .asset-card .category { font-size: 10px; }
 .asset-card .category small { font-size: 6px; letter-spacing: .3px; margin-left: 4px; }
 .asset-cover { width: calc(100% - 20px); margin: 0 10px; border-radius: 6px; }
 .asset-card .card-bottom { padding: 12px; }
 .asset-card h3 { font-size: 11px; min-height: 35.2px; }
 .asset-card .card-bottom p { font-size: 9px; }
 .asset-card .card-link { font-size: 9px; padding-top: 10px; }
 .type-cover { padding: 12px; }
 .type-title { left: 13px; right: 12px; font-size: 21px; }
 .motion-type .five { font-size: clamp(100px, 28vw, 155px); top: 11px; left: 12px; }
 .type-cover .cover-label { font-size: 5px; }
 .type-cover .cover-caption { font-size: 7px; left: 13px; bottom: 12px; }
 html[lang=en] .asset-card h3 { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
 .asset-cover img { transition: none; }
}

/* Keep the timeline free of a horizontal rail; style the story's own scrollbar. */
.postcard-track { --postcard-base: 165px; max-width: 1600px; padding: 42px 60px 50px; min-height: 0; border-radius: 0; scrollbar-width: none; scrollbar-color: auto; scroll-snap-type: none; scroll-behavior: auto; overflow-anchor: none; }
.postcard-slot { flex-basis: min(var(--postcard-base), max(80px, calc(100vw - 120px))); }
@media (max-width: 900px) { .postcard-track { --postcard-base: 160px; } }
@media (max-width: 640px) { .postcard-track { --postcard-base: 155px; } }
.postcard-track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.postcard-track::-webkit-scrollbar-track,
.postcard-track::-webkit-scrollbar-thumb,
.postcard-track::-webkit-scrollbar-corner { background: transparent; border: 0; }
.postcard-note { scrollbar-width: thin; scrollbar-color: #b9b19f transparent; padding-right: 3px; }
.postcard-note::-webkit-scrollbar { display: block; width: 5px; height: 5px; }
.postcard-note::-webkit-scrollbar-track { border-radius: 99px; background: transparent; }
.postcard-note::-webkit-scrollbar-thumb { min-height: 24px; border-radius: 99px; background: #c8bfae; }
.postcard-note::-webkit-scrollbar-thumb:hover { background: #a89d88; }
.postcard { cursor: default; }
.postcard-front { appearance: none; width: 100%; height: 100%; margin: 0; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; pointer-events: auto; }
.postcard-front:focus-visible { outline: 2px solid #7f9a8e; outline-offset: -4px; }
.postcard-back { display: flex; flex-direction: column; pointer-events: none; padding-bottom: 14px; }
.postcard.is-flipped .postcard-front { pointer-events: none; }
.postcard.is-flipped .postcard-back { pointer-events: auto; }
.postcard-back-label, .postcard-back-title { flex-shrink: 0; }
.postcard-back .postcard-note { flex: 1; min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.postcard-back .postcard-note { color: #69685d; text-align: justify; text-justify: inter-ideograph; }
.postcard-note:focus-visible { outline: 1px solid #a89d88; outline-offset: 2px; border-radius: 2px; }
.postcard-back-foot { position: static; flex-shrink: 0; margin-top: 6px; }
.postcard-back .postmark, .postcard-back .postmark-link { position: absolute; right: 11px; top: 10px; width: 24px; height: 24px; padding: 0; border: 1px dashed #a8b3a266; border-radius: 50%; }
.postcard-back .postmark { justify-content: center; font-size: 13px; line-height: 1; }
.postcard-back .postmark small { font-size: 3px; line-height: 1.2; letter-spacing: .2px; }
.postcard-back-label { padding-right: 30px; }
.postcard-back .postmark-link { z-index: 2; display: grid; place-items: center; color: #778b7b; background: #ffffff35; transition: background .18s, color .18s, transform .18s; }
.postcard-back .postmark-link svg { width: 11px; height: 11px; }
.postcard-back .postmark-link:hover { background: #ffffffc7; color: #435e4d; transform: translateY(-1px); }
.postcard-back .postmark-link:focus-visible { outline: 2px solid #718c7c; outline-offset: 2px; }
.postcard-return { position: static; flex-shrink: 0; align-self: flex-start; width: auto; margin-top: 4px; padding: 0; border: 0; background: transparent; font: 7px/1.5 var(--sans); text-align: left; cursor: pointer; }
.postcard-return:focus-visible { outline: 2px solid #718c7c; outline-offset: 2px; border-radius: 2px; }
.image-unavailable { display: none !important; }
@media (prefers-reduced-motion: reduce) { .postcard-back .postmark-link { transition: none; } }
@media (max-width: 640px) {
  .uploaded-dialog .photo-wall { columns: 2 112px; column-gap: 10px; margin-top: 16px; }
  .uploaded-dialog .photo-wall-image { margin-bottom: 10px; }
}

/* Compact, evenly spaced links using the supplied platform marks. */
.nav-bar nav.social-links {
  display: grid;
  grid-template-columns: repeat(6, 40px);
  gap: 4px;
  height: auto;
  margin: 0 18px 0 auto;
}
.nav-bar nav.social-links .social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px 2px;
  border-radius: 10px;
  color: #526a6a;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.nav-bar nav.social-links .social-link:hover { color: #334c4c; background: #ffffff78; }
.nav-bar nav.social-links .social-link:focus-visible { outline-offset: 1px; }
.social-icon {
  --icon-size: 20px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  transition: transform .2s ease;
}
.social-icon .platform-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--logo-scale, 1)) translate(var(--logo-x, 0), var(--logo-y, 0));
}
/* Align the visible artwork while keeping the supplied PNG files intact. */
.social-icon-bili { --logo-scale: 1.4164; --logo-x: .3%; --logo-y: -1%; }
.social-icon-sspai { --logo-scale: 1.3966; --logo-x: 1.8%; --logo-y: 1.8%; }
.social-icon-wechat { --logo-scale: 1.1364; --logo-y: -2.5%; }
.social-icon-jike { --logo-scale: 1.2315; --logo-x: 4.3%; --logo-y: .6%; }
.social-icon-zcool { --logo-scale: 1.2987; --logo-x: .5%; --logo-y: .5%; }
.social-icon-red .platform-logo { border-radius: 5px; }
.social-link:hover .social-icon, .social-link:focus-visible .social-icon { transform: translateY(-1px); }
.language-toggle { margin: 0 13px 0 0; }
@media (max-width: 820px) {
  .nav-about { display: none; }
  .nav-bar nav.social-links { grid-template-columns: repeat(6, 36px); gap: 3px; margin-right: 10px; }
  .social-icon { --icon-size: 18px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 90px; }
  .nav-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    height: 58px;
    min-height: 0;
    padding: 0 8px;
  }
  .brand { flex: 0 0 auto; gap: 6px; font-size: 12px; white-space: nowrap; }
  .brand-logo { width: 26px; height: 26px; border-radius: 7px; }
  .language-toggle { flex: 0 0 auto; margin: 0; padding: 5px 6px; font-size: 9px; line-height: 12px; }
  .nav-bar nav.social-links {
    flex: 1 1 218px;
    min-width: 0;
    max-width: 218px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    width: auto;
    margin: 0;
  }
  .nav-bar nav.social-links .social-link { padding: 8px 0; }
  .social-icon { --icon-size: 16px; }
  .hero { padding-top: 104px; }
}
@media (max-width: 480px) {
  .nav-shell { padding-right: 10px; padding-left: 10px; }
  .nav-bar { padding-right: 6px; padding-left: 6px; }
  .brand > span { display: none; }
  .brand-logo { width: 24px; height: 24px; }
  .nav-bar nav.social-links { max-width: 202px; }
}

/* A soft spectrum for the personal introduction. */
.nav-about {
  flex-shrink: 0;
  white-space: nowrap;
  background: linear-gradient(110deg, #fffefb 0%, #e5f3e9 25%, #e7ebfb 48%, #fae6df 72%, #fffefb 100%);
  background-size: 280% 100%;
  background-position: 0% 50%;
  box-shadow: inset 0 1px 0 #ffffffd9, 0 2px 7px #66867b14;
  transition: background-position .5s ease, box-shadow .25s ease, color .25s ease, transform .25s ease;
}
.nav-about:hover, .nav-about:focus-visible {
  color: #36564a;
  box-shadow: inset 0 1px 0 #ffffffed, 0 4px 12px #8395b22b;
  transform: translateY(-1px);
  animation: about-spectrum 3s ease-in-out infinite alternate;
}
.nav-about:active { transform: translateY(0); }
@keyframes about-spectrum {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
#about-dialog .about-facts .about-film-credit {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  color: inherit;
  white-space: pre-line;
  overflow-wrap: break-word;
}
@media (prefers-reduced-motion: reduce) {
  .nav-about { transition: none; }
  .nav-about:hover, .nav-about:focus-visible {
    animation: none;
    transform: none;
    background-position: 100% 50%;
  }
}

/* Preserve the line breaks and quiet rhythm of the poem. */
.postcard-back .postcard-note.poem-note { text-align: left; text-justify: auto; }

.postcard-back .postcard-audio { appearance: none; cursor: pointer; }
.postcard-back .postcard-audio svg { width: 13px; height: 13px; }
.postcard-back .postcard-audio.is-playing { color: #435e4d; background: #ffffffc7; }
.postcard-audio.is-playing .audio-wave { animation: postcard-audio-wave .65s ease-in-out infinite alternate; }
@keyframes postcard-audio-wave { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .postcard-audio.is-playing .audio-wave { animation: none; } }

/* Keep the circular stamp, with a visible invitation beside its action. */
.postcard-back.has-postcard-action .postcard-back-label { padding-right: 78px; }
.postcard-action-label {
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font: 7.5px/1.4 var(--sans);
  letter-spacing: 0;
  color: inherit;
  padding: 3px 0;
}
.postmark-link:hover .postcard-action-label,
.postmark-link:focus-visible .postcard-action-label { text-decoration: underline; text-underline-offset: 3px; }
.postcard-link.postmark-link svg { transition: transform .2s ease; }
.postcard-link.postmark-link:hover svg,
.postcard-link.postmark-link:focus-visible svg { transform: translate(1px, -1px); }
.postcard.is-flipped .postmark-link { animation: postcard-action-cue 1.1s ease-out .65s 2; }
@keyframes postcard-action-cue {
  0%, 100% { box-shadow: none; }
  45% { box-shadow: 0 0 0 4px #b6b2a02e, 0 0 9px #ffffffb3; }
}
html[lang=en] .postcard-action-label { font-size: 6.5px; }
@media (prefers-reduced-motion: reduce) {
  .postcard.is-flipped .postmark-link { animation: none; }
  .postcard-link.postmark-link svg { transition: none; }
  .postcard-link.postmark-link:hover svg,
  .postcard-link.postmark-link:focus-visible svg { transform: none; }
}