body
{
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   color: #182536;
   background: #fff;
}


/* ============================================================
   V2 SITE MASTHEAD
   ============================================================ */

.site-header
{
   position: relative;
   z-index: 100;
   background: #071524;
   color: #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.masthead
{
   position: relative;
   display: flex;
   align-items: center;
   min-height: 112px;
   padding: 0 42px;
   overflow: hidden;
   background:
      radial-gradient(circle at 12% 30%,
                      rgba(255, 255, 255, 0.16) 0,
                      rgba(255, 255, 255, 0.04) 1px,
                      transparent 2px),
      radial-gradient(circle at 27% 68%,
                      rgba(255, 255, 255, 0.12) 0,
                      rgba(255, 255, 255, 0.03) 1px,
                      transparent 2px),
      radial-gradient(circle at 74% 24%,
                      rgba(255, 255, 255, 0.14) 0,
                      rgba(255, 255, 255, 0.03) 1px,
                      transparent 2px),
      radial-gradient(circle at 88% 72%,
                      rgba(255, 255, 255, 0.11) 0,
                      rgba(255, 255, 255, 0.03) 1px,
                      transparent 2px),
      linear-gradient(105deg, #07111e 0%, #0b2036 52%, #071421 100%);
}

.masthead::before
{
   content: "";
   position: absolute;
   top: -80px;
   right: 12%;
   width: 420px;
   height: 260px;
   pointer-events: none;
   opacity: 0.42;
   transform: rotate(-8deg);
   background:
      linear-gradient(
         100deg,
         transparent 0%,
         rgba(120, 190, 235, 0.04) 25%,
         rgba(155, 215, 250, 0.18) 55%,
         rgba(205, 235, 255, 0.05) 76%,
         transparent 100%
      );
   filter: blur(10px);
}

.masthead-brand
{
   position: relative;
   z-index: 1;
   flex-shrink: 0;
}

.masthead-title
{
   display: flex;
   align-items: baseline;
   gap: 10px;
   line-height: 1;
   white-space: nowrap;
}

.masthead-simonson
{
   font-size: 32px;
   font-weight: 700;
   letter-spacing: 1.2px;
}

.masthead-theater
{
   font-size: 32px;
   font-weight: 300;
   letter-spacing: 1.2px;
}

.masthead-subtitle
{
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 9px;
   color: rgba(255, 255, 255, 0.72);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 2.2px;
   text-transform: uppercase;
}

.masthead-dot
{
   color: rgba(255, 255, 255, 0.40);
}

.masthead-tagline
{
   position: relative;
   z-index: 1;
   margin-left: auto;
   padding-left: 40px;
   color: rgba(255, 255, 255, 0.88);
   font-size: 16px;
   font-style: italic;
   font-weight: 400;
   letter-spacing: 0.4px;
   white-space: nowrap;
}

.menu-button
{
   display: none;
   position: relative;
   z-index: 2;
   margin-left: 24px;
   padding: 4px 6px;
   border: 0;
   background: transparent;
   color: #fff;
   font-size: 30px;
   line-height: 1;
   cursor: pointer;
}

.site-navigation
{
   display: flex;
   align-items: center;
   gap: 30px;
   min-height: 54px;
   padding: 0 42px;
   background: #0b1b2d;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-menu
{
   display: flex;
   align-items: center;
   gap: 28px;
   flex-shrink: 0;
}

.site-menu a
{
   display: block;
   padding: 19px 0 17px 0;
   color: rgba(255, 255, 255, 0.88);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.8px;
   text-decoration: none;
   text-transform: uppercase;
   white-space: nowrap;
}

.site-menu a:hover
{
   color: #fff;
   text-decoration: none;
}

.site-menu a:focus-visible,
.menu-button:focus-visible
{
   outline: 2px solid #fff;
   outline-offset: 3px;
}

.site-search
{
   width: 100%;
   max-width: 390px;
   margin-left: auto;
}

.site-search input
{
   box-sizing: border-box;
   width: 100%;
   padding: 8px 13px;
   border: 1px solid rgba(255, 255, 255, 0.20);
   border-radius: 4px;
   outline: none;
   background: rgba(255, 255, 255, 0.08);
   color: #fff;
   font-family: inherit;
   font-size: 13px;
}

.site-search input::placeholder
{
   color: rgba(255, 255, 255, 0.55);
}

.site-search input:focus
{
   border-color: rgba(255, 255, 255, 0.60);
   background: rgba(255, 255, 255, 0.12);
}


/* ============================================================
   EXISTING SITE CONTENT
   ============================================================ */

main
{
   padding-bottom: 24px;
}

.home-hero img
{
   display: block;
   width: 100%;
   height: auto;
}

.home-content
{
   padding: 0 14px;
}

.home-nav
{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 36px;
   padding-top: 18px;
}

.home-nav p
{
   margin: 0;
}

.home-nav a
{
   color: #0b1626;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.8px;
   text-decoration: none;
   text-transform: uppercase;
}

.home-nav a:hover
{
   text-decoration: underline;
}

.back-link
{
   margin: 24px 0 0 0;
}

.back-link a
{
   color: #0b1626;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.8px;
   text-decoration: none;
   text-transform: uppercase;
}

.back-link a:hover
{
   text-decoration: underline;
}

.about-page
{
   max-width: 1000px;
   margin: 0 auto;
   padding: 24px 14px;
}

.contact-page
{
   max-width: 1000px;
   margin: 0 auto;
   padding: 24px 14px;
}

.video-subsection
{
   margin-left: 20px;
}

.library-page
{
   max-width: 1000px;
   margin: 0 auto;
   padding: 24px 14px;
}

.library-page h1
{
   margin: 0 0 18px 0;
   color: #0b1626;
   font-size: 24px;
   letter-spacing: 1px;
}

.library-filters
{
   margin-bottom: 22px;
   border-top: 1px solid #ccc;
}

.library-filter-actions
{
   margin: 8px 0 10px 8px;
}

.library-filter-details
{
   border-bottom: 1px solid #ccc;
}

.library-filter-details:not([open]) > :not(summary)
{
   display: none !important;
}

.library-filter-details summary
{
   padding: 14px 0;
   color: #0b1626;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: normal;
   cursor: pointer;
   position: relative;
}

.library-filter-details.has-active-filter:not([open]) summary
{
   background: #e8f5e9;
}

.filter-active-count
{
   position: absolute;
   right: 4px;
   color: #666;
   font-size: 14px;
   font-weight: 900;
   letter-spacing: normal;
}

.filter-active-count:empty
{
   display: none;
}

.library-filter-details[open] .filter-active-count
{
   display: none;
}

.filter-section-content
{
   padding: 4px 0 18px 0;
}

.filter-group
{
   margin-bottom: 18px;
}

.filter-group:last-child
{
   margin-bottom: 0;
}

.filter-group label
{
   display: block;
   margin-bottom: 8px;
   color: #0b1626;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: normal;
}

.filter-group h2
{
   margin: 0 0 8px 0;
   color: #0b1626;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: normal;
}

.presentation-filter-grid
{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 18px 28px;
}

.presentation-filter-grid .filter-group
{
   margin-bottom: 0;
}

.presentation-filter-grid .filter-group > h2
{
   margin-left: 8px;
}

.presentation-filter-grid .filter-group label
{
   margin-left: 20px;
}

.library-poster
{
   display: block;
   width: 240px;
   max-width: 70%;
   height: auto;
}

.library-title-note-line
{
   margin: 0 0 8px 0;
}

#library-search
{
   box-sizing: border-box;
   width: 100%;
   max-width: 500px;
   padding: 10px 12px;
   border: 1px solid #aaa;
   border-radius: 4px;
   font: inherit;
}

#genre-filters
{
   display: flex;
   flex-wrap: wrap;
   gap: 8px 18px;
}

#title-count
{
   margin: 0 0 14px 0;
   color: #555;
   font-size: 16px;
   font-weight: 600;
}


/* ============================================================
   V2 LIBRARY POSTER GRID
   ============================================================ */

#title-list
{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 24px 18px;
   align-items: start;
   padding: 4px 0 28px 0;
}

.library-poster-card
{
   min-width: 0;
   cursor: pointer;
}

.library-poster-grid-image
{
   display: block;
   width: 100%;
   aspect-ratio: 2 / 3;
   object-fit: cover;
   border-radius: 4px;
   background: #e8e8e8;
   box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
   transition:
      transform 0.15s ease,
      box-shadow 0.15s ease;
}

.library-poster-caption
{
   padding: 8px 3px 0 3px;
   color: #245a8d;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.3;
   text-align: center;
}

.library-poster-card:hover .library-poster-grid-image
{
   transform: translateY(-2px);
   box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28);
}

.library-poster-card:focus-visible
{
   outline: none;
}

.library-poster-card:focus-visible .library-poster-grid-image
{
   outline: 3px solid #245a8d;
   outline-offset: 3px;
}


/*
 * Retained for the existing title-detail code.
 * This will be replaced when the V2 title-detail dashboard is implemented.
 */

.library-title-details
{
   margin: 0 6px 24px 6px;
   padding: 18px;
   border: 1px solid #d8dde3;
   border-radius: 4px;
   background: #f7f7f7;
}

.about-page h1
{
   margin: 0 0 18px 0;
   color: #0b1626;
   font-size: 24px;
   letter-spacing: 1px;
}

.about-lead img
{
   display: block;
   width: 100%;
   height: auto;
}

.about-description
{
   margin: 20px 0 24px 0;
   font-size: 16px;
   line-height: 1.6;
}

.about-details
{
   border-top: 1px solid #ccc;
}

.about-details:last-of-type
{
   border-bottom: 1px solid #ccc;
}

.about-details summary
{
   padding: 16px 0;
   color: #0b1626;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.8px;
   cursor: pointer;
}

.gallery
{
   display: grid;
   grid-template-columns: 1fr;
   gap: 14px;
   padding-bottom: 18px;
}

.gallery img
{
   display: block;
   width: 100%;
   height: auto;
   cursor: pointer;
}

.lightbox
{
   display: none;
   position: fixed;
   z-index: 1000;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.95);
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

.lightbox.active
{
   display: flex;
}

.lightbox img
{
   display: block;
   max-width: 95vw;
   max-height: 95vh;
   width: auto;
   height: auto;
   object-fit: contain;
}

.technical-details
{
   padding-bottom: 18px;
   line-height: 1.5;
}

.technical-details h2
{
   margin-top: 20px;
   color: #0b1626;
   font-size: 17px;
}

.technical-details ul
{
   margin-top: 8px;
   padding-left: 22px;
}


/* ============================================================
   V2 MOBILE
   ============================================================ */


@media (max-width: 699px)
{
   .masthead
   {
      min-height: 88px;
      padding: 0 16px;
   }

   .masthead::before
   {
      right: -110px;
      width: 330px;
      height: 220px;
      opacity: 0.34;
   }

   .masthead-title
   {
      gap: 6px;
   }

   .masthead-simonson,
   .masthead-theater
   {
      font-size: 22px;
      letter-spacing: 0.6px;
   }

   .masthead-subtitle
   {
      gap: 5px;
      margin-top: 7px;
      font-size: 8px;
      letter-spacing: 1.5px;
   }

   .masthead-tagline
   {
      margin-left: auto;
      padding-left: 12px;
      font-size: 10px;
      letter-spacing: 0;
      white-space: nowrap;
   }

   .menu-button
   {
      display: block;
      flex-shrink: 0;
      margin-left: 12px;
      font-size: 28px;
   }

   .site-navigation
   {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      min-height: 0;
      padding: 10px 14px 12px 14px;
   }

   .site-menu
   {
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      order: 2;
      margin: 10px -14px -12px -14px;
      background: #0b1b2d;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
   }

   .site-menu.menu-open
   {
      display: flex;
   }

   .site-menu a
   {
      padding: 13px 18px;
      font-size: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
   }

   .site-search
   {
      order: 1;
      width: 100%;
      max-width: none;
      margin: 0;
   }

   .site-search input
   {
      padding: 9px 11px;
      font-size: 13px;
   }

   .home-nav
   {
      gap: 14px 24px;
   }

   #title-list
   {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px 14px;
   }
}


@media (min-width: 700px)
{
   .gallery
   {
      grid-template-columns: 1fr 1fr;
   }

   .site-menu
   {
      display: flex !important;
   }
}

/* ============================================================
   V2 TITLE DETAIL - DESKTOP DASHBOARD
   ============================================================ */

#title-detail-view
{
   max-width: 1320px;
   margin: 0 auto;
   padding: 28px 34px 46px 34px;
}

.title-detail-back
{
   display: inline-block;
   padding: 0;
   color: #245a8d;
   background: transparent;
   border: 0;
   font: inherit;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
}

.title-detail-back:hover
{
   text-decoration: underline;
}

.title-detail-back-top
{
   margin-bottom: 22px;
}

.title-detail-back-bottom
{
   margin-top: 26px;
}

.title-detail-hero
{
   display: grid;
   grid-template-columns: 350px minmax(300px, 1fr) minmax(320px, 0.95fr);
   gap: 30px;
   align-items: start;
}

.title-detail-poster-column
{
   min-width: 0;
}

.title-detail-poster
{
   display: block;
   width: 100%;
   aspect-ratio: 2 / 3;
   object-fit: cover;
   border-radius: 7px;
   background: #e8e8e8;
   box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
}

.title-detail-information
{
   min-width: 0;
}

.title-detail-meta-label
{
   color: #245a8d;
}

.title-detail-heading-row
{
   display: flex;
   align-items: flex-start;
   gap: 14px;
   margin-bottom: 12px;
}

.title-detail-heading-row h1
{
   margin: 0;
   color: #10253d;
   font-size: 34px;
   line-height: 1.12;
}

.title-detail-rating-badge
{
   flex-shrink: 0;
   margin-top: 4px;
   padding: 4px 8px;
   color: #182536;
   background: #f4f6f8;
   border: 1px solid #9ca8b4;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
}

.title-detail-metadata
{
   display: grid;
   gap: 0;
}

.title-detail-metadata p
{
   margin: 0 0 5px 0;
   line-height: 1.28;
}

.title-detail-card p
{
   margin: 0 0 7px 0;
   line-height: 1.38;
}

.title-detail-metadata strong,
.title-detail-card strong
{
   color: #245a8d;
}

.title-detail-card
{
   min-width: 0;
   padding: 18px 20px;
   background: #fff;
   border: 1px solid #d6dee6;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(20, 43, 67, 0.08);
}

.title-detail-card h2
{
   margin: 0 0 10px 0;
   color: #10253d;
   font-size: 21px;
   line-height: 1.2;
}

.title-detail-synopsis
{
   align-self: stretch;
}

.title-detail-synopsis p
{
   margin-bottom: 0;
}

.title-detail-analysis
{
   margin-top: 20px;
   background: #f8fafc;
}

.title-detail-analysis-subtitle
{
   margin: -2px 0 18px 0 !important;
   color: #5a6876;
   font-size: 14px;
}

.audio-channel-chart
{
   width: 100%;
}

.audio-channel-legend
{
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 22px;
   margin: 0 0 12px 0;
   color: #435363;
   font-size: 13px;
}

.audio-channel-legend-item
{
   display: inline-flex;
   align-items: center;
   gap: 7px;
}

.audio-channel-legend-rms
{
   display: inline-block;
   width: 13px;
   height: 13px;
   border-radius: 2px;
   background: #2f6fa5;
}

.audio-channel-legend-peak
{
   display: inline-block;
   width: 18px;
   height: 3px;
   background: #b83b3b;
}

.audio-channel-plot
{
   display: grid;
   grid-template-columns: 46px minmax(0, 1fr);
   height: 300px;
}

.audio-channel-y-axis
{
   position: relative;
   height: 100%;
   color: #667482;
   font-size: 12px;
}

.audio-channel-y-tick
{
   position: absolute;
   right: 9px;
   transform: translateY(-50%);
   line-height: 1;
}

.audio-channel-graph
{
   position: relative;
   min-width: 0;
   height: 100%;
   border-left: 1px solid #aeb9c4;
   border-bottom: 1px solid #aeb9c4;
}

.audio-channel-grid-line
{
   position: absolute;
   z-index: 0;
   left: 0;
   right: 0;
   border-top: 1px solid #dbe2e8;
   pointer-events: none;
}

.audio-channel-slots
{
   position: absolute;
   z-index: 1;
   inset: 0;
   display: grid;
   grid-template-columns: repeat(8, minmax(0, 1fr));
}

.audio-channel-slot
{
   position: relative;
   min-width: 0;
   height: 100%;
}

.audio-channel-rms-bar
{
   position: absolute;
   bottom: 0;
   left: 50%;
   width: 38px;
   max-width: 52%;
   transform: translateX(-50%);
   border-radius: 3px 3px 0 0;
   background: #2f6fa5;
}

.audio-channel-peak-marker
{
   position: absolute;
   left: 50%;
   width: 50px;
   max-width: 68%;
   height: 3px;
   transform: translate(-50%, 50%);
   background: #b83b3b;
}

.audio-channel-peak-label
{
   position: absolute;
   left: 50%;
   bottom: 6px;
   transform: translateX(-50%);
   color: #8e2929;
   font-size: 11px;
   font-weight: 700;
   line-height: 1;
   white-space: nowrap;
}

.audio-channel-x-axis
{
   display: grid;
   grid-template-columns: 46px repeat(8, minmax(0, 1fr));
   margin-top: 9px;
   color: #263a4e;
   font-size: 13px;
   font-weight: 700;
   text-align: center;
}

.audio-channel-x-axis::before
{
   content: "";
}

.audio-channel-x-label
{
   min-width: 0;
}

.audio-channel-insight
{
   margin-top: 18px;
   padding: 12px 15px;
   border: 1px solid #e1c65a;
   border-radius: 6px;
   background: #fff6c9;
   color: #3f3a20;
}

.audio-channel-insight-heading
{
   margin-bottom: 4px;
   color: #5b4a00;
   font-size: 14px;
   font-weight: 700;
}

.audio-channel-insight p
{
   margin: 0;
   color: #4d472a;
   font-size: 13px;
   line-height: 1.35;
}


.title-detail-presentation-grid
{
   display: grid;
   grid-template-columns: 1.35fr 1fr 1fr;
   gap: 16px;
   margin-top: 16px;
}

.title-detail-note-line
{
   overflow-wrap: anywhere;
   white-space: normal;
}

.title-detail-technical
{
   min-width: 0;
}

@media (max-width: 1050px) and (min-width: 700px)
{
   .title-detail-hero
   {
      grid-template-columns: 220px 1fr;
   }

   .title-detail-synopsis
   {
      grid-column: 1 / -1;
   }

   .title-detail-presentation-grid
   {
      grid-template-columns: 1fr 1fr;
   }

   .title-detail-technical
   {
      grid-column: 1 / -1;
   }
}


/* ---------------------------------------------------------- */
/* 1080p desktop title-detail ultra-compact mode              */
/* LAST in stylesheet intentionally: these rules must win.    */
/* ---------------------------------------------------------- */

@media (min-width: 1000px)
{
   #title-detail-view
   {
      max-width: 1320px;
      padding: 5px 34px 5px 34px;
   }

   .title-detail-back-top
   {
      margin: 0 0 4px 0;
      font-size: 12px;
      line-height: 1;
   }

   .title-detail-back-bottom
   {
      margin: 4px 0 0 0;
      font-size: 12px;
      line-height: 1;
   }

   .title-detail-hero
   {
      grid-template-columns: 128px minmax(330px, 1fr) minmax(340px, 0.95fr);
      gap: 14px;
      align-items: start;
   }

   .title-detail-poster
   {
      width: 128px;
      height: 190px;
      max-height: 190px;
      object-fit: cover;
   }

   .title-detail-heading-row
   {
      gap: 8px;
      margin: 0 0 3px 0;
   }

   .title-detail-heading-row h1
   {
      margin: 0;
      font-size: 22px;
      line-height: 1;
   }

   .title-detail-rating-badge
   {
      margin-top: 0;
      padding: 1px 6px;
      font-size: 11px;
      line-height: 1.2;
   }

   .title-detail-metadata
   {
      gap: 0;
   }

   .title-detail-metadata p
   {
      margin: 0 0 1px 0;
      font-size: 12px;
      line-height: 1.12;
   }

   .title-detail-synopsis
   {
      padding: 8px 10px;
      min-height: 0;
   }

   .title-detail-synopsis h2
   {
      margin: 0 0 3px 0;
      font-size: 16px;
      line-height: 1.05;
   }

   .title-detail-synopsis p
   {
      margin: 0;
      font-size: 12px;
      line-height: 1.16;
   }

   .title-detail-analysis
   {
      margin-top: 5px;
      padding: 7px 12px 6px 12px;
      min-height: 0;
   }

   .title-detail-analysis h2
   {
      margin: 0;
      font-size: 17px;
      line-height: 1.05;
   }

   .title-detail-analysis-subtitle
   {
      margin: 1px 0 0 0 !important;
      font-size: 11px;
      line-height: 1.05;
   }

   .audio-channel-legend
   {
      height: 12px;
      gap: 14px;
      margin: -11px 0 1px 0;
      font-size: 10px;
      line-height: 1;
   }

   .audio-channel-legend-rms
   {
      width: 9px;
      height: 9px;
   }

   .audio-channel-legend-peak
   {
      width: 15px;
      height: 2px;
   }

   .audio-channel-plot
   {
      grid-template-columns: 38px minmax(0, 1fr);
      height: 125px;
      min-height: 0;
   }

   .audio-channel-y-axis
   {
      font-size: 9px;
   }

   .audio-channel-y-tick
   {
      right: 7px;
   }

   .audio-channel-x-axis
   {
      grid-template-columns: 38px repeat(8, minmax(0, 1fr));
      margin-top: 2px;
      font-size: 10px;
      line-height: 1;
   }

   .audio-channel-rms-bar
   {
      width: 30px;
   }

   .audio-channel-peak-marker
   {
      width: 40px;
      height: 2px;
   }

   .audio-channel-peak-label
   {
      bottom: 3px;
      font-size: 8px;
   }

   .audio-channel-insight
   {
      margin-top: 4px;
      padding: 4px 8px;
      border-radius: 4px;
   }

   .audio-channel-insight-heading
   {
      display: inline;
      margin: 0 6px 0 0;
      font-size: 10px;
      line-height: 1.05;
   }

   .audio-channel-insight p
   {
      display: inline;
      margin: 0;
      font-size: 10px;
      line-height: 1.05;
   }

   .title-detail-presentation-grid
   {
      grid-template-columns: 1.35fr 1fr 1fr;
      gap: 8px;
      margin-top: 5px;
   }

   .title-detail-presentation-grid .title-detail-card
   {
      padding: 6px 9px;
      min-height: 0;
   }

   .title-detail-presentation-grid .title-detail-card h2
   {
      margin: 0 0 2px 0;
      font-size: 15px;
      line-height: 1.05;
   }

   .title-detail-presentation-grid .title-detail-card p
   {
      margin: 0 0 1px 0;
      font-size: 10px;
      line-height: 1.08;
   }
}


/* ---------------------------------------------------------- */
/* 1080p desktop lower dashboard: chart left, details right   */
/* ---------------------------------------------------------- */

@media (min-width: 1100px)
{
   .title-detail-dashboard-lower
   {
      display: grid;
      grid-template-columns: minmax(0, 59fr) minmax(270px, 41fr);
      gap: 8px;
      margin-top: 5px;
      align-items: stretch;
   }

   .title-detail-dashboard-lower .title-detail-analysis
   {
      margin-top: 0;
      height: auto;
   }

   .title-detail-dashboard-lower .audio-channel-plot
   {
      height: 185px;
   }

   .title-detail-dashboard-lower .title-detail-presentation-grid
   {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      gap: 0;
      margin-top: 0;
      min-width: 0;
   }

   .title-detail-dashboard-lower .title-detail-presentation-grid .title-detail-card
   {
      padding: 7px 9px;
   }

   .title-detail-dashboard-lower .title-detail-presentation-grid .title-detail-card h2
   {
      margin: 0 0 3px 0;
      font-size: 15px;
      line-height: 1.05;
   }

   .title-detail-dashboard-lower .title-detail-presentation-grid .title-detail-card p
   {
      margin: 0 0 2px 0;
      font-size: 10px;
      line-height: 1.10;
   }

   .title-detail-dashboard-lower .title-detail-technical
   {
      grid-column: auto;
   }

   .title-detail-back-bottom
   {
      margin-top: 4px;
   }
}


/* ---------------------------------------------------------- */
/* 1080p desktop vertical fill +10%, alignment preserved      */
/* Synopsis-left = Notes-left is locked desktop geometry.     */
/* ---------------------------------------------------------- */

@media (min-width: 1100px)
{
   .title-detail-hero
   {
      /*
       * Keep the Synopsis left edge locked to the 59/41 lower-dashboard
       * divider while reallocating width from metadata to the poster.
       *
       * Poster enlarged from 200px to 250px.  The metadata column absorbs
       * the additional 50px; the Synopsis column and its left edge remain
       * locked to the lower-dashboard geometry.
       */
      grid-template-columns:
         250px
         minmax(0, 1fr)
         minmax(340px, calc(41% - 3.28px));
      gap: 14px;
   }

   .title-detail-poster
   {
      width: 250px;
      height: auto;
      max-height: none;
      aspect-ratio: 2 / 3;
      object-fit: cover;
   }

   .title-detail-synopsis
   {
      min-height: 225px;
   }

   .title-detail-back
   {
      font-size: 14px;
      font-weight: 700;
      padding: 3px 7px;
      border: 1px solid #b9c8d6;
      border-radius: 5px;
      background: #f4f7fa;
      text-decoration: none;
   }

   .title-detail-back:hover
   {
      background: #e9f0f6;
      text-decoration: none;
   }

   .title-detail-synopsis
   {
      background: #f7f9fc;
   }

   .title-detail-dashboard-lower .title-detail-analysis
   {
      background: #f3f7fb;
   }

   .title-detail-dashboard-lower .title-detail-presentation-grid .title-detail-card
   {
      background: #f2f8f2;
   }

   .title-detail-heading-row
   {
      margin-bottom: 5px;
   }

   .title-detail-heading-row h1
   {
      font-size: 26px;
      line-height: 1.02;
      letter-spacing: -0.5px;
   }

   .title-detail-rating-badge
   {
      font-size: 13px;
   }

   .title-detail-metadata p
   {
      margin-bottom: 6px;
      font-size: 14px;
      line-height: 1.22;
   }

   .title-detail-synopsis h2
   {
      font-size: 19px;
   }

   .title-detail-synopsis p
   {
      font-size: 14px;
      line-height: 1.22;
   }

   .title-detail-dashboard-lower .audio-channel-plot
   {
      height: 237px;
   }

   .title-detail-analysis h2
   {
      font-size: 20px;
   }

   .title-detail-analysis-subtitle
   {
      font-size: 13px;
   }

   .audio-channel-legend
   {
      font-size: 12px;
   }

   .audio-channel-y-axis
   {
      font-size: 11px;
   }

   .audio-channel-x-axis
   {
      font-size: 12px;
   }

   .audio-channel-peak-label
   {
      font-size: 10px;
   }

   .audio-channel-insight-heading
   {
      font-size: 12px;
   }

   .audio-channel-insight p
   {
      font-size: 12px;
   }

   .title-detail-dashboard-lower .title-detail-presentation-grid .title-detail-card h2
   {
      font-size: 18px;
   }

   .title-detail-dashboard-lower .title-detail-presentation-grid .title-detail-card p
   {
      font-size: 12px;
   }
}

/* Technical Details & Notes readability */
@media (min-width: 1100px)
{
   .title-detail-dashboard-lower
      .title-detail-presentation-grid
      .title-detail-card h2
   {
      margin-bottom: 6px;
      font-size: 20px;
      line-height: 1.10;
   }

   .title-detail-dashboard-lower
      .title-detail-presentation-grid
      .title-detail-card p
   {
      margin-bottom: 5px;
      font-size: 14px;
      line-height: 1.22;
   }

   .title-detail-dashboard-lower
      .title-detail-presentation-grid
      .title-detail-note-line strong
   {
      display: inline-block;
      margin-top: 5px;
      font-size: 18px;
   }

   .title-detail-dashboard-lower
      .title-detail-presentation-grid
      .title-detail-note-line:first-of-type strong
   {
      margin-top: 0;
   }
}