/* ------------------------------------------------------------------
   GLOBAL TYPOGRAPHY & LAYOUT
   ------------------------------------------------------------------*/
   @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto+Mono:wght@300;700&display=swap");

   html,body{
     margin:0;
     padding:0;
     overflow-x: hidden;
     width: 100%;
   }
   body{
     background:#fdfaf4;
     font-family:'Playfair Display',serif;
     color:#1b1b1b;
   }
   
   /* Give padding back to the article body only – not the full‑screen hero */
   .page-content{padding:60px 30px}
   
   /* ------------------------------------------------------------------
      HERO  (always fills viewport – no white bars)
      ------------------------------------------------------------------*/
   header.full-page-image{height:100vh;width:100%;position:relative;overflow:hidden}
   /* 👇 overlay to darken the video */
   header.full-page-image .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.28);z-index:-1}
   header.full-page-image .bottom-overlay{
     position:absolute;
     bottom:0;
     left:0;
     width:100%;
     height:40%;
     background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
     z-index:1;
     display: flex;
     align-items: flex-end;
     padding-bottom: 40px;
   }
   header.full-page-image .bottom-overlay h1 {
     margin: 0;
     color: white;
   }
   #bg-video{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     object-fit:cover;
     opacity:0;
     transition:opacity 1s ease;
     z-index:-1
    }
   
   /* ------------------------------------------------------------------
      TABLE‑OF‑CONTENTS  (show on ≥ 1000 px)
      ------------------------------------------------------------------*/
   .toc{
     width:180px;
     font-family:'Roboto Mono',monospace;
     position:fixed;
     top:250px;
     left:25px;
     z-index:1000;
     display:none;
   }
   @media(min-width:1000px){.toc{display:block}}
   .toc h3{font-family:'Playfair Display',serif;font-size:24px;margin:0 0 10px}
   .toc ul{list-style:none;margin:0;padding:0}
   .toc li{margin:0 0 10px}
   .toc a{color:#333;text-decoration:none;font-size:16px}
   .toc a:hover{text-decoration:underline;color:#000}
   .toc hr{border:0;height:1px;background:#ccc;margin:0 0 15px}
   
   /* ------------------------------------------------------------------
      MAIN ARTICLE BLOCKS
      ------------------------------------------------------------------*/
   .main-content{max-width:1280px;margin:0 auto}
   .main-content,.hero-text,.sub-hero-text,.authors,.quick-links,.section,.figure-caption,.bibtex-code{position:relative;z-index:2}
   .hero-text{font-size:60px;font-weight:700;letter-spacing:-1px;line-height:1.1;margin:0 0 10px}
   .sub-hero-text{
     font-size:40px;
     font-weight:400;
     line-height:1.2;
     margin:60px 0 50px;
   }
   
   /* AUTHORS */
   .authors{font-family:'Roboto Mono',monospace;font-size:16px;color:#333;line-height:1.6;margin:-32.5px 0 17.5px;text-align:left}
   .authors span{display:block;font-size:14px;color:#555}
   .authors .affiliation{font-weight:600;font-size:16px;color:#111}
   .authors a{color:inherit;text-decoration:none}
   .authors a:hover{text-decoration:underline}
   
   /* TAGLINES / SUBTITLES */
   .tagline{font-family:'Roboto Mono',monospace;font-size:24px;background:#000;color:#fff;display:inline-block;padding:8px 16px;margin:40px 0}
   .section-subtitle{font-family:'Roboto Mono',monospace;font-size:20px;background:#000;color:#fff;display:inline-block;padding:6px 14px;margin:30px 0}
   
   /* QUICK LINKS */
   .quick-links{text-align:center;margin:-10px 0 30px}
   .quick-links a{font-family:'Roboto Mono',monospace;font-size:18px;font-weight:bold;color:#333;margin:0 36px;text-decoration:none}
   .quick-links a:hover{text-decoration:underline;color:#000}
   
   /* IMAGE DEFAULTS */
   img{width:100%;box-shadow:0 4px 12px rgba(0,0,0,.15);border-radius:15px;margin:0 20px;box-sizing:border-box}
   .main-content>img{margin:0}
   
   /* VIDEO GALLERY – unchanged core rules (trimmed for brevity) */
   .video-gallery-section{margin:40px 0;width:100vw;position:relative;left:50%;transform:translateX(-50%)}
   .video-gallery-container{box-sizing:border-box;max-width:1350px;margin:0 auto;overflow-x:auto;scroll-behavior:smooth}
   .video-gallery-container::-webkit-scrollbar{display:none}
   .video-gallery{display:flex;gap:15px;padding:0 20px 10px;width:max-content;margin:0 auto}
   .gallery-video{flex:0 0 auto;height:280px;width:auto;border-radius:15px;box-shadow:0 4px 12px rgba(0,0,0,.15);background:#fdfaf4}

   .gallery-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
   }

   /* Single video gallery styles */
   .video-gallery-container.single-video .video-gallery {
     width: 100%;
     justify-content: center;
   }
   .video-gallery-container.single-video .gallery-video {
     height: 480px;
     flex: 0 0 auto;
     max-width: 85%;
   }
   .gallery-nav{background:rgba(40,40,40,.8);color:#fff;border:none;border-radius:50%;width:35px;height:35px;font:700 20px/35px sans-serif;cursor:pointer;margin:0 5px}
   .gallery-nav:hover{background:#000}
   .gallery-caption-container{max-width:1280px;margin:15px auto 0;padding:0 20px;display:flex;align-items:flex-start;justify-content:center}
   .figure-caption.gallery-caption{flex:1;margin:0;text-align:left;font-family:'Roboto Mono',monospace;font-size:14px;color:#555}
   .figure-caption {
      font-family: 'Roboto Mono', monospace;
      font-size: 14px;
      color: #555;
      text-align: left;
      margin-top: 1px; /* Space above caption */
      margin-bottom: 36px; /* Space below caption, before next element */
      padding: 0 20px; /* Add some horizontal padding */
    }
   /*.gallery-caption-row {*/
   /*    display: flex;*/
   /*    gap: 15px; !* Should match the gap in .r2s-video-row *!*/
   /*    justify-content: center; !* Should match justify-content in .r2s-video-row *!*/
   /*    margin-top: -15px; !* Small space between videos and captions *!*/
   /*}*/

   /*.gallery-caption-item {*/
   /*    flex-grow: 1; !* Allow caption item to grow, similar to video slots *!*/
   /*    flex-basis: 0;*/
   /*    text-align: center; !* Center text within its slot *!*/
   /*    font-size: 13px; !* Adjust as needed *!*/
   /*    color: #555; !* Adjust as needed *!*/
   /*    font-family: 'Roboto Mono', monospace;*/
   /*    !* Optional: to better align with video slots if they have borders/padding *!*/
   /*    !* padding: 0 5px; *!*/
   /*}*/
   
   /* R2S LAYOUT – kept (unchanged) */
   .r2s-vertical-layout{display:flex;flex-direction:column;gap:10px;margin:0 0 5px;box-sizing:border-box}
   /* (other r2s rules unchanged…) */
   
   .r2s-grid-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 15px;
   }

   .r2s-grid-item {
     width: 300px;
     text-align: center;
   }

   .r2s-video-caption {
     margin-top: 10px;
     font-family: 'Roboto Mono', monospace;
     font-size: 14px;
     color: #555;
   }

   /* Interactive viewer buttons */
   .task-selector {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 10px;
     margin-bottom: 20px;
   }

   .task-button {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 6px;
     padding: 8px 16px;
     font-family: 'Roboto Mono', monospace;
     font-size: 14px;
     cursor: pointer;
     transition: background-color 0.2s, color 0.2s;
   }

   .task-button:hover {
     background-color: #f0f0f0;
   }

   .task-button.active {
     background-color: #000;
     color: #fff;
     border-color: #000;
   }

   .viewer-container {
     display: flex;
     gap: 20px;
   }

   #task-viewer {
     flex: 3; /* Takes up 3/4 of the space */
   }

   .viewer-main {
     flex: 3;
     display: flex;
     flex-direction: column;
   }

   .viewer-main #task-viewer {
       flex-grow: 1;
   }

   .viewer-main p {
       margin: 0 0 5px 0;
       font-family: 'Roboto Mono', monospace;
       font-size: 14px;
       text-align: center;
       flex-shrink: 0;
   }

   .media-column {
     flex: 1; /* Takes up 1/4 of the space */
     display: flex;
     flex-direction: column;
     gap: 10px;
   }

   .media-item {
     display: flex;
     flex-direction: column;
     height: calc((500px - 20px) / 3); /* Account for gaps to match iframe height */
   }

   .media-item p {
     margin: 0 0 5px 0;
     font-family: 'Roboto Mono', monospace;
     font-size: 14px;
     text-align: center;
     flex-shrink: 0; /* Prevent label from shrinking */
   }

   .media-item img,
   .media-item video {
     width: 100%;
     flex-grow: 1; /* Fill remaining space */
     min-height: 0; /* Prevent overflow */
     object-fit: cover;
     border-radius: 6px;
     margin: 0 20px;
     box-sizing: border-box;
     box-shadow: 0 4px 12px rgba(0,0,0,.15);
   }

   .section{font-size:20px;line-height:1.7;margin:0 0 40px}
   .pull-quote{font-size:32px;font-style:italic;font-weight:400;margin:60px 0 20px;color:#333}
   
   /* FOOTER */
   .footer{font-size:14px;font-family:'Roboto Mono',monospace;color:#666;margin:80px 0 0;border-top:1px solid #ccc;padding:30px;text-align:center}
   
   /* BIBTEX BOX */
   .bibtex-code{background:rgba(80,80,80,.8);color:#f1f1f1;padding:20px;border-radius:8px;max-width:1280px;margin:80px auto 0;font-size:14px;box-sizing:border-box}
   .bibtex-title{font-family:'Courier New',Courier,monospace;font-weight:700;font-size:1.15em;margin:0 0 10px;color:#f1f1f1}
   .bibtex-code pre{white-space:pre-wrap;overflow-wrap:break-word;margin:0}
   .bibtex-code code{font-family:'Courier New',Courier,monospace;overflow-wrap:break-word}
   
   /* Scroll indicator arrow */
   .scroll-indicator {
     position: absolute;
     bottom: 30px;
     right: 30px;
     z-index: 10;
     color: white;
     font-size: 64px;
     animation: bounce 2s infinite;
     cursor: pointer;
     opacity: 0.8;
     transition: opacity 0.3s ease;
   }

   .scroll-indicator:hover {
     opacity: 1;
   }

   @keyframes bounce {
     0%, 20%, 50%, 80%, 100% {
       transform: translateY(0);
     }
     40% {
       transform: translateY(-10px);
     }
     60% {
       transform: translateY(-5px);
     }
   }