/* V77 — site-wide fluid responsiveness
   Preserves the existing visual design while making the layout adapt smoothly
   from wide desktop windows through laptops, tablets, and phones. */

:root {
  --site-gutter: clamp(14px, 3vw, 38px);
  --site-gutter-tight: clamp(12px, 2.4vw, 28px);
}

html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

/* Allow every grid/flex child to shrink instead of forcing the viewport wider. */
main,
section,
article,
header,
footer,
.shell,
.nav-shell,
.hero-inner,
.page-hero-grid,
.book-page-refined-inner,
.music-direct-layout,
.reading-shell,
.art-grid,
.reader-notes-grid,
.feature-grid,
.feature-grid-five,
.beyond-room-layout,
.beyond-artwork-grid,
.dar-reader-shell,
.dar-reader-hero,
.dar-reader-instructions,
.dar-reader-personal-note {
  min-width: 0;
}

main *,
.site-header *,
.site-footer * {
  min-width: 0;
}

/* Fluid page gutters. Long-form content still keeps its intended reading width. */
.shell {
  width: min(var(--max), calc(100% - (2 * var(--site-gutter)))) !important;
}

.nav-shell {
  width: min(var(--max), calc(100% - (2 * var(--site-gutter)))) !important;
}

/* Prevent long labels/URLs from creating horizontal scroll. */
p,
li,
blockquote,
h1,
h2,
h3,
a,
button {
  overflow-wrap: break-word;
}

/* Intermediate desktop/laptop widths: breathe before the mobile breakpoint. */
@media (max-width: 1180px) {
  body[data-page="home"] .hero-inner {
    width: min(var(--max), calc(100% - (2 * var(--site-gutter)))) !important;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) !important;
    gap: clamp(30px, 5vw, 54px) !important;
  }

  body[data-page="home"] .book-3d {
    width: min(290px, 72vw) !important;
  }

  body[data-page="home"] .feature-grid-five {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-page="home"] .feature-grid-five .feature-card,
  body[data-page="home"] .feature-grid-five .feature-card:nth-child(4),
  body[data-page="home"] .feature-grid-five .feature-card:nth-child(5),
  body[data-page="home"] .feature-grid-five .feature-card:last-child {
    grid-column: auto !important;
    width: auto !important;
  }

  body[data-page="home"] .feature-grid-five .feature-card:nth-child(4) {
    grid-column: 1 / span 1 !important;
  }

  body[data-page="home"] .feature-grid-five .feature-card:nth-child(5) {
    grid-column: 2 / span 1 !important;
  }

  body[data-page="book"] .book-page-refined-inner {
    width: min(1120px, calc(100% - (2 * var(--site-gutter)))) !important;
    gap: clamp(28px, 4vw, 48px) !important;
  }

  body[data-page="coming"] .essie-live-frame {
    width: min(1500px, calc(100% - (2 * var(--site-gutter-tight)))) !important;
  }

  body[data-page="coming"] .essie-live-content {
    width: min(1080px, calc(100% - (2 * var(--site-gutter)))) !important;
  }
}

/* Collapse the navigation before it becomes cramped. The old site waited until
   820px, which caused the menu labels to collide in narrower desktop windows. */
