/* v58 — responsive pass for phones and tablets */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%}

@media (max-width:1024px){
  .site-header{padding:17px 20px!important}
  .brand{gap:9px!important;font-size:.66rem!important;letter-spacing:.18em!important;white-space:nowrap}
  .brand img{width:28px!important;height:28px!important;flex:0 0 28px}
  .section{width:min(var(--max,1240px),calc(100% - 38px))!important;padding-top:88px!important;padding-bottom:88px!important}
  .section-title,.section-head{gap:24px!important}
  .hero,.author-hero,.contact-layout,.bio-grid,.story-grid,.tone-grid,.tones-grid,.content-grid,.music-grid,.details,.universe,.author-preview{grid-template-columns:1fr!important}
  .hero,.author-hero{min-height:auto!important;gap:46px!important;padding-top:125px!important;padding-bottom:70px!important}
  .hero-copy,.author-copy,.copy{max-width:100%!important}
  .hero-cover,.portrait{width:min(78vw,390px)!important;justify-self:center!important}
  .cover-frame{width:min(76vw,330px)!important}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  .story-copy,.bio-copy{padding-left:0!important;border-left:0!important;border-top:1px solid var(--line,rgba(255,255,255,.09))!important;padding-top:28px!important}
  .thread-grid{grid-template-columns:1fr 1fr!important}
  .book-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .works-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .standalone-grid{grid-template-columns:1fr!important}
  .book-card{grid-template-columns:minmax(190px,.7fr) 1.3fr!important}
  .universe{padding:40px!important}
  .book-stack{width:min(100%,600px)!important;justify-self:center!important}
  .contact-layout{gap:48px!important}
  .types-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .music-grid{gap:42px!important;padding-inline:0!important}
  .spotify-frame{width:100%!important}
  .spotify-frame iframe{width:100%!important;min-height:352px!important}
  .footer,.site-footer{padding-left:20px!important;padding-right:20px!important}
}

@media (max-width:820px){
  .menu-toggle{display:block!important}
  .main-nav,.nav{position:absolute!important;top:100%!important;left:16px!important;right:16px!important;width:auto!important;min-width:0!important;display:none!important;flex-direction:column!important;gap:0!important;padding:8px!important;background:rgba(6,8,22,.97)!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 18px 50px rgba(0,0,0,.35)!important;backdrop-filter:blur(16px)}
  .main-nav.open,.nav.open{display:flex!important}
  .main-nav a,.nav a{padding:13px 14px!important;font-size:.67rem!important}
  .home-hero{min-height:76svh!important;padding:112px 20px 78px!important}
  .home-copy{width:min(100%,680px)!important}
  .home-scroll{bottom:18px!important}
  .section-title,.section-head{display:block!important;margin-bottom:38px!important}
  .section-title>p,.section-head>p{margin-top:18px!important;max-width:none!important}
  .contact-hero{min-height:auto!important;padding:125px 20px 75px!important}
  .contact-layout{grid-template-columns:1fr!important}
  .contact-card{grid-template-columns:1fr!important;padding:24px!important}
  .thread-grid,.book-grid{grid-template-columns:1fr!important}
  .author-meta{grid-template-columns:1fr!important}
  .portrait{width:min(88vw,380px)!important}
  .works-grid{grid-template-columns:1fr 1fr!important}
  .work-mini{min-height:0!important}
  .work-mini .visual{height:280px!important}
  .universe{grid-template-columns:1fr!important;padding:28px!important;gap:30px!important}
  .book-card{grid-template-columns:1fr!important}
  .book-card .cover{min-height:0!important;height:auto!important;aspect-ratio:.82!important}
  .book-card .cover img{height:100%!important;object-fit:cover!important}
  .details{width:min(var(--max,1240px),calc(100% - 38px))!important;padding:90px 0!important;grid-template-columns:1fr!important}
  .covers{width:100%!important;max-width:560px!important;justify-self:center!important}
  .footer,.site-footer{flex-direction:column!important;gap:12px!important;text-align:center!important;align-items:center!important}
}

