/* ==========================================================================
   私人书卷 · refine
   Bigger calligraphy, a real paper-flip-in, folio frames, brush titles.
   ========================================================================== */

/* --- the ink is the first impression: larger, and it follows the pointer - */

.fp-hero__ink {
  flex: 0 0 auto;
  width: min(1700px, 92vw, 140vh);
  translate:
    calc(var(--fp-mx, 0) * 48px)
    calc(var(--fp-my, 0) * 38px);
  rotate: calc(var(--fp-mx, 0) * 0.9deg);
  transition:
    translate 0.36s var(--fp-ease),
    rotate 0.5s var(--fp-ease),
    opacity 1.25s ease,
    filter 1.55s ease,
    transform 1.7s var(--fp-ease);
  will-change: translate, rotate, filter, opacity;
}

.fp-hero__ink img {
  transform: none;
  transition: none;
}

/* --- section titles in brush script ------------------------------------- */

.fp-title__main h2,
.fp-side-title h2,
.fp-guestbook__lead h2,
.fp-music__info h3,
.article-reader__head h2 {
  font-family: var(--brush-font);
  font-weight: 400;
  letter-spacing: 0.075em;
}

.fp-title__main h2 {
  font-size: clamp(48px, 5.15vw, 74px);
  line-height: 1.06;
}

.fp-side-title h2 {
  font-size: clamp(48px, 5vw, 70px);
  line-height: 1.08;
}

.fp-guestbook__lead h2 {
  font-size: clamp(64px, 7vw, 98px);
  line-height: 1.06;
  letter-spacing: 0.055em;
}

.fp-music__info h3 {
  font-size: clamp(32px, 3.3vw, 45px);
  line-height: 1.18;
}

.article-reader__head h2 {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.28;
  letter-spacing: 0.04em;
}

.fp-article-card__title {
  font-family: "STKaiti", "KaiTi", "Kaiti SC", var(--serif);
  font-size: clamp(25px, 2.25vw, 33px);
  line-height: 1.3;
}

.fp-brand__copy b,
.fp-avatar-copy b,
.fp-footer__brand b {
  font-family: "STKaiti", "KaiTi", "Kaiti SC", var(--serif);
}

/* --- article sheets: deeper perspective, double folio rule, stronger entry */

.fp-article-stage {
  perspective: 1000px;
}

.fp-article-shell {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 105px, -120px) rotateX(22deg) scale(0.9);
  transform-origin: 50% 70%;
  transition:
    opacity 0.65s ease var(--fp-delay, 0s),
    transform 1.05s var(--fp-ease) var(--fp-delay, 0s),
    filter 0.7s ease var(--fp-delay, 0s);
  will-change: opacity, transform, filter;
}

.fp-article-shell.is-inview {
  opacity: 1;
  filter: none;
  transform: none;
}

.fp-article-shell::before {
  top: 17px;
  right: 4px;
  left: 20px;
  height: calc(100% - 2px);
  background: #e9dfcc;
  border-color: rgba(21, 21, 20, 0.14);
  transform: rotate(2.4deg) translate(19px, 7px);
  opacity: 0.98;
}

.fp-article-shell::after {
  top: 34px;
  right: 20px;
  left: 4px;
  height: calc(100% - 5px);
  background: #cbbda5;
  border-color: rgba(21, 21, 20, 0.12);
  transform: rotate(-2.3deg) translate(-19px, 16px);
  opacity: 0.86;
}

.fp-article-shell:hover::before {
  transform: rotate(3.4deg) translate(24px, 12px);
}

.fp-article-shell:hover::after {
  transform: rotate(-3.1deg) translate(-23px, 23px);
}

.fp-article-card {
  transform-style: preserve-3d;
  transform:
    perspective(1000px)
    translateZ(0)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    rotateZ(var(--rot, 0deg));
  will-change: transform;
}

.fp-article-shell:nth-child(1) .fp-article-card {
  --rx: 3.5deg;
  --ry: -7.5deg;
}

.fp-article-shell:nth-child(2) .fp-article-card {
  --rx: -3deg;
  --ry: 7.5deg;
}

.fp-article-shell:nth-child(3) .fp-article-card {
  --rx: 4deg;
  --ry: -5.8deg;
}

.fp-article-shell:hover .fp-article-card {
  filter:
    drop-shadow(11px 16px 0 rgba(80, 70, 52, 0.1))
    drop-shadow(0 38px 32px rgba(32, 28, 21, 0.24));
  transform:
    perspective(1000px)
    translate3d(0, -13px, 26px)
    scale(1.012)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    rotateZ(0deg);
}

/* The sticky-note inner border becomes a mounted double folio rule. */

.fp-article-card::before {
  border: 0;
  background: none;
}

.fp-article-card__frame {
  position: absolute;
  z-index: 2;
  inset: 13px;
  border: 1px solid rgba(21, 21, 20, 0.29);
  pointer-events: none;
}

.fp-article-card__frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(21, 21, 20, 0.13);
}

.fp-article-card__frame::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -21px;
  width: 7px;
  height: 44px;
  background: #d8cdb8;
  border: 1px solid rgba(21, 21, 20, 0.18);
  transform: translateY(-50%);
}

/* --- the files live inside a stiff paper folio, not a sticky note -------- */

.fp-sound-files {
  border: 1px solid rgba(21, 21, 20, 0.25);
  box-shadow: 0 22px 36px rgba(27, 24, 18, 0.12);
}