@media (max-width: 1060px) {
  .nav-shell {
    min-height: 68px !important;
  }

  .wordmark {
    min-width: 0 !important;
    font-size: .86rem !important;
  }

  .nav-toggle {
    display: block !important;
  }

  .site-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    display: none !important;
    margin-left: 0 !important;
    padding: 14px max(20px, var(--site-gutter)) 20px !important;
    background: rgba(8, 10, 8, .99) !important;
    border-bottom: 1px solid rgba(199, 155, 78, .22) !important;
    box-shadow: 0 16px 28px rgba(0, 0, 0, .28) !important;
  }

  .site-menu.open {
    display: grid !important;
    gap: 0 !important;
  }

  .site-menu a,
  .site-menu .spoiler-link,
  body[data-page="home"] .site-menu .spoiler-link,
  body[data-page="book"] .site-menu .spoiler-link,
  body[data-page="music"] .site-menu .spoiler-link,
  body[data-page="artwork"] .site-menu .spoiler-link,
  body[data-page="author"] .site-menu .spoiler-link,
  body[data-page="coming"] .site-menu .spoiler-link,
  body[data-page="spoiler"] .site-menu .spoiler-link {
    display: block !important;
    margin: 0 !important;
    padding: 11px 4px !important;
    color: #d8ccb3 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(199, 155, 78, .12) !important;
    border-radius: 0 !important;
    text-align: left !important;
    box-shadow: none !important;
    white-space: normal !important;
  }

  .site-menu a::after,
  .site-menu .spoiler-link::after {
    display: none !important;
  }

  .nav-toggle span:not(.sr-only) {
    background: #caa35f !important;
  }

  body[data-page="home"] .feature-grid-five {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="home"] .feature-grid-five .feature-card:nth-child(4),
  body[data-page="home"] .feature-grid-five .feature-card:nth-child(5) {
    grid-column: auto !important;
  }

  body[data-page="home"] .feature-grid-five .feature-card:last-child {
    grid-column: 1 / -1 !important;
    width: calc(50% - 7px) !important;
    justify-self: center !important;
  }

  body[data-page="music"] .direct-listen-card h1 {
    white-space: normal !important;
    text-wrap: balance;
  }

  body[data-page="spoiler"] .spoiler-shell {
    width: min(920px, calc(100% - (2 * var(--site-gutter)))) !important;
  }

  body[data-page="spoiler"] .gate-panel.unlocked .beyond-room-layout {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 30px !important;
  }

  body[data-page="spoiler"] .beyond-column-divider {
    display: none !important;
  }

  body[data-page="spoiler"] .beyond-music-card,
  body[data-page="spoiler"] .beyond-artwork-section {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* Tablet and small laptop: stop squeezing two-column hero layouts. */
@media (max-width: 920px) {
  .hero,
  body[data-page="home"] .hero {
    min-height: auto !important;
  }

  .hero-inner,
  body[data-page="home"] .hero-inner {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: clamp(26px, 5vw, 40px) !important;
    padding: clamp(34px, 6vw, 52px) 0 !important;
  }

  body[data-page="home"] .book-stage {
    justify-content: center !important;
  }

  body[data-page="home"] .book-3d {
    width: min(300px, 66vw) !important;
  }

  body[data-page="home"] .hero-copy {
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  body[data-page="home"] .ornament,
  body[data-page="home"] .hero-actions,
  body[data-page="home"] .home-cta-row {
    justify-content: center !important;
  }

  body[data-page="home"] .book-invite,
  body[data-page="home"] .amazon-buy-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-hero-grid,
  body[data-page="book"] .book-page-refined-inner {
    grid-template-columns: 1fr !important;
  }

  body[data-page="book"] .book-cover-column,
  body[data-page="book"] .book-refined-copy {
    width: 100% !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body[data-page="artwork"] .art-grid {
    gap: clamp(12px, 2.5vw, 20px) !important;
  }

  body[data-page="author"] .reading-shell,
  body[data-page="music"] .music-direct-layout {
    width: min(820px, calc(100% - (2 * var(--site-gutter)))) !important;
  }

  .footer-inner {
    grid-template-columns: 1fr !important;
  }

  /* Hidden complimentary-reader page follows the same responsive rhythm. */
  .dar-reader-shell {
    width: min(1080px, calc(100% - (2 * var(--site-gutter)))) !important;
  }

  .dar-reader-hero {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding-bottom: 46px !important;
  }

  .dar-reader-cover-wrap {
    width: min(360px, 70vw) !important;
    margin-inline: auto !important;
  }

  .dar-reader-copy {
    max-width: 720px !important;
    margin-inline: auto !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .dar-reader-rule {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dar-reader-welcome {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dar-reader-personal-note,
  .dar-reader-instructions {
    width: min(850px, calc(100% - (2 * var(--site-gutter)))) !important;
  }
}

@media (max-width: 720px) {
  :root {
    --site-gutter: clamp(13px, 4.5vw, 22px);
  }

  .shell,
  .nav-shell {
    width: calc(100% - (2 * var(--site-gutter))) !important;
  }

  .feature-section,
  .paper-section,
  body[data-page="author"] .paper-section,
  body[data-page="artwork"] .paper-section {
    padding-top: clamp(28px, 7vw, 44px) !important;
    padding-bottom: clamp(30px, 8vw, 50px) !important;
  }

  body[data-page="home"] .hero-inner {
    padding-top: 30px !important;
    padding-bottom: 34px !important;
  }

  body[data-page="home"] .book-3d {
    width: min(280px, 70vw) !important;
  }

  body[data-page="home"] .hero-copy h1 {
    font-size: clamp(2rem, 8.4vw, 3rem) !important;
  }

  body[data-page="home"] .hero-copy > p {
    font-size: clamp(.98rem, 3.3vw, 1.08rem) !important;
    line-height: 1.55 !important;
  }

  body[data-page="home"] .feature-grid-five {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-page="home"] .feature-grid-five .feature-card:last-child {
    width: calc(50% - 5px) !important;
  }

  body[data-page="book"] .book-page-refined {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }

  body[data-page="book"] .book-page-refined-inner {
    width: calc(100% - (2 * var(--site-gutter))) !important;
  }

  body[data-page="author"] .reading-card {
    padding: clamp(18px, 5vw, 26px) !important;
  }

  body[data-page="music"] .music-direct-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-page="music"] .music-direct-layout {
    width: calc(100% - (2 * var(--site-gutter))) !important;
  }

  body[data-page="music"] .compact-main-player,
  body[data-page="music"] .direct-song-list,
  body[data-page="music"] .audio-intro,
  body[data-page="music"] .music-beyond-invite {
    width: 100% !important;
  }

  body[data-page="artwork"] .art-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="spoiler"] .spoiler-shell {
    width: calc(100% - (2 * var(--site-gutter))) !important;
    padding-top: 42px !important;
    padding-bottom: 46px !important;
  }

  body[data-page="spoiler"] .gate-question {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(20px, 5vw, 28px) !important;
  }

  body[data-page="spoiler"] .beyond-artwork-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="coming"] .essie-live-frame {
    width: calc(100% - (2 * var(--site-gutter-tight))) !important;
  }

  body[data-page="coming"] .essie-live-content {
    width: calc(100% - (2 * var(--site-gutter))) !important;
  }

  .dar-reader-main {
    padding-top: 30px !important;
  }

  .dar-reader-personal-note,
  .dar-reader-instructions {
    width: calc(100% - (2 * var(--site-gutter))) !important;
    padding-left: clamp(18px, 5vw, 26px) !important;
    padding-right: clamp(18px, 5vw, 26px) !important;
  }

  .dar-reader-instructions h2 {
    font-size: clamp(1.8rem, 7.5vw, 2.45rem) !important;
  }
}

/* Narrow phones: one clear column everywhere rather than tiny side-by-side cards. */
@media (max-width: 480px) {
  body[data-page="home"] .feature-grid-five {
    grid-template-columns: 1fr !important;
  }

  body[data-page="home"] .feature-grid-five .feature-card,
  body[data-page="home"] .feature-grid-five .feature-card:last-child,
  body[data-page="home"] .feature-grid-five .feature-card:nth-child(4),
  body[data-page="home"] .feature-grid-five .feature-card:nth-child(5) {
    grid-column: auto !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  body[data-page="home"] .feature-grid-five .feature-image,
  body[data-page="home"] .music-card > img.feature-image,
  body[data-page="home"] .author-card-home > img.feature-image {
    height: clamp(150px, 48vw, 210px) !important;
  }

  body[data-page="home"] .reader-notes-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="home"] .reader-note,
  body[data-page="home"] .reader-note:first-child {
    border-left: 0 !important;
    border-top: 1px solid rgba(215, 182, 122, .10) !important;
  }

  body[data-page="home"] .reader-note:first-child {
    border-top: 0 !important;
  }

  .btn,
  .amazon-buy-button,
  .dar-download-button,
  .dar-kindle-button {
    max-width: 100% !important;
  }

  body[data-page="coming"] .essie-live-tagline {
    text-wrap: pretty;
  }
}