/* Editorial identity inspired by the illustrated Pipbuk universe. */
:root { --violet: #7950cf; --violet-dark: #3b207e; --ink: #321571; --bg: #fcf7f2; --paper: #fffcf8; }
body { background: var(--bg); }
.site-header { background: #382078; border-bottom: 0; color: #fff9f0; }
.top-strip { display: none; }
.site-header-inner { max-width: 1240px; padding: 25px 30px; }
.brand-logo { height: 48px; filter: brightness(0) invert(1); }
.site-nav { gap: clamp(12px, 1.7vw, 25px); }
.site-nav a, .site-nav-group summary { color: #fff9f0; font-size: 13px; font-weight: 600; }
.site-nav a:hover, .site-nav-group[open] summary { color: #e3c7ff; }
.site-nav-submenu { background: #44278b; border-color: #ffffff20; }
.site-nav .site-nav-cta { background: #fff0dc; color: #351773 !important; padding: 13px 23px; }
.site-nav .site-nav-cta:hover { background: #ffe2ac; }
.site-nav-account { font-size: 11px !important; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { background: #fff; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; color: var(--ink); letter-spacing: -.035em; }
.btn-primary { background: linear-gradient(#8755d3, #442080); border-radius: 999px; }
.site-footer { background: #30166a; }
.home-editorial .site-header { position: sticky; }
.story-home { color: #341975; }
.story-container { width: min(1180px, calc(100% - 64px)); margin: auto; }
.story-hero { position: relative; background: radial-gradient(ellipse at 60% 80%, #6440ae 0, #382078 60%); color: #fff7ef; overflow: hidden; padding: 12px 0 95px; }
.story-hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 490px; position: relative; z-index: 1; }
.story-hero-copy { padding-left: 55px; }
.story-hero h1 { color: #fff9f2; font-size: clamp(64px, 6.8vw, 94px); line-height: .93; font-weight: 700; }
.story-hero h1 em { color: #d4b3ff; position: relative; display: inline-block; font-weight: 700; }
.story-hero h1 em::after { content: ''; position: absolute; bottom: -11px; left: 14%; width: 77%; height: 8px; border-top: 4px solid #ffca55; border-radius: 50%; transform: rotate(-3deg); }
.story-hero-copy > p { max-width: 410px; font-size: 20px; line-height: 1.45; margin: 30px 0 23px; }
.story-button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 14px 28px; border-radius: 999px; text-decoration: none; background: linear-gradient(#8350cf, #442080); color: white; font-size: 17px; font-weight: 700; line-height: 1.3; transition: transform .2s, box-shadow .2s; }
.story-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px #230d5230; }
.story-button > span { font-size: 30px; line-height: 20px; font-weight: 400; }
.story-button-light { background: #fff0dd; color: #351773; }
.story-hero-note { display: block; font-size: 10px; margin-top: 20px; opacity: .7; letter-spacing: .04em; }
.story-hero-art { position: relative; }
.story-hero-art img { display: block; width: 100%; height: auto; mix-blend-mode: lighten; }
.story-spark { position: absolute; color: #ffce6e; text-shadow: 0 0 15px #ffcc8e; z-index: 2; }
.spark-one { font-size: 58px; left: 0; top: 15%; }.spark-two { font-size: 29px; left: -5%; top: 37%; }
.story-ribbon { position: absolute; width: 650px; height: 300px; border: 40px solid #ab83ef; border-radius: 50%; opacity: .65; pointer-events: none; }
.ribbon-one { right: -380px; top: 90px; transform: rotate(-50deg); }.ribbon-two { left: -420px; bottom: -100px; transform: rotate(35deg); }
.story-wave { position: absolute; width: 100%; height: 80px; bottom: -1px; left: 0; color: #fcf7f2; pointer-events: none; }
.story-services { padding: 16px 0 55px; }
.story-section-title { text-align: center; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; }
.story-section-title > span { color: #ecad39; font-size: 34px; vertical-align: middle; margin: 0 20px; font-weight: 400; }
.story-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 35px; }
.story-service { background: linear-gradient(135deg, #eee1f3, #eee5f5); border-radius: 32px; text-align: center; padding: 5px 20px 25px; text-decoration: none; transition: transform .2s, background .2s; }
.story-service:hover { transform: translateY(-6px); background: #e5d4f3; }
.story-service svg { width: 100%; height: 160px; filter: drop-shadow(0 8px 5px #6b379520); }
.story-service h3 { font-size: 28px; line-height: 1; max-width: 190px; margin: 0 auto 13px; }
.story-service p { font-size: 14px; line-height: 1.45; margin: 0; }
.story-more { text-align: center; font-size: 12px; line-height: 1.8; margin: 25px 0 0; color: #715a8c; }.story-more a { text-underline-offset: 4px; }
.story-catalog { background: radial-gradient(ellipse at center, #6840b2, #382078 75%); position: relative; padding: 90px 0 100px; color: #fff7ef; }
.story-catalog > .story-wave:first-child { top: -1px; bottom: auto; transform: rotate(180deg); }
.story-catalog h2 { color: #fff7ef; }
.story-subtitle { text-align: center; margin: 12px 0 30px; line-height: 1.6; font-size: 17px; }
.story-shelf { display: flex; gap: 36px; overflow-x: auto; padding: 18px 14px 26px; scroll-snap-type: x mandatory; scrollbar-color: #c7a8ef #ffffff15; scrollbar-width: thin; }
.story-volume { flex: 0 0 175px; text-decoration: none; scroll-snap-align: start; text-align: center; min-width: 0; }
.story-cover { width: 100%; aspect-ratio: 2 / 3; position: relative; border-radius: 3px 8px 7px 3px; border-left: 7px solid #ffffff35; box-shadow: -7px 6px 0 #24104c, 0 15px 22px #170b453d; transform: perspective(1000px) rotateY(-10deg); transition: transform .2s; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 0; overflow: hidden; }
.story-volume:hover .story-cover { transform: translateY(-7px) rotate(-2deg); }
.story-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-cover strong { padding: 15px; color: white; font: 28px Georgia, serif; }.story-cover-label { font-size: 10px; letter-spacing: .18em; }
.story-book-name { display: block; font-size: 13px; margin-top: 18px; font-weight: 600; }.story-volume small { display: block; margin-top: 5px; font-size: 11px; color: #decaef; }
.story-catalog-link { display: block; width: fit-content; margin: 24px auto 0; color: #fff0dd; font-size: 13px; text-underline-offset: 6px; }.story-empty { text-align: center; margin: 55px 0; }
.story-invitation { padding: 10px 0 35px; }.story-invitation-grid { display: grid; grid-template-columns: 44% 56%; align-items: center; }
.story-open-book { padding: 0 35px 0 0; }.story-open-book img { display: block; width: 100%; height: auto; }
.story-invitation-grid > div:last-child { padding: 0 35px 0 45px; border-left: 1px solid #a58bc8; }
.story-invitation h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1; }.story-invitation h2 em { color: #8954d1; text-decoration: underline; text-decoration-color: #efbc4f; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.story-invitation p { font-size: 18px; line-height: 1.45; max-width: 460px; margin: 20px 0; }
.story-next { padding: 25px 0 35px; text-align: center; border-top: 1px solid #dfcfea; }.story-next p { font: 24px Georgia, serif; margin: 0 0 15px; }.story-next a { display: inline-block; margin: 8px 16px; font-size: 12px; text-underline-offset: 5px; }
@media (max-width: 1050px) and (min-width: 721px) { .site-header-inner { flex-wrap: wrap; justify-content: center; padding: 20px; }.site-nav { flex-wrap: wrap; justify-content: center; }.story-hero-copy { padding-left: 10px; }.story-service-grid { gap: 14px; }.story-service { padding-left: 12px; padding-right: 12px; }.story-service h3 { font-size: 25px; } }
@media (max-width: 720px) {
 .site-header-inner { padding: 20px 24px; }.brand-logo { height: 38px; }.site-nav { background: #382078; }.site-nav-submenu { background: #4c2b8e; }.site-nav a, .site-nav-group summary { font-size: 14px; }.site-nav .site-nav-cta { margin-top: 10px; }
 .story-container { width: calc(100% - 40px); }.story-hero { padding: 25px 0 75px; }.story-hero-grid { grid-template-columns: 1fr 1fr; min-height: 350px; }.story-hero-copy { padding-left: 0; }.story-hero h1 { font-size: clamp(43px, 9vw, 65px); }.story-hero-copy > p { font-size: 15px; margin-top: 27px; }.story-button { font-size: 14px; padding: 13px 20px; gap: 15px; }.story-hero-art { margin-right: -20px; }.story-hero-art img { min-height: 250px; object-fit: cover; }.story-hero-note { font-size: 9px; line-height: 1.6; }.spark-one { font-size: 30px; }.spark-two { display: none; }
 .story-wave { height: 48px; }.story-services { padding-bottom: 25px; }.story-section-title { font-size: 32px; }.story-section-title > span { font-size: 22px; margin: 0 5px; }.story-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 25px; }.story-service { padding: 0 13px 22px; border-radius: 25px; }.story-service svg { height: 135px; }.story-service h3 { font-size: 25px; }.story-service p { font-size: 13px; }.story-more { font-size: 11px; }
 .story-catalog { padding: 70px 0 75px; }.story-subtitle { font-size: 14px; }.story-volume { flex-basis: 150px; }.story-shelf { gap: 25px; }.story-invitation-grid { grid-template-columns: 37% 63%; }.story-open-book { padding: 0; margin-left: -25px; }.story-invitation-grid > div:last-child { padding: 0 0 0 20px; }.story-invitation h2 { font-size: 30px; }.story-invitation p { font-size: 14px; }.story-invitation .story-button { font-size: 12px; padding: 12px 17px; }
}
@media (max-width: 420px) { .story-hero-grid { grid-template-columns: 1fr; }.story-hero-copy { text-align: center; }.story-hero h1 { font-size: 66px; }.story-hero-copy > p { max-width: 290px; margin-left: auto; margin-right: auto; }.story-hero-art { width: 85%; margin: 0 auto -15px; }.story-hero-art img { min-height: 0; }.story-hero-note { font-size: 9px; }.story-section-title > span { display: none; }.story-invitation-grid { grid-template-columns: 1fr; text-align: center; }.story-open-book { max-width: 240px; margin: -20px auto 0; }.story-invitation-grid > div:last-child { padding: 0; border: 0; }.story-service svg { height: 115px; }.story-service h3 { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.story-button, .story-cover, .story-service { transition: none; } }

/* Layered waves and small constellations frame the content. */
.story-home { overflow: clip; }
.story-hero, .story-services, .story-catalog, .story-invitation { position: relative; isolation: isolate; }
.story-home .story-container { position: relative; z-index: 1; }
.story-wave { height: 115px; z-index: 2; }
.story-hero { padding-bottom: 125px; }
.story-catalog { padding-top: 125px; padding-bottom: 130px; }
.story-ribbon { border-width: 32px; box-shadow: 0 0 0 17px #8b5cdb70, 0 0 0 43px #bd99ff55; }
.story-ribbon::after { content: ''; position: absolute; inset: -55px; border: 2px solid #e5d3ffb0; border-radius: inherit; }
.story-hero::before { content: ''; position: absolute; width: 570px; height: 185px; left: -290px; top: -155px; border-radius: 50%; background: #ac83ed; box-shadow: 0 15px 0 #c5a4ff, 0 32px 0 #8454cf; transform: rotate(-24deg); pointer-events: none; }
.story-catalog::before, .story-invitation::after { content: ''; position: absolute; width: 540px; height: 170px; border: 2px solid #d9bfff; border-radius: 50%; pointer-events: none; z-index: 0; }
.story-catalog::before { right: -350px; top: 38%; transform: rotate(-30deg); box-shadow: 0 20px 0 4px #a478e552, 0 42px 0 8px #8b5bd93d; }
.story-invitation::after { left: -390px; bottom: -70px; transform: rotate(23deg); box-shadow: 0 -16px 0 8px #bd98f15e, 0 -32px 0 12px #d9c2f65e; }
.story-stardust { position: absolute; inset: 0; pointer-events: none; user-select: none; z-index: 0; overflow: hidden; }
.story-stardust span { position: absolute; color: #edb24e; line-height: 1; font-family: Georgia, serif; text-shadow: 0 0 16px #ffcd7445; }
.story-stardust span:nth-child(1) { left: 3%; top: 27%; font-size: 38px; }
.story-stardust span:nth-child(2) { left: 7%; top: 65%; font-size: 21px; }
.story-stardust span:nth-child(3) { right: 3%; top: 23%; font-size: 30px; }
.story-stardust span:nth-child(4) { right: 6%; top: 76%; font-size: 43px; }
.story-stardust span:nth-child(5) { left: 47%; top: 8%; font-size: 15px; }
.story-stardust span:nth-child(6) { left: 39%; bottom: 9%; font-size: 13px; }
.story-services .story-stardust span, .story-invitation .story-stardust span { opacity: .65; }
.story-services .story-stardust span:nth-child(1) { left: .5%; top: 50%; font-size: 22px; }
.story-services .story-stardust span:nth-child(3) { right: .5%; top: 58%; font-size: 19px; }
.story-services .story-stardust span:nth-child(5), .story-services .story-stardust span:nth-child(6) { display: none; }
.story-invitation .story-stardust span:nth-child(5) { left: 36%; top: 12%; font-size: 24px; }
@media (max-width: 720px) {
 .story-wave { height: 75px; }
 .story-hero { padding-bottom: 95px; }
 .story-catalog { padding-top: 95px; padding-bottom: 100px; }
 .story-stardust span:nth-child(1) { left: 1%; font-size: 20px; }
 .story-stardust span:nth-child(3) { right: 1%; font-size: 18px; }
 .story-stardust span:nth-child(2), .story-stardust span:nth-child(4), .story-stardust span:nth-child(6) { display: none; }
 .story-services .story-stardust span { opacity: .3; }
 .story-invitation .story-stardust span:nth-child(5) { left: 24%; top: 8%; font-size: 17px; }
}

/* Full publishing information retained within the illustrated identity. */
.story-home .story-hero-detail { font-size: 14px; line-height: 1.65; margin: -7px 0 22px; max-width: 430px; color: #e4d5f5; }
.story-whatsapp { display: flex; align-items: center; gap: 9px; width: fit-content; margin: 18px 0; color: #fff0dd; font-size: 13px; text-underline-offset: 5px; }
.story-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0; list-style: none; font-size: 10px; line-height: 1.6; color: #ebdafa; }
.story-checks li::before { content: '✓ '; color: #ffd17d; }
.story-published { display: block; font-size: 12px; color: #ffdb9d; margin-top: 18px; }
.story-services-intro { max-width: 760px; margin: 22px auto 0; text-align: center; line-height: 1.8; font-size: 15px; color: #715a8c; }
.story-details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.story-detail { padding: 24px; border: 1px solid #ded0ed; border-radius: 24px; background: #fffaf6; }
.story-detail h3 { font-size: 25px; margin: 15px 0 10px; }
.story-detail p { font-size: 14px; line-height: 1.8; margin: 0; color: #715a8c; }
.story-author-service { display: block; padding: 28px; margin-top: 25px; border-radius: 24px; background: #ede1f6; text-decoration: none; }
.story-author-service h3 { font-size: 28px; }.story-author-service p { line-height: 1.8; font-size: 14px; }.story-author-service > span { font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.story-home .trust-strip { background: transparent; border: 0; padding-top: 12px; padding-bottom: 30px; }
.story-home .trust-grid strong { color: #3b207e; }
.story-home .process-section { background: #f0e5f7; border-top: 1px solid #dfcdec; padding-top: 65px; padding-bottom: 65px; }
.story-home .process-section h2 { font-size: clamp(30px, 4vw, 46px); }
.story-home .process-grid h3 { font-size: 25px; line-height: 1.2; }
.story-home .process-grid li { background: #fffaf6; border-radius: 24px; padding: 25px; }
.story-home .step-number { color: #9463cd; }
.story-home .home-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(1180px, calc(100% - 64px)); margin: 15px auto 60px; gap: 24px; }
.story-home .home-feature-grid .store-section { margin: 0; padding: 28px; border: 1px solid #e1cfee; background: #eee2f6; border-radius: 28px; }
.story-home .home-feature-grid .section-inner { padding: 0; margin: 0; width: 100%; }
.story-home .home-feature-grid .store-grid { display: block; }
.story-home .home-feature-grid h2 { font-size: 30px; line-height: 1.15; }
.story-home .home-feature-grid p { font-size: 14px; line-height: 1.8; color: #715a8c; }
.story-home .home-feature-heading { margin-bottom: 22px; }
.story-home .home-feature-grid .btn-primary { font-size: 12px; padding: 12px 18px; }
.story-book-date { display: block; margin-top: 8px; font-size: 10px; color: #dec8f4; }
@media (max-width: 900px) { .story-home .home-feature-grid { grid-template-columns: 1fr; }.story-home .home-feature-grid .store-section { padding: 28px; }.story-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .story-home .story-hero-detail { font-size: 12px; }.story-home .home-feature-grid { width: calc(100% - 40px); }.story-home .process-grid li { padding: 20px; }.story-home .process-grid .step-number { position: static; }.story-detail { padding: 18px; }.story-detail h3 { font-size: 23px; }.story-checks { font-size: 9px; } }
@media (max-width: 420px) { .story-details-grid { grid-template-columns: 1fr; }.story-whatsapp { margin-left: auto; margin-right: auto; }.story-checks { justify-content: center; } }

/* Actual latest releases use the original three dimensional book mockups. */
.story-hero-art.hero-visual { min-height: 490px; width: 100%; margin: 0; }
.story-hero-art .hero-book-front img { min-height: 0; mix-blend-mode: normal; height: 100%; }
.story-hero-art .hero-books::after { background: #15082b70; }
.story-hero-art .hero-book-back { box-shadow: 8px 20px 28px #170a354d; }
@media (max-width: 720px) { .story-hero-art.hero-visual { min-height: 340px; }.story-hero-art .hero-book-front { font-size: 12px; } }
@media (max-width: 420px) { .story-hero-art.hero-visual { min-height: 310px; max-width: 360px; margin: 15px auto 0; } }

/* The navigation belongs to the same flowing violet background as the hero. */
.site-header { position: sticky; top: 0; z-index: 40; background: #382078; isolation: isolate; }
.header-waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.site-header-inner { position: relative; }
.home-editorial .story-hero { background: radial-gradient(ellipse at 60% 100%, #6440ae 0, #382078 65%); }
.home-editorial .story-hero::before { display: none; }
.site-header .site-nav-submenu { z-index: 2; box-shadow: 0 14px 30px #1b0b493d; }
html { scroll-padding-top: calc(var(--site-header-height, 105px) + 20px); }
.site-header:target { scroll-margin-top: 0; }
@media (min-width: 721px) and (max-width: 1050px) { html { --site-header-height: 165px; } }
@media (max-width: 720px) {
 html { --site-header-height: 78px; }
 .header-waves { width: 100%; opacity: .7; }
 .site-nav.is-open { max-height: calc(100dvh - var(--site-header-height, 78px)); overflow-y: auto; overscroll-behavior: contain; }
}

/* Flat Pipbuk illustrations retain their transparent backgrounds. */
.story-service .story-service-illustration { display: block; width: 100%; height: 180px; object-fit: contain; margin: 3px auto 12px; }
@media (max-width: 720px) { .story-service .story-service-illustration { height: 150px; } }
@media (max-width: 420px) { .story-service .story-service-illustration { height: 125px; } }

/* Keep the service overview concise, with optional editorial detail. */
.story-service-details { margin-top: 28px; border-top: 1px solid #dfcfea; border-bottom: 1px solid #dfcfea; }
.story-service-details > summary { padding: 20px 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: #54328b; }
.story-service-details > summary::marker { color: #9463cd; }
.story-service-details[open] > summary { padding-bottom: 0; }
.story-service-details .story-details-grid { margin: 22px 0; }
.story-service-guide { text-align: center; margin: 18px 0 0; }
.story-service-guide .text-link { font-size: 12px; }

/* Book carousel: snap one title at a time, keeping natural touch scrolling. */
.story-carousel .story-shelf { gap: 32px; padding: 24px 14px 28px; scroll-padding-inline: 14px; scrollbar-width: none; }
.story-carousel .story-shelf::-webkit-scrollbar { display: none; }
.story-carousel .story-volume { flex: 0 0 calc((100% - 128px) / 5); scroll-snap-stop: always; }
.story-carousel .story-cover { perspective: 1400px; isolation: isolate; overflow: visible; border: 0; border-radius: 2px 5px 5px 2px; background: var(--binding-color, #58446d); transform: none; box-shadow: 1px 2px 3px #190c3e50, 5px 10px 20px #190c3e45; }
.story-carousel .story-cover::before { content: ''; position: absolute; inset: 3px 3px 3px 5px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #dfd9cb, #f5f1e7 7%, #fffdf5 24%, #faf7ee); box-shadow: inset -1px 0 #e8e2d5, 1px 1px 0 #eae5d9; }
.story-carousel .catalog-book-front { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-around; align-items: center; border-radius: inherit; overflow: hidden; transform-origin: left center; backface-visibility: hidden; z-index: 1; }
.story-carousel .story-cover img { position: absolute; inset: 0; object-fit: cover; }
.story-carousel .story-volume:hover .story-cover { transform: none; }
.story-carousel-controls { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 6px; }
.story-carousel-controls[hidden] { display: none; }
.story-carousel-arrow { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff0dd; color: #382078; font-size: 25px; cursor: pointer; }
.story-carousel-arrow:hover:not(:disabled) { background: #ffdc9c; }
.story-carousel-arrow:disabled { opacity: .35; cursor: default; }
.story-carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.story-carousel-dot { display: grid; place-items: center; width: 30px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.story-carousel-dot::before { content: ''; width: 8px; height: 8px; border-radius: 99px; background: #b79ada; }
.story-carousel-dot[aria-current="true"]::before { width: 21px; background: #fff0dd; }
.story-carousel-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.story-carousel :focus-visible { outline-color: #ffda8b; }
@media (prefers-reduced-motion: no-preference) {
 .story-carousel .catalog-book-front { transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease; }
 .story-carousel .story-volume:focus-visible .catalog-book-front { transform: rotateY(-18deg); box-shadow: 5px 1px 9px #190c3e40; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .story-carousel .story-volume:hover .catalog-book-front { transform: rotateY(-18deg); box-shadow: 5px 1px 9px #190c3e40; } }
@media (max-width: 900px) { .story-carousel .story-volume { flex-basis: calc((100% - 64px) / 3); } }
@media (max-width: 600px) { .story-carousel .story-shelf { gap: 24px; }.story-carousel .story-volume { flex-basis: calc((100% - 24px) / 2); }.story-carousel-controls { gap: 12px; } }

/* Companion cards share the same hierarchy, contrast and baseline. */
.story-home .home-feature-grid { gap: 24px; align-items: stretch; }
.story-home .home-feature-grid > .store-section {
    display: flex;
    width: 100%;
    padding: 28px;
    background: linear-gradient(155deg, #fffaf4 0%, #f1e7f7 100%);
    border: 1px solid #dfcdec;
    border-radius: 28px;
    box-shadow: 0 8px 24px #42207806;
}
.story-home .home-feature-grid .store-grid { display: flex; padding: 0; height: 100%; }
.story-home .home-feature-grid .store-text {
    display: grid;
    grid-template-rows: 54px minmax(3.45em, auto) 1fr auto;
    gap: 18px;
    width: 100%;
    font-size: 29px;
    text-align: left;
}
.story-home .home-feature-grid .home-feature-heading { margin: 0; gap: 12px; }
.story-home .home-feature-grid .eyebrow {
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #7950aa;
    font-family: Ubuntu, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.5;
}
.story-home .home-feature-grid .home-feature-drawing {
    flex: 0 0 50px;
    height: 50px;
    border-radius: 16px;
    background: #e9d9f5;
    color: #7143ad;
    transform: none;
}
.story-home .home-feature-grid .home-feature-drawing svg { width: 27px; height: 27px; }
.story-home .home-feature-grid .store-text h2 {
    color: #382078;
    font-size: 29px;
    line-height: 1.15;
    letter-spacing: -.035em;
    margin: 0;
}
.story-home .home-feature-grid .store-text p { color: #715a83; font-size: 14px; line-height: 1.75; margin: 0 0 8px; }
.story-home .home-feature-grid .btn-primary {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    justify-self: start;
    align-self: end;
    gap: 18px;
    min-height: 44px;
    padding: 12px 20px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #442080;
    color: #fff7ef;
    font-family: Ubuntu, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: none;
}
.story-home .home-feature-grid .btn-primary:hover { background: #6940aa; transform: none; }
.story-home .home-feature-grid .btn-primary span { font-size: 20px; line-height: 1; }
@media (max-width: 900px) {
    .story-home .home-feature-grid .store-text { grid-template-rows: 54px auto 1fr auto; gap: 16px; }
    .story-home .home-feature-grid .store-text h2 { max-width: 480px; }
}
@media (max-width: 420px) {
    .story-home .home-feature-grid > .store-section { padding: 24px; }
    .story-home .home-feature-grid .store-text h2 { font-size: 28px; }
}

/* Keep the home book shelf visually focused on the covers. */
.story-carousel .story-carousel-controls-hidden { display: none; }

/* Keep mobile hero decoration outside the reading area. */
@media (max-width: 720px) {
    .story-hero .ribbon-one { top: auto; bottom: 65px; right: -340px; width: 500px; height: 220px; opacity: .35; }
    .story-hero .ribbon-two { left: -390px; bottom: -110px; opacity: .35; }
    .home-editorial .story-hero { background: #382078; }
    .story-hero-copy > p { color: #fff9f2; font-size: 16px; line-height: 1.6; }
}

/* Broad curves continue the preceding lavender section without a cream seam. */
.story-catalog > .story-catalog-entry:first-child { transform: none; height: 100px; }
@media (max-width: 720px) { .story-catalog > .story-catalog-entry:first-child { height: 60px; } }