.library-page main { overflow: hidden; }
.library-hero { width: min(calc(100% - 48px), 1120px); margin: 0 auto; padding: clamp(70px, 10vw, 130px) 0 76px; }
.library-hero > p:first-child, .library-heading > p, .library-answer > p:first-child, .library-integrity > p { margin: 0; color: var(--story-red); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.library-hero h1 { max-width: 980px; margin: 20px 0 0; font-family: "Noto Serif TC", "Songti TC", serif; font-size: clamp(3rem, 7vw, 6rem); line-height: 1.08; letter-spacing: -.055em; text-wrap: balance; }
.library-hero > p:nth-of-type(2) { max-width: 760px; margin: 30px 0 0; color: var(--story-body-color); font-family: "Noto Serif TC", serif; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.8; }
.library-hero dl { width: min(100%, 760px); margin: 52px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--story-ink); }
.library-hero dl div { padding: 20px; border-right: 1px solid var(--story-line); }
.library-hero dl div:last-child { border-right: 0; }
.library-hero dt { font-family: Georgia, serif; font-size: 2.2rem; font-weight: 700; }
.library-hero dd { margin: 6px 0 0; color: var(--story-muted); font-size: 12px; line-height: 1.5; }

.library-answer { padding: 70px max(24px, calc((100vw - 960px) / 2)); color: white; background: var(--story-green); }
.library-answer > p:first-child { color: #b8d1c7; }
.library-answer h2 { margin: 18px 0 0; font-family: "Noto Serif TC", serif; font-size: clamp(2.3rem, 5vw, 4.2rem); }
.library-answer > p:last-child { max-width: 800px; margin: 24px 0 0; color: #e8f0ed; font-family: "Noto Serif TC", serif; font-size: 1.08rem; line-height: 1.9; }

.story-library { width: min(calc(100% - 48px), 1180px); margin: 0 auto; padding: 90px 0; }
.library-heading { display: grid; grid-template-columns: 190px 1fr; gap: 40px; }
.library-heading h2 { max-width: 840px; margin: 0; font-family: "Noto Serif TC", serif; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.25; }
.story-card-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--story-line); border: 1px solid var(--story-line); }
.story-card { background: var(--story-paper); }
.story-card a { height: 100%; display: block; }
.story-card__image { position: relative; overflow: hidden; }
.story-card__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.story-card a:hover .story-card__image img { transform: scale(1.025); }
.story-card__image span { position: absolute; right: 14px; bottom: 12px; padding: 7px 9px; color: white; background: var(--story-red); font-family: Georgia, serif; font-size: 13px; }
.story-card__copy { padding: 26px; }
.story-card__copy > p { margin: 0; color: var(--story-red); font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.story-card__copy h3 { margin: 18px 0 0; font-family: "Noto Serif TC", serif; font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1.4; }
.story-card__copy > span { margin-top: 15px; display: block; color: var(--story-body-color); font-family: "Noto Serif TC", serif; font-size: 14px; line-height: 1.75; }
.story-card__copy > b { margin-top: 24px; display: block; font-size: 12px; }

.library-integrity { padding: 76px max(24px, calc((100vw - 1080px) / 2)); background: var(--story-white); }
.library-integrity h2 { max-width: 760px; margin: 17px 0 0; font-family: "Noto Serif TC", serif; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.25; }
.library-integrity > div { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--story-ink); }
.library-integrity article { padding: 25px; border-right: 1px solid var(--story-line); }
.library-integrity article:last-child { border-right: 0; }
.library-integrity b { color: var(--story-red); font-size: 11px; }
.library-integrity h3 { margin: 32px 0 10px; font-family: "Noto Serif TC", serif; font-size: 1.35rem; }
.library-integrity article p { margin: 0; color: var(--story-muted); font-size: 13px; line-height: 1.7; }

@media (max-width: 760px) {
  .library-hero { width: min(calc(100% - 32px), 1120px); padding: 62px 0; }
  .library-hero h1 { font-size: 2.7rem; line-height: 1.12; }
  .library-hero dl { grid-template-columns: 1fr; }
  .library-hero dl div { border-right: 0; border-bottom: 1px solid var(--story-line); }
  .library-hero dl div:last-child { border-bottom: 0; }
  .library-answer { padding: 56px 16px; }
  .story-library { width: min(calc(100% - 32px), 1180px); padding: 68px 0; }
  .library-heading { grid-template-columns: 1fr; gap: 16px; }
  .story-card-grid { grid-template-columns: 1fr; }
  .library-integrity { padding: 60px 16px; }
  .library-integrity > div { grid-template-columns: 1fr; }
  .library-integrity article { border-right: 0; border-bottom: 1px solid var(--story-line); }
  .library-integrity article:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .story-card__image img { transition: none; }
}