/* PRAUSPER site-wide refinement layer. Loaded after the legacy cascade. */
:root {
  --polish-content: 1280px;
  --polish-radius: 18px;
  --polish-border: rgba(185, 157, 255, 0.22);
  --polish-panel: rgba(10, 13, 28, 0.82);
  --polish-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
}

@media (min-width: 901px) {
  body[data-page] .site-shell {
    width: min(100% - 36px, 1480px);
    margin-inline: auto;
  }

  body[data-page] .topbar {
    min-height: 76px;
    padding-inline: clamp(24px, 3vw, 48px);
    border-radius: 18px;
  }

  body[data-page] .brand {
    font-size: 15px;
    letter-spacing: 0.48em;
  }

  body[data-page] .nav-links {
    gap: clamp(32px, 4vw, 64px);
    font-size: 12px;
  }

  body[data-page] main.subpage,
  body[data-page] main.signal-home {
    width: 100%;
    max-width: var(--polish-content);
    margin-inline: auto;
  }

  body[data-page] .glass-panel {
    border-color: var(--polish-border);
    border-radius: var(--polish-radius);
    box-shadow: var(--polish-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  }

  body[data-page="home"] .signal-hero {
    min-height: clamp(650px, 74vh, 760px);
    display: grid;
    place-items: center;
    border-radius: 20px;
  }

  body[data-page="home"] .signal-hero .hero-art {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-position: 50% 50%;
    transform: none;
  }

  body[data-page="home"] .signal-hero .hero-copy {
    box-sizing: border-box;
    width: min(560px, calc(100% - 64px));
    margin-inline: auto;
    padding: 38px 48px 34px;
    justify-self: center;
    transform: none;
  }

  body[data-page="home"] .signal-hero h1 {
    width: 100%;
    font-size: clamp(48px, 4.3vw, 64px);
    letter-spacing: 0.2em;
    text-align: center;
    text-indent: 0;
  }

  body[data-page="home"] .signal-hero .tagline {
    width: 100%;
    margin-top: 20px;
    font-size: clamp(14px, 1.4vw, 18px);
    text-align: center;
    text-indent: 0;
  }

  body[data-page="videos"] .subpage,
  body[data-page="library"] .subpage,
  body[data-page="library"] .episode-page {
    padding-inline: 0;
  }

  body[data-page="videos"] main.video-playlist-suite.subpage {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(18px, 2.4vw, 40px);
  }

  body[data-page="library"] main.library-shell.subpage {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(18px, 2.4vw, 40px);
  }

  body[data-page="videos"] .library-controlbar,
  body[data-page="videos"] .youtube-feed-section,
  body[data-page="library"] .library-shelf,
  body[data-page="library"] .episode-layout,
  body[data-page="library"] .episode-watchlist,
  body[data-page="library"] .episode-notes {
    width: 100%;
    max-width: var(--polish-content);
    margin-inline: auto;
  }

  body[data-page="videos"] .library-controlbar,
  body[data-page="videos"] .youtube-feed-section {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body[data-page="library"] .library-shelf {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body[data-page="videos"] .library-controlbar {
    grid-template-columns: minmax(0, 1fr);
    min-height: 82px;
    padding: 16px 20px;
  }

  body[data-page="videos"] .library-search {
    width: 100%;
    max-width: none;
  }

  body[data-page="videos"] .youtube-feed-section {
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.8fr);
    gap: clamp(24px, 3vw, 42px);
    padding: 22px;
  }

  body[data-page="videos"] .youtube-feed-copy {
    min-height: 460px;
    padding: clamp(30px, 3vw, 44px);
    border-radius: 15px;
  }

  body[data-page="videos"] .youtube-feed-copy h2 {
    max-width: 9ch;
    font-size: clamp(48px, 4.6vw, 66px);
    line-height: 0.96;
  }

  body[data-page="videos"] .youtube-feed-copy p:not(.section-label) {
    max-width: 30ch;
    font-size: 16px;
    line-height: 1.65;
  }

  body[data-page="videos"] .youtube-feature-card {
    min-height: 460px;
    border-radius: 15px;
  }

  body[data-page="library"] .library-shelf {
    border-radius: 20px;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading {
    width: min(720px, calc(100% - 48px));
    margin: 22px auto 0;
    padding: 20px 28px;
    border-radius: 14px;
  }

  body[data-page="library"] .exodus-blog-layout {
    gap: clamp(28px, 3.5vw, 54px);
    padding: 28px;
  }

  body[data-page="library"] .exodus-blog-sidebar {
    border-radius: 15px;
  }

  body[data-page="library"] .exodus-blog-article h2 {
    font-size: clamp(38px, 3.8vw, 56px);
    line-height: 1.02;
  }

  body[data-page="library"] .episode-page {
    gap: 28px;
  }

  body[data-page="library"] .episode-layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
    gap: clamp(30px, 3.5vw, 52px);
    min-height: 0;
    padding: clamp(26px, 2.5vw, 38px);
    align-items: center;
  }

  body[data-page="library"] .episode-layout h1 {
    max-width: 11ch;
    font-size: clamp(46px, 4.2vw, 62px);
    line-height: 0.98;
    letter-spacing: 0.02em;
  }

  body[data-page="library"] .episode-video {
    min-height: 360px;
    border-radius: 14px;
  }

  body[data-page="library"] .episode-layout .button {
    min-height: 56px;
  }

  body[data-page="library"] .episode-watchlist,
  body[data-page="library"] .episode-notes {
    padding: clamp(24px, 2.5vw, 36px);
  }
}

@media (max-width: 900px) {
  body[data-page] .site-shell,
  body[data-page] main,
  body[data-page] section {
    max-width: 100%;
  }

  body[data-page] h1,
  body[data-page] h2 {
    text-wrap: balance;
  }

  body[data-page="videos"] .youtube-feed-copy,
  body[data-page="library"] .shelf-heading,
  body[data-page="library"] .episode-copy {
    text-align: center;
  }

  body[data-page="videos"] .youtube-feed-copy > *,
  body[data-page="library"] .shelf-heading > *,
  body[data-page="library"] .episode-copy > * {
    margin-inline: auto;
  }

  body[data-page="library"] .episode-layout h1 {
    max-width: 12ch;
    margin-inline: auto;
    font-size: clamp(42px, 12vw, 58px);
  }

  body[data-page="home"] .signal-hero.hero {
    min-height: 680px;
  }

  body[data-page="home"] .signal-hero .hero-art {
    inset: 0;
    width: 100%;
    background-position: 50% top;
    transform: none;
  }

  body[data-page="home"] .signal-hero .hero-copy,
  body[data-page="home"] .signal-hero h1,
  body[data-page="home"] .signal-hero .tagline {
    width: 100%;
    margin-inline: auto;
    text-align: center;
    text-indent: 0;
    transform: none;
  }

  body[data-page="videos"] .library-search input {
    font-size: 13px;
  }

  body[data-page="videos"] .library-controlbar {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="videos"] .library-search {
    width: 100%;
    max-width: none;
  }
}

/* Sitewide screen-fit pass, 2026-07-19.
   Purpose: better viewport fit across desktop + mobile without changing the PRAUSPER visual identity. */
@media (min-width: 901px) {
  :root {
    --polish-content: 1680px;
  }

  body[data-page] .site-shell {
    width: min(100% - 28px, 1840px);
  }

  body[data-page] .topbar {
    min-height: 68px;
    padding-inline: clamp(22px, 2.6vw, 44px);
  }

  body[data-page] main.subpage,
  body[data-page] main.signal-home {
    max-width: var(--polish-content);
  }

  body[data-page="home"] main.signal-home {
    max-width: min(100%, 1500px);
  }

  body[data-page="home"] .signal-hero {
    min-height: min(720px, calc(100dvh - 150px));
    width: min(100%, 1360px);
    margin-inline: auto;
  }

  body[data-page="contact"] main.subpage,
  body[data-page="merch"] main.subpage,
  body[data-page="library"] .episode-page {
    max-width: min(100%, 1520px);
  }

  body[data-page="contact"] .contact-layout {
    width: min(100%, 1380px);
    min-height: min(680px, calc(100dvh - 190px));
    margin-inline: auto;
  }

  body[data-page="merch"] .store-masthead,
  body[data-page="merch"] .store-controls,
  body[data-page="merch"] .store-grid {
    width: min(100%, 1520px);
    margin-inline: auto;
  }

  body[data-page="library"] .site-shell {
    width: min(100% - 28px, 1840px) !important;
    padding-top: 14px !important;
  }

  body[data-page="library"] .topbar {
    min-height: 66px !important;
    padding-block: 6px !important;
  }

  body[data-page="library"] main.library-shell.subpage {
    padding-inline: clamp(14px, 2vw, 34px);
  }

  body[data-page="library"] .streaming-shell {
    gap: 10px;
  }

  body[data-page="library"] .exodus-blog-index {
    margin-top: 10px !important;
    margin-bottom: 18px !important;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(680px, calc(100% - 48px)) !important;
    min-height: 64px !important;
    margin: 0 auto -1px !important;
    padding: 12px 28px 14px !important;
    transform: none !important;
    border-radius: 16px 16px 0 0;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading h2 {
    font-size: clamp(20px, 1.55vw, 28px);
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading h2::before {
    margin-bottom: 5px;
    font-size: 9px;
  }

  body[data-page="library"] .exodus-blog-index .exodus-publish-row {
    min-height: 0 !important;
  }

  body[data-page="library"] .exodus-project-archive {
    height: min(760px, calc(100dvh - 210px)) !important;
    min-height: 560px !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-sidebar {
    padding: 50px 24px 24px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-reader {
    padding-top: 46px;
    padding-bottom: 38px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-publish-outline {
    padding-top: 58px;
  }

  body[data-page="library"] .exodus-project-archive .exodus-reader-controls {
    margin-top: 0;
  }

  body[data-page="library"] .episode-layout {
    min-height: min(520px, calc(100dvh - 260px));
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  body[data-page] .site-shell {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  body[data-page] .topbar {
    min-height: 62px;
  }

  body[data-page="home"] .signal-hero {
    min-height: calc(100dvh - 132px);
  }

  body[data-page="contact"] .contact-layout {
    min-height: auto;
  }

  body[data-page="library"] .exodus-project-archive {
    height: calc(100dvh - 188px);
    min-height: 500px;
  }
}

@media (max-width: 900px) {
  body[data-page] {
    overflow-x: hidden;
  }

  body[data-page] .site-shell {
    width: calc(100% - 16px);
    margin: 8px auto;
    border-radius: 18px;
  }

  body[data-page] .topbar {
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  body[data-page] .subpage,
  body[data-page] main.signal-home {
    padding-top: 14px;
  }

  body[data-page="home"] .signal-hero.hero {
    height: clamp(560px, calc(100dvh - 116px), 650px) !important;
    min-height: clamp(560px, calc(100dvh - 116px), 650px) !important;
    padding: 54px 16px 62px !important;
  }

  body[data-page="home"] main.signal-home > .signal-hero#home {
    height: clamp(560px, calc(100dvh - 116px), 650px) !important;
    min-height: clamp(560px, calc(100dvh - 116px), 650px) !important;
    padding: 54px 16px 62px !important;
  }

  body[data-page="home"] .signal-hero .hero-copy {
    width: min(100% - 28px, 360px);
    padding: 30px 22px 28px;
  }

  body[data-page="home"] .signal-hero .hero-copy h1 {
    font-size: clamp(38px, 12vw, 54px);
    letter-spacing: 0.16em;
  }

  body[data-page="home"] .signal-hero .tagline {
    font-size: clamp(11px, 3.8vw, 15px);
    letter-spacing: 0.16em;
  }

  body[data-page="home"] .mobile-journey-rail {
    scroll-padding-inline: 16px;
    padding-inline: 2px 18px;
  }

  body[data-page="home"] .mobile-journey-card {
    width: min(252px, calc(100vw - 112px));
    min-width: min(252px, calc(100vw - 112px));
  }

  body[data-page="contact"] .contact-layout,
  body[data-page="merch"] .store-masthead,
  body[data-page="merch"] .store-controls,
  body[data-page="merch"] .store-grid,
  body[data-page="library"] .episode-layout,
  body[data-page="library"] .episode-watchlist,
  body[data-page="library"] .episode-notes {
    width: calc(100% - 28px);
    margin-inline: auto;
  }

  body[data-page="videos"] .youtube-feed-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
  }

  body[data-page="videos"] .youtube-feed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    overflow: visible;
  }

  body[data-page="videos"] .youtube-feed-card,
  body[data-page="videos"] .media-tile {
    width: 100%;
    min-width: 0;
  }

  body[data-page="library"] main.library-shell.subpage {
    padding-inline: 10px;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading {
    width: min(100%, 340px) !important;
    margin: 0 auto -1px !important;
    padding: 14px 18px !important;
  }

  body[data-page="library"] .exodus-project-archive {
    width: 100%;
    min-height: auto;
  }

  body[data-page="library"] .exodus-publish-reader,
  body[data-page="library"] .exodus-publish-sidebar,
  body[data-page="library"] .exodus-publish-outline {
    max-width: 100%;
  }

  body[data-page="library"] .episode-layout {
    min-height: auto !important;
    padding: 18px !important;
    gap: 18px !important;
  }

  body[data-page="library"] .episode-video {
    min-height: 190px !important;
  }

  body[data-page="library"] .episode-layout h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  body[data-page="library"] .episode-layout .button {
    min-height: 48px !important;
  }
}

@media (min-width: 901px) {
  body[data-page="library"] .site-shell > .topbar {
    height: 68px !important;
    min-height: 68px !important;
    padding-block: 0 !important;
  }

  body[data-page="library"] main.library-shell.subpage {
    padding-top: 0 !important;
  }

  body[data-page="library"] .exodus-blog-index {
    margin-top: -24px !important;
  }

  body[data-page="library"] .exodus-blog-index .shelf-heading {
    min-height: 58px !important;
    padding-block: 10px 12px !important;
  }

  body[data-page="library"] .exodus-project-archive {
    height: min(720px, calc(100dvh - 290px)) !important;
    min-height: 500px !important;
  }
}