.fp-sound-files::before {
  top: 9px;
  right: 9px;
  bottom: 9px;
  left: 9px;
  border-style: solid;
  border-color: rgba(21, 21, 20, 0.16);
}

.fp-sound-files::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 13px;
  left: 18px;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(21, 21, 20, 0.18) 0,
    rgba(21, 21, 20, 0.18) 4px,
    transparent 4px,
    transparent 10px
  );
  pointer-events: none;
}

.fp-sound-files__head {
  padding-top: 2px;
}

.fp-side-title--articles .fp-side-title__aside {
  box-shadow:
    inset 0 0 0 3px rgba(248, 243, 232, 0.85),
    inset 0 0 0 4px rgba(21, 21, 20, 0.14),
    0 8px 18px rgba(45, 40, 31, 0.06);
}

/* --- article page as a mounted folio ------------------------------------ */

.article-reader::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 15px;
  border: 1px solid rgba(21, 21, 20, 0.16);
  pointer-events: none;
}

/* --- small screens ------------------------------------------------------ */

@media (max-width: 980px) {
  .fp-hero__ink {
    width: min(94vw, 140vh);
  }

  .fp-article-shell {
    filter: blur(4px);
    transform: translate3d(0, 70px, -90px) rotateX(18deg) scale(0.93);
  }

  .fp-article-shell.is-inview {
    filter: none;
    transform: none;
  }

  .fp-title__main h2 {
    font-size: clamp(44px, 6vw, 64px);
  }

  .fp-side-title h2 {
    font-size: clamp(44px, 5.8vw, 60px);
  }
}

@media (max-width: 780px) {
  .fp-hero__ink {
    width: min(158vw, 132vh);
  }

  .fp-article-shell,
  .fp-article-shell:nth-child(3) {
    filter: blur(3px);
    transform: translateY(38px) scale(0.97);
  }

  .fp-article-shell.is-inview {
    filter: none;
    transform: none;
  }

  .fp-article-card__frame {
    inset: 10px;
  }

  .fp-article-card__frame::after {
    left: -14px;
    width: 5px;
    height: 32px;
  }

  .fp-title__main h2 {
    font-size: clamp(40px, 9.6vw, 56px);
  }

  .fp-side-title h2,
  .fp-guestbook__lead h2 {
    font-size: clamp(46px, 10.6vw, 64px);
  }

  .fp-music__info h3 {
    font-size: 30px;
  }

  .article-reader__head h2 {
    font-size: clamp(30px, 8vw, 38px);
  }

  .article-reader::after {
    inset: 10px;
  }
}

@media (max-width: 440px) {
  .fp-hero__ink {
    width: min(168vw, 138vh);
  }

  .fp-title__main h2 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .fp-article-card__title {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-article-shell {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .fp-hero__ink {
    translate: 0 0 !important;
    rotate: 0deg !important;
  }
}
@media (max-width: 780px) {
  .fp-article-shell .fp-article-card {
    transform: none;
  }

  .fp-article-shell:hover .fp-article-card {
    transform: none;
  }
}


/* --- readable paper captions over the large ink ------------------------- */

.fp-hero__meta {
  padding: 9px 12px 8px;
  border: 1px solid rgba(21, 21, 20, 0.1);
  clip-path: polygon(0 4%, 100% 0, 99% 94%, 1% 100%);
  background: rgba(245, 242, 233, 0.78);
  backdrop-filter: blur(3px);
}

.fp-hero__bottom {
  padding: 7px 10px;
  border: 1px solid rgba(21, 21, 20, 0.1);
  clip-path: polygon(1% 0, 100% 4%, 99% 100%, 0 94%);
  background: rgba(245, 242, 233, 0.78);
  backdrop-filter: blur(3px);
}

@media (max-width: 780px) {
  .fp-hero__meta {
    padding: 8px 10px;
  }

  .fp-hero__bottom {
    padding: 6px 8px;
  }
}


@media (max-width: 780px) {
  .fp-side-title--articles .fp-side-title__aside {
    align-self: flex-start;
    width: min(280px, 100%);
    max-width: 280px;
    margin-top: 4px;
    text-align: left;
    align-items: flex-start;
  }

  .fp-article-shell::before,
  .fp-article-shell::after {
    display: block;
  }

  .fp-article-shell::before {
    top: 8px;
    right: 4px;
    left: 10px;
    height: calc(100% - 2px);
    transform: rotate(1.5deg) translate(7px, 3px);
  }

  .fp-article-shell::after {
    top: 16px;
    right: 10px;
    left: 4px;
    height: calc(100% - 4px);
    transform: rotate(-1.4deg) translate(-7px, 7px);
  }
}


/* A folded folio flap borrowing the shape of the reference envelope. */
.fp-article-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 60%;
  height: 39%;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.32), transparent 60%),
    #e9dfcd;
  clip-path: polygon(0 0, 100% 0, 73% 100%, 0 77%);
  box-shadow: 2px 4px 0 rgba(21, 21, 20, 0.04);
  opacity: 0.72;
  pointer-events: none;
}

@media (max-width: 780px) {
  .fp-article-card::after {
    width: 62%;
    height: 31%;
    opacity: 0.62;
  }
}


@media (max-width: 440px) {
  .fp-title__main {
    gap: 14px;
  }

  .fp-title__rule {
    width: min(46px, 10vw);
  }
}

@media (max-width: 340px) {
  .fp-title__main {
    gap: 0;
  }

  .fp-title__rule {
    display: none;
  }
}