/* About Pipbuk: the illustrated identity continues beyond the home page. */
.about-page { overflow: clip; background: #fcf7f2; }
.about-page .section-inner { width: min(1180px, calc(100% - 64px)); max-width: none; }
.about-hero { position: relative; isolation: isolate; padding: 40px 0 140px; background: radial-gradient(ellipse at 75% 95%, #6740af, #382078 65%); }
.about-hero .about-hero-grid { position: relative; z-index: 1; margin: auto; gap: clamp(40px, 7vw, 90px); grid-template-columns: 1.15fr .85fr; }
.about-hero-text .eyebrow { color: #dec6ff; background: #ffffff0c; border: 1px solid #cda7ff40; margin-bottom: 22px; }
.about-hero-text h1 { font-size: clamp(42px, 4.8vw, 66px); line-height: 1.02; color: #fff7ef; margin-bottom: 25px; }
.about-hero-quote { color: #dcc0ff; font-family: Georgia, serif; font-size: 24px; font-style: italic; font-weight: 400; line-height: 1.4; border-left: 2px solid #efbd64; padding-left: 20px; margin-bottom: 24px; }
.about-hero-text p:not(.about-hero-quote) { color: #ece0f7; font-size: 16px; line-height: 1.85; margin-bottom: 28px; }
.about-hero .media-collage { min-height: 440px; width: 90%; margin: 0 auto; }
.about-hero .media-collage-item { width: 55%; border-radius: 2px 6px 6px 2px; border: 0; border-left: 5px solid #ffffff35; box-shadow: -5px 5px 0 #24104c, 10px 25px 35px #1d0c5145; }
.about-hero .media-collage-item-1 { top: 16%; }.about-hero .media-collage-item-2 { top: 7%; }.about-hero .media-collage-item-3 { top: 22%; }
.about-hero .media-collage-empty { background: #a57bdb26; border-color: #c7a1ff40; }.about-hero .media-collage-empty img { filter: brightness(0) invert(1); }
.about-page .story-wave { height: 115px; }
.about-values { padding: 12px 0 65px; background: #fcf7f2; }
.about-values h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; }
.about-values .section-lead { color: #715a83; font-size: 16px; line-height: 1.8; max-width: 820px; margin: 22px auto 32px; }
.about-values .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.about-values .service-card { background: linear-gradient(135deg, #eee1f3, #eee5f5); border: 0; border-radius: 30px; padding: 12px 26px 30px; text-align: center; box-shadow: none; }
.about-values .about-value-art { display: block; width: 100%; height: 170px; object-fit: contain; margin: 0 auto 15px; }
.about-values .service-card h3 { font-family: Georgia, serif; font-size: 29px; line-height: 1.08; color: #382078; margin: 0 0 16px; }
.about-values .service-card p { font-size: 15px; line-height: 1.75; color: #624c7a; margin: 0; }
.about-page .about-cta { position: relative; isolation: isolate; margin: 0; padding: 35px 0 70px; border-radius: 0; border-top: 1px solid #e7d8ee; background: #fcf7f2; text-align: left; }
.about-cta .about-invitation { position: relative; z-index: 1; margin: auto; display: grid; grid-template-columns: 43% 1fr; align-items: center; gap: 55px; }
.about-invitation > img { display: block; width: 100%; height: auto; }
.about-invitation > div { border-left: 1px solid #b99bd4; padding-left: 40px; }
.about-cta h2 { color: #382078; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.1; }
.about-cta .section-lead { color: #715a83; font-size: 17px; line-height: 1.7; margin: 20px 0 25px; }
@media (max-width: 800px) {
 .about-page .section-inner { width: calc(100% - 40px); }
 .about-hero { padding: 30px 0 95px; }
 .about-hero .about-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 25px; }
 .about-hero-text { max-width: 600px; margin: auto; }
 .about-hero-text h1 { font-size: clamp(40px, 8vw, 58px); }
 .about-hero-quote { text-align: left; font-size: 22px; }
 .about-hero .media-collage { min-height: 340px; max-width: 340px; width: 85%; }
 .about-page .story-wave { height: 75px; }
 .about-values .service-grid { grid-template-columns: 1fr; max-width: 520px; margin: auto; }
 .about-values .service-card { padding: 12px 25px 30px; }
 .about-values .about-value-art { height: 180px; }
 .about-cta .about-invitation { grid-template-columns: 1fr; gap: 20px; text-align: center; }
 .about-invitation > img { max-width: 320px; margin: auto; }
 .about-invitation > div { border: 0; padding: 0; max-width: 560px; margin: auto; }
}
@media (max-width: 420px) { .about-hero .media-collage { min-height: 280px; max-width: 280px; }.about-hero-text p:not(.about-hero-quote) { font-size: 15px; }.about-values { padding-bottom: 35px; } }

/* Display real books on a shared baseline instead of overlapping flat covers. */
.about-book-display { position: relative; min-width: 0; padding: 55px 5px; }
.about-book-row { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; align-items: end; gap: 20px; perspective: 1200px; }
.about-book-row .about-book { --depth: 15px; position: relative; inset: auto; width: 100%; aspect-ratio: 2 / 3; transform: rotateX(5deg) rotateY(-22deg); }
.about-book-row .about-book:nth-child(2) { transform: translateY(-25px) rotateX(5deg) rotateY(-22deg); }
.about-book-row .hero-book-front { font-size: 12px; }
.about-book-row .hero-book-back { box-shadow: 10px 20px 24px #170a3550; }
.about-book-display > .media-collage-empty { position: relative; inset: auto; min-height: 260px; background: #a57bdb26; border-color: #c7a1ff40; }
.about-book-display > .media-collage-empty img { filter: brightness(0) invert(1); }
@media (max-width: 800px) { .about-book-display { width: min(440px, 100%); margin: 0 auto; padding: 45px 0 25px; }.about-book-row { gap: 22px; } }
@media (max-width: 420px) { .about-book-row { gap: 15px; }.about-book-row .about-book { --depth: 10px; }.about-book-row .about-book:nth-child(2) { transform: translateY(-17px) rotateX(5deg) rotateY(-22deg); } }