@media (max-width:620px){
  .site-header{padding:14px 16px!important}
  .brand{font-size:.6rem!important;letter-spacing:.15em!important}
  .brand img{width:25px!important;height:25px!important;flex-basis:25px!important}
  .section{width:calc(100% - 30px)!important;padding-top:72px!important;padding-bottom:72px!important}
  .hero,.author-hero{padding:108px 16px 58px!important;gap:36px!important}
  .hero h1,.author-copy h1,.contact-hero h1,.home-copy h1,.copy h1{font-size:clamp(2.35rem,12vw,3.45rem)!important;line-height:1.03!important;letter-spacing:-.015em!important;text-wrap:balance}
  .section h2,.section-title h2,.section-head h2,.story h2,.content h2,.tone h2,.tones h2,.music-copy h2,.bio-grid h2,.thread h2,.library h2,.author-cta h2,.details h2{font-size:clamp(2rem,10vw,3rem)!important;line-height:1.06!important;letter-spacing:-.01em!important;text-wrap:balance}
  .universe-copy h3,.book-card h3,.work-mini h3,.thread-card h3{line-height:1.05!important}
  .eyebrow{letter-spacing:.24em!important;font-size:.58rem!important}
  .lead,.author-lead,.contact-lead{font-size:1.08rem!important;line-height:1.6!important;margin-top:24px!important}
  .hero-cover,.portrait{width:min(88vw,350px)!important}
  .cover-frame{width:min(82vw,300px)!important}
  .meta{grid-template-columns:1fr!important;margin-top:38px!important}
  .actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .actions .button,.button{max-width:100%!important}
  .works-grid{grid-template-columns:1fr!important}
  .work-mini .visual{height:auto!important;aspect-ratio:1/1!important}
  .work-mini .copy{padding:20px!important}
  .types-grid{grid-template-columns:1fr!important}
  .thread-card{min-height:0!important;padding:28px 22px!important}
  .thread-card>span{margin-bottom:42px!important}
  .book-card .copy{padding:24px!important}
  .universe{padding:22px!important}
  .book-stack{height:300px!important;transform:scale(.9);transform-origin:center center}
  .mock-book{width:112px!important}
  .tri .m1{left:2%!important}.tri .m2{left:34%!important}.tri .m3{left:65%!important}
  .duo .mock-book{width:130px!important}.duo .m1{left:8%!important}.duo .m2{left:48%!important}
  .covers{height:315px!important;position:relative!important;overflow:visible!important}
  .covers .book{width:135px!important}
  .covers .b1{left:4%!important;bottom:20px!important}.covers .b2{left:36%!important;top:10px!important}.covers .b3{left:68%!important;bottom:20px!important}
  .duology-page .covers .b1{left:10%!important}.duology-page .covers .b2{left:52%!important}
  .spotify-frame{padding:8px!important}
  .spotify-frame iframe{height:352px!important;min-height:352px!important}
  .music{padding-left:15px!important;padding-right:15px!important;padding-top:76px!important;padding-bottom:76px!important}
  .music-grid{gap:28px!important}
  .book-back{left:16px!important;top:78px!important}
  .status{font-size:.52rem!important;line-height:1.5!important}
  .home-scroll{display:none!important}
  .footer,.site-footer{font-size:.6rem!important}
}

@media (max-width:420px){
  .brand span{max-width:145px;overflow:hidden;text-overflow:ellipsis}
  .covers .book{width:118px!important}
  .covers .b1{left:0!important}.covers .b2{left:33%!important}.covers .b3{left:66%!important}
  .book-stack{transform:scale(.82);margin-left:-7%;margin-right:-7%;width:114%!important}
  .contact-hero{padding-left:16px!important;padding-right:16px!important}
}

/* preserve the dedicated entrance composition */
@media (max-width:1024px){
  .landing-page .hero{min-height:100svh!important;padding:0!important;display:grid!important;place-items:center!important}
  .landing-page .hero-copy{padding:112px 16px 70px!important;width:min(92vw,760px)!important}
}
@media (max-width:620px){
  .landing-page .hero{min-height:100svh!important}
  .landing-page .hero-copy{padding:104px 14px 62px!important}
  .landing-page .moon-realistic{width:min(78vw,310px)!important;left:50%!important;top:46%!important;transform:translate(-50%,-50%)!important}
  .landing-page .hero-line{font-size:1.08rem!important;margin:24px auto 26px!important;padding:0 8px}
}