.ld1 {
  --w: min(660, calc(var(--ld-vw, 1440) * .86));
  --ar: calc(var(--ld-vw, 1440) / var(--ld-vh, 900));   
  --h: calc(var(--w) / var(--ar));
  --cover: max(calc(var(--ld-vw, 1440) / var(--w)), calc(var(--ld-vh, 900) / var(--h)));
}
@media (max-width: 699px) { .ld1 { --w: calc(var(--ld-vw, 390) * .86); } }


.ld1__stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1700px; perspective-origin: 50% 46%; animation: ld-fade .18s linear both; }
.ld1__sheet {
  position: relative; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  transform-style: preserve-3d; will-change: transform;
  animation: ld1-sheet 2.25s both;
}
@keyframes ld1-sheet {
  0%   { transform: translate3d(0, 42%, -2400px) rotateX(66deg) rotateY(-36deg) rotateZ(-30deg); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  38%  { transform: translate3d(0, 0, 0) rotateX(16deg) rotateY(-21deg) rotateZ(-5deg); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  52%  { transform: translate3d(0, 0, 0) rotateX(11deg) rotateY(-13deg) rotateZ(-3deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  74%  { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1); animation-timing-function: cubic-bezier(.7, 0, .84, 0); }
  100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(var(--cover)); }
}

.ld1__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ld1__in { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: inherit; }


.ld1__front {
  transform: translateZ(1px);
  background: var(--ld-paper) url(img/grain.png?v=b6b0ef57) 0 0 / 128px; color: var(--ld-ink);
  box-shadow: 0 46px 90px -34px rgba(0, 0, 0, .75), 0 18px 32px -18px rgba(0, 0, 0, .55);
}
.ld1__front .ld1__in { padding: 4.2% 5% 5%; container-type: inline-size; }
.ld1__mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: 2.4cqw; }
.ld1__date, .ld1__n { font-size: clamp(15px, 2.3cqw, 16px); line-height: 1.4; color: #4A3F39; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld1__n { justify-self: end; }
.ld1__n b { font-weight: 600; color: #8C7752; }
.ld1__logo { display: block; height: clamp(18px, 4.4cqw, 30px); width: auto; }
.ld1__rule { height: 5px; border-top: 2px solid var(--ld-ink); border-bottom: 1px solid var(--ld-ink); }
.ld1__h {
  margin: 3.2cqw 0 .6cqw; font-family: "Noto Serif TC", "Songti TC", serif; font-weight: 700;
  font-size: clamp(34px, 11.6cqw, 84px); line-height: 1.04; letter-spacing: -.035em; font-feature-settings: "palt" 1; white-space: nowrap;
  animation: ld1-print .34s cubic-bezier(.65, 0, .35, 1) .5s both;
}
.ld1__sub {
  margin: 0 0 3cqw; font-family: "Noto Serif TC", "Songti TC", serif; font-weight: 500;
  font-size: clamp(18px, 4.6cqw, 32px); line-height: 1.2; letter-spacing: -.02em; white-space: nowrap;
  animation: ld1-print .3s cubic-bezier(.65, 0, .35, 1) .66s both;
}
@keyframes ld1-print { from { clip-path: inset(0 100% 0 0); transform: translateY(.06em); } to { clip-path: inset(0); } }
.ld1__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; min-height: 0; border-top: 1px solid rgba(35, 24, 21, .4); }
.ld1__col { display: flex; flex-direction: column; gap: 6px; padding: 2.6cqw 2.6cqw 0; border-left: 1px solid rgba(35, 24, 21, .22); min-width: 0; overflow: hidden;
  animation: ld1-col .4s cubic-bezier(.16, 1, .3, 1) both; }
.ld1__col:first-child { border-left: 0; padding-left: 0; }
.ld1__col:nth-child(1) { animation-delay: .78s; } .ld1__col:nth-child(2) { animation-delay: .86s; } .ld1__col:nth-child(3) { animation-delay: .94s; }
@keyframes ld1-col { from { opacity: 0; transform: translateY(8px); } }
.ld1__media { font-size: 15px; line-height: 1.4; font-weight: 500; color: #4A3F39; white-space: nowrap; }
.ld1__media i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ld-gold); vertical-align: 2px; }
.ld1__t { font-size: clamp(15px, 2.6cqw, 18px); line-height: 1.5; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ld1__shop { font-size: 15px; line-height: 1.4; color: #4A3F39; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.ld1__back {
  transform: rotateY(180deg) translateZ(1px); border-radius: 10px;
  background: var(--ld-ink) url(img/grain-dark.png?v=20c47549) 0 0 / 128px;
  box-shadow: 0 0 0 1px rgba(244, 242, 238, .24), 0 46px 90px -34px rgba(0, 0, 0, .75);
}
.ld1__back .ld1__in { container-type: size; }

.ld1__view { position: absolute; inset: 0; }
.ld1__vl { position: absolute; top: 11.4cqh; left: 4.5cqw; font-family: "Noto Serif TC", "Songti TC", serif; font-weight: 700; font-size: 9.3cqw; line-height: 1.11; letter-spacing: -.035em; white-space: nowrap; color: var(--ld-paper); }
.ld1__vl--r { top: 27.9cqh; left: auto; right: 4.5cqw; }
.ld1__dot { position: absolute; left: 6cqw; bottom: 6cqw; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ld-gold-dark); }
.ld1__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ld-gold); }

@media (max-width: 699px) {
  .ld1__h { font-size: clamp(34px, 14.6cqw, 60px); margin-top: 5cqw; }
  .ld1__sub { font-size: clamp(18px, 6.6cqw, 28px); margin-bottom: 4cqw; }
  .ld1__mast { grid-template-columns: auto 1fr; } .ld1__date { display: none; }
  .ld1__cols { grid-template-columns: minmax(0, 1fr); }
  .ld1__col { flex-direction: row; flex-wrap: wrap; column-gap: 10px; padding: 3.4cqw 0; border-left: 0; border-top: 1px solid rgba(35, 24, 21, .22); }
  .ld1__col:first-child { border-top: 0; }
  .ld1__t { flex-basis: 100%; -webkit-line-clamp: 2; font-size: 16px; }
  .ld1__vl { top: 9.2cqh; left: 5.1cqw; font-size: 11.2cqw; }
  .ld1__vl--r { top: 15.3cqh; left: 5.1cqw; right: auto; }
}


.ld1__front { animation: ld1-swap-off 1ms linear 1.42s both; }
.ld1__back { animation: ld1-swap-on 1ms linear 1.42s both; }
@keyframes ld1-swap-off { to { opacity: 0; } }
@keyframes ld1-swap-on { from { opacity: 0; } to { opacity: 1; } }