/* Shared fluid sizing. Keep this after main.css so every route uses it. */
body { min-width:0; }
.page-section, .hero-copy, .preview-copy, .selection-copy, .creation-panel,
.account-card, .photo-panel, .character-worlds, .footer-inner > *,
.creation-form > *, .account-form > * { min-width:0; }
input, select, textarea { min-width:0; max-width:100%; }
.button { max-width:100%; padding-block:12px; text-align:center; white-space:normal; }
/* Tablet and touch laptop users need the same usable sign-in actions as phones. */
.account-card button.auth-link { min-height:44px; padding:10px 12px; }
@media(max-width:900px){
  #app input:not([type=checkbox]):not([type=radio]), #app textarea {
    font-size:max(16px,1rem);
  }
}
h1, h2, h3, p, address, .auth-status, .photo-filename, .error-detail { overflow-wrap:anywhere; }
.site-footer .footer-inner { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.8fr); gap:clamp(24px,4vw,64px); }
.site-footer a { overflow-wrap:anywhere; }
.site-footer .footer-link-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
.site-footer .footer-link-grid a { display:flex; align-items:center; min-height:44px; }
/* Bound intrinsic image sizes to the visual row, including on one-column layouts. */
.journey-visual-keepsake { grid-template-rows:minmax(0,1fr); max-width:380px; }
.journey-keepsake-child { min-height:0; max-height:100%; }
.journey-visual-character img { width:min(42%,154px); height:auto; aspect-ratio:1; }
.journey-mini-book { max-width:82%; }
.draft-controls, .world-row, .character-progress-head { flex-wrap:wrap; }
.account-dashboard > .story-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.account-actions > .button { flex:1 1 180px; }
.room-page, .room-heading, .room-recommendations { min-width:0; }
.room-shelf { max-width:calc(100% + 2 * clamp(34px,5vw,68px)); }

@media (max-width:1050px) {
  .journey-steps { grid-template-columns:1fr; gap:48px; max-width:540px; }
  .journey-steps li { padding-inline:0; }
  .journey-steps li:not(:last-child)::after { top:auto; right:auto; bottom:-24px; left:50%; width:72px; height:1px; background:linear-gradient(90deg,transparent,rgba(160,105,255,.42),transparent); transform:translateX(-50%); }
  .journey-visual { height:clamp(200px,52vw,280px); margin-bottom:24px; }
  .journey-visual-keepsake { gap:4px; }
  .journey-steps p { max-width:340px; font-size:.94rem; }
  .character-styles-showcase { grid-template-columns:1fr; justify-items:center; width:100%; padding:0; overflow:visible; gap:28px; }
  .character-styles-showcase > figure { width:min(48%,220px); }
  .character-transform { width:42px; transform:rotate(90deg); margin-block:10px; }
  .character-worlds { width:min(100%,720px); min-width:0; }
  .character-style-grid { min-width:0; }
  .worlds-label { text-align:center; }
  .site-footer .footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer .footer-brand { grid-column:1/-1; }
}

@media (max-width:700px) {
  .page-section { width:calc(100% - 32px); }
  .site-header { padding-inline:16px; }
  .site-navigation { max-height:calc(100dvh - 84px); overflow-y:auto; align-items:stretch; }
  .menu-button { min-width:44px; min-height:44px; }
  .hero { padding-block:48px 28px; gap:16px; }
  .hero h1 { font-size:clamp(2rem,10vw,4rem); }
  .hero-visual { min-height:clamp(290px,105vw,460px); }
  .hero-book-tabs { flex-wrap:wrap; justify-content:center; gap:8px 16px; }
  .hero-book-tab { min-height:44px; }
  .hero-actions { width:100%; }
  .hero-actions .button { flex:1 1 200px; }
  .character-styles { width:calc(100% - 32px); padding-top:48px; }
  .character-styles-heading { width:100%; margin-bottom:32px; }
  .character-styles-heading h2, .journey-heading h2 { font-size:clamp(2rem,8vw,3.2rem); }
  .character-styles-heading h2 br { display:none; }
  .character-style-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; }
  .character-style-grid figure, .character-style-grid figure:nth-child(4) { grid-column:auto; }
  .character-style-grid figure:last-child:nth-child(odd) { grid-column:1/-1; width:calc((100% - 14px)/2); justify-self:center; }
  .character-styles figcaption { font-size:.84rem; line-height:1.4; }
  .character-worlds-question { width:100%; }
  .featured { width:100%; }
  .featured .section-heading { width:calc(100% - 32px); }
  .featured-room { min-height:560px; }
  .journey { padding-block:48px; }
  .journey-heading { margin-bottom:32px; }
  .journey-visual-keepsake { width:100%; }
  .journey-action { min-height:48px; margin-top:28px; }
  .site-footer .footer-inner { width:calc(100% - 32px); grid-template-columns:1fr; gap:28px; padding-block:36px; }
  .site-footer .footer-brand { grid-column:auto; }
  .site-footer h2 { margin-bottom:12px; }
  .site-footer .footer-brand p { margin:16px 0; }
  .site-footer .footer-link-grid { max-width:none; }
  .site-footer address, .site-footer .footer-link-grid a { font-size:.9rem; }
  .discover, .preview, .selection, .creation, .photo-page, .account-page, .empty-state { padding-block:40px 56px; }
  .discover-heading h1, .preview h1, .creation-panel h1, .account-card h1, .room-heading h1, .empty-state h1, .legal-page > h1 { font-size:clamp(2rem,9vw,3.4rem); }
  .creation-panel, .account-card, .account-card.account-dashboard { padding:24px 16px; }
  .photo-panel { padding-inline:0; }
  .account-form input, .creation-form input, .creation-form select { font-size:1rem; }
  .auth-link { min-height:44px; padding-block:10px; }
  .preview-book-stage { min-height:0; padding-block:24px 40px; }
  .catalogue-reader-stage { min-height:0; padding:20px 10px; }
  .catalogue-reader-cover-copy h3 { font-size:clamp(.65rem,3.3vw,1.35rem); }
  .catalogue-reader-cover-copy span { margin-top:5px; font-size:clamp(.28rem,1.5vw,.5rem); }
  .catalogue-reader-cover-brand { gap:3px; font-size:.3rem; }
  .catalogue-reader-cover-brand img { width:14px!important; height:14px!important; }
  .catalogue-reader-surface.is-locked { aspect-ratio:auto; min-height:280px; }
  .published-spread { max-width:100%; margin-top:28px; }
  .draft-controls { gap:8px; }
  .draft-controls .button { min-height:44px; padding-inline:14px; }
  .room-page { width:100%; margin-inline:0; padding:24px 16px; }
  .room-shelf { margin-inline:-16px; max-width:calc(100% + 32px); padding-inline:24px; }
  .world-row { align-items:flex-start; }
  .legal-page { width:calc(100% - 32px); padding-block:40px 56px; }
  .legal-page ul { padding-left:22px; }
  .toast-region { right:12px; left:12px; width:auto; max-width:none; }
}

@media (max-width:380px) {
  .photo-examples { grid-template-columns:1fr; }
  .photo-example { display:grid; grid-template-columns:100px minmax(0,1fr); align-items:center; }
  .photo-example figcaption { padding:12px; }
  .optional-photo-grid { grid-template-columns:1fr; }
  .optional-photo-preview { width:64px; }
  .child-selector { grid-template-columns:1fr; }
  .character-reference-gallery, .character-review-reference-gallery { grid-template-columns:1fr; }
  .account-card, .creation-panel { padding-inline:14px; }
}

/* Keep Explore aligned as one compact list at every width. */
.site-footer .footer-links h2 { margin-bottom:10px; }
.site-footer .footer-link-grid { width:fit-content; max-width:100%; grid-template-columns:1fr; gap:0; }
.site-footer .footer-link-grid a { min-height:0; padding:0; line-height:1.72; }

/* Decorative glows should not widen the page on small screens. */
.character-styles::before { left:0; right:0; }
.hero { overflow: clip; }

/* Keep the complete three-book fan inside its own grid column. */
.hero-visual { min-width:0; }
.hero-book-showcase .book-hero { width:min(68%,460px); }
.hero-book-showcase .hero-book-slide.is-left { transform:translateX(-18%) translateY(-2%) scale(.78) rotateZ(-6deg); }
.hero-book-showcase .hero-book-slide.is-right { transform:translateX(18%) translateY(-1%) scale(.8) rotateZ(6deg); }
@media(max-width:700px){
 .hero-book-showcase .book-hero { width:min(68%,320px); }
 .hero-book-showcase .hero-book-slide.is-left { transform:translateX(-18%) translateY(-2%) scale(.72) rotateZ(-5deg); }
 .hero-book-showcase .hero-book-slide.is-right { transform:translateX(18%) translateY(-1%) scale(.74) rotateZ(5deg); }
}

/* Transparent slide bounds must not intercept the visible neighbouring books. */
.hero-book-showcase .hero-book-slide { pointer-events:none; }
.hero-book-showcase .hero-book-slide:not(.is-far) .book-hero { pointer-events:auto; cursor:pointer; }
.hero-book-showcase .hero-book-slide.is-far .book-hero { pointer-events:none; }
.hero-book-slide:focus-visible .book-hero { outline:2px solid #c6b5ff; outline-offset:6px; }

/* A quiet hardcover option and a compact, accessible delivery checkout. */
.hardcover-content{display:grid;gap:12px;justify-items:start;min-width:0}
.hardcover-content p{margin:0;overflow-wrap:anywhere}.hardcover-order-status{font-size:1rem;color:#d8d2e8}
.hardcover-dialog{width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(20px,4vw,36px);border:1px solid #444058;border-radius:20px;background:#101225;color:#f9f8ff}
.hardcover-dialog::backdrop{background:rgba(3,5,15,.8)}
.hardcover-form{display:grid;gap:16px;min-width:0}.hardcover-form h2{font-size:clamp(1.5rem,5vw,2rem);margin:0;line-height:1.2}
.hardcover-close{justify-self:end;min-height:44px;padding:8px 12px}.hardcover-book-title{margin:0;color:#d9cbae;overflow-wrap:anywhere}
.hardcover-address{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hardcover-address label{display:grid;gap:7px;font-size:.95rem;min-width:0}
.hardcover-address input,.hardcover-address select{width:100%;min-width:0;min-height:44px;font-size:16px;padding:10px;border:1px solid #4e4866;border-radius:8px;background:#090c1b;color:#fff}
.hardcover-address label:nth-child(3),.hardcover-address label:nth-child(4){grid-column:1/-1}
.hardcover-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:8px 0;padding-top:16px;border-top:1px solid #39364c}.hardcover-summary dd{margin:0;text-align:right}.hardcover-summary dt:last-of-type,.hardcover-summary dd:last-of-type{font-weight:700;color:#d9cbae}
.hardcover-form .button{white-space:normal;min-height:44px;max-width:100%}.hardcover-form .reader-extra-note{margin:0;font-size:.9rem;line-height:1.5}
@media(max-width:400px){.hardcover-address{grid-template-columns:minmax(0,1fr)}.hardcover-address label{grid-column:1!important}}

/* Mobile page rhythm: one outer gutter, readable forms and compact browsing. */
@media(max-width:700px){
  .discover,.preview,.selection,.creation,.photo-page,.account-page,.empty-state{padding-block:28px 40px}
  .discover-heading{gap:16px;margin-bottom:24px}
  .discover-heading h1{font-size:clamp(2rem,9vw,2.75rem);line-height:1.12;margin-bottom:16px}
  .discover-story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  #app .discover .story-card{padding-right:6px}
  .discover .story-card-details{padding-top:14px}
  .discover .story-card-title{font-size:clamp(1rem,4.4vw,1.25rem);line-height:1.3}
  .discover .story-taxonomy{gap:4px;margin-bottom:8px;line-height:1.5}
  .discover .story-taxonomy span{font-size:.75rem}
  .account-page{width:calc(100% - 32px);min-height:0}
  .account-card{padding:20px 0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .account-card h1{font-size:clamp(2rem,9vw,2.75rem);line-height:1.12}
  .account-intro{margin-bottom:24px}
  .auth-links{flex-direction:row;gap:4px 16px;margin-top:12px}
  .account-form>.auth-link{margin-top:8px}
  .account-form .consent-check{grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:.8125rem}
  .account-form .consent-check input{width:22px;height:22px;margin-top:2px}
  .featured-room{--shelf-scene-height:clamp(340px,90vw,420px);min-height:var(--shelf-scene-height)}
  .featured-room .shelf-page{min-height:calc(var(--shelf-book-size) + 130px)}
  .shelf-arrows{top:calc(var(--shelf-scene-height) * .72 + 42px);inset-inline:16px}
  .shelf-pagination{margin-top:12px}
}

/* A column flex layout inherited end alignment and let the shelf heading overhang. */
@media(max-width:900px){
  .featured .section-heading{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:16px;text-align:left}
  .featured .section-heading>div{width:100%;min-width:0;max-width:100%}
  .featured .section-heading>a{justify-self:start;align-self:start}
  .featured .section-heading h2{max-width:100%;white-space:normal;overflow-wrap:break-word;text-wrap:pretty}
}
@media(max-width:700px){
  .character-styles{padding-bottom:48px}
  .character-styles-action{margin-top:24px}
  .featured .section-heading{width:calc(100% - 32px);margin:0 auto 24px;gap:16px}
  .featured .section-heading h2{font-size:clamp(1.75rem,7.5vw,2.25rem);line-height:1.2}
  .featured .section-heading .eyebrow{margin-bottom:12px;font-size:.6875rem;line-height:1.6;letter-spacing:.12em}
  .featured-intro{margin-top:12px;font-size:.9375rem;line-height:1.6}